From 0eeba3771c2396c12de3f254dbfaae957344411d Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 20 Sep 2017 05:35:27 -0230 Subject: [PATCH] Exports private key modal opens from dropdown. --- .../dropdowns/components/account-dropdowns.js | 8 +- .../modals/export-private-key-modal.js | 41 +++++++++++ ui/app/components/modals/modal.js | 42 +++++++---- ui/app/css/itcss/components/modal.scss | 73 ++++++++++--------- 4 files changed, 110 insertions(+), 54 deletions(-) create mode 100644 ui/app/components/modals/export-private-key-modal.js 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 {