Merge pull request #395 from soramitsu/release/1.0.22

env.json

@@ -2,7 +2,6 @@
   "BASE_API_URL": "",
   "API_KEYS": {
     "moonpay": "pk_live_LEyw9bsfK0n0v3cdHUaZS1z0qYdDRDu6",
-    "x1ex": "sprkwdgt-WUQBA5U2",
     "etherscan": "XBS98SSP8J5FNS7EKQHMHRU94Z2YG7HFFK",
     "nftStorage": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJkaWQ6ZXRocjoweDBmMzgwOTMyQTNDODM3ZDNiN2JEYzBBNTc0NmNkMDlBRGIyNUZGMzQiLCJpc3MiOiJuZnQtc3RvcmFnZSIsImlhdCI6MTY0NTU0MDQ4MTQ5OSwibmFtZSI6Im5mdC1zdG9yYWdlLXByb2QifQ.CnW1bq8eWEYQxA6cggGMeAqCTozCJZ6s2oL_bssqnmc",
     "googleApi": "AIzaSyCazdRheGfy7_bwVi0m5UgUYjz7l0c54nM",
@@ -55,10 +54,12 @@
   "NETWORK_TYPE": "Prod",
   "CHAIN_GENESIS_HASH": "0x7e4e32d0feafd4f9c9414b0be86373f9a1efa904809b683453a9af6856d38ad5",
   "SUB_NETWORKS": {
-    "Kusama": "wss://kusama-rpc.dwellir.com",
-    "KusamaSora": "wss://ws.parachain-collator-2.c2.sora2.soramitsu.co.jp",
-    "Polkadot": "wss://polkadot-rpc.dwellir.com",
-    "PolkadotSora": "wss://ws.parachain-collator-3.pc3.sora2.soramitsu.co.jp"
+    "Kusama": true,
+    "KusamaSora": true,
+    "Polkadot": true,
+    "PolkadotSora": true,
+    "PolkadotAcala": true,
+    "Liberland": true
   },
   "EVM_NETWORKS_IDS": [56, 8217],
   "ETH_BRIDGE": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "adar",
-  "version": "1.0.21",
+  "version": "1.0.22",
   "repository": {
     "type": "git",
     "url": "https://github.com/soramitsu/adar.git"
@@ -26,17 +26,18 @@
     "test:all": "yarn test:unit --coverage"
   },
   "dependencies": {
+    "@cedelabs/widgets-universal": "^1.3.1",
     "@metamask/detect-provider": "^2.0.0",
-    "@soramitsu/soraneo-wallet-web": "1.32.8-beta.1",
-    "@walletconnect/ethereum-provider": "^2.11.2",
+    "@soramitsu/soraneo-wallet-web": "1.35.2",
+    "@walletconnect/ethereum-provider": "^2.12.2",
     "@walletconnect/modal": "^2.6.2",
-    "core-js": "^3.36.0",
+    "core-js": "^3.37.0",
     "country-code-emoji": "^2.3.0",
     "country-flag-emoji-polyfill": "^0.1.8",
     "direct-vuex": "^0.12.1",
     "echarts": "^5.5.0",
     "email-validator": "^2.0.4",
-    "ethers": "6.8.0",
+    "ethers": "6.12.1",
     "jspdf": "^2.5.1",
     "jspdf-autotable": "^3.5.28",
     "papaparse": "^5.3.2",
@@ -45,19 +46,19 @@
     "uuidv4": "^6.2.13",
     "vue": "2.7.14",
     "vue-class-component": "^7.2.6",
-    "vue-echarts": "^6.6.9",
+    "vue-echarts": "^6.7.1",
     "vue-i18n": "^8.28.2",
     "vue-property-decorator": "^9.1.2",
     "vue-router": "^3.6.5",
     "vuex": "^3.6.2"
   },
   "devDependencies": {
-    "@babel/runtime": "^7.23.9",
+    "@babel/runtime": "^7.24.5",
     "@types/electron-devtools-installer": "^2.2.5",
     "@types/jest": "^29.5.12",
     "@types/jsdom": "^21.1.6",
-    "@types/lodash": "^4.14.202",
-    "@types/node": "^20.11.21",
+    "@types/lodash": "^4.17.3",
+    "@types/node": "^20.12.10",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
     "@vue/cli-plugin-babel": "5.0.8",
@@ -75,10 +76,10 @@
     "@vue/vue2-jest": "^27.0.0",
     "babel-plugin-require-context-hook": "^1.0.0",
     "css-unicode-loader": "^1.0.3",
-    "electron": "^13.0.0",
+    "electron": "^30.0.6",
     "electron-devtools-installer": "^3.2.0",
     "eslint": "^7.32.0",
-    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-promise": "^5.2.0",
@@ -89,10 +90,10 @@
     "lint-staged": "^9.5.0",
     "node-polyfill-webpack-plugin": "^3.0.0",
     "prettier": "^2.8.8",
-    "sass": "^1.71.1",
-    "sass-loader": "^14.1.1",
+    "sass": "^1.77.0",
+    "sass-loader": "^14.2.1",
     "ts-jest": "^27.1.5",
-    "typescript": "~5.3.3",
+    "typescript": "~5.4.5",
     "vue-cli-plugin-electron-builder": "^3.0.0-alpha.4",
     "vue-cli-plugin-test-attrs": "^0.1.5",
     "vue-template-compiler": "2.7.14"

public/env.json

@@ -2,7 +2,6 @@
   "BASE_API_URL": "",
   "API_KEYS": {
     "moonpay": "pk_test_4ASGxHKGpLPE6sdQq1V3QjtpUFSpWLk",
-    "x1ex": "sprkwdgt-WYL6QBNC",
     "nftStorage": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJkaWQ6ZXRocjoweDBmMzgwOTMyQTNDODM3ZDNiN2JEYzBBNTc0NmNkMDlBRGIyNUZGMzQiLCJpc3MiOiJuZnQtc3RvcmFnZSIsImlhdCI6MTY0MjU4OTQ2ODA4MSwibmFtZSI6Im5mdC1zdG9yYWdlLWRldiJ9.hkvzea9ltcriXXHKoYd3F2Iu1Y8X5H-zunAQboC_3vw",
     "etherscan": "YBR7IWEBEXFICT8M7GRV77NBX4AXJ9T53H",
     "googleApi": "AIzaSyAzj7JxB-j8pJixtt6JSqLPhG0y02CGYOU",
@@ -34,19 +33,40 @@
       "chain": "SORA-dev Testnet #3",
       "name": "SORA",
       "address": "wss://ws.framenode-3.r0.dev.sora2.soramitsu.co.jp"
+    },
+    {
+      "chain": "SORA-dev Liberland",
+      "name": "SORA",
+      "address": "wss://ws.framenode-1.lib1.dev.sora2.soramitsu.co.jp"
     }
   ],
   "SUBQUERY_ENDPOINT": "https://api.subquery.network/sq/sora-xor/sora-test",
-  "SUBSQUID_ENDPOINT": "https://squid.subsquid.io/sora-dev/v/v1/graphql",
+  "SUBSQUID_ENDPOINT": "https://sora.squids.live/sora-dev/v/v1/graphql",
   "NETWORK_TYPE": "Dev",
   "CHAIN_GENESIS_HASH": "",
   "EVM_NETWORKS_IDS": [97, 1001],
   "SUB_NETWORKS": {
-    "Rococo": "wss://ws.relaychain-node-1.r1.dev.sora2.soramitsu.co.jp",
-    "RococoSora": "wss://ws.parachain-collator-1.c1.dev.sora2.soramitsu.co.jp",
-    "Kusama": "wss://kusama-rpc.polkadot.io",
-    "KusamaSora": "wss://ws.parachain-collator-1.c1.sora2.soramitsu.co.jp",
-    "Polkadot": "wss://rpc.polkadot.io"
+    "Rococo": [
+      {
+        "chain": "Rococo Dev Testnet",
+        "name": "Soramitsu",
+        "address": "wss://ws.relaychain-node-1.r1.dev.sora2.soramitsu.co.jp"
+      }
+    ],
+    "RococoSora": [
+      {
+        "chain": "SORA Rococo Parachain Dev Testnet",
+        "name": "Soramitsu",
+        "address": "wss://ws.parachain-collator-1.c1.dev.sora2.soramitsu.co.jp"
+      }
+    ],
+    "Liberland": [
+      {
+        "chain": "Liberland Dev Testnet",
+        "name": "Soramitsu",
+        "address": "wss://ws.liberland-node-1.lib1.dev.sora2.soramitsu.co.jp"
+      }
+    ]
   },
   "ETH_BRIDGE": {
     "evmNetwork": 11155111,

public/marketing.json

@@ -2,7 +2,7 @@
   {
     "title": "GET SORA CARD",
     "img": "/marketing/card.png",
-    "link": "/#/card"
+    "link": "https://soracard.com"
   },
   {
     "title": "CONNECT WITH GOOGLE",

src/App.vue

@@ -46,6 +46,8 @@ import {
   WALLET_CONSTS,
   WALLET_TYPES,
   AlertsApiService,
+  initWallet,
+  waitForCore,
 } from '@soramitsu/soraneo-wallet-web';
 import debounce from 'lodash/debounce';
 import { Component, Mixins, Watch } from 'vue-property-decorator';
@@ -55,19 +57,19 @@ import AppFooter from '@/components/App/Footer/AppFooter.vue';
 import AppMenu from '@/components/App/Menu/AppMenu.vue';
 import NodeErrorMixin from '@/components/mixins/NodeErrorMixin';
 import SoraLogo from '@/components/shared/Logo/Sora.vue';
-import { PageNames, Components, Language, BreakpointClass, Breakpoint } from '@/consts';
+import { PageNames, Components, Language, BreakpointClass, Breakpoint, WalletPermissions } from '@/consts';
 import { getLocale } from '@/lang';
 import AppHeader from '@/modules/ADAR/components/App/Header/AppHeader.vue';
 import router, { goTo, lazyComponent } from '@/router';
 import { action, getter, mutation, state } from '@/store/decorators';
 import { getMobileCssClasses, preloadFontFace, updateDocumentTitle } from '@/utils';
+import type { NodesConnection } from '@/utils/connection';
 
 import { AdarPageNames } from './modules/ADAR/consts';
 import { RecipientStatus, SwapTransferBatchStatus, TransactionInfo } from './store/routeAssets/types';
 
 import type { FeatureFlags } from './store/settings/types';
 import type { EthBridgeSettings, SubNetworkApps } from './store/web3/types';
-import type { ConnectToNodeOptions, Node } from './types/nodes';
 import type { History, HistoryItem } from '@sora-substrate/util';
 import type { WhitelistArrayItem } from '@sora-substrate/util/build/assets/types';
 import type { EvmNetwork } from '@sora-substrate/util/build/bridgeProxy/evm/types';
@@ -98,16 +100,17 @@ export default class App extends Mixins(mixins.TransactionMixin, NodeErrorMixin)
   menuVisibility = false;
   showConfirmInviteUser = false;
   showNotifsDarkPage = false;
-  responsiveClass = BreakpointClass.LargeDesktop;
 
+  @state.settings.screenBreakpointClass private responsiveClass!: BreakpointClass;
+  @state.settings.appConnection private appConnection!: NodesConnection;
   @state.settings.browserNotifPopupVisibility private browserNotifPopup!: boolean;
   @state.settings.browserNotifPopupBlockedVisibility private browserNotifPopupBlocked!: boolean;
   @state.wallet.account.assetsToNotifyQueue assetsToNotifyQueue!: Array<WhitelistArrayItem>;
   @state.referrals.storageReferrer storageReferrer!: string;
   @state.settings.disclaimerVisibility disclaimerVisibility!: boolean;
   @state.router.loading pageLoading!: boolean;
 
-  @getter.settings.chartsEnabled private chartsEnabled!: boolean;
+  @getter.settings.nodeIsConnected nodeIsConnected!: boolean;
   @getter.wallet.transactions.firstReadyTx firstReadyTransaction!: Nullable<HistoryItem>;
   @getter.wallet.account.isLoggedIn isSoraAccountConnected!: boolean;
   @getter.libraryTheme libraryTheme!: Theme;
@@ -119,26 +122,23 @@ export default class App extends Mixins(mixins.TransactionMixin, NodeErrorMixin)
     endpoint: string;
   }) => void;
 
-  @mutation.settings.setDefaultNodes private setDefaultNodes!: (nodes: Array<Node>) => void;
-  @mutation.settings.setNetworkChainGenesisHash private setNetworkChainGenesisHash!: (hash?: string) => void;
   @mutation.settings.setFaucetUrl private setFaucetUrl!: (url: string) => void;
   @mutation.settings.setFeatureFlags private setFeatureFlags!: (data: FeatureFlags) => void;
   @mutation.settings.setBrowserNotifsPopupEnabled private setBrowserNotifsPopup!: (flag: boolean) => void;
   @mutation.settings.setBrowserNotifsPopupBlocked private setBrowserNotifsPopupBlocked!: (flag: boolean) => void;
   @mutation.settings.toggleDisclaimerDialogVisibility private toggleDisclaimerDialogVisibility!: FnWithoutArgs;
   @mutation.settings.resetBlockNumberSubscription private resetBlockNumberSubscription!: FnWithoutArgs;
-  @mutation.settings.setScreenBreakpointClass private setScreenBreakpointClass!: (cssClass: string) => void;
+  @mutation.settings.setScreenBreakpointClass private setScreenBreakpointClass!: (windowWidth: number) => void;
   @mutation.referrals.unsubscribeFromInvitedUsers private unsubscribeFromInvitedUsers!: FnWithoutArgs;
   @mutation.web3.setEvmNetworksApp private setEvmNetworksApp!: (data: EvmNetwork[]) => void;
+  @mutation.web3.setSubNetworkApps private setSubNetworkApps!: (data: SubNetworkApps) => void;
   @mutation.web3.setEthBridgeSettings private setEthBridgeSettings!: (settings: EthBridgeSettings) => Promise<void>;
   @mutation.referrals.resetStorageReferrer private resetStorageReferrer!: FnWithoutArgs;
 
-  @action.web3.setSubNetworkApps private setSubNetworkApps!: (data: SubNetworkApps) => void;
   @action.wallet.settings.setApiKeys private setApiKeys!: (apiKeys: WALLET_TYPES.ApiKeysObject) => Promise<void>;
   @action.wallet.subscriptions.resetNetworkSubscriptions private resetNetworkSubscriptions!: AsyncFnWithoutArgs;
   @action.wallet.subscriptions.resetInternalSubscriptions private resetInternalSubscriptions!: AsyncFnWithoutArgs;
   @action.wallet.subscriptions.activateNetwokSubscriptions private activateNetwokSubscriptions!: AsyncFnWithoutArgs;
-  @action.settings.connectToNode private connectToNode!: (options: ConnectToNodeOptions) => Promise<void>;
   @action.settings.setLanguage private setLanguage!: (lang: Language) => Promise<void>;
   @action.settings.setBlockNumber private setBlockNumber!: AsyncFnWithoutArgs;
   @action.settings.fetchAdsArray private fetchAdsArray!: AsyncFnWithoutArgs;
@@ -204,21 +204,7 @@ export default class App extends Mixins(mixins.TransactionMixin, NodeErrorMixin)
   }
 
   private setResponsiveClass(): void {
-    const width = window.innerWidth;
-    if (width >= Breakpoint.HugeDesktop) {
-      this.responsiveClass = BreakpointClass.HugeDesktop;
-    } else if (width >= Breakpoint.LargeDesktop) {
-      this.responsiveClass = BreakpointClass.LargeDesktop;
-    } else if (width >= Breakpoint.Desktop) {
-      this.responsiveClass = BreakpointClass.Desktop;
-    } else if (width >= Breakpoint.Tablet) {
-      this.responsiveClass = BreakpointClass.Tablet;
-    } else if (width >= Breakpoint.LargeMobile) {
-      this.responsiveClass = BreakpointClass.LargeMobile;
-    } else if (width < Breakpoint.LargeMobile) {
-      this.responsiveClass = BreakpointClass.Mobile;
-    }
-    this.setScreenBreakpointClass(this.responsiveClass);
+    this.setScreenBreakpointClass(window.innerWidth);
   }
 
   private setResponsiveClassDebounced = debounce(this.setResponsiveClass, 250);
@@ -247,7 +233,6 @@ export default class App extends Mixins(mixins.TransactionMixin, NodeErrorMixin)
       // ____________________________________________________________________
       await this.setEthBridgeSettings(data.ETH_BRIDGE);
       this.setSoraNetwork(data.NETWORK_TYPE);
-      this.setDefaultNodes(data?.DEFAULT_NETWORKS);
       this.setEvmNetworksApp(data.EVM_NETWORKS_IDS);
       this.setSubNetworkApps(data.SUB_NETWORKS);
 
@@ -261,9 +246,9 @@ export default class App extends Mixins(mixins.TransactionMixin, NodeErrorMixin)
       if (data.FAUCET_URL) {
         this.setFaucetUrl(data.FAUCET_URL);
       }
-      if (data.CHAIN_GENESIS_HASH) {
-        this.setNetworkChainGenesisHash(data.CHAIN_GENESIS_HASH);
-      }
+
+      this.appConnection.setDefaultNodes(data?.DEFAULT_NETWORKS);
+      this.appConnection.setNetworkChainGenesisHash(data?.CHAIN_GENESIS_HASH);
 
       // connection to node
       await this.runAppConnectionToNode();
@@ -277,10 +262,6 @@ export default class App extends Mixins(mixins.TransactionMixin, NodeErrorMixin)
     window.addEventListener('resize', this.setResponsiveClassDebounced);
   }
 
-  private get isSwapPageWithCharts(): boolean {
-    return this.$route.name === PageNames.Swap && this.chartsEnabled;
-  }
-
   private get mobileCssClasses(): string[] | undefined {
     return getMobileCssClasses();
   }
@@ -289,10 +270,6 @@ export default class App extends Mixins(mixins.TransactionMixin, NodeErrorMixin)
     return this.$route.name === PageNames.About;
   }
 
-  get isCurrentPageTooWide(): boolean {
-    return this.isAboutPage || this.isSwapPageWithCharts || this.$route.name === PageNames.Tokens;
-  }
-
   get dsProviderClasses(): string[] | BreakpointClass {
     return this.mobileCssClasses?.length ? [...this.mobileCssClasses, this.responsiveClass] : this.responsiveClass;
   }
@@ -303,9 +280,6 @@ export default class App extends Mixins(mixins.TransactionMixin, NodeErrorMixin)
     if (this.$route.name) {
       cssClasses.push(`${baseClass}--${this.$route.name.toLowerCase()}`);
     }
-    if (this.isSwapPageWithCharts) {
-      cssClasses.push(`${baseClass}--has-charts`);
-    }
     return cssClasses;
   }
 
@@ -381,14 +355,30 @@ export default class App extends Mixins(mixins.TransactionMixin, NodeErrorMixin)
   }
 
   private async runAppConnectionToNode() {
+    const walletOptions = {
+      permissions: WalletPermissions,
+      appName: WALLET_CONSTS.TranslationConsts.Polkaswap,
+    };
+
     try {
-      await this.connectToNode({
-        onError: (error) => this.handleNodeError(error, true), // prefer notification on connection success
-        onDisconnect: this.handleNodeDisconnect,
-        onReconnect: this.handleNodeReconnect,
-      });
+      // Run in parallel
+      // 1) Wallet core initialization (node connection independent)
+      // 2) Connection to node
+      await Promise.all([
+        waitForCore(walletOptions),
+        this.appConnection.connect({
+          onError: this.handleNodeError,
+          onDisconnect: this.handleNodeDisconnect,
+          onReconnect: this.handleNodeConnect,
+        }),
+      ]);
     } catch (error) {
       // we handled error using callback, do nothing
+    } finally {
+      // Wallet node connection dependent logic
+      if (!this.isWalletLoaded) {
+        await initWallet(walletOptions);
+      }
     }
   }
 
@@ -672,13 +662,16 @@ i.icon-divider {
 }
 
 @include desktop {
-  .app-main {
-    &.app-main--swap.app-main--has-charts {
+  .app-main--swap,
+  .app-main--vaults,
+  .app-main--vaultdetails,
+  .app-main--assetowner,
+  .app-main--assetownerdetails {
+    &.app-main {
       .app-menu {
         &:not(.collapsed) {
           position: relative;
         }
-
         &.collapsed {
           & + .app-body {
             margin-left: 74px;