diff --git a/test/e2e/tests/send-eth.spec.js b/test/e2e/tests/send-eth.spec.js index 0833a1f85..a0c254dcd 100644 --- a/test/e2e/tests/send-eth.spec.js +++ b/test/e2e/tests/send-eth.spec.js @@ -135,7 +135,7 @@ describe('Send ETH non-contract address with data that matches ERC20 transfer da await driver.clickElement({ text: 'Next', tag: 'button' }); - await driver.clickElement({ text: '0xc42...cd28' }); + await driver.clickElement({ text: 'New contract' }); const recipientAddress = await driver.findElements({ text: '0xc427D562164062a23a5cFf596A4a3208e72Acd28', diff --git a/test/e2e/tests/send-hex-address.spec.js b/test/e2e/tests/send-hex-address.spec.js index ade462eb3..315b5565d 100644 --- a/test/e2e/tests/send-hex-address.spec.js +++ b/test/e2e/tests/send-hex-address.spec.js @@ -57,7 +57,7 @@ describe('Send ETH to a 40 character hexadecimal address', function () { ); await sendTransactionListItem.click(); await driver.clickElement({ text: 'Activity log', tag: 'summary' }); - await driver.clickElement('.sender-to-recipient__name:nth-of-type(2)'); + await driver.clickElement('[data-testid="sender-to-recipient__name"]'); // Verify address in activity log const publicAddress = await driver.findElement( @@ -108,7 +108,7 @@ describe('Send ETH to a 40 character hexadecimal address', function () { ); await sendTransactionListItem.click(); await driver.clickElement({ text: 'Activity log', tag: 'summary' }); - await driver.clickElement('.sender-to-recipient__name:nth-of-type(2)'); + await driver.clickElement('[data-testid="sender-to-recipient__name"]'); // Verify address in activity log const publicAddress = await driver.findElement( @@ -212,7 +212,7 @@ describe('Send ERC20 to a 40 character hexadecimal address', function () { ); await sendTransactionListItem.click(); await driver.clickElement({ text: 'Activity log', tag: 'summary' }); - await driver.clickElement('.sender-to-recipient__name:nth-of-type(2)'); + await driver.clickElement('[data-testid="sender-to-recipient__name"]'); // Verify address in activity log const publicAddress = await driver.findElement( @@ -302,7 +302,7 @@ describe('Send ERC20 to a 40 character hexadecimal address', function () { ); await sendTransactionListItem.click(); await driver.clickElement({ text: 'Activity log', tag: 'summary' }); - await driver.clickElement('.sender-to-recipient__name:nth-of-type(2)'); + await driver.clickElement('[data-testid="sender-to-recipient__name"]'); // Verify address in activity log const publicAddress = await driver.findElement( diff --git a/ui/components/app/confirm-page-container/confirm-page-container-container.test.js b/ui/components/app/confirm-page-container/confirm-page-container-container.test.js index 2256f6e9c..7964f0645 100644 --- a/ui/components/app/confirm-page-container/confirm-page-container-container.test.js +++ b/ui/components/app/confirm-page-container/confirm-page-container-container.test.js @@ -92,7 +92,7 @@ describe('Confirm Page Container Container Test', () => { expect(senderRecipient).toBeInTheDocument(); }); it('should render recipient as address', () => { - const recipientName = screen.queryByText(shortenAddress(props.toAddress)); + const recipientName = screen.queryByText('New contract'); expect(recipientName).toBeInTheDocument(); }); @@ -118,7 +118,7 @@ describe('Confirm Page Container Container Test', () => { describe('Contact/AddressBook name should appear in recipient header', () => { it('should not show add to address dialog if recipient is in contact list and should display contact name', () => { - const addressBookName = 'test save name'; + const addressBookName = 'New contract'; const addressBook = { '0x5': { diff --git a/ui/components/app/confirm-page-container/confirm-page-container.component.js b/ui/components/app/confirm-page-container/confirm-page-container.component.js index a972aee17..70a3335f3 100644 --- a/ui/components/app/confirm-page-container/confirm-page-container.component.js +++ b/ui/components/app/confirm-page-container/confirm-page-container.component.js @@ -63,6 +63,7 @@ export default class ConfirmPageContainer extends Component { fromName: PropTypes.string, toAddress: PropTypes.string, toName: PropTypes.string, + toMetadataName: PropTypes.string, toEns: PropTypes.string, toNickname: PropTypes.string, // Content @@ -118,6 +119,7 @@ export default class ConfirmPageContainer extends Component { fromName, fromAddress, toName, + toMetadataName, toEns, toNickname, toAddress, @@ -231,6 +233,7 @@ export default class ConfirmPageContainer extends Component { senderName={fromName} senderAddress={fromAddress} recipientName={toName} + recipientMetadataName={toMetadataName} recipientAddress={toAddress} recipientEns={toEns} recipientNickname={toNickname} diff --git a/ui/components/app/confirm-page-container/confirm-page-container.container.js b/ui/components/app/confirm-page-container/confirm-page-container.container.js index 567192cb1..6323c32cf 100644 --- a/ui/components/app/confirm-page-container/confirm-page-container.container.js +++ b/ui/components/app/confirm-page-container/confirm-page-container.container.js @@ -5,6 +5,8 @@ import { getIsBuyableChain, getNetworkIdentifier, getSwapsDefaultToken, + getMetadataContractName, + getAccountName, } from '../../../selectors'; import { showModal } from '../../../store/actions'; import ConfirmPageContainer from './confirm-page-container.component'; @@ -16,11 +18,14 @@ function mapStateToProps(state, ownProps) { const networkIdentifier = getNetworkIdentifier(state); const defaultToken = getSwapsDefaultToken(state); const accountBalance = defaultToken.string; + const toName = getAccountName(state, to); + const toMetadataName = getMetadataContractName(to); return { isBuyableChain, contact, - toName: contact?.name || ownProps.toName, + toName, + toMetadataName, isOwnedAccount: getAccountsWithLabels(state) .map((accountWithLabel) => accountWithLabel.address) .includes(to), diff --git a/ui/components/app/transaction-list-item-details/transaction-list-item-details.component.js b/ui/components/app/transaction-list-item-details/transaction-list-item-details.component.js index 92592a5b0..7f80e2db7 100644 --- a/ui/components/app/transaction-list-item-details/transaction-list-item-details.component.js +++ b/ui/components/app/transaction-list-item-details/transaction-list-item-details.component.js @@ -41,6 +41,8 @@ export default class TransactionListItemDetails extends PureComponent { onClose: PropTypes.func.isRequired, recipientEns: PropTypes.string, recipientAddress: PropTypes.string, + recipientName: PropTypes.string, + recipientMetadataName: PropTypes.string, rpcPrefs: PropTypes.object, senderAddress: PropTypes.string.isRequired, tryReverseResolveAddress: PropTypes.func.isRequired, @@ -139,6 +141,8 @@ export default class TransactionListItemDetails extends PureComponent { showRetry, recipientEns, recipientAddress, + recipientName, + recipientMetadataName, senderAddress, isEarliestNonce, senderNickname, @@ -238,6 +242,8 @@ export default class TransactionListItemDetails extends PureComponent { recipientEns={recipientEns} recipientAddress={recipientAddress} recipientNickname={recipientNickname} + recipientName={recipientName} + recipientMetadataName={recipientMetadataName} senderName={senderNickname} senderAddress={senderAddress} onRecipientClick={() => { diff --git a/ui/components/app/transaction-list-item-details/transaction-list-item-details.container.js b/ui/components/app/transaction-list-item-details/transaction-list-item-details.container.js index 61731c092..6d8e29756 100644 --- a/ui/components/app/transaction-list-item-details/transaction-list-item-details.container.js +++ b/ui/components/app/transaction-list-item-details/transaction-list-item-details.container.js @@ -8,6 +8,8 @@ import { getIsCustomNetwork, getRpcPrefsForCurrentProvider, getEnsResolutionByAddress, + getAccountName, + getMetadataContractName, } from '../../../selectors'; import { toChecksumHexAddress } from '../../../../shared/modules/hexstring-utils'; import TransactionListItemDetails from './transaction-list-item-details.component'; @@ -20,6 +22,8 @@ const mapStateToProps = (state, ownProps) => { recipientEns = getEnsResolutionByAddress(state, address); } const addressBook = getAddressBook(state); + const recipientName = getAccountName(state, recipientAddress); + const recipientMetadataName = getMetadataContractName(recipientAddress); const getNickName = (address) => { const entry = addressBook.find((contact) => { @@ -38,6 +42,8 @@ const mapStateToProps = (state, ownProps) => { recipientNickname: recipientAddress ? getNickName(recipientAddress) : null, isCustomNetwork, blockExplorerLinkText: getBlockExplorerLinkText(state), + recipientName, + recipientMetadataName, }; }; diff --git a/ui/components/ui/sender-to-recipient/sender-to-recipient.component.js b/ui/components/ui/sender-to-recipient/sender-to-recipient.component.js index 417b36e84..6aec343be 100644 --- a/ui/components/ui/sender-to-recipient/sender-to-recipient.component.js +++ b/ui/components/ui/sender-to-recipient/sender-to-recipient.component.js @@ -103,34 +103,69 @@ export function RecipientWithAddress({ recipientNickname, recipientEns, recipientName, + recipientMetadataName, }) { const t = useI18nContext(); const [showNicknamePopovers, setShowNicknamePopovers] = useState(false); + const [addressCopied, setAddressCopied] = useState(false); + + let tooltipHtml =
{t('copiedExclamation')}
; + if (!addressCopied) { + tooltipHtml = addressOnly ? ( +{t('copyAddress')}
+ ) : ( +
+ {shortenAddress(checksummedRecipientAddress)}
+
+ {t('copyAddress')}
+