chore: show cached balance in useLatestbalance when chainId is not evm

Author: micaelae

ui/hooks/bridge/useIsTxSubmittable.ts

@@ -3,43 +3,46 @@ import { SWAPS_CHAINID_DEFAULT_TOKEN_MAP } from '../../../shared/constants/swaps
 import {
   getBridgeQuotes,
   getFromAmount,
-  getFromChain,
   getFromToken,
   getToChain,
   getValidationErrors,
   getToToken,
 } from '../../ducks/bridge/selectors';
+import { getMultichainCurrentChainId } from '../../selectors/multichain';
+import { useMultichainSelector } from '../useMultichainSelector';
+import { useIsMultichainSwap } from '../../pages/bridge/hooks/useIsMultichainSwap';
 import useLatestBalance from './useLatestBalance';
 
 export const useIsTxSubmittable = () => {
   const fromToken = useSelector(getFromToken);
   const toToken = useSelector(getToToken);
-  const fromChain = useSelector(getFromChain);
+  const fromChainId = useMultichainSelector(getMultichainCurrentChainId);
   const toChain = useSelector(getToChain);
   const fromAmount = useSelector(getFromAmount);
   const { activeQuote } = useSelector(getBridgeQuotes);
 
+  const isSwap = useIsMultichainSwap();
   const {
     isInsufficientBalance,
     isInsufficientGasBalance,
     isInsufficientGasForQuote,
   } = useSelector(getValidationErrors);
 
-  const { balanceAmount } = useLatestBalance(fromToken, fromChain?.chainId);
-  const { balanceAmount: nativeAssetBalance } = useLatestBalance(
-    fromChain?.chainId
+  const balanceAmount = useLatestBalance(fromToken, fromChainId);
+  const nativeAssetBalance = useLatestBalance(
+    fromChainId
       ? SWAPS_CHAINID_DEFAULT_TOKEN_MAP[
-          fromChain.chainId as keyof typeof SWAPS_CHAINID_DEFAULT_TOKEN_MAP
+          fromChainId as keyof typeof SWAPS_CHAINID_DEFAULT_TOKEN_MAP
         ]
       : null,
-    fromChain?.chainId,
+    fromChainId,
   );
 
   return Boolean(
     fromToken &&
       toToken &&
-      fromChain &&
-      toChain &&
+      fromChainId &&
+      (isSwap || toChain) &&
       fromAmount &&
       activeQuote &&
       !isInsufficientBalance(balanceAmount) &&

ui/hooks/bridge/useLatestBalance.ts

@@ -1,8 +1,10 @@
 import { type Hex, type CaipChainId, isCaipChainId } from '@metamask/utils';
-import { BigNumber } from 'bignumber.js';
+import { useMemo } from 'react';
 import { getSelectedInternalAccount } from '../../selectors';
 import { calcLatestSrcBalance } from '../../../shared/modules/bridge-utils/balance';
 import { useAsyncResult } from '../useAsyncResult';
+import { Numeric } from '../../../shared/modules/Numeric';
+import { calcTokenAmount } from '../../../shared/lib/transactions-controller-utils';
 import { useMultichainSelector } from '../useMultichainSelector';
 import {
   getMultichainBalances,
@@ -36,23 +38,20 @@ const useLatestBalance = (
   );
   const nonEvmBalances = nonEvmBalancesByAccountId[id];
 
-  const { value: balanceAmount } = useAsyncResult<
-    string | undefined
-  >(async () => {
+  const value = useAsyncResult<Numeric | undefined>(async () => {
     if (
       token?.address &&
       // TODO check whether chainId is EVM when MultichainNetworkController is integrated
       !isCaipChainId(chainId) &&
       chainId &&
       currentChainId === chainId
     ) {
-      const balanceValue = await calcLatestSrcBalance(
+      return await calcLatestSrcBalance(
         global.ethereumProvider,
         selectedAddress,
         token.address,
         chainId,
       );
-      return balanceValue?.shiftedBy(token.decimals).toString();
     }
 
     // No need to fetch the balance for non-EVM tokens, use the balance provided by the
@@ -62,7 +61,10 @@ const useLatestBalance = (
       chainId === MultichainNetworks.SOLANA &&
       token?.decimals
     ) {
-      return nonEvmBalances?.[token.address]?.amount ?? token?.string;
+      return Numeric.from(
+        nonEvmBalances?.[token.address]?.amount ?? token?.string,
+        10,
+      ).shiftedBy(-1 * token.decimals);
     }
 
     return undefined;
@@ -81,9 +83,13 @@ const useLatestBalance = (
     );
   }
 
-  return {
-    balanceAmount: balanceAmount ? new BigNumber(balanceAmount) : undefined,
-  };
+  return useMemo(
+    () =>
+      value?.value
+        ? calcTokenAmount(value.value.toString(), token?.decimals)
+        : undefined,
+    [value.value, token?.decimals],
+  );
 };
 
 export default useLatestBalance;

ui/hooks/bridge/useQuoteFetchEvents.ts

@@ -44,8 +44,8 @@ export const useQuoteFetchEvents = () => {
   const fromToken = useSelector(getFromToken);
   const fromChain = useSelector(getFromChain);
 
-  const { balanceAmount } = useLatestBalance(fromToken, fromChain?.chainId);
-  const { balanceAmount: nativeAssetBalance } = useLatestBalance(
+  const balanceAmount = useLatestBalance(fromToken, fromChain?.chainId);
+  const nativeAssetBalance = useLatestBalance(
     fromChain?.chainId
       ? SWAPS_CHAINID_DEFAULT_TOKEN_MAP[
           fromChain.chainId as keyof typeof SWAPS_CHAINID_DEFAULT_TOKEN_MAP

ui/pages/bridge/prepare/bridge-cta-button.tsx

@@ -73,8 +73,8 @@ export const BridgeCTAButton = ({
 
   const wasTxDeclined = useSelector(getWasTxDeclined);
 
-  const { balanceAmount } = useLatestBalance(fromToken, fromChain?.chainId);
-  const { balanceAmount: nativeAssetBalance } = useLatestBalance(
+  const balanceAmount = useLatestBalance(fromToken, fromChain?.chainId);
+  const nativeAssetBalance = useLatestBalance(
     fromChain?.chainId
       ? SWAPS_CHAINID_DEFAULT_TOKEN_MAP[
           fromChain.chainId as keyof typeof SWAPS_CHAINID_DEFAULT_TOKEN_MAP

ui/pages/bridge/prepare/bridge-input-group.tsx

@@ -90,7 +90,7 @@ export const BridgeInputGroup = ({
 
   const currentChainId = useMultichainSelector(getMultichainCurrentChainId);
   const selectedChainId = networkProps?.network?.chainId ?? currentChainId;
-  const { balanceAmount } = useLatestBalance(token, selectedChainId);
+  const balanceAmount = useLatestBalance(token, selectedChainId);
 
   const [, handleCopy] = useCopyToClipboard(MINUTE) as [
     boolean,

ui/pages/bridge/prepare/prepare-bridge-page.tsx

@@ -173,17 +173,14 @@ const PrepareBridgePage = () => {
   const { quotesRefreshCount } = useSelector(getBridgeQuotes);
   const { openBuyCryptoInPdapp } = useRamps();
 
-  const { balanceAmount: nativeAssetBalance } = useLatestBalance(
+  const nativeAssetBalance = useLatestBalance(
     SWAPS_CHAINID_DEFAULT_TOKEN_MAP[
       fromChain?.chainId as keyof typeof SWAPS_CHAINID_DEFAULT_TOKEN_MAP
     ],
     fromChain?.chainId,
   );
 
-  const { balanceAmount: srcTokenBalance } = useLatestBalance(
-    fromToken,
-    fromChain?.chainId,
-  );
+  const srcTokenBalance = useLatestBalance(fromToken, fromChain?.chainId);
 
   const {
     filteredTokenListGenerator: toTokenListGenerator,