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 <bhdecker84@gmail.com>

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

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(

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

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}

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),

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={() => {

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,
   };
 };
 

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 = <p>{t('copiedExclamation')}</p>;
+  if (!addressCopied) {
+    tooltipHtml = addressOnly ? (
+      <p>{t('copyAddress')}</p>
+    ) : (
+      <p>
+        {shortenAddress(checksummedRecipientAddress)}
+        <br />
+        {t('copyAddress')}
+      </p>
+    );
+  }
 
   return (
     <>
       <div
         className="sender-to-recipient__party sender-to-recipient__party--recipient sender-to-recipient__party--recipient-with-address"
         onClick={() => {
-          setShowNicknamePopovers(true);
-          if (onRecipientClick) {
-            onRecipientClick();
+          if (recipientName) {
+            setAddressCopied(true);
+            copyToClipboard(checksummedRecipientAddress);
+          } else {
+            setShowNicknamePopovers(true);
+            if (onRecipientClick) {
+              onRecipientClick();
+            }
           }
         }}
       >
         <div className="sender-to-recipient__sender-icon">
           <Identicon address={checksummedRecipientAddress} diameter={24} />
         </div>
-        <div className="sender-to-recipient__name">
-          {addressOnly
-            ? recipientNickname ||
-              recipientEns ||
-              shortenAddress(checksummedRecipientAddress)
-            : recipientNickname ||
-              recipientEns ||
-              recipientName ||
-              t('newContract')}
-        </div>
+        <Tooltip
+          position="bottom"
+          disabled={!recipientName}
+          html={tooltipHtml}
+          wrapperClassName="sender-to-recipient__tooltip-wrapper"
+          containerClassName="sender-to-recipient__tooltip-container"
+          onHidden={() => setAddressCopied(false)}
+        >
+          <div
+            className="sender-to-recipient__name"
+            data-testid="sender-to-recipient__name"
+          >
+            {addressOnly
+              ? recipientName ||
+                recipientNickname ||
+                recipientMetadataName ||
+                recipientEns ||
+                shortenAddress(checksummedRecipientAddress)
+              : recipientName ||
+                recipientNickname ||
+                recipientMetadataName ||
+                recipientEns ||
+                t('newContract')}
+          </div>
+        </Tooltip>
       </div>
       {showNicknamePopovers ? (
         <NicknamePopovers
@@ -145,6 +180,7 @@ export function RecipientWithAddress({
 RecipientWithAddress.propTypes = {
   checksummedRecipientAddress: PropTypes.string,
   recipientName: PropTypes.string,
+  recipientMetadataName: PropTypes.string,
   recipientEns: PropTypes.string,
   recipientNickname: PropTypes.string,
   addressOnly: PropTypes.bool,
@@ -175,6 +211,7 @@ export default function SenderToRecipient({
   senderName,
   recipientNickname,
   recipientName,
+  recipientMetadataName,
   recipientEns,
   onRecipientClick,
   onSenderClick,
@@ -208,6 +245,7 @@ export default function SenderToRecipient({
           recipientNickname={recipientNickname}
           recipientEns={recipientEns}
           recipientName={recipientName}
+          recipientMetadataName={recipientMetadataName}
         />
       ) : (
         <div className="sender-to-recipient__party sender-to-recipient__party--recipient">
@@ -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,

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);