Ensure recipient edit/add popup is shown for non-owned accounts

MetaMask · Dec 15, 2022 · 33cb9f0 · 33cb9f0
1 parent f7e88bc
commit 33cb9f0
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 6 deletions.
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
@@ -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>

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
@@ -7,7 +7,6 @@ import {
   getMetadataContractName,
   getAccountName,
   getMetaMaskIdentities,
-  getAccountsWithLabels,
 } from '../../../selectors';
 import ConfirmPageContainer from './confirm-page-container.component';
 
@@ -19,17 +18,16 @@ function mapStateToProps(state, ownProps) {
   const defaultToken = getSwapsDefaultToken(state);
   const accountBalance = defaultToken.string;
   const identities = getMetaMaskIdentities(state);
-  const toName = getAccountName(identities, to) || ownProps.toName;
+  const ownedAccountName = getAccountName(identities, to);
+  const toName = ownedAccountName || ownProps.toName;
   const toMetadataName = getMetadataContractName(state, to);
 
   return {
     isBuyableChain,
     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
@@ -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 {
@@ -185,6 +186,7 @@ RecipientWithAddress.propTypes = {
   recipientNickname: PropTypes.string,
   addressOnly: PropTypes.bool,
   onRecipientClick: PropTypes.func,
+  recipientIsOwnedAccount: PropTypes.bool,
 };
 
 function Arrow({ variant }) {
@@ -218,6 +220,7 @@ export default function SenderToRecipient({
   recipientAddress,
   variant,
   warnUserOnAccountMismatch,
+  recipientIsOwnedAccount,
 }) {
   const t = useI18nContext();
   const checksummedSenderAddress = toChecksumHexAddress(senderAddress);
@@ -246,6 +249,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 +279,5 @@ SenderToRecipient.propTypes = {
   onRecipientClick: PropTypes.func,
   onSenderClick: PropTypes.func,
   warnUserOnAccountMismatch: PropTypes.bool,
+  recipientIsOwnedAccount: PropTypes.bool,
 };