Adds a back button to export private key modal; connects account details to same modal.

3 files changed, 41 insertions, 5 deletions

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),