fix: make async getAssetImageURL

MetaMask · Sep 9, 2024 · e1b952e · e1b952e
1 parent 8605106
commit e1b952e
Show file tree

Hide file tree

Showing 11 changed files with 267 additions and 60 deletions.
diff --git a/app/scripts/metamask-controller.js b/app/scripts/metamask-controller.js
@@ -640,6 +640,12 @@ export default class MetamaskController extends EventEmitter {
         `${this.networkController.name}:getNetworkClientById`,
         'AccountsController:getSelectedAccount',
         'AccountsController:getAccount',
+        'AssetsContractController:getERC721AssetName',
+        'AssetsContractController:getERC721AssetSymbol',
+        'AssetsContractController:getERC721TokenURI',
+        'AssetsContractController:getERC721OwnerOf',
+        'AssetsContractController:getERC1155BalanceOf',
+        'AssetsContractController:getERC1155TokenURI',
       ],
     });
     this.nftController = new NftController({

diff --git a/ui/components/app/assets/nfts/nft-details/nft-details.tsx b/ui/components/app/assets/nfts/nft-details/nft-details.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useContext } from 'react';
+import React, { useEffect, useContext, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
@@ -105,12 +105,12 @@ export default function NftDetails({ nft }: { nft: Nft }) {
   const trackEvent = useContext(MetaMetricsContext);
   const currency = useSelector(getCurrentCurrency);
   const selectedNativeConversionRate = useSelector(getConversionRate);
+  const [nftImageURL, setAssetImageUrl] = useState<string>('');
 
   const [addressCopied, handleAddressCopy] = useCopyToClipboard();
 
   const nftImageAlt = getNftImageAlt(nft);
   const nftSrcUrl = imageOriginal ?? image;
-  const nftImageURL = getAssetImageURL(imageOriginal ?? image, ipfsGateway);
   const isIpfsURL = nftSrcUrl?.startsWith('ipfs:');
   const isImageHosted = image?.startsWith('https:');
 
@@ -165,6 +165,19 @@ export default function NftDetails({ nft }: { nft: Nft }) {
   };
 
   const { chainId } = currentChain;
+
+  useEffect(() => {
+    const getAssetImageUrl = async () => {
+      const assetImageUrl = await getAssetImageURL(
+        imageOriginal ?? image,
+        ipfsGateway,
+      );
+      setAssetImageUrl(assetImageUrl);
+    };
+
+    getAssetImageUrl();
+  }, []);
+
   useEffect(() => {
     trackEvent({
       event: MetaMetricsEventName.NftDetailsOpened,

diff --git a/ui/components/app/assets/nfts/nft-details/nft-full-image.tsx b/ui/components/app/assets/nfts/nft-details/nft-full-image.tsx
@@ -37,16 +37,28 @@ export default function NftFullImage() {
 
   const ipfsGateway = useSelector(getIpfsGateway);
   const currentChain = useSelector(getCurrentNetwork);
+  const [nftImageURL, setAssetImageUrl] = useState<string>('');
 
   const nftImageAlt = getNftImageAlt(nft);
   const nftSrcUrl = imageOriginal ?? image;
-  const nftImageURL = getAssetImageURL(imageOriginal ?? image, ipfsGateway);
   const isIpfsURL = nftSrcUrl?.startsWith('ipfs:');
   const isImageHosted = image?.startsWith('https:');
   const history = useHistory();
 
   const [visible, setVisible] = useState(false);
 
+  useEffect(() => {
+    const getAssetImageUrl = async () => {
+      const assetImageUrl = await getAssetImageURL(
+        imageOriginal ?? image,
+        ipfsGateway,
+      );
+      setAssetImageUrl(assetImageUrl);
+    };
+
+    getAssetImageUrl();
+  }, []);
+
   useEffect(() => {
     setVisible(true);
   }, []);

diff --git a/ui/components/app/assets/nfts/nfts-items/collection-image.component.tsx b/ui/components/app/assets/nfts/nfts-items/collection-image.component.tsx
@@ -0,0 +1,66 @@
+import React, { useEffect, useState } from 'react';
+
+import { useSelector } from 'react-redux';
+
+import Box from '../../../../ui/box';
+
+import { getIpfsGateway, getOpenSeaEnabled } from '../../../../../selectors';
+import { getAssetImageURL } from '../../../../../helpers/utils/util';
+
+export const CollectionImageComponent = ({
+  collectionImage,
+  collectionName,
+}: {
+  collectionImage: string;
+  collectionName: string;
+}) => {
+  const ipfsGateway = useSelector(getIpfsGateway);
+  const openSeaEnabled = useSelector(getOpenSeaEnabled);
+  const [nftImageURL, setAssetImageUrl] = useState<string>('');
+
+  useEffect(() => {
+    const getAssetImageUrl = async () => {
+      const assetImageUrl = await getAssetImageURL(
+        collectionImage,
+        ipfsGateway,
+      );
+      setAssetImageUrl(assetImageUrl);
+    };
+
+    getAssetImageUrl();
+  }, []);
+
+  const renderCollectionImage = () => {
+    if (collectionImage?.startsWith('ipfs') && !ipfsGateway) {
+      return (
+        <div className="nfts-items__collection-image-alt">
+          {collectionName?.[0]?.toUpperCase() ?? null}
+        </div>
+      );
+    }
+    if (!openSeaEnabled && !collectionImage?.startsWith('ipfs')) {
+      return (
+        <div className="nfts-items__collection-image-alt">
+          {collectionName?.[0]?.toUpperCase() ?? null}
+        </div>
+      );
+    }
+
+    if (collectionImage) {
+      return (
+        <img
+          alt={collectionName}
+          src={nftImageURL}
+          className="nfts-items__collection-image"
+        />
+      );
+    }
+    return (
+      <div className="nfts-items__collection-image-alt">
+        {collectionName?.[0]?.toUpperCase() ?? null}
+      </div>
+    );
+  };
+
+  return <Box>{renderCollectionImage()}</Box>;
+};
diff --git a/ui/components/app/assets/nfts/nfts-items/nfts-items.js b/ui/components/app/assets/nfts/nfts-items/nfts-items.js
@@ -1,4 +1,4 @@
-import React, { useContext, useEffect } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
@@ -22,7 +22,6 @@ import {
   getIpfsGateway,
   getSelectedInternalAccount,
   getCurrentNetwork,
-  getOpenSeaEnabled,
 } from '../../../../../selectors';
 import {
   ASSET_ROUTE,
@@ -46,6 +45,8 @@ import {
   MetaMetricsEventCategory,
   MetaMetricsEventName,
 } from '../../../../../../shared/constants/metametrics';
+import { isEqualCaseInsensitive } from '../../../../../../shared/modules/string-utils';
+import { CollectionImageComponent } from './collection-image.component';
 
 const width = (isModal) => {
   const env = getEnvironmentType() === ENVIRONMENT_TYPE_POPUP;
@@ -78,7 +79,8 @@ export default function NftsItems({
   const currentChain = useSelector(getCurrentNetwork);
   const t = useI18nContext();
   const ipfsGateway = useSelector(getIpfsGateway);
-  const openSeaEnabled = useSelector(getOpenSeaEnabled);
+
+  const [updatedNfts, setUpdatedNfts] = useState([]);
 
   const trackEvent = useContext(MetaMetricsContext);
   const sendAnalytics = useSelector(getSendAnalyticProperties);
@@ -116,39 +118,39 @@ export default function NftsItems({
     dispatch,
   ]);
 
-  const history = useHistory();
+  const getAssetImageUrlAndUpdate = async (image, nft) => {
+    const nftImage = await getAssetImageURL(image, ipfsGateway);
+    const updatedNFt = {
+      ...nft,
+      ipfsImageUpdated: nftImage,
+    };
+    return updatedNFt;
+  };
 
-  const renderCollectionImage = (collectionImage, collectionName) => {
-    if (collectionImage?.startsWith('ipfs') && !ipfsGateway) {
-      return (
-        <div className="nfts-items__collection-image-alt">
-          {collectionName?.[0]?.toUpperCase() ?? null}
-        </div>
-      );
-    }
-    if (!openSeaEnabled && !collectionImage?.startsWith('ipfs')) {
-      return (
-        <div className="nfts-items__collection-image-alt">
-          {collectionName?.[0]?.toUpperCase() ?? null}
-        </div>
-      );
-    }
+  useEffect(() => {
+    const promisesArr = [];
+    const modifyItems = async () => {
+      for (const key of collectionsKeys) {
+        const { nfts } = collections[key];
+        for (const singleNft of nfts) {
+          const { image, imageOriginal } = singleNft;
 
-    if (collectionImage) {
-      return (
-        <img
-          alt={collectionName}
-          src={getAssetImageURL(collectionImage, ipfsGateway)}
-          className="nfts-items__collection-image"
-        />
-      );
-    }
-    return (
-      <div className="nfts-items__collection-image-alt">
-        {collectionName?.[0]?.toUpperCase() ?? null}
-      </div>
-    );
-  };
+          const isImageHosted = image?.startsWith('https:');
+          if (!isImageHosted) {
+            promisesArr.push(
+              getAssetImageUrlAndUpdate(imageOriginal ?? image, singleNft),
+            );
+          }
+        }
+      }
+      const settled = await Promise.all(promisesArr);
+      setUpdatedNfts(settled);
+    };
+
+    modifyItems();
+  }, []);
+
+  const history = useHistory();
 
   const updateNftDropDownStateKey = (key, isExpanded) => {
     const newCurrentAccountState = {
@@ -220,7 +222,10 @@ export default function NftsItems({
               alignItems={AlignItems.center}
               className="nfts-items__collection-header"
             >
-              {renderCollectionImage(collectionImage, collectionName)}
+              <CollectionImageComponent
+                collectionImage={collectionImage}
+                collectionName={collectionName}
+              />
               <Typography
                 color={Color.textDefault}
                 variant={TypographyVariant.H5}
@@ -243,15 +248,23 @@ export default function NftsItems({
             {nfts.map((nft, i) => {
               const { image, address, tokenId, name, imageOriginal, tokenURI } =
                 nft;
-              const nftImage = getAssetImageURL(
-                imageOriginal ?? image,
-                ipfsGateway,
-              );
               const nftImageAlt = getNftImageAlt(nft);
               const isImageHosted = image?.startsWith('https:');
-              const nftImageURL = imageOriginal?.startsWith('ipfs')
-                ? nftImage
-                : image;
+
+              const getSource = () => {
+                if (!isImageHosted) {
+                  const found = updatedNfts.find(
+                    (elm) =>
+                      elm.tokenId === nft.tokenId &&
+                      isEqualCaseInsensitive(elm.address, nft.address),
+                  );
+                  if (found) {
+                    return found.ipfsImageUpdated;
+                  }
+                }
+                return image;
+              };
+
               const isIpfsURL = (
                 imageOriginal ??
                 image ??
@@ -271,9 +284,8 @@ export default function NftsItems({
                   className="nfts-items__item-wrapper"
                 >
                   <NftItem
-                    nftImageURL={nftImageURL}
                     alt={nftImageAlt}
-                    src={isImageHosted ? image : nftImage}
+                    src={getSource()}
                     name={name}
                     tokenId={tokenId}
                     networkName={currentChain.nickname}

diff --git a/ui/components/multichain/asset-picker-amount/asset-picker-amount.tsx b/ui/components/multichain/asset-picker-amount/asset-picker-amount.tsx
@@ -109,6 +109,7 @@ export const AssetPickerAmount = ({
 
   const [isFocused, setIsFocused] = useState(false);
   const [isNFTInputChanged, setIsTokenInputChanged] = useState(false);
+  const [nftImageURL, setAssetImageUrl] = useState<string>('');
 
   const handleChange = useCallback(
     (newAmountRaw, newAmountFormatted) => {
@@ -140,6 +141,18 @@ export const AssetPickerAmount = ({
     }
   }, [selectedAccount]);
 
+  useEffect(() => {
+    const getAssetImageUrl = async () => {
+      const assetImageUrl = await getAssetImageURL(
+        asset?.details?.image,
+        ipfsGateway,
+      );
+      setAssetImageUrl(assetImageUrl);
+    };
+
+    getAssetImageUrl();
+  }, []);
+
   let borderColor = BorderColor.borderMuted;
 
   if (isDisabled) {
@@ -168,7 +181,7 @@ export const AssetPickerAmount = ({
     standardizedAsset = {
       type: asset.type,
       image:
-        getAssetImageURL(asset.details.image, ipfsGateway) ||
+        nftImageURL ||
         (tokenList &&
           asset.details?.address &&
           tokenList[asset.details.address.toLowerCase()]?.iconUrl),

diff --git a/ui/components/multichain/pages/send/components/recipient-content.tsx b/ui/components/multichain/pages/send/components/recipient-content.tsx
@@ -1,9 +1,11 @@
 import React, {
   useCallback,
+  useEffect,
   ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
   useMemo,
   ///: END:ONLY_INCLUDE_IF
   useRef,
+  useState,
 } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
@@ -103,6 +105,7 @@ export const SendPageRecipientContent = ({
   ///: END:ONLY_INCLUDE_IF
 
   const bestQuote: Quote = useSelector(getBestQuote);
+  const [nftImageURL, setAssetImageUrl] = useState<string>('');
 
   const isLoadingInitialQuotes = !bestQuote && isSwapQuoteLoading;
 
@@ -130,6 +133,18 @@ export const SendPageRecipientContent = ({
   // Gas data
   const dispatch = useDispatch();
 
+  useEffect(() => {
+    const getAssetImageUrl = async () => {
+      const assetImageUrl = await getAssetImageURL(
+        sendAsset.details?.image,
+        ipfsGateway,
+      );
+      setAssetImageUrl(assetImageUrl);
+    };
+
+    getAssetImageUrl();
+  }, []);
+
   return (
     <Box>
       {requireContractAddressAcknowledgement ? (
@@ -169,7 +184,7 @@ export const SendPageRecipientContent = ({
                   ? nativeCurrencyImageUrl
                   : tokenList &&
                     sendAsset.details &&
-                    (getAssetImageURL(sendAsset.details?.image, ipfsGateway) ||
+                    (nftImageURL ||
                       tokenList[sendAsset.details.address?.toLowerCase()]
                         ?.iconUrl),
               symbol: sendAsset?.details?.symbol || nativeCurrencySymbol,