chore(runway): cherry-pick fix: cp-7.60.0 use correct chainId collectibles for nft send flow (#23071)

- fix: cp-7.60.0 use correct chainId collectibles for nft send flow
(#22966)

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

The underlying sendflow uses `selectChainId` which should be marked as
deprecated.
- This selected does not return the correct chain ID when you are using
"Popular Networks" view as you can have multiple chainIDs selected now!!

This has unearthed a very large scope at this selector underpins many
areas in mobile and extension 💀
Ideally all flows and features should move away from this selector and
handle multiple selected chainIDs.


## **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: fix: correct nft images available during send flow

## **Related issues**

Fixes: #20982

## **Manual testing steps**

1. Select Popular Networks Tab
2. Go through NFT send flow - Select NFT from (e.g.) Linea (not
ethereum)
3. Expected: On review page, should see NFT and can select NFT image
without crashing app

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

https://www.loom.com/share/683675a4c01b47b0a99f6ff5e9dfa30a

## **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]
> Switches NFT lookup to a chain-scoped selector to fix multi-network
send flow, updates HeroNft placeholder behavior, adds selector tests,
and deprecates legacy selectors.
> 
> - **State/Selectors**:
> - Add `selectAllCollectiblesByChain` in
`reducers/collectibles/collectibles.ts` with unit tests, enabling
per-chain NFT selection.
> - Mark `collectiblesSelector` and `selectChainId` as deprecated with
notes about multi-network selection.
> - **Hooks**:
>   - Update `useNft` to:
> - Derive `hexChainId` and select NFTs via
`selectAllCollectiblesByChain`.
>     - Return `chainId` as hex and resolve contract/name accordingly.
> - **UI**:
> - `HeroNft` placeholder: make non-interactive when no NFT; only show
`#tokenId` if present; remove "Show" text.
> - **Tests**:
> - Adjust `hero-nft.test.tsx` to reflect placeholder behavior and
collection image fallback.
> - Add `collectibles.test.ts` covering `selectAllCollectiblesByChain`
edge cases.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
4c30784. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->


[e5692de](e5692de)

Co-authored-by: Prithpal Sooriya <prithpal.sooriya@consensys.net>

Author: runway-github[bot]

app/components/Views/confirmations/components/hero-nft/hero-nft.test.tsx

@@ -41,33 +41,29 @@ describe('HeroNft', () => {
   });
 
   it('renders placeholder when image is not provided', () => {
-    const { getByText, getByTestId, queryAllByText } = renderWithProvider(
-      <HeroNft />,
-      {
-        state: merge({}, MOCK_STATE_NFT, {
-          engine: {
-            backgroundState: {
-              NftController: {
-                allNfts: {
-                  [MOCK_ADDRESS_1.toLowerCase()]: {
-                    '0x1': [
-                      {
-                        ...mockNft,
-                        image: undefined,
-                      },
-                    ],
-                  },
+    const { getByTestId, queryAllByText } = renderWithProvider(<HeroNft />, {
+      state: merge({}, MOCK_STATE_NFT, {
+        engine: {
+          backgroundState: {
+            NftController: {
+              allNfts: {
+                [MOCK_ADDRESS_1.toLowerCase()]: {
+                  '0x1': [
+                    {
+                      ...mockNft,
+                      image: undefined,
+                    },
+                  ],
                 },
               },
             },
           },
-        }),
-      },
-    );
+        },
+      }),
+    });
 
-    expect(getByText('Show')).toBeDefined();
     expect(queryAllByText('#12345')).toHaveLength(2);
-    expect(getByTestId('hero-nft-placeholder')).toBeDefined();
+    expect(getByTestId('hero-nft-placeholder')).toBeOnTheScreen();
 
     fireEvent.press(getByTestId('hero-nft-placeholder'));
     expect(mockNavigate).toHaveBeenCalledWith('NftDetailsFullImage', {
@@ -78,6 +74,28 @@ describe('HeroNft', () => {
     });
   });
 
+  it('placeholder is not interactable when no nft found', () => {
+    const state = merge({}, MOCK_STATE_NFT, {
+      engine: {
+        backgroundState: {
+          NftController: {},
+        },
+      },
+    });
+    state.engine.backgroundState.NftController.allNfts[
+      MOCK_ADDRESS_1.toLowerCase()
+    ]['0x1'] = [];
+    const { getByTestId } = renderWithProvider(<HeroNft />, {
+      state,
+    });
+
+    expect(getByTestId('hero-nft-placeholder')).toBeOnTheScreen();
+
+    fireEvent.press(getByTestId('hero-nft-placeholder'));
+
+    expect(mockNavigate).not.toHaveBeenCalled();
+  });
+
   it('renders NFT with network badge', () => {
     const { getByTestId, getByText } = renderWithProvider(<HeroNft />, {
       state: MOCK_STATE_NFT,
@@ -89,6 +107,7 @@ describe('HeroNft', () => {
     expect(getByText('#12345')).toBeDefined();
 
     fireEvent.press(getByTestId('nft-image'));
+
     expect(mockNavigate).toHaveBeenCalledWith('NftDetailsFullImage', {
       collectible: mockNft,
     });
@@ -123,6 +142,7 @@ describe('HeroNft', () => {
     expect(getByText('#12345')).toBeDefined();
 
     fireEvent.press(getByTestId('nft-image'));
+
     expect(mockNavigate).toHaveBeenCalledWith('NftDetailsFullImage', {
       collectible: {
         ...mockNft,

app/components/Views/confirmations/components/hero-nft/hero-nft.tsx

@@ -8,9 +8,7 @@ import Badge, {
 import BadgeWrapper, {
   BadgePosition,
 } from '../../../../../component-library/components/Badges/BadgeWrapper';
-import Text, {
-  TextColor,
-} from '../../../../../component-library/components/Texts/Text';
+import Text from '../../../../../component-library/components/Texts/Text';
 import { useStyles } from '../../../../../component-library/hooks/useStyles';
 import CollectibleMedia from '../../../../UI/CollectibleMedia';
 import { useNft } from '../../hooks/nft/useNft';
@@ -38,6 +36,10 @@ const NftImageAndNetworkBadge = ({
   const showPlaceholder = !nft || !chainId?.length || (!image && !imageUrl);
 
   const onPress = useCallback(() => {
+    if (!nft) {
+      return;
+    }
+
     navigation.navigate('NftDetailsFullImage', {
       collectible: nft,
     });
@@ -51,8 +53,7 @@ const NftImageAndNetworkBadge = ({
         testID="hero-nft-placeholder"
       >
         <View style={styles.noImagePlaceholder}>
-          <Text>{`#${tokenId}`}</Text>
-          <Text color={TextColor.Primary}>Show</Text>
+          {tokenId && <Text>{`#${tokenId}`}</Text>}
         </View>
       </TouchableOpacity>
     );

app/components/Views/confirmations/hooks/nft/useNft.ts

@@ -1,11 +1,13 @@
 import { useSelector } from 'react-redux';
 import { Nft } from '@metamask/assets-controllers';
 import { toHex } from '@metamask/controller-utils';
-import { collectiblesSelector } from '../../../../../reducers/collectibles';
+import type { Hex } from '@metamask/utils';
 import { selectAllNftContracts } from '../../../../../selectors/nftController';
 import { safeToChecksumAddress } from '../../../../../util/address';
 import { parseStandardTokenTransactionData } from '../../utils/transaction';
 import { useTransactionMetadataRequest } from '../transactions/useTransactionMetadataRequest';
+import { selectAllCollectiblesByChain } from '../../../../../reducers/collectibles/collectibles';
+import { RootState } from '../../../../../reducers';
 
 export interface UseNftResponse {
   chainId: string;
@@ -39,13 +41,16 @@ export const useNft = (): UseNftResponse => {
     transactionData?.args?._value ?? transactionData?.args[2]
   )?.toString();
 
-  const nfts: Nft[] = useSelector(collectiblesSelector);
+  const hexChainId = (chainId && toHex(chainId)) as Hex;
+  const nfts: Nft[] = useSelector((state: RootState) =>
+    selectAllCollectiblesByChain(state, hexChainId),
+  );
   const nft = tokenId ? nfts.find((c) => c.tokenId === tokenId) : undefined;
 
   const nftContract = useNftContract(chainId, tokenAddress);
 
   return {
-    chainId: toHex(chainId).toString(),
+    chainId: hexChainId.toString(),
     name: nftContract?.name,
     nft,
     tokenId,

app/reducers/collectibles/collectibles.test.ts

@@ -0,0 +1,94 @@
+/* eslint-disable import/no-namespace */
+import { selectAllCollectiblesByChain } from './collectibles';
+import * as AccountsControllerSelectorsModule from '../../selectors/accountsController';
+import * as NFTControllerSelectorsModule from '../../selectors/nftController';
+import type { RootState } from '../index';
+import type { Hex } from '@metamask/utils';
+import { Nft } from '@metamask/assets-controllers';
+
+jest.mock('../../selectors/accountsController');
+jest.mock('../../selectors/nftController');
+
+describe('selectAllCollectiblesByChain', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    selectAllCollectiblesByChain.clearCache();
+  });
+
+  const arrange = () => {
+    const mockSelectSelectedInternalAccountAddress = jest.spyOn(
+      AccountsControllerSelectorsModule,
+      'selectSelectedInternalAccountAddress',
+    );
+    const mockSelectAllNfts = jest.spyOn(
+      NFTControllerSelectorsModule,
+      'selectAllNfts',
+    );
+    return {
+      mockSelectSelectedInternalAccountAddress,
+      mockSelectAllNfts,
+    };
+  };
+
+  const mockState: RootState = {} as RootState;
+  const mockChainId: Hex = '0x1';
+  const mockAddress = '0x123456789abcdef';
+  const mockNftContracts = {
+    [mockAddress]: {
+      [mockChainId]: [
+        { address: '0xcontract1', tokenId: '1', name: 'NFT 1' } as Nft,
+        { address: '0xcontract2', tokenId: '2', name: 'NFT 2' } as Nft,
+      ],
+      '0x89': [{ address: '0xcontract3', tokenId: '3', name: 'NFT 3' } as Nft],
+    },
+  };
+
+  it('returns collectibles for valid address and chain', () => {
+    const { mockSelectSelectedInternalAccountAddress, mockSelectAllNfts } =
+      arrange();
+    mockSelectSelectedInternalAccountAddress.mockReturnValue(mockAddress);
+    mockSelectAllNfts.mockReturnValue(mockNftContracts);
+
+    const result = selectAllCollectiblesByChain(mockState, mockChainId);
+
+    expect(result).toEqual(mockNftContracts[mockAddress][mockChainId]);
+    expect(result).toHaveLength(2);
+  });
+
+  it.each([
+    {
+      case: 'no address',
+      selectedAddress: undefined,
+      allNfts: mockNftContracts,
+      chainId: mockChainId,
+    },
+    {
+      case: 'no nfts',
+      selectedAddress: mockAddress,
+      allNfts: {},
+      chainId: mockChainId,
+    },
+    {
+      case: 'missing address',
+      selectedAddress: '0xnonexistent',
+      allNfts: mockNftContracts,
+      chainId: mockChainId,
+    },
+    {
+      case: 'missing chainId',
+      selectedAddress: mockAddress,
+      allNfts: mockNftContracts,
+      chainId: '0xnonexistent' as Hex,
+    },
+  ])('returns empty array - $case', ({ selectedAddress, allNfts, chainId }) => {
+    const { mockSelectSelectedInternalAccountAddress, mockSelectAllNfts } =
+      arrange();
+
+    mockSelectSelectedInternalAccountAddress.mockReturnValue(selectedAddress);
+    mockSelectAllNfts.mockReturnValue(allNfts);
+
+    const result = selectAllCollectiblesByChain(mockState, chainId);
+
+    expect(result).toEqual([]);
+  });
+});

app/reducers/collectibles/collectibles.ts

@@ -0,0 +1,19 @@
+import { createSelector } from 'reselect';
+import type { Hex } from '@metamask/utils';
+import type { RootState } from '../index';
+import { selectSelectedInternalAccountAddress } from '../../selectors/accountsController';
+import { selectAllNfts } from '../../selectors/nftController';
+
+export const selectAllCollectiblesByChain = createSelector(
+  [
+    selectAllNfts,
+    selectSelectedInternalAccountAddress,
+    (_: RootState, chainId: Hex) => chainId,
+  ],
+  (allNftContracts, address, chainId) => {
+    if (!address) {
+      return [];
+    }
+    return allNftContracts?.[address]?.[chainId] || [];
+  },
+);

app/reducers/collectibles/index.js

@@ -23,6 +23,9 @@ export const collectibleContractsSelector = createSelector(
     allNftContracts[address]?.[chainId] || [],
 );
 
+/**
+ * @deprecated - this does not return all collectibles if multiple networks are selected
+ */
 export const collectiblesSelector = createDeepEqualSelector(
   selectSelectedInternalAccountAddress,
   selectChainId,

app/selectors/networkController.ts

@@ -158,6 +158,10 @@ export const selectEvmChainId = createSelector(
   (providerConfig) => providerConfig.chainId,
 );
 
+/**
+ * @deprecated this does not reliabially return selected chain as users can have "popular networks" selected (multiple networks)
+ * Logic and components need to handle multiple networks selected
+ */
 export const selectChainId = createDeepEqualSelector(
   selectSelectedNonEvmNetworkChainId,
   selectEvmChainId,