Bridge balances refactoring

src/components/SoraCard/SoraCardIntroPage.vue

@@ -56,8 +56,9 @@
 
 <script lang="ts">
 import { FPNumber } from '@sora-substrate/math';
+import { XOR } from '@sora-substrate/util/build/assets/consts';
 import { mixins } from '@soramitsu/soraneo-wallet-web';
-import { Component, Mixins, Watch } from 'vue-property-decorator';
+import { Component, Mixins } from 'vue-property-decorator';
 
 import TranslationMixin from '@/components/mixins/TranslationMixin';
 import { PageNames, Components } from '@/consts';
@@ -146,7 +147,14 @@ export default class SoraCardIntroPage extends Mixins(mixins.LoadingMixin, Trans
 
   private bridgeTokens(): void {
     if (!this.isEuroBalanceEnough) {
-      router.push({ name: PageNames.Bridge, params: { xorToDeposit: this.xorToDeposit.toString() } });
+      router.push({
+        name: PageNames.Bridge,
+        params: {
+          address: XOR.address,
+          amount: this.xorToDeposit.toString(),
+          isIncoming: 'true',
+        },
+      });
     }
   }
 

src/components/mixins/SelectAssetMixin.ts

@@ -7,6 +7,8 @@ import { getter } from '@/store/decorators';
 
 import type { Asset, AccountAsset, RegisteredAccountAsset } from '@sora-substrate/util/build/assets/types';
 
+const isEmpty = (a): boolean => isNil(a.balance) || !+a.balance.transferable;
+
 @Component
 export default class SelectAsset extends Mixins(mixins.DialogMixin, AssetsSearchMixin) {
   @getter.assets.assetDataByAddress private getAsset!: (addr?: string) => Nullable<RegisteredAccountAsset>;
@@ -19,17 +21,13 @@ export default class SelectAsset extends Mixins(mixins.DialogMixin, AssetsSearch
     this.clearAndFocusSearch();
   }
 
-  public sortByBalance(external = false) {
-    const isEmpty = (a): boolean => (external ? !+a.externalBalance : isNil(a.balance) || !+a.balance.transferable);
-
-    return (a: AccountAsset | RegisteredAccountAsset, b: AccountAsset | RegisteredAccountAsset): number => {
-      const emptyABalance = isEmpty(a);
-      const emptyBBalance = isEmpty(b);
+  public sortByBalance(a: AccountAsset | RegisteredAccountAsset, b: AccountAsset | RegisteredAccountAsset): number {
+    const emptyABalance = isEmpty(a);
+    const emptyBBalance = isEmpty(b);
 
-      if (emptyABalance === emptyBBalance) return 0;
+    if (emptyABalance === emptyBBalance) return 0;
 
-      return emptyABalance && !emptyBBalance ? 1 : -1;
-    };
+    return emptyABalance && !emptyBBalance ? 1 : -1;
   }
 
   public getAssetsWithBalances(addresses: string[], excludeAddress = ''): Array<RegisteredAccountAsset> {

src/components/pages/Bridge/SelectAsset.vue

@@ -66,7 +66,7 @@ export default class BridgeSelectAsset extends Mixins(TranslationMixin, SelectAs
     const assetsAddresses = Object.keys(this.registeredAssets);
     const excludeAddress = this.asset?.address;
 
-    return this.getAssetsWithBalances(assetsAddresses, excludeAddress).sort(this.sortByBalance(!this.isSoraToEvm));
+    return this.getAssetsWithBalances(assetsAddresses, excludeAddress).sort(this.sortByBalance);
   }
 
   get filteredAssets(): Array<RegisteredAccountAsset> {

src/components/shared/SelectAsset/SelectToken.vue

@@ -155,7 +155,7 @@ export default class SelectToken extends Mixins(TranslationMixin, SelectAssetMix
     const assetsAddresses = whiteList.map((asset) => asset.address);
     const excludeAddress = this.asset?.address;
 
-    return this.getAssetsWithBalances(assetsAddresses, excludeAddress).sort(this.sortByBalance());
+    return this.getAssetsWithBalances(assetsAddresses, excludeAddress).sort(this.sortByBalance);
   }
 
   get filteredWhitelistTokens(): Array<AccountAsset> {
@@ -196,7 +196,7 @@ export default class SelectToken extends Mixins(TranslationMixin, SelectAssetMix
     // TODO: we already have balances in nonWhitelistAccountAssets.
     // Need to improve that logic
     return this.getAssetsWithBalances(Object.keys(this.nonWhitelistAccountAssets), excludeAsset?.address).sort(
-      this.sortByBalance()
+      this.sortByBalance
     );
   }
 

src/store/bridge/actions.ts

@@ -181,28 +181,35 @@ async function updateEvmBalances(context: ActionContext<any, any>): Promise<void
   const { sender, recipient, asset } = getters;
   const { isSoraToEvm } = state;
 
-  let recipientBalance = ZeroStringValue;
-  let senderBalance = ZeroStringValue;
-  let nativeBalance = ZeroStringValue;
-
-  if (asset?.address) {
-    if (sender) {
-      senderBalance = isSoraToEvm
-        ? (await getAssetBalance(api.api, sender, asset.address, asset.decimals)).transferable
-        : (await ethersUtil.getAccountAssetBalance(sender, asset?.externalAddress)).value;
-    }
-    if (recipient) {
-      recipientBalance = isSoraToEvm
-        ? (await ethersUtil.getAccountAssetBalance(recipient, asset?.externalAddress)).value
-        : (await getAssetBalance(api.api, recipient, asset.address, asset.decimals)).transferable;
-    }
+  const spender = isSoraToEvm ? recipient : sender;
 
-    const spender = isSoraToEvm ? recipient : sender;
+  const getSenderBalance = async () => {
+    if (!(asset?.address && sender)) return ZeroStringValue;
 
-    if (spender) {
-      nativeBalance = await ethersUtil.getAccountBalance(isSoraToEvm ? recipient : sender);
-    }
-  }
+    return isSoraToEvm
+      ? (await getAssetBalance(api.api, sender, asset.address, asset.decimals)).transferable
+      : (await ethersUtil.getAccountAssetBalance(sender, asset?.externalAddress)).value;
+  };
+
+  const getRecipientBalance = async () => {
+    if (!(asset?.address && recipient)) return ZeroStringValue;
+
+    return isSoraToEvm
+      ? (await ethersUtil.getAccountAssetBalance(recipient, asset?.externalAddress)).value
+      : (await getAssetBalance(api.api, recipient, asset.address, asset.decimals)).transferable;
+  };
+
+  const getSpenderBalance = async () => {
+    if (!(asset?.address && spender)) return ZeroStringValue;
+
+    return await ethersUtil.getAccountBalance(spender);
+  };
+
+  const [senderBalance, recipientBalance, nativeBalance] = await Promise.all([
+    getSenderBalance(),
+    getRecipientBalance(),
+    getSpenderBalance(),
+  ]);
 
   commit.setAssetSenderBalance(senderBalance);
   commit.setAssetRecipientBalance(recipientBalance);
@@ -214,24 +221,33 @@ async function updateSubBalances(context: ActionContext<any, any>): Promise<void
   const { sender, recipient, asset } = getters;
   const { isSoraToEvm } = state;
 
-  let recipientBalance = ZeroStringValue;
-  let senderBalance = ZeroStringValue;
-  let nativeBalance = ZeroStringValue;
+  const getSenderBalance = async () => {
+    if (!(asset?.address && sender)) return ZeroStringValue;
 
-  if (asset?.address) {
-    if (sender) {
-      senderBalance = isSoraToEvm
-        ? (await getAssetBalance(api.api, sender, asset.address, asset.decimals)).transferable
-        : await subConnector.adapter.getTokenBalance(sender, asset?.externalAddress);
+    return isSoraToEvm
+      ? (await getAssetBalance(api.api, sender, asset.address, asset.decimals)).transferable
+      : await subConnector.adapter.getTokenBalance(sender, asset?.externalAddress);
+  };
 
-      nativeBalance = await subConnector.adapter.getTokenBalance(sender);
-    }
-    if (recipient) {
-      recipientBalance = isSoraToEvm
-        ? await subConnector.adapter.getTokenBalance(recipient, asset?.externalAddress)
-        : (await getAssetBalance(api.api, recipient, asset.address, asset.decimals)).transferable;
-    }
-  }
+  const getRecipientBalance = async () => {
+    if (!(asset?.address && recipient)) return ZeroStringValue;
+
+    return isSoraToEvm
+      ? await subConnector.adapter.getTokenBalance(recipient, asset?.externalAddress)
+      : (await getAssetBalance(api.api, recipient, asset.address, asset.decimals)).transferable;
+  };
+
+  const getSpenderBalance = async () => {
+    if (!(asset?.address && sender)) return ZeroStringValue;
+
+    return await subConnector.adapter.getTokenBalance(sender);
+  };
+
+  const [senderBalance, recipientBalance, nativeBalance] = await Promise.all([
+    getSenderBalance(),
+    getRecipientBalance(),
+    getSpenderBalance(),
+  ]);
 
   commit.setAssetSenderBalance(senderBalance);
   commit.setAssetRecipientBalance(recipientBalance);

src/store/bridge/mutations.ts

@@ -15,11 +15,11 @@ const mutations = defineMutations<BridgeState>()({
     state.assetAddress = address || '';
   },
 
-  setAssetSenderBalance(state, balance: CodecString = ZeroStringValue): void {
+  setAssetSenderBalance(state, balance: Nullable<CodecString> = null): void {
     state.assetSenderBalance = balance;
   },
 
-  setAssetRecipientBalance(state, balance: CodecString = ZeroStringValue): void {
+  setAssetRecipientBalance(state, balance: Nullable<CodecString> = null): void {
     state.assetRecipientBalance = balance;
   },
 
@@ -30,7 +30,7 @@ const mutations = defineMutations<BridgeState>()({
     state.assetLockedBalanceFetching = flag;
   },
 
-  setExternalBalance(state, balance: CodecString = ZeroStringValue): void {
+  setExternalBalance(state, balance: Nullable<CodecString> = null): void {
     state.externalNativeBalance = balance;
   },
   setExternalBalancesFetching(state, flag: boolean): void {

src/store/bridge/state.ts

@@ -6,8 +6,8 @@ function initialState(): BridgeState {
   return {
     isSoraToEvm: true,
     assetAddress: '',
-    assetSenderBalance: ZeroStringValue, // balance for sora
-    assetRecipientBalance: ZeroStringValue, // balance for bridge network
+    assetSenderBalance: null, // balance for sora
+    assetRecipientBalance: null, // balance for bridge network
     assetLockedBalance: null, // asset balance locked on bridge
     assetLockedBalanceFetching: false,
     amount: '',

src/store/bridge/types.ts

@@ -3,14 +3,14 @@ import type { CodecString, IBridgeTransaction } from '@sora-substrate/util';
 export type BridgeState = {
   isSoraToEvm: boolean;
   assetAddress: string;
-  assetSenderBalance: CodecString;
-  assetRecipientBalance: CodecString;
+  assetSenderBalance: Nullable<CodecString>;
+  assetRecipientBalance: Nullable<CodecString>;
   assetLockedBalance: Nullable<CodecString>;
   assetLockedBalanceFetching: boolean;
   amount: string;
   externalNetworkFee: CodecString;
   externalNetworkFeeFetching: boolean;
-  externalNativeBalance: CodecString;
+  externalNativeBalance: Nullable<CodecString>;
   externalBalancesFetching: boolean;
   externalBlockNumber: number;
   // history sources (unsynced localstorage & network)

src/views/Bridge.vue

@@ -543,13 +543,14 @@ export default class Bridge extends Mixins(
   }
 
   async created(): Promise<void> {
-    if (this.$route.params.xorToDeposit) {
-      await this.selectAsset(this.xor);
+    const { address, amount, isIncoming } = this.$route.params;
+    if (address) {
+      this.setAssetAddress(address);
+    }
+    if (isIncoming) {
       this.setSoraToEvm(false);
-      this.setAmount(this.$route.params.xorToDeposit);
-    } else {
-      this.setAmount();
     }
+    this.setAmount(amount);
   }
 
   getBridgeItemTitle(isSoraNetwork = false): string {

src/views/Wallet.vue

@@ -36,7 +36,6 @@ export default class Wallet extends Mixins(TranslationMixin) {
 
   @action.swap.setTokenFromAddress private setSwapFromAsset!: (address?: string) => Promise<void>;
   @action.swap.setTokenToAddress private setSwapToAsset!: (address?: string) => Promise<void>;
-  @action.bridge.setAssetAddress private setBridgeAsset!: (address?: string) => Promise<void>;
   @action.addLiquidity.setFirstTokenAddress private setAddliquidityAssetA!: (address: string) => Promise<void>;
   @action.addLiquidity.setSecondTokenAddress private setAddliquidityAssetB!: (address: string) => Promise<void>;
 
@@ -72,8 +71,7 @@ export default class Wallet extends Mixins(TranslationMixin) {
     router.push({ name: PageNames.AddLiquidity, params });
   }
 
-  async handleBridge(asset: AccountAsset): Promise<void> {
-    await this.setBridgeAsset(asset.address);
+  handleBridge(asset: AccountAsset): void {
     router.push({ name: PageNames.Bridge, params: { address: asset.address } });
   }