mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
ui - buy button view - refactor
This commit is contained in:
parent
57f6fce6b2
commit
84c3d3c6db
@ -8,6 +8,11 @@ const ShapeshiftForm = require('./shapeshift-form')
|
|||||||
const Loading = require('./loading')
|
const Loading = require('./loading')
|
||||||
const AccountPanel = require('./account-panel')
|
const AccountPanel = require('./account-panel')
|
||||||
const RadioList = require('./custom-radio-list')
|
const RadioList = require('./custom-radio-list')
|
||||||
|
const networkNames = {
|
||||||
|
3: 'Ropsten',
|
||||||
|
4: 'Rinkeby',
|
||||||
|
42: 'Kovan',
|
||||||
|
}
|
||||||
|
|
||||||
module.exports = connect(mapStateToProps)(BuyButtonSubview)
|
module.exports = connect(mapStateToProps)(BuyButtonSubview)
|
||||||
|
|
||||||
@ -30,16 +35,30 @@ function BuyButtonSubview () {
|
|||||||
}
|
}
|
||||||
|
|
||||||
BuyButtonSubview.prototype.render = function () {
|
BuyButtonSubview.prototype.render = function () {
|
||||||
|
return (
|
||||||
|
h('div', {
|
||||||
|
style: {
|
||||||
|
width: '100%',
|
||||||
|
},
|
||||||
|
}, [
|
||||||
|
this.headerSubview(),
|
||||||
|
this.primarySubview(),
|
||||||
|
])
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
BuyButtonSubview.prototype.headerSubview = function () {
|
||||||
const props = this.props
|
const props = this.props
|
||||||
const isLoading = props.isSubLoading
|
const isLoading = props.isSubLoading
|
||||||
|
|
||||||
return (
|
return (
|
||||||
h('.buy-eth-section.flex-column', {
|
|
||||||
|
h('.flex-column', {
|
||||||
style: {
|
style: {
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
},
|
},
|
||||||
}, [
|
}, [
|
||||||
// back button
|
|
||||||
|
// header bar (back button, label)
|
||||||
h('.flex-row', {
|
h('.flex-row', {
|
||||||
style: {
|
style: {
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
@ -63,6 +82,8 @@ BuyButtonSubview.prototype.render = function () {
|
|||||||
},
|
},
|
||||||
}, 'Buy Eth'),
|
}, 'Buy Eth'),
|
||||||
]),
|
]),
|
||||||
|
|
||||||
|
// loading indication
|
||||||
h('div', {
|
h('div', {
|
||||||
style: {
|
style: {
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
@ -70,8 +91,10 @@ BuyButtonSubview.prototype.render = function () {
|
|||||||
left: '49vw',
|
left: '49vw',
|
||||||
},
|
},
|
||||||
}, [
|
}, [
|
||||||
h(Loading, {isLoading}),
|
h(Loading, { isLoading }),
|
||||||
]),
|
]),
|
||||||
|
|
||||||
|
// account panel
|
||||||
h('div', {
|
h('div', {
|
||||||
style: {
|
style: {
|
||||||
width: '80%',
|
width: '80%',
|
||||||
@ -83,17 +106,82 @@ BuyButtonSubview.prototype.render = function () {
|
|||||||
account: props.account,
|
account: props.account,
|
||||||
}),
|
}),
|
||||||
]),
|
]),
|
||||||
h('h3.text-transform-uppercase', {
|
|
||||||
|
h('.flex-row', {
|
||||||
style: {
|
style: {
|
||||||
paddingLeft: '15px',
|
alignItems: 'center',
|
||||||
fontFamily: 'Montserrat Light',
|
justifyContent: 'center',
|
||||||
width: '100vw',
|
|
||||||
background: 'rgb(235, 235, 235)',
|
|
||||||
color: 'rgb(174, 174, 174)',
|
|
||||||
paddingTop: '4px',
|
|
||||||
paddingBottom: '4px',
|
|
||||||
},
|
},
|
||||||
}, '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', {
|
h('.flex-row.selected-exchange', {
|
||||||
style: {
|
style: {
|
||||||
position: 'relative',
|
position: 'relative',
|
||||||
@ -115,6 +203,7 @@ BuyButtonSubview.prototype.render = function () {
|
|||||||
onClick: this.radioHandler.bind(this),
|
onClick: this.radioHandler.bind(this),
|
||||||
}),
|
}),
|
||||||
]),
|
]),
|
||||||
|
|
||||||
h('h3.text-transform-uppercase', {
|
h('h3.text-transform-uppercase', {
|
||||||
style: {
|
style: {
|
||||||
paddingLeft: '15px',
|
paddingLeft: '15px',
|
||||||
@ -126,8 +215,10 @@ BuyButtonSubview.prototype.render = function () {
|
|||||||
paddingBottom: '4px',
|
paddingBottom: '4px',
|
||||||
},
|
},
|
||||||
}, props.buyView.subview),
|
}, props.buyView.subview),
|
||||||
|
|
||||||
this.formVersionSubview(),
|
this.formVersionSubview(),
|
||||||
])
|
])
|
||||||
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -139,39 +230,6 @@ BuyButtonSubview.prototype.formVersionSubview = function () {
|
|||||||
} else if (this.props.buyView.formView.shapeshift) {
|
} else if (this.props.buyView.formView.shapeshift) {
|
||||||
return h(ShapeshiftForm, this.props)
|
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,
|
|
||||||
])
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user