feat: Provide chainId prop for Asset List

ui/components/app/assets/asset-list/native-token/native-token.tsx

@@ -52,6 +52,7 @@ const NativeToken = ({ onClickAsset }: AssetListProps) => {
       isNativeCurrency
       isStakeable={isStakeable}
       showPercentage
+      chainId={chainId}
     />
   );
 };

ui/components/app/assets/nfts/nft-details/nft-details.tsx

@@ -19,12 +19,10 @@ import {
 } from '../../../../../helpers/constants/design-system';
 import { useI18nContext } from '../../../../../hooks/useI18nContext';
 import { shortenAddress } from '../../../../../helpers/utils/util';
-import { getNftImageAlt } from '../../../../../helpers/utils/nfts';
 import {
   getCurrentChainId,
   getCurrentCurrency,
   getCurrentNetwork,
-  getIpfsGateway,
 } from '../../../../../selectors';
 import {
   ASSET_ROUTE,
@@ -72,7 +70,6 @@ import { Numeric } from '../../../../../../shared/modules/Numeric';
 // TODO: Remove restricted import
 // eslint-disable-next-line import/no-restricted-paths
 import { addUrlProtocolPrefix } from '../../../../../../app/scripts/lib/util';
-import useGetAssetImageUrl from '../../../../../hooks/useGetAssetImageUrl';
 import NftDetailInformationRow from './nft-detail-information-row';
 import NftDetailInformationFrame from './nft-detail-information-frame';
 import NftDetailDescription from './nft-detail-description';
@@ -81,8 +78,6 @@ const MAX_TOKEN_ID_LENGTH = 15;
 
 export default function NftDetails({ nft }: { nft: Nft }) {
   const {
-    image,
-    imageOriginal,
     name,
     description,
     address,
@@ -99,22 +94,14 @@ export default function NftDetails({ nft }: { nft: Nft }) {
   const t = useI18nContext();
   const history = useHistory();
   const dispatch = useDispatch();
-  const ipfsGateway = useSelector(getIpfsGateway);
-  const currentNetwork = useSelector(getCurrentChainId);
-  const currentChain = useSelector(getCurrentNetwork);
+  const chainId = useSelector(getCurrentChainId);
+  const currentNetwork = useSelector(getCurrentNetwork);
   const trackEvent = useContext(MetaMetricsContext);
   const currency = useSelector(getCurrentCurrency);
   const selectedNativeConversionRate = useSelector(getConversionRate);
 
   const [addressCopied, handleAddressCopy] = useCopyToClipboard();
 
-  const nftImageAlt = getNftImageAlt(nft);
-  const nftSrcUrl = imageOriginal ?? image;
-  const isIpfsURL = nftSrcUrl?.startsWith('ipfs:');
-  const isImageHosted =
-    image?.startsWith('https:') || image?.startsWith('http:');
-  const nftImageURL = useGetAssetImageUrl(imageOriginal ?? image, ipfsGateway);
-
   const hasFloorAskPrice = Boolean(
     collection?.floorAsk?.price?.amount?.usd &&
       collection?.floorAsk?.price?.amount?.native,
@@ -142,8 +129,8 @@ export default function NftDetails({ nft }: { nft: Nft }) {
         topBid?.price?.amount?.native,
         collection?.topBid?.price?.amount?.native,
       );
-      const currentChainSymbol = currentChain.ticker;
-      return `${topBidValue}${currentChainSymbol}`;
+      const currentNetworkSymbol = currentNetwork.ticker;
+      return `${topBidValue}${currentNetworkSymbol}`;
     }
     // return the one that is available
     const topBidValue =
@@ -152,8 +139,8 @@ export default function NftDetails({ nft }: { nft: Nft }) {
     if (!topBidValue) {
       return undefined;
     }
-    const currentChainSymbol = currentChain.ticker;
-    return `${topBidValue}${currentChainSymbol}`;
+    const currentNetworkSymbol = currentNetwork.ticker;
+    return `${topBidValue}${currentNetworkSymbol}`;
   };
 
   const getTopBidSourceDomain = () => {
@@ -165,8 +152,6 @@ export default function NftDetails({ nft }: { nft: Nft }) {
     );
   };
 
-  const { chainId } = currentChain;
-
   useEffect(() => {
     trackEvent({
       event: MetaMetricsEventName.NftDetailsOpened,
@@ -197,7 +182,7 @@ export default function NftDetails({ nft }: { nft: Nft }) {
           tokenId: tokenId.toString(),
           asset_type: AssetType.NFT,
           token_standard: standard,
-          chain_id: currentNetwork,
+          chain_id: chainId,
           isSuccessful: isSuccessfulEvent,
         },
       });
@@ -213,7 +198,7 @@ export default function NftDetails({ nft }: { nft: Nft }) {
   }, [nft, prevNft]);
 
   const getOpenSeaLink = () => {
-    switch (currentNetwork) {
+    switch (chainId) {
       case CHAIN_IDS.MAINNET:
         return `https://opensea.io/assets/ethereum/${address}/${tokenId}`;
       case CHAIN_IDS.POLYGON:
@@ -343,13 +328,7 @@ export default function NftDetails({ nft }: { nft: Nft }) {
         >
           <Box className="nft-details__nft-item">
             <NftItem
-              src={isImageHosted ? image : nftImageURL}
-              alt={image ? nftImageAlt : ''}
-              name={name}
-              tokenId={tokenId}
-              networkName={currentChain.nickname ?? ''}
-              networkSrc={currentChain.rpcPrefs?.imageUrl}
-              isIpfsURL={isIpfsURL}
+              nft={{ ...nft, chainId }}
               onClick={handleImageClick}
               clickable
             />

ui/components/app/assets/nfts/nft-details/nft-full-image.tsx

@@ -1,8 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useHistory, useParams } from 'react-router-dom';
-import { getNftImageAlt } from '../../../../../helpers/utils/nfts';
-import { getCurrentNetwork, getIpfsGateway } from '../../../../../selectors';
 
 import {
   Box,
@@ -22,7 +20,7 @@ import {
 } from '../../../../../helpers/constants/design-system';
 import { useI18nContext } from '../../../../../hooks/useI18nContext';
 import { ASSET_ROUTE } from '../../../../../helpers/constants/routes';
-import useGetAssetImageUrl from '../../../../../hooks/useGetAssetImageUrl';
+import { getCurrentChainId } from '../../../../../selectors';
 
 export default function NftFullImage() {
   const t = useI18nContext();
@@ -34,16 +32,9 @@ export default function NftFullImage() {
       isEqualCaseInsensitive(address, asset) && id === tokenId.toString(),
   );
 
-  const { image, imageOriginal, name, tokenId } = nft;
+  // TODO: Remove this when NFTs have a native chainId on their objects
+  const chainId = useSelector(getCurrentChainId);
 
-  const ipfsGateway = useSelector(getIpfsGateway);
-  const currentChain = useSelector(getCurrentNetwork);
-  const nftImageURL = useGetAssetImageUrl(imageOriginal ?? image, ipfsGateway);
-
-  const nftImageAlt = getNftImageAlt(nft);
-  const nftSrcUrl = imageOriginal ?? image;
-  const isIpfsURL = nftSrcUrl?.startsWith('ipfs:');
-  const isImageHosted = image?.startsWith('https:');
   const history = useHistory();
 
   const [visible, setVisible] = useState(false);
@@ -79,13 +70,7 @@ export default function NftFullImage() {
           >
             <Box>
               <NftItem
-                src={isImageHosted ? image : nftImageURL}
-                alt={image ? nftImageAlt : ''}
-                name={name}
-                tokenId={tokenId}
-                networkName={currentChain.nickname ?? ''}
-                networkSrc={currentChain.rpcPrefs?.imageUrl}
-                isIpfsURL={isIpfsURL}
+                nft={{ ...nft, chainId }}
                 badgeWrapperClassname="badge-wrapper"
               />
             </Box>

ui/components/app/assets/nfts/nfts-items/nfts-items.js

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useContext, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
@@ -20,17 +20,14 @@ import { ENVIRONMENT_TYPE_POPUP } from '../../../../../../shared/constants/app';
 // eslint-disable-next-line import/no-restricted-paths
 import { getEnvironmentType } from '../../../../../../app/scripts/lib/util';
 import {
-  getCurrentChainId,
   getIpfsGateway,
   getSelectedInternalAccount,
-  getCurrentNetwork,
 } from '../../../../../selectors';
 import {
   ASSET_ROUTE,
   SEND_ROUTE,
 } from '../../../../../helpers/constants/routes';
 import { getAssetImageURL } from '../../../../../helpers/utils/util';
-import { getNftImageAlt } from '../../../../../helpers/utils/nfts';
 import { updateNftDropDownState } from '../../../../../store/actions';
 import { usePrevious } from '../../../../../hooks/usePrevious';
 import { getNftsDropdownState } from '../../../../../ducks/metamask/metamask';
@@ -47,7 +44,7 @@ import {
   MetaMetricsEventCategory,
   MetaMetricsEventName,
 } from '../../../../../../shared/constants/metametrics';
-import { isEqualCaseInsensitive } from '../../../../../../shared/modules/string-utils';
+import { getMultichainCurrentChainId } from '../../../../../selectors/multichain';
 import { CollectionImageComponent } from './collection-image.component';
 
 const width = (isModal) => {
@@ -77,13 +74,10 @@ export default function NftsItems({
   const nftsDropdownState = useSelector(getNftsDropdownState);
   const previousCollectionKeys = usePrevious(collectionsKeys);
   const { address: selectedAddress } = useSelector(getSelectedInternalAccount);
-  const chainId = useSelector(getCurrentChainId);
-  const currentChain = useSelector(getCurrentNetwork);
+  const chainId = useSelector(getMultichainCurrentChainId);
   const t = useI18nContext();
   const ipfsGateway = useSelector(getIpfsGateway);
 
-  const [updatedNfts, setUpdatedNfts] = useState([]);
-
   const trackEvent = useContext(MetaMetricsContext);
   const sendAnalytics = useSelector(getSendAnalyticProperties);
 
@@ -146,8 +140,7 @@ export default function NftsItems({
           }
         }
       }
-      const settled = await Promise.all(promisesArr);
-      setUpdatedNfts(settled);
+      await Promise.all(promisesArr);
     };
 
     modifyItems();
@@ -203,19 +196,6 @@ export default function NftsItems({
     if (!nfts.length) {
       return null;
     }
-    const getSource = (isImageHosted, nft) => {
-      if (!isImageHosted) {
-        const found = updatedNfts.find(
-          (elm) =>
-            elm.tokenId === nft.tokenId &&
-            isEqualCaseInsensitive(elm.address, nft.address),
-        );
-        if (found) {
-          return found.ipfsImageUpdated;
-        }
-      }
-      return nft.image;
-    };
 
     const isExpanded = nftsDropdownState[selectedAddress]?.[chainId]?.[key];
     return (
@@ -262,19 +242,8 @@ export default function NftsItems({
         {isExpanded ? (
           <Box display={DISPLAY.FLEX} flexWrap={FLEX_WRAP.WRAP} gap={4}>
             {nfts.map((nft, i) => {
-              const { image, address, tokenId, name, imageOriginal, tokenURI } =
-                nft;
-              const nftImageAlt = getNftImageAlt(nft);
-              const isImageHosted =
-                image?.startsWith('https:') || image?.startsWith('http:');
-
-              const source = getSource(isImageHosted, nft);
+              const { address, tokenId } = nft;
 
-              const isIpfsURL = (
-                imageOriginal ??
-                image ??
-                tokenURI
-              )?.startsWith('ipfs:');
               const handleImageClick = () => {
                 if (isModal) {
                   return onSendNft(nft);
@@ -289,14 +258,8 @@ export default function NftsItems({
                   className="nfts-items__item-wrapper"
                 >
                   <NftItem
-                    alt={nftImageAlt}
-                    src={source}
-                    name={name}
-                    tokenId={tokenId}
-                    networkName={currentChain.nickname}
-                    networkSrc={currentChain.rpcPrefs?.imageUrl}
+                    nft={{ ...nft, chainId }}
                     onClick={handleImageClick}
-                    isIpfsURL={isIpfsURL}
                     clickable
                   />
                   {showTokenId ? <Text>{`${t('id')}: ${tokenId}`}</Text> : null}

ui/components/app/assets/token-cell/token-cell.test.tsx

@@ -13,6 +13,7 @@ import {
 
 import { useIsOriginalTokenSymbol } from '../../../../hooks/useIsOriginalTokenSymbol';
 import { getIntlLocale } from '../../../../ducks/locale/locale';
+import { CHAIN_IDS } from '../../../../../shared/constants/network';
 import TokenCell from '.';
 
 jest.mock('react-redux', () => {
@@ -65,6 +66,7 @@ describe('Token Cell', () => {
       address: '0xAddress',
       iconUrl: './images/test_1_image.svg',
       aggregators: [],
+      chainId: CHAIN_IDS.MAINNET,
     },
     '0xAnotherToken': {
       name: 'TEST',
@@ -74,6 +76,7 @@ describe('Token Cell', () => {
       address: '0xANoTherToKen',
       iconUrl: './images/test_image.svg',
       aggregators: [],
+      chainId: CHAIN_IDS.MAINNET,
     },
   };
 
@@ -85,6 +88,7 @@ describe('Token Cell', () => {
     string: '5.000',
     currentCurrency: 'usd',
     image: '',
+    chainId: CHAIN_IDS.MAINNET,
     onClick: jest.fn(),
   };
 
@@ -94,6 +98,7 @@ describe('Token Cell', () => {
     string: '5000000',
     currentCurrency: 'usd',
     image: '',
+    chainId: CHAIN_IDS.MAINNET,
     onClick: jest.fn(),
   };
   const useSelectorMock = useSelector;

ui/components/app/assets/token-cell/token-cell.tsx

@@ -12,6 +12,7 @@ type TokenCellProps = {
   symbol: string;
   string?: string;
   image: string;
+  chainId: string;
   onClick?: (arg: string) => void;
 };
 
@@ -20,6 +21,7 @@ export default function TokenCell({
   image,
   symbol,
   string,
+  chainId,
   onClick,
 }: TokenCellProps) {
   const tokenList = useSelector(getTokenList);
@@ -32,11 +34,12 @@ export default function TokenCell({
   const tokenImage = tokenData?.iconUrl || image;
   const formattedFiat = useTokenFiatAmount(address, string, symbol, {}, false);
   const locale = useSelector(getIntlLocale);
-  const primary = new Intl.NumberFormat(locale, {
-    minimumSignificantDigits: 1,
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-  }).format(string.toString());
+  const primary =
+    new Intl.NumberFormat(locale, {
+      minimumSignificantDigits: 1,
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+    }).format(string.toString()) || '0';
 
   const isOriginalTokenSymbol = useIsOriginalTokenSymbol(address, symbol);
 
@@ -45,11 +48,12 @@ export default function TokenCell({
       onClick={onClick ? () => onClick(address) : undefined}
       tokenSymbol={symbol}
       tokenImage={tokenImage}
-      primary={`${primary || 0}`}
+      primary={primary}
       secondary={isOriginalTokenSymbol ? formattedFiat : null}
       title={title}
       isOriginalTokenSymbol={isOriginalTokenSymbol}
       address={address}
+      chainId={chainId}
       showPercentage
     />
   );