Resolve merge conflicts

Remove changes from https://github.com/MetaMask/metamask-extension/pull/16740 in https://github.com/MetaMask/metamask-extension/pull/17437

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

@@ -2,15 +2,17 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import copyToClipboard from 'copy-to-clipboard';
-import { getTokenTrackerLink } from '@metamask/etherscan-link';
+import { getTokenTrackerLink, getAccountLink } from '@metamask/etherscan-link';
 import UrlIcon from '../../../components/ui/url-icon';
 import { addressSummary } from '../../../helpers/utils/util';
 import { formatCurrency } from '../../../helpers/utils/confirm-tx.util';
+import { ellipsify } from '../../send/send.utils';
 import Typography from '../../../components/ui/typography';
 import Box from '../../../components/ui/box';
 import Button from '../../../components/ui/button';
 import SimulationErrorMessage from '../../../components/ui/simulation-error-message';
 import EditGasFeeButton from '../../../components/app/edit-gas-fee-button';
+import Identicon from '../../../components/ui/identicon';
 import MultiLayerFeeMessage from '../../../components/app/multilayer-fee-message';
 import CopyIcon from '../../../components/ui/icon/copy-icon.component';
 import {
@@ -625,10 +627,16 @@ export default class ConfirmApproveContent extends Component {
   render() {
     const { t } = this.context;
     const {
+      decimals,
       siteImage,
+      tokenAmount,
+      customTokenAmount,
       origin,
       tokenSymbol,
       showCustomizeGasModal,
+      showEditApprovalPermissionModal,
+      setCustomAmount,
+      tokenBalance,
       useNonceField,
       warning,
       txData,
@@ -636,10 +644,13 @@ export default class ConfirmApproveContent extends Component {
       toAddress,
       chainId,
       rpcPrefs,
+      isContract,
       assetStandard,
+      userAddress,
       tokenId,
       tokenAddress,
       assetName,
+      isSetApproveForAll,
       userAcknowledgedGasMissing,
       setUserAcknowledgedGasMissing,
       renderSimulationFailureWarning,
@@ -687,28 +698,124 @@ export default class ConfirmApproveContent extends Component {
         <div className="confirm-approve-content__description">
           {this.renderDescription()}
         </div>
-        <Box marginBottom={4} marginTop={2}>
+        {assetStandard === TokenStandard.ERC20 ||
-          <Button
+        (tokenSymbol && !tokenId && !isSetApproveForAll) ? (
-            type="link"
+          <Box className="confirm-approve-content__address-display-content">
-            className="confirm-approve-content__verify-contract-details"
+            <Box display={DISPLAY.FLEX}>
-            onClick={() => this.setState({ setShowContractDetails: true })}
+              <Identicon
-          >
+                className="confirm-approve-content__address-identicon"
-            {t('verifyContractDetails')}
+                diameter={20}
-          </Button>
+                address={toAddress}
-          {setShowContractDetails && (
+              />
-            <ContractDetailsModal
+              <Typography
-              onClose={() => this.setState({ setShowContractDetails: false })}
+                variant={TYPOGRAPHY.H6}
-              tokenName={tokenSymbol}
+                fontWeight={FONT_WEIGHT.NORMAL}
-              tokenAddress={tokenAddress}
+                color={COLORS.TEXT_ALTERNATIVE}
-              toAddress={toAddress}
+                boxProps={{ marginBottom: 0 }}
-              chainId={chainId}
+              >
-              rpcPrefs={rpcPrefs}
+                {ellipsify(toAddress)}
-              tokenId={tokenId}
+              </Typography>
-              assetName={assetName}
+              <Button
-              assetStandard={assetStandard}
+                type="link"
-            />
+                className="confirm-approve-content__copy-address"
-          )}
+                onClick={() => {
-        </Box>
+                  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"
+              className="confirm-approve-content__verify-contract-details"
+              onClick={() => this.setState({ setshowContractDetails: true })}
+            >
+              {t('verifyContractDetails')}
+            </Button>
+            {setshowContractDetails && (
+              <ContractDetailsModal
+                onClose={() => this.setState({ setshowContractDetails: false })}
+                tokenName={tokenSymbol}
+                tokenAddress={tokenAddress}
+                toAddress={toAddress}
+                chainId={chainId}
+                rpcPrefs={rpcPrefs}
+                tokenId={tokenId}
+                assetName={assetName}
+                assetStandard={assetStandard}
+              />
+            )}
+          </Box>
+        )}
+        {assetStandard === TokenStandard.ERC20 ? (
+          <div className="confirm-approve-content__edit-submission-button-container">
+            <div
+              className="confirm-approve-content__medium-link-text cursor-pointer"
+              onClick={() =>
+                showEditApprovalPermissionModal({
+                  customTokenAmount,
+                  decimals,
+                  origin,
+                  setCustomAmount,
+                  tokenAmount,
+                  tokenSymbol,
+                  tokenBalance,
+                })
+              }
+            >
+              {t('editPermission')}
+            </div>
+          </div>
+        ) : null}
         <div className="confirm-approve-content__card-wrapper">
           {renderSimulationFailureWarning && (
             <Box

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

@@ -58,7 +58,7 @@ describe('ConfirmApproveContent Component', () => {
         'By granting permission, you are allowing the following contract to access your funds',
       ),
     ).toBeInTheDocument();
-    expect(queryByText('Verify contract details')).toBeInTheDocument();
+    expect(queryByText('0x9bc5...fef4')).toBeInTheDocument();
     expect(
       queryByText(
         'We were not able to estimate gas. There might be an error in the contract and this transaction may fail.',
@@ -108,14 +108,14 @@ describe('ConfirmApproveContent Component', () => {
       queryByText('https://metamask.github.io/test-dapp/'),
     ).toBeInTheDocument();
     expect(getByTestId('confirm-approve-title').textContent).toStrictEqual(
-      ' Allow access to and transfer of your TestDappCollectibles (#1)? ',
+      ' Give permission to access your TST? ',
     );
     expect(
       queryByText(
-        'This allows a third party to access and transfer the following NFTs without further notice until you revoke its access.',
+        'By granting permission, you are allowing the following contract to access your funds',
       ),
     ).toBeInTheDocument();
-    expect(queryByText('Verify contract details')).toBeInTheDocument();
+    expect(queryByText('0x9bc5...fef4')).toBeInTheDocument();
     expect(
       queryByText(
         'We were not able to estimate gas. There might be an error in the contract and this transaction may fail.',
@@ -141,13 +141,13 @@ describe('ConfirmApproveContent Component', () => {
 
     const showViewTxDetails = getByText('View full transaction details');
     expect(queryByText('Permission request')).not.toBeInTheDocument();
-    expect(queryByText('Approved asset:')).not.toBeInTheDocument();
+    expect(queryByText('Approved amount:')).not.toBeInTheDocument();
     expect(queryByText('Granted to:')).not.toBeInTheDocument();
     expect(queryByText('Data')).not.toBeInTheDocument();
     fireEvent.click(showViewTxDetails);
     expect(getByText('Hide full transaction details')).toBeInTheDocument();
     expect(getByText('Permission request')).toBeInTheDocument();
-    expect(getByText('Approved asset:')).toBeInTheDocument();
+    expect(getByText('Approved amount:')).toBeInTheDocument();
     expect(getByText('Granted to:')).toBeInTheDocument();
     expect(getByText('Contract (0x9bc5baF8...fEF4)')).toBeInTheDocument();
     expect(getByText('Data')).toBeInTheDocument();
@@ -168,14 +168,14 @@ describe('ConfirmApproveContent Component', () => {
       queryByText('https://metamask.github.io/test-dapp/'),
     ).toBeInTheDocument();
     expect(getByTestId('confirm-approve-title').textContent).toStrictEqual(
-      ' Allow access to and transfer of your TestDappCollectibles (#1)? ',
+      ' Give permission to access your TST? ',
     );
     expect(
       queryByText(
-        'This allows a third party to access and transfer the following NFTs without further notice until you revoke its access.',
+        'By granting permission, you are allowing the following contract to access your funds',
       ),
     ).toBeInTheDocument();
-    expect(queryByText('Verify contract details')).toBeInTheDocument();
+    expect(queryByText('0x9bc5...fef4')).toBeInTheDocument();
     expect(
       queryByText(
         'We were not able to estimate gas. There might be an error in the contract and this transaction may fail.',
@@ -207,7 +207,7 @@ describe('ConfirmApproveContent Component', () => {
     fireEvent.click(showViewTxDetails);
     expect(getByText('Hide full transaction details')).toBeInTheDocument();
     expect(getByText('Permission request')).toBeInTheDocument();
-    expect(getByText('Approved asset:')).toBeInTheDocument();
+    expect(getByText('Approved amount:')).toBeInTheDocument();
     expect(getByText('Granted to:')).toBeInTheDocument();
     expect(getByText('Contract (0x9bc5baF8...fEF4)')).toBeInTheDocument();
     expect(getByText('Data')).toBeInTheDocument();