aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app/components/modals
diff options
context:
space:
mode:
authorAlexander Tseung <alextsg@gmail.com>2017-10-27 02:36:13 +0800
committerChi Kei Chan <chikeichan@gmail.com>2017-10-27 15:24:07 +0800
commit5d8b53bcf491bfe6dd59f4986f02da70b91df5cd (patch)
tree728c05e3da805c1e0686606acd5f2d45be9cda9b /ui/app/components/modals
parent4e8d8639cb29bd47c110765467393865e1c19f4e (diff)
downloadtangerine-wallet-browser-5d8b53bcf491bfe6dd59f4986f02da70b91df5cd.tar
tangerine-wallet-browser-5d8b53bcf491bfe6dd59f4986f02da70b91df5cd.tar.gz
tangerine-wallet-browser-5d8b53bcf491bfe6dd59f4986f02da70b91df5cd.tar.bz2
tangerine-wallet-browser-5d8b53bcf491bfe6dd59f4986f02da70b91df5cd.tar.lz
tangerine-wallet-browser-5d8b53bcf491bfe6dd59f4986f02da70b91df5cd.tar.xz
tangerine-wallet-browser-5d8b53bcf491bfe6dd59f4986f02da70b91df5cd.tar.zst
tangerine-wallet-browser-5d8b53bcf491bfe6dd59f4986f02da70b91df5cd.zip
Provide default new account name
Diffstat (limited to 'ui/app/components/modals')
-rw-r--r--ui/app/components/modals/new-account-modal.js141
1 files changed, 78 insertions, 63 deletions
diff --git a/ui/app/components/modals/new-account-modal.js b/ui/app/components/modals/new-account-modal.js
index b78de1d8d..fc1fd413d 100644
--- a/ui/app/components/modals/new-account-modal.js
+++ b/ui/app/components/modals/new-account-modal.js
@@ -1,17 +1,88 @@
-const Component = require('react').Component
+const { Component } = require('react')
+const PropTypes = require('prop-types')
const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const connect = require('react-redux').connect
+const { connect } = require('react-redux')
const actions = require('../../actions')
-function mapStateToProps (state) {
+class NewAccountModal extends Component {
+ constructor (props) {
+ super(props)
+ const { numberOfExistingAccounts = 0 } = props
+ const newAccountNumber = numberOfExistingAccounts + 1
+
+ this.state = {
+ newAccountName: `Account ${newAccountNumber}`,
+ }
+ }
+
+ render () {
+ const { newAccountName } = this.state
+
+ return h('div', [
+ h('div.new-account-modal-wrapper', {
+ }, [
+ h('div.new-account-modal-header', {}, [
+ 'New Account',
+ ]),
+
+ h('div.modal-close-x', {
+ onClick: this.props.hideModal,
+ }),
+
+ h('div.new-account-modal-content', {}, [
+ 'Account Name',
+ ]),
+
+ h('div.new-account-input-wrapper', {}, [
+ h('input.new-account-input', {
+ value: this.state.newAccountName,
+ placeholder: 'E.g. My new account',
+ onChange: event => this.setState({ newAccountName: event.target.value }),
+ }, []),
+ ]),
+
+ h('div.new-account-modal-content.after-input', {}, [
+ 'or',
+ ]),
+
+ h('div.new-account-modal-content.after-input.pointer', {
+ onClick: () => {
+ this.props.hideModal()
+ this.props.showImportPage()
+ },
+ }, 'Import an account'),
+
+ h('div.new-account-modal-content.button', {}, [
+ h('button.btn-clear', {
+ onClick: () => this.props.createAccount(newAccountName),
+ }, [
+ 'SAVE',
+ ]),
+ ]),
+ ]),
+ ])
+ }
+}
+
+NewAccountModal.propTypes = {
+ hideModal: PropTypes.func,
+ showImportPage: PropTypes.func,
+ createAccount: PropTypes.func,
+ numberOfExistingAccounts: PropTypes.number,
+}
+
+const mapStateToProps = state => {
+ const { metamask: { network, selectedAddress, identities = {} } } = state
+ const numberOfExistingAccounts = Object.keys(identities).length
+
return {
- network: state.metamask.network,
- address: state.metamask.selectedAddress,
+ network,
+ address: selectedAddress,
+ numberOfExistingAccounts,
}
}
-function mapDispatchToProps (dispatch) {
+const mapDispatchToProps = dispatch => {
return {
toCoinbase: (address) => {
dispatch(actions.buyEth({ network: '1', address, amount: 0 }))
@@ -32,60 +103,4 @@ function mapDispatchToProps (dispatch) {
}
}
-inherits(NewAccountModal, Component)
-function NewAccountModal () {
- Component.call(this)
-
- this.state = {
- newAccountName: '',
- }
-}
-
module.exports = connect(mapStateToProps, mapDispatchToProps)(NewAccountModal)
-
-NewAccountModal.prototype.render = function () {
- const { newAccountName } = this.state
-
- return h('div', {}, [
- h('div.new-account-modal-wrapper', {
- }, [
- h('div.new-account-modal-header', {}, [
- 'New Account',
- ]),
-
- h('div.modal-close-x', {
- onClick: this.props.hideModal,
- }),
-
- h('div.new-account-modal-content', {}, [
- 'Account Name',
- ]),
-
- h('div.new-account-input-wrapper', {}, [
- h('input.new-account-input', {
- placeholder: 'E.g. My new account',
- onChange: event => this.setState({ newAccountName: event.target.value }),
- }, []),
- ]),
-
- h('div.new-account-modal-content.after-input', {}, [
- 'or',
- ]),
-
- h('div.new-account-modal-content.after-input.pointer', {
- onClick: () => {
- this.props.hideModal()
- this.props.showImportPage()
- },
- }, 'Import an account'),
-
- h('div.new-account-modal-content.button', {}, [
- h('button.btn-clear', {
- onClick: () => this.props.createAccount(newAccountName),
- }, [
- 'SAVE',
- ]),
- ]),
- ]),
- ])
-}