Recipient name passed to confirm-page-container component should be u… (#16961)

* 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

@@ -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',

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

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}
                 />
               )}
             </ConfirmPageContainerHeader>

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,

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({
       <div
         className="sender-to-recipient__party sender-to-recipient__party--recipient sender-to-recipient__party--recipient-with-address"
         onClick={() => {
-          if (recipientName) {
+          if (recipientIsOwnedAccount) {
             setAddressCopied(true);
             copyToClipboard(checksummedRecipientAddress);
           } else {
@@ -163,6 +164,7 @@ export function RecipientWithAddress({
                 recipientNickname ||
                 recipientMetadataName ||
                 recipientEns ||
+                shortenAddress(checksummedRecipientAddress) ||
                 t('newContract')}
           </div>
         </Tooltip>
@@ -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}
         />
       ) : (
         <div className="sender-to-recipient__party sender-to-recipient__party--recipient">
@@ -275,4 +280,5 @@ SenderToRecipient.propTypes = {
   onRecipientClick: PropTypes.func,
   onSenderClick: PropTypes.func,
   warnUserOnAccountMismatch: PropTypes.bool,
+  recipientIsOwnedAccount: PropTypes.bool,
 };