Enhance approval screen title logic (#15406)

ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js

@@ -29,6 +29,10 @@ import { ConfirmPageContainerWarning } from '../../../components/app/confirm-pag
 import GasDetailsItem from '../../../components/app/gas-details-item';
 import LedgerInstructionField from '../../../components/app/ledger-instruction-field';
 import { ERC1155, ERC20, ERC721 } from '../../../helpers/constants/common';
+import {
+  MAINNET_CHAIN_ID,
+  TEST_CHAINS,
+} from '../../../../shared/constants/network';
 
 export default class ConfirmApproveContent extends Component {
   static contextTypes = {
@@ -458,31 +462,12 @@ export default class ConfirmApproveContent extends Component {
       userAddress,
     } = this.props;
     const { t } = this.context;
-    let titleTokenDescription = t('token');
-    if (rpcPrefs?.blockExplorerUrl || chainId) {
-      const unknownTokenBlockExplorerLink = getTokenTrackerLink(
-        tokenAddress,
-        chainId,
-        null,
-        userAddress,
-        {
-          blockExplorerUrl: rpcPrefs?.blockExplorerUrl ?? null,
-        },
-      );
-
-      const unknownTokenLink = (
-        <a
-          href={unknownTokenBlockExplorerLink}
-          target="_blank"
-          rel="noopener noreferrer"
-          className="confirm-approve-content__unknown-asset"
-        >
-          {t('token')}
-        </a>
-      );
-      titleTokenDescription = unknownTokenLink;
-    }
+    const useBlockExplorer =
+      rpcPrefs?.blockExplorerUrl ||
+      [...TEST_CHAINS, MAINNET_CHAIN_ID].includes(chainId);
 
+    let titleTokenDescription = t('token');
+    const tokenIdWrapped = tokenId ? ` (#${tokenId})` : '';
     if (
       assetStandard === ERC20 ||
       (tokenSymbol && !tokenId && !isSetApproveForAll)
@@ -495,11 +480,14 @@ export default class ConfirmApproveContent extends Component {
       (assetName && tokenId) ||
       (tokenSymbol && tokenId)
     ) {
-      const tokenIdWrapped = tokenId ? ` (#${tokenId})` : '';
       if (assetName || tokenSymbol) {
-        titleTokenDescription = `${assetName ?? tokenSymbol}${tokenIdWrapped}`;
+        titleTokenDescription = `${assetName ?? tokenSymbol}`;
       } else {
-        const unknownNFTBlockExplorerLink = getTokenTrackerLink(
+        titleTokenDescription = t('nft');
+      }
+
+      if (useBlockExplorer) {
+        const blockExplorerLink = getTokenTrackerLink(
           tokenAddress,
           chainId,
           null,
@@ -508,24 +496,38 @@ export default class ConfirmApproveContent extends Component {
             blockExplorerUrl: rpcPrefs?.blockExplorerUrl ?? null,
           },
         );
-        const unknownNFTLink = (
+        const blockExplorerElement = (
           <>
             <a
-              href={unknownNFTBlockExplorerLink}
+              href={blockExplorerLink}
               target="_blank"
               rel="noopener noreferrer"
-              className="confirm-approve-content__unknown-asset"
+              title={tokenAddress}
+              className="confirm-approve-content__approval-asset-link"
             >
-              {t('nft')}
+              {titleTokenDescription}
             </a>
             {tokenIdWrapped && <span>{tokenIdWrapped}</span>}
           </>
         );
-        titleTokenDescription = unknownNFTLink;
+        return blockExplorerElement;
       }
     }
 
-    return titleTokenDescription;
+    return (
+      <>
+        <span
+          className="confirm-approve-content__approval-asset-title"
+          onClick={() => {
+            copyToClipboard(tokenAddress);
+          }}
+          title={tokenAddress}
+        >
+          {titleTokenDescription}
+        </span>
+        {tokenIdWrapped && <span>{tokenIdWrapped}</span>}
+      </>
+    );
   }
 
   renderTitle() {
@@ -627,7 +629,10 @@ export default class ConfirmApproveContent extends Component {
             </Typography>
           </Box>
         </Box>
-        <div className="confirm-approve-content__title">
+        <div
+          className="confirm-approve-content__title"
+          data-testid="confirm-approve-title"
+        >
           {this.renderTitle()}
         </div>
         <div className="confirm-approve-content__description">

ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.test.js

@@ -40,11 +40,16 @@ const props = {
 
 describe('ConfirmApproveContent Component', () => {
   it('should render Confirm approve page correctly', () => {
-    const { queryByText, getByText, getAllByText } = renderComponent(props);
+    const {
+      queryByText,
+      getByText,
+      getAllByText,
+      getByTestId,
+    } = renderComponent(props);
     expect(queryByText('metamask.github.io')).toBeInTheDocument();
-    expect(
-      queryByText('Give permission to access your TST?'),
-    ).toBeInTheDocument();
+    expect(getByTestId('confirm-approve-title').textContent).toBe(
+      ' Give permission to access your TST? ',
+    );
     expect(
       queryByText(
         'By granting permission, you are allowing the following contract to access your funds',

ui/pages/confirm-approve/confirm-approve-content/index.scss

@@ -9,10 +9,14 @@
     padding: 0 24px 16px 24px;
   }
 
-  &__unknown-asset {
+  &__approval-asset-link {
     color: var(--color-primary-default);
   }
 
+  &__approval-asset-title {
+    cursor: pointer;
+  }
+
   &__icon-display-content {
     display: flex;
     height: 51px;