From d78855cb3d00079f195a2962fce9465adc07ae34 Mon Sep 17 00:00:00 2001 From: "Akintayo A. Olusegun" Date: Sun, 5 Sep 2021 16:16:18 +0000 Subject: [PATCH 1/4] Fix for: Confirmation screen should show local nicknames even when invoking a contract method #11148 1. Display the new address detected dialog if the contract is not in the address book 2. Use the address book if exists, else use the default. Signed-off-by: Akintayo A. Olusegun --- .../confirm-page-container.component.js | 67 ++++++++++++++++++- 1 file changed, 66 insertions(+), 1 deletion(-) 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 index 9cc2e4286..c23c9b74e 100644 --- a/ui/components/app/confirm-page-container/confirm-page-container.component.js +++ b/ui/components/app/confirm-page-container/confirm-page-container.component.js @@ -1,16 +1,20 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; +import { connect } from 'react-redux'; 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 { getAddressBookEntry } from '../../../selectors'; +import * as actions from '../../../store/actions'; +import Dialog from '../../ui/dialog'; import { ConfirmPageContainerHeader, ConfirmPageContainerContent, ConfirmPageContainerNavigation, } from '.'; -export default class ConfirmPageContainer extends Component { +class ConfirmPageContainer extends Component { static contextTypes = { t: PropTypes.func, }; @@ -66,8 +70,29 @@ export default class ConfirmPageContainer extends Component { handleCloseEditGas: PropTypes.func, // Gas Popover currentTransaction: PropTypes.object.isRequired, + showAddToAddressBookModal: PropTypes.func, + contact: PropTypes.object, }; + maybeRenderAddContact() { + const { t } = this.context; + const { showAddToAddressBookModal, toAddress, contact = {} } = this.props; + + if (contact.name || toAddress === undefined) { + return null; + } + + return ( + showAddToAddressBookModal()} + > + {t('newAccountDetectedDialogMessage')} + + ); + } + render() { const { showEdit, @@ -149,6 +174,7 @@ export default class ConfirmPageContainer extends Component { /> )} +
{this.maybeRenderAddContact()}
{contentComponent || ( + 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); From 409bb00748a7d4c3eb83f7b0ae16dc4d2f451af2 Mon Sep 17 00:00:00 2001 From: "Akintayo A. Olusegun" Date: Wed, 8 Sep 2021 01:12:56 +0400 Subject: [PATCH 2/4] Separate container from component as per https://github.com/MetaMask/metamask-extension/pull/12019#discussion_r703804969 Signed-off-by: Akintayo A. Olusegun --- .../confirm-page-container.component.js | 44 +------------------ .../confirm-page-container.container.js | 43 ++++++++++++++++++ .../app/confirm-page-container/index.js | 2 +- 3 files changed, 45 insertions(+), 44 deletions(-) create mode 100644 ui/components/app/confirm-page-container/confirm-page-container.container.js 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 index c23c9b74e..852cfeee9 100644 --- a/ui/components/app/confirm-page-container/confirm-page-container.component.js +++ b/ui/components/app/confirm-page-container/confirm-page-container.component.js @@ -1,12 +1,9 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import { connect } from 'react-redux'; 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 { getAddressBookEntry } from '../../../selectors'; -import * as actions from '../../../store/actions'; import Dialog from '../../ui/dialog'; import { ConfirmPageContainerHeader, @@ -14,7 +11,7 @@ import { ConfirmPageContainerNavigation, } from '.'; -class ConfirmPageContainer extends Component { +export default class ConfirmPageContainer extends Component { static contextTypes = { t: PropTypes.func, }; @@ -229,42 +226,3 @@ class ConfirmPageContainer extends Component { ); } } - -function mapStateToProps(state, ownProps) { - const to = ownProps.toAddress; - - const contact = getAddressBookEntry(state, to); - return { - contact, - toName: contact && contact.name ? contact.name : ownProps.toName, - 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); 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 new file mode 100644 index 000000000..fb0e42b78 --- /dev/null +++ b/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 && contact.name ? contact.name : ownProps.toName, + 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); diff --git a/ui/components/app/confirm-page-container/index.js b/ui/components/app/confirm-page-container/index.js index d9bc6f5a8..955ef1bb8 100644 --- a/ui/components/app/confirm-page-container/index.js +++ b/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'; From 1ad80f0ae8aa032ff4211b476c7f59b003062891 Mon Sep 17 00:00:00 2001 From: "Akintayo A. Olusegun" Date: Wed, 8 Sep 2021 02:40:47 +0400 Subject: [PATCH 3/4] Use variable to check if should display dialog and display dialog inline. Signed-off-by: Akintayo A. Olusegun --- .../confirm-page-container.component.js | 36 +++++++++---------- 1 file changed, 16 insertions(+), 20 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 index 852cfeee9..cb32c41fd 100644 --- a/ui/components/app/confirm-page-container/confirm-page-container.component.js +++ b/ui/components/app/confirm-page-container/confirm-page-container.component.js @@ -71,25 +71,6 @@ export default class ConfirmPageContainer extends Component { contact: PropTypes.object, }; - maybeRenderAddContact() { - const { t } = this.context; - const { showAddToAddressBookModal, toAddress, contact = {} } = this.props; - - if (contact.name || toAddress === undefined) { - return null; - } - - return ( - showAddToAddressBookModal()} - > - {t('newAccountDetectedDialogMessage')} - - ); - } - render() { const { showEdit, @@ -136,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 (
)} -
{this.maybeRenderAddContact()}
+
+ {showAddToAddressDialog && ( + showAddToAddressBookModal()} + > + {this.context.t('newAccountDetectedDialogMessage')} + + )} +
{contentComponent || ( Date: Wed, 8 Sep 2021 02:52:42 +0400 Subject: [PATCH 4/4] Refactor contact name code using ternary operator. Signed-off-by: Akintayo A. Olusegun --- .../confirm-page-container/confirm-page-container.container.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 index fb0e42b78..d75091391 100644 --- a/ui/components/app/confirm-page-container/confirm-page-container.container.js +++ b/ui/components/app/confirm-page-container/confirm-page-container.container.js @@ -9,7 +9,7 @@ function mapStateToProps(state, ownProps) { const contact = getAddressBookEntry(state, to); return { contact, - toName: contact && contact.name ? contact.name : ownProps.toName, + toName: contact?.name || ownProps.name, to, }; }