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 b87c405b9..6e7f9e31e 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 @@ -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; + 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 = ( - - {t('token')} - - ); - titleTokenDescription = unknownTokenLink; - } - + 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 = ( <> - {t('nft')} + {titleTokenDescription} {tokenIdWrapped && {tokenIdWrapped}} ); - titleTokenDescription = unknownNFTLink; + return blockExplorerElement; } } - return titleTokenDescription; + return ( + <> + { + copyToClipboard(tokenAddress); + }} + title={tokenAddress} + > + {titleTokenDescription} + + {tokenIdWrapped && {tokenIdWrapped}} + + ); } renderTitle() { @@ -627,7 +629,10 @@ export default class ConfirmApproveContent extends Component { -
+
{this.renderTitle()}
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 dd9cd8dd4..ede4347ec 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 @@ -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', 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;