Fix #17300, #16843 - Use proper source for image of IPFS NFTs (#17302)

ui/components/app/collectible-details/collectible-details.js

@@ -175,7 +175,10 @@ export default function CollectibleDetails({ collectible }) {
             className="collectible-details__card"
           >
             {image ? (
-              <img className="collectible-details__image" src={image} />
+              <img
+                className="collectible-details__image"
+                src={collectibleImageURL}
+              />
             ) : (
               <CollectibleDefaultImage name={name} tokenId={tokenId} />
             )}

ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-summary/confirm-page-container-summary.component.js

@@ -1,5 +1,7 @@
 /* eslint-disable no-negated-condition */
 import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
@@ -7,6 +9,7 @@ import { TransactionType } from '../../../../../../shared/constants/transaction'
 import { toChecksumHexAddress } from '../../../../../../shared/modules/hexstring-utils';
 import { useI18nContext } from '../../../../../hooks/useI18nContext';
 import useAddressDetails from '../../../../../hooks/useAddressDetails';
+import { getIpfsGateway } from '../../../../../selectors';
 
 import Identicon from '../../../../ui/identicon';
 import InfoTooltip from '../../../../ui/info-tooltip';
@@ -15,6 +18,7 @@ import Typography from '../../../../ui/typography';
 import { TYPOGRAPHY } from '../../../../../helpers/constants/design-system';
 import { ORIGIN_METAMASK } from '../../../../../../shared/constants/app';
 import SiteOrigin from '../../../../ui/site-origin';
+import { getAssetImageURL } from '../../../../../helpers/utils/util';
 
 const ConfirmPageContainerSummary = (props) => {
   const {
@@ -35,6 +39,7 @@ const ConfirmPageContainerSummary = (props) => {
 
   const [showNicknamePopovers, setShowNicknamePopovers] = useState(false);
   const t = useI18nContext();
+  const ipfsGateway = useSelector(getIpfsGateway);
 
   const contractInitiatedTransactionType = [
     TransactionType.contractInteraction,
@@ -62,12 +67,14 @@ const ConfirmPageContainerSummary = (props) => {
   const checksummedAddress = toChecksumHexAddress(contractAddress);
 
   const renderImage = () => {
+    const imagePath = getAssetImageURL(image, ipfsGateway);
+
     if (image) {
       return (
         <img
           className="confirm-page-container-summary__icon"
           width={36}
-          src={image}
+          src={imagePath}
         />
       );
     } else if (contractAddress) {
@@ -76,7 +83,6 @@ const ConfirmPageContainerSummary = (props) => {
           className="confirm-page-container-summary__icon"
           diameter={36}
           address={contractAddress}
-          image={image}
         />
       );
     }