Fix #18199 : Add fallbacks for confirmation title on NFT transfers (#18269)

* add fallbacks for confirmation title on nft transfers

* Add token name and id

* fix

* fix test

---------

Co-authored-by: David Walsh <davidwalsh83@gmail.com>

ui/components/app/confirm-subtitle/confirm-subtitle.test.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { hexToDecimal } from '../../../../shared/modules/conversion.utils';
 
 import mockState from '../../../../test/data/mock-state.json';
 import { renderWithProvider } from '../../../../test/lib/render-helpers';
@@ -45,7 +46,9 @@ describe('ConfirmSubTitle', () => {
     mockState.metamask.preferences.showFiatInTestnets = false;
     mockState.metamask.allNftContracts = {
       [mockState.metamask.selectedAddress]: {
-        [mockState.metamask.provider.chainId]: [{ address: '0x9' }],
+        [hexToDecimal(mockState.metamask.provider.chainId)]: [
+          { address: '0x9' },
+        ],
       },
     };
     store = configureStore(mockState);

ui/hooks/useTransactionInfo.js

@@ -1,4 +1,5 @@
 import { useSelector } from 'react-redux';
+import { hexToDecimal } from '../../shared/modules/conversion.utils';
 
 import { isEqualCaseInsensitive } from '../../shared/modules/string-utils';
 
@@ -10,9 +11,11 @@ export const useTransactionInfo = (txData = {}) => {
   } = useSelector((state) => state.metamask);
 
   const isNftTransfer = Boolean(
-    allNftContracts?.[selectedAddress]?.[chainId]?.find((contract) => {
-      return isEqualCaseInsensitive(contract.address, txData.txParams.to);
-    }),
+    allNftContracts?.[selectedAddress]?.[hexToDecimal(chainId)]?.find(
+      (contract) => {
+        return isEqualCaseInsensitive(contract.address, txData.txParams.to);
+      },
+    ),
   );
 
   return { isNftTransfer };

ui/hooks/useTransactionInfo.test.js

@@ -1,4 +1,5 @@
 import { renderHookWithProvider } from '../../test/lib/render-helpers';
+import { hexToDecimal } from '../../shared/modules/conversion.utils';
 import mockState from '../../test/data/mock-state.json';
 import { useTransactionInfo } from './useTransactionInfo';
 
@@ -17,7 +18,9 @@ describe('useTransactionInfo', () => {
     it('should return true if transaction is NFT transfer', () => {
       mockState.metamask.allNftContracts = {
         [mockState.metamask.selectedAddress]: {
-          [mockState.metamask.provider.chainId]: [{ address: '0x9' }],
+          [hexToDecimal(mockState.metamask.provider.chainId)]: [
+            { address: '0x9' },
+          ],
         },
       };
 

ui/pages/confirm-token-transaction-base/confirm-token-transaction-base.js

@@ -2,6 +2,7 @@ import React, { useContext, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import BigNumber from 'bignumber.js';
 import { useSelector } from 'react-redux';
+import { getTokenTrackerLink } from '@metamask/etherscan-link';
 import { I18nContext } from '../../contexts/i18n';
 import ConfirmTransactionBase from '../confirm-transaction-base';
 import UserPreferencedCurrencyDisplay from '../../components/app/user-preferenced-currency-display';
@@ -14,11 +15,15 @@ import {
 import { PRIMARY } from '../../helpers/constants/common';
 import {
   contractExchangeRateSelector,
+  getCurrentChainId,
   getCurrentCurrency,
+  getRpcPrefsForCurrentProvider,
+  getSelectedAddress,
 } from '../../selectors';
 import {
   getConversionRate,
   getNativeCurrency,
+  getNftContracts,
 } from '../../ducks/metamask/metamask';
 import { TokenStandard } from '../../../shared/constants/transaction';
 import {
@@ -26,6 +31,7 @@ import {
   hexWEIToDecETH,
 } from '../../../shared/modules/conversion.utils';
 import { EtherDenomination } from '../../../shared/constants/common';
+import { CHAIN_IDS, TEST_CHAINS } from '../../../shared/constants/network';
 
 export default function ConfirmTokenTransactionBase({
   image = '',
@@ -46,18 +52,78 @@ export default function ConfirmTokenTransactionBase({
   const nativeCurrency = useSelector(getNativeCurrency);
   const currentCurrency = useSelector(getCurrentCurrency);
   const conversionRate = useSelector(getConversionRate);
+  const rpcPrefs = useSelector(getRpcPrefsForCurrentProvider);
+  const chainId = useSelector(getCurrentChainId);
+  const userAddress = useSelector(getSelectedAddress);
+  const nftCollections = useSelector(getNftContracts);
 
   const ethTransactionTotalMaxAmount = Number(
     hexWEIToDecETH(hexMaximumTransactionFee),
   );
 
-  let title, subtitle;
+  const getTitleTokenDescription = (renderType) => {
+    const useBlockExplorer =
+      rpcPrefs?.blockExplorerUrl ||
+      [...TEST_CHAINS, CHAIN_IDS.MAINNET].includes(chainId);
+
+    const nftCollection = nftCollections.find(
+      (collection) =>
+        collection.address.toLowerCase() === tokenAddress.toLowerCase(),
+    );
+    const titleTokenDescription =
+      tokenSymbol || nftCollection?.name || t('unknownCollection');
+
+    if (renderType === 'text') {
+      return titleTokenDescription;
+    }
+
+    if (useBlockExplorer) {
+      const blockExplorerLink = getTokenTrackerLink(
+        tokenAddress,
+        chainId,
+        null,
+        userAddress,
+        {
+          blockExplorerUrl: rpcPrefs?.blockExplorerUrl ?? null,
+        },
+      );
+      const blockExplorerElement = (
+        <>
+          <a
+            href={blockExplorerLink}
+            target="_blank"
+            rel="noopener noreferrer"
+            title={tokenAddress}
+            className="confirm-approve-content__approval-asset-link"
+          >
+            {titleTokenDescription}
+          </a>
+        </>
+      );
+      return blockExplorerElement;
+    }
+    return (
+      <>
+        <span
+          className="confirm-approve-content__approval-asset-title"
+          title={tokenAddress}
+        >
+          {titleTokenDescription}
+        </span>
+      </>
+    );
+  };
+
+  const assetImage = image;
+  let title, subtitle, subtotalDisplay;
   if (
     assetStandard === TokenStandard.ERC721 ||
     assetStandard === TokenStandard.ERC1155
   ) {
-    title = assetName;
+    title = assetName || getTitleTokenDescription();
     subtitle = `#${tokenId}`;
+    subtotalDisplay =
+      assetName || `${getTitleTokenDescription('text')} #${tokenId}`;
   } else if (assetStandard === TokenStandard.ERC20) {
     title = `${tokenAmount} ${tokenSymbol}`;
   }
@@ -122,13 +188,13 @@ export default function ConfirmTokenTransactionBase({
   return (
     <ConfirmTransactionBase
       toAddress={toAddress}
-      image={image}
+      image={assetImage}
       onEdit={onEdit}
       tokenAddress={tokenAddress}
       title={title}
       subtitleComponent={subtitleComponent()}
-      primaryTotalTextOverride={`${title} + ${ethTransactionTotal} ${nativeCurrency}`}
-      primaryTotalTextOverrideMaxAmount={`${title} + ${ethTransactionTotalMaxAmount} ${nativeCurrency}`}
+      primaryTotalTextOverride={`${subtotalDisplay} + ${ethTransactionTotal} ${nativeCurrency}`}
+      primaryTotalTextOverrideMaxAmount={`${subtotalDisplay} + ${ethTransactionTotalMaxAmount} ${nativeCurrency}`}
       secondaryTotalTextOverride={secondaryTotalTextOverride}
     />
   );