diff options
author | Le Quoc Viet <vietlq85@gmail.com> | 2018-03-15 16:11:42 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-03-15 16:11:42 +0800 |
commit | 04079455e36e48433cf8055c8f1f79e1e7e18298 (patch) | |
tree | d7de2a6603b67b56abacf09bee4d2bbbfe886b8f /ui/app/components/modals/export-private-key-modal.js | |
parent | 5bdee96e73f65a0b369277e9c56b0afe5159e65b (diff) | |
parent | e2efc91aee64072c408ab509219dcbfb389c7609 (diff) | |
download | tangerine-wallet-browser-04079455e36e48433cf8055c8f1f79e1e7e18298.tar.gz tangerine-wallet-browser-04079455e36e48433cf8055c8f1f79e1e7e18298.tar.zst tangerine-wallet-browser-04079455e36e48433cf8055c8f1f79e1e7e18298.zip |
Merge pull request #1 from MetaMask/master
Merge from the source
Diffstat (limited to 'ui/app/components/modals/export-private-key-modal.js')
-rw-r--r-- | ui/app/components/modals/export-private-key-modal.js | 139 |
1 files changed, 139 insertions, 0 deletions
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..017177cfd --- /dev/null +++ b/ui/app/components/modals/export-private-key-modal.js @@ -0,0 +1,139 @@ +const Component = require('react').Component +const h = require('react-hyperscript') +const inherits = require('util').inherits +const connect = require('react-redux').connect +const ethUtil = require('ethereumjs-util') +const actions = require('../../actions') +const AccountModalContainer = require('./account-modal-container') +const { getSelectedIdentity } = require('../../selectors') +const ReadOnlyInput = require('../readonly-input') +const t = require('../../../i18n') +const copyToClipboard = require('copy-to-clipboard') + +function mapStateToProps (state) { + return { + warning: state.appState.warning, + privateKey: state.appState.accountDetail.privateKey, + network: state.metamask.network, + selectedIdentity: getSelectedIdentity(state), + previousModalState: state.appState.modal.previousModalState.name, + } +} + +function mapDispatchToProps (dispatch) { + return { + exportAccount: (password, address) => dispatch(actions.exportAccount(password, address)), + showAccountDetailModal: () => dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' })), + hideModal: () => dispatch(actions.hideModal()), + } +} + +inherits(ExportPrivateKeyModal, Component) +function ExportPrivateKeyModal () { + Component.call(this) + + this.state = { + password: '', + privateKey: null, + } +} + +module.exports = connect(mapStateToProps, mapDispatchToProps)(ExportPrivateKeyModal) + +ExportPrivateKeyModal.prototype.exportAccountAndGetPrivateKey = function (password, address) { + const { exportAccount } = this.props + + exportAccount(password, address) + .then(privateKey => this.setState({ privateKey })) +} + +ExportPrivateKeyModal.prototype.renderPasswordLabel = function (privateKey) { + return h('span.private-key-password-label', privateKey + ? t('copyPrivateKey') + : t('typePassword') + ) +} + +ExportPrivateKeyModal.prototype.renderPasswordInput = function (privateKey) { + const plainKey = privateKey && ethUtil.stripHexPrefix(privateKey) + + return privateKey + ? h(ReadOnlyInput, { + wrapperClass: 'private-key-password-display-wrapper', + inputClass: 'private-key-password-display-textarea', + textarea: true, + value: plainKey, + onClick: () => copyToClipboard(plainKey), + }) + : h('input.private-key-password-input', { + type: 'password', + onChange: event => this.setState({ password: event.target.value }), + }) +} + +ExportPrivateKeyModal.prototype.renderButton = function (className, onClick, label) { + return h('button', { + className, + onClick, + }, label) +} + +ExportPrivateKeyModal.prototype.renderButtons = function (privateKey, password, address, hideModal) { + return h('div.export-private-key-buttons', {}, [ + !privateKey && this.renderButton( + 'btn-cancel export-private-key__button export-private-key__button--cancel', + () => hideModal(), + 'Cancel' + ), + + (privateKey + ? this.renderButton('btn-clear export-private-key__button', () => hideModal(), t('done')) + : this.renderButton('btn-clear export-private-key__button', () => this.exportAccountAndGetPrivateKey(this.state.password, address), t('confirm')) + ), + + ]) +} + +ExportPrivateKeyModal.prototype.render = function () { + const { + selectedIdentity, + warning, + showAccountDetailModal, + hideModal, + previousModalState, + } = this.props + const { name, address } = selectedIdentity + + const { privateKey } = this.state + + return h(AccountModalContainer, { + showBackButton: previousModalState === 'ACCOUNT_DETAILS', + backButtonAction: () => showAccountDetailModal(), + }, [ + + h('span.account-name', name), + + h(ReadOnlyInput, { + wrapperClass: 'ellip-address-wrapper', + inputClass: 'qr-ellip-address ellip-address', + value: address, + }), + + h('div.account-modal-divider'), + + h('span.modal-body-title', t('showPrivateKeys')), + + h('div.private-key-password', {}, [ + this.renderPasswordLabel(privateKey), + + this.renderPasswordInput(privateKey), + + !warning ? null : h('span.private-key-password-error', warning), + ]), + + h('div.private-key-password-warning', t('privateKeyWarning')), + + this.renderButtons(privateKey, this.state.password, address, hideModal), + + ]) +} |