From fb191c865b2def2a1b2b63519e0a888b2c337d47 Mon Sep 17 00:00:00 2001
From: Alex Donesky <adonesky@gmail.com>
Date: Tue, 2 Aug 2022 13:38:15 -0500
Subject: [PATCH] Enhance approval screen title logic (#15406)

---
 .../confirm-approve-content.component.js      | 73 ++++++++++---------
 .../confirm-approve-content.component.test.js |  9 ++-
 .../confirm-approve-content/index.scss        |  6 +-
 3 files changed, 49 insertions(+), 39 deletions(-)

diff --git a/ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js b/ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js
index 6c526c95e..9afdf6595 100644
--- a/ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js
+++ b/ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js
@@ -33,6 +33,10 @@ import {
   ERC20,
   ERC721,
 } from '../../../../shared/constants/transaction';
+import {
+  MAINNET_CHAIN_ID,
+  TEST_CHAINS,
+} from '../../../../shared/constants/network';
 
 export default class ConfirmApproveContent extends Component {
   static contextTypes = {
@@ -462,31 +466,12 @@ export default class ConfirmApproveContent extends Component {
       userAddress,
     } = this.props;
     const { t } = this.context;
+    const useBlockExplorer =
+      rpcPrefs?.blockExplorerUrl ||
+      [...TEST_CHAINS, MAINNET_CHAIN_ID].includes(chainId);
+
     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 tokenIdWrapped = tokenId ? ` (#${tokenId})` : '';
     if (
       assetStandard === ERC20 ||
       (tokenSymbol && !tokenId && !isSetApproveForAll)
@@ -499,11 +484,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,
@@ -512,24 +500,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() {
@@ -631,7 +633,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">
diff --git a/ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.test.js b/ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.test.js
index bb00cc95a..10f13823e 100644
--- a/ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.test.js
+++ b/ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.test.js
@@ -39,11 +39,12 @@ 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).toStrictEqual(
+      ' Give permission to access your TST? ',
+    );
     expect(
       queryByText(
         'By granting permission, you are allowing the following contract to access your funds',
diff --git a/ui/pages/confirm-approve/confirm-approve-content/index.scss b/ui/pages/confirm-approve/confirm-approve-content/index.scss
index 473be2f7b..8f49b58fc 100644
--- a/ui/pages/confirm-approve/confirm-approve-content/index.scss
+++ b/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;