fix: 🐛 remove # from url and add language into url

remove # from url  and add language into url

✅ Closes: #86

src/app/app-routing.module.ts

@@ -3,28 +3,28 @@ import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
 
 const routes: Routes = [
   {
-    path: 'swap',
+    path: ':lang/swap',
     loadChildren: () =>
       import('./swap/swap.module').then((m) => m.SwapPageModule),
   },
   {
-    path: 'liquid',
+    path: ':lang/liquid',
     loadChildren: () =>
       import('./liquid/liquid.module').then((m) => m.LiquidPageModule),
   },
   {
-    path: 'income',
+    path: ':lang/income',
     loadChildren: () =>
       import('./income/income.module').then((m) => m.IncomePageModule),
   },
   {
-    path: 'cofi',
+    path: ':lang/cofi',
     loadChildren: () =>
       import('./cofi/cofi.module').then((m) => m.CofiPageModule),
   },
   {
     path: '',
-    redirectTo: '/swap',
+    redirectTo: ':lang/swap',
     pathMatch: 'full',
   },
 ];
@@ -33,7 +33,7 @@ const routes: Routes = [
   imports: [
     RouterModule.forRoot(routes, {
       preloadingStrategy: PreloadAllModules,
-      useHash: true,
+      //useHash: true,
     }),
   ],
   exports: [RouterModule],

src/app/app.component.ts

@@ -74,6 +74,9 @@ export class AppComponent implements OnInit {
   }
 
   ngOnInit() {
-    this.router.navigateByUrl(this.shareStateQuery.getValue().activeTab);
+    this.router.navigateByUrl(
+      `${this.shareStateQuery.getValue().lang}/` +
+        this.shareStateQuery.getValue().activeTab
+    );
   }
 }

src/app/common/components/header/header.page.ts

@@ -11,6 +11,7 @@ import { EventBusService } from 'src/app/service/eventbus.service';
 import { Router } from '@angular/router';
 import { fromEvent, Subscription } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
+import { ShareStateQuery } from '../../state/share.query';
 @Component({
   selector: 'app-header',
   templateUrl: './header.page.html',
@@ -42,6 +43,7 @@ export class HeaderPage implements OnInit, OnDestroy {
   constructor(
     private shareStateService: ShareStateService,
     private eventbusService: EventBusService,
+    private shareStateQuery: ShareStateQuery,
     private router: Router
   ) {
     this.eventbusService.on('accountsChanged', (account) => {
@@ -91,7 +93,9 @@ export class HeaderPage implements OnInit, OnDestroy {
 
   selectTab(tabId) {
     this.shareStateService.updateActiveTab(tabId);
-    this.router.navigateByUrl(tabId);
+    this.router.navigateByUrl(
+      `${this.shareStateQuery.getValue().lang}/${tabId}`
+    );
   }
   onConnected() {
     this.onRefresh.emit();

src/app/common/components/switch-lang/menu/menu.page.ts

@@ -4,6 +4,7 @@ import { PopoverController } from '@ionic/angular';
 import { ShareStateQuery } from 'src/app/common/state/share.query';
 import { ShareStateService } from 'src/app/common/state/share.service';
 import { FOOTER_ITEMS, LANG_ITEMS } from 'src/app/common/constants';
+import { Router } from '@angular/router';
 @Component({
   selector: 'app-menu',
   templateUrl: './menu.page.html',
@@ -17,7 +18,8 @@ export class MenuPage implements OnInit {
     private translate: TranslateService,
     public shareStateQuery: ShareStateQuery,
     private shareStateService: ShareStateService,
-    private popoverController: PopoverController
+    private popoverController: PopoverController,
+    private router: Router
   ) {}
 
   ngOnInit() {
@@ -28,9 +30,12 @@ export class MenuPage implements OnInit {
   changeLang(lang) {
     this.translate.use(lang);
     this.shareStateService.updateLang(lang);
+
     if (this.style === 'pop') {
       this.popoverController?.dismiss();
     }
+    const tabId = this.router.url.split('/')[2];
+    this.router.navigateByUrl(`${lang}/${tabId}`);
   }
   goto(link) {
     window.open(link);

src/global.scss

@@ -355,7 +355,7 @@ ion-button {
     right: 120px;
   }
   .popover-warning .modal-wrapper {
-    width: 90%;
+    width: 94%;
     min-height: 486px;
   }
   .close-icon {

src/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <title>CoFiX: The most efficient On-Chain Market Making</title>
 
-    <base href="" />
+    <base href="/" />
 
     <meta name="color-scheme" content="light dark" />
     <meta