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 { -