feat: replace assets state references for card (#29722)

<!--
Please submit this PR as a draft initially.

Do not mark it as "Ready for review" until this PR meets the canonical
Definition of Ready For Review in `docs/readme/ready-for-review.md`.

In short: the template must be materially complete (not just section
titles
present), all status checks must be currently passing, and the only
expected
follow-up commits must be reviewer-driven.
-->

## **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?
-->

The new `AssetsController` is being introduced to replace most
controllers from `@metamask/assets-controllers`. This is one of many PRs
that replace direct access to legacy state with selectors that, using a
feature flag, handle the transition between the legacy state and the new
state when the flag is turned on.

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry: null

## **Related issues**

Fixes: https://consensyssoftware.atlassian.net/browse/ASSETS-2827

## **Manual testing steps**

```gherkin
Feature: my feature name

  Scenario: user [verb for user action]
    Given [describe expected initial app state]

    When user [verb for user action]
    Then [describe expected outcome]
```

## **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**

<!--
Every checklist item must be consciously assessed before marking this PR
as
"Ready for review". A checked box means you deliberately considered that
responsibility, not that you literally performed every action listed.

Unchecked boxes are ambiguous: they are not an implicit "N/A" and they
are not
a silent "skip". See `docs/readme/ready-for-review.md` for the full
checklist
semantics.
-->

- [X] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/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-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

#### Performance checks (if applicable)

- [ ] I've tested on Android
  - Ideally on a mid-range device; emulator is acceptable
- [ ] I've tested with a power user scenario
- Use these [power-user
SRPs](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/edit-v2/401401446401?draftShareId=9d77e1e1-4bdc-4be1-9ebb-ccd916988d93)
to import wallets with many accounts and tokens
- [ ] I've instrumented key operations with Sentry traces for production
performance metrics
- See [`trace()`](/app/util/trace.ts) for usage and
[`addToken`](/app/components/Views/AddAsset/components/AddCustomToken/AddCustomToken.tsx#L274)
for an example

For performance guidelines and tooling, see the [Performance
Guide](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/400085549067/Performance+Guide+for+Engineers).

## **Pre-merge reviewer checklist**

<!--
Reviewer checklist items follow the same semantics as the author
checklist: an
unchecked box is ambiguous, a checked box means the reviewer consciously
assessed that responsibility. See `docs/readme/ready-for-review.md`.
-->

- [ ] 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.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Medium Risk**
> Moderate risk because it changes how card token balances and fiat
values are sourced (from `Engine.context` to Redux selectors), which
could affect displayed balances/pricing if selector wiring or
feature-flagged state differs across networks.
> 
> **Overview**
> Updates `useAssetBalances` to stop reading rates/market data directly
from `Engine.context` and instead use feature-flag-aware selectors from
`selectors/assets/assets-migration` (including `allTokens`, currency
rates, token market data, and multichain conversion rates).
> 
> Adjusts `useAssetBalances.test.ts` to mock these values via
`useSelector` state (not controller state mutation), including a new
default selector state and a Solana conversion-rate test that injects
`MultichainAssetsRatesController` into the mocked Redux state.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
177704b. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: bergarces

app/components/UI/Card/hooks/useAssetBalances.test.ts

@@ -126,38 +126,39 @@ describe('useAssetBalances', () => {
     walletAddress: '0xwallet1',
   };
 
+  const defaultSelectorMockState = {
+    engine: {
+      backgroundState: {
+        TokensController: {
+          allTokens: {},
+          allDetectedTokens: {},
+        },
+        NetworkController: {
+          networkConfigurationsByChainId: {
+            '0xe708': {
+              nativeCurrency: 'ETH',
+            },
+          },
+        },
+        CurrencyRateController: {
+          currencyRates: {
+            ETH: {
+              conversionRate: 2000,
+            },
+          },
+        },
+      },
+    },
+  };
+
   beforeEach(() => {
     jest.clearAllMocks();
 
     // Default mock implementations
     mockUseSelector.mockImplementation((selector: any) => {
       if (typeof selector === 'function') {
         // Mock state structure - includes TokensController for the refactored useAssetBalances
-        const state = {
-          engine: {
-            backgroundState: {
-              TokensController: {
-                allTokens: {},
-                allDetectedTokens: {},
-              },
-              NetworkController: {
-                networkConfigurationsByChainId: {
-                  '0xe708': {
-                    nativeCurrency: 'ETH',
-                  },
-                },
-              },
-              CurrencyRateController: {
-                currencyRates: {
-                  ETH: {
-                    conversionRate: 2000,
-                  },
-                },
-              },
-            },
-          },
-        };
-        return selector(state);
+        return selector(defaultSelectorMockState);
       }
       return 'USD';
     });
@@ -264,14 +265,29 @@ describe('useAssetBalances', () => {
     });
 
     it('returns balance info for single Solana token with conversion rate', () => {
-      (
-        Engine.context.MultichainAssetsRatesController as any
-      ).state.conversionRates = {
-        'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp/token:EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v':
-          {
-            rate: '1.0',
-          },
-      };
+      mockUseSelector.mockImplementation((selector: any) => {
+        if (typeof selector === 'function') {
+          const state = {
+            ...defaultSelectorMockState,
+            engine: {
+              ...defaultSelectorMockState.engine,
+              backgroundState: {
+                ...defaultSelectorMockState.engine.backgroundState,
+                MultichainAssetsRatesController: {
+                  conversionRates: {
+                    'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp/token:EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v':
+                      {
+                        rate: '1.0',
+                      },
+                  },
+                },
+              },
+            },
+          };
+          return selector(state);
+        }
+        return 'USD';
+      });
 
       mockFormatWithThreshold.mockReturnValue('$250.25');
 

app/components/UI/Card/hooks/useAssetBalances.tsx

@@ -7,14 +7,19 @@ import { getAssetBalanceKey } from '../util/getAssetBalanceKey';
 import { useTokensWithBalance } from '../../Bridge/hooks/useTokensWithBalance';
 import { isSolanaChainId } from '@metamask/bridge-controller';
 import { selectCurrentCurrency } from '../../../../selectors/currencyRateController';
-import Engine from '../../../../core/Engine';
 import { safeFormatChainIdToHex } from '../util/safeFormatChainIdToHex';
 import { TokenI } from '../../Tokens/types';
 import { MarketDataDetails } from '@metamask/assets-controllers';
 import { formatWithThreshold } from '../../../../util/assets';
 import I18n from '../../../../../locales/i18n';
 import { deriveBalanceFromAssetMarketDetails } from '../../Tokens/util';
 import { buildTokenIconUrl } from '../util/buildTokenIconUrl';
+import {
+  getCurrencyRateControllerCurrencyRates,
+  getMultichainAssetsRatesControllerConversionRates,
+  getTokenRatesControllerMarketData,
+  getTokensControllerAllTokens,
+} from '../../../../selectors/assets/assets-migration';
 import { CARD_CHAIN_IDS } from '../constants';
 import { balanceToFiatNumber } from '../../../../util/number/bigint';
 
@@ -84,17 +89,12 @@ export interface AssetBalanceInfo {
 export const useAssetBalances = (
   tokens: CardFundingToken[],
 ): Map<string, AssetBalanceInfo> => {
-  const { MultichainAssetsRatesController, TokenRatesController } =
-    Engine.context;
   const tokensWithBalance = useTokensWithBalance({
     chainIds: CARD_CHAIN_IDS,
   });
 
   // Get raw state needed for asset lookups - these are stable references from Redux
-  const allAssets = useSelector(
-    (state: RootState) =>
-      state.engine.backgroundState.TokensController.allTokens,
-  );
+  const allAssets = useSelector(getTokensControllerAllTokens);
   const allDetectedTokens = useSelector(
     (state: RootState) =>
       state.engine.backgroundState.TokensController.allDetectedTokens,
@@ -104,9 +104,10 @@ export const useAssetBalances = (
       state.engine.backgroundState.NetworkController
         .networkConfigurationsByChainId,
   );
-  const currencyRates = useSelector(
-    (state: RootState) =>
-      state.engine.backgroundState.CurrencyRateController.currencyRates,
+  const currencyRates = useSelector(getCurrencyRateControllerCurrencyRates);
+  const marketData = useSelector(getTokenRatesControllerMarketData);
+  const conversionRates = useSelector(
+    getMultichainAssetsRatesControllerConversionRates,
   );
 
   // Build the walletAssetsMap in useMemo using raw state
@@ -182,28 +183,21 @@ export const useAssetBalances = (
 
         const conversionRate = currencyRateEntry?.conversionRate;
 
-        const marketData =
-          TokenRatesController?.state?.marketData?.[chainId]?.[
-            token.address?.toLowerCase() as Hex
-          ];
+        const tokenMarketData =
+          marketData?.[chainId]?.[token.address?.toLowerCase() as Hex];
 
         // Only require conversionRate to be present (marketData is optional)
         if (conversionRate !== undefined && conversionRate !== null) {
           map.set(`${chainId}-${token.address?.toLowerCase()}`, {
             conversionRate,
-            marketData,
+            marketData: tokenMarketData,
           });
         }
       }
     });
 
     return map;
-  }, [
-    tokens,
-    networkConfigs,
-    currencyRates,
-    TokenRatesController?.state?.marketData,
-  ]);
+  }, [tokens, networkConfigs, currencyRates, marketData]);
 
   const currentCurrency = useSelector(selectCurrentCurrency);
 
@@ -256,8 +250,6 @@ export const useAssetBalances = (
       token: CardFundingToken,
       balanceToUse: string,
     ): { balanceFiat: string; rawFiatNumber: number | undefined } => {
-      const conversionRates =
-        MultichainAssetsRatesController?.state?.conversionRates;
       const assetKey =
         `${token.caipChainId}/token:${token.address}` as `${string}:${string}/${string}:${string}`;
       const assetConversionRate = conversionRates?.[assetKey];
@@ -307,7 +299,7 @@ export const useAssetBalances = (
         rawFiatNumber: undefined,
       };
     },
-    [MultichainAssetsRatesController?.state?.conversionRates, currentCurrency],
+    [conversionRates, currentCurrency],
   );
 
   // Helper: Calculate fiat with market data
@@ -534,8 +526,7 @@ export const useAssetBalances = (
               logo: buildTokenIconUrl(_token.caipChainId, _token.address ?? ''),
             } as TokenI);
 
-        const allMarketDataForChain =
-          TokenRatesController?.state?.marketData?.[chainId] || {};
+        const allMarketDataForChain = marketData?.[chainId] || {};
 
         const derivedBalance = deriveBalanceFromAssetMarketDetails(
           mockAsset,
@@ -605,7 +596,7 @@ export const useAssetBalances = (
     [
       calculateFiatFromMarketData,
       calculateProportionalFiat,
-      TokenRatesController?.state?.marketData,
+      marketData,
       currentCurrency,
     ],
   );