From 84c3d3c6dbb4454a599bb31008e71d052321ae02 Mon Sep 17 00:00:00 2001 From: kumavis Date: Wed, 9 Aug 2017 00:36:18 -0700 Subject: [PATCH 1/4] ui - buy button view - refactor --- ui/app/components/buy-button-subview.js | 150 ++++++++++++++++-------- 1 file 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, - ]) } } From 897d00efa0cf7b978983fd8d4c40febe40eba446 Mon Sep 17 00:00:00 2001 From: kumavis Date: Wed, 9 Aug 2017 01:00:06 -0700 Subject: [PATCH 2/4] ui - buy eth - add dharma beta to kovan --- ui/app/components/buy-button-subview.js | 34 ++++++++++++++++--------- 1 file changed, 22 insertions(+), 12 deletions(-) diff --git a/ui/app/components/buy-button-subview.js b/ui/app/components/buy-button-subview.js index 27014eaf6..e4624ada8 100644 --- a/ui/app/components/buy-button-subview.js +++ b/ui/app/components/buy-button-subview.js @@ -138,30 +138,40 @@ BuyButtonSubview.prototype.primarySubview = function () { switch (network) { case 'loading': return - + case '1': return this.mainnetSubview() + // Ropsten, Rinkeby, Kovan case '3': case '4': case '42': - const networkName = networkNames[network] - const label = `${networkName} Test Faucet` - return ( - h('div.flex-column', { + 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: { - alignItems: 'center', - margin: '20px 50px', + marginTop: '15px', }, - }, [ + }, label), + // Kovan only: Dharma loans beta + network === '42' ? ( h('button.text-transform-uppercase', { - onClick: () => this.props.dispatch(actions.buyEth({ network })), + onClick: () => this.navigateTo('https://borrow.dharma.io/'), style: { marginTop: '15px', }, - }, label), - ]) - ) + }, 'Borrow With Dharma (Beta)') + ) : null + ]) + ) default: return ( From 052d338b2b35bbea4cc4b11db6cdb13cbcc69001 Mon Sep 17 00:00:00 2001 From: kumavis Date: Wed, 9 Aug 2017 01:04:42 -0700 Subject: [PATCH 3/4] lint fix --- ui/app/components/buy-button-subview.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/app/components/buy-button-subview.js b/ui/app/components/buy-button-subview.js index e4624ada8..d9ccb36c5 100644 --- a/ui/app/components/buy-button-subview.js +++ b/ui/app/components/buy-button-subview.js @@ -169,7 +169,7 @@ BuyButtonSubview.prototype.primarySubview = function () { marginTop: '15px', }, }, 'Borrow With Dharma (Beta)') - ) : null + ) : null, ]) ) From 245125eb18a03f3ea91fa43a90ad59e628471d62 Mon Sep 17 00:00:00 2001 From: kumavis Date: Wed, 9 Aug 2017 12:25:38 -0700 Subject: [PATCH 4/4] ui - buy eth - formatting and moved network names to config --- app/scripts/config.js | 5 +++ ui/app/components/buy-button-subview.js | 42 +++++++++++-------------- 2 files changed, 24 insertions(+), 23 deletions(-) diff --git a/app/scripts/config.js b/app/scripts/config.js index 8e28db80e..c5f260583 100644 --- a/app/scripts/config.js +++ b/app/scripts/config.js @@ -12,4 +12,9 @@ module.exports = { kovan: KOVAN_RPC_URL, rinkeby: RINKEBY_RPC_URL, }, + networkNames: { + 3: 'Ropsten', + 4: 'Rinkeby', + 42: 'Kovan', + }, } diff --git a/ui/app/components/buy-button-subview.js b/ui/app/components/buy-button-subview.js index d9ccb36c5..15281171c 100644 --- a/ui/app/components/buy-button-subview.js +++ b/ui/app/components/buy-button-subview.js @@ -8,11 +8,7 @@ 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', -} +const networkNames = require('../../../app/scripts/config.js').networkNames module.exports = connect(mapStateToProps)(BuyButtonSubview) @@ -146,30 +142,30 @@ BuyButtonSubview.prototype.primarySubview = function () { 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 })), + const networkName = networkNames[network] + const label = `${networkName} Test Faucet` + return ( + h('div.flex-column', { style: { - marginTop: '15px', + alignItems: 'center', + margin: '20px 50px', }, - }, label), - // Kovan only: Dharma loans beta - network === '42' ? ( + }, [ h('button.text-transform-uppercase', { - onClick: () => this.navigateTo('https://borrow.dharma.io/'), + onClick: () => this.props.dispatch(actions.buyEth({ network })), style: { marginTop: '15px', }, - }, 'Borrow With Dharma (Beta)') - ) : null, + }, label), + // Kovan only: Dharma loans beta + network === '42' ? ( + h('button.text-transform-uppercase', { + onClick: () => this.navigateTo('https://borrow.dharma.io/'), + style: { + marginTop: '15px', + }, + }, 'Borrow With Dharma (Beta)') + ) : null, ]) )