diff options
author | Dan <danjm.com@gmail.com> | 2018-01-11 02:25:38 +0800 |
---|---|---|
committer | Chi Kei Chan <chikeichan@gmail.com> | 2018-01-13 05:42:51 +0800 |
commit | 980e1bfcf82361185f6d1b22abd9593ba166825e (patch) | |
tree | 8bdb94affcc0c332f9ff681e53fa2a4fff695f1f /ui/app/accounts/new-account/index.js | |
parent | 89a8267fe70b62739043c09e855d6aa97af8769e (diff) | |
download | tangerine-wallet-browser-980e1bfcf82361185f6d1b22abd9593ba166825e.tar.gz tangerine-wallet-browser-980e1bfcf82361185f6d1b22abd9593ba166825e.tar.zst tangerine-wallet-browser-980e1bfcf82361185f6d1b22abd9593ba166825e.zip |
New add account page with create and import options.
Diffstat (limited to 'ui/app/accounts/new-account/index.js')
-rw-r--r-- | ui/app/accounts/new-account/index.js | 82 |
1 files changed, 82 insertions, 0 deletions
diff --git a/ui/app/accounts/new-account/index.js b/ui/app/accounts/new-account/index.js new file mode 100644 index 000000000..cd096a403 --- /dev/null +++ b/ui/app/accounts/new-account/index.js @@ -0,0 +1,82 @@ +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 { getCurrentViewContext } = require('../../selectors') +const classnames = require('classnames') + +const NewAccountCreateForm = require('./create-form') +const NewAccountImportForm = require('../import') + +function mapStateToProps (state) { + return { + displayedForm: getCurrentViewContext(state), + } +} + +function mapDispatchToProps (dispatch) { + return { + // Is this supposed to be used somewhere? + displayForm: form => dispatch(actions.setNewAccountForm(form)), + showQrView: (selected, identity) => dispatch(actions.showQrView(selected, identity)), + showExportPrivateKeyModal: () => { + dispatch(actions.showModal({ name: 'EXPORT_PRIVATE_KEY' })) + }, + hideModal: () => dispatch(actions.hideModal()), + saveAccountLabel: (address, label) => dispatch(actions.saveAccountLabel(address, label)), + } +} + +inherits(AccountDetailsModal, Component) +function AccountDetailsModal (props) { + Component.call(this) + + this.state = { + displayedForm: props.displayedForm, + } +} + +module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountDetailsModal) + +AccountDetailsModal.prototype.render = function () { + const { displayedForm, displayForm } = this.props + + return h('div.new-account', {}, [ + + h('div.new-account__header', [ + + h('div.new-account__title', 'New Account'), + + h('div.new-account__tabs', [ + + h('div.new-account__tabs__tab', { + className: classnames('new-account__tabs__tab', { + 'new-account__tabs__selected': displayedForm === 'CREATE', + 'new-account__tabs__unselected cursor-pointer': displayedForm !== 'CREATE', + }), + onClick: () => displayForm('CREATE'), + }, 'Create'), + + h('div.new-account__tabs__tab', { + className: classnames('new-account__tabs__tab', { + 'new-account__tabs__selected': displayedForm === 'IMPORT', + 'new-account__tabs__unselected cursor-pointer': displayedForm !== 'IMPORT', + }), + onClick: () => displayForm('IMPORT'), + }, 'Import'), + + ]), + + ]), + + h('div.new-account__form', [ + + displayedForm === 'CREATE' + ? h(NewAccountCreateForm) + : h(NewAccountImportForm), + + ]), + + ]) +} |