Exports private key modal opens from dropdown.

ui/app/components/dropdowns/components/account-dropdowns.js

@@ -337,9 +337,7 @@ class AccountDropdowns extends Component {
           DropdownMenuItem,
           {
             closeMenu: () => {},
-            onClick: () => {
+            onClick: () => this.props.actions.showExportPrivateKeyModal(),
-              actions.requestAccountExport()
-            },
             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())
       },

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'),
+      
+  ])
+}

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: {
+    ...accountModalStyle,
-      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',
   },
+
+  EXPORT_PRIVATE_KEY: {
+    contents: [
+      h(ExportPrivateKeyModal, {}, []),
+    ],
+    ...accountModalStyle,
   },
 
   NEW_ACCOUNT: {

ui/app/css/itcss/components/modal.scss

@@ -214,16 +214,18 @@
 
 // Account Details Modal
 
-.account-modal-container .qr-header {
+.account-modal-container {
+
+  .qr-header {
     margin-top: 9px;
     font-size: 20px;
   }
 
-.account-modal-container .qr-wrapper {
+  .qr-wrapper {
     margin-top: 5px;
   }
 
-.account-modal-container .ellip-address-wrapper {
+  .ellip-address-wrapper {
     display: flex;
     justify-content: center;
     border: 1px solid $alto;
@@ -233,14 +235,14 @@
     width: 286px;
   }
 
-.account-modal-container .qr-ellip-address {
+  .qr-ellip-address, .ellip-address {
     width: 247px;
     border: none;
     font-family: 'Montserrat Light';
     font-size: 14px;
   }
 
-.account-modal-container .btn-clear {
+  .btn-clear {
     min-height: 28px;
     font-size: 14px;
     border-color: $curious-blue;
@@ -254,6 +256,7 @@
     width: 235px;
     font-family: 'Montserrat Light';
   }
+}
 
 .account-modal-divider {
   width: 100%;