Revisit #12019 : Show save dialog when calling a smart contract method and use the saved contact is already saved (#12090)

* Revisit showing add new address dialog.
Should not show if
    Address is own adddress
    send to recipient header is not shown

* Mock tests for the Confirm Page Container Container.

* Removed react-test-renderer dev-dependency

* Ran yarn setup to update lock file and remove ununsed packages.

Signed-off-by: Akintayo A. Olusegun <akintayo.segun@gmail.com>

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

@@ -0,0 +1,172 @@
+import React from 'react';
+import configureMockStore from 'redux-mock-store';
+import sinon from 'sinon';
+import { Provider } from 'react-redux';
+import SenderToRecipient from '../../ui/sender-to-recipient';
+import { mountWithRouter } from '../../../../test/lib/render-helpers';
+import Dialog from '../../ui/dialog';
+import ConfirmPageContainer, {
+  ConfirmPageContainerHeader,
+  ConfirmPageContainerNavigation,
+} from '.';
+
+describe('Confirm Page Container Container Test', () => {
+  let wrapper;
+
+  const mockStore = {
+    metamask: {
+      provider: {
+        type: 'test',
+      },
+      preferences: {
+        useNativeCurrencyAsPrimaryCurrency: true,
+      },
+      accounts: {
+        '0xd8f6a2ffb0fc5952d16c9768b71cfd35b6399aa5': {
+          address: '0xd8f6a2ffb0fc5952d16c9768b71cfd35b6399aa5',
+          balance: '0x03',
+        },
+      },
+      cachedBalances: {},
+      selectedAddress: '0xd8f6a2ffb0fc5952d16c9768b71cfd35b6399aa5',
+      addressBook: [],
+      chainId: 'test',
+    },
+  };
+
+  const store = configureMockStore()(mockStore);
+
+  const props = {
+    fromAddress: '0xd8f6a2ffb0fc5952d16c9768b71cfd35b6399aa5',
+    toAddress: '0x7a1A4Ad9cc746a70ee58568466f7996dD0aCE4E8',
+    origin: 'testOrigin', // required
+    onNextTx: sinon.spy(),
+    // Footer
+    onCancelAll: sinon.spy(),
+    onCancel: sinon.spy(),
+    onSubmit: sinon.spy(),
+    handleCloseEditGas: sinon.spy(),
+    // Gas Popover
+    currentTransaction: {},
+    showAddToAddressBookModal: sinon.spy(),
+    contact: undefined,
+    isOwnedAccount: false,
+  };
+
+  beforeAll(() => {
+    wrapper = mountWithRouter(
+      <Provider store={store}>
+        <ConfirmPageContainer.WrappedComponent {...props} />,
+      </Provider>,
+      store,
+    );
+  });
+
+  it('should render a confirm page container component', () => {
+    const pageContainer = wrapper.find('.page-container');
+    expect(pageContainer).toHaveLength(1);
+    expect(pageContainer.getElements()[0].props.className).toStrictEqual(
+      'page-container',
+    );
+  });
+
+  it('should render navigation', () => {
+    expect(wrapper.find(ConfirmPageContainerNavigation)).toHaveLength(1);
+  });
+
+  it('should render header', () => {
+    expect(wrapper.find(ConfirmPageContainerHeader)).toHaveLength(1);
+    expect(
+      wrapper.find(ConfirmPageContainerHeader).getElements()[0].props
+        .accountAddress,
+    ).toStrictEqual('0xd8f6a2ffb0fc5952d16c9768b71cfd35b6399aa5');
+  });
+
+  it('should render sender to recipient in header', () => {
+    expect(wrapper.find(SenderToRecipient)).toHaveLength(1);
+    expect(
+      wrapper.find(SenderToRecipient).getElements()[0].props.senderAddress,
+    ).toStrictEqual('0xd8f6a2ffb0fc5952d16c9768b71cfd35b6399aa5');
+    expect(
+      wrapper.find(SenderToRecipient).getElements()[0].props.recipientAddress,
+    ).toStrictEqual('0x7a1A4Ad9cc746a70ee58568466f7996dD0aCE4E8');
+  });
+
+  it('should render recipient as address', () => {
+    const recipientWithAddress = wrapper.find(
+      '.sender-to-recipient__party--recipient-with-address',
+    );
+    expect(recipientWithAddress).toHaveLength(1);
+
+    expect(wrapper.find('.sender-to-recipient__name')).toHaveLength(2);
+  });
+
+  it('should render add address to address book dialog', () => {
+    expect(wrapper.find(Dialog)).toHaveLength(1);
+    expect(wrapper.find(Dialog).getElements()[0].props.children).toStrictEqual(
+      'newAccountDetectedDialogMessage',
+    );
+  });
+
+  it('should simulate click on Dialog', () => {
+    const DialogWrapper = wrapper.find(Dialog);
+    DialogWrapper.first().simulate('click');
+    expect(props.showAddToAddressBookModal.calledOnce).toStrictEqual(true);
+  });
+
+  it('should not show add to address dialog if contact is not undefined', () => {
+    props.contact = {
+      address: '0x7a1A4Ad9cc746a70ee58568466f7996dD0aCE4E8',
+      name: 'test saved name',
+      isEns: false,
+      chainId: 'test',
+    };
+
+    const wrapper2 = mountWithRouter(
+      <Provider store={store}>
+        <ConfirmPageContainer.WrappedComponent {...props} />,
+      </Provider>,
+      store,
+    );
+
+    expect(wrapper2.find(Dialog)).toHaveLength(0);
+  });
+
+  it('should render recipient as name', () => {
+    const wrapper2 = mountWithRouter(
+      <Provider store={store}>
+        <ConfirmPageContainer.WrappedComponent {...props} />,
+      </Provider>,
+      store,
+    );
+
+    const recipientWithAddress = wrapper2.find(
+      '.sender-to-recipient__party--recipient-with-address',
+    );
+    expect(recipientWithAddress).toHaveLength(1);
+
+    expect(wrapper.find('.sender-to-recipient__name')).toHaveLength(2);
+  });
+
+  it('should simulate click reject button', () => {
+    expect(wrapper.find('button.page-container__footer-button')).toHaveLength(
+      2,
+    );
+    wrapper
+      .find('button.page-container__footer-button')
+      .first()
+      .simulate('click');
+    expect(props.onCancel.calledOnce).toStrictEqual(true);
+  });
+
+  it('should simulate click submit button', () => {
+    expect(wrapper.find('button.page-container__footer-button')).toHaveLength(
+      2,
+    );
+    wrapper
+      .find('button.page-container__footer-button')
+      .at(1)
+      .simulate('click');
+    expect(props.onSubmit.calledOnce).toStrictEqual(true);
+  });
+});

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

@@ -68,6 +68,7 @@ export default class ConfirmPageContainer extends Component {
     currentTransaction: PropTypes.object.isRequired,
     showAddToAddressBookModal: PropTypes.func,
     contact: PropTypes.object,
+    isOwnedAccount: PropTypes.bool,
   };
 
   render() {
@@ -117,10 +118,11 @@ export default class ConfirmPageContainer extends Component {
       currentTransaction,
       showAddToAddressBookModal,
       contact = {},
+      isOwnedAccount,
     } = this.props;
 
     const showAddToAddressDialog =
-      contact.name === undefined && toAddress !== undefined;
+      !contact.name && toAddress && !isOwnedAccount && !hideSenderToRecipient;
 
     return (
       <div className="page-container">

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

@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import { getAddressBookEntry } from '../../../selectors';
+import { getAccountsWithLabels, getAddressBookEntry } from '../../../selectors';
 import * as actions from '../../../store/actions';
 import ConfirmPageContainer from './confirm-page-container.component';
 
@@ -9,7 +9,10 @@ function mapStateToProps(state, ownProps) {
   const contact = getAddressBookEntry(state, to);
   return {
     contact,
-    toName: contact?.name || ownProps.name,
+    toName: contact?.name || ownProps.toName,
+    isOwnedAccount: getAccountsWithLabels(state)
+      .map((accountWithLabel) => accountWithLabel.address)
+      .includes(to),
     to,
   };
 }