1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00

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

This commit is contained in:
Dan 2017-09-22 17:27:18 -02:30 committed by Chi Kei Chan
parent c77029ea90
commit 01816e1b22
5 changed files with 62 additions and 6 deletions

View File

@ -19,6 +19,10 @@ function mapDispatchToProps (dispatch) {
return { return {
// Is this supposed to be used somewhere? // Is this supposed to be used somewhere?
showQrView: (selected, identity) => dispatch(actions.showQrView(selected, identity)), 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 // fonts of qr-header
AccountDetailsModal.prototype.render = function () { AccountDetailsModal.prototype.render = function () {
const { selectedIdentity, network } = this.props const {
selectedIdentity,
network,
showExportPrivateKeyModal,
hideModal,
} = this.props
const { name, address } = selectedIdentity const { name, address } = selectedIdentity
return h(AccountModalContainer, {}, [ return h(AccountModalContainer, {}, [
@ -51,7 +60,11 @@ AccountDetailsModal.prototype.render = function () {
}, [ 'View account on Etherscan' ]), }, [ 'View account on Etherscan' ]),
// Holding on redesign for Export Private Key functionality // Holding on redesign for Export Private Key functionality
h('button.btn-clear', [ 'Export private key' ]), h('button.btn-clear', {
onClick: () => {
showExportPrivateKeyModal()
},
}, [ 'Export private key' ]),
]) ])
} }

View File

@ -28,8 +28,13 @@ function AccountModalContainer () {
module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountModalContainer) module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountModalContainer)
AccountModalContainer.prototype.render = function () { AccountModalContainer.prototype.render = function () {
const { selectedIdentity, children } = this.props const {
console.log(`children`, children); selectedIdentity,
children,
showBackButton = false,
backButtonAction,
} = this.props
return h('div', { style: { borderRadius: '4px' }}, [ return h('div', { style: { borderRadius: '4px' }}, [
h('div.account-modal-container', [ 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', { h('div.account-modal-close', {
onClick: this.props.hideModal, onClick: this.props.hideModal,
}), }),

View File

@ -14,12 +14,14 @@ function mapStateToProps (state) {
privateKey: state.appState.accountDetail.privateKey, privateKey: state.appState.accountDetail.privateKey,
network: state.metamask.network, network: state.metamask.network,
selectedIdentity: getSelectedIdentity(state), selectedIdentity: getSelectedIdentity(state),
previousModalState: state.appState.modal.previousModalState.name,
} }
} }
function mapDispatchToProps (dispatch) { function mapDispatchToProps (dispatch) {
return { return {
exportAccount: (password, address) => dispatch(actions.exportAccount(password, address)), exportAccount: (password, address) => dispatch(actions.exportAccount(password, address)),
showAccountDetailModal: () => dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' })),
hideModal: () => dispatch(actions.hideModal()), hideModal: () => dispatch(actions.hideModal()),
} }
} }
@ -86,10 +88,16 @@ ExportPrivateKeyModal.prototype.render = function () {
network, network,
privateKey, privateKey,
warning, warning,
showAccountDetailModal,
hideModal,
previousModalState,
} = this.props } = this.props
const { name, address } = selectedIdentity const { name, address } = selectedIdentity
return h(AccountModalContainer, {}, [ return h(AccountModalContainer, {
showBackButton: previousModalState === 'ACCOUNT_DETAILS',
backButtonAction: () => showAccountDetailModal(),
}, [
h('span.account-name', name), h('span.account-name', name),

View File

@ -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 { .account-modal-close::after {
content: '\00D7'; content: '\00D7';
font-size: 40px; font-size: 40px;

View File

@ -42,6 +42,9 @@ function reduceApp (state, action) {
modalState: { modalState: {
name: null, name: null,
}, },
previousModalState: {
name: null,
}
}, },
sidebarOpen: false, sidebarOpen: false,
networkDropdownOpen: false, networkDropdownOpen: false,
@ -87,6 +90,7 @@ function reduceApp (state, action) {
state.appState.modal, state.appState.modal,
{ open: true }, { open: true },
{ modalState: action.payload }, { modalState: action.payload },
{ previousModalState: appState.modal.modalState},
), ),
}) })
@ -95,7 +99,8 @@ function reduceApp (state, action) {
modal: Object.assign( modal: Object.assign(
state.appState.modal, state.appState.modal,
{ open: false }, { open: false },
{ modalState: action.payload || state.appState.modal.modalState }, { modalState: { name: null } },
{ previousModalState: appState.modal.modalState},
), ),
}) })