diff options
ui - buy button view - refactor
-rw-r--r-- | ui/app/components/buy-button-subview.js | 150 |
1 files changed, 104 insertions, 46 deletions
diff --git a/ui/app/components/buy-button-subview.js b/ui/app/components/buy-button-subview.js index 759eb15bd..27014eaf6 100644 --- a/ui/app/components/buy-button-subview.js +++ b/ui/app/components/buy-button-subview.js @@ -8,6 +8,11 @@ const ShapeshiftForm = require('./shapeshift-form') const Loading = require('./loading') const AccountPanel = require('./account-panel') const RadioList = require('./custom-radio-list') +const networkNames = { + 3: 'Ropsten', + 4: 'Rinkeby', + 42: 'Kovan', +} module.exports = connect(mapStateToProps)(BuyButtonSubview) @@ -30,16 +35,30 @@ function BuyButtonSubview () { } BuyButtonSubview.prototype.render = function () { + return ( + h('div', { + style: { + width: '100%', + }, + }, [ + this.headerSubview(), + this.primarySubview(), + ]) + ) +} + +BuyButtonSubview.prototype.headerSubview = function () { const props = this.props const isLoading = props.isSubLoading - return ( - h('.buy-eth-section.flex-column', { + + h('.flex-column', { style: { alignItems: 'center', }, }, [ - // back button + + // header bar (back button, label) h('.flex-row', { style: { alignItems: 'center', @@ -63,6 +82,8 @@ BuyButtonSubview.prototype.render = function () { }, }, 'Buy Eth'), ]), + + // loading indication h('div', { style: { position: 'absolute', @@ -70,8 +91,10 @@ BuyButtonSubview.prototype.render = function () { left: '49vw', }, }, [ - h(Loading, {isLoading}), + h(Loading, { isLoading }), ]), + + // account panel h('div', { style: { width: '80%', @@ -83,17 +106,82 @@ BuyButtonSubview.prototype.render = function () { account: props.account, }), ]), - h('h3.text-transform-uppercase', { + + h('.flex-row', { style: { - paddingLeft: '15px', - fontFamily: 'Montserrat Light', - width: '100vw', - background: 'rgb(235, 235, 235)', - color: 'rgb(174, 174, 174)', - paddingTop: '4px', - paddingBottom: '4px', + alignItems: 'center', + justifyContent: 'center', }, - }, 'Select Service'), + }, [ + h('h3.text-transform-uppercase.flex-center', { + style: { + paddingLeft: '15px', + width: '100vw', + background: 'rgb(235, 235, 235)', + color: 'rgb(174, 174, 174)', + paddingTop: '4px', + paddingBottom: '4px', + }, + }, 'Select Service'), + ]), + + ]) + + ) +} + + +BuyButtonSubview.prototype.primarySubview = function () { + const props = this.props + const network = props.network + + switch (network) { + case 'loading': + return + + case '1': + return this.mainnetSubview() + + case '3': + case '4': + case '42': + const networkName = networkNames[network] + const label = `${networkName} Test Faucet` + return ( + h('div.flex-column', { + style: { + alignItems: 'center', + margin: '20px 50px', + }, + }, [ + h('button.text-transform-uppercase', { + onClick: () => this.props.dispatch(actions.buyEth({ network })), + style: { + marginTop: '15px', + }, + }, label), + ]) + ) + + default: + return ( + h('h2.error', 'Unknown network ID') + ) + + } +} + +BuyButtonSubview.prototype.mainnetSubview = function () { + const props = this.props + + return ( + + h('.flex-column', { + style: { + alignItems: 'center', + }, + }, [ + h('.flex-row.selected-exchange', { style: { position: 'relative', @@ -115,6 +203,7 @@ BuyButtonSubview.prototype.render = function () { onClick: this.radioHandler.bind(this), }), ]), + h('h3.text-transform-uppercase', { style: { paddingLeft: '15px', @@ -126,8 +215,10 @@ BuyButtonSubview.prototype.render = function () { paddingBottom: '4px', }, }, props.buyView.subview), + this.formVersionSubview(), ]) + ) } @@ -139,39 +230,6 @@ BuyButtonSubview.prototype.formVersionSubview = function () { } else if (this.props.buyView.formView.shapeshift) { return h(ShapeshiftForm, this.props) } - } else { - return h('div.flex-column', { - style: { - alignItems: 'center', - margin: '20px 50px', - }, - }, [ - h('h3.text-transform-uppercase', { - style: { - width: '225px', - marginBottom: '15px', - }, - }, 'In order to access this feature, please switch to the Main Network'), - ((network === '3') || (network === '4') || (network === '42')) ? h('h3.text-transform-uppercase', 'or go to the') : null, - (network === '3') ? h('button.text-transform-uppercase', { - onClick: () => this.props.dispatch(actions.buyEth({ network })), - style: { - marginTop: '15px', - }, - }, 'Ropsten Test Faucet') : null, - (network === '4') ? h('button.text-transform-uppercase', { - onClick: () => this.props.dispatch(actions.buyEth({ network })), - style: { - marginTop: '15px', - }, - }, 'Rinkeby Test Faucet') : null, - (network === '42') ? h('button.text-transform-uppercase', { - onClick: () => this.props.dispatch(actions.buyEth({ network })), - style: { - marginTop: '15px', - }, - }, 'Kovan Test Faucet') : null, - ]) } } |