fix: balance and token icons are unavailable when the bridge page is reopened (#31343)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/31343?quickstart=1)

## **Related issues**

Fixes: https://consensyssoftware.atlassian.net/browse/MMS-2147

## **Manual testing steps**

1. Request a Bridge quote with src=native token
2. Close extension popup
3. Open popup again
4. Balance should be repopulated and token icons should be visible

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [ ] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

Author: micaelae

ui/hooks/bridge/useLatestBalance.ts

@@ -6,8 +6,8 @@ import {
   formatChainIdToCaip,
   formatChainIdToHex,
   ChainId,
+  isNativeAddress,
 } from '@metamask/bridge-controller';
-import { useSelector } from 'react-redux';
 import { getSelectedInternalAccount } from '../../selectors';
 import { useAsyncResult } from '../useAsync';
 import { Numeric } from '../../../shared/modules/Numeric';
@@ -17,7 +17,7 @@ import {
   getMultichainBalances,
   getMultichainCurrentChainId,
 } from '../../selectors/multichain';
-import { getProviderConfig } from '../../../shared/modules/selectors/networks';
+import { MULTICHAIN_NATIVE_CURRENCY_TO_CAIP19 } from '../../../shared/constants/multichain/assets';
 
 /**
  * Custom hook to fetch and format the latest balance of a given token or native asset.
@@ -32,6 +32,7 @@ const useLatestBalance = (
     symbol: string;
     string?: string;
     chainId?: Hex | CaipChainId | ChainId;
+    assetId?: string;
   } | null,
 ) => {
   const { address: selectedAddress, id } = useMultichainSelector(
@@ -42,7 +43,6 @@ const useLatestBalance = (
   const nonEvmBalancesByAccountId = useMultichainSelector(
     getMultichainBalances,
   );
-  const { rpcUrl } = useSelector(getProviderConfig);
 
   const nonEvmBalances = nonEvmBalancesByAccountId?.[id];
 
@@ -56,8 +56,11 @@ const useLatestBalance = (
     // No need to fetch the balance for non-EVM tokens, use the balance provided by the
     // multichain balances controller
     if (isSolanaChainId(chainId) && token.decimals) {
+      const caipAssetType = isNativeAddress(token.address)
+        ? MULTICHAIN_NATIVE_CURRENCY_TO_CAIP19.SOL
+        : token.assetId ?? token.address;
       return Numeric.from(
-        nonEvmBalances?.[token.address]?.amount ?? token.string,
+        nonEvmBalances?.[caipAssetType]?.amount ?? token?.string,
         10,
       )
         .shiftedBy(-1 * token.decimals)
@@ -66,8 +69,7 @@ const useLatestBalance = (
 
     if (
       token.address &&
-      formatChainIdToCaip(currentChainId) === formatChainIdToCaip(chainId) &&
-      rpcUrl
+      formatChainIdToCaip(currentChainId) === formatChainIdToCaip(chainId)
     ) {
       return (
         await calcLatestSrcBalance(
@@ -80,7 +82,7 @@ const useLatestBalance = (
     }
 
     return undefined;
-  }, [currentChainId, token, selectedAddress, rpcUrl, nonEvmBalances]);
+  }, [currentChainId, token, selectedAddress, nonEvmBalances]);
 
   if (token && !token.decimals) {
     throw new Error(

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

@@ -253,15 +253,15 @@ const PrepareBridgePage = () => {
           setToToken({
             ...destAsset,
             chainId: destChainId,
-            image: destAsset.icon ?? '',
+            image: srcAsset.icon ?? destAsset.iconUrl ?? '',
             address: destAsset.address,
           }),
         );
         dispatch(
           setFromToken({
             ...srcAsset,
             chainId: srcChainId,
-            image: srcAsset.icon ?? '',
+            image: srcAsset.icon || srcAsset.iconUrl || '',
             address: srcAsset.address,
           }),
         );
@@ -324,7 +324,9 @@ const PrepareBridgePage = () => {
       // This override allows quotes to be returned when the rpcUrl is a forked network
       // Otherwise quotes get filtered out by the bridge-api when the wallet's real
       // balance is less than the tenderly balance
-      insufficientBal: Boolean(providerConfig?.rpcUrl?.includes('localhost')),
+      insufficientBal: providerConfig?.rpcUrl?.includes('localhost')
+        ? true
+        : undefined,
       slippage,
       walletAddress: selectedAccount?.address ?? '',
       destWalletAddress: selectedDestinationAccount?.address,