chore(runway): cherry-pick fix: cp-7.41.0 support NFT collectibles th…

…at have multiple images (#13701)

- fix: cp-7.41.0 support NFT collectibles that have multiple images
(#13689)

## **Description**

Ensures that we handle array images correctly by defaulting to their
first image

## **Related issues**

Fixes: https://consensys.slack.com/archives/C8RSKCNCD/p1739984618053419

## **Manual testing steps**

This is not really testable unless you comment out validation in a dev
version to add this NFT.
```
https://polygonscan.com/token/0x4b22c268e3f7f643686e0dfb160b40fe5328cccd?a=0x397d7171504776AD3d5f578ce772914539E28a49

contract address: 0x4b22C268E3f7f643686E0dfB160B40fE5328cccD
TokenID: 6822
```

1. Add the above NFT.
2. Does it render in the NFT tab.
3. Can you click on an NFT to visit the details page
4. Can you click on the NFT in the details page to expand the image?

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

- [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.
[7180605](7180605)

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

app/components/UI/CollectibleMedia/CollectibleMedia.test.tsx

@@ -1,11 +1,14 @@
 import React from 'react';
+import { waitFor } from '@testing-library/react-native';
 import { CHAIN_IDS } from '@metamask/transaction-controller';
 
 import CollectibleMedia from './CollectibleMedia';
 
 import renderWithProvider from '../../../util/test/renderWithProvider';
 import { backgroundState } from '../../../util/test/initial-root-state';
 import { mockNetworkState } from '../../../util/test/network';
+// eslint-disable-next-line import/no-namespace
+import * as AssetControllers from '@metamask/assets-controllers';
 
 const mockInitialState = {
   engine: {
@@ -83,4 +86,47 @@ describe('CollectibleMedia', () => {
     const fallbackCollectible = getByTestId('nft-image');
     expect(fallbackCollectible).toBeDefined();
   });
+
+  it('should handle an nft with multiple images and render the first image', async () => {
+    const images = [
+      'ipfs://bafybeidgklvljyifilhtrxzh77brgnhcy6s2wxoxqc2l73zr2nxlwuxfcy',
+      'ipfs://bafybeic26kitpujb3q5h5w7yovmvgmtxl3y4ldsb2pfgual5jq62emsmxq',
+    ];
+
+    const mockGetFormattedIpfsUrl = jest
+      .spyOn(AssetControllers, 'getFormattedIpfsUrl')
+      .mockResolvedValue(
+        'https://bafybeidgklvljyifilhtrxzh77brgnhcy6s2wxoxqc2l73zr2nxlwuxfcy.ipfs.dweb.link',
+      );
+
+    const expectedUri =
+      'https://bafybeidgklvljyifilhtrxzh77brgnhcy6s2wxoxqc2l73zr2nxlwuxfcy.ipfs.dweb.link';
+
+    const { getByTestId } = renderWithProvider(
+      <CollectibleMedia
+        collectible={{
+          name: 'NAME',
+          image: images,
+          imagePreview: 'https://',
+          tokenId: '123',
+          address: '0x123',
+          backgroundColor: 'red',
+          tokenURI:
+            'ipfs://QmXt7k3uoihWSyzduXErHFGTTQ3a9rnokzw9s4ywKXKsA7QmXt7k3uoihWSyzduXErHFGTTQ3a9rnokzw9s4ywKXKsA7',
+          description: '123',
+          standard: 'ERC721',
+        }}
+      />,
+      { state: mockInitialState },
+    );
+
+    await new Promise((r) => setTimeout(r, 2000));
+
+    await waitFor(() => {
+      const elem = getByTestId('nft-image');
+      expect(elem.props.source).toEqual({ uri: expectedUri });
+      const mocksImageParam = mockGetFormattedIpfsUrl.mock.lastCall?.[1];
+      expect(mocksImageParam).toBe(images[0]);
+    });
+  });
 });

app/components/UI/CollectibleMedia/CollectibleMedia.tsx

@@ -22,6 +22,7 @@ import { strings } from '../../../../locales/i18n';
 import { useNavigation } from '@react-navigation/native';
 import Routes from '../../../constants/navigation/Routes';
 import { useStyles } from '../../../component-library/hooks';
+import { getNftImage } from '../../../util/get-nft-image';
 
 const CollectibleMedia: React.FC<CollectibleMediaProps> = ({
   collectible,
@@ -52,7 +53,7 @@ const CollectibleMedia: React.FC<CollectibleMediaProps> = ({
     if (address) {
       if (small && imagePreview && imagePreview !== '')
         setSourceUri(imagePreview);
-      else setSourceUri((image || imageOriginal) ?? null);
+      else setSourceUri((getNftImage(image) || imageOriginal) ?? null);
     }
   }, [collectible, small, big, setSourceUri]);
 

app/components/UI/CollectibleMedia/CollectibleMedia.types.ts

@@ -4,7 +4,7 @@ import { ViewStyle } from 'react-native';
 export interface Collectible {
   name: string;
   tokenId: string;
-  image: string;
+  image: string | string[];
   imagePreview: string;
   address: string;
   animation?: string;
@@ -19,8 +19,12 @@ export interface Collectible {
   isCurrentlyOwned?: boolean;
 }
 
+type NFTData = Omit<Nft, 'image'> & {
+  image: Nft['image'] | string[];
+};
+
 export interface CollectibleMediaProps {
-  collectible: Nft;
+  collectible: NFTData;
   tiny?: boolean;
   small?: boolean;
   big?: boolean;

app/util/get-nft-image.test.ts

@@ -0,0 +1,31 @@
+import { getNftImage } from './get-nft-image';
+
+describe('getNftImage', () => {
+  it('returns original image if string', () => {
+    const image =
+      'ipfs://bafybeidgklvljyifilhtrxzh77brgnhcy6s2wxoxqc2l73zr2nxlwuxfcy';
+    const result = getNftImage(image);
+    expect(result).toBe(image);
+  });
+
+  it('returns the first image if image is an array', () => {
+    const image = [
+      'ipfs://bafybeidgklvljyifilhtrxzh77brgnhcy6s2wxoxqc2l73zr2nxlwuxfcy',
+      'ipfs://bafybeic26kitpujb3q5h5w7yovmvgmtxl3y4ldsb2pfgual5jq62emsmxq',
+    ];
+    const result = getNftImage(image);
+    expect(result).toBe(image[0]);
+  });
+
+  it('returns undefined if image is missing', () => {
+    const image = undefined;
+    const result = getNftImage(image);
+    expect(result).toBeUndefined();
+  });
+
+  it('returns undefined if image is not a type we were expecting ', () => {
+    const image = { badType: 'badType' } as unknown as string;
+    const result = getNftImage(image);
+    expect(result).toBeUndefined();
+  });
+});

app/util/get-nft-image.ts

@@ -0,0 +1,12 @@
+type NFTImage = string | string[] | undefined | null;
+export const getNftImage = (image: NFTImage): string | undefined => {
+  if (typeof image === 'string') {
+    return image;
+  }
+
+  if (Array.isArray(image)) {
+    return image[0];
+  }
+
+  return undefined;
+};