fix: show account balances for selected XChain swap destination address

ui/hooks/bridge/useTokensWithFiltering.ts

@@ -53,17 +53,19 @@ type FilterPredicate = (
  * @param tokenToExclude.symbol
  * @param tokenToExclude.address
  * @param tokenToExclude.chainId
+ * @param accountId - the accountId to use for the token list
  */
 export const useTokensWithFiltering = (
   chainId?: ChainId | Hex | CaipChainId,
   tokenToExclude?: null | Pick<BridgeToken, 'symbol' | 'address' | 'chainId'>,
+  accountId?: string,
 ) => {
   const topAssetsFromFeatureFlags = useSelector((state: BridgeAppState) =>
     getTopAssetsFromFeatureFlags(state, chainId),
   );
 
   const { assetsWithBalance: multichainTokensWithBalance } =
-    useMultichainBalances();
+    useMultichainBalances(accountId);
 
   const cachedTokens = useSelector(selectERC20TokensByChain);
 

ui/hooks/useMultichainBalances.ts

@@ -18,11 +18,16 @@ import {
   getMultichainBalances,
 } from '../selectors/multichain';
 import { AssetType } from '../../shared/constants/transaction';
-import { getSelectedEvmInternalAccount } from '../selectors/selectors';
+import {
+  getInternalAccount,
+  getSelectedEvmInternalAccount,
+} from '../selectors/selectors';
 import { useMultichainSelector } from './useMultichainSelector';
 
 // TODO replace this with getMultichainAssets
-const useNonEvmAssetsWithBalances = (): (
+const useNonEvmAssetsWithBalances = (
+  accountId?: string,
+): (
   | Omit<TokenWithBalance, 'address' | 'chainId' | 'primary' | 'secondary'> & {
       chainId: `${string}:${string}`;
       decimals: number;
@@ -34,7 +39,6 @@ const useNonEvmAssetsWithBalances = (): (
       symbol: string;
     }
 )[] => {
-  const nonEvmAccount = useSelector(getLastSelectedNonEvmAccount);
   // non-evm tokens owned by non-evm account, includes native and non-native assets
   const assetsByAccountId = useSelector(getAccountAssets);
   const assetMetadataById = useSelector(getAssetsMetadata);
@@ -47,12 +51,12 @@ const useNonEvmAssetsWithBalances = (): (
   const assetRates = useSelector(getAssetsRates);
 
   const nonEvmTokensWithFiatBalances = useMemo(() => {
-    if (!nonEvmAccount?.id) {
+    if (!accountId) {
       return [];
     }
 
-    const assetIds = assetsByAccountId?.[nonEvmAccount.id];
-    const balancesByAssetId = nonEvmBalancesByAccountId?.[nonEvmAccount.id];
+    const assetIds = assetsByAccountId?.[accountId];
+    const balancesByAssetId = nonEvmBalancesByAccountId?.[accountId];
     if (!balancesByAssetId || !assetIds) {
       return [];
     }
@@ -84,23 +88,35 @@ const useNonEvmAssetsWithBalances = (): (
     assetMetadataById,
     assetRates,
     assetsByAccountId,
-    nonEvmAccount?.id,
+    accountId,
     nonEvmBalancesByAccountId,
   ]);
 
   return nonEvmTokensWithFiatBalances;
 };
 
-// This hook is used to get the balances of all tokens and native tokens across all chains
-// This also returns the total fiat balances by chainId/caipChainId
-export const useMultichainBalances = () => {
+/**
+ * This hook is used to get the balances of all tokens and native tokens across all chains
+ * This also returns the total fiat balances by chainId/caipChainId
+ *
+ * @param accountId - the accountId to use for the token list, if not provided, the selected account will be used
+ */
+export const useMultichainBalances = (accountId?: string) => {
   // EVM data
   const selectedAccount = useSelector(getSelectedEvmInternalAccount);
+  const requestedAccount = useSelector((state) =>
+    getInternalAccount(state, accountId ?? ''),
+  );
+  const evmAccount = accountId ? requestedAccount : selectedAccount;
+
   const evmBalancesWithFiatByChainId = useSelector((state) =>
-    getTokenBalancesEvm(state, selectedAccount.address),
+    getTokenBalancesEvm(state, evmAccount?.address),
   );
   // Non-EVM data
-  const nonEvmBalancesWithFiatByChainId = useNonEvmAssetsWithBalances();
+  const nonEvmAccount = useSelector(getLastSelectedNonEvmAccount);
+  const nonEvmBalancesWithFiatByChainId = useNonEvmAssetsWithBalances(
+    accountId ?? nonEvmAccount?.id,
+  );
 
   // return TokenWithFiat sorted by fiat balance amount
   const assetsWithBalance = useMemo(() => {

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

@@ -218,7 +218,13 @@ const PrepareBridgePage = () => {
   const {
     filteredTokenListGenerator: toTokenListGenerator,
     isLoading: isToTokensLoading,
-  } = useTokensWithFiltering(toChain?.chainId ?? fromChain?.chainId, fromToken);
+  } = useTokensWithFiltering(
+    toChain?.chainId ?? fromChain?.chainId,
+    fromToken,
+    selectedDestinationAccount !== null && 'id' in selectedDestinationAccount
+      ? selectedDestinationAccount.id
+      : undefined,
+  );
 
   const { flippedRequestProperties } = useRequestProperties();
   const trackCrossChainSwapsEvent = useCrossChainSwapsEventTracker();