m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 18:00:18 +01:00
Code

Exports private key modal opens from dropdown.

Browse Source
This commit is contained in:
Dan 2017-09-20 05:35:27 -02:30 committed by Chi Kei Chan
parent e1077836ce
commit 0eeba3771c
4 changed files with 110 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
ui/app/components/dropdowns/components/account-dropdowns.js
View File

@ -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())
},

41
ui/app/components/modals/export-private-key-modal.js Normal file
View File

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

42
ui/app/components/modals/modal.js
View File

@ -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: {

73
ui/app/css/itcss/components/modal.scss
View File

@ -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 {