improve routing

Jenkinsfile

@@ -11,6 +11,8 @@ def pipeline = new org.js.AppPipeline(steps: this,
     buildDockerImage: 'docker.soramitsu.co.jp/build-tools/node:14-ubuntu-extended',
     dockerRegistryCred: 'bot-polkaswap-rw',
     buildEnvironment: buildEnvironment,
+    sonarProjectName: 'polkaswap-exchange-web',
+    sonarProjectKey: 'jp.co.soramitsu:polkaswap-exchange-web',
     secretScannerExclusion: 'Jenkinsfile-UCAN',
     copyStaticToBranch: true,
     copyToBranches: ['fleek-pre', 'fleek'],

package.json

@@ -41,7 +41,7 @@
     "vue-i18n": "^8.11.2",
     "vue-plugin-load-script": "^2.x.x",
     "vue-property-decorator": "^9.1.2",
-    "vue-router": "^3.5.3",
+    "vue-router": "^3.6.5",
     "vuex": "^3.1.3"
   },
   "devDependencies": {

scripts/generateLocaleJson.ts

@@ -1,35 +1,35 @@
-import fs from 'fs'
-import { JSDOM } from 'jsdom'
+import fs from 'fs';
+import { JSDOM } from 'jsdom';
 
 // Mock browser dependencies for imported libraries
-const dom = new JSDOM()
-global.document = dom.window.document as any
-global.window = dom.window as any
-global.localStorage = { getItem: () => {} } as any
+const dom = new JSDOM();
+global.document = dom.window.document as any;
+global.window = dom.window as any;
+global.localStorage = { getItem: () => {} } as any;
 
-function format (obj: any, formatted: any) {
+function format(obj: any, formatted: any) {
   for (const key of Object.keys(obj)) {
-    const value = obj[key]
-    if (typeof (value) === 'string') {
-      formatted[key] = value
+    const value = obj[key];
+    if (typeof value === 'string') {
+      formatted[key] = value;
     } else {
-      formatted[key] = {}
-      format(value, formatted[key])
+      formatted[key] = {};
+      format(value, formatted[key]);
       if (!Object.keys(formatted[key]).length) {
-        delete formatted[key]
+        delete formatted[key];
       }
     }
   }
 }
 
-(async function main () {
-  const buildDir = './src/lang'
+(async function main() {
+  const buildDir = './src/lang';
   if (!fs.existsSync(buildDir)) {
-    fs.mkdirSync(buildDir)
+    fs.mkdirSync(buildDir);
   }
-  const langObj = (await import('../src/lang/messages')).default
-  const formatted = {} as any
-  format(langObj, formatted)
-  fs.writeFileSync(`${buildDir}/en.json`, JSON.stringify(formatted, null, 4))
-  console.log(`${buildDir}/en.json created!`)
-})()
+  const langObj = (await import('../src/lang/messages')).default;
+  const formatted = {} as any;
+  format(langObj, formatted);
+  fs.writeFileSync(`${buildDir}/en.json`, JSON.stringify(formatted, null, 4));
+  console.info(`${buildDir}/en.json created!`);
+})();

src/App.vue

@@ -12,7 +12,7 @@
         <app-logo-button slot="head" class="app-logo--menu" :theme="libraryTheme" @click="goToSwap" />
       </app-menu>
       <div class="app-body" :class="{ 'app-body__about': isAboutPage }">
-        <s-scrollbar class="app-body-scrollbar">
+        <s-scrollbar class="app-body-scrollbar" v-loading="pageLoading">
           <div v-if="blockNumber && !isCurrentPageTooWide" class="block-number">
             <s-tooltip :content="t('blockNumberText')" placement="bottom" tabindex="-1">
               <a class="block-number-link" :href="blockExplorerLink" target="_blank" rel="nofollow noopener">
@@ -108,6 +108,7 @@ export default class App extends Mixins(mixins.TransactionMixin, NodeErrorMixin)
   @state.settings.browserNotifPopupVisibility browserNotifPopup!: boolean;
   @state.settings.browserNotifPopupBlockedVisibility browserNotifPopupBlocked!: boolean;
   @state.settings.blockNumber blockNumber!: number;
+  @state.router.loading pageLoading!: boolean;
 
   @getter.wallet.transactions.firstReadyTx firstReadyTransaction!: Nullable<HistoryItem>;
   @getter.wallet.account.isLoggedIn isSoraAccountConnected!: boolean;

src/components/App/Menu/AppMenu.vue

@@ -1,5 +1,8 @@
 <template>
-  <s-scrollbar class="app-menu app-sidebar-scrollbar" :class="{ visible, 'app-menu__about': isAboutPageOpened }">
+  <s-scrollbar
+    class="app-menu app-sidebar-scrollbar"
+    :class="{ visible, 'app-menu__about': isAboutPageOpened, 'app-menu__loading': pageLoading }"
+  >
     <aside class="app-sidebar">
       <slot name="head"></slot>
       <div class="app-sidebar-menu">
@@ -18,12 +21,19 @@
             <s-menu-item
               v-button
               :key="item.title"
-              :index="item.title"
+              :index="item.index || item.title"
               :disabled="item.disabled"
               tabindex="0"
               class="menu-item"
             >
-              <sidebar-item-content :icon="item.icon" :title="t(`mainMenu.${item.title}`)" />
+              <sidebar-item-content
+                tag="a"
+                rel="nofollow noopener"
+                :href="item.href"
+                :icon="item.icon"
+                :title="t(`mainMenu.${item.title}`)"
+                @click.native="preventAnchorNavigation"
+              />
             </s-menu-item>
           </s-menu-item-group>
         </s-menu>
@@ -95,13 +105,14 @@ import {
   StakingChildPages,
   ExploreChildPages,
   SidebarMenuGroups,
-  SidebarMenuItem,
+  SidebarMenuItemLink,
   FaucetLink,
   Components,
 } from '@/consts';
 
 import { lazyComponent } from '@/router';
 import { getter, state } from '@/store/decorators';
+import { DemeterPageNames } from '@/modules/demeterFarming/consts';
 
 @Component({
   components: {
@@ -115,6 +126,7 @@ export default class AppMenu extends Mixins(TranslationMixin) {
   @Prop({ default: () => {}, type: Function }) readonly onSelect!: FnWithoutArgs;
 
   @state.settings.faucetUrl faucetUrl!: string;
+  @state.router.loading pageLoading!: boolean;
   @getter.settings.soraCardEnabled private soraCardEnabled!: boolean;
   @getter.libraryTheme private libraryTheme!: Theme;
 
@@ -125,7 +137,7 @@ export default class AppMenu extends Mixins(TranslationMixin) {
     return this.libraryTheme === Theme.LIGHT ? 'var(--s-color-theme-accent)' : 'var(--s-color-theme-accent-focused)';
   }
 
-  get sidebarMenuItems(): Array<SidebarMenuItem> {
+  get sidebarMenuItems(): Array<SidebarMenuItemLink> {
     if (this.soraCardEnabled) return SidebarMenuGroups;
     return SidebarMenuGroups.filter((menuItem) => menuItem.title !== PageNames.SoraCard);
   }
@@ -142,17 +154,22 @@ export default class AppMenu extends Mixins(TranslationMixin) {
       return PageNames.Rewards;
     }
     if (StakingChildPages.includes(currentName)) {
-      return PageNames.StakingContainer;
+      return DemeterPageNames.Staking;
     }
     if (ExploreChildPages.includes(currentName)) {
-      return PageNames.ExploreContainer;
+      return PageNames.ExploreFarming;
     }
     return currentName as string;
   }
 
   openSoraDownloadDialog(): void {
     this.$emit('open-download-dialog');
   }
+
+  /** To ignore left click */
+  preventAnchorNavigation(e?: Event): void {
+    e?.preventDefault();
+  }
 }
 </script>
 
@@ -316,6 +333,10 @@ export default class AppMenu extends Mixins(TranslationMixin) {
         position: relative;
       }
     }
+
+    &__loading {
+      z-index: $app-above-loader-layer;
+    }
   }
 
   &-sidebar {

src/components/Moonpay/MoonpayHistoryButton.vue

@@ -18,7 +18,7 @@ import type { BridgeHistory } from '@sora-substrate/util';
 import BridgeHistoryMixin from '@/components/mixins/BridgeHistoryMixin';
 import TranslationMixin from '@/components/mixins/TranslationMixin';
 
-import router from '@/router';
+import { goTo } from '@/router';
 import { PageNames } from '@/consts';
 import { state, mutation } from '@/store/decorators';
 
@@ -58,7 +58,7 @@ export default class MoonpayHistoryButton extends Mixins(BridgeHistoryMixin, Tra
     if (this.isReadyForTransfer) {
       this.setConfirmationVisibility(true);
     } else {
-      router.push({ name: PageNames.MoonpayHistory });
+      goTo(PageNames.MoonpayHistory);
     }
   }
 }

src/consts/index.ts

@@ -226,54 +226,72 @@ export interface SidebarMenuItem {
   icon?: string;
   title: string;
   disabled?: boolean;
+  /**
+   * When page has a redirection it's better to set the final route to avoid errors from router.
+   *
+   * So, when the final route is different from title `index` should be used for menu
+   */
+  index?: string;
 }
 
-interface SidebarMenuItemLink extends SidebarMenuItem {
+export interface SidebarMenuItemLink extends SidebarMenuItem {
+  /** It's required for href if it's used */
   href?: string;
 }
 
-const MainMenu: Array<SidebarMenuItem> = [
+const MainMenu: Array<SidebarMenuItemLink> = [
   {
     icon: 'arrows-swap-90-24',
     title: PageNames.Swap,
+    href: '/#/swap',
   },
   {
     icon: 'basic-drop-24',
     title: PageNames.Pool,
+    href: '/#/pool',
   },
   {
     icon: 'basic-layers-24',
     title: PageNames.StakingContainer,
+    href: '/#/staking',
+    index: DemeterPageNames.Staking,
   },
   {
     icon: 'grid-block-distribute-vertically-24',
     title: PageNames.Bridge,
+    href: '/#/bridge',
   },
 ];
 
-const AccountMenu: Array<SidebarMenuItem> = [
+const AccountMenu: Array<SidebarMenuItemLink> = [
   {
     icon: 'finance-wallet-24',
     title: PageNames.Wallet,
+    href: '/#/wallet',
   },
   {
     icon: 'basic-circle-star-24',
     title: PageNames.Rewards,
+    href: '/#/rewards',
   },
 ];
 
-const OtherPagesMenu: Array<SidebarMenuItem> = [
+const OtherPagesMenu: Array<SidebarMenuItemLink> = [
   {
     icon: 'various-items-24',
     title: PageNames.ExploreContainer,
+    href: '/#/explore',
+    index: PageNames.ExploreFarming,
   },
   {
     icon: 'sora-card',
     title: PageNames.SoraCard,
+    href: '/#/card',
   },
   {
     icon: 'file-file-text-24',
     title: PageNames.About,
+    href: '/#/about',
   },
 ];
 
@@ -351,10 +369,10 @@ export const RewardsChildPages = [
 
 export const StakingChildPages = [DemeterPageNames.Staking];
 export const ExploreChildPages = [
-  PageNames.ExploreTokens,
-  PageNames.ExplorePools,
-  PageNames.ExploreFarming,
+  PageNames.ExploreFarming, // By default
   PageNames.ExploreStaking,
+  PageNames.ExplorePools,
+  PageNames.ExploreTokens,
 ];
 
 export enum Topics {

src/router/index.ts

@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import VueRouter, { NavigationGuardNext, RouteConfig } from 'vue-router';
+import VueRouter, { RouteConfig } from 'vue-router';
 import { WALLET_CONSTS } from '@soramitsu/soraneo-wallet-web';
 import { api } from '@sora-substrate/util';
 
@@ -17,18 +17,30 @@ const WALLET_DEFAULT_ROUTE = WALLET_CONSTS.RouteNames.Wallet;
 const lazyComponent = (name: string) => () => import(`@/components/${name}.vue`);
 const lazyView = (name: string) => () => import(`@/views/${name}.vue`);
 
-function goTo(name: PageNames): void {
+/**
+ * Use this function instead just `router.push` when page loading is required.
+ *
+ * It checks wallet routing, page loading and the current route.
+ * if the current route isn't the same as param, then it will wait for `router.push`
+ */
+async function goTo(name: PageNames): Promise<void> {
+  const current = router.currentRoute.name;
   if (name === PageNames.Wallet) {
     if (!store.getters.wallet.account.isLoggedIn) {
       store.commit.wallet.router.navigate({ name: WALLET_CONSTS.RouteNames.WalletConnection });
     } else if (store.state.wallet.router.currentRoute !== WALLET_DEFAULT_ROUTE) {
       store.commit.wallet.router.navigate({ name: WALLET_DEFAULT_ROUTE });
     }
   }
-  if (router.currentRoute.name === name) {
+  if (current === name) {
     return;
   }
-  router.push({ name });
+  try {
+    store.commit.router.setLoading(true);
+    await router.push({ name });
+  } finally {
+    store.commit.router.setLoading(false);
+  }
 }
 
 const routes: Array<RouteConfig> = [

src/store/router/mutations.ts

@@ -1,12 +1,15 @@
 import { defineMutations } from 'direct-vuex';
 
-import type { RouterState } from './types';
+import type { RouterState, RouterParams } from './types';
 
 const mutations = defineMutations<RouterState>()({
-  setRoute(state, params: RouterState): void {
+  setRoute(state, params: RouterParams): void {
     state.prev = params.prev;
     state.current = params.current;
   },
+  setLoading(state, loading: boolean): void {
+    state.loading = loading;
+  },
 });
 
 export default mutations;

src/store/router/state.ts

@@ -4,6 +4,7 @@ function initialState(): RouterState {
   return {
     current: null,
     prev: null,
+    loading: false,
   };
 }
 

src/store/router/types.ts

@@ -1,6 +1,10 @@
 import type { PageNames } from '@/consts';
 
-export type RouterState = {
+export type RouterParams = {
   prev?: Nullable<PageNames>;
   current?: Nullable<PageNames>;
 };
+
+export type RouterState = RouterParams & {
+  loading: boolean;
+};

src/styles/_layout.scss

@@ -26,3 +26,5 @@ $app-background-layer: -1;
 $app-body-layer: 0;
 $app-content-layer: 1;
 $app-sidebar-layer: 4;
+$app-loader-layer: 2000;
+$app-above-loader-layer: 2001;