chore: remove usage of tokensChainsCache from useMusdConversionStatus (#28644)

<!--
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**
Removes the usage of `selectERC20TokensByChain` (which reads from
`tokensChainsCache`) in `useMusdConversionStatus`. This is part of a
broader effort to eliminate all usages of `tokensChainsCache` from the
codebase so it can eventually be removed from `TokenListController`.

Previously, `getTokenData` inside the hook's `useEffect` looked up a
token's `symbol` and `name` from the full `tokensChainsCache` via a
`useSelector` + `ref` pattern. This required subscribing to the entire
chain-indexed token list on every render.

The replacement uses `selectSingleTokenByAddressAndChainId` called
directly against `store.getState()` at the moment the transaction event
fires — the same point-in-time store access pattern already used in this
hook for `getTransactionPayQuotes`. Since `metamaskPay.tokenAddress` is
always a token the user holds in their wallet, it is tracked in
`TokensController.allTokens`, making the `tokensChainsCache` lookup
redundant.

Also removes the now-unnecessary `safeToChecksumAddress` import
(previously used to handle both checksummed and lowercase address
lookups, which `selectSingleTokenByAddressAndChainId` handles
internally), and drops the `tokensCacheRef` ref pattern along with the
`useSelector` / `react-redux` import.

<!--
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?
-->

## **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: remove usage of tokensChainsCache from
useMusdConversionStatus

## **Related issues**

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

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

- [ ] 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).
- [ ] 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-mobile/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.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Medium Risk**
> Moderate risk because it changes how token metadata is resolved for
mUSD conversion toasts/metrics (switching data sources and lookup
behavior), which could alter displayed symbols and analytics properties
in edge cases.
> 
> **Overview**
> `useMusdConversionStatus` no longer reads `tokensChainsCache` via
`react-redux`/`selectERC20TokensByChain`; it now pulls token
`symbol`/`name` on-demand from `store.getState()` using
`selectSingleTokenByAddressAndChainId`.
> 
> Tests are updated to mock the new selector-based lookup, remove the
old chain token-cache setup (including lowercase/checksum fallback
coverage), and adjust the fallback case to treat missing wallet tokens
as `"Token"`.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
9de0418. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: juanmigdr

app/components/UI/Earn/hooks/useMusdConversionStatus.test.ts

@@ -18,11 +18,8 @@ jest.mock('./useEarnToasts');
 jest.mock('../../../hooks/useAnalytics/useAnalytics', () => ({
   useAnalytics: jest.fn(),
 }));
-jest.mock('react-redux', () => ({
-  useSelector: jest.fn(),
-}));
-jest.mock('../../../../selectors/tokenListController', () => ({
-  selectERC20TokensByChain: jest.fn(),
+jest.mock('../../../../selectors/tokensController', () => ({
+  selectSingleTokenByAddressAndChainId: jest.fn(),
 }));
 jest.mock('../../../../util/transactions', () => {
   const actual = jest.requireActual('../../../../util/transactions');
@@ -32,9 +29,6 @@ jest.mock('../../../../util/transactions', () => {
   };
 });
 jest.mock('../../../../util/networks', () => ({}));
-jest.mock('../../../../selectors/networkController', () => ({
-  selectEvmNetworkConfigurationsByChainId: jest.fn(),
-}));
 jest.mock('../../../../util/trace', () => ({
   trace: jest.fn(),
   endTrace: jest.fn(),
@@ -54,12 +48,10 @@ jest.mock('../../../../selectors/transactionPayController', () => ({
   selectTransactionPayQuotesByTransactionId: jest.fn(),
 }));
 
-import { useSelector } from 'react-redux';
-import { selectERC20TokensByChain } from '../../../../selectors/tokenListController';
+import { selectSingleTokenByAddressAndChainId } from '../../../../selectors/tokensController';
 import { MetaMetricsEvents } from '../../../../core/Analytics';
 import { useAnalytics } from '../../../hooks/useAnalytics/useAnalytics';
 import { decodeTransferData } from '../../../../util/transactions';
-import { selectEvmNetworkConfigurationsByChainId } from '../../../../selectors/networkController';
 import {
   trace,
   endTrace,
@@ -79,13 +71,11 @@ const mockSelectTransactionPayQuotesByTransactionId = jest.mocked(
   selectTransactionPayQuotesByTransactionId,
 );
 
-const mockUseSelector = jest.mocked(useSelector);
-const mockSelectERC20TokensByChain = jest.mocked(selectERC20TokensByChain);
+const mockSelectSingleTokenByAddressAndChainId = jest.mocked(
+  selectSingleTokenByAddressAndChainId,
+);
 const mockUseAnalytics = jest.mocked(useAnalytics);
 const mockDecodeTransferData = jest.mocked(decodeTransferData);
-const mockSelectEvmNetworkConfigurationsByChainId = jest.mocked(
-  selectEvmNetworkConfigurationsByChainId,
-);
 
 type TransactionStatusUpdatedHandler = (event: {
   transactionMeta: TransactionMeta;
@@ -192,9 +182,6 @@ describe('useMusdConversionStatus', () => {
     },
   };
 
-  // Default mock data
-  const defaultTokensChainsCache = {};
-
   beforeEach(() => {
     jest.clearAllMocks();
     jest.useFakeTimers();
@@ -223,28 +210,18 @@ describe('useMusdConversionStatus', () => {
       EarnToastOptions: mockEarnToastOptions,
     });
 
-    // Setup useSelector to return different values based on selector
-    mockUseSelector.mockImplementation((selector) => {
-      if (selector === mockSelectERC20TokensByChain) {
-        return defaultTokensChainsCache;
-      }
-      if (selector === mockSelectEvmNetworkConfigurationsByChainId) {
-        return { '0x1': { name: 'Ethereum Mainnet' } };
-      }
-      return {};
-    });
+    // Default: token not found
+    mockSelectSingleTokenByAddressAndChainId.mockReturnValue(undefined);
   });
 
-  // Helper to setup token cache mock
-  const setupTokensCacheMock = (tokenData: Record<string, unknown>) => {
-    mockUseSelector.mockImplementation((selector) => {
-      if (selector === mockSelectERC20TokensByChain) {
-        return tokenData;
-      }
-      if (selector === mockSelectEvmNetworkConfigurationsByChainId) {
-        return { '0x1': { name: 'Ethereum Mainnet' } };
-      }
-      return {};
+  // Helper to setup token lookup mock for a specific address+chain
+  const setupTokenLookupMock = (symbol: string, name = '') => {
+    mockSelectSingleTokenByAddressAndChainId.mockReturnValue({
+      symbol,
+      name,
+      address: '',
+      decimals: 18,
+      aggregators: [],
     });
   };
 
@@ -364,14 +341,7 @@ describe('useMusdConversionStatus', () => {
     it('passes token symbol from metamaskPay data to in-progress toast', () => {
       const tokenAddress = '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48';
       const chainId = '0x89';
-      const mockTokenData = {
-        [chainId]: {
-          data: {
-            [tokenAddress]: { symbol: 'USDC' },
-          },
-        },
-      };
-      setupTokensCacheMock(mockTokenData);
+      setupTokenLookupMock('USDC');
 
       renderHook(() => useMusdConversionStatus());
 
@@ -390,41 +360,10 @@ describe('useMusdConversionStatus', () => {
       });
     });
 
-    it('uses lowercase token address as fallback for symbol lookup', () => {
-      const tokenAddress = '0x6B175474E89094C44Da98b954EedeAC495271d0F';
-      const chainId = '0x1';
-      const mockTokenData = {
-        [chainId]: {
-          data: {
-            [tokenAddress.toLowerCase()]: { symbol: 'DAI' },
-          },
-        },
-      };
-      setupTokensCacheMock(mockTokenData);
-
-      renderHook(() => useMusdConversionStatus());
-
-      const handler = getSubscribedHandler();
-      const transactionMeta = createTransactionMeta(
-        TransactionStatus.approved,
-        'test-tx-lowercase',
-        TransactionType.musdConversion,
-        { chainId, tokenAddress },
-      );
-
-      handler({ transactionMeta });
-
-      expect(mockInProgressFn).toHaveBeenCalledWith(
-        expect.objectContaining({ tokenSymbol: 'DAI' }),
-      );
-    });
-
-    it('uses "Token" as fallback when token symbol is not found', () => {
+    it('uses "Token" as fallback when token is not found in wallet', () => {
       const tokenAddress = '0x1111111111111111111111111111111111111111';
       const chainId = '0x1';
-      setupTokensCacheMock({
-        [chainId]: { data: {} },
-      });
+      mockSelectSingleTokenByAddressAndChainId.mockReturnValue(undefined);
 
       renderHook(() => useMusdConversionStatus());
 
@@ -856,13 +795,7 @@ describe('useMusdConversionStatus', () => {
     it('tracks status updated event when transaction status is approved', () => {
       const tokenAddress = '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48';
       const chainId = '0x1';
-      setupTokensCacheMock({
-        [chainId]: {
-          data: {
-            [tokenAddress]: { symbol: 'USDC', name: 'USD Coin' },
-          },
-        },
-      });
+      setupTokenLookupMock('USDC', 'USD Coin');
 
       renderHook(() => useMusdConversionStatus());
 
@@ -902,13 +835,7 @@ describe('useMusdConversionStatus', () => {
     it('tracks status updated event when transaction status is confirmed', () => {
       const tokenAddress = '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48';
       const chainId = '0x1';
-      setupTokensCacheMock({
-        [chainId]: {
-          data: {
-            [tokenAddress]: { symbol: 'USDC', name: 'USD Coin' },
-          },
-        },
-      });
+      setupTokenLookupMock('USDC', 'USD Coin');
 
       renderHook(() => useMusdConversionStatus());
 
@@ -948,13 +875,7 @@ describe('useMusdConversionStatus', () => {
     it('tracks status updated event when transaction status is failed', () => {
       const tokenAddress = '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48';
       const chainId = '0x1';
-      setupTokensCacheMock({
-        [chainId]: {
-          data: {
-            [tokenAddress]: { symbol: 'USDC', name: 'USD Coin' },
-          },
-        },
-      });
+      setupTokenLookupMock('USDC', 'USD Coin');
 
       renderHook(() => useMusdConversionStatus());
 

app/components/UI/Earn/hooks/useMusdConversionStatus.ts

@@ -5,10 +5,8 @@ import {
 } from '@metamask/transaction-controller';
 import { Hex } from '@metamask/utils';
 import { useCallback, useEffect, useRef } from 'react';
-import { useSelector } from 'react-redux';
 import Engine from '../../../../core/Engine';
-import { selectERC20TokensByChain } from '../../../../selectors/tokenListController';
-import { safeToChecksumAddress } from '../../../../util/address';
+import { selectSingleTokenByAddressAndChainId } from '../../../../selectors/tokensController';
 import useEarnToasts from './useEarnToasts';
 import { useAnalytics } from '../../../hooks/useAnalytics/useAnalytics';
 import { MetaMetricsEvents } from '../../../../core/Analytics';
@@ -47,13 +45,10 @@ function getTransactionPayQuotes(transactionId: string) {
  */
 export const useMusdConversionStatus = () => {
   const { showToast, EarnToastOptions } = useEarnToasts();
-  const tokensChainsCache = useSelector(selectERC20TokensByChain);
 
   const { trackEvent, createEventBuilder } = useAnalytics();
 
   const shownToastsRef = useRef<Set<string>>(new Set());
-  const tokensCacheRef = useRef(tokensChainsCache);
-  tokensCacheRef.current = tokensChainsCache;
 
   const submitConversionEvent = useCallback(
     (
@@ -102,18 +97,15 @@ export const useMusdConversionStatus = () => {
 
   useEffect(() => {
     const getTokenData = (chainId: Hex, tokenAddress: string) => {
-      const chainTokens = tokensCacheRef.current?.[chainId]?.data;
-      if (!chainTokens) return { symbol: '', name: '' };
-
-      const checksumAddress = safeToChecksumAddress(tokenAddress);
-      const tokenData =
-        chainTokens[checksumAddress as string] ||
-        chainTokens[tokenAddress.toLowerCase()];
-
+      const state = store.getState();
+      const token = selectSingleTokenByAddressAndChainId(
+        state,
+        tokenAddress as Hex,
+        chainId,
+      );
       return {
-        symbol: tokenData?.symbol || '',
-        iconUrl: tokenData?.iconUrl,
-        name: tokenData?.name || '',
+        symbol: token?.symbol || '',
+        name: token?.name || '',
       };
     };