fix: cp-12.18.0 graceful fallbacks for no rates (#32731)

## **Description**

During beta testing, we noticed an intermittent bug where asset rates
were not propagating through the app. This was causing all fiat balances
to render as `$0.00` as we were falling back to a zero value in our
selector.

This is potentially very scary for a user, and a pretty bad look for us.
This falls back to a "no conversion rate available" value instead during
this scenario to account for the situation where rates are undefined at
the application layer.

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

## **Related issues**

Fixes:

## **Manual testing steps**

1. Hardcode `const rate = assetRates?.[assetId]?.rate;` to `const rate =
undefined` in `ui/selectors/assets.ts`
2. Notice that `$0.00` is not rendered, but instead, an empty space
3. Hardcode return value of `getAssetsRates` to an empty object {}
4. Notice that Main aggregated fiat balance changes to native token
balance
5. Also validate that there are no regressions with EVM

## **Screenshots/Recordings**

### **Before**

<img width="1032" alt="Screenshot 2025-05-08 at 1 18 16 PM"
src="https://github.com/user-attachments/assets/90ee609e-464c-4600-8385-95c6cb29cd58"
/>

### **After**

All rates undefined: Fallback text in token list item, fallback to
native token balance in main view:
<img width="645" alt="Screenshot 2025-05-09 at 10 15 49 AM"
src="https://github.com/user-attachments/assets/77d445ff-0a47-4041-8b04-db740133117b"
/>

Some rates undefined: Fallback text in token list item, aggregated fiat
balance remains
<img width="641" alt="Screenshot 2025-05-09 at 10 22 12 AM"
src="https://github.com/user-attachments/assets/03674da0-1e59-484c-9965-d32f34ef7904"
/>

Token Details:

<img width="648" alt="Screenshot 2025-05-09 at 10 20 54 AM"
src="https://github.com/user-attachments/assets/b21ff8e9-df7e-4959-aaa6-0b48c28fdb0c"
/>

Solana devnet
<img width="399" alt="Screenshot 2025-05-09 at 10 25 06 AM"
src="https://github.com/user-attachments/assets/e49781c5-fb35-48ab-84c8-d974aca8f6bf"
/>

## **Pre-merge author checklist**

- [x] 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).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] 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.

---------

Co-authored-by: sahar-fehri <[email protected]>

Author: gambinish

ui/components/app/assets/token-cell/__snapshots__/token-cell.test.tsx.snap

@@ -51,9 +51,11 @@ exports[`Token Cell should match snapshot 1`] = `
             TEST
           </p>
           <p
-            class="mm-box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--text-align-end mm-box--color-text-default"
+            class="mm-box mm-text mm-text--body-sm mm-text--font-weight-normal mm-text--text-align-end mm-box--color-text-default"
             data-testid="multichain-token-list-item-secondary-value"
-          />
+          >
+            No conversion rate available
+          </p>
         </div>
         <div
           class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-space-between"

ui/components/app/assets/token-cell/cells/token-cell-secondary-display.tsx

@@ -17,6 +17,7 @@ import {
 import { getCurrencyRates } from '../../../../../selectors';
 import { getMultichainIsEvm } from '../../../../../selectors/multichain';
 import { TokenFiatDisplayInfo } from '../../types';
+import { useI18nContext } from '../../../../../hooks/useI18nContext';
 
 type TokenCellSecondaryDisplayProps = {
   token: TokenFiatDisplayInfo;
@@ -30,6 +31,7 @@ export const TokenCellSecondaryDisplay = React.memo(
     handleScamWarningModal,
     privacyMode,
   }: TokenCellSecondaryDisplayProps) => {
+    const t = useI18nContext();
     const isEvm = useSelector(getMultichainIsEvm);
     const currencyRates = useSelector(getCurrencyRates);
 
@@ -59,15 +61,15 @@ export const TokenCellSecondaryDisplay = React.memo(
     // secondary display text
     return (
       <SensitiveText
-        fontWeight={FontWeight.Medium}
-        variant={TextVariant.bodyMd}
+        fontWeight={token.secondary ? FontWeight.Medium : FontWeight.Normal}
+        variant={token.secondary ? TextVariant.bodyMd : TextVariant.bodySm}
         textAlign={TextAlign.End}
         data-testid="multichain-token-list-item-secondary-value"
         ellipsis={token.isStakeable}
         isHidden={privacyMode}
         length={SensitiveTextLength.Medium}
       >
-        {token.secondary}
+        {token.secondary || t('noConversionRateAvailable')}
       </SensitiveText>
     );
   },

ui/components/app/assets/types.ts

@@ -3,7 +3,7 @@ import { CaipAssetType, CaipChainId, Hex } from '@metamask/utils';
 // Common mixin for primary and secondary display values
 export type TokenDisplayValues = {
   primary: string;
-  secondary: number;
+  secondary: number | null;
   string?: string;
 };
 

ui/components/ui/aggregated-balance/aggregated-balance.tsx

@@ -22,6 +22,7 @@ import {
 } from '../../../ducks/metamask/metamask';
 import {
   getAccountAssets,
+  getAssetsRates,
   getMultichainAggregatedBalance,
   getMultichainNativeTokenBalance,
 } from '../../../selectors/assets';
@@ -54,6 +55,8 @@ export const AggregatedBalance = ({
   const multichainNativeTokenBalance = useSelector((state) =>
     getMultichainNativeTokenBalance(state, selectedAccount),
   );
+  const multichainAssetsRates = useSelector(getAssetsRates);
+  const isNonEvmRatesAvailable = Object.keys(multichainAssetsRates).length > 0;
 
   const formattedFiatDisplay = formatWithThreshold(
     multichainAggregatedBalance,
@@ -96,7 +99,7 @@ export const AggregatedBalance = ({
           isHidden={privacyMode}
           data-testid="account-value-and-suffix"
         >
-          {showNativeTokenAsMainBalance
+          {showNativeTokenAsMainBalance || !isNonEvmRatesAvailable
             ? formattedTokenDisplay
             : formattedFiatDisplay}
         </SensitiveText>
@@ -105,7 +108,7 @@ export const AggregatedBalance = ({
           variant={TextVariant.inherit}
           isHidden={privacyMode}
         >
-          {showNativeTokenAsMainBalance
+          {showNativeTokenAsMainBalance || !isNonEvmRatesAvailable
             ? currentNetwork.network.ticker
             : currentCurrency.toUpperCase()}
         </SensitiveText>

ui/components/ui/aggregated-balance/index.test.tsx

@@ -212,4 +212,28 @@ describe('AggregatedBalance Component', () => {
     );
     expect(screen.getByText('SOL')).toBeInTheDocument();
   });
+
+  it('renders token balance when non evm rates are not available', () => {
+    renderWithProvider(
+      <AggregatedBalance
+        classPrefix="test"
+        balanceIsCached={false}
+        handleSensitiveToggle={jest.fn()}
+      />,
+      getStore({
+        metamask: {
+          ...mockMetamaskStore,
+          preferences: {
+            showNativeTokenAsMainBalance: false,
+          },
+          conversionRates: {},
+        },
+      }),
+    );
+
+    expect(screen.getByTestId('account-value-and-suffix')).toHaveTextContent(
+      '1',
+    );
+    expect(screen.getByText('SOL')).toBeInTheDocument();
+  });
 });

ui/pages/defi/components/__snapshots__/defi-details-list.test.tsx.snap

@@ -63,9 +63,11 @@ exports[`DeFiDetailsPage renders defi details list 1`] = `
                 Ethereum
               </p>
               <p
-                class="mm-box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--text-align-end mm-box--color-text-default"
+                class="mm-box mm-text mm-text--body-sm mm-text--font-weight-normal mm-text--text-align-end mm-box--color-text-default"
                 data-testid="multichain-token-list-item-secondary-value"
-              />
+              >
+                No conversion rate available
+              </p>
             </div>
             <div
               class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-space-between"
@@ -149,9 +151,11 @@ exports[`DeFiDetailsPage renders defi details list 1`] = `
                 Ethereum
               </p>
               <p
-                class="mm-box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--text-align-end mm-box--color-text-default"
+                class="mm-box mm-text mm-text--body-sm mm-text--font-weight-normal mm-text--text-align-end mm-box--color-text-default"
                 data-testid="multichain-token-list-item-secondary-value"
-              />
+              >
+                No conversion rate available
+              </p>
             </div>
             <div
               class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-space-between"

ui/pages/defi/components/__snapshots__/defi-details-page.test.tsx.snap

@@ -121,9 +121,11 @@ exports[`DeFiDetailsPage renders defi asset page 1`] = `
                     </div>
                   </div>
                   <p
-                    class="mm-box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--text-align-end mm-box--color-text-default"
+                    class="mm-box mm-text mm-text--body-sm mm-text--font-weight-normal mm-text--text-align-end mm-box--color-text-default"
                     data-testid="multichain-token-list-item-secondary-value"
-                  />
+                  >
+                    No conversion rate available
+                  </p>
                 </div>
                 <div
                   class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-space-between"

ui/pages/routes/routes.component.test.js

@@ -308,6 +308,21 @@ describe('toast display', () => {
           },
         },
       },
+      conversionRates: {
+        'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp/slip44:105': {
+          conversionTime: 1745405595549,
+          currency: 'swift:0/iso4217:USD',
+          expirationTime: 1745409195549,
+          rate: '151.36',
+        },
+        'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp/token:EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v':
+          {
+            conversionTime: 1745405595549,
+            currency: 'swift:0/iso4217:USD',
+            expirationTime: 1745409195549,
+            rate: '1.00',
+          },
+      },
     },
     activeTab: {
       id: 2143026027,

ui/selectors/assets.test.ts

@@ -160,7 +160,7 @@ describe('getMultiChainAssets', () => {
           chainId: 'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp',
           isNative: true,
           primary: '0.051724127',
-          secondary: 0,
+          secondary: null,
         }),
         expect.objectContaining({
           title: 'USDC',
@@ -172,7 +172,7 @@ describe('getMultiChainAssets', () => {
           chainId: 'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp',
           isNative: false,
           primary: '0',
-          secondary: 0,
+          secondary: null,
         }),
       ]),
     );
@@ -204,7 +204,7 @@ describe('getMultiChainAssets', () => {
           chainId: 'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp',
           isNative: true,
           primary: '0.051724127',
-          secondary: 0,
+          secondary: null,
         }),
       ]),
     );
@@ -347,11 +347,11 @@ describe('getTokenByAccountAndAddressAndChainId', () => {
         isNative: true,
         isStakeable: false,
         primary: '0',
-        secondary: 0,
+        secondary: null,
         string: '',
         symbol: 'TKN1',
         title: 'Token 1',
-        tokenFiatAmount: 0,
+        tokenFiatAmount: null,
       });
     });
   });
@@ -378,11 +378,11 @@ describe('getTokenByAccountAndAddressAndChainId', () => {
         isNative: true,
         isStakeable: false,
         primary: '0',
-        secondary: 0,
+        secondary: null,
         string: '',
         symbol: 'TKN1',
         title: 'Token 1',
-        tokenFiatAmount: 0,
+        tokenFiatAmount: null,
       });
     });
   });

ui/selectors/assets.ts

@@ -210,8 +210,11 @@ export const getMultiChainAssets = createDeepEqualSelector(
       const { chainId, assetNamespace } = parseCaipAssetType(assetId);
       const isNative = assetNamespace === 'slip44';
       const balance = balances?.[assetId] || { amount: '0', unit: '' };
-      const rate = assetRates?.[assetId]?.rate || '0';
-      const balanceInFiat = new BigNumber(balance.amount).times(rate);
+      const rate = assetRates?.[assetId]?.rate;
+
+      const balanceInFiat = rate
+        ? new BigNumber(balance.amount).times(rate).toNumber()
+        : null;
 
       const assetMetadataFallback = {
         name: balance.unit,
@@ -232,9 +235,9 @@ export const getMultiChainAssets = createDeepEqualSelector(
           chainId,
           isNative,
           primary: balance.amount,
-          secondary: balanceInFiat.toNumber(),
+          secondary: balanceInFiat,
           string: '',
-          tokenFiatAmount: balanceInFiat.toNumber(), // for now we are keeping this is to satisfy sort, this should be fiat amount
+          tokenFiatAmount: balanceInFiat,
           isStakeable: false,
         });
       }