Updated secondary copy and removed the address component from SetAppr…

…ovalForAll and NFT Approve screens (#16292)
MetaMask · Dec 5, 2022 · 9ede85c · 9ede85c
1 parent 40cba69
commit 9ede85c
Show file tree

Hide file tree

Showing 3 changed files with 118 additions and 75 deletions.
diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
diff --git a/test/e2e/tests/collectibles.spec.js b/test/e2e/tests/collectibles.spec.js
@@ -114,7 +114,7 @@ describe('Collectibles', function () {
         );
         assert.equal(
           await title.getText(),
-          'Give permission to access your TestDappCollectibles (#1)?',
+          'Allow access to and transfer of your TestDappCollectibles (#1)?',
         );
         assert.equal(await func.getText(), 'Function: Approve');
 

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
@@ -533,7 +533,14 @@ export default class ConfirmApproveContent extends Component {
 
   renderTitle() {
     const { t } = this.context;
-    const { isSetApproveForAll, isApprovalOrRejection } = this.props;
+    const {
+      assetName,
+      tokenId,
+      tokenSymbol,
+      assetStandard,
+      isSetApproveForAll,
+      isApprovalOrRejection,
+    } = this.props;
     const titleTokenDescription = this.getTitleTokenDescription();
 
     let title;
@@ -543,14 +550,29 @@ export default class ConfirmApproveContent extends Component {
       if (isApprovalOrRejection === false) {
         title = t('revokeAllTokensTitle', [titleTokenDescription]);
       }
+    } else if (
+      assetStandard === ERC721 ||
+      assetStandard === ERC1155 ||
+      // if we don't have an asset standard but we do have either both an assetname and a tokenID or both a tokenSymbol and tokenId we assume its an NFT
+      (assetName && tokenId) ||
+      (tokenSymbol && tokenId)
+    ) {
+      title = t('approveTokenTitle', [titleTokenDescription]);
     }
     return title || t('allowSpendToken', [titleTokenDescription]);
   }
 
   renderDescription() {
     const { t } = this.context;
-    const { isContract, isSetApproveForAll, isApprovalOrRejection } =
-      this.props;
+    const {
+      assetStandard,
+      assetName,
+      tokenId,
+      tokenSymbol,
+      isContract,
+      isSetApproveForAll,
+      isApprovalOrRejection,
+    } = this.props;
     const grantee = isContract
       ? t('contract').toLowerCase()
       : t('account').toLowerCase();
@@ -562,8 +584,16 @@ export default class ConfirmApproveContent extends Component {
         grantee,
         this.getTitleTokenDescription(),
       ]);
+    } else if (
+      isSetApproveForAll ||
+      assetStandard === ERC721 ||
+      assetStandard === ERC1155 ||
+      // if we don't have an asset standard but we do have either both an assetname and a tokenID or both a tokenSymbol and tokenId we assume its an NFT
+      (assetName && tokenId) ||
+      (tokenSymbol && tokenId)
+    ) {
+      description = t('approveTokenDescription');
     }
-
     return description;
   }
 
@@ -593,6 +623,7 @@ export default class ConfirmApproveContent extends Component {
       tokenId,
       tokenAddress,
       assetName,
+      isSetApproveForAll,
     } = this.props;
     const { showFullTxDetails, setshowContractDetails } = this.state;
 
@@ -637,10 +668,81 @@ export default class ConfirmApproveContent extends Component {
         <div className="confirm-approve-content__description">
           {this.renderDescription()}
         </div>
-        {(assetStandard === ERC721 ||
-          assetStandard === ERC1155 ||
-          (assetName && tokenId) ||
-          (tokenSymbol && tokenId)) && (
+        {assetStandard === ERC20 ||
+        (tokenSymbol && !tokenId && !isSetApproveForAll) ? (
+          <Box className="confirm-approve-content__address-display-content">
+            <Box display={DISPLAY.FLEX}>
+              <Identicon
+                className="confirm-approve-content__address-identicon"
+                diameter={20}
+                address={toAddress}
+              />
+              <Typography
+                variant={TYPOGRAPHY.H6}
+                fontWeight={FONT_WEIGHT.NORMAL}
+                color={COLORS.TEXT_ALTERNATIVE}
+                boxProps={{ marginBottom: 0 }}
+              >
+                {ellipsify(toAddress)}
+              </Typography>
+              <Button
+                type="link"
+                className="confirm-approve-content__copy-address"
+                onClick={() => {
+                  this.setState({ copied: true });
+                  this.copyTimeout = setTimeout(
+                    () => this.setState({ copied: false }),
+                    SECOND * 3,
+                  );
+                  copyToClipboard(toAddress);
+                }}
+                title={
+                  this.state.copied
+                    ? t('copiedExclamation')
+                    : t('copyToClipboard')
+                }
+              >
+                <CopyIcon size={9} color="var(--color-icon-default)" />
+              </Button>
+              <Button
+                type="link"
+                className="confirm-approve-content__etherscan-link"
+                onClick={() => {
+                  const blockExplorerTokenLink = isContract
+                    ? getTokenTrackerLink(
+                        toAddress,
+                        chainId,
+                        null,
+                        userAddress,
+                        {
+                          blockExplorerUrl: rpcPrefs?.blockExplorerUrl ?? null,
+                        },
+                      )
+                    : getAccountLink(
+                        toAddress,
+                        chainId,
+                        {
+                          blockExplorerUrl: rpcPrefs?.blockExplorerUrl ?? null,
+                        },
+                        null,
+                      );
+                  global.platform.openTab({
+                    url: blockExplorerTokenLink,
+                  });
+                }}
+                target="_blank"
+                rel="noopener noreferrer"
+                title={t('etherscanView')}
+              >
+                <i
+                  className="fa fa-share-square fa-sm"
+                  style={{ color: 'var(--color-icon-default)', fontSize: 11 }}
+                  title={t('etherscanView')}
+                />
+              </Button>
+            </Box>
+          </Box>
+        ) : (
           <Box marginBottom={4} marginTop={2}>
             <Button
               type="link"
@@ -664,72 +766,6 @@ export default class ConfirmApproveContent extends Component {
             )}
           </Box>
         )}
-        <Box className="confirm-approve-content__address-display-content">
-          <Box display={DISPLAY.FLEX}>
-            <Identicon
-              className="confirm-approve-content__address-identicon"
-              diameter={20}
-              address={toAddress}
-            />
-            <Typography
-              variant={TYPOGRAPHY.H6}
-              fontWeight={FONT_WEIGHT.NORMAL}
-              color={COLORS.TEXT_ALTERNATIVE}
-              boxProps={{ marginBottom: 0 }}
-            >
-              {ellipsify(toAddress)}
-            </Typography>
-            <Button
-              type="link"
-              className="confirm-approve-content__copy-address"
-              onClick={() => {
-                this.setState({ copied: true });
-                this.copyTimeout = setTimeout(
-                  () => this.setState({ copied: false }),
-                  SECOND * 3,
-                );
-                copyToClipboard(toAddress);
-              }}
-              title={
-                this.state.copied
-                  ? t('copiedExclamation')
-                  : t('copyToClipboard')
-              }
-            >
-              <CopyIcon size={9} color="var(--color-icon-default)" />
-            </Button>
-            <Button
-              type="link"
-              className="confirm-approve-content__etherscan-link"
-              onClick={() => {
-                const blockExplorerTokenLink = isContract
-                  ? getTokenTrackerLink(toAddress, chainId, null, userAddress, {
-                      blockExplorerUrl: rpcPrefs?.blockExplorerUrl ?? null,
-                    })
-                  : getAccountLink(
-                      toAddress,
-                      chainId,
-                      {
-                        blockExplorerUrl: rpcPrefs?.blockExplorerUrl ?? null,
-                      },
-                      null,
-                    );
-                global.platform.openTab({
-                  url: blockExplorerTokenLink,
-                });
-              }}
-              target="_blank"
-              rel="noopener noreferrer"
-              title={t('etherscanView')}
-            >
-              <i
-                className="fa fa-share-square fa-sm"
-                style={{ color: 'var(--color-icon-default)', fontSize: 11 }}
-                title={t('etherscanView')}
-              />
-            </Button>
-          </Box>
-        </Box>
         {assetStandard === ERC20 ? (
           <div className="confirm-approve-content__edit-submission-button-container">
             <div