chore(runway): cherry-pick fix: cp-7.62.0 Fix unknown asset presentation when nonEVM selected on network manager (#25056)

- fix: cp-7.62.0 Fix unknown asset presentation when nonEVM selected on
network manager (#25024)

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

This PR aims to fix unknown asset presentation when nonEVM is selected
on network manager.

## **Changelog**

No changelog as it's regression from last release.

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

## **Related issues**

Fixes:

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




https://github.com/user-attachments/assets/b0207e02-0931-4325-bfc8-4e75fa1ab7c8



## **Pre-merge author checklist**

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

## **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]
> Fixes token resolution in confirmations and adds targeted tests.
> 
> - Updates `useTokenAsset` to fetch tokens per `from` address using
`selectAccountTokensAcrossChainsForAddress`
> - Adds `useMemo` optimization and explicit handling for missing
`chainId` or transaction metadata, returning `strings('token.unknown')`
> - Continues using `getNativeTokenAddress` for native-token transaction
types
> - Adds tests covering unknown token, successful asset lookup, EVM send
with non-EVM selected, missing `chainId`, and missing metadata
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
605f574. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->


[13d2932](13d2932)

Co-authored-by: OGPoyraz <omergoktugpoyraz@gmail.com>

Author: runway-github[bot]

app/components/Views/confirmations/hooks/useTokenAsset.test.ts

@@ -1,8 +1,11 @@
+import merge from 'lodash/merge';
+
 import { strings } from '../../../../../locales/i18n';
 import { useTokenAsset } from './useTokenAsset';
 import { renderHookWithProvider } from '../../../../util/test/renderWithProvider';
 import { backgroundState } from '../../../../util/test/initial-root-state';
 import { stakingDepositConfirmationState } from '../../../../util/test/confirm-data-helpers';
+import { useTransactionMetadataRequest } from './transactions/useTransactionMetadataRequest';
 
 jest.mock('./transactions/useTransactionMetadataRequest', () => ({
   useTransactionMetadataRequest: jest.fn().mockReturnValue({
@@ -14,12 +17,30 @@ jest.mock('./transactions/useTransactionMetadataRequest', () => ({
   }),
 }));
 
+const mockUseTransactionMetadataRequest =
+  useTransactionMetadataRequest as jest.Mock;
+
 describe('useTokenAsset', () => {
   beforeEach(() => {
     jest.clearAllMocks();
+    mockUseTransactionMetadataRequest.mockReturnValue({
+      chainId: '0x1',
+      txParams: {
+        to: '0x0000000000000000000000000000000000000000',
+        from: '0x0000000000000000000000000000000000000000',
+      },
+    });
   });
 
   it('returns "unknown" token name and symbol when the asset symbol is not found', () => {
+    mockUseTransactionMetadataRequest.mockReturnValue({
+      chainId: '0x1',
+      txParams: {
+        to: '0x1234567890123456789012345678901234567890',
+        from: '0x0000000000000000000000000000000000000000',
+      },
+    });
+
     const { result } = renderHookWithProvider(useTokenAsset, {
       state: {
         engine: {
@@ -44,4 +65,63 @@ describe('useTokenAsset', () => {
     });
     expect(result.current.displayName).toEqual('ETH');
   });
+
+  it('returns correct token when non-EVM network is selected but sending EVM token', () => {
+    const evmAddress = '0x0000000000000000000000000000000000000000';
+    mockUseTransactionMetadataRequest.mockReturnValue({
+      chainId: '0x1',
+      txParams: {
+        to: evmAddress,
+        from: evmAddress,
+      },
+    });
+
+    const stateWithNonEvmSelected = merge({}, stakingDepositConfirmationState, {
+      engine: {
+        backgroundState: {
+          AccountsController: {
+            internalAccounts: {
+              selectedAccount: '0x0000000000000000000000000000000000000000',
+            },
+          },
+        },
+      },
+    });
+
+    const { result } = renderHookWithProvider(useTokenAsset, {
+      state: stateWithNonEvmSelected,
+    });
+
+    expect(result.current.asset).toMatchObject({
+      name: 'Ethereum',
+      symbol: 'Ethereum',
+    });
+    expect(result.current.displayName).toEqual('ETH');
+  });
+
+  it('returns "unknown" when chainId is not provided', () => {
+    mockUseTransactionMetadataRequest.mockReturnValue({
+      chainId: undefined,
+      txParams: {
+        to: '0x0000000000000000000000000000000000000000',
+        from: '0x0000000000000000000000000000000000000000',
+      },
+    });
+
+    const { result } = renderHookWithProvider(useTokenAsset, {
+      state: stakingDepositConfirmationState,
+    });
+
+    expect(result.current.displayName).toEqual(strings('token.unknown'));
+  });
+
+  it('returns "unknown" when transaction metadata is not available', () => {
+    mockUseTransactionMetadataRequest.mockReturnValue(undefined);
+
+    const { result } = renderHookWithProvider(useTokenAsset, {
+      state: stakingDepositConfirmationState,
+    });
+
+    expect(result.current.displayName).toEqual(strings('token.unknown'));
+  });
 });

app/components/Views/confirmations/hooks/useTokenAsset.ts

@@ -1,13 +1,15 @@
 import { Hex } from '@metamask/utils';
 import { TransactionType } from '@metamask/transaction-controller';
 import { useSelector } from 'react-redux';
+import { useMemo } from 'react';
+import { getNativeTokenAddress } from '@metamask/assets-controllers';
 
 import { strings } from '../../../../../locales/i18n';
-import { selectAccountTokensAcrossChains } from '../../../../selectors/multichain';
+import { selectAccountTokensAcrossChainsForAddress } from '../../../../selectors/multichain';
 import { safeToChecksumAddress } from '../../../../util/address';
 import { TokenI } from '../../../UI/Tokens/types';
 import { useTransactionMetadataRequest } from './transactions/useTransactionMetadataRequest';
-import { getNativeTokenAddress } from '@metamask/assets-controllers';
+import { RootState } from '../../../../reducers';
 
 const TypesForNativeToken = [
   TransactionType.simpleSend,
@@ -24,30 +26,37 @@ export const useTokenAsset = () => {
   } = useTransactionMetadataRequest() ?? {};
 
   const nativeTokenAddress = getNativeTokenAddress(chainId as Hex);
-  const tokens = useSelector(selectAccountTokensAcrossChains);
-
-  if (!chainId) {
-    return { displayName: strings('token.unknown') };
-  }
-
-  const tokenAddress =
-    transactionType && TypesForNativeToken.includes(transactionType)
-      ? nativeTokenAddress
-      : safeToChecksumAddress(txParams?.to)?.toLowerCase();
-
-  const asset = tokens[chainId]?.find(
-    ({ address }) => address.toLowerCase() === tokenAddress,
-  ) as TokenI;
-
-  if (!asset) {
-    return { asset: {}, displayName: strings('token.unknown') };
-  }
-
-  const { name, symbol, ticker } = asset;
-  const displayName = ticker ?? symbol ?? name ?? strings('token.unknown');
-
-  return {
-    asset,
-    displayName,
-  };
+  const fromAddress = txParams?.from;
+  const tokens = useSelector((state: RootState) =>
+    selectAccountTokensAcrossChainsForAddress(state, fromAddress),
+  );
+
+  const result = useMemo(() => {
+    if (!chainId) {
+      return { displayName: strings('token.unknown') };
+    }
+
+    const tokenAddress =
+      transactionType && TypesForNativeToken.includes(transactionType)
+        ? nativeTokenAddress
+        : safeToChecksumAddress(txParams?.to)?.toLowerCase();
+
+    const asset = tokens[chainId]?.find(
+      ({ address }) => address.toLowerCase() === tokenAddress,
+    ) as TokenI;
+
+    if (!asset) {
+      return { asset: {}, displayName: strings('token.unknown') };
+    }
+
+    const { name, symbol, ticker } = asset;
+    const displayName = ticker ?? symbol ?? name ?? strings('token.unknown');
+
+    return {
+      asset,
+      displayName,
+    };
+  }, [chainId, transactionType, nativeTokenAddress, txParams?.to, tokens]);
+
+  return result;
 };