From 25184a3901f96e3c4fea94ed0bd135fbe7597148 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 13 Aug 2017 10:24:51 -0700 Subject: Move global modals into own pod, inside components/modals --- ui/app/components/modals/buy-modal.js | 27 +++++++++ ui/app/components/modals/index.js | 9 +++ ui/app/components/modals/modal.js | 100 ++++++++++++++++++++++++++++++++++ 3 files changed, 136 insertions(+) create mode 100644 ui/app/components/modals/buy-modal.js create mode 100644 ui/app/components/modals/index.js create mode 100644 ui/app/components/modals/modal.js (limited to 'ui/app/components/modals') diff --git a/ui/app/components/modals/buy-modal.js b/ui/app/components/modals/buy-modal.js new file mode 100644 index 000000000..c1bf1d0df --- /dev/null +++ b/ui/app/components/modals/buy-modal.js @@ -0,0 +1,27 @@ +const Component = require('react').Component +const h = require('react-hyperscript') +const inherits = require('util').inherits +const connect = require('react-redux').connect +const FadeModal = require('boron').FadeModal +const actions = require('../../actions') +const isMobileView = require('../../../lib/is-mobile-view') +const isPopupOrNotification = require('../../../../app/scripts/lib/is-popup-or-notification') +const BuyOptions = require('../buy-options') + +inherits(BuyModal, Component) +function BuyModal () { + Component.call(this) +} + +module.exports = BuyModal + +BuyModal.prototype.render = function () { + return h(BuyModal, { + ref: "modalRef", + }, [ + h(BuyOptions, {}, []), + ]) + +} + +// TODO: specify default props and proptypes diff --git a/ui/app/components/modals/index.js b/ui/app/components/modals/index.js new file mode 100644 index 000000000..23b432b7c --- /dev/null +++ b/ui/app/components/modals/index.js @@ -0,0 +1,9 @@ +const Modal = require('./modal') +const BuyModal = require('./buy-modal') +// const h = require('account-options') +// const h = require('account-details') + +module.exports = { + Modal, + BuyModal, +} \ No newline at end of file diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js new file mode 100644 index 000000000..006e009b3 --- /dev/null +++ b/ui/app/components/modals/modal.js @@ -0,0 +1,100 @@ +const Component = require('react').Component +const h = require('react-hyperscript') +const inherits = require('util').inherits +const connect = require('react-redux').connect +const FadeModal = require('boron').FadeModal +const actions = require('../../actions') +const isMobileView = require('../../../lib/is-mobile-view') +const isPopupOrNotification = require('../../../../app/scripts/lib/is-popup-or-notification') + +function mapStateToProps (state) { + return { + active: state.appState.modalOpen + } +} + +function mapDispatchToProps (dispatch) { + return { + hideModal: () => { + dispatch(actions.hideModal()) + }, + } +} + +// Global Modal Component +inherits(Modal, Component) +function Modal () { + Component.call(this) +} + +module.exports = connect(mapStateToProps, mapDispatchToProps)(Modal) + +const mobileModalStyles = { + width: '95%', + // Used to create matching t/l/r/b space in mobile view. + top: isPopupOrNotification() === 'popup' ? '48vh' : '36.5vh', + boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px', +} + +const laptopModalStyles = { + width: '66%', + top: 'calc(30% + 10px)', + boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px', +} + +const backdropStyles = { + backgroundColor: 'rgba(245, 245, 245, 0.85)', +} + +Modal.prototype.render = function () { + + return h(FadeModal, + { + className: 'modal', + keyboard: false, + onHide: () => {this.onHide()}, + ref: (ref) => { + this.modalRef = ref + }, + modalStyle: isMobileView() ? mobileModalStyles : laptopModalStyles, + backdropStyle: backdropStyles, + }, + this.props.children, + ) +} + +Modal.prototype.componentWillReceiveProps = function(nextProps) { + if (nextProps.active) { + this.show() + } else if (this.props.active) { + this.hide() + } +} + +Modal.prototype.onHide = function() { + if (this.props.onHideCallback) { + this.props.onHideCallback() + } + this.props.hideModal() +} + +Modal.prototype.hide = function() { + this.modalRef.hide() +} + +Modal.prototype.show = function() { + this.modalRef.show() +} + +// TODO: specify default props and proptypes +// Modal.defaultProps = {} + +// const elementType = require('react-prop-types/lib/elementType') +// const PropTypes from 'prop-types' + +// Modal.propTypes = { +// active: PropTypes.bool, +// hideModal: PropTypes.func.isRequired, +// component: elementType, +// onHideCallback: PropTypes.func, +// } -- cgit From e39c600a45a4cf28b5429231dd6c57442d467075 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 13 Aug 2017 10:49:41 -0700 Subject: [WIP] Extract network dropdown out of main app render function --- ui/app/components/modals/buy-modal.js | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) (limited to 'ui/app/components/modals') diff --git a/ui/app/components/modals/buy-modal.js b/ui/app/components/modals/buy-modal.js index c1bf1d0df..9a3e4dff9 100644 --- a/ui/app/components/modals/buy-modal.js +++ b/ui/app/components/modals/buy-modal.js @@ -1,12 +1,8 @@ const Component = require('react').Component const h = require('react-hyperscript') const inherits = require('util').inherits -const connect = require('react-redux').connect -const FadeModal = require('boron').FadeModal -const actions = require('../../actions') -const isMobileView = require('../../../lib/is-mobile-view') -const isPopupOrNotification = require('../../../../app/scripts/lib/is-popup-or-notification') const BuyOptions = require('../buy-options') +const Modal = require('./modal.js') inherits(BuyModal, Component) function BuyModal () { @@ -16,7 +12,7 @@ function BuyModal () { module.exports = BuyModal BuyModal.prototype.render = function () { - return h(BuyModal, { + return h(Modal, { ref: "modalRef", }, [ h(BuyOptions, {}, []), -- cgit From 99be6e17caee1371eec86bd3232fc0d4600979cf Mon Sep 17 00:00:00 2001 From: sdtsui Date: Tue, 15 Aug 2017 05:46:41 +0200 Subject: [WiP] Add comments for multiple modals --- ui/app/components/modals/buy-modal.js | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) (limited to 'ui/app/components/modals') diff --git a/ui/app/components/modals/buy-modal.js b/ui/app/components/modals/buy-modal.js index 9a3e4dff9..c69433b1f 100644 --- a/ui/app/components/modals/buy-modal.js +++ b/ui/app/components/modals/buy-modal.js @@ -21,3 +21,23 @@ BuyModal.prototype.render = function () { } // TODO: specify default props and proptypes + +// Generalize to multiple modals: +// Modal API: +// - props { +// key: ['BUY', 'EDIT_ACCOUNT_NAME', 'ACCOUNT_DETAILS'] +// } +// - These props will be passed as 'active' +// mapStateToProps(state, ownProps) { +// active: state.appState.modal[key] +// } +// - Modal accepts: +// - mobileModalStyles, for mobile viewports +// - laptopModalStyles, for laptop viewports +// - backdropStyles +// - Do not set defaults, they are unneeded here +// +// If multiple-step modals are needed: +// - pass a component with internal state that tracks buy steps +// - steps could technically be in redux +// - it renders and does not trigger open/close actions until done \ No newline at end of file -- cgit From 4e9376ca7129611d12a7ec263741f1dee0e4d79c Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 20 Aug 2017 18:32:58 -0700 Subject: Extend modal implementation and state management to accomodate multiple modal types --- ui/app/components/modals/modal.js | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) (limited to 'ui/app/components/modals') diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js index 006e009b3..45aa09095 100644 --- a/ui/app/components/modals/modal.js +++ b/ui/app/components/modals/modal.js @@ -6,10 +6,20 @@ const FadeModal = require('boron').FadeModal const actions = require('../../actions') const isMobileView = require('../../../lib/is-mobile-view') const isPopupOrNotification = require('../../../../app/scripts/lib/is-popup-or-notification') +const BuyOptions = require('../buy-options') + +const MODALS = { + BUY: [ + h(BuyOptions, {}, []), + ], + EDIT_ACCOUNT_NAME: [], + ACCOUNT_DETAILS: [], +} function mapStateToProps (state) { return { - active: state.appState.modalOpen + active: state.appState.modal.open, + modalState: state.appState.modal.modalState, } } @@ -48,6 +58,8 @@ const backdropStyles = { Modal.prototype.render = function () { + const children = MODALS[this.props.modalState.name] || [] + return h(FadeModal, { className: 'modal', @@ -59,7 +71,7 @@ Modal.prototype.render = function () { modalStyle: isMobileView() ? mobileModalStyles : laptopModalStyles, backdropStyle: backdropStyles, }, - this.props.children, + children, ) } -- cgit 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 --- ui/app/components/modals/account-details-modal.js | 73 ++++++++++++++++++++ ui/app/components/modals/buy-modal.js | 43 ------------ ui/app/components/modals/buy-options-modal.js | 80 ++++++++++++++++++++++ .../components/modals/edit-account-name-modal.js | 80 ++++++++++++++++++++++ ui/app/components/modals/index.js | 4 -- ui/app/components/modals/modal.js | 14 +++- 6 files changed, 244 insertions(+), 50 deletions(-) create mode 100644 ui/app/components/modals/account-details-modal.js delete mode 100644 ui/app/components/modals/buy-modal.js create mode 100644 ui/app/components/modals/buy-options-modal.js create mode 100644 ui/app/components/modals/edit-account-name-modal.js (limited to 'ui/app/components/modals') diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js new file mode 100644 index 000000000..45f54908f --- /dev/null +++ b/ui/app/components/modals/account-details-modal.js @@ -0,0 +1,73 @@ +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 { + address: state.metamask.selectedAddress, + } +} + +function mapDispatchToProps (dispatch) { + return { + hideModal: () => { + dispatch(actions.hideModal()) + } + } +} + +inherits(AccountDetailsModal, Component) +function AccountDetailsModal () { + Component.call(this) +} + +module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountDetailsModal) + +// AccountDetailsModal is currently meant to be rendered inside +// It is the only component in this codebase that does so +// It utilizes modal styles +AccountDetailsModal.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: {}, + }, 'Account Details 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: () => {}, + }, [ + 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')), + ]) + ]) +} diff --git a/ui/app/components/modals/buy-modal.js b/ui/app/components/modals/buy-modal.js deleted file mode 100644 index c69433b1f..000000000 --- a/ui/app/components/modals/buy-modal.js +++ /dev/null @@ -1,43 +0,0 @@ -const Component = require('react').Component -const h = require('react-hyperscript') -const inherits = require('util').inherits -const BuyOptions = require('../buy-options') -const Modal = require('./modal.js') - -inherits(BuyModal, Component) -function BuyModal () { - Component.call(this) -} - -module.exports = BuyModal - -BuyModal.prototype.render = function () { - return h(Modal, { - ref: "modalRef", - }, [ - h(BuyOptions, {}, []), - ]) - -} - -// TODO: specify default props and proptypes - -// Generalize to multiple modals: -// Modal API: -// - props { -// key: ['BUY', 'EDIT_ACCOUNT_NAME', 'ACCOUNT_DETAILS'] -// } -// - These props will be passed as 'active' -// mapStateToProps(state, ownProps) { -// active: state.appState.modal[key] -// } -// - Modal accepts: -// - mobileModalStyles, for mobile viewports -// - laptopModalStyles, for laptop viewports -// - backdropStyles -// - Do not set defaults, they are unneeded here -// -// If multiple-step modals are needed: -// - pass a component with internal state that tracks buy steps -// - steps could technically be in redux -// - it renders and does not trigger open/close actions until done \ No newline at end of file diff --git a/ui/app/components/modals/buy-options-modal.js b/ui/app/components/modals/buy-options-modal.js new file mode 100644 index 000000000..170ac96b8 --- /dev/null +++ b/ui/app/components/modals/buy-options-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: {}, + }, 'Transfers'), + 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')), + ]) + ]) +} 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')), + ]) + ]) +} diff --git a/ui/app/components/modals/index.js b/ui/app/components/modals/index.js index 23b432b7c..e2e367af0 100644 --- a/ui/app/components/modals/index.js +++ b/ui/app/components/modals/index.js @@ -1,9 +1,5 @@ const Modal = require('./modal') -const BuyModal = require('./buy-modal') -// const h = require('account-options') -// const h = require('account-details') module.exports = { Modal, - BuyModal, } \ No newline at end of file diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js index 45aa09095..04a34cfed 100644 --- a/ui/app/components/modals/modal.js +++ b/ui/app/components/modals/modal.js @@ -6,14 +6,22 @@ const FadeModal = require('boron').FadeModal const actions = require('../../actions') const isMobileView = require('../../../lib/is-mobile-view') const isPopupOrNotification = require('../../../../app/scripts/lib/is-popup-or-notification') -const BuyOptions = require('../buy-options') + +// Modal Components +const BuyOptions = require('./buy-options-modal') +const AccountDetailsModal = require('./account-details-modal') +const EditAccountNameModal = require('./edit-account-name-modal') const MODALS = { BUY: [ h(BuyOptions, {}, []), ], - EDIT_ACCOUNT_NAME: [], - ACCOUNT_DETAILS: [], + EDIT_ACCOUNT_NAME: [ + h(AccountDetailsModal, {}, []), + ], + ACCOUNT_DETAILS: [ + h(EditAccountNameModal, {}, []), + ], } function mapStateToProps (state) { -- cgit 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/modal.js | 4 ++ ui/app/components/modals/new-account-modal.js | 80 +++++++++++++++++++++++++++ 2 files changed, 84 insertions(+) create mode 100644 ui/app/components/modals/new-account-modal.js (limited to 'ui/app/components/modals') diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js index 04a34cfed..4b3d3b09c 100644 --- a/ui/app/components/modals/modal.js +++ b/ui/app/components/modals/modal.js @@ -11,6 +11,7 @@ const isPopupOrNotification = require('../../../../app/scripts/lib/is-popup-or-n const BuyOptions = require('./buy-options-modal') const AccountDetailsModal = require('./account-details-modal') const EditAccountNameModal = require('./edit-account-name-modal') +const NewAccountModal = require('./new-account-modal') const MODALS = { BUY: [ @@ -22,6 +23,9 @@ const MODALS = { ACCOUNT_DETAILS: [ h(EditAccountNameModal, {}, []), ], + NEW_ACCOUNT: [ + h(NewAccountModal, {}, []), + ] } function mapStateToProps (state) { 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 From 66829b7a05322320855b077c04f885908bd95efa Mon Sep 17 00:00:00 2001 From: sdtsui Date: Mon, 21 Aug 2017 03:27:11 -0700 Subject: Implement new dropdown design, integrate account balances --- ui/app/components/modals/modal.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'ui/app/components/modals') diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js index 4b3d3b09c..77391dfcc 100644 --- a/ui/app/components/modals/modal.js +++ b/ui/app/components/modals/modal.js @@ -18,10 +18,10 @@ const MODALS = { h(BuyOptions, {}, []), ], EDIT_ACCOUNT_NAME: [ - h(AccountDetailsModal, {}, []), + h(EditAccountNameModal, {}, []), ], ACCOUNT_DETAILS: [ - h(EditAccountNameModal, {}, []), + h(AccountDetailsModal, {}, []), ], NEW_ACCOUNT: [ h(NewAccountModal, {}, []), -- cgit From 80a2cba38ef4fe6c01a624c5a504a7803b1a8316 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Mon, 21 Aug 2017 03:53:01 -0700 Subject: Enhance global modal to accept styles from different components --- ui/app/components/modals/modal.js | 107 ++++++++++++++++++++++---------------- 1 file changed, 62 insertions(+), 45 deletions(-) (limited to 'ui/app/components/modals') diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js index 77391dfcc..e2c5f77cc 100644 --- a/ui/app/components/modals/modal.js +++ b/ui/app/components/modals/modal.js @@ -14,18 +14,63 @@ const EditAccountNameModal = require('./edit-account-name-modal') const NewAccountModal = require('./new-account-modal') const MODALS = { - BUY: [ - h(BuyOptions, {}, []), - ], - EDIT_ACCOUNT_NAME: [ - h(EditAccountNameModal, {}, []), - ], - ACCOUNT_DETAILS: [ - h(AccountDetailsModal, {}, []), - ], - NEW_ACCOUNT: [ - h(NewAccountModal, {}, []), - ] + BUY: { + contents: [ + h(BuyOptions, {}, []), + ], + mobileModalStyle: { + width: '95%', + top: isPopupOrNotification() === 'popup' ? '48vh' : '36.5vh', + boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px', + }, + laptopModalStyle: { + width: '66%', + top: 'calc(30% + 10px)', + boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px', + }, + }, + + EDIT_ACCOUNT_NAME: { + contents: [ + h(EditAccountNameModal, {}, []), + ], + mobileModalStyle: { + width: '95%', + top: isPopupOrNotification() === 'popup' ? '48vh' : '36.5vh', + boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px', + }, + laptopModalStyle: { + width: '45%', + top: 'calc(30% + 10px)', + boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px', + }, + }, + + ACCOUNT_DETAILS: { + contents: [ + h(AccountDetailsModal, {}, []), + ], + mobileModalStyle: {}, + laptopModalStyle: {}, + }, + + NEW_ACCOUNT: { + contents: [ + h(NewAccountModal, {}, []), + ], + mobileModalStyle: {}, + laptopModalStyle: {} + }, + + DEFAULT: { + contents: [], + mobileModalStyle: {}, + laptopModalStyle: {}, + } +} + +const BACKDROPSTYLE = { + backgroundColor: 'rgba(245, 245, 245, 0.85)', } function mapStateToProps (state) { @@ -51,26 +96,11 @@ function Modal () { module.exports = connect(mapStateToProps, mapDispatchToProps)(Modal) -const mobileModalStyles = { - width: '95%', - // Used to create matching t/l/r/b space in mobile view. - top: isPopupOrNotification() === 'popup' ? '48vh' : '36.5vh', - boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px', -} - -const laptopModalStyles = { - width: '66%', - top: 'calc(30% + 10px)', - boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px', -} - -const backdropStyles = { - backgroundColor: 'rgba(245, 245, 245, 0.85)', -} - Modal.prototype.render = function () { + const modal = MODALS[this.props.modalState.name || 'DEFAULT'] - const children = MODALS[this.props.modalState.name] || [] + const children = modal.contents + const modalStyle = modal[isMobileView() ? 'mobileModalStyle' : 'laptopModalStyle'] return h(FadeModal, { @@ -80,8 +110,8 @@ Modal.prototype.render = function () { ref: (ref) => { this.modalRef = ref }, - modalStyle: isMobileView() ? mobileModalStyles : laptopModalStyles, - backdropStyle: backdropStyles, + modalStyle, + backdropStyle: BACKDROPSTYLE, }, children, ) @@ -109,16 +139,3 @@ Modal.prototype.hide = function() { Modal.prototype.show = function() { this.modalRef.show() } - -// TODO: specify default props and proptypes -// Modal.defaultProps = {} - -// const elementType = require('react-prop-types/lib/elementType') -// const PropTypes from 'prop-types' - -// Modal.propTypes = { -// active: PropTypes.bool, -// hideModal: PropTypes.func.isRequired, -// component: elementType, -// onHideCallback: PropTypes.func, -// } -- cgit 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/account-details-modal.js | 28 +++---- ui/app/components/modals/buy-options-modal.js | 28 +++---- .../components/modals/edit-account-name-modal.js | 85 ++++++++++------------ ui/app/components/modals/new-account-modal.js | 28 +++---- 4 files changed, 82 insertions(+), 87 deletions(-) (limited to 'ui/app/components/modals') diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js index 45f54908f..38d08314b 100644 --- a/ui/app/components/modals/account-details-modal.js +++ b/ui/app/components/modals/account-details-modal.js @@ -30,34 +30,34 @@ module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountDetailsModa // It utilizes modal styles AccountDetailsModal.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: {}, }, 'Account Details 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: () => {}, }, [ - 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'), ]), ]), @@ -67,7 +67,7 @@ AccountDetailsModal.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')), ]) ]) } diff --git a/ui/app/components/modals/buy-options-modal.js b/ui/app/components/modals/buy-options-modal.js index 170ac96b8..76e0da4f1 100644 --- a/ui/app/components/modals/buy-options-modal.js +++ b/ui/app/components/modals/buy-options-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: {}, }, 'Transfers'), 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')), ]) ]) } 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')), ]) ]) } 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 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') 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 From 35508a28984afeccac31eb7c6789e26681f02b22 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Mon, 21 Aug 2017 05:58:30 -0700 Subject: Add wrapper CSS for AccountDetailsModal --- ui/app/components/modals/account-details-modal.js | 54 +++++++++++------------ ui/app/components/modals/modal.js | 14 ++++-- 2 files changed, 36 insertions(+), 32 deletions(-) (limited to 'ui/app/components/modals') diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js index 38d08314b..104d2c6ed 100644 --- a/ui/app/components/modals/account-details-modal.js +++ b/ui/app/components/modals/account-details-modal.js @@ -30,44 +30,40 @@ module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountDetailsModa // It utilizes modal styles AccountDetailsModal.prototype.render = function () { return h('div', {}, [ - h('div.buy-modal-content.transfers-subview', { + h('div.account-details-modal-wrapper', { }, [ - h('div.buy-modal-content-title-wrapper.flex-column.flex-center', { - style: {}, - }, [ - h('div.buy-modal-content-title', { - style: {}, - }, 'Account Details Modal'), - h('div', {}, 'How would you like to buy Ether?'), + + h('div', {}, [ + 'ICON', ]), - h('div.buy-modal-content-options.flex-column.flex-center', {}, [ + h('div', {}, [ + 'X', + ]), - h('div.buy-modal-content-option', { - onClick: () => {}, - }, [ - h('div.buy-modal-content-option-title', {}, 'Coinbase'), - h('div.buy-modal-content-option-subtitle', {}, 'Buy with Fiat'), - ]), + h('div', {}, [ + ]), - 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', {}, [ + 'QR Code', + ]), - 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', {}, [ + 'Account Display', + ]), + + h('div', {}, [ + 'divider', + ]), + + h('div', {}, [ + 'View aCcount on etherscan', + ]), + h('div', {}, [ + 'export private key', ]), - h('button', { - style: { - background: 'white', - }, - onClick: () => { this.props.hideModal() }, - }, h('div.buy-modal-content-footer#buy-modal-content-footer-text',{}, 'Cancel')), ]) ]) } diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js index e2c5f77cc..842c4ed51 100644 --- a/ui/app/components/modals/modal.js +++ b/ui/app/components/modals/modal.js @@ -40,7 +40,7 @@ const MODALS = { boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px', }, laptopModalStyle: { - width: '45%', + width: '375px', top: 'calc(30% + 10px)', boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px', }, @@ -50,8 +50,16 @@ const MODALS = { contents: [ h(AccountDetailsModal, {}, []), ], - mobileModalStyle: {}, - laptopModalStyle: {}, + mobileModalStyle: { + width: '95%', + top: isPopupOrNotification() === 'popup' ? '48vh' : '36.5vh', + boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px', + }, + laptopModalStyle: { + width: '360px', + top: 'calc(30% + 10px)', + boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px', + }, }, NEW_ACCOUNT: { -- cgit 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') 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 From fe5817051b00a7288fb97541c5674641e978aead Mon Sep 17 00:00:00 2001 From: sdtsui Date: Mon, 21 Aug 2017 09:50:22 -0700 Subject: [WIP] Aggregate data for QRView --- ui/app/components/modals/account-details-modal.js | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) (limited to 'ui/app/components/modals') diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js index 104d2c6ed..2a5359fd4 100644 --- a/ui/app/components/modals/account-details-modal.js +++ b/ui/app/components/modals/account-details-modal.js @@ -3,10 +3,15 @@ const h = require('react-hyperscript') const inherits = require('util').inherits const connect = require('react-redux').connect const actions = require('../../actions') +const { getSelectedIdentity, getSelectedAddress } = require('../../selectors') + +const QrView = require('../qr-code') function mapStateToProps (state) { return { address: state.metamask.selectedAddress, + selectedAddress: getSelectedAddress(state), + selectedIdentity: getSelectedIdentity(state), } } @@ -14,7 +19,8 @@ function mapDispatchToProps (dispatch) { return { hideModal: () => { dispatch(actions.hideModal()) - } + }, + showQrView: (selected, identity) => dispatch(actions.showQrView(selected, identity)), } } @@ -45,7 +51,12 @@ AccountDetailsModal.prototype.render = function () { ]), h('div', {}, [ - 'QR Code', + h(QrView, { + Qr: { + message: this.props.selectedAddress, + data: this.props.selectedIdentity, + } + }, []), ]), h('div', {}, [ -- cgit From b836d0483d835b0665a14e41f68f9fbd574fd655 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Mon, 21 Aug 2017 10:06:29 -0700 Subject: [WIP] Render a QR code in AccountDetailsModal --- ui/app/components/modals/account-details-modal.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) (limited to 'ui/app/components/modals') diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js index 2a5359fd4..f7dcf26eb 100644 --- a/ui/app/components/modals/account-details-modal.js +++ b/ui/app/components/modals/account-details-modal.js @@ -10,7 +10,7 @@ const QrView = require('../qr-code') function mapStateToProps (state) { return { address: state.metamask.selectedAddress, - selectedAddress: getSelectedAddress(state), + // selectedAddress: getSelectedAddress(state), selectedIdentity: getSelectedIdentity(state), } } @@ -35,6 +35,8 @@ module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountDetailsModa // It is the only component in this codebase that does so // It utilizes modal styles AccountDetailsModal.prototype.render = function () { + const { selectedIdentity } = this.props + return h('div', {}, [ h('div.account-details-modal-wrapper', { }, [ @@ -53,8 +55,8 @@ AccountDetailsModal.prototype.render = function () { h('div', {}, [ h(QrView, { Qr: { - message: this.props.selectedAddress, - data: this.props.selectedIdentity, + message: this.props.selectedIdentity.name, + data: this.props.selectedIdentity.address, } }, []), ]), -- cgit From 877faaf09608fbb5f1ba9dd853959e7399893068 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Mon, 21 Aug 2017 10:27:56 -0700 Subject: Integrate old QR component with new modal layout --- ui/app/components/modals/account-details-modal.js | 26 +++++++++++++---------- 1 file changed, 15 insertions(+), 11 deletions(-) (limited to 'ui/app/components/modals') diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js index f7dcf26eb..e3d1bb26b 100644 --- a/ui/app/components/modals/account-details-modal.js +++ b/ui/app/components/modals/account-details-modal.js @@ -52,22 +52,26 @@ AccountDetailsModal.prototype.render = function () { h('div', {}, [ ]), - h('div', {}, [ - h(QrView, { - Qr: { - message: this.props.selectedIdentity.name, - data: this.props.selectedIdentity.address, - } - }, []), - ]), + h(QrView, { + Qr: { + message: this.props.selectedIdentity.name, + data: this.props.selectedIdentity.address, + } + }, []), h('div', {}, [ 'Account Display', ]), - h('div', {}, [ - 'divider', - ]), + // divider + h('div', { + style: { + width: '100%', + height: '1px', + margin: '10px 0px', + backgroundColor: '#D8D8D8', + } + }, []), h('div', {}, [ 'View aCcount on etherscan', -- cgit 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/account-details-modal.js | 45 +++++++++++++--------- ui/app/components/modals/buy-options-modal.js | 3 -- .../components/modals/edit-account-name-modal.js | 3 -- 3 files changed, 27 insertions(+), 24 deletions(-) (limited to 'ui/app/components/modals') diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js index e3d1bb26b..cbddd0421 100644 --- a/ui/app/components/modals/account-details-modal.js +++ b/ui/app/components/modals/account-details-modal.js @@ -4,13 +4,15 @@ const inherits = require('util').inherits const connect = require('react-redux').connect const actions = require('../../actions') const { getSelectedIdentity, getSelectedAddress } = require('../../selectors') - +const genAccountLink = require('../../../lib/account-link.js') +const Identicon = require('../identicon') const QrView = require('../qr-code') function mapStateToProps (state) { return { + network: state.metamask.network, address: state.metamask.selectedAddress, - // selectedAddress: getSelectedAddress(state), + selectedAddress: getSelectedAddress(state), selectedIdentity: getSelectedIdentity(state), } } @@ -31,18 +33,24 @@ function AccountDetailsModal () { module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountDetailsModal) -// AccountDetailsModal is currently meant to be rendered inside -// It is the only component in this codebase that does so -// It utilizes modal styles AccountDetailsModal.prototype.render = function () { - const { selectedIdentity } = this.props + const { selectedIdentity, selectedAddress, network } = this.props return h('div', {}, [ h('div.account-details-modal-wrapper', { }, [ h('div', {}, [ - 'ICON', + + h( + Identicon, + { + address: selectedIdentity.address, + diameter: 64, + style: {}, + }, + ), + ]), h('div', {}, [ @@ -64,21 +72,22 @@ AccountDetailsModal.prototype.render = function () { ]), // divider - h('div', { - style: { - width: '100%', - height: '1px', - margin: '10px 0px', - backgroundColor: '#D8D8D8', - } + h('div.account-details-modal-divider', { + style: {} }, []), - h('div', {}, [ - 'View aCcount on etherscan', + h('button.btn-clear', { + onClick: () => { + const url = genAccountLink(selectedIdentity.address, network) + global.platform.openWindow({ url }) + }, + }, [ + 'View account on Etherscan', ]), - h('div', {}, [ - 'export private key', + // Holding on redesign for Export Private Key functionality + h('button.btn-clear', {}, [ + 'Export private key', ]), ]) diff --git a/ui/app/components/modals/buy-options-modal.js b/ui/app/components/modals/buy-options-modal.js index 76e0da4f1..6e0831768 100644 --- a/ui/app/components/modals/buy-options-modal.js +++ b/ui/app/components/modals/buy-options-modal.js @@ -29,9 +29,6 @@ function BuyOptions () { 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.buy-modal-content.transfers-subview', { 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 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') 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 From 744b78e9c8c032cdd13acf121f891c28f319ed4d Mon Sep 17 00:00:00 2001 From: Dan J Miller Date: Thu, 24 Aug 2017 21:55:27 -0230 Subject: Patch 2 account details modal (#1957) * Account details modal styling changes. * Tweaking styles. --- ui/app/components/modals/account-details-modal.js | 15 +++++---------- ui/app/components/modals/modal.js | 4 ++-- 2 files changed, 7 insertions(+), 12 deletions(-) (limited to 'ui/app/components/modals') diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js index cbddd0421..3ed702192 100644 --- a/ui/app/components/modals/account-details-modal.js +++ b/ui/app/components/modals/account-details-modal.js @@ -33,6 +33,9 @@ function AccountDetailsModal () { module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountDetailsModal) +// Not yet pixel perfect todos: + // fonts of qr-header and close button + AccountDetailsModal.prototype.render = function () { const { selectedIdentity, selectedAddress, network } = this.props @@ -42,6 +45,7 @@ AccountDetailsModal.prototype.render = function () { h('div', {}, [ + // Needs a border; requires changes to svg h( Identicon, { @@ -53,12 +57,7 @@ AccountDetailsModal.prototype.render = function () { ]), - h('div', {}, [ - 'X', - ]), - - h('div', {}, [ - ]), + h('div.account-details-modal-close', {}), h(QrView, { Qr: { @@ -67,10 +66,6 @@ AccountDetailsModal.prototype.render = function () { } }, []), - h('div', {}, [ - 'Account Display', - ]), - // divider h('div.account-details-modal-divider', { style: {} diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js index 842c4ed51..06a3efd34 100644 --- a/ui/app/components/modals/modal.js +++ b/ui/app/components/modals/modal.js @@ -52,12 +52,12 @@ const MODALS = { ], mobileModalStyle: { width: '95%', - top: isPopupOrNotification() === 'popup' ? '48vh' : '36.5vh', + top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh', boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px', }, laptopModalStyle: { width: '360px', - top: 'calc(30% + 10px)', + top: 'calc(33% + 45px)', boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px', }, }, -- cgit 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/modal.js | 10 ++++++++-- ui/app/components/modals/new-account-modal.js | 19 ++++++++----------- 2 files changed, 16 insertions(+), 13 deletions(-) (limited to 'ui/app/components/modals') diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js index 06a3efd34..fdff4c99e 100644 --- a/ui/app/components/modals/modal.js +++ b/ui/app/components/modals/modal.js @@ -66,8 +66,14 @@ const MODALS = { contents: [ h(NewAccountModal, {}, []), ], - mobileModalStyle: {}, - laptopModalStyle: {} + mobileModalStyle: { + width: '95%', + top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh', + }, + laptopModalStyle: { + width: '449px', + top: 'calc(33% + 45px)', + }, }, DEFAULT: { 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 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/account-details-modal.js | 8 ++++---- ui/app/components/modals/buy-options-modal.js | 6 +++--- ui/app/components/modals/edit-account-name-modal.js | 2 +- ui/app/components/modals/index.js | 2 +- ui/app/components/modals/modal.js | 12 ++++++------ ui/app/components/modals/new-account-modal.js | 6 +++--- 6 files changed, 18 insertions(+), 18 deletions(-) (limited to 'ui/app/components/modals') diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js index 3ed702192..fb0e70397 100644 --- a/ui/app/components/modals/account-details-modal.js +++ b/ui/app/components/modals/account-details-modal.js @@ -37,7 +37,7 @@ module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountDetailsModa // fonts of qr-header and close button AccountDetailsModal.prototype.render = function () { - const { selectedIdentity, selectedAddress, network } = this.props + const { selectedIdentity, network } = this.props return h('div', {}, [ h('div.account-details-modal-wrapper', { @@ -63,12 +63,12 @@ AccountDetailsModal.prototype.render = function () { Qr: { message: this.props.selectedIdentity.name, data: this.props.selectedIdentity.address, - } + }, }, []), // divider h('div.account-details-modal-divider', { - style: {} + style: {}, }, []), h('button.btn-clear', { @@ -85,6 +85,6 @@ AccountDetailsModal.prototype.render = function () { 'Export private key', ]), - ]) + ]), ]) } diff --git a/ui/app/components/modals/buy-options-modal.js b/ui/app/components/modals/buy-options-modal.js index 6e0831768..79bbc798b 100644 --- a/ui/app/components/modals/buy-options-modal.js +++ b/ui/app/components/modals/buy-options-modal.js @@ -18,7 +18,7 @@ function mapDispatchToProps (dispatch) { }, hideModal: () => { dispatch(actions.hideModal()) - } + }, } } @@ -71,7 +71,7 @@ BuyOptions.prototype.render = function () { background: 'white', }, onClick: () => { this.props.hideModal() }, - }, h('div.buy-modal-content-footer#buy-modal-content-footer-text',{}, 'Cancel')), - ]) + }, h('div.buy-modal-content-footer#buy-modal-content-footer-text', {}, 'Cancel')), + ]), ]) } 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', ]), - ]) + ]), ]) } diff --git a/ui/app/components/modals/index.js b/ui/app/components/modals/index.js index e2e367af0..1db1d33d4 100644 --- a/ui/app/components/modals/index.js +++ b/ui/app/components/modals/index.js @@ -2,4 +2,4 @@ const Modal = require('./modal') module.exports = { Modal, -} \ No newline at end of file +} diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js index fdff4c99e..d266fe790 100644 --- a/ui/app/components/modals/modal.js +++ b/ui/app/components/modals/modal.js @@ -80,7 +80,7 @@ const MODALS = { contents: [], mobileModalStyle: {}, laptopModalStyle: {}, - } + }, } const BACKDROPSTYLE = { @@ -120,7 +120,7 @@ Modal.prototype.render = function () { { className: 'modal', keyboard: false, - onHide: () => {this.onHide()}, + onHide: () => { this.onHide() }, ref: (ref) => { this.modalRef = ref }, @@ -131,7 +131,7 @@ Modal.prototype.render = function () { ) } -Modal.prototype.componentWillReceiveProps = function(nextProps) { +Modal.prototype.componentWillReceiveProps = function (nextProps) { if (nextProps.active) { this.show() } else if (this.props.active) { @@ -139,17 +139,17 @@ Modal.prototype.componentWillReceiveProps = function(nextProps) { } } -Modal.prototype.onHide = function() { +Modal.prototype.onHide = function () { if (this.props.onHideCallback) { this.props.onHideCallback() } this.props.hideModal() } -Modal.prototype.hide = function() { +Modal.prototype.hide = function () { this.modalRef.hide() } -Modal.prototype.show = function() { +Modal.prototype.show = function () { this.modalRef.show() } 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 From 61b965fe14ccc44332d4e3a90ce531142da65a71 Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 6 Sep 2017 07:13:32 -0230 Subject: Touch up style of account-details-modal. --- ui/app/components/modals/modal.js | 2 ++ 1 file changed, 2 insertions(+) (limited to 'ui/app/components/modals') diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js index d266fe790..85bed66e1 100644 --- a/ui/app/components/modals/modal.js +++ b/ui/app/components/modals/modal.js @@ -54,11 +54,13 @@ const MODALS = { width: '95%', top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh', boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px', + borderRadius: '4px', }, laptopModalStyle: { width: '360px', top: 'calc(33% + 45px)', boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px', + borderRadius: '4px', }, }, -- cgit From 1d5a725ffbcd0fe3123d3bbb5889abce99cbaabe Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 6 Sep 2017 10:09:58 -0230 Subject: Close button in account-details-modal working. --- ui/app/components/modals/account-details-modal.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'ui/app/components/modals') diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js index fb0e70397..838000fed 100644 --- a/ui/app/components/modals/account-details-modal.js +++ b/ui/app/components/modals/account-details-modal.js @@ -57,7 +57,9 @@ AccountDetailsModal.prototype.render = function () { ]), - h('div.account-details-modal-close', {}), + h('div.account-details-modal-close', { + onClick: this.props.hideModal, + }), h(QrView, { Qr: { -- cgit 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') 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 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') 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 From 663cb758b345d7138b9e9c68489e1859dbfaa78e Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Mon, 11 Sep 2017 00:45:06 -0700 Subject: Style send token screen --- ui/app/components/modals/account-details-modal.js | 34 ++++++++--------------- ui/app/components/modals/modal.js | 5 ++++ 2 files changed, 17 insertions(+), 22 deletions(-) (limited to 'ui/app/components/modals') diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js index 838000fed..ec7e4b500 100644 --- a/ui/app/components/modals/account-details-modal.js +++ b/ui/app/components/modals/account-details-modal.js @@ -39,21 +39,17 @@ module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountDetailsModa AccountDetailsModal.prototype.render = function () { const { selectedIdentity, network } = this.props - return h('div', {}, [ - h('div.account-details-modal-wrapper', { - }, [ + return h('div', { style: { borderRadius: '4px' }}, [ + h('div.account-details-modal-wrapper', [ - h('div', {}, [ + h('div', [ // Needs a border; requires changes to svg - h( - Identicon, - { - address: selectedIdentity.address, - diameter: 64, - style: {}, - }, - ), + h(Identicon, { + address: selectedIdentity.address, + diameter: 64, + style: {}, + }), ]), @@ -66,26 +62,20 @@ AccountDetailsModal.prototype.render = function () { message: this.props.selectedIdentity.name, data: this.props.selectedIdentity.address, }, - }, []), + }), // divider - h('div.account-details-modal-divider', { - style: {}, - }, []), + h('div.account-details-modal-divider'), h('button.btn-clear', { onClick: () => { const url = genAccountLink(selectedIdentity.address, network) global.platform.openWindow({ url }) }, - }, [ - 'View account on Etherscan', - ]), + }, [ 'View account on Etherscan' ]), // Holding on redesign for Export Private Key functionality - h('button.btn-clear', {}, [ - 'Export private key', - ]), + h('button.btn-clear', [ 'Export private key' ]), ]), ]) diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js index 85bed66e1..477dcbe86 100644 --- a/ui/app/components/modals/modal.js +++ b/ui/app/components/modals/modal.js @@ -62,6 +62,9 @@ const MODALS = { boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px', borderRadius: '4px', }, + contentStyle: { + borderRadius: '4px', + } }, NEW_ACCOUNT: { @@ -117,6 +120,7 @@ Modal.prototype.render = function () { const children = modal.contents const modalStyle = modal[isMobileView() ? 'mobileModalStyle' : 'laptopModalStyle'] + const contentStyle = modal.contentStyle || {}; return h(FadeModal, { @@ -127,6 +131,7 @@ Modal.prototype.render = function () { this.modalRef = ref }, modalStyle, + contentStyle, backdropStyle: BACKDROPSTYLE, }, children, -- cgit 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') 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 From e7f1fc44361829f05a713218f8b1837a8574c2f2 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Tue, 19 Sep 2017 18:49:35 -0700 Subject: Buy Modal Styling --- ui/app/components/modals/modal.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) (limited to 'ui/app/components/modals') diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js index 477dcbe86..04a2f5f40 100644 --- a/ui/app/components/modals/modal.js +++ b/ui/app/components/modals/modal.js @@ -21,12 +21,13 @@ const MODALS = { mobileModalStyle: { width: '95%', top: isPopupOrNotification() === 'popup' ? '48vh' : '36.5vh', - boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px', + boxShadow: '0 0 7px 0 rgba(0,0,0,0.08)', }, laptopModalStyle: { width: '66%', + maxWidth: '550px', top: 'calc(30% + 10px)', - boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px', + boxShadow: '0 0 7px 0 rgba(0,0,0,0.08)', }, }, @@ -64,7 +65,7 @@ const MODALS = { }, contentStyle: { borderRadius: '4px', - } + }, }, NEW_ACCOUNT: { -- cgit From 24fd16b1bee31352ef7f364804eb5f06c08c3bf6 Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 19 Sep 2017 22:26:10 -0230 Subject: Abstract account modal. --- ui/app/components/modals/account-details-modal.js | 45 ++++-------------- .../components/modals/account-modal-container.js | 55 ++++++++++++++++++++++ 2 files changed, 65 insertions(+), 35 deletions(-) create mode 100644 ui/app/components/modals/account-modal-container.js (limited to 'ui/app/components/modals') diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js index ec7e4b500..6c2eba7bd 100644 --- a/ui/app/components/modals/account-details-modal.js +++ b/ui/app/components/modals/account-details-modal.js @@ -3,25 +3,21 @@ const h = require('react-hyperscript') const inherits = require('util').inherits const connect = require('react-redux').connect const actions = require('../../actions') +const AccountModalContainer = require('./account-modal-container') const { getSelectedIdentity, getSelectedAddress } = require('../../selectors') const genAccountLink = require('../../../lib/account-link.js') -const Identicon = require('../identicon') const QrView = require('../qr-code') function mapStateToProps (state) { return { network: state.metamask.network, - address: state.metamask.selectedAddress, - selectedAddress: getSelectedAddress(state), selectedIdentity: getSelectedIdentity(state), } } function mapDispatchToProps (dispatch) { return { - hideModal: () => { - dispatch(actions.hideModal()) - }, + // Is this supposed to be used somewhere? showQrView: (selected, identity) => dispatch(actions.showQrView(selected, identity)), } } @@ -34,49 +30,28 @@ function AccountDetailsModal () { module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountDetailsModal) // Not yet pixel perfect todos: - // fonts of qr-header and close button + // fonts of qr-header AccountDetailsModal.prototype.render = function () { const { selectedIdentity, network } = this.props + const { name, address } = selectedIdentity - return h('div', { style: { borderRadius: '4px' }}, [ - h('div.account-details-modal-wrapper', [ - - h('div', [ - - // Needs a border; requires changes to svg - h(Identicon, { - address: selectedIdentity.address, - diameter: 64, - style: {}, - }), - - ]), - - h('div.account-details-modal-close', { - onClick: this.props.hideModal, - }), - + return h(AccountModalContainer, {}, [ h(QrView, { Qr: { - message: this.props.selectedIdentity.name, - data: this.props.selectedIdentity.address, + message: name, + data: address, }, }), - // divider - h('div.account-details-modal-divider'), + h('div.account-modal-divider'), h('button.btn-clear', { - onClick: () => { - const url = genAccountLink(selectedIdentity.address, network) - global.platform.openWindow({ url }) - }, + onClick: () => global.platform.openWindow({ url: genAccountLink(address, network) }), }, [ 'View account on Etherscan' ]), // Holding on redesign for Export Private Key functionality h('button.btn-clear', [ 'Export private key' ]), - - ]), + ]) } diff --git a/ui/app/components/modals/account-modal-container.js b/ui/app/components/modals/account-modal-container.js new file mode 100644 index 000000000..69650ca15 --- /dev/null +++ b/ui/app/components/modals/account-modal-container.js @@ -0,0 +1,55 @@ +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 { getSelectedIdentity } = require('../../selectors') +const Identicon = require('../identicon') + +function mapStateToProps (state) { + return { + selectedIdentity: getSelectedIdentity(state), + } +} + +function mapDispatchToProps (dispatch) { + return { + hideModal: () => { + dispatch(actions.hideModal()) + }, + } +} + +inherits(AccountModalContainer, Component) +function AccountModalContainer () { + Component.call(this) +} + +module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountModalContainer) + +AccountModalContainer.prototype.render = function () { + const { selectedIdentity, children } = this.props + console.log(`children`, children); + return h('div', { style: { borderRadius: '4px' }}, [ + h('div.account-modal-container', [ + + h('div', [ + + // Needs a border; requires changes to svg + h(Identicon, { + address: selectedIdentity.address, + diameter: 64, + style: {}, + }), + + ]), + + h('div.account-modal-close', { + onClick: this.props.hideModal, + }), + + ...children, + + ]), + ]) +} -- cgit From fe37dd7ecd142bbb0b51d62abfdc0a25240aef42 Mon Sep 17 00:00:00 2001 From: Dan Date: Fri, 22 Sep 2017 01:56:10 -0230 Subject: Open account details modal on buy -> direct deposit. --- ui/app/components/modals/buy-options-modal.js | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) (limited to 'ui/app/components/modals') diff --git a/ui/app/components/modals/buy-options-modal.js b/ui/app/components/modals/buy-options-modal.js index 79bbc798b..a8033d288 100644 --- a/ui/app/components/modals/buy-options-modal.js +++ b/ui/app/components/modals/buy-options-modal.js @@ -19,6 +19,9 @@ function mapDispatchToProps (dispatch) { hideModal: () => { dispatch(actions.hideModal()) }, + showAccountDetailModal: () => { + dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' })) + }, } } @@ -59,7 +62,9 @@ BuyOptions.prototype.render = function () { h('div.buy-modal-content-option-subtitle', {}, 'Trade any digital asset for any other'), ]), - h('div.buy-modal-content-option', {}, [ + h('div.buy-modal-content-option', { + onClick: () => this.goToAccountDetailsModal() + }, [ h('div.buy-modal-content-option-title', {}, 'Direct Deposit'), h('div.buy-modal-content-option-subtitle', {}, 'Deposit from another account'), ]), @@ -75,3 +80,8 @@ BuyOptions.prototype.render = function () { ]), ]) } + +BuyOptions.prototype.goToAccountDetailsModal = function () { + this.props.hideModal() + this.props.showAccountDetailModal() +} -- cgit 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') 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 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') 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 From 0eeba3771c2396c12de3f254dbfaae957344411d Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 20 Sep 2017 05:35:27 -0230 Subject: Exports private key modal opens from dropdown. --- .../components/modals/export-private-key-modal.js | 41 +++++++++++++++++++++ ui/app/components/modals/modal.js | 42 ++++++++++++++-------- 2 files changed, 68 insertions(+), 15 deletions(-) create mode 100644 ui/app/components/modals/export-private-key-modal.js (limited to 'ui/app/components/modals') diff --git a/ui/app/components/modals/export-private-key-modal.js b/ui/app/components/modals/export-private-key-modal.js new file mode 100644 index 000000000..bbcd25e0d --- /dev/null +++ b/ui/app/components/modals/export-private-key-modal.js @@ -0,0 +1,41 @@ +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 AccountModalContainer = require('./account-modal-container') +const { getSelectedIdentity } = require('../../selectors') +const ReadOnlyInput = require('../readonly-input') + +function mapStateToProps (state) { + return { + network: state.metamask.network, + selectedIdentity: getSelectedIdentity(state), + } +} + +inherits(ExportPrivateKeyModal, Component) +function ExportPrivateKeyModal () { + Component.call(this) +} + +module.exports = connect(mapStateToProps)(ExportPrivateKeyModal) + +ExportPrivateKeyModal.prototype.render = function () { + const { selectedIdentity, network } = this.props + const { name, address } = selectedIdentity + + return h(AccountModalContainer, {}, [ + + h('span.account-name', name), + + h(ReadOnlyInput, { + wrapperClass: 'ellip-address-wrapper', + inputClass: 'ellip-address', + value: address, + }), + + h('div.account-modal-divider'), + + ]) +} diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js index 04a2f5f40..138efc3ea 100644 --- a/ui/app/components/modals/modal.js +++ b/ui/app/components/modals/modal.js @@ -11,8 +11,27 @@ const isPopupOrNotification = require('../../../../app/scripts/lib/is-popup-or-n const BuyOptions = require('./buy-options-modal') const AccountDetailsModal = require('./account-details-modal') const EditAccountNameModal = require('./edit-account-name-modal') +const ExportPrivateKeyModal = require('./export-private-key-modal') const NewAccountModal = require('./new-account-modal') +const accountModalStyle = { + mobileModalStyle: { + width: '95%', + top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh', + boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px', + borderRadius: '4px', + }, + laptopModalStyle: { + width: '360px', + top: 'calc(33% + 45px)', + boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px', + borderRadius: '4px', + }, + contentStyle: { + borderRadius: '4px', + }, +} + const MODALS = { BUY: { contents: [ @@ -51,21 +70,14 @@ const MODALS = { contents: [ h(AccountDetailsModal, {}, []), ], - mobileModalStyle: { - width: '95%', - top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh', - boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px', - borderRadius: '4px', - }, - laptopModalStyle: { - width: '360px', - top: 'calc(33% + 45px)', - boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px', - borderRadius: '4px', - }, - contentStyle: { - borderRadius: '4px', - }, + ...accountModalStyle, + }, + + EXPORT_PRIVATE_KEY: { + contents: [ + h(ExportPrivateKeyModal, {}, []), + ], + ...accountModalStyle, }, NEW_ACCOUNT: { -- cgit From 2c474b0d6e487652cf16e224e19deb0bf68abedb Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 20 Sep 2017 05:36:31 -0230 Subject: Export private key modal body ui. --- .../components/modals/export-private-key-modal.js | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) (limited to 'ui/app/components/modals') diff --git a/ui/app/components/modals/export-private-key-modal.js b/ui/app/components/modals/export-private-key-modal.js index bbcd25e0d..28b988f5a 100644 --- a/ui/app/components/modals/export-private-key-modal.js +++ b/ui/app/components/modals/export-private-key-modal.js @@ -37,5 +37,27 @@ ExportPrivateKeyModal.prototype.render = function () { h('div.account-modal-divider'), + h('span.modal-body-title', 'Download Private Keys'), + + h('div.private-key-password', {}, [ + h('span.private-key-password-label', 'Type Your Password'), + + h('input.private-key-password-input', { + type: 'password', + placeholder: 'Type password', + }), + ]), + + h('div.private-key-password-warning', `Warning: Never disclose this key. + Anyone with your private keys can take steal any assets held in your + account.` + ), + + h('div.export-private-key-buttons', {}, [ + h('button.btn-clear.btn-cancel', {}, 'Cancel'), + + h('button.btn-clear', 'Download'), + ]), + ]) } -- cgit From 7102772c3a4a73d594ccc20e760defa2999f2d3f Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 20 Sep 2017 10:02:18 -0230 Subject: Connect export key modal to state and enable actions. --- .../components/modals/export-private-key-modal.js | 85 ++++++++++++++++++---- 1 file changed, 72 insertions(+), 13 deletions(-) (limited to 'ui/app/components/modals') diff --git a/ui/app/components/modals/export-private-key-modal.js b/ui/app/components/modals/export-private-key-modal.js index 28b988f5a..b1d551781 100644 --- a/ui/app/components/modals/export-private-key-modal.js +++ b/ui/app/components/modals/export-private-key-modal.js @@ -2,6 +2,7 @@ const Component = require('react').Component const h = require('react-hyperscript') const inherits = require('util').inherits const connect = require('react-redux').connect +const ethUtil = require('ethereumjs-util') const actions = require('../../actions') const AccountModalContainer = require('./account-modal-container') const { getSelectedIdentity } = require('../../selectors') @@ -9,20 +10,83 @@ const ReadOnlyInput = require('../readonly-input') function mapStateToProps (state) { return { + warning: state.appState.warning, + privateKey: state.appState.accountDetail.privateKey, network: state.metamask.network, selectedIdentity: getSelectedIdentity(state), } } +function mapDispatchToProps (dispatch) { + return { + exportAccount: (password, address) => dispatch(actions.exportAccount(password, address)), + hideModal: () => dispatch(actions.hideModal()), + } +} + inherits(ExportPrivateKeyModal, Component) function ExportPrivateKeyModal () { Component.call(this) + + this.state = { + password: '' + } +} + +module.exports = connect(mapStateToProps, mapDispatchToProps)(ExportPrivateKeyModal) + +ExportPrivateKeyModal.prototype.renderPasswordLabel = function (privateKey) { + return h('span.private-key-password-label', privateKey + ? 'This is your private key (click to copy)' + : 'Type Your Password' + ) +} + +ExportPrivateKeyModal.prototype.renderPasswordInput = function (privateKey) { + const plainKey = privateKey && ethUtil.stripHexPrefix(privateKey) + + return privateKey + ? h(ReadOnlyInput, { + wrapperClass: 'private-key-password-display-wrapper', + inputClass: 'private-key-password-display-textarea', + textarea: true, + value: plainKey, + }) + : h('input.private-key-password-input', { + type: 'password', + placeholder: 'Type password', + onChange: event => this.setState({ password: event.target.value }) + }) +} + +ExportPrivateKeyModal.prototype.renderButton = function (className, onClick, label) { + return h('button', { + className, + onClick, + }, label) } -module.exports = connect(mapStateToProps)(ExportPrivateKeyModal) +ExportPrivateKeyModal.prototype.renderButtons = function (privateKey, password, address) { + const { hideModal, exportAccount } = this.props + + return h('div.export-private-key-buttons', {}, [ + !privateKey && this.renderButton('btn-clear btn-cancel', () => hideModal(), 'Cancel'), + + (privateKey + ? this.renderButton('btn-clear', () => hideModal(), 'Done') + : this.renderButton('btn-clear', () => exportAccount(this.state.password, address), 'Download') + ), + + ]) +} ExportPrivateKeyModal.prototype.render = function () { - const { selectedIdentity, network } = this.props + const { + selectedIdentity, + network, + privateKey, + warning, + } = this.props const { name, address } = selectedIdentity return h(AccountModalContainer, {}, [ @@ -31,7 +95,7 @@ ExportPrivateKeyModal.prototype.render = function () { h(ReadOnlyInput, { wrapperClass: 'ellip-address-wrapper', - inputClass: 'ellip-address', + inputClass: 'qr-ellip-address ellip-address', value: address, }), @@ -40,12 +104,11 @@ ExportPrivateKeyModal.prototype.render = function () { h('span.modal-body-title', 'Download Private Keys'), h('div.private-key-password', {}, [ - h('span.private-key-password-label', 'Type Your Password'), + this.renderPasswordLabel(privateKey), + + this.renderPasswordInput(privateKey), - h('input.private-key-password-input', { - type: 'password', - placeholder: 'Type password', - }), + !warning ? null : h('span.private-key-password-error', warning), ]), h('div.private-key-password-warning', `Warning: Never disclose this key. @@ -53,11 +116,7 @@ ExportPrivateKeyModal.prototype.render = function () { account.` ), - h('div.export-private-key-buttons', {}, [ - h('button.btn-clear.btn-cancel', {}, 'Cancel'), - - h('button.btn-clear', 'Download'), - ]), + this.renderButtons(privateKey, this.state.password, address), ]) } -- cgit From 01816e1b2216e0cf849ec3d67f01b1e571d69fa4 Mon Sep 17 00:00:00 2001 From: Dan Date: Fri, 22 Sep 2017 17:27:18 -0230 Subject: Adds a back button to export private key modal; connects account details to same modal. --- ui/app/components/modals/account-details-modal.js | 17 +++++++++++++++-- ui/app/components/modals/account-modal-container.js | 19 +++++++++++++++++-- ui/app/components/modals/export-private-key-modal.js | 10 +++++++++- 3 files changed, 41 insertions(+), 5 deletions(-) (limited to 'ui/app/components/modals') diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js index 6c2eba7bd..37a62e1c0 100644 --- a/ui/app/components/modals/account-details-modal.js +++ b/ui/app/components/modals/account-details-modal.js @@ -19,6 +19,10 @@ function mapDispatchToProps (dispatch) { return { // Is this supposed to be used somewhere? showQrView: (selected, identity) => dispatch(actions.showQrView(selected, identity)), + showExportPrivateKeyModal: () => { + dispatch(actions.showModal({ name: 'EXPORT_PRIVATE_KEY' })) + }, + hideModal: () => dispatch(actions.hideModal()), } } @@ -33,7 +37,12 @@ module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountDetailsModa // fonts of qr-header AccountDetailsModal.prototype.render = function () { - const { selectedIdentity, network } = this.props + const { + selectedIdentity, + network, + showExportPrivateKeyModal, + hideModal, + } = this.props const { name, address } = selectedIdentity return h(AccountModalContainer, {}, [ @@ -51,7 +60,11 @@ AccountDetailsModal.prototype.render = function () { }, [ 'View account on Etherscan' ]), // Holding on redesign for Export Private Key functionality - h('button.btn-clear', [ 'Export private key' ]), + h('button.btn-clear', { + onClick: () => { + showExportPrivateKeyModal() + }, + }, [ 'Export private key' ]), ]) } diff --git a/ui/app/components/modals/account-modal-container.js b/ui/app/components/modals/account-modal-container.js index 69650ca15..3cad72067 100644 --- a/ui/app/components/modals/account-modal-container.js +++ b/ui/app/components/modals/account-modal-container.js @@ -28,8 +28,13 @@ function AccountModalContainer () { module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountModalContainer) AccountModalContainer.prototype.render = function () { - const { selectedIdentity, children } = this.props - console.log(`children`, children); + const { + selectedIdentity, + children, + showBackButton = false, + backButtonAction, + } = this.props + return h('div', { style: { borderRadius: '4px' }}, [ h('div.account-modal-container', [ @@ -44,6 +49,16 @@ AccountModalContainer.prototype.render = function () { ]), + showBackButton && h('div.account-modal-back', { + onClick: backButtonAction, + }, [ + + h('i.fa.fa-angle-left.fa-lg'), + + h('span.account-modal-back__text', ' Back'), + + ]), + h('div.account-modal-close', { onClick: this.props.hideModal, }), diff --git a/ui/app/components/modals/export-private-key-modal.js b/ui/app/components/modals/export-private-key-modal.js index b1d551781..4bb34f8c6 100644 --- a/ui/app/components/modals/export-private-key-modal.js +++ b/ui/app/components/modals/export-private-key-modal.js @@ -14,12 +14,14 @@ function mapStateToProps (state) { privateKey: state.appState.accountDetail.privateKey, network: state.metamask.network, selectedIdentity: getSelectedIdentity(state), + previousModalState: state.appState.modal.previousModalState.name, } } function mapDispatchToProps (dispatch) { return { exportAccount: (password, address) => dispatch(actions.exportAccount(password, address)), + showAccountDetailModal: () => dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' })), hideModal: () => dispatch(actions.hideModal()), } } @@ -86,10 +88,16 @@ ExportPrivateKeyModal.prototype.render = function () { network, privateKey, warning, + showAccountDetailModal, + hideModal, + previousModalState, } = this.props const { name, address } = selectedIdentity - return h(AccountModalContainer, {}, [ + return h(AccountModalContainer, { + showBackButton: previousModalState === 'ACCOUNT_DETAILS', + backButtonAction: () => showAccountDetailModal(), + }, [ h('span.account-name', name), -- cgit From 10345a12c2f812fabbcd9950da14beaa03cb2502 Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 26 Sep 2017 20:33:33 -0230 Subject: Keep privateKey out of state and clear it after closing export private key modal. --- .../components/modals/export-private-key-modal.js | 21 ++++++++++++++------- 1 file changed, 14 insertions(+), 7 deletions(-) (limited to 'ui/app/components/modals') diff --git a/ui/app/components/modals/export-private-key-modal.js b/ui/app/components/modals/export-private-key-modal.js index 4bb34f8c6..ddc7f1352 100644 --- a/ui/app/components/modals/export-private-key-modal.js +++ b/ui/app/components/modals/export-private-key-modal.js @@ -31,12 +31,20 @@ function ExportPrivateKeyModal () { Component.call(this) this.state = { - password: '' + password: '', + privateKey: null, } } module.exports = connect(mapStateToProps, mapDispatchToProps)(ExportPrivateKeyModal) +ExportPrivateKeyModal.prototype.exportAccountAndGetPrivateKey = function (password, address) { + const { exportAccount } = this.props + + exportAccount(password, address) + .then(privateKey => this.setState({ privateKey })) +} + ExportPrivateKeyModal.prototype.renderPasswordLabel = function (privateKey) { return h('span.private-key-password-label', privateKey ? 'This is your private key (click to copy)' @@ -68,15 +76,13 @@ ExportPrivateKeyModal.prototype.renderButton = function (className, onClick, lab }, label) } -ExportPrivateKeyModal.prototype.renderButtons = function (privateKey, password, address) { - const { hideModal, exportAccount } = this.props - +ExportPrivateKeyModal.prototype.renderButtons = function (privateKey, password, address, hideModal) { return h('div.export-private-key-buttons', {}, [ !privateKey && this.renderButton('btn-clear btn-cancel', () => hideModal(), 'Cancel'), (privateKey ? this.renderButton('btn-clear', () => hideModal(), 'Done') - : this.renderButton('btn-clear', () => exportAccount(this.state.password, address), 'Download') + : this.renderButton('btn-clear', () => this.exportAccountAndGetPrivateKey(this.state.password, address), 'Download') ), ]) @@ -86,7 +92,6 @@ ExportPrivateKeyModal.prototype.render = function () { const { selectedIdentity, network, - privateKey, warning, showAccountDetailModal, hideModal, @@ -94,6 +99,8 @@ ExportPrivateKeyModal.prototype.render = function () { } = this.props const { name, address } = selectedIdentity + const { privateKey } = this.state + return h(AccountModalContainer, { showBackButton: previousModalState === 'ACCOUNT_DETAILS', backButtonAction: () => showAccountDetailModal(), @@ -124,7 +131,7 @@ ExportPrivateKeyModal.prototype.render = function () { account.` ), - this.renderButtons(privateKey, this.state.password, address), + this.renderButtons(privateKey, this.state.password, address, hideModal), ]) } -- cgit From 4f106854ba6bbfd22b49598f9ef019aa620f5b4f Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Thu, 28 Sep 2017 16:34:42 -0700 Subject: Hide ShapeShift and Fix Modal Stylings --- ui/app/components/modals/buy-options-modal.js | 10 ++--- ui/app/components/modals/modal.js | 55 +++++++++++++++++++++++---- 2 files changed, 52 insertions(+), 13 deletions(-) (limited to 'ui/app/components/modals') diff --git a/ui/app/components/modals/buy-options-modal.js b/ui/app/components/modals/buy-options-modal.js index a8033d288..f1a5aa9fd 100644 --- a/ui/app/components/modals/buy-options-modal.js +++ b/ui/app/components/modals/buy-options-modal.js @@ -57,13 +57,13 @@ BuyOptions.prototype.render = function () { h('div.buy-modal-content-option-subtitle', {}, 'Buy with Fiat'), ]), - 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.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.buy-modal-content-option', { - onClick: () => this.goToAccountDetailsModal() + onClick: () => this.goToAccountDetailsModal(), }, [ h('div.buy-modal-content-option-title', {}, 'Direct Deposit'), h('div.buy-modal-content-option-subtitle', {}, 'Deposit from another account'), diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js index 138efc3ea..2bd56fb0a 100644 --- a/ui/app/components/modals/modal.js +++ b/ui/app/components/modals/modal.js @@ -17,15 +17,25 @@ const NewAccountModal = require('./new-account-modal') const accountModalStyle = { mobileModalStyle: { width: '95%', - top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh', + // top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh', boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px', borderRadius: '4px', + top: '10%', + transform: 'none', + left: '0', + right: '0', + margin: '0 auto', }, laptopModalStyle: { width: '360px', - top: 'calc(33% + 45px)', + // top: 'calc(33% + 45px)', boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px', borderRadius: '4px', + top: '10%', + transform: 'none', + left: '0', + right: '0', + margin: '0 auto', }, contentStyle: { borderRadius: '4px', @@ -39,14 +49,23 @@ const MODALS = { ], mobileModalStyle: { width: '95%', - top: isPopupOrNotification() === 'popup' ? '48vh' : '36.5vh', + // top: isPopupOrNotification() === 'popup' ? '48vh' : '36.5vh', + transform: 'none', + left: '0', + right: '0', + margin: '0 auto', boxShadow: '0 0 7px 0 rgba(0,0,0,0.08)', + top: '10%', }, laptopModalStyle: { width: '66%', maxWidth: '550px', - top: 'calc(30% + 10px)', + top: 'calc(10% + 10px)', + left: '0', + right: '0', + margin: '0 auto', boxShadow: '0 0 7px 0 rgba(0,0,0,0.08)', + transform: 'none', }, }, @@ -56,13 +75,23 @@ const MODALS = { ], mobileModalStyle: { width: '95%', - top: isPopupOrNotification() === 'popup' ? '48vh' : '36.5vh', + // top: isPopupOrNotification() === 'popup' ? '48vh' : '36.5vh', + top: '10%', boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px', + transform: 'none', + left: '0', + right: '0', + margin: '0 auto', }, laptopModalStyle: { width: '375px', - top: 'calc(30% + 10px)', + // top: 'calc(30% + 10px)', + top: '10%', boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px', + transform: 'none', + left: '0', + right: '0', + margin: '0 auto', }, }, @@ -86,11 +115,21 @@ const MODALS = { ], mobileModalStyle: { width: '95%', - top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh', + // top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh', + top: '10%', + transform: 'none', + left: '0', + right: '0', + margin: '0 auto', }, laptopModalStyle: { width: '449px', - top: 'calc(33% + 45px)', + // top: 'calc(33% + 45px)', + top: '10%', + transform: 'none', + left: '0', + right: '0', + margin: '0 auto', }, }, -- cgit From ff64fe98dde7746775396cbf94d63a1a0e91d069 Mon Sep 17 00:00:00 2001 From: Dan Date: Fri, 29 Sep 2017 13:10:57 -0230 Subject: Shapeshift deposit tx modal. --- .../components/modals/account-modal-container.js | 6 +++- ui/app/components/modals/modal.js | 8 +++++ .../modals/shapeshift-deposit-tx-modal.js | 40 ++++++++++++++++++++++ 3 files changed, 53 insertions(+), 1 deletion(-) create mode 100644 ui/app/components/modals/shapeshift-deposit-tx-modal.js (limited to 'ui/app/components/modals') diff --git a/ui/app/components/modals/account-modal-container.js b/ui/app/components/modals/account-modal-container.js index 3cad72067..c548fb7b3 100644 --- a/ui/app/components/modals/account-modal-container.js +++ b/ui/app/components/modals/account-modal-container.js @@ -30,10 +30,14 @@ module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountModalContai AccountModalContainer.prototype.render = function () { const { selectedIdentity, - children, showBackButton = false, backButtonAction, } = this.props + let { children } = this.props + + if (children.constructor !== Array) { + children = [children] + } return h('div', { style: { borderRadius: '4px' }}, [ h('div.account-modal-container', [ diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js index 2bd56fb0a..765e46312 100644 --- a/ui/app/components/modals/modal.js +++ b/ui/app/components/modals/modal.js @@ -13,6 +13,7 @@ const AccountDetailsModal = require('./account-details-modal') const EditAccountNameModal = require('./edit-account-name-modal') const ExportPrivateKeyModal = require('./export-private-key-modal') const NewAccountModal = require('./new-account-modal') +const ShapeshiftDepositTxModal = require('./shapeshift-deposit-tx-modal.js') const accountModalStyle = { mobileModalStyle: { @@ -109,6 +110,13 @@ const MODALS = { ...accountModalStyle, }, + SHAPESHIFT_DEPOSIT_TX: { + contents: [ + h(ShapeshiftDepositTxModal), + ], + ...accountModalStyle, + }, + NEW_ACCOUNT: { contents: [ h(NewAccountModal, {}, []), diff --git a/ui/app/components/modals/shapeshift-deposit-tx-modal.js b/ui/app/components/modals/shapeshift-deposit-tx-modal.js new file mode 100644 index 000000000..1fd1ade00 --- /dev/null +++ b/ui/app/components/modals/shapeshift-deposit-tx-modal.js @@ -0,0 +1,40 @@ +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 QrView = require('../qr-code') +const AccountModalContainer = require('./account-modal-container') + +function mapStateToProps (state) { + return { + Qr: state.appState.modal.modalState.Qr, + } +} + +function mapDispatchToProps (dispatch) { + return { + hideModal: () => { + dispatch(actions.hideModal()) + }, + } +} + +inherits(ShapeshiftDepositTxModal, Component) +function ShapeshiftDepositTxModal () { + Component.call(this) + +} + +module.exports = connect(mapStateToProps, mapDispatchToProps)(ShapeshiftDepositTxModal) + +ShapeshiftDepositTxModal.prototype.render = function () { + const { Qr } = this.props + + return h(AccountModalContainer, { + }, [ + h('div', {}, [ + h(QrView, {key: 'qr', Qr}), + ]) + ]) +} -- cgit From d206f183f5a07787535acd196c506145f00a199e Mon Sep 17 00:00:00 2001 From: Dan Date: Fri, 29 Sep 2017 16:33:29 -0230 Subject: Hide token confirmation modal ui --- .../modals/hide-token-confirmation-modal.js | 66 ++++++++++++++++++++++ ui/app/components/modals/modal.js | 15 +++++ 2 files changed, 81 insertions(+) create mode 100644 ui/app/components/modals/hide-token-confirmation-modal.js (limited to 'ui/app/components/modals') diff --git a/ui/app/components/modals/hide-token-confirmation-modal.js b/ui/app/components/modals/hide-token-confirmation-modal.js new file mode 100644 index 000000000..d3f06b483 --- /dev/null +++ b/ui/app/components/modals/hide-token-confirmation-modal.js @@ -0,0 +1,66 @@ +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 Identicon = require('../identicon') + +function mapStateToProps (state) { + return { + network: state.metamask.network, + token: state.appState.modal.modalState.token, + } +} + +function mapDispatchToProps (dispatch) { + return {} +} + +inherits(HideTokenConfirmationModal, Component) +function HideTokenConfirmationModal () { + Component.call(this) + + this.state = {} +} + +module.exports = connect(mapStateToProps, mapDispatchToProps)(HideTokenConfirmationModal) + +HideTokenConfirmationModal.prototype.render = function () { + const { token, network } = this.props + const { symbol, address } = token + + return h('div.hide-token-confirmation', {}, [ + h('div.hide-token-confirmation__container', { + }, [ + h('div.hide-token-confirmation__title', {}, [ + 'Hide Token?', + ]), + + h(Identicon, { + className: 'hide-token-confirmation__identicon', + diameter: 45, + address, + network, + }), + + h('div.hide-token-confirmation__symbol', {}, symbol), + + h('div.hide-token-confirmation__copy', {}, [ + 'You can add this token back in the future by going go to “Add token” in your accounts options menu.', + ]), + + h('div.hide-token-confirmation__buttons', {}, [ + h('button.btn-clear', { + onClick: () => {}, + }, [ + 'CANCEL', + ]), + h('button.btn-clear', { + onClick: () => {}, + }, [ + 'HIDE', + ]), + ]), + ]), + ]) +} diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js index 765e46312..7247d840e 100644 --- a/ui/app/components/modals/modal.js +++ b/ui/app/components/modals/modal.js @@ -14,6 +14,7 @@ const EditAccountNameModal = require('./edit-account-name-modal') const ExportPrivateKeyModal = require('./export-private-key-modal') const NewAccountModal = require('./new-account-modal') const ShapeshiftDepositTxModal = require('./shapeshift-deposit-tx-modal.js') +const HideTokenConfirmationModal = require('./hide-token-confirmation-modal') const accountModalStyle = { mobileModalStyle: { @@ -117,6 +118,20 @@ const MODALS = { ...accountModalStyle, }, + HIDE_TOKEN_CONFIRMATION: { + contents: [ + h(HideTokenConfirmationModal, {}, []), + ], + mobileModalStyle: { + width: '95%', + top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh', + }, + laptopModalStyle: { + width: '449px', + top: 'calc(33% + 45px)', + }, + }, + NEW_ACCOUNT: { contents: [ h(NewAccountModal, {}, []), -- cgit From ac4868170f4c61d13291389d01bf1002fe240ed4 Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 3 Oct 2017 14:55:52 -0230 Subject: Enables remove token and ensures add/remove update the list without need for refresh. --- .../components/modals/hide-token-confirmation-modal.js | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) (limited to 'ui/app/components/modals') diff --git a/ui/app/components/modals/hide-token-confirmation-modal.js b/ui/app/components/modals/hide-token-confirmation-modal.js index d3f06b483..fa3ad0b1e 100644 --- a/ui/app/components/modals/hide-token-confirmation-modal.js +++ b/ui/app/components/modals/hide-token-confirmation-modal.js @@ -13,7 +13,15 @@ function mapStateToProps (state) { } function mapDispatchToProps (dispatch) { - return {} + return { + hideModal: () => dispatch(actions.hideModal()), + hideToken: address => { + dispatch(actions.removeToken(address)) + .then(() => { + dispatch(actions.hideModal()) + }) + }, + } } inherits(HideTokenConfirmationModal, Component) @@ -26,7 +34,7 @@ function HideTokenConfirmationModal () { module.exports = connect(mapStateToProps, mapDispatchToProps)(HideTokenConfirmationModal) HideTokenConfirmationModal.prototype.render = function () { - const { token, network } = this.props + const { token, network, hideToken, hideModal } = this.props const { symbol, address } = token return h('div.hide-token-confirmation', {}, [ @@ -51,12 +59,12 @@ HideTokenConfirmationModal.prototype.render = function () { h('div.hide-token-confirmation__buttons', {}, [ h('button.btn-clear', { - onClick: () => {}, + onClick: () => hideModal(), }, [ 'CANCEL', ]), h('button.btn-clear', { - onClick: () => {}, + onClick: () => hideToken(address), }, [ 'HIDE', ]), -- cgit 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') 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 From 803eaaf968161f16aaf72d59b979dfbb7fb9b352 Mon Sep 17 00:00:00 2001 From: Dan J Miller Date: Fri, 13 Oct 2017 16:19:22 -0400 Subject: [NewUI] SendV2-#8: Send container handles tokens; gas info dynamic from state (#2364) * Adds memo field to send-v2. * Vertical align transaction with flexbox. * Customize Gas UI * Remove internal state from InputNumber and fix use in gastooltip. * Move customize-gas-modal to its own folder and minor cleanup * Create send container, get account info from state, and make currency display more reusable * Adjusts send-v2 and container for send-token. Dynamically getting suggested gas prices. --- ui/app/components/modals/modal.js | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) (limited to 'ui/app/components/modals') diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js index 7247d840e..88deb2bb0 100644 --- a/ui/app/components/modals/modal.js +++ b/ui/app/components/modals/modal.js @@ -15,6 +15,7 @@ const ExportPrivateKeyModal = require('./export-private-key-modal') const NewAccountModal = require('./new-account-modal') const ShapeshiftDepositTxModal = require('./shapeshift-deposit-tx-modal.js') const HideTokenConfirmationModal = require('./hide-token-confirmation-modal') +const CustomizeGasModal = require('../customize-gas-modal') const accountModalStyle = { mobileModalStyle: { @@ -156,6 +157,31 @@ const MODALS = { }, }, + CUSTOMIZE_GAS: { + contents: [ + h(CustomizeGasModal, {}, []), + ], + mobileModalStyle: { + width: '355px', + height: '598px', + // top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh', + top: '5%', + transform: 'none', + left: '0', + right: '0', + margin: '0 auto', + }, + laptopModalStyle: { + width: '720px', + height: '377px', + top: '80px', + transform: 'none', + left: '0', + right: '0', + margin: '0 auto', + }, + }, + DEFAULT: { contents: [], mobileModalStyle: {}, -- cgit From 222a203353dd977f497d44bf6581c16200b5de4f Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Fri, 13 Oct 2017 16:23:10 -0400 Subject: Fix click to copy for private key not working (#2360) --- ui/app/components/modals/export-private-key-modal.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) (limited to 'ui/app/components/modals') diff --git a/ui/app/components/modals/export-private-key-modal.js b/ui/app/components/modals/export-private-key-modal.js index ddc7f1352..302596eda 100644 --- a/ui/app/components/modals/export-private-key-modal.js +++ b/ui/app/components/modals/export-private-key-modal.js @@ -7,6 +7,7 @@ const actions = require('../../actions') const AccountModalContainer = require('./account-modal-container') const { getSelectedIdentity } = require('../../selectors') const ReadOnlyInput = require('../readonly-input') +const copyToClipboard = require('copy-to-clipboard') function mapStateToProps (state) { return { @@ -61,11 +62,12 @@ ExportPrivateKeyModal.prototype.renderPasswordInput = function (privateKey) { inputClass: 'private-key-password-display-textarea', textarea: true, value: plainKey, + onClick: () => copyToClipboard(plainKey), }) : h('input.private-key-password-input', { type: 'password', placeholder: 'Type password', - onChange: event => this.setState({ password: event.target.value }) + onChange: event => this.setState({ password: event.target.value }), }) } @@ -115,7 +117,7 @@ ExportPrivateKeyModal.prototype.render = function () { }), h('div.account-modal-divider'), - + h('span.modal-body-title', 'Download Private Keys'), h('div.private-key-password', {}, [ @@ -132,6 +134,6 @@ ExportPrivateKeyModal.prototype.render = function () { ), this.renderButtons(privateKey, this.state.password, address, hideModal), - + ]) } -- cgit From bef1405a50af219dc02108d7f437654690aec73e Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Sun, 22 Oct 2017 22:59:55 -0700 Subject: Change all "Buy" to "Deposit" --- ui/app/components/modals/buy-options-modal.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'ui/app/components/modals') diff --git a/ui/app/components/modals/buy-options-modal.js b/ui/app/components/modals/buy-options-modal.js index f1a5aa9fd..33615c483 100644 --- a/ui/app/components/modals/buy-options-modal.js +++ b/ui/app/components/modals/buy-options-modal.js @@ -42,7 +42,7 @@ BuyOptions.prototype.render = function () { h('div.buy-modal-content-title', { style: {}, }, 'Transfers'), - h('div', {}, 'How would you like to buy Ether?'), + h('div', {}, 'How would you like to deposit Ether?'), ]), h('div.buy-modal-content-options.flex-column.flex-center', {}, [ @@ -54,7 +54,7 @@ BuyOptions.prototype.render = function () { }, }, [ h('div.buy-modal-content-option-title', {}, 'Coinbase'), - h('div.buy-modal-content-option-subtitle', {}, 'Buy with Fiat'), + h('div.buy-modal-content-option-subtitle', {}, 'Deposit with Fiat'), ]), // h('div.buy-modal-content-option', {}, [ -- cgit From 4336794355e819f798343e0de3cea6933c8121ee Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Tue, 24 Oct 2017 00:43:12 -0700 Subject: Fix styling in private key modal --- ui/app/components/modals/export-private-key-modal.js | 1 - 1 file changed, 1 deletion(-) (limited to 'ui/app/components/modals') diff --git a/ui/app/components/modals/export-private-key-modal.js b/ui/app/components/modals/export-private-key-modal.js index 302596eda..80d7779ef 100644 --- a/ui/app/components/modals/export-private-key-modal.js +++ b/ui/app/components/modals/export-private-key-modal.js @@ -66,7 +66,6 @@ ExportPrivateKeyModal.prototype.renderPasswordInput = function (privateKey) { }) : h('input.private-key-password-input', { type: 'password', - placeholder: 'Type password', onChange: event => this.setState({ password: event.target.value }), }) } -- cgit From 62314318948067cddd97fe1092f9949a2b80bf7f Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Tue, 24 Oct 2017 22:48:20 -0700 Subject: Change download to show in Export Private Key Modal --- ui/app/components/modals/export-private-key-modal.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'ui/app/components/modals') diff --git a/ui/app/components/modals/export-private-key-modal.js b/ui/app/components/modals/export-private-key-modal.js index 80d7779ef..2d8470634 100644 --- a/ui/app/components/modals/export-private-key-modal.js +++ b/ui/app/components/modals/export-private-key-modal.js @@ -83,7 +83,7 @@ ExportPrivateKeyModal.prototype.renderButtons = function (privateKey, password, (privateKey ? this.renderButton('btn-clear', () => hideModal(), 'Done') - : this.renderButton('btn-clear', () => this.exportAccountAndGetPrivateKey(this.state.password, address), 'Download') + : this.renderButton('btn-clear', () => this.exportAccountAndGetPrivateKey(this.state.password, address), 'Show') ), ]) @@ -117,7 +117,7 @@ ExportPrivateKeyModal.prototype.render = function () { h('div.account-modal-divider'), - h('span.modal-body-title', 'Download Private Keys'), + h('span.modal-body-title', 'Show Private Keys'), h('div.private-key-password', {}, [ this.renderPasswordLabel(privateKey), -- cgit From 0d522139ba7c5372e0ef4219a69a4b8e8f83706a Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Wed, 25 Oct 2017 01:08:14 -0700 Subject: Fix gas input styling on mobile view --- ui/app/components/modals/modal.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) (limited to 'ui/app/components/modals') diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js index 88deb2bb0..e15dd6c1b 100644 --- a/ui/app/components/modals/modal.js +++ b/ui/app/components/modals/modal.js @@ -162,10 +162,9 @@ const MODALS = { h(CustomizeGasModal, {}, []), ], mobileModalStyle: { - width: '355px', - height: '598px', - // top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh', - top: '5%', + width: '100vw', + height: '100vh', + top: '0', transform: 'none', left: '0', right: '0', -- cgit 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') 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 From 22d9e3a7e6dfd21b3ea52007030d71f53e29b851 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Wed, 25 Oct 2017 18:23:46 -0700 Subject: Allow editing account name in account details modal --- ui/app/components/modals/account-details-modal.js | 21 +++++++++++++-------- 1 file changed, 13 insertions(+), 8 deletions(-) (limited to 'ui/app/components/modals') diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js index 37a62e1c0..e3c936702 100644 --- a/ui/app/components/modals/account-details-modal.js +++ b/ui/app/components/modals/account-details-modal.js @@ -7,6 +7,7 @@ const AccountModalContainer = require('./account-modal-container') const { getSelectedIdentity, getSelectedAddress } = require('../../selectors') const genAccountLink = require('../../../lib/account-link.js') const QrView = require('../qr-code') +const EditableLabel = require('../editable-label') function mapStateToProps (state) { return { @@ -23,6 +24,7 @@ function mapDispatchToProps (dispatch) { dispatch(actions.showModal({ name: 'EXPORT_PRIVATE_KEY' })) }, hideModal: () => dispatch(actions.hideModal()), + saveAccountLabel: (address, label) => dispatch(actions.saveAccountLabel(address, label)), } } @@ -41,14 +43,19 @@ AccountDetailsModal.prototype.render = function () { selectedIdentity, network, showExportPrivateKeyModal, - hideModal, + saveAccountLabel, } = this.props const { name, address } = selectedIdentity return h(AccountModalContainer, {}, [ + h(EditableLabel, { + className: 'account-modal__name', + defaultValue: name, + onSubmit: label => saveAccountLabel(address, label), + }), + h(QrView, { Qr: { - message: name, data: address, }, }), @@ -57,14 +64,12 @@ AccountDetailsModal.prototype.render = function () { h('button.btn-clear', { onClick: () => global.platform.openWindow({ url: genAccountLink(address, network) }), - }, [ 'View account on Etherscan' ]), + }, 'View account on Etherscan'), // Holding on redesign for Export Private Key functionality h('button.btn-clear', { - onClick: () => { - showExportPrivateKeyModal() - }, - }, [ 'Export private key' ]), - + onClick: () => showExportPrivateKeyModal(), + }, 'Export private key'), + ]) } -- cgit 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') 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 From 5a94775b3fa22517a71232ebe229ee83e9debcf1 Mon Sep 17 00:00:00 2001 From: Dan Date: Thu, 2 Nov 2017 00:00:33 -0230 Subject: Lint fixes for NewUI-flat. --- ui/app/components/modals/account-details-modal.js | 2 +- ui/app/components/modals/export-private-key-modal.js | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) (limited to 'ui/app/components/modals') diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js index e3c936702..4bf671834 100644 --- a/ui/app/components/modals/account-details-modal.js +++ b/ui/app/components/modals/account-details-modal.js @@ -4,7 +4,7 @@ const inherits = require('util').inherits const connect = require('react-redux').connect const actions = require('../../actions') const AccountModalContainer = require('./account-modal-container') -const { getSelectedIdentity, getSelectedAddress } = require('../../selectors') +const { getSelectedIdentity } = require('../../selectors') const genAccountLink = require('../../../lib/account-link.js') const QrView = require('../qr-code') const EditableLabel = require('../editable-label') diff --git a/ui/app/components/modals/export-private-key-modal.js b/ui/app/components/modals/export-private-key-modal.js index 2d8470634..193755df5 100644 --- a/ui/app/components/modals/export-private-key-modal.js +++ b/ui/app/components/modals/export-private-key-modal.js @@ -92,7 +92,6 @@ ExportPrivateKeyModal.prototype.renderButtons = function (privateKey, password, ExportPrivateKeyModal.prototype.render = function () { const { selectedIdentity, - network, warning, showAccountDetailModal, hideModal, -- cgit From 56e9f98bd05de8ae26f653d15eec4304f0c72155 Mon Sep 17 00:00:00 2001 From: Dan Date: Thu, 2 Nov 2017 09:45:59 -0230 Subject: More lint fixes --- ui/app/components/modals/modal.js | 2 +- ui/app/components/modals/shapeshift-deposit-tx-modal.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) (limited to 'ui/app/components/modals') diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js index e15dd6c1b..842081f40 100644 --- a/ui/app/components/modals/modal.js +++ b/ui/app/components/modals/modal.js @@ -220,7 +220,7 @@ Modal.prototype.render = function () { const children = modal.contents const modalStyle = modal[isMobileView() ? 'mobileModalStyle' : 'laptopModalStyle'] - const contentStyle = modal.contentStyle || {}; + const contentStyle = modal.contentStyle || {} return h(FadeModal, { diff --git a/ui/app/components/modals/shapeshift-deposit-tx-modal.js b/ui/app/components/modals/shapeshift-deposit-tx-modal.js index 1fd1ade00..24af5a0de 100644 --- a/ui/app/components/modals/shapeshift-deposit-tx-modal.js +++ b/ui/app/components/modals/shapeshift-deposit-tx-modal.js @@ -35,6 +35,6 @@ ShapeshiftDepositTxModal.prototype.render = function () { }, [ h('div', {}, [ h(QrView, {key: 'qr', Qr}), - ]) + ]), ]) } -- cgit From 424c1f23c91b06b687ddb3a3cbc79610584dc23f Mon Sep 17 00:00:00 2001 From: cjeria Date: Wed, 8 Nov 2017 15:41:29 -0800 Subject: darker backdrop style for modal --- ui/app/components/modals/modal.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/components/modals') diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js index 842081f40..f2909f3c3 100644 --- a/ui/app/components/modals/modal.js +++ b/ui/app/components/modals/modal.js @@ -189,7 +189,7 @@ const MODALS = { } const BACKDROPSTYLE = { - backgroundColor: 'rgba(245, 245, 245, 0.85)', + backgroundColor: 'rgba(0, 0, 0, 0.5)', } function mapStateToProps (state) { -- cgit From 544166437a0a41ce25d3d47814409a7ce01b4e07 Mon Sep 17 00:00:00 2001 From: Dan Date: Fri, 10 Nov 2017 00:02:53 -0330 Subject: Deposit button shows link to faucet on testnet networks. --- ui/app/components/modals/buy-options-modal.js | 38 ++++++++++++++++----------- 1 file changed, 23 insertions(+), 15 deletions(-) (limited to 'ui/app/components/modals') diff --git a/ui/app/components/modals/buy-options-modal.js b/ui/app/components/modals/buy-options-modal.js index 33615c483..53e40ba92 100644 --- a/ui/app/components/modals/buy-options-modal.js +++ b/ui/app/components/modals/buy-options-modal.js @@ -3,6 +3,7 @@ const h = require('react-hyperscript') const inherits = require('util').inherits const connect = require('react-redux').connect const actions = require('../../actions') +const networkNames = require('../../../../app/scripts/config.js').networkNames function mapStateToProps (state) { return { @@ -22,6 +23,7 @@ function mapDispatchToProps (dispatch) { showAccountDetailModal: () => { dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' })) }, + toFaucet: network => dispatch(actions.buyEth({ network })), } } @@ -32,7 +34,20 @@ function BuyOptions () { module.exports = connect(mapStateToProps, mapDispatchToProps)(BuyOptions) +BuyOptions.prototype.renderModalContentOption = function (title, header, onClick) { + return h('div.buy-modal-content-option', { + onClick, + }, [ + h('div.buy-modal-content-option-title', {}, title), + h('div.buy-modal-content-option-subtitle', {}, header), + ]) +} + BuyOptions.prototype.render = function () { + const { network, toCoinbase, address, toFaucet } = this.props + const networkIsTest = ['3', '4', '42'].find(n => n === network) + const networkName = networkNames[network] + return h('div', {}, [ h('div.buy-modal-content.transfers-subview', { }, [ @@ -47,27 +62,20 @@ BuyOptions.prototype.render = function () { 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', {}, 'Deposit with Fiat'), - ]), + networkIsTest + ? this.renderModalContentOption(networkName, 'Test Faucet', () => toFaucet(network)) + : this.renderModalContentOption('Coinbase', 'Deposit with Fiat', () => toCoinbase(address)), // 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.buy-modal-content-option', { - onClick: () => this.goToAccountDetailsModal(), - }, [ - h('div.buy-modal-content-option-title', {}, 'Direct Deposit'), - h('div.buy-modal-content-option-subtitle', {}, 'Deposit from another account'), - ]), + this.renderModalContentOption( + 'Direct Deposit', + 'Deposit from another account', + () => this.goToAccountDetailsModal() + ), ]), -- cgit From 7eb083bd9f1a8ce0e9c3e83e8b6bfb4d5a7b59cc Mon Sep 17 00:00:00 2001 From: Dan Date: Fri, 10 Nov 2017 21:06:00 -0330 Subject: Improve variable name. --- ui/app/components/modals/buy-options-modal.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'ui/app/components/modals') diff --git a/ui/app/components/modals/buy-options-modal.js b/ui/app/components/modals/buy-options-modal.js index 53e40ba92..d735983f9 100644 --- a/ui/app/components/modals/buy-options-modal.js +++ b/ui/app/components/modals/buy-options-modal.js @@ -45,7 +45,7 @@ BuyOptions.prototype.renderModalContentOption = function (title, header, onClick BuyOptions.prototype.render = function () { const { network, toCoinbase, address, toFaucet } = this.props - const networkIsTest = ['3', '4', '42'].find(n => n === network) + const isTestNetwork = ['3', '4', '42'].find(n => n === network) const networkName = networkNames[network] return h('div', {}, [ @@ -62,7 +62,7 @@ BuyOptions.prototype.render = function () { h('div.buy-modal-content-options.flex-column.flex-center', {}, [ - networkIsTest + isTestNetwork ? this.renderModalContentOption(networkName, 'Test Faucet', () => toFaucet(network)) : this.renderModalContentOption('Coinbase', 'Deposit with Fiat', () => toCoinbase(address)), -- cgit From 9db00fa507c04180f6425cc3b1e3187afa193ab8 Mon Sep 17 00:00:00 2001 From: Dan Date: Mon, 4 Dec 2017 22:30:11 -0330 Subject: Show user notifications after switch between UIs --- ui/app/components/modals/modal.js | 37 +++++++++++++++++++ ui/app/components/modals/notification-modal.js | 51 ++++++++++++++++++++++++++ 2 files changed, 88 insertions(+) create mode 100644 ui/app/components/modals/notification-modal.js (limited to 'ui/app/components/modals') diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js index f2909f3c3..2ff6accaa 100644 --- a/ui/app/components/modals/modal.js +++ b/ui/app/components/modals/modal.js @@ -16,6 +16,7 @@ const NewAccountModal = require('./new-account-modal') const ShapeshiftDepositTxModal = require('./shapeshift-deposit-tx-modal.js') const HideTokenConfirmationModal = require('./hide-token-confirmation-modal') const CustomizeGasModal = require('../customize-gas-modal') +const NotifcationModal = require('./notification-modal') const accountModalStyle = { mobileModalStyle: { @@ -133,6 +134,42 @@ const MODALS = { }, }, + BETA_UI_NOTIFICATION_MODAL: { + contents: [ + h(NotifcationModal, { + header: 'Welcome to the New UI (Beta)', + message: `You are now using the new Metamask UI. Take a look around, try out new features like sending tokens, + and let us know if you have any issues.`, + }), + ], + mobileModalStyle: { + width: '95%', + top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh', + }, + laptopModalStyle: { + width: '449px', + top: 'calc(33% + 45px)', + }, + }, + + OLD_UI_NOTIFICATION_MODAL: { + contents: [ + h(NotifcationModal, { + header: 'Old UI', + message: `You have returned to the old UI. You can switch back to the New UI through the option in the top + right dropdown menu.`, + }), + ], + mobileModalStyle: { + width: '95%', + top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh', + }, + laptopModalStyle: { + width: '449px', + top: 'calc(33% + 45px)', + }, + }, + NEW_ACCOUNT: { contents: [ h(NewAccountModal, {}, []), diff --git a/ui/app/components/modals/notification-modal.js b/ui/app/components/modals/notification-modal.js new file mode 100644 index 000000000..239144b0c --- /dev/null +++ b/ui/app/components/modals/notification-modal.js @@ -0,0 +1,51 @@ +const { Component } = require('react') +const PropTypes = require('prop-types') +const h = require('react-hyperscript') +const { connect } = require('react-redux') +const actions = require('../../actions') + +class NotificationModal extends Component { + render () { + const { + header, + message, + } = this.props + + return h('div', [ + h('div.notification-modal-wrapper', { + }, [ + + h('div.notification-modal-header', {}, [ + header, + ]), + + h('div.notification-modal-message-wrapper', {}, [ + h('div.notification-modal-message', {}, [ + message, + ]), + ]), + + h('div.modal-close-x', { + onClick: this.props.hideModal, + }), + + ]), + ]) + } +} + +NotificationModal.propTypes = { + hideModal: PropTypes.func, + header: PropTypes.string, + message: PropTypes.string, +} + +const mapDispatchToProps = dispatch => { + return { + hideModal: () => { + dispatch(actions.hideModal()) + }, + } +} + +module.exports = connect(null, mapDispatchToProps)(NotificationModal) -- cgit From 376e1365727a97344d70d627ae27e8e70830a17a Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Thu, 11 Jan 2018 16:30:07 -0800 Subject: Update styling for buttons, font weights --- ui/app/components/modals/account-details-modal.js | 4 ++-- ui/app/components/modals/export-private-key-modal.js | 10 +++++++--- 2 files changed, 9 insertions(+), 5 deletions(-) (limited to 'ui/app/components/modals') diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js index 4bf671834..c1f7a3236 100644 --- a/ui/app/components/modals/account-details-modal.js +++ b/ui/app/components/modals/account-details-modal.js @@ -62,12 +62,12 @@ AccountDetailsModal.prototype.render = function () { h('div.account-modal-divider'), - h('button.btn-clear', { + h('button.btn-clear.account-modal__button', { onClick: () => global.platform.openWindow({ url: genAccountLink(address, network) }), }, 'View account on Etherscan'), // Holding on redesign for Export Private Key functionality - h('button.btn-clear', { + h('button.btn-clear.account-modal__button', { onClick: () => showExportPrivateKeyModal(), }, 'Export private key'), diff --git a/ui/app/components/modals/export-private-key-modal.js b/ui/app/components/modals/export-private-key-modal.js index 193755df5..422f23f44 100644 --- a/ui/app/components/modals/export-private-key-modal.js +++ b/ui/app/components/modals/export-private-key-modal.js @@ -79,11 +79,15 @@ ExportPrivateKeyModal.prototype.renderButton = function (className, onClick, lab ExportPrivateKeyModal.prototype.renderButtons = function (privateKey, password, address, hideModal) { return h('div.export-private-key-buttons', {}, [ - !privateKey && this.renderButton('btn-clear btn-cancel', () => hideModal(), 'Cancel'), + !privateKey && this.renderButton( + 'btn-cancel export-private-key__button export-private-key__button--cancel', + () => hideModal(), + 'Cancel' + ), (privateKey - ? this.renderButton('btn-clear', () => hideModal(), 'Done') - : this.renderButton('btn-clear', () => this.exportAccountAndGetPrivateKey(this.state.password, address), 'Show') + ? this.renderButton('btn-clear export-private-key__button', () => hideModal(), 'Done') + : this.renderButton('btn-clear export-private-key__button', () => this.exportAccountAndGetPrivateKey(this.state.password, address), 'Confirm') ), ]) -- cgit From 5c1dcf3e9bdb317dd8b42aadb18657eb4bfa2e0f Mon Sep 17 00:00:00 2001 From: Dan J Miller Date: Fri, 12 Jan 2018 16:18:18 -0330 Subject: [NewUI-flat] New deposit ether modal UI. (#2642) * New deposit ether modal. * New deposit modal full screen on mobile, and other style fixes. * Hide shapeshift option from deposit modal for now. * Add shapeshift form to new deposit modal. * Store recipient address for shapeshift tx in background. * Use Simpledropdown to achieve desired styling in coin selector. * Lint fix * Fix typos and remove dead code. * Remove storage of shapeshift receiving address from background. * Fix typos --- ui/app/components/modals/buy-options-modal.js | 2 +- ui/app/components/modals/deposit-ether-modal.js | 182 ++++++++++++++++++++++++ ui/app/components/modals/modal.js | 32 +++++ 3 files changed, 215 insertions(+), 1 deletion(-) create mode 100644 ui/app/components/modals/deposit-ether-modal.js (limited to 'ui/app/components/modals') diff --git a/ui/app/components/modals/buy-options-modal.js b/ui/app/components/modals/buy-options-modal.js index d735983f9..74a7a847e 100644 --- a/ui/app/components/modals/buy-options-modal.js +++ b/ui/app/components/modals/buy-options-modal.js @@ -69,7 +69,7 @@ BuyOptions.prototype.render = function () { // 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'), - // ]), + // ]),, this.renderModalContentOption( 'Direct Deposit', diff --git a/ui/app/components/modals/deposit-ether-modal.js b/ui/app/components/modals/deposit-ether-modal.js new file mode 100644 index 000000000..3e6d3fde1 --- /dev/null +++ b/ui/app/components/modals/deposit-ether-modal.js @@ -0,0 +1,182 @@ +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 networkNames = require('../../../../app/scripts/config.js').networkNames +const ShapeshiftForm = require('../shapeshift-form') + +const DIRECT_DEPOSIT_ROW_TITLE = 'Directly Deposit Ether' +const DIRECT_DEPOSIT_ROW_TEXT = `If you already have some Ether, the quickest way to get Ether in +your new wallet by direct deposit.` +const COINBASE_ROW_TITLE = 'Buy on Coinbase' +const COINBASE_ROW_TEXT = `Coinbase is the world’s most popular way to buy and sell bitcoin, +ethereum, and litecoin.` +const SHAPESHIFT_ROW_TITLE = 'Deposit with ShapeShift' +const SHAPESHIFT_ROW_TEXT = `If you own other cryptocurrencies, you can trade and deposit Ether +directly into your MetaMask wallet. No Account Needed.` +const FAUCET_ROW_TITLE = 'Test Faucet' +const facuetRowText = networkName => `Get Ether from a faucet for the ${networkName}` + +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()) + }, + showAccountDetailModal: () => { + dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' })) + }, + toFaucet: network => dispatch(actions.buyEth({ network })), + } +} + +inherits(DepositEtherModal, Component) +function DepositEtherModal () { + Component.call(this) + + this.state = { + buyingWithShapeshift: false, + } +} + +module.exports = connect(mapStateToProps, mapDispatchToProps)(DepositEtherModal) + +DepositEtherModal.prototype.renderRow = function ({ + logo, + title, + text, + buttonLabel, + onButtonClick, + hide, + className, + hideButton, + hideTitle, + onBackClick, +}) { + if (hide) { + return null + } + + return h('div', { + className: className || 'deposit-ether-modal__buy-row', + }, [ + + h('div.deposit-ether-modal__buy-row__back', { + onClick: onBackClick, + }, [ + + h('i.fa.fa-arrow-left.cursor-pointer'), + + ]), + + h('div.deposit-ether-modal__buy-row__logo', [logo]), + + h('div.deposit-ether-modal__buy-row__description', [ + + !hideTitle && h('div.deposit-ether-modal__buy-row__description__title', [title]), + + h('div.deposit-ether-modal__buy-row__description__text', [text]), + + ]), + + !hideButton && h('div.deposit-ether-modal__buy-row__button', [ + h('button.deposit-ether-modal__deposit-button', { + onClick: onButtonClick, + }, [buttonLabel]), + ]), + + ]) +} + +DepositEtherModal.prototype.render = function () { + const { network, toCoinbase, address, toFaucet } = this.props + const { buyingWithShapeshift } = this.state + + const isTestNetwork = ['3', '4', '42'].find(n => n === network) + const networkName = networkNames[network] + + return h('div.deposit-ether-modal', {}, [ + + h('div.deposit-ether-modal__header', [ + + h('div.deposit-ether-modal__header__title', ['Deposit Ether']), + + h('div.deposit-ether-modal__header__description', [ + 'To interact with decentralized applications using MetaMask, you’ll need Ether in your wallet.', + ]), + + h('div.deposit-ether-modal__header__close', { + onClick: () => { + this.setState({ buyingWithShapeshift: false }) + this.props.hideModal() + }, + }), + + ]), + + h('div.deposit-ether-modal__buy-rows', [ + + this.renderRow({ + logo: h('img.deposit-ether-modal__buy-row__eth-logo', { src: '../../../images/eth_logo.svg' }), + title: DIRECT_DEPOSIT_ROW_TITLE, + text: DIRECT_DEPOSIT_ROW_TEXT, + buttonLabel: 'View Account', + onButtonClick: () => this.goToAccountDetailsModal(), + hide: buyingWithShapeshift, + }), + + this.renderRow({ + logo: h('i.fa.fa-tint.fa-2x'), + title: FAUCET_ROW_TITLE, + text: facuetRowText(networkName), + buttonLabel: 'Get Ether', + onButtonClick: () => toFaucet(network), + hide: !isTestNetwork || buyingWithShapeshift, + }), + + this.renderRow({ + logo: h('img.deposit-ether-modal__buy-row__coinbase-logo', { + src: '../../../images/coinbase logo.png', + }), + title: COINBASE_ROW_TITLE, + text: COINBASE_ROW_TEXT, + buttonLabel: 'Continue to Coinbase', + onButtonClick: () => toCoinbase(address), + hide: isTestNetwork || buyingWithShapeshift, + }), + + this.renderRow({ + logo: h('img.deposit-ether-modal__buy-row__shapeshift-logo', { + src: '../../../images/shapeshift logo.png', + }), + title: SHAPESHIFT_ROW_TITLE, + text: SHAPESHIFT_ROW_TEXT, + buttonLabel: 'Buy with Shapeshift', + onButtonClick: () => this.setState({ buyingWithShapeshift: true }), + hide: isTestNetwork, + hideButton: buyingWithShapeshift, + hideTitle: buyingWithShapeshift, + onBackClick: () => this.setState({ buyingWithShapeshift: false }), + className: buyingWithShapeshift && 'deposit-ether-modal__buy-row__shapeshift-buy', + }), + + buyingWithShapeshift && h(ShapeshiftForm), + + ]), + ]) +} + +DepositEtherModal.prototype.goToAccountDetailsModal = function () { + this.props.hideModal() + this.props.showAccountDetailModal() +} diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js index 2ff6accaa..afb2a2175 100644 --- a/ui/app/components/modals/modal.js +++ b/ui/app/components/modals/modal.js @@ -9,6 +9,7 @@ const isPopupOrNotification = require('../../../../app/scripts/lib/is-popup-or-n // Modal Components const BuyOptions = require('./buy-options-modal') +const DepositEtherModal = require('./deposit-ether-modal') const AccountDetailsModal = require('./account-details-modal') const EditAccountNameModal = require('./edit-account-name-modal') const ExportPrivateKeyModal = require('./export-private-key-modal') @@ -73,6 +74,37 @@ const MODALS = { }, }, + DEPOSIT_ETHER: { + contents: [ + h(DepositEtherModal, {}, []), + ], + mobileModalStyle: { + width: '100%', + height: '100%', + transform: 'none', + left: '0', + right: '0', + margin: '0 auto', + boxShadow: '0 0 7px 0 rgba(0,0,0,0.08)', + top: '0', + display: 'flex', + }, + laptopModalStyle: { + width: '900px', + maxWidth: '900px', + top: 'calc(10% + 10px)', + left: '0', + right: '0', + margin: '0 auto', + boxShadow: '0 0 6px 0 rgba(0,0,0,0.3)', + borderRadius: '8px', + transform: 'none', + }, + contentStyle: { + borderRadius: '8px', + }, + }, + EDIT_ACCOUNT_NAME: { contents: [ h(EditAccountNameModal, {}, []), -- cgit From 644adeccf6b5365ef2c8c9a5ba69b90fdaa1f2ec Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Sat, 13 Jan 2018 14:59:16 -0800 Subject: Fix Hide Token modal styling, popup positioning --- ui/app/components/modals/hide-token-confirmation-modal.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'ui/app/components/modals') diff --git a/ui/app/components/modals/hide-token-confirmation-modal.js b/ui/app/components/modals/hide-token-confirmation-modal.js index fa3ad0b1e..56c7ba299 100644 --- a/ui/app/components/modals/hide-token-confirmation-modal.js +++ b/ui/app/components/modals/hide-token-confirmation-modal.js @@ -58,12 +58,12 @@ HideTokenConfirmationModal.prototype.render = function () { ]), h('div.hide-token-confirmation__buttons', {}, [ - h('button.btn-clear', { + h('button.btn-cancel.hide-token-confirmation__button', { onClick: () => hideModal(), }, [ 'CANCEL', ]), - h('button.btn-clear', { + h('button.btn-clear.hide-token-confirmation__button', { onClick: () => hideToken(address), }, [ 'HIDE', -- cgit From 65e9d9efc56a99ecd3a46b98ed58af9604374f68 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Tue, 16 Jan 2018 17:41:42 -0800 Subject: Fix rendering QR code in old UI, hide unnecessary back button --- ui/app/components/modals/deposit-ether-modal.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'ui/app/components/modals') diff --git a/ui/app/components/modals/deposit-ether-modal.js b/ui/app/components/modals/deposit-ether-modal.js index 3e6d3fde1..532d66653 100644 --- a/ui/app/components/modals/deposit-ether-modal.js +++ b/ui/app/components/modals/deposit-ether-modal.js @@ -62,6 +62,7 @@ DepositEtherModal.prototype.renderRow = function ({ hideButton, hideTitle, onBackClick, + showBackButton, }) { if (hide) { return null @@ -71,7 +72,7 @@ DepositEtherModal.prototype.renderRow = function ({ className: className || 'deposit-ether-modal__buy-row', }, [ - h('div.deposit-ether-modal__buy-row__back', { + onBackClick && showBackButton && h('div.deposit-ether-modal__buy-row__back', { onClick: onBackClick, }, [ @@ -167,6 +168,7 @@ DepositEtherModal.prototype.render = function () { hideButton: buyingWithShapeshift, hideTitle: buyingWithShapeshift, onBackClick: () => this.setState({ buyingWithShapeshift: false }), + showBackButton: this.state.buyingWithShapeshift, className: buyingWithShapeshift && 'deposit-ether-modal__buy-row__shapeshift-buy', }), -- cgit From cd976a2765b9e442642faec8a985c049f8cb393b Mon Sep 17 00:00:00 2001 From: Dan Date: Thu, 8 Feb 2018 13:48:25 -0330 Subject: Add reset account button to new UI. --- ui/app/components/modals/modal.js | 13 ++++++ ui/app/components/modals/notification-modal.js | 36 ++++++++++++++--- .../notification-modals/confirm-reset-account.js | 46 ++++++++++++++++++++++ 3 files changed, 89 insertions(+), 6 deletions(-) create mode 100644 ui/app/components/modals/notification-modals/confirm-reset-account.js (limited to 'ui/app/components/modals') diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js index afb2a2175..97fe38292 100644 --- a/ui/app/components/modals/modal.js +++ b/ui/app/components/modals/modal.js @@ -18,6 +18,7 @@ const ShapeshiftDepositTxModal = require('./shapeshift-deposit-tx-modal.js') const HideTokenConfirmationModal = require('./hide-token-confirmation-modal') const CustomizeGasModal = require('../customize-gas-modal') const NotifcationModal = require('./notification-modal') +const ConfirmResetAccount = require('./notification-modals/confirm-reset-account') const accountModalStyle = { mobileModalStyle: { @@ -202,6 +203,18 @@ const MODALS = { }, }, + CONFIRM_RESET_ACCOUNT: { + contents: h(ConfirmResetAccount), + mobileModalStyle: { + width: '95%', + top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh', + }, + laptopModalStyle: { + width: '473px', + top: 'calc(33% + 45px)', + }, + }, + NEW_ACCOUNT: { contents: [ h(NewAccountModal, {}, []), diff --git a/ui/app/components/modals/notification-modal.js b/ui/app/components/modals/notification-modal.js index 239144b0c..621a974d0 100644 --- a/ui/app/components/modals/notification-modal.js +++ b/ui/app/components/modals/notification-modal.js @@ -9,26 +9,47 @@ class NotificationModal extends Component { const { header, message, + showCancelButton = false, + showConfirmButton = false, + hideModal, + onConfirm, } = this.props + const showButtons = showCancelButton || showConfirmButton + return h('div', [ - h('div.notification-modal-wrapper', { + h('div.notification-modal__wrapper', { }, [ - h('div.notification-modal-header', {}, [ + h('div.notification-modal__header', {}, [ header, ]), - h('div.notification-modal-message-wrapper', {}, [ - h('div.notification-modal-message', {}, [ + h('div.notification-modal__message-wrapper', {}, [ + h('div.notification-modal__message', {}, [ message, ]), ]), h('div.modal-close-x', { - onClick: this.props.hideModal, + onClick: hideModal, }), + showButtons && h('div.notification-modal__buttons', [ + + showCancelButton && h('div.btn-cancel.notification-modal__buttons__btn', { + onClick: hideModal, + }, 'Cancel'), + + showConfirmButton && h('div.btn-clear.notification-modal__buttons__btn', { + onClick: () => { + onConfirm() + hideModal() + }, + }, 'Confirm'), + + ]), + ]), ]) } @@ -37,7 +58,10 @@ class NotificationModal extends Component { NotificationModal.propTypes = { hideModal: PropTypes.func, header: PropTypes.string, - message: PropTypes.string, + message: PropTypes.node, + showCancelButton: PropTypes.bool, + showConfirmButton: PropTypes.bool, + onConfirm: PropTypes.func, } const mapDispatchToProps = dispatch => { diff --git a/ui/app/components/modals/notification-modals/confirm-reset-account.js b/ui/app/components/modals/notification-modals/confirm-reset-account.js new file mode 100644 index 000000000..e1bc91b24 --- /dev/null +++ b/ui/app/components/modals/notification-modals/confirm-reset-account.js @@ -0,0 +1,46 @@ +const { Component } = require('react') +const PropTypes = require('prop-types') +const h = require('react-hyperscript') +const { connect } = require('react-redux') +const actions = require('../../../actions') +const NotifcationModal = require('../notification-modal') + +class ConfirmResetAccount extends Component { + render () { + const { resetAccount } = this.props + + return h(NotifcationModal, { + header: 'Are you sure you want to reset account?', + message: h('div', [ + + h('span', `Resetting is for developer use only. This button wipes the current account's transaction history, + which is used to calculate the current account nonce. `), + + h('a.notification-modal__link', { + href: 'http://metamask.helpscoutdocs.com/article/36-resetting-an-account', + target: '_blank', + onClick (event) { global.platform.openWindow({ url: event.target.href }) }, + }, 'Read more.'), + + ]), + showCancelButton: true, + showConfirmButton: true, + onConfirm: resetAccount, + + }) + } +} + +ConfirmResetAccount.propTypes = { + resetAccount: PropTypes.func, +} + +const mapDispatchToProps = dispatch => { + return { + resetAccount: () => { + dispatch(actions.resetAccount()) + }, + } +} + +module.exports = connect(null, mapDispatchToProps)(ConfirmResetAccount) -- cgit