fix: Pass along decimal balance from asset-page to swaps UI (#28707)

## **Description**

Decimal balance are needed to be passed along with the rest of the token
info in order to properly prepopulate the swaps UI.

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

## **Related issues**

Fixes: #28509

## **Manual testing steps**

1. Navigate from AssetList to TokenDetails to Swap UI
2. Populate text field with a balance amount
3. If balance is lower than the token balance, do not show the warning.

## **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/develop/.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/develop/.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.

ui/pages/asset/components/asset-page.test.tsx

@@ -45,20 +45,26 @@ jest.mock('../../../hooks/useMultiPolling', () => ({
   default: jest.fn(),
 }));
 
+const selectedAccountAddress = 'cf8dace4-9439-4bd4-b3a8-88c821c8fcb3';
+
 describe('AssetPage', () => {
   const mockStore = {
     localeMessages: {
       currentLocale: 'en',
     },
     metamask: {
       tokenList: {},
-      tokenBalances: {},
+      tokenBalances: {
+        [selectedAccountAddress]: {
+          [CHAIN_IDS.MAINNET]: {},
+        },
+      },
       marketData: {},
       allTokens: {},
       accountsByChainId: {
         '0x1': {
-          'cf8dace4-9439-4bd4-b3a8-88c821c8fcb3': {
-            address: 'cf8dace4-9439-4bd4-b3a8-88c821c8fcb3',
+          [selectedAccountAddress]: {
+            address: selectedAccountAddress,
             balance: '0x00',
           },
         },
@@ -80,9 +86,9 @@ describe('AssetPage', () => {
       preferences: {},
       internalAccounts: {
         accounts: {
-          'cf8dace4-9439-4bd4-b3a8-88c821c8fcb3': {
-            address: 'cf8dace4-9439-4bd4-b3a8-88c821c8fcb3',
-            id: 'cf8dace4-9439-4bd4-b3a8-88c821c8fcb3',
+          [selectedAccountAddress]: {
+            address: selectedAccountAddress,
+            id: selectedAccountAddress,
             metadata: {
               name: 'Test Account',
               keyring: {
@@ -94,7 +100,7 @@ describe('AssetPage', () => {
             type: EthAccountType.Eoa,
           },
         },
-        selectedAccount: 'cf8dace4-9439-4bd4-b3a8-88c821c8fcb3',
+        selectedAccount: selectedAccountAddress,
       },
       keyrings: [
         {

ui/pages/asset/components/asset-page.tsx

@@ -54,6 +54,7 @@ import { useTokenBalances } from '../../../hooks/useTokenBalances';
 import { useMultichainSelector } from '../../../hooks/useMultichainSelector';
 import { getMultichainShouldShowFiat } from '../../../selectors/multichain';
 import { getPortfolioUrl } from '../../../helpers/utils/portfolio';
+import { hexToDecimal } from '../../../../shared/modules/conversion.utils';
 import AssetChart from './chart/asset-chart';
 import TokenButtons from './token-buttons';
 
@@ -151,6 +152,9 @@ const AssetPage = ({
       ? toChecksumHexAddress(asset.address)
       : getNativeTokenAddress(chainId);
 
+  const tokenHexBalance =
+    selectedAccountTokenBalancesAcrossChains?.[chainId]?.[address as Hex];
+
   const balance = calculateTokenBalance({
     isNative: type === AssetType.native,
     chainId,
@@ -187,10 +191,10 @@ const AssetPage = ({
       tokenMarketDetails.allTimeHigh > 0 ||
       tokenMarketDetails.allTimeLow > 0);
 
-  // this is needed in order to assign the correct balances to TokenButtons before sending/swapping
-  // without this, the balances we be populated as zero until the user refreshes the screen: https://github.com/MetaMask/metamask-extension/issues/28509
+  // this is needed in order to assign the correct balances to TokenButtons before navigating to send/swap screens
+
   asset.balance = {
-    value: '', // decimal value not needed
+    value: hexToDecimal(tokenHexBalance),
     display: String(balance),
     fiat: String(tokenFiatAmount),
   };