diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js index 6c2eba7bd..37a62e1c0 100644 --- a/ui/app/components/modals/account-details-modal.js +++ b/ui/app/components/modals/account-details-modal.js @@ -19,6 +19,10 @@ function mapDispatchToProps (dispatch) { return { // Is this supposed to be used somewhere? showQrView: (selected, identity) => dispatch(actions.showQrView(selected, identity)), + showExportPrivateKeyModal: () => { + dispatch(actions.showModal({ name: 'EXPORT_PRIVATE_KEY' })) + }, + hideModal: () => dispatch(actions.hideModal()), } } @@ -33,7 +37,12 @@ module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountDetailsModa // fonts of qr-header AccountDetailsModal.prototype.render = function () { - const { selectedIdentity, network } = this.props + const { + selectedIdentity, + network, + showExportPrivateKeyModal, + hideModal, + } = this.props const { name, address } = selectedIdentity return h(AccountModalContainer, {}, [ @@ -51,7 +60,11 @@ AccountDetailsModal.prototype.render = function () { }, [ 'View account on Etherscan' ]), // Holding on redesign for Export Private Key functionality - h('button.btn-clear', [ 'Export private key' ]), + h('button.btn-clear', { + onClick: () => { + showExportPrivateKeyModal() + }, + }, [ 'Export private key' ]), ]) } diff --git a/ui/app/components/modals/account-modal-container.js b/ui/app/components/modals/account-modal-container.js index 69650ca15..3cad72067 100644 --- a/ui/app/components/modals/account-modal-container.js +++ b/ui/app/components/modals/account-modal-container.js @@ -28,8 +28,13 @@ function AccountModalContainer () { module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountModalContainer) AccountModalContainer.prototype.render = function () { - const { selectedIdentity, children } = this.props - console.log(`children`, children); + const { + selectedIdentity, + children, + showBackButton = false, + backButtonAction, + } = this.props + return h('div', { style: { borderRadius: '4px' }}, [ h('div.account-modal-container', [ @@ -44,6 +49,16 @@ AccountModalContainer.prototype.render = function () { ]), + showBackButton && h('div.account-modal-back', { + onClick: backButtonAction, + }, [ + + h('i.fa.fa-angle-left.fa-lg'), + + h('span.account-modal-back__text', ' Back'), + + ]), + h('div.account-modal-close', { onClick: this.props.hideModal, }), diff --git a/ui/app/components/modals/export-private-key-modal.js b/ui/app/components/modals/export-private-key-modal.js index b1d551781..4bb34f8c6 100644 --- a/ui/app/components/modals/export-private-key-modal.js +++ b/ui/app/components/modals/export-private-key-modal.js @@ -14,12 +14,14 @@ function mapStateToProps (state) { privateKey: state.appState.accountDetail.privateKey, network: state.metamask.network, selectedIdentity: getSelectedIdentity(state), + previousModalState: state.appState.modal.previousModalState.name, } } function mapDispatchToProps (dispatch) { return { exportAccount: (password, address) => dispatch(actions.exportAccount(password, address)), + showAccountDetailModal: () => dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' })), hideModal: () => dispatch(actions.hideModal()), } } @@ -86,10 +88,16 @@ ExportPrivateKeyModal.prototype.render = function () { network, privateKey, warning, + showAccountDetailModal, + hideModal, + previousModalState, } = this.props const { name, address } = selectedIdentity - return h(AccountModalContainer, {}, [ + return h(AccountModalContainer, { + showBackButton: previousModalState === 'ACCOUNT_DETAILS', + backButtonAction: () => showAccountDetailModal(), + }, [ h('span.account-name', name), diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss index 00b6111f7..fd61ad4f4 100644 --- a/ui/app/css/itcss/components/modal.scss +++ b/ui/app/css/itcss/components/modal.scss @@ -192,6 +192,21 @@ } } +.account-modal-back { + color: $dusty-gray; + position: absolute; + top: 13px; + left: 17px; + cursor: pointer; + + &__text { + margin-top: 2px; + font-family: 'DIN OT'; + font-size: 14px; + line-height: 18px; + } +} + .account-modal-close::after { content: '\00D7'; font-size: 40px; diff --git a/ui/app/reducers/app.js b/ui/app/reducers/app.js index 6d805521b..4f10d9857 100644 --- a/ui/app/reducers/app.js +++ b/ui/app/reducers/app.js @@ -42,6 +42,9 @@ function reduceApp (state, action) { modalState: { name: null, }, + previousModalState: { + name: null, + } }, sidebarOpen: false, networkDropdownOpen: false, @@ -87,6 +90,7 @@ function reduceApp (state, action) { state.appState.modal, { open: true }, { modalState: action.payload }, + { previousModalState: appState.modal.modalState}, ), }) @@ -95,7 +99,8 @@ function reduceApp (state, action) { modal: Object.assign( state.appState.modal, { open: false }, - { modalState: action.payload || state.appState.modal.modalState }, + { modalState: { name: null } }, + { previousModalState: appState.modal.modalState}, ), })