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

5 files changed, 62 insertions, 6 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),
 
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}, 
         ),
       })