From d4ffc3a5873576ae417c64970660a2cbc1ceef52 Mon Sep 17 00:00:00 2001 From: amerkadicE <97883527+amerkadicE@users.noreply.github.com> Date: Tue, 8 Nov 2022 09:34:21 +0100 Subject: [PATCH] Update address component on transaction data screen (#15888) * Update address component on transaction data screen E2E test fix Fix tests * Metadata accounts * Remove test resulsts Co-authored-by: Brad Decker --- test/e2e/tests/send-eth.spec.js | 2 +- test/e2e/tests/send-hex-address.spec.js | 8 +-- .../confirm-page-container-container.test.js | 4 +- .../confirm-page-container.component.js | 3 + .../confirm-page-container.container.js | 7 +- ...transaction-list-item-details.component.js | 6 ++ ...transaction-list-item-details.container.js | 6 ++ .../sender-to-recipient.component.js | 65 +++++++++++++++---- ui/selectors/selectors.js | 14 ++++ 9 files changed, 94 insertions(+), 21 deletions(-) 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')} +

+ ); + } return ( <>
{ - setShowNicknamePopovers(true); - if (onRecipientClick) { - onRecipientClick(); + if (recipientName) { + setAddressCopied(true); + copyToClipboard(checksummedRecipientAddress); + } else { + setShowNicknamePopovers(true); + if (onRecipientClick) { + onRecipientClick(); + } } }} >
-
- {addressOnly - ? recipientNickname || - recipientEns || - shortenAddress(checksummedRecipientAddress) - : recipientNickname || - recipientEns || - recipientName || - t('newContract')} -
+ setAddressCopied(false)} + > +
+ {addressOnly + ? recipientName || + recipientNickname || + recipientMetadataName || + recipientEns || + shortenAddress(checksummedRecipientAddress) + : recipientName || + recipientNickname || + recipientMetadataName || + recipientEns || + t('newContract')} +
+
{showNicknamePopovers ? ( ) : (
@@ -228,6 +266,7 @@ SenderToRecipient.propTypes = { senderName: PropTypes.string, senderAddress: PropTypes.string, recipientName: PropTypes.string, + recipientMetadataName: PropTypes.string, recipientEns: PropTypes.string, recipientAddress: PropTypes.string, recipientNickname: PropTypes.string, diff --git a/ui/selectors/selectors.js b/ui/selectors/selectors.js index 614dadc82..42fda351a 100644 --- a/ui/selectors/selectors.js +++ b/ui/selectors/selectors.js @@ -412,6 +412,20 @@ export function getAddressBookEntryOrAccountName(state, address) { return entry && entry.name !== '' ? entry.name : address; } +export function getAccountName(state, address) { + const entry = Object.values(state.metamask.identities).find((identity) => + isEqualCaseInsensitive(identity.address, toChecksumHexAddress(address)), + ); + return entry && entry.name !== '' ? entry.name : ''; +} + +export function getMetadataContractName(address) { + const entry = Object.values(STATIC_MAINNET_TOKEN_LIST).find((identity) => + isEqualCaseInsensitive(identity.address, toChecksumHexAddress(address)), + ); + return entry && entry.name !== '' ? entry.name : ''; +} + export function accountsWithSendEtherInfoSelector(state) { const accounts = getMetaMaskAccounts(state); const identities = getMetaMaskIdentities(state);