From 71b2dd290b2bbf3107d06d0616ec8858d21b44da Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 20 Aug 2017 19:10:49 -0700 Subject: Enhance global modal to handle Buy, Edit, and Details Modals --- .../components/modals/edit-account-name-modal.js | 80 ++++++++++++++++++++++ 1 file changed, 80 insertions(+) create mode 100644 ui/app/components/modals/edit-account-name-modal.js (limited to 'ui/app/components/modals/edit-account-name-modal.js') diff --git a/ui/app/components/modals/edit-account-name-modal.js b/ui/app/components/modals/edit-account-name-modal.js new file mode 100644 index 000000000..5d2d2e120 --- /dev/null +++ b/ui/app/components/modals/edit-account-name-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: {}, + }, 'Edit Account Name 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 --- .../components/modals/edit-account-name-modal.js | 85 ++++++++++------------ 1 file changed, 40 insertions(+), 45 deletions(-) (limited to 'ui/app/components/modals/edit-account-name-modal.js') diff --git a/ui/app/components/modals/edit-account-name-modal.js b/ui/app/components/modals/edit-account-name-modal.js index 5d2d2e120..0128fe412 100644 --- a/ui/app/components/modals/edit-account-name-modal.js +++ b/ui/app/components/modals/edit-account-name-modal.js @@ -3,78 +3,73 @@ const h = require('react-hyperscript') const inherits = require('util').inherits const connect = require('react-redux').connect const actions = require('../../actions') +const { getSelectedAccount } = require('../../selectors') function mapStateToProps (state) { return { - network: state.metamask.network, - address: state.metamask.selectedAddress, + selectedAccount: getSelectedAccount(state), + identity: state.appState.modal.modalState.identity, } } function mapDispatchToProps (dispatch) { return { - toCoinbase: (address) => { - dispatch(actions.buyEth({ network: '1', address, amount: 0 })) - }, hideModal: () => { dispatch(actions.hideModal()) - } + }, + saveAccountLabel: (account, label) => { + dispatch(actions.saveAccountLabel(account, label)) + }, } } -inherits(BuyOptions, Component) -function BuyOptions () { +inherits(EditAccountNameModal, Component) +function EditAccountNameModal () { Component.call(this) + this.state = { + inputText: '', + } } -module.exports = connect(mapStateToProps, mapDispatchToProps)(BuyOptions) +module.exports = connect(mapStateToProps, mapDispatchToProps)(EditAccountNameModal) -// BuyOptions is currently meant to be rendered inside +// EditAccountNameModal 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 () { +EditAccountNameModal.prototype.render = function () { + const { hideModal, saveAccountLabel, identity } = this.props + return h('div', {}, [ - h('div.modal-content.transfers-subview', { + h('div.flex-column.edit-account-name-modal-content', { }, [ - h('div.modal-content-title-wrapper.flex-column.flex-center', { - style: {}, - }, [ - h('div.modal-content-title', { - style: {}, - }, 'Edit Account Name 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.edit-account-name-modal-cancel', {}, [ + h('i.fa.fa-times'), + ]), - 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.edit-account-name-modal-title', { + }, ['Edit Account Name']), - h('div.modal-content-option', {}, [ - h('div.modal-content-option-title', {}, 'Direct Deposit'), - h('div.modal-content-option-subtitle', {}, 'Deposit from another account'), - ]), + h('input.edit-account-name-modal-input', { + placeholder: identity.name, + onChange: (event) => { + this.setState({ inputText: event.target.value }) + }, + value: this.state.inputText, + }, []), + h('button.btn-clear.edit-account-name-modal-save-button', { + onClick: () => { + if (this.state.inputText.length !== 0) { + saveAccountLabel(identity.address, this.state.inputText) + hideModal() + } + }, + disabled: this.state.inputText.length === 0, + }, [ + 'SAVE', ]), - h('button', { - style: { - background: 'white', - }, - onClick: () => { this.props.hideModal() }, - }, h('div.modal-content-footer#modal-content-footer-text',{}, 'Cancel')), ]) ]) } -- cgit v1.2.3 From 3fa7c5dc0814bce907c7adbd6e39e1759186120c Mon Sep 17 00:00:00 2001 From: sdtsui Date: Mon, 21 Aug 2017 04:53:30 -0700 Subject: Hook up hideModal action to close icon in EditAccountNameModal --- ui/app/components/modals/edit-account-name-modal.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'ui/app/components/modals/edit-account-name-modal.js') diff --git a/ui/app/components/modals/edit-account-name-modal.js b/ui/app/components/modals/edit-account-name-modal.js index 0128fe412..cff8b2a58 100644 --- a/ui/app/components/modals/edit-account-name-modal.js +++ b/ui/app/components/modals/edit-account-name-modal.js @@ -43,7 +43,11 @@ EditAccountNameModal.prototype.render = function () { h('div.flex-column.edit-account-name-modal-content', { }, [ - h('div.edit-account-name-modal-cancel', {}, [ + h('div.edit-account-name-modal-cancel', { + onClick: () => { + hideModal() + }, + }, [ h('i.fa.fa-times'), ]), -- cgit v1.2.3 From 27b75b67b42c232051660c33da976d64a63ff407 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Mon, 21 Aug 2017 12:26:36 -0700 Subject: Hook up identicon and buttons to AccountDetailsModal, clean up colors --- ui/app/components/modals/edit-account-name-modal.js | 3 --- 1 file changed, 3 deletions(-) (limited to 'ui/app/components/modals/edit-account-name-modal.js') diff --git a/ui/app/components/modals/edit-account-name-modal.js b/ui/app/components/modals/edit-account-name-modal.js index cff8b2a58..ae5ca23d4 100644 --- a/ui/app/components/modals/edit-account-name-modal.js +++ b/ui/app/components/modals/edit-account-name-modal.js @@ -33,9 +33,6 @@ function EditAccountNameModal () { module.exports = connect(mapStateToProps, mapDispatchToProps)(EditAccountNameModal) -// EditAccountNameModal is currently meant to be rendered inside -// It is the only component in this codebase that does so -// It utilizes modal styles EditAccountNameModal.prototype.render = function () { const { hideModal, saveAccountLabel, identity } = this.props -- 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/edit-account-name-modal.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/components/modals/edit-account-name-modal.js') diff --git a/ui/app/components/modals/edit-account-name-modal.js b/ui/app/components/modals/edit-account-name-modal.js index ae5ca23d4..5c25ac245 100644 --- a/ui/app/components/modals/edit-account-name-modal.js +++ b/ui/app/components/modals/edit-account-name-modal.js @@ -71,6 +71,6 @@ EditAccountNameModal.prototype.render = function () { 'SAVE', ]), - ]) + ]), ]) } -- cgit v1.2.3 From 49aa6e73eadc5b343353c4312afc1e3b40dc18df Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 4 Oct 2017 21:01:12 -0230 Subject: Edit account modal shows and allows editing of name from props, not just placeholder. --- ui/app/components/modals/edit-account-name-modal.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'ui/app/components/modals/edit-account-name-modal.js') diff --git a/ui/app/components/modals/edit-account-name-modal.js b/ui/app/components/modals/edit-account-name-modal.js index 5c25ac245..e2361140d 100644 --- a/ui/app/components/modals/edit-account-name-modal.js +++ b/ui/app/components/modals/edit-account-name-modal.js @@ -24,10 +24,11 @@ function mapDispatchToProps (dispatch) { } inherits(EditAccountNameModal, Component) -function EditAccountNameModal () { +function EditAccountNameModal (props) { Component.call(this) + this.state = { - inputText: '', + inputText: props.identity.name, } } -- cgit v1.2.3