Merge pull request #12019 from MetaMask/dev-olu-11148

Fix for: Confirmation screen should show local nicknames even when invoking a contract method

ui/components/app/confirm-page-container/confirm-page-container.component.js

@@ -4,6 +4,7 @@ import SenderToRecipient from '../../ui/sender-to-recipient';
 import { PageContainerFooter } from '../../ui/page-container';
 import EditGasPopover from '../edit-gas-popover';
 import { EDIT_GAS_MODES } from '../../../../shared/constants/gas';
+import Dialog from '../../ui/dialog';
 import {
   ConfirmPageContainerHeader,
   ConfirmPageContainerContent,
@@ -66,6 +67,8 @@ export default class ConfirmPageContainer extends Component {
     handleCloseEditGas: PropTypes.func,
     // Gas Popover
     currentTransaction: PropTypes.object.isRequired,
+    showAddToAddressBookModal: PropTypes.func,
+    contact: PropTypes.object,
   };
 
   render() {
@@ -114,9 +117,14 @@ export default class ConfirmPageContainer extends Component {
       editingGas,
       handleCloseEditGas,
       currentTransaction,
+      showAddToAddressBookModal,
+      contact = {},
     } = this.props;
     const renderAssetImage = contentComponent || !identiconAddress;
 
+    const showAddToAddressDialog =
+      contact.name === undefined && toAddress !== undefined;
+
     return (
       <div className="page-container">
         <ConfirmPageContainerNavigation
@@ -149,6 +157,17 @@ export default class ConfirmPageContainer extends Component {
             />
           )}
         </ConfirmPageContainerHeader>
+        <div>
+          {showAddToAddressDialog && (
+            <Dialog
+              type="message"
+              className="send__dialog"
+              onClick={() => showAddToAddressBookModal()}
+            >
+              {this.context.t('newAccountDetectedDialogMessage')}
+            </Dialog>
+          )}
+        </div>
         {contentComponent || (
           <ConfirmPageContainerContent
             action={action}

ui/components/app/confirm-page-container/confirm-page-container.container.js

@@ -0,0 +1,43 @@
+import { connect } from 'react-redux';
+import { getAddressBookEntry } from '../../../selectors';
+import * as actions from '../../../store/actions';
+import ConfirmPageContainer from './confirm-page-container.component';
+
+function mapStateToProps(state, ownProps) {
+  const to = ownProps.toAddress;
+
+  const contact = getAddressBookEntry(state, to);
+  return {
+    contact,
+    toName: contact?.name || ownProps.name,
+    to,
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  return {
+    showAddToAddressBookModal: (recipient) =>
+      dispatch(
+        actions.showModal({
+          name: 'ADD_TO_ADDRESSBOOK',
+          recipient,
+        }),
+      ),
+  };
+}
+
+function mergeProps(stateProps, dispatchProps, ownProps) {
+  const { to, ...restStateProps } = stateProps;
+  return {
+    ...ownProps,
+    ...restStateProps,
+    showAddToAddressBookModal: () =>
+      dispatchProps.showAddToAddressBookModal(to),
+  };
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+  mergeProps,
+)(ConfirmPageContainer);

ui/components/app/confirm-page-container/index.js

@@ -1,4 +1,4 @@
-export { default } from './confirm-page-container.component';
+export { default } from './confirm-page-container.container';
 export { default as ConfirmPageContainerHeader } from './confirm-page-container-header';
 export { default as ConfirmDetailRow } from './confirm-detail-row';
 export { default as ConfirmPageContainerNavigation } from './confirm-page-container-navigation';