Alexander Tseung
7 years ago
parent
ecc39c5a7a
commit
0c6fef3dec
@ -1,81 +0,0 @@ |
||||
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 { |
||||
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), |
||||
|
||||
]), |
||||
|
||||
]) |
||||
} |
||||
@ -0,0 +1,81 @@ |
||||
const Component = require('react').Component |
||||
const { Switch, Route, matchPath } = require('react-router-dom') |
||||
const PropTypes = require('prop-types') |
||||
const h = require('react-hyperscript') |
||||
const connect = require('react-redux').connect |
||||
const actions = require('../../../actions') |
||||
const { getCurrentViewContext } = require('../../../selectors') |
||||
const classnames = require('classnames') |
||||
const NewAccountCreateForm = require('./new-account') |
||||
const NewAccountImportForm = require('./import-account') |
||||
const { NEW_ACCOUNT_ROUTE, IMPORT_ACCOUNT_ROUTE } = require('../../../routes') |
||||
|
||||
class CreateAccountPage extends Component { |
||||
renderTabs () { |
||||
const { history, location } = this.props |
||||
|
||||
return h('div.new-account__tabs', [ |
||||
h('div.new-account__tabs__tab', { |
||||
className: classnames('new-account__tabs__tab', { |
||||
'new-account__tabs__selected': matchPath(location.pathname, { |
||||
path: NEW_ACCOUNT_ROUTE, exact: true, |
||||
}), |
||||
}), |
||||
onClick: () => history.push(NEW_ACCOUNT_ROUTE), |
||||
}, 'Create'), |
||||
|
||||
h('div.new-account__tabs__tab', { |
||||
className: classnames('new-account__tabs__tab', { |
||||
'new-account__tabs__selected': matchPath(location.pathname, { |
||||
path: IMPORT_ACCOUNT_ROUTE, exact: true, |
||||
}), |
||||
}), |
||||
onClick: () => history.push(IMPORT_ACCOUNT_ROUTE), |
||||
}, 'Import'), |
||||
]) |
||||
} |
||||
|
||||
render () { |
||||
return h('div.new-account', {}, [ |
||||
h('div.new-account__header', [ |
||||
h('div.new-account__title', 'New Account'), |
||||
this.renderTabs(), |
||||
]), |
||||
h('div.new-account__form', [ |
||||
h(Switch, [ |
||||
h(Route, { |
||||
exact: true, |
||||
path: NEW_ACCOUNT_ROUTE, |
||||
component: NewAccountCreateForm, |
||||
}), |
||||
h(Route, { |
||||
exact: true, |
||||
path: IMPORT_ACCOUNT_ROUTE, |
||||
component: NewAccountImportForm, |
||||
}), |
||||
]), |
||||
]), |
||||
]) |
||||
} |
||||
} |
||||
|
||||
CreateAccountPage.propTypes = { |
||||
location: PropTypes.object, |
||||
history: PropTypes.object, |
||||
} |
||||
|
||||
const mapStateToProps = state => ({ |
||||
displayedForm: getCurrentViewContext(state), |
||||
}) |
||||
|
||||
const mapDispatchToProps = dispatch => ({ |
||||
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)), |
||||
}) |
||||
|
||||
module.exports = connect(mapStateToProps, mapDispatchToProps)(CreateAccountPage) |
||||
@ -1,95 +0,0 @@ |
||||
const Component = require('react').Component |
||||
const h = require('react-hyperscript') |
||||
const PropTypes = require('prop-types') |
||||
import Select from 'react-select' |
||||
|
||||
// Subviews
|
||||
const JsonImportView = require('./json.js') |
||||
const PrivateKeyImportView = require('./private-key.js') |
||||
|
||||
const PRIVATE_KEY_MENU_ITEM = 'Private Key' |
||||
const JSON_FILE_MENU_ITEM = 'JSON File' |
||||
|
||||
class ImportAccount extends Component { |
||||
constructor (props) { |
||||
super(props) |
||||
|
||||
this.state = { |
||||
current: PRIVATE_KEY_MENU_ITEM, |
||||
menuItems: [ PRIVATE_KEY_MENU_ITEM, JSON_FILE_MENU_ITEM ], |
||||
} |
||||
} |
||||
|
||||
renderImportView () { |
||||
const { current } = this.state |
||||
|
||||
switch (current) { |
||||
case 'Private Key': |
||||
return h(PrivateKeyImportView) |
||||
case 'JSON File': |
||||
return h(JsonImportView) |
||||
default: |
||||
return h(JsonImportView) |
||||
} |
||||
} |
||||
|
||||
render () { |
||||
const { history } = this.props |
||||
const { current, menuItems } = this.state |
||||
|
||||
return ( |
||||
h('div.flex-center', { |
||||
style: { |
||||
flexDirection: 'column', |
||||
marginTop: '32px', |
||||
}, |
||||
}, [ |
||||
h('.section-title.flex-row.flex-center', [ |
||||
h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', { |
||||
onClick: history.goBack, |
||||
}), |
||||
h('h2.page-subtitle', 'Import Accounts'), |
||||
]), |
||||
h('div', { |
||||
style: { |
||||
padding: '10px 0', |
||||
width: '260px', |
||||
color: 'rgb(174, 174, 174)', |
||||
}, |
||||
}, [ |
||||
|
||||
h('h3', { style: { padding: '3px' } }, 'SELECT TYPE'), |
||||
|
||||
h('style', ` |
||||
.has-value.Select--single > .Select-control .Select-value .Select-value-label, .Select-value-label { |
||||
color: rgb(174,174,174); |
||||
} |
||||
`),
|
||||
|
||||
h(Select, { |
||||
name: 'import-type-select', |
||||
clearable: false, |
||||
value: current, |
||||
options: menuItems.map(type => { |
||||
return { |
||||
value: type, |
||||
label: type, |
||||
} |
||||
}), |
||||
onChange: opt => { |
||||
this.setState({ current: opt.value }) |
||||
}, |
||||
}), |
||||
]), |
||||
|
||||
this.renderImportView(), |
||||
]) |
||||
) |
||||
} |
||||
} |
||||
|
||||
ImportAccount.propTypes = { |
||||
history: PropTypes.object, |
||||
} |
||||
|
||||
module.exports = ImportAccount |
||||
Loading…
Reference in new issue