From 0792e4ebbc521024707791eae9471d17dde7d56a Mon Sep 17 00:00:00 2001 From: Dan J Miller Date: Thu, 15 Dec 2022 13:03:59 -0330 Subject: [PATCH] =?UTF-8?q?Recipient=20name=20passed=20to=20confirm-page-c?= =?UTF-8?q?ontainer=20component=20should=20be=20u=E2=80=A6=20(#16961)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Recipient name passed to confirm-page-container component should be used if pet name exists for the to address * Ensure recipient edit/add popup is shown for non-owned accounts * Ensure contract name is rendered if it exists for recipient address * Ensure that shortened address is last fallback after account, addressbook, token and ens names --- test/e2e/tests/send-eth.spec.js | 2 +- .../confirm-page-container-container.test.js | 4 ++-- .../confirm-page-container.component.js | 3 +++ .../confirm-page-container.container.js | 8 +++----- .../sender-to-recipient/sender-to-recipient.component.js | 8 +++++++- 5 files changed, 16 insertions(+), 9 deletions(-) diff --git a/test/e2e/tests/send-eth.spec.js b/test/e2e/tests/send-eth.spec.js index 6ef95e455..25fe7edbe 100644 --- a/test/e2e/tests/send-eth.spec.js +++ b/test/e2e/tests/send-eth.spec.js @@ -129,7 +129,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: 'New contract' }); + await driver.clickElement({ text: '0xc42...cd28' }); const recipientAddress = await driver.findElements({ text: '0xc427D562164062a23a5cFf596A4a3208e72Acd28', 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 008abbdab..a77386adc 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 @@ -100,7 +100,7 @@ describe('Confirm Page Container Container Test', () => { expect(senderRecipient).toBeInTheDocument(); }); it('should render recipient as address', () => { - const recipientName = screen.queryByText('New contract'); + const recipientName = screen.queryByText(shortenAddress(props.toAddress)); expect(recipientName).toBeInTheDocument(); }); @@ -119,7 +119,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 = 'New contract'; + const addressBookName = 'test save name'; 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 b4ea1a3fb..bf04534e1 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 @@ -66,6 +66,7 @@ export default class ConfirmPageContainer extends Component { toMetadataName: PropTypes.string, toEns: PropTypes.string, toNickname: PropTypes.string, + recipientIsOwnedAccount: PropTypes.bool, // Content contentComponent: PropTypes.node, errorKey: PropTypes.string, @@ -135,6 +136,7 @@ export default class ConfirmPageContainer extends Component { toMetadataName, toEns, toNickname, + recipientIsOwnedAccount, toAddress, disabled, errorKey, @@ -247,6 +249,7 @@ export default class ConfirmPageContainer extends Component { recipientAddress={toAddress} recipientEns={toEns} recipientNickname={toNickname} + recipientIsOwnedAccount={recipientIsOwnedAccount} /> )} 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 94b7173a5..fb628fbb2 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 @@ -7,7 +7,6 @@ import { getMetadataContractName, getAccountName, getMetaMaskIdentities, - getAccountsWithLabels, } from '../../../selectors'; import ConfirmPageContainer from './confirm-page-container.component'; @@ -19,7 +18,8 @@ function mapStateToProps(state, ownProps) { const defaultToken = getSwapsDefaultToken(state); const accountBalance = defaultToken.string; const identities = getMetaMaskIdentities(state); - const toName = getAccountName(identities, to); + const ownedAccountName = getAccountName(identities, to); + const toName = ownedAccountName || contact?.name; const toMetadataName = getMetadataContractName(state, to); return { @@ -27,9 +27,7 @@ function mapStateToProps(state, ownProps) { contact, toName, toMetadataName, - isOwnedAccount: getAccountsWithLabels(state) - .map((accountWithLabel) => accountWithLabel.address) - .includes(to), + recipientIsOwnedAccount: Boolean(ownedAccountName), to, networkIdentifier, accountBalance, 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 6aec343be..3254c9299 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 @@ -104,6 +104,7 @@ export function RecipientWithAddress({ recipientEns, recipientName, recipientMetadataName, + recipientIsOwnedAccount, }) { const t = useI18nContext(); const [showNicknamePopovers, setShowNicknamePopovers] = useState(false); @@ -127,7 +128,7 @@ export function RecipientWithAddress({
{ - if (recipientName) { + if (recipientIsOwnedAccount) { setAddressCopied(true); copyToClipboard(checksummedRecipientAddress); } else { @@ -163,6 +164,7 @@ export function RecipientWithAddress({ recipientNickname || recipientMetadataName || recipientEns || + shortenAddress(checksummedRecipientAddress) || t('newContract')}
@@ -185,6 +187,7 @@ RecipientWithAddress.propTypes = { recipientNickname: PropTypes.string, addressOnly: PropTypes.bool, onRecipientClick: PropTypes.func, + recipientIsOwnedAccount: PropTypes.bool, }; function Arrow({ variant }) { @@ -218,6 +221,7 @@ export default function SenderToRecipient({ recipientAddress, variant, warnUserOnAccountMismatch, + recipientIsOwnedAccount, }) { const t = useI18nContext(); const checksummedSenderAddress = toChecksumHexAddress(senderAddress); @@ -246,6 +250,7 @@ export default function SenderToRecipient({ recipientEns={recipientEns} recipientName={recipientName} recipientMetadataName={recipientMetadataName} + recipientIsOwnedAccount={recipientIsOwnedAccount} /> ) : (
@@ -275,4 +280,5 @@ SenderToRecipient.propTypes = { onRecipientClick: PropTypes.func, onSenderClick: PropTypes.func, warnUserOnAccountMismatch: PropTypes.bool, + recipientIsOwnedAccount: PropTypes.bool, };