[Sub Bridge] add ability to select substrate node (#1346)

* transfer to liberland

* transfer from liberland

* fix history fetch

* refactoring adapters

* update history restoration

* change autoselectSubAddress

* add asset outgoing minimum amount

* update visible min limit

* update config to sub network endpoint

* multiple endpoints in adapter

* update sup network apps & incoming transfer tracking

* add props to SelectNodeDialog

* simplify NodeErrorMixin

* create connection class file

* simplify trusted node check

* remove nodeConnectionAllowance

* remove some nodes getters

* move action to class

* refactoring connectToNode

* transfer wallet init to App.vue

* use appConnection for sora nodes

* fix node info loading state

* use NodesConnection in SubAdapter

* sub node dialog demo

* update node dialog texts

* update network name in select node dialog

* refactoring NodesConnection reactivity

* simplify adapter

* add BridgeNodeIcon

* ui node name fixes

* ts fixes

* remove todo comments

* fix failed sub tx status in history

* add externalNativeMinBalance

* improve connection wait logic

* refactoring min deposit usage, add translation keys

* check min balance in transferable amount

* update bridge apps after reconnect

* fix select-network disabled css

* update external min balance fetch

* hardcode liberland network fee

* set dns regexp with exact start

* add reload button to node list

* refactoring after review

* update translations

---------

Co-authored-by: Stefan Popov <stefanpopov@list.ru>
Co-authored-by: Stefan Popov <17688105+stefashkaa@users.noreply.github.com>

env.json

@@ -52,10 +52,10 @@
   "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
   },
   "EVM_NETWORKS_IDS": [56, 8217],
   "ETH_BRIDGE": {

public/env.json

@@ -33,6 +33,11 @@
       "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-dev",
@@ -41,11 +46,27 @@
   "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://rpc.liberland-1.lib1.dev.sora2.soramitsu.co.jp"
+      }
+    ]
   },
   "ETH_BRIDGE": {
     "evmNetwork": 11155111,
@@ -55,4 +76,4 @@
       "OTHER": "0x401c6A23a44f72151D90878DF0aa86E77fBde0e2"
     }
   }
-}
+}

src/App.vue

@@ -44,6 +44,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';
@@ -54,15 +56,15 @@ import AppHeader from '@/components/App/Header/AppHeader.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 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 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';
@@ -95,13 +97,15 @@ export default class App extends Mixins(mixins.TransactionMixin, NodeErrorMixin)
   showNotifsDarkPage = false;
   responsiveClass = BreakpointClass.LargeDesktop;
 
+  @state.settings.appConnection 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.nodeIsConnected nodeIsConnected!: boolean;
   @getter.settings.chartsEnabled private chartsEnabled!: boolean;
   @getter.wallet.transactions.firstReadyTx firstReadyTransaction!: Nullable<HistoryItem>;
   @getter.wallet.account.isLoggedIn isSoraAccountConnected!: boolean;
@@ -114,8 +118,6 @@ 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;
@@ -125,15 +127,14 @@ export default class App extends Mixins(mixins.TransactionMixin, NodeErrorMixin)
   @mutation.settings.setScreenBreakpointClass private setScreenBreakpointClass!: (cssClass: string) => 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;
@@ -239,7 +240,6 @@ export default class App extends Mixins(mixins.TransactionMixin, NodeErrorMixin)
       await this.setEthBridgeSettings(data.ETH_BRIDGE);
       this.setFeatureFlags(data?.FEATURE_FLAGS);
       this.setSoraNetwork(data.NETWORK_TYPE);
-      this.setDefaultNodes(data?.DEFAULT_NETWORKS);
       this.setEvmNetworksApp(data.EVM_NETWORKS_IDS);
       this.setSubNetworkApps(data.SUB_NETWORKS);
 
@@ -253,9 +253,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();
@@ -362,12 +362,28 @@ 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,
+        }),
+      ]);
+
+      // Wallet node connection dependent logic
+      if (!this.isWalletLoaded) {
+        await initWallet(walletOptions);
+      }
     } catch (error) {
       // we handled error using callback, do nothing
     }