From 73a593b42e3a81b721cfa2f8913565a8b800f983 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 20 Aug 2017 19:28:20 -0700 Subject: Hook up template for New Account Modal --- ui/app/components/modals/new-account-modal.js | 80 +++++++++++++++++++++++++++ 1 file changed, 80 insertions(+) create mode 100644 ui/app/components/modals/new-account-modal.js (limited to 'ui/app/components/modals/new-account-modal.js') diff --git a/ui/app/components/modals/new-account-modal.js b/ui/app/components/modals/new-account-modal.js new file mode 100644 index 000000000..e4b3ca328 --- /dev/null +++ b/ui/app/components/modals/new-account-modal.js @@ -0,0 +1,80 @@ +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') + +function mapStateToProps (state) { + return { + network: state.metamask.network, + address: state.metamask.selectedAddress, + } +} + +function mapDispatchToProps (dispatch) { + return { + toCoinbase: (address) => { + dispatch(actions.buyEth({ network: '1', address, amount: 0 })) + }, + hideModal: () => { + dispatch(actions.hideModal()) + } + } +} + +inherits(BuyOptions, Component) +function BuyOptions () { + Component.call(this) +} + +module.exports = connect(mapStateToProps, mapDispatchToProps)(BuyOptions) + +// BuyOptions is currently meant to be rendered inside +// It is the only component in this codebase that does so +// It utilizes modal styles +BuyOptions.prototype.render = function () { + return h('div', {}, [ + h('div.modal-content.transfers-subview', { + }, [ + h('div.modal-content-title-wrapper.flex-column.flex-center', { + style: {}, + }, [ + h('div.modal-content-title', { + style: {}, + }, 'New Account Modal'), + h('div', {}, 'How would you like to buy Ether?'), + ]), + + h('div.modal-content-options.flex-column.flex-center', {}, [ + + h('div.modal-content-option', { + onClick: () => { + const { toCoinbase, address } = this.props + toCoinbase(address) + }, + }, [ + h('div.modal-content-option-title', {}, 'Coinbase'), + h('div.modal-content-option-subtitle', {}, 'Buy with Fiat'), + ]), + + h('div.modal-content-option', {}, [ + h('div.modal-content-option-title', {}, 'Shapeshift'), + h('div.modal-content-option-subtitle', {}, 'Trade any digital asset for any other'), + ]), + + h('div.modal-content-option', {}, [ + h('div.modal-content-option-title', {}, 'Direct Deposit'), + h('div.modal-content-option-subtitle', {}, 'Deposit from another account'), + ]), + + ]), + + h('button', { + style: { + background: 'white', + }, + onClick: () => { this.props.hideModal() }, + }, h('div.modal-content-footer#modal-content-footer-text',{}, 'Cancel')), + ]) + ]) +} -- cgit v1.2.3 From d82233b95c5c3c4297a2d18b981ec6188de003c1 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Mon, 21 Aug 2017 04:46:38 -0700 Subject: Hook up actions to EditAccountNameModal --- ui/app/components/modals/new-account-modal.js | 28 +++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) (limited to 'ui/app/components/modals/new-account-modal.js') diff --git a/ui/app/components/modals/new-account-modal.js b/ui/app/components/modals/new-account-modal.js index e4b3ca328..c55d69964 100644 --- a/ui/app/components/modals/new-account-modal.js +++ b/ui/app/components/modals/new-account-modal.js @@ -34,37 +34,37 @@ module.exports = connect(mapStateToProps, mapDispatchToProps)(BuyOptions) // It utilizes modal styles BuyOptions.prototype.render = function () { return h('div', {}, [ - h('div.modal-content.transfers-subview', { + h('div.buy-modal-content.transfers-subview', { }, [ - h('div.modal-content-title-wrapper.flex-column.flex-center', { + h('div.buy-modal-content-title-wrapper.flex-column.flex-center', { style: {}, }, [ - h('div.modal-content-title', { + h('div.buy-modal-content-title', { style: {}, }, 'New Account Modal'), h('div', {}, 'How would you like to buy Ether?'), ]), - h('div.modal-content-options.flex-column.flex-center', {}, [ + h('div.buy-modal-content-options.flex-column.flex-center', {}, [ - h('div.modal-content-option', { + h('div.buy-modal-content-option', { onClick: () => { const { toCoinbase, address } = this.props toCoinbase(address) }, }, [ - h('div.modal-content-option-title', {}, 'Coinbase'), - h('div.modal-content-option-subtitle', {}, 'Buy with Fiat'), + h('div.buy-modal-content-option-title', {}, 'Coinbase'), + h('div.buy-modal-content-option-subtitle', {}, 'Buy with Fiat'), ]), - h('div.modal-content-option', {}, [ - h('div.modal-content-option-title', {}, 'Shapeshift'), - h('div.modal-content-option-subtitle', {}, 'Trade any digital asset for any other'), + h('div.buy-modal-content-option', {}, [ + h('div.buy-modal-content-option-title', {}, 'Shapeshift'), + h('div.buy-modal-content-option-subtitle', {}, 'Trade any digital asset for any other'), ]), - h('div.modal-content-option', {}, [ - h('div.modal-content-option-title', {}, 'Direct Deposit'), - h('div.modal-content-option-subtitle', {}, 'Deposit from another account'), + h('div.buy-modal-content-option', {}, [ + h('div.buy-modal-content-option-title', {}, 'Direct Deposit'), + h('div.buy-modal-content-option-subtitle', {}, 'Deposit from another account'), ]), ]), @@ -74,7 +74,7 @@ BuyOptions.prototype.render = function () { background: 'white', }, onClick: () => { this.props.hideModal() }, - }, h('div.modal-content-footer#modal-content-footer-text',{}, 'Cancel')), + }, h('div.buy-modal-content-footer#buy-modal-content-footer-text',{}, 'Cancel')), ]) ]) } -- cgit v1.2.3 From 86b71f014a4bda433532cf7cbe7d76b243d3fb70 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Mon, 21 Aug 2017 06:14:28 -0700 Subject: Add wrapper CSS for NewAccountModal --- ui/app/components/modals/new-account-modal.js | 68 ++++++++++++--------------- 1 file changed, 29 insertions(+), 39 deletions(-) (limited to 'ui/app/components/modals/new-account-modal.js') diff --git a/ui/app/components/modals/new-account-modal.js b/ui/app/components/modals/new-account-modal.js index c55d69964..15341a2e9 100644 --- a/ui/app/components/modals/new-account-modal.js +++ b/ui/app/components/modals/new-account-modal.js @@ -22,59 +22,49 @@ function mapDispatchToProps (dispatch) { } } -inherits(BuyOptions, Component) -function BuyOptions () { +inherits(NewAccountModal, Component) +function NewAccountModal () { Component.call(this) } -module.exports = connect(mapStateToProps, mapDispatchToProps)(BuyOptions) +module.exports = connect(mapStateToProps, mapDispatchToProps)(NewAccountModal) -// BuyOptions is currently meant to be rendered inside -// It is the only component in this codebase that does so -// It utilizes modal styles -BuyOptions.prototype.render = function () { +NewAccountModal.prototype.render = function () { return h('div', {}, [ - h('div.buy-modal-content.transfers-subview', { + h('div.new-account-modal-wrapper', { }, [ - h('div.buy-modal-content-title-wrapper.flex-column.flex-center', { - style: {}, - }, [ - h('div.buy-modal-content-title', { - style: {}, - }, 'New Account Modal'), - h('div', {}, 'How would you like to buy Ether?'), + h('div', {}, [ + 'New Account', ]), - h('div.buy-modal-content-options.flex-column.flex-center', {}, [ - - h('div.buy-modal-content-option', { - onClick: () => { - const { toCoinbase, address } = this.props - toCoinbase(address) - }, - }, [ - h('div.buy-modal-content-option-title', {}, 'Coinbase'), - h('div.buy-modal-content-option-subtitle', {}, 'Buy with Fiat'), + h('div', {}, [ + h('i.fa.fa-times', {}, [ ]), + ]), + + h('div', {}, [ + 'Account Name', + ]), - h('div.buy-modal-content-option', {}, [ - h('div.buy-modal-content-option-title', {}, 'Shapeshift'), - h('div.buy-modal-content-option-subtitle', {}, 'Trade any digital asset for any other'), - ]), + h('div', {}, [ + h('input', { + placeholder: 'E.g. My new account' + }, []), + ]), - h('div.buy-modal-content-option', {}, [ - h('div.buy-modal-content-option-title', {}, 'Direct Deposit'), - h('div.buy-modal-content-option-subtitle', {}, 'Deposit from another account'), - ]), + h('div', {}, [ + 'or', + ]), + h('div', {}, [ + 'Import an account', ]), - h('button', { - style: { - background: 'white', - }, - onClick: () => { this.props.hideModal() }, - }, h('div.buy-modal-content-footer#buy-modal-content-footer-text',{}, 'Cancel')), + h('div', {}, [ + h('button.btn-clear', {}, [ + 'SAVE', + ]), + ]), ]) ]) } -- cgit v1.2.3 From b0759ddc1881179edaf27a6cd57e5fb27bdd2c31 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Mon, 21 Aug 2017 12:53:15 -0700 Subject: Hook up send screen action to Send Button in TxView --- ui/app/components/modals/new-account-modal.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/components/modals/new-account-modal.js') diff --git a/ui/app/components/modals/new-account-modal.js b/ui/app/components/modals/new-account-modal.js index 15341a2e9..90a3b7c99 100644 --- a/ui/app/components/modals/new-account-modal.js +++ b/ui/app/components/modals/new-account-modal.js @@ -18,7 +18,7 @@ function mapDispatchToProps (dispatch) { }, hideModal: () => { dispatch(actions.hideModal()) - } + }, } } -- cgit v1.2.3 From 4076496c8ea8c5a771db421b6c6a037c6ad48df1 Mon Sep 17 00:00:00 2001 From: Dan J Miller Date: Thu, 24 Aug 2017 22:01:01 -0230 Subject: Patch 3 new account modal (#1962) * Account details modal styling changes. * Tweaking styles. * New account modal re-styling. * Tweaks to paddings, margins, font sizes, colors and modal dimensions. * Replace colour codes with variables. --- ui/app/components/modals/new-account-modal.js | 19 ++++++++----------- 1 file changed, 8 insertions(+), 11 deletions(-) (limited to 'ui/app/components/modals/new-account-modal.js') diff --git a/ui/app/components/modals/new-account-modal.js b/ui/app/components/modals/new-account-modal.js index 90a3b7c99..c44b79a2e 100644 --- a/ui/app/components/modals/new-account-modal.js +++ b/ui/app/components/modals/new-account-modal.js @@ -33,34 +33,31 @@ NewAccountModal.prototype.render = function () { return h('div', {}, [ h('div.new-account-modal-wrapper', { }, [ - h('div', {}, [ + h('div.new-account-modal-header', {}, [ 'New Account', ]), - h('div', {}, [ - h('i.fa.fa-times', {}, [ - ]), - ]), + h('div.modal-close-x', {}), - h('div', {}, [ + h('div.new-account-modal-content', {}, [ 'Account Name', ]), - h('div', {}, [ - h('input', { + h('div.new-account-input-wrapper', {}, [ + h('input.new-account-input', { placeholder: 'E.g. My new account' }, []), ]), - h('div', {}, [ + h('div.new-account-modal-content', {}, [ 'or', ]), - h('div', {}, [ + h('div.new-account-modal-content.import', {}, [ 'Import an account', ]), - h('div', {}, [ + h('div.new-account-modal-content.button', {}, [ h('button.btn-clear', {}, [ 'SAVE', ]), -- cgit v1.2.3 From e7b3ef0708290a81dad5c469adaa6fab3f1c45b5 Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 29 Aug 2017 12:20:48 -0230 Subject: Lint fixes --- ui/app/components/modals/new-account-modal.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'ui/app/components/modals/new-account-modal.js') diff --git a/ui/app/components/modals/new-account-modal.js b/ui/app/components/modals/new-account-modal.js index c44b79a2e..3caa515cd 100644 --- a/ui/app/components/modals/new-account-modal.js +++ b/ui/app/components/modals/new-account-modal.js @@ -38,14 +38,14 @@ NewAccountModal.prototype.render = function () { ]), h('div.modal-close-x', {}), - + 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' + placeholder: 'E.g. My new account', }, []), ]), @@ -62,6 +62,6 @@ NewAccountModal.prototype.render = function () { 'SAVE', ]), ]), - ]) + ]), ]) } -- cgit v1.2.3 From ab4005cab85755d9f260b9e304ff2eeda81a10a5 Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 6 Sep 2017 14:38:05 -0230 Subject: Tweak styles in new-account-modal. --- ui/app/components/modals/new-account-modal.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'ui/app/components/modals/new-account-modal.js') diff --git a/ui/app/components/modals/new-account-modal.js b/ui/app/components/modals/new-account-modal.js index 3caa515cd..80c70c47f 100644 --- a/ui/app/components/modals/new-account-modal.js +++ b/ui/app/components/modals/new-account-modal.js @@ -49,11 +49,11 @@ NewAccountModal.prototype.render = function () { }, []), ]), - h('div.new-account-modal-content', {}, [ + h('div.new-account-modal-content.after-input', {}, [ 'or', ]), - h('div.new-account-modal-content.import', {}, [ + h('div.new-account-modal-content.after-input', {}, [ 'Import an account', ]), -- cgit v1.2.3 From 5a8433b6cef88996b65108c7faecbaf819fd3b64 Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 6 Sep 2017 14:40:27 -0230 Subject: New account modal top right close button working. --- ui/app/components/modals/new-account-modal.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'ui/app/components/modals/new-account-modal.js') diff --git a/ui/app/components/modals/new-account-modal.js b/ui/app/components/modals/new-account-modal.js index 80c70c47f..8d67762ac 100644 --- a/ui/app/components/modals/new-account-modal.js +++ b/ui/app/components/modals/new-account-modal.js @@ -37,7 +37,9 @@ NewAccountModal.prototype.render = function () { 'New Account', ]), - h('div.modal-close-x', {}), + h('div.modal-close-x', { + onClick: this.props.hideModal, + }), h('div.new-account-modal-content', {}, [ 'Account Name', -- cgit v1.2.3 From b0f1fba2e5fbde573b46a284285985e63f1a3618 Mon Sep 17 00:00:00 2001 From: Dan Date: Fri, 15 Sep 2017 12:39:34 -0230 Subject: Ensures that new accounts are only created from the modal, and not when clicking 'Create New Account' --- ui/app/components/modals/new-account-modal.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) (limited to 'ui/app/components/modals/new-account-modal.js') diff --git a/ui/app/components/modals/new-account-modal.js b/ui/app/components/modals/new-account-modal.js index 8d67762ac..910f3c0ca 100644 --- a/ui/app/components/modals/new-account-modal.js +++ b/ui/app/components/modals/new-account-modal.js @@ -19,6 +19,10 @@ function mapDispatchToProps (dispatch) { hideModal: () => { dispatch(actions.hideModal()) }, + createAccount: () => { + dispatch(actions.addNewAccount()) + dispatch(actions.hideModal()) + }, } } @@ -60,7 +64,9 @@ NewAccountModal.prototype.render = function () { ]), h('div.new-account-modal-content.button', {}, [ - h('button.btn-clear', {}, [ + h('button.btn-clear', { + onClick: this.props.createAccount + }, [ 'SAVE', ]), ]), -- cgit v1.2.3 From a1d72a59fe5b03363820d6e1ac2c383ec15ccbcb Mon Sep 17 00:00:00 2001 From: Dan Date: Fri, 22 Sep 2017 04:29:27 -0230 Subject: New account modal now allows for addition of account name. --- ui/app/components/modals/new-account-modal.js | 20 ++++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) (limited to 'ui/app/components/modals/new-account-modal.js') diff --git a/ui/app/components/modals/new-account-modal.js b/ui/app/components/modals/new-account-modal.js index 910f3c0ca..1adc9e7c7 100644 --- a/ui/app/components/modals/new-account-modal.js +++ b/ui/app/components/modals/new-account-modal.js @@ -8,6 +8,7 @@ function mapStateToProps (state) { return { network: state.metamask.network, address: state.metamask.selectedAddress, + identities: state.metamask.identities, } } @@ -19,9 +20,12 @@ function mapDispatchToProps (dispatch) { hideModal: () => { dispatch(actions.hideModal()) }, - createAccount: () => { - dispatch(actions.addNewAccount()) - dispatch(actions.hideModal()) + createAccount: (identities, newAccountName) => { + dispatch(actions.addNewAccount(identities)) + .then((newAccountAddress) => { + dispatch(actions.saveAccountLabel(newAccountAddress, newAccountName)) + dispatch(actions.hideModal()) + }) }, } } @@ -29,11 +33,18 @@ 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 { identities } = this.props + const { newAccountName } = this.state + return h('div', {}, [ h('div.new-account-modal-wrapper', { }, [ @@ -52,6 +63,7 @@ NewAccountModal.prototype.render = function () { 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 }) }, []), ]), @@ -65,7 +77,7 @@ NewAccountModal.prototype.render = function () { h('div.new-account-modal-content.button', {}, [ h('button.btn-clear', { - onClick: this.props.createAccount + onClick: () => this.props.createAccount(identities, newAccountName) }, [ 'SAVE', ]), -- cgit v1.2.3 From 13f22ff6b087f3865f84a0672a9013ada88be61a Mon Sep 17 00:00:00 2001 From: Dan Date: Fri, 22 Sep 2017 18:30:00 -0230 Subject: get identities from getState() instead of passing from caller, only set new account label if label set. --- ui/app/components/modals/new-account-modal.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) (limited to 'ui/app/components/modals/new-account-modal.js') diff --git a/ui/app/components/modals/new-account-modal.js b/ui/app/components/modals/new-account-modal.js index 1adc9e7c7..25beb6745 100644 --- a/ui/app/components/modals/new-account-modal.js +++ b/ui/app/components/modals/new-account-modal.js @@ -8,7 +8,6 @@ function mapStateToProps (state) { return { network: state.metamask.network, address: state.metamask.selectedAddress, - identities: state.metamask.identities, } } @@ -20,10 +19,12 @@ function mapDispatchToProps (dispatch) { hideModal: () => { dispatch(actions.hideModal()) }, - createAccount: (identities, newAccountName) => { - dispatch(actions.addNewAccount(identities)) + createAccount: (newAccountName) => { + dispatch(actions.addNewAccount()) .then((newAccountAddress) => { - dispatch(actions.saveAccountLabel(newAccountAddress, newAccountName)) + if (newAccountName) { + dispatch(actions.saveAccountLabel(newAccountAddress, newAccountName)) + } dispatch(actions.hideModal()) }) }, @@ -42,7 +43,6 @@ function NewAccountModal () { module.exports = connect(mapStateToProps, mapDispatchToProps)(NewAccountModal) NewAccountModal.prototype.render = function () { - const { identities } = this.props const { newAccountName } = this.state return h('div', {}, [ @@ -77,7 +77,7 @@ NewAccountModal.prototype.render = function () { h('div.new-account-modal-content.button', {}, [ h('button.btn-clear', { - onClick: () => this.props.createAccount(identities, newAccountName) + onClick: () => this.props.createAccount(newAccountName) }, [ 'SAVE', ]), -- cgit v1.2.3 From 39d4fe311f694a659d1d1454159417719d552b9d Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Wed, 25 Oct 2017 14:36:12 -0700 Subject: Fix Import an Account link not working in Create Account modal --- ui/app/components/modals/new-account-modal.js | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) (limited to 'ui/app/components/modals/new-account-modal.js') diff --git a/ui/app/components/modals/new-account-modal.js b/ui/app/components/modals/new-account-modal.js index 25beb6745..b78de1d8d 100644 --- a/ui/app/components/modals/new-account-modal.js +++ b/ui/app/components/modals/new-account-modal.js @@ -28,6 +28,7 @@ function mapDispatchToProps (dispatch) { dispatch(actions.hideModal()) }) }, + showImportPage: () => dispatch(actions.showImportPage()), } } @@ -36,7 +37,7 @@ function NewAccountModal () { Component.call(this) this.state = { - newAccountName: '' + newAccountName: '', } } @@ -63,7 +64,7 @@ NewAccountModal.prototype.render = function () { 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 }) + onChange: event => this.setState({ newAccountName: event.target.value }), }, []), ]), @@ -71,13 +72,16 @@ NewAccountModal.prototype.render = function () { 'or', ]), - h('div.new-account-modal-content.after-input', {}, [ - 'Import an account', - ]), + 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) + onClick: () => this.props.createAccount(newAccountName), }, [ 'SAVE', ]), -- cgit v1.2.3 From 5d8b53bcf491bfe6dd59f4986f02da70b91df5cd Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Thu, 26 Oct 2017 11:36:13 -0700 Subject: Provide default new account name --- ui/app/components/modals/new-account-modal.js | 141 ++++++++++++++------------ 1 file changed, 78 insertions(+), 63 deletions(-) (limited to 'ui/app/components/modals/new-account-modal.js') 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', - ]), - ]), - ]), - ]) -} -- cgit v1.2.3 From 99898ac77594d8fe6d4d2aa5bc3e3ba6492f4a10 Mon Sep 17 00:00:00 2001 From: Nick Doiron Date: Tue, 23 Jan 2018 22:14:47 -1000 Subject: better organization of locale file; i18n in more view files --- ui/app/components/modals/new-account-modal.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) (limited to 'ui/app/components/modals/new-account-modal.js') diff --git a/ui/app/components/modals/new-account-modal.js b/ui/app/components/modals/new-account-modal.js index fc1fd413d..4fdfbd745 100644 --- a/ui/app/components/modals/new-account-modal.js +++ b/ui/app/components/modals/new-account-modal.js @@ -22,7 +22,7 @@ class NewAccountModal extends Component { h('div.new-account-modal-wrapper', { }, [ h('div.new-account-modal-header', {}, [ - 'New Account', + t('newAccount'), ]), h('div.modal-close-x', { @@ -30,19 +30,19 @@ class NewAccountModal extends Component { }), h('div.new-account-modal-content', {}, [ - 'Account Name', + t('accountName'), ]), h('div.new-account-input-wrapper', {}, [ h('input.new-account-input', { value: this.state.newAccountName, - placeholder: 'E.g. My new account', + placeholder: t('sampleAccountName'), onChange: event => this.setState({ newAccountName: event.target.value }), }, []), ]), h('div.new-account-modal-content.after-input', {}, [ - 'or', + t('or'), ]), h('div.new-account-modal-content.after-input.pointer', { @@ -50,13 +50,13 @@ class NewAccountModal extends Component { this.props.hideModal() this.props.showImportPage() }, - }, 'Import an account'), + }, t('importAnAccount')), h('div.new-account-modal-content.button', {}, [ h('button.btn-clear', { onClick: () => this.props.createAccount(newAccountName), }, [ - 'SAVE', + t('saveCaps'), ]), ]), ]), -- cgit v1.2.3 From 7da52c599784130a5f7b6737f5b017bd3a95c1ed Mon Sep 17 00:00:00 2001 From: Nick Doiron Date: Wed, 24 Jan 2018 10:10:28 -1000 Subject: separate out cross-browser i18n for extensions --- ui/app/components/modals/new-account-modal.js | 1 + 1 file changed, 1 insertion(+) (limited to 'ui/app/components/modals/new-account-modal.js') diff --git a/ui/app/components/modals/new-account-modal.js b/ui/app/components/modals/new-account-modal.js index 4fdfbd745..35f4764a6 100644 --- a/ui/app/components/modals/new-account-modal.js +++ b/ui/app/components/modals/new-account-modal.js @@ -3,6 +3,7 @@ const PropTypes = require('prop-types') const h = require('react-hyperscript') const { connect } = require('react-redux') const actions = require('../../actions') +const t = require('../../../i18n') class NewAccountModal extends Component { constructor (props) { -- cgit v1.2.3 From abfa74f09a0119345165a32090d88a1d95df6c80 Mon Sep 17 00:00:00 2001 From: Nick Doiron Date: Mon, 29 Jan 2018 15:29:01 -0500 Subject: complete i18n across new UI --- ui/app/components/modals/new-account-modal.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'ui/app/components/modals/new-account-modal.js') diff --git a/ui/app/components/modals/new-account-modal.js b/ui/app/components/modals/new-account-modal.js index 35f4764a6..298b76af4 100644 --- a/ui/app/components/modals/new-account-modal.js +++ b/ui/app/components/modals/new-account-modal.js @@ -12,7 +12,7 @@ class NewAccountModal extends Component { const newAccountNumber = numberOfExistingAccounts + 1 this.state = { - newAccountName: `Account ${newAccountNumber}`, + newAccountName: `${t('account')} ${newAccountNumber}`, } } @@ -53,11 +53,11 @@ class NewAccountModal extends Component { }, }, t('importAnAccount')), - h('div.new-account-modal-content.button', {}, [ + h('div.new-account-modal-content.button.allcaps', {}, [ h('button.btn-clear', { onClick: () => this.props.createAccount(newAccountName), }, [ - t('saveCaps'), + t('save'), ]), ]), ]), -- cgit v1.2.3