From 11addf57397761ca9544a5412f9a2d13c161077a Mon Sep 17 00:00:00 2001
From: Prithpal Sooriya <prithpal.sooriya@gmail.com>
Date: Tue, 4 Feb 2025 12:10:27 +0000
Subject: [PATCH] fix: use same logic in details page to show IPFS images
 (#30091)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## **Description**

IPFS images in the grid view were not correctly identified and therefore
were not fetched/displayed.

This copies the logic in the details page to ensure that we correctly
show IPFS NFTs.

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/30091?quickstart=1)

## **Related issues**

Fixes: https://github.com/MetaMask/metamask-extension/issues/30063

## **Manual testing steps**

1. Go to this page...
2.
3.

## **Screenshots/Recordings**

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

### **Before**

![main
branch](https://github.com/user-attachments/assets/edb23d23-444b-4052-ae94-dcc7ae3fd712)

### **After**

![Screenshot 2025-02-04 at 11 33
34](https://github.com/user-attachments/assets/5ea12448-a171-4fde-9dd6-e193f3d7fc2e)

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/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-extension/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.
---
 .../app/assets/nfts/nft-grid/nft-grid.tsx     | 64 +++++++++++++++----
 1 file changed, 52 insertions(+), 12 deletions(-)

diff --git a/ui/components/app/assets/nfts/nft-grid/nft-grid.tsx b/ui/components/app/assets/nfts/nft-grid/nft-grid.tsx
index 2b5639e95274..626010dbea18 100644
--- a/ui/components/app/assets/nfts/nft-grid/nft-grid.tsx
+++ b/ui/components/app/assets/nfts/nft-grid/nft-grid.tsx
@@ -9,8 +9,56 @@ import { NftItem } from '../../../../multichain/nft-item';
 import { NFT } from '../../../../multichain/asset-picker-amount/asset-picker-modal/types';
 import {
   getCurrentNetwork,
+  getIpfsGateway,
   getNftIsStillFetchingIndication,
 } from '../../../../../selectors';
+import useGetAssetImageUrl from '../../../../../hooks/useGetAssetImageUrl';
+
+const NFTGridItem = (props: {
+  nft: NFT;
+  onClick: () => void;
+  privacyMode?: boolean;
+  currentChain: {
+    chainId: Hex;
+    nickname: string;
+    rpcPrefs?: {
+      imageUrl: string;
+    };
+  };
+}) => {
+  const { nft, onClick, privacyMode, currentChain } = props;
+
+  const { image, imageOriginal } = nft;
+
+  const ipfsGateway = useSelector(getIpfsGateway);
+  const nftImageURL = useGetAssetImageUrl(
+    imageOriginal ?? image ?? undefined,
+    ipfsGateway,
+  );
+
+  const isImageHosted =
+    image?.startsWith('https:') || image?.startsWith('http:');
+  const nftItemSrc = isImageHosted ? image : nftImageURL;
+
+  const nftImageAlt = getNftImageAlt(nft);
+
+  const nftSrcUrl = imageOriginal ?? image;
+  const isIpfsURL = nftSrcUrl?.startsWith('ipfs:');
+
+  return (
+    <NftItem
+      nft={nft}
+      alt={nftImageAlt}
+      src={nftItemSrc}
+      networkName={currentChain.nickname}
+      networkSrc={currentChain.rpcPrefs?.imageUrl}
+      onClick={onClick}
+      isIpfsURL={isIpfsURL}
+      privacyMode={privacyMode}
+      clickable
+    />
+  );
+};
 
 export default function NftGrid({
   nfts,
@@ -34,27 +82,19 @@ export default function NftGrid({
     <Box style={{ margin: 16 }}>
       <Box display={Display.Grid} gap={4} className="nft-items__wrapper">
         {nfts.map((nft: NFT) => {
-          const { image, imageOriginal, tokenURI } = nft;
-          const nftImageAlt = getNftImageAlt(nft);
-          const isIpfsURL = (imageOriginal ?? image ?? tokenURI)?.startsWith(
-            'ipfs:',
-          );
+          const { tokenURI } = nft;
+
           return (
             <Box
               data-testid="nft-wrapper"
               key={tokenURI}
               className="nft-items__image-wrapper"
             >
-              <NftItem
+              <NFTGridItem
+                currentChain={currentChain}
                 nft={nft}
-                alt={nftImageAlt}
-                src={image ?? ''}
-                networkName={currentChain.nickname}
-                networkSrc={currentChain.rpcPrefs?.imageUrl}
                 onClick={() => handleNftClick(nft)}
-                isIpfsURL={isIpfsURL}
                 privacyMode={privacyMode}
-                clickable
               />
             </Box>
           );