Exports private key modal opens from dropdown.

4 files changed, 110 insertions, 54 deletions

diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js
index e2d3d6d64..76f186a3f 100644
--- a/ui/app/components/dropdowns/components/account-dropdowns.js
+++ b/ui/app/components/dropdowns/components/account-dropdowns.js
@@ -337,9 +337,7 @@ class AccountDropdowns extends Component {
           DropdownMenuItem,
           {
             closeMenu: () => {},
-            onClick: () => {
-              actions.requestAccountExport()
-            },
+            onClick: () => this.props.actions.showExportPrivateKeyModal(),
             style: Object.assign(
               dropdownMenuItemStyle,
               menuItemStyles,
@@ -429,7 +427,6 @@ const mapDispatchToProps = (dispatch) => {
   return {
     actions: {
       showConfigPage: () => dispatch(actions.showConfigPage()),
-      requestAccountExport: () => dispatch(actions.requestExportAccount()),
       showAccountDetail: (address) => dispatch(actions.showAccountDetail(address)),
       showAccountDetailModal: () => {
         dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' }))
@@ -443,6 +440,9 @@ const mapDispatchToProps = (dispatch) => {
       showNewAccountModal: () => {
         dispatch(actions.showModal({ name: 'NEW_ACCOUNT' }))
       },
+      showExportPrivateKeyModal: () => {
+        dispatch(actions.showModal({ name: 'EXPORT_PRIVATE_KEY' }))
+      },
       showAddTokenPage: () => {
         dispatch(actions.showAddTokenPage())
       },
diff --git a/ui/app/components/modals/export-private-key-modal.js b/ui/app/components/modals/export-private-key-modal.js
new file mode 100644
index 000000000..bbcd25e0d
--- /dev/null
+++ b/ui/app/components/modals/export-private-key-modal.js
@@ -0,0 +1,41 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const connect = require('react-redux').connect
+const actions = require('../../actions')
+const AccountModalContainer = require('./account-modal-container')
+const { getSelectedIdentity } = require('../../selectors')
+const ReadOnlyInput = require('../readonly-input')
+
+function mapStateToProps (state) {
+  return {
+    network: state.metamask.network,
+    selectedIdentity: getSelectedIdentity(state),
+  }
+}
+
+inherits(ExportPrivateKeyModal, Component)
+function ExportPrivateKeyModal () {
+  Component.call(this)
+}
+
+module.exports = connect(mapStateToProps)(ExportPrivateKeyModal)
+
+ExportPrivateKeyModal.prototype.render = function () {
+  const { selectedIdentity, network } = this.props
+  const { name, address } = selectedIdentity
+
+  return h(AccountModalContainer, {}, [
+
+      h('span.account-name', name),
+
+      h(ReadOnlyInput, {
+        wrapperClass: 'ellip-address-wrapper',
+        inputClass: 'ellip-address',
+        value: address,
+      }),
+
+      h('div.account-modal-divider'),
+      
+  ])
+}
diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js
index 04a2f5f40..138efc3ea 100644
--- a/ui/app/components/modals/modal.js
+++ b/ui/app/components/modals/modal.js
@@ -11,8 +11,27 @@ const isPopupOrNotification = require('../../../../app/scripts/lib/is-popup-or-n
 const BuyOptions = require('./buy-options-modal')
 const AccountDetailsModal = require('./account-details-modal')
 const EditAccountNameModal = require('./edit-account-name-modal')
+const ExportPrivateKeyModal = require('./export-private-key-modal')
 const NewAccountModal = require('./new-account-modal')
 
+const accountModalStyle = {
+  mobileModalStyle: {
+    width: '95%',
+    top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh',
+    boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
+    borderRadius: '4px',
+  },
+  laptopModalStyle: {
+    width: '360px',
+    top: 'calc(33% + 45px)',
+    boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
+    borderRadius: '4px',
+  },
+  contentStyle: {
+    borderRadius: '4px',
+  },
+}
+
 const MODALS = {
   BUY: {
     contents: [
@@ -51,21 +70,14 @@ const MODALS = {
     contents: [
       h(AccountDetailsModal, {}, []),
     ],
-    mobileModalStyle: {
-      width: '95%',
-      top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh',
-      boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
-      borderRadius: '4px',
-    },
-    laptopModalStyle: {
-      width: '360px',
-      top: 'calc(33% + 45px)',
-      boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
-      borderRadius: '4px',
-    },
-    contentStyle: {
-      borderRadius: '4px',
-    },
+    ...accountModalStyle,
+  },
+
+  EXPORT_PRIVATE_KEY: {
+    contents: [
+      h(ExportPrivateKeyModal, {}, []),
+    ],
+    ...accountModalStyle,
   },
 
   NEW_ACCOUNT: {
diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss
index c0a5aa1ef..0afd778e9 100644
--- a/ui/app/css/itcss/components/modal.scss
+++ b/ui/app/css/itcss/components/modal.scss
@@ -214,45 +214,48 @@
 
 // Account Details Modal
 
-.account-modal-container .qr-header {
-  margin-top: 9px;
-  font-size: 20px;
-}
+.account-modal-container {
 
-.account-modal-container .qr-wrapper {
-  margin-top: 5px;
-}
+  .qr-header {
+    margin-top: 9px;
+    font-size: 20px;
+  }
 
-.account-modal-container .ellip-address-wrapper {
-  display: flex;
-  justify-content: center;
-  border: 1px solid $alto;
-  padding: 5px 10px;
-  font-family: 'Montserrat Light';
-  margin-top: 7px;
-  width: 286px;
-}
+  .qr-wrapper {
+    margin-top: 5px;
+  }
 
-.account-modal-container .qr-ellip-address {
-  width: 247px;
-  border: none;
-  font-family: 'Montserrat Light';
-  font-size: 14px;
-}
+  .ellip-address-wrapper {
+    display: flex;
+    justify-content: center;
+    border: 1px solid $alto;
+    padding: 5px 10px;
+    font-family: 'Montserrat Light';
+    margin-top: 7px;
+    width: 286px;
+  }
 
-.account-modal-container .btn-clear {
-  min-height: 28px;
-  font-size: 14px;
-  border-color: $curious-blue;
-  color: $curious-blue;
-  border-radius: 2px;
-  flex-basis: 100%;
-  width: 75%;
-  margin-top: 17px;
-  padding: 10px 22px;
-  height: 44px;
-  width: 235px;
-  font-family: 'Montserrat Light';
+  .qr-ellip-address, .ellip-address {
+    width: 247px;
+    border: none;
+    font-family: 'Montserrat Light';
+    font-size: 14px;
+  }
+
+  .btn-clear {
+    min-height: 28px;
+    font-size: 14px;
+    border-color: $curious-blue;
+    color: $curious-blue;
+    border-radius: 2px;
+    flex-basis: 100%;
+    width: 75%;
+    margin-top: 17px;
+    padding: 10px 22px;
+    height: 44px;
+    width: 235px;
+    font-family: 'Montserrat Light';
+  }
 }
 
 .account-modal-divider {