Merge pull request #1885 from MetaMask/dharma

Feature - Add Dharma Loans Beta to kovan buy options
feature/default_network_editable
kumavis 7 years ago committed by GitHub
commit 7da65bdb90
  1. 5
      app/scripts/config.js
  2. 156
      ui/app/components/buy-button-subview.js

@ -12,4 +12,9 @@ module.exports = {
kovan: KOVAN_RPC_URL,
rinkeby: RINKEBY_RPC_URL,
},
networkNames: {
3: 'Ropsten',
4: 'Rinkeby',
42: 'Kovan',
},
}

@ -8,6 +8,7 @@ const ShapeshiftForm = require('./shapeshift-form')
const Loading = require('./loading')
const AccountPanel = require('./account-panel')
const RadioList = require('./custom-radio-list')
const networkNames = require('../../../app/scripts/config.js').networkNames
module.exports = connect(mapStateToProps)(BuyButtonSubview)
@ -30,16 +31,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 +78,8 @@ BuyButtonSubview.prototype.render = function () {
},
}, 'Buy Eth'),
]),
// loading indication
h('div', {
style: {
position: 'absolute',
@ -70,8 +87,10 @@ BuyButtonSubview.prototype.render = function () {
left: '49vw',
},
}, [
h(Loading, {isLoading}),
h(Loading, { isLoading }),
]),
// account panel
h('div', {
style: {
width: '80%',
@ -83,17 +102,92 @@ 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()
// Ropsten, Rinkeby, Kovan
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),
// 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,
])
)
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 +209,7 @@ BuyButtonSubview.prototype.render = function () {
onClick: this.radioHandler.bind(this),
}),
]),
h('h3.text-transform-uppercase', {
style: {
paddingLeft: '15px',
@ -126,8 +221,10 @@ BuyButtonSubview.prototype.render = function () {
paddingBottom: '4px',
},
}, props.buyView.subview),
this.formVersionSubview(),
])
)
}
@ -139,39 +236,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,
])
}
}

Loading…
Cancel
Save