Polkaswap merge only

package.json

@@ -1,6 +1,6 @@
 {
   "name": "polkaswap-exchange-web",
-  "version": "1.13.0",
+  "version": "1.15.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/sora-xor/polkaswap-exchange-web.git"
@@ -25,12 +25,14 @@
   },
   "dependencies": {
     "@metamask/detect-provider": "^2.0.0",
-    "@soramitsu/soraneo-wallet-web": "1.13.1",
+    "@soramitsu/soraneo-wallet-web": "1.15.4",
     "@walletconnect/web3-provider": "^1.8.0",
     "base-64": "^1.0.0",
     "core-js": "^3.26.0",
+    "country-code-emoji": "^2.3.0",
     "direct-vuex": "^0.12.1",
     "echarts": "^5.4.1",
+    "email-validator": "^2.0.4",
     "ethers": "^5.7.2",
     "jspdf": "^2.5.1",
     "jspdf-autotable": "^3.5.28",
@@ -44,7 +46,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">
@@ -98,6 +98,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;
@@ -376,7 +377,7 @@ export default class App extends Mixins(mixins.TransactionMixin, NodeErrorMixin)
     // console.dir(value);
     // console.groupEnd();
 
-    const message = this.getMessage(value, this.shouldBalanceBeHidden);
+    const message = this.getOperationMessage(value, this.shouldBalanceBeHidden);
     const isNewTx = !oldValue || oldValue.id !== value.id;
     const recipients = this.recipients.filter((item) => item.txId === value.id);
 

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,20 @@
             <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"
+                tabindex="-1"
+                :href="item.href"
+                :icon="item.icon"
+                :title="t(`mainMenu.${item.title}`)"
+                @click.native="preventAnchorNavigation"
+              />
             </s-menu-item>
           </s-menu-item-group>
         </s-menu>
@@ -77,13 +88,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: {
@@ -97,6 +109,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;
 
@@ -107,7 +120,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);
   }
@@ -124,17 +137,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>
 
@@ -298,6 +316,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/components/SelectAsset/SelectToken.vue

@@ -196,7 +196,7 @@ export default class SelectToken extends Mixins(TranslationMixin, SelectAssetMix
 
   handleTabChange(name: Tabs): void {
     this.tabValue = name;
-    this.handleClearSearch();
+    this.clearAndFocusSearch();
   }
 }
 </script>

src/components/SelectNetwork.vue

@@ -3,7 +3,7 @@
     <p class="networks-info">{{ t('bridge.networkInfo') }}</p>
     <s-radio-group v-model="selectedNetworkId">
       <s-radio v-for="network in subNetworks" :key="network.id" :label="network.id" class="network">
-        <span class="network-name">{{ t(`bridge.${network.name}`) }}</span>
+        <span class="network-name">{{ TranslationConsts.evmNetwork[network.name] }}</span>
         <token-logo :token-symbol="network.symbol" />
       </s-radio>
     </s-radio-group>

src/components/SidebarItemContent.vue

@@ -1,5 +1,5 @@
 <template>
-  <component :is="tag" :class="classes">
+  <component :is="tag" :class="classes" :tabindex="tabindex">
     <!-- TODO: [TECH] move from fonts provided values -->
     <div v-if="icon === 'sora-card'" class="icon-container">
       <side-menu-card class="sora-card-sidebar-icon" />
@@ -26,6 +26,7 @@ export default class SidebarItemContent extends Mixins(TranslationMixin) {
   @Prop({ default: '', type: String }) readonly icon!: string;
   @Prop({ default: '', type: String }) readonly title!: string;
   @Prop({ default: 'div', type: String }) readonly tag!: string;
+  @Prop() readonly tabindex!: string | number;
 
   get classes(): Array<string> {
     const base = 'sidebar-item-content';
@@ -98,4 +99,7 @@ $icon-size: 42px;
   background-repeat: no-repeat;
   background-position: center center;
 }
+.el-menu-item:not(.is-active):not(.is-disabled):focus .sora-card-sidebar-icon path {
+  fill: var(--s-color-base-content-secondary) !important; // focus state of sora card item
+}
 </style>