aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app/components/buy-button-subview.js
diff options
context:
space:
mode:
Diffstat (limited to 'ui/app/components/buy-button-subview.js')
-rw-r--r--ui/app/components/buy-button-subview.js150
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,
- ])
}
}