From 71b2dd290b2bbf3107d06d0616ec8858d21b44da Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 20 Aug 2017 19:10:49 -0700 Subject: [PATCH] Enhance global modal to handle Buy, Edit, and Details Modals --- .../dropdowns/components/account-dropdowns.js | 5 +- .../modals/account-details-modal.js | 73 +++++++++++++++++ ui/app/components/modals/buy-modal.js | 43 ---------- .../buy-options-modal.js} | 2 +- .../modals/edit-account-name-modal.js | 80 +++++++++++++++++++ ui/app/components/modals/index.js | 4 - ui/app/components/modals/modal.js | 14 +++- 7 files changed, 169 insertions(+), 52 deletions(-) create mode 100644 ui/app/components/modals/account-details-modal.js delete mode 100644 ui/app/components/modals/buy-modal.js rename ui/app/components/{buy-options.js => modals/buy-options-modal.js} (98%) create mode 100644 ui/app/components/modals/edit-account-name-modal.js diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js index 6af90655b..9a9fbc0fc 100644 --- a/ui/app/components/dropdowns/components/account-dropdowns.js +++ b/ui/app/components/dropdowns/components/account-dropdowns.js @@ -189,7 +189,7 @@ class AccountDropdowns extends Component { { closeMenu: () => {}, onClick: () => { - this.props.showAccountDetail() + this.props.actions.showAccountDetailModal() }, style: Object.assign( {}, @@ -348,6 +348,9 @@ const mapDispatchToProps = (dispatch) => { showConfigPage: () => dispatch(actions.showConfigPage()), requestAccountExport: () => dispatch(actions.requestExportAccount()), showAccountDetail: (address) => dispatch(actions.showAccountDetail(address)), + showAccountDetailModal: () => { + dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' })) + }, addNewAccount: () => dispatch(actions.addNewAccount()), showImportPage: () => dispatch(actions.showImportPage()), showQrView: (selected, identity) => dispatch(actions.showQrView(selected, identity)), 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/buy-options.js b/ui/app/components/modals/buy-options-modal.js similarity index 98% rename from ui/app/components/buy-options.js rename to ui/app/components/modals/buy-options-modal.js index 7d640c007..170ac96b8 100644 --- a/ui/app/components/buy-options.js +++ b/ui/app/components/modals/buy-options-modal.js @@ -2,7 +2,7 @@ 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 actions = require('../../actions') function mapStateToProps (state) { return { 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) {