[NewUI-flat] New deposit ether modal UI. (#2642)
* New deposit ether modal. * New deposit modal full screen on mobile, and other style fixes. * Hide shapeshift option from deposit modal for now. * Add shapeshift form to new deposit modal. * Store recipient address for shapeshift tx in background. * Use Simpledropdown to achieve desired styling in coin selector. * Lint fix * Fix typos and remove dead code. * Remove storage of shapeshift receiving address from background. * Fix typosfeature/default_network_editable
Dan J Miller
7 years ago
committed by
Alexander Tseung
parent
b72610fb53
commit
5c1dcf3e9b
|
After Width: | Height: | Size: 9.5 KiB |
|
After Width: | Height: | Size: 17 KiB |
@ -0,0 +1,182 @@ |
||||
const Component = require('react').Component |
||||
const h = require('react-hyperscript') |
||||
const inherits = require('util').inherits |
||||
const connect = require('react-redux').connect |
||||
const actions = require('../../actions') |
||||
const networkNames = require('../../../../app/scripts/config.js').networkNames |
||||
const ShapeshiftForm = require('../shapeshift-form') |
||||
|
||||
const DIRECT_DEPOSIT_ROW_TITLE = 'Directly Deposit Ether' |
||||
const DIRECT_DEPOSIT_ROW_TEXT = `If you already have some Ether, the quickest way to get Ether in
|
||||
your new wallet by direct deposit.` |
||||
const COINBASE_ROW_TITLE = 'Buy on Coinbase' |
||||
const COINBASE_ROW_TEXT = `Coinbase is the world’s most popular way to buy and sell bitcoin,
|
||||
ethereum, and litecoin.` |
||||
const SHAPESHIFT_ROW_TITLE = 'Deposit with ShapeShift' |
||||
const SHAPESHIFT_ROW_TEXT = `If you own other cryptocurrencies, you can trade and deposit Ether
|
||||
directly into your MetaMask wallet. No Account Needed.` |
||||
const FAUCET_ROW_TITLE = 'Test Faucet' |
||||
const facuetRowText = networkName => `Get Ether from a faucet for the ${networkName}` |
||||
|
||||
function mapStateToProps (state) { |
||||
return { |
||||
network: state.metamask.network, |
||||
address: state.metamask.selectedAddress, |
||||
} |
||||
} |
||||
|
||||
function mapDispatchToProps (dispatch) { |
||||
return { |
||||
toCoinbase: (address) => { |
||||
dispatch(actions.buyEth({ network: '1', address, amount: 0 })) |
||||
}, |
||||
hideModal: () => { |
||||
dispatch(actions.hideModal()) |
||||
}, |
||||
showAccountDetailModal: () => { |
||||
dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' })) |
||||
}, |
||||
toFaucet: network => dispatch(actions.buyEth({ network })), |
||||
} |
||||
} |
||||
|
||||
inherits(DepositEtherModal, Component) |
||||
function DepositEtherModal () { |
||||
Component.call(this) |
||||
|
||||
this.state = { |
||||
buyingWithShapeshift: false, |
||||
} |
||||
} |
||||
|
||||
module.exports = connect(mapStateToProps, mapDispatchToProps)(DepositEtherModal) |
||||
|
||||
DepositEtherModal.prototype.renderRow = function ({ |
||||
logo, |
||||
title, |
||||
text, |
||||
buttonLabel, |
||||
onButtonClick, |
||||
hide, |
||||
className, |
||||
hideButton, |
||||
hideTitle, |
||||
onBackClick, |
||||
}) { |
||||
if (hide) { |
||||
return null |
||||
} |
||||
|
||||
return h('div', { |
||||
className: className || 'deposit-ether-modal__buy-row', |
||||
}, [ |
||||
|
||||
h('div.deposit-ether-modal__buy-row__back', { |
||||
onClick: onBackClick, |
||||
}, [ |
||||
|
||||
h('i.fa.fa-arrow-left.cursor-pointer'), |
||||
|
||||
]), |
||||
|
||||
h('div.deposit-ether-modal__buy-row__logo', [logo]), |
||||
|
||||
h('div.deposit-ether-modal__buy-row__description', [ |
||||
|
||||
!hideTitle && h('div.deposit-ether-modal__buy-row__description__title', [title]), |
||||
|
||||
h('div.deposit-ether-modal__buy-row__description__text', [text]), |
||||
|
||||
]), |
||||
|
||||
!hideButton && h('div.deposit-ether-modal__buy-row__button', [ |
||||
h('button.deposit-ether-modal__deposit-button', { |
||||
onClick: onButtonClick, |
||||
}, [buttonLabel]), |
||||
]), |
||||
|
||||
]) |
||||
} |
||||
|
||||
DepositEtherModal.prototype.render = function () { |
||||
const { network, toCoinbase, address, toFaucet } = this.props |
||||
const { buyingWithShapeshift } = this.state |
||||
|
||||
const isTestNetwork = ['3', '4', '42'].find(n => n === network) |
||||
const networkName = networkNames[network] |
||||
|
||||
return h('div.deposit-ether-modal', {}, [ |
||||
|
||||
h('div.deposit-ether-modal__header', [ |
||||
|
||||
h('div.deposit-ether-modal__header__title', ['Deposit Ether']), |
||||
|
||||
h('div.deposit-ether-modal__header__description', [ |
||||
'To interact with decentralized applications using MetaMask, you’ll need Ether in your wallet.', |
||||
]), |
||||
|
||||
h('div.deposit-ether-modal__header__close', { |
||||
onClick: () => { |
||||
this.setState({ buyingWithShapeshift: false }) |
||||
this.props.hideModal() |
||||
}, |
||||
}), |
||||
|
||||
]), |
||||
|
||||
h('div.deposit-ether-modal__buy-rows', [ |
||||
|
||||
this.renderRow({ |
||||
logo: h('img.deposit-ether-modal__buy-row__eth-logo', { src: '../../../images/eth_logo.svg' }), |
||||
title: DIRECT_DEPOSIT_ROW_TITLE, |
||||
text: DIRECT_DEPOSIT_ROW_TEXT, |
||||
buttonLabel: 'View Account', |
||||
onButtonClick: () => this.goToAccountDetailsModal(), |
||||
hide: buyingWithShapeshift, |
||||
}), |
||||
|
||||
this.renderRow({ |
||||
logo: h('i.fa.fa-tint.fa-2x'), |
||||
title: FAUCET_ROW_TITLE, |
||||
text: facuetRowText(networkName), |
||||
buttonLabel: 'Get Ether', |
||||
onButtonClick: () => toFaucet(network), |
||||
hide: !isTestNetwork || buyingWithShapeshift, |
||||
}), |
||||
|
||||
this.renderRow({ |
||||
logo: h('img.deposit-ether-modal__buy-row__coinbase-logo', { |
||||
src: '../../../images/coinbase logo.png', |
||||
}), |
||||
title: COINBASE_ROW_TITLE, |
||||
text: COINBASE_ROW_TEXT, |
||||
buttonLabel: 'Continue to Coinbase', |
||||
onButtonClick: () => toCoinbase(address), |
||||
hide: isTestNetwork || buyingWithShapeshift, |
||||
}), |
||||
|
||||
this.renderRow({ |
||||
logo: h('img.deposit-ether-modal__buy-row__shapeshift-logo', { |
||||
src: '../../../images/shapeshift logo.png', |
||||
}), |
||||
title: SHAPESHIFT_ROW_TITLE, |
||||
text: SHAPESHIFT_ROW_TEXT, |
||||
buttonLabel: 'Buy with Shapeshift', |
||||
onButtonClick: () => this.setState({ buyingWithShapeshift: true }), |
||||
hide: isTestNetwork, |
||||
hideButton: buyingWithShapeshift, |
||||
hideTitle: buyingWithShapeshift, |
||||
onBackClick: () => this.setState({ buyingWithShapeshift: false }), |
||||
className: buyingWithShapeshift && 'deposit-ether-modal__buy-row__shapeshift-buy', |
||||
}), |
||||
|
||||
buyingWithShapeshift && h(ShapeshiftForm), |
||||
|
||||
]), |
||||
]) |
||||
} |
||||
|
||||
DepositEtherModal.prototype.goToAccountDetailsModal = function () { |
||||
this.props.hideModal() |
||||
this.props.showAccountDetailModal() |
||||
} |
||||
@ -1,308 +1,242 @@ |
||||
const PersistentForm = require('../../lib/persistent-form') |
||||
const h = require('react-hyperscript') |
||||
const inherits = require('util').inherits |
||||
const Component = require('react').Component |
||||
const connect = require('react-redux').connect |
||||
const actions = require('../actions') |
||||
const Qr = require('./qr-code') |
||||
const isValidAddress = require('../util').isValidAddress |
||||
module.exports = connect(mapStateToProps)(ShapeshiftForm) |
||||
const classnames = require('classnames') |
||||
const { qrcode } = require('qrcode-npm') |
||||
const { shapeShiftSubview, pairUpdate, buyWithShapeShift } = require('../actions') |
||||
const { isValidAddress } = require('../util') |
||||
const SimpleDropdown = require('./dropdowns/simple-dropdown') |
||||
|
||||
function mapStateToProps (state) { |
||||
const { |
||||
coinOptions, |
||||
tokenExchangeRates, |
||||
selectedAddress, |
||||
} = state.metamask |
||||
|
||||
return { |
||||
warning: state.appState.warning, |
||||
isSubLoading: state.appState.isSubLoading, |
||||
qrRequested: state.appState.qrRequested, |
||||
coinOptions, |
||||
tokenExchangeRates, |
||||
selectedAddress, |
||||
} |
||||
} |
||||
|
||||
inherits(ShapeshiftForm, PersistentForm) |
||||
function mapDispatchToProps (dispatch) { |
||||
return { |
||||
shapeShiftSubview: () => dispatch(shapeShiftSubview()), |
||||
pairUpdate: coin => dispatch(pairUpdate(coin)), |
||||
buyWithShapeShift: data => dispatch(buyWithShapeShift(data)), |
||||
} |
||||
} |
||||
|
||||
module.exports = connect(mapStateToProps, mapDispatchToProps)(ShapeshiftForm) |
||||
|
||||
inherits(ShapeshiftForm, Component) |
||||
function ShapeshiftForm () { |
||||
PersistentForm.call(this) |
||||
this.persistentFormParentId = 'shapeshift-buy-form' |
||||
Component.call(this) |
||||
|
||||
this.state = { |
||||
depositCoin: 'btc', |
||||
refundAddress: '', |
||||
showQrCode: false, |
||||
depositAddress: '', |
||||
errorMessage: '', |
||||
isLoading: false, |
||||
bought: false, |
||||
} |
||||
} |
||||
|
||||
ShapeshiftForm.prototype.render = function () { |
||||
return this.props.qrRequested ? h(Qr, {key: 'qr'}) : this.renderMain() |
||||
ShapeshiftForm.prototype.componentWillMount = function () { |
||||
this.props.shapeShiftSubview() |
||||
} |
||||
|
||||
ShapeshiftForm.prototype.renderMain = function () { |
||||
const marketinfo = this.props.buyView.formView.marketinfo |
||||
const coinOptions = this.props.buyView.formView.coinOptions |
||||
var coin = marketinfo.pair.split('_')[0].toUpperCase() |
||||
|
||||
return h('.flex-column', { |
||||
style: { |
||||
position: 'relative', |
||||
padding: '25px', |
||||
paddingTop: '5px', |
||||
width: '90%', |
||||
minHeight: '215px', |
||||
alignItems: 'center', |
||||
overflowY: 'auto', |
||||
}, |
||||
}, [ |
||||
h('.flex-row', { |
||||
style: { |
||||
justifyContent: 'center', |
||||
alignItems: 'baseline', |
||||
height: '42px', |
||||
}, |
||||
}, [ |
||||
h('img', { |
||||
src: coinOptions[coin].image, |
||||
width: '25px', |
||||
height: '25px', |
||||
style: { |
||||
marginRight: '5px', |
||||
}, |
||||
}), |
||||
|
||||
h('.input-container', { |
||||
position: 'relative', |
||||
}, [ |
||||
h('input#fromCoin.buy-inputs.ex-coins', { |
||||
type: 'text', |
||||
list: 'coinList', |
||||
autoFocus: true, |
||||
dataset: { |
||||
persistentFormId: 'input-coin', |
||||
}, |
||||
style: { |
||||
boxSizing: 'border-box', |
||||
}, |
||||
onChange: this.handleLiveInput.bind(this), |
||||
defaultValue: 'BTC', |
||||
}), |
||||
ShapeshiftForm.prototype.onCoinChange = function (e) { |
||||
const coin = e.target.value |
||||
this.setState({ |
||||
depositCoin: coin, |
||||
errorMessage: '', |
||||
}) |
||||
this.props.pairUpdate(coin) |
||||
} |
||||
|
||||
this.renderCoinList(), |
||||
ShapeshiftForm.prototype.onBuyWithShapeShift = function () { |
||||
this.setState({ |
||||
isLoading: true, |
||||
showQrCode: true, |
||||
}) |
||||
|
||||
h('i.fa.fa-pencil-square-o.edit-text', { |
||||
style: { |
||||
fontSize: '12px', |
||||
color: '#F7861C', |
||||
position: 'absolute', |
||||
}, |
||||
}), |
||||
]), |
||||
const { |
||||
buyWithShapeShift, |
||||
selectedAddress: withdrawal, |
||||
} = this.props |
||||
const { |
||||
refundAddress: returnAddress, |
||||
depositCoin, |
||||
} = this.state |
||||
const pair = `${depositCoin}_eth` |
||||
const data = { |
||||
withdrawal, |
||||
pair, |
||||
returnAddress, |
||||
// Public api key
|
||||
'apiKey': '803d1f5df2ed1b1476e4b9e6bcd089e34d8874595dda6a23b67d93c56ea9cc2445e98a6748b219b2b6ad654d9f075f1f1db139abfa93158c04e825db122c14b6', |
||||
} |
||||
|
||||
h('.icon-control', { |
||||
style: { |
||||
position: 'relative', |
||||
}, |
||||
}, [ |
||||
// Not visible on the screen, can't see it on master.
|
||||
|
||||
// h('i.fa.fa-refresh.fa-4.orange', {
|
||||
// style: {
|
||||
// bottom: '5px',
|
||||
// left: '5px',
|
||||
// color: '#F7861C',
|
||||
// },
|
||||
// onClick: this.updateCoin.bind(this),
|
||||
// }),
|
||||
h('i.fa.fa-chevron-right.fa-4.orange', { |
||||
style: { |
||||
position: 'absolute', |
||||
bottom: '35%', |
||||
left: '0%', |
||||
color: '#F7861C', |
||||
}, |
||||
onClick: this.updateCoin.bind(this), |
||||
}), |
||||
]), |
||||
if (isValidAddress(withdrawal)) { |
||||
buyWithShapeShift(data) |
||||
.then(d => this.setState({ |
||||
showQrCode: true, |
||||
depositAddress: d.deposit, |
||||
isLoading: false, |
||||
})) |
||||
.catch(() => this.setState({ |
||||
showQrCode: false, |
||||
errorMessage: 'Invalid Request', |
||||
isLoading: false, |
||||
})) |
||||
} |
||||
} |
||||
|
||||
h('#toCoin.ex-coins', marketinfo.pair.split('_')[1].toUpperCase()), |
||||
ShapeshiftForm.prototype.renderMetadata = function (label, value) { |
||||
return h('div', {className: 'shapeshift-form__metadata-wrapper'}, [ |
||||
|
||||
h('img', { |
||||
src: coinOptions[marketinfo.pair.split('_')[1].toUpperCase()].image, |
||||
width: '25px', |
||||
height: '25px', |
||||
style: { |
||||
marginLeft: '5px', |
||||
}, |
||||
}), |
||||
h('div.shapeshift-form__metadata-label', {}, [ |
||||
h('span', `${label}:`), |
||||
]), |
||||
|
||||
h('.flex-column', { |
||||
style: { |
||||
marginTop: '1%', |
||||
alignItems: 'flex-start', |
||||
}, |
||||
}, [ |
||||
this.props.warning ? |
||||
this.props.warning && |
||||
h('span.error.flex-center', { |
||||
style: { |
||||
textAlign: 'center', |
||||
width: '229px', |
||||
height: '82px', |
||||
}, |
||||
}, this.props.warning) |
||||
: this.renderInfo(), |
||||
|
||||
this.renderRefundAddressForCoin(coin), |
||||
h('div.shapeshift-form__metadata-value', {}, [ |
||||
h('span', value), |
||||
]), |
||||
|
||||
]) |
||||
} |
||||
|
||||
ShapeshiftForm.prototype.renderRefundAddressForCoin = function (coin) { |
||||
return h(this.activeToggle('.input-container'), { |
||||
style: { |
||||
marginTop: '1%', |
||||
}, |
||||
}, [ |
||||
|
||||
h('div', `${coin} Address:`), |
||||
|
||||
h('input#fromCoinAddress.buy-inputs', { |
||||
type: 'text', |
||||
placeholder: `Your ${coin} Refund Address`, |
||||
dataset: { |
||||
persistentFormId: 'refund-address', |
||||
|
||||
}, |
||||
style: { |
||||
boxSizing: 'border-box', |
||||
width: '227px', |
||||
height: '30px', |
||||
padding: ' 5px ', |
||||
}, |
||||
}), |
||||
|
||||
h('i.fa.fa-pencil-square-o.edit-text', { |
||||
style: { |
||||
fontSize: '12px', |
||||
color: '#F7861C', |
||||
position: 'absolute', |
||||
}, |
||||
}), |
||||
h('div.flex-row', { |
||||
style: { |
||||
justifyContent: 'flex-start', |
||||
}, |
||||
}, [ |
||||
h('button', { |
||||
onClick: this.shift.bind(this), |
||||
style: { |
||||
marginTop: '1%', |
||||
}, |
||||
}, |
||||
'Submit'), |
||||
]), |
||||
ShapeshiftForm.prototype.renderMarketInfo = function () { |
||||
const { depositCoin } = this.state |
||||
const coinPair = `${depositCoin}_eth` |
||||
const { tokenExchangeRates } = this.props |
||||
const { |
||||
limit, |
||||
rate, |
||||
minimum, |
||||
} = tokenExchangeRates[coinPair] || {} |
||||
|
||||
return h('div.shapeshift-form__metadata', {}, [ |
||||
|
||||
this.renderMetadata('Status', limit ? 'Available' : 'Unavailable'), |
||||
this.renderMetadata('Limit', limit), |
||||
this.renderMetadata('Exchange Rate', rate), |
||||
this.renderMetadata('Minimum', minimum), |
||||
|
||||
]) |
||||
} |
||||
|
||||
ShapeshiftForm.prototype.shift = function () { |
||||
var props = this.props |
||||
var withdrawal = this.props.buyView.buyAddress |
||||
var returnAddress = document.getElementById('fromCoinAddress').value |
||||
var pair = this.props.buyView.formView.marketinfo.pair |
||||
var data = { |
||||
'withdrawal': withdrawal, |
||||
'pair': pair, |
||||
'returnAddress': returnAddress, |
||||
// Public api key
|
||||
'apiKey': '803d1f5df2ed1b1476e4b9e6bcd089e34d8874595dda6a23b67d93c56ea9cc2445e98a6748b219b2b6ad654d9f075f1f1db139abfa93158c04e825db122c14b6', |
||||
} |
||||
var message = [ |
||||
`Deposit Limit: ${props.buyView.formView.marketinfo.limit}`, |
||||
`Deposit Minimum:${props.buyView.formView.marketinfo.minimum}`, |
||||
] |
||||
if (isValidAddress(withdrawal)) { |
||||
this.props.dispatch(actions.coinShiftRquest(data, message)) |
||||
} |
||||
} |
||||
ShapeshiftForm.prototype.renderQrCode = function () { |
||||
const { depositAddress, isLoading } = this.state |
||||
const qrImage = qrcode(4, 'M') |
||||
qrImage.addData(depositAddress) |
||||
qrImage.make() |
||||
|
||||
ShapeshiftForm.prototype.renderCoinList = function () { |
||||
var list = Object.keys(this.props.buyView.formView.coinOptions).map((item) => { |
||||
return h('option', { |
||||
value: item, |
||||
}, item) |
||||
}) |
||||
return h('div.shapeshift-form', {}, [ |
||||
|
||||
return h('datalist#coinList', { |
||||
onClick: (event) => { |
||||
event.preventDefault() |
||||
}, |
||||
}, list) |
||||
} |
||||
h('div.shapeshift-form__deposit-instruction', [ |
||||
'Deposit your BTC to the address below:', |
||||
]), |
||||
|
||||
ShapeshiftForm.prototype.updateCoin = function (event) { |
||||
event.preventDefault() |
||||
const props = this.props |
||||
var coinOptions = this.props.buyView.formView.coinOptions |
||||
var coin = document.getElementById('fromCoin').value |
||||
|
||||
if (!coinOptions[coin.toUpperCase()] || coin.toUpperCase() === 'ETH') { |
||||
var message = 'Not a valid coin' |
||||
return props.dispatch(actions.displayWarning(message)) |
||||
} else { |
||||
return props.dispatch(actions.pairUpdate(coin)) |
||||
} |
||||
} |
||||
h('div', depositAddress), |
||||
|
||||
ShapeshiftForm.prototype.handleLiveInput = function () { |
||||
const props = this.props |
||||
var coinOptions = this.props.buyView.formView.coinOptions |
||||
var coin = document.getElementById('fromCoin').value |
||||
h('div.shapeshift-form__qr-code', [ |
||||
isLoading |
||||
? h('img', { |
||||
src: 'images/loading.svg', |
||||
style: { width: '60px'}, |
||||
}) |
||||
: h('div', { |
||||
dangerouslySetInnerHTML: { __html: qrImage.createTableTag(4) }, |
||||
}), |
||||
]), |
||||
|
||||
if (!coinOptions[coin.toUpperCase()] || coin.toUpperCase() === 'ETH') { |
||||
return null |
||||
} else { |
||||
return props.dispatch(actions.pairUpdate(coin)) |
||||
} |
||||
} |
||||
this.renderMarketInfo(), |
||||
|
||||
ShapeshiftForm.prototype.renderInfo = function () { |
||||
const marketinfo = this.props.buyView.formView.marketinfo |
||||
const coinOptions = this.props.buyView.formView.coinOptions |
||||
var coin = marketinfo.pair.split('_')[0].toUpperCase() |
||||
|
||||
return h('span', { |
||||
style: { |
||||
}, |
||||
}, [ |
||||
h('h3.flex-row.text-transform-uppercase', { |
||||
style: { |
||||
color: '#868686', |
||||
paddingTop: '4px', |
||||
justifyContent: 'space-around', |
||||
textAlign: 'center', |
||||
fontSize: '17px', |
||||
}, |
||||
}, `Market Info for ${marketinfo.pair.replace('_', ' to ').toUpperCase()}:`), |
||||
h('.marketinfo', ['Status : ', `${coinOptions[coin].status}`]), |
||||
h('.marketinfo', ['Exchange Rate: ', `${marketinfo.rate}`]), |
||||
h('.marketinfo', ['Limit: ', `${marketinfo.limit}`]), |
||||
h('.marketinfo', ['Minimum : ', `${marketinfo.minimum}`]), |
||||
]) |
||||
} |
||||
|
||||
ShapeshiftForm.prototype.activeToggle = function (elementType) { |
||||
if (!this.props.buyView.formView.response || this.props.warning) return elementType |
||||
return `${elementType}.inactive` |
||||
} |
||||
|
||||
ShapeshiftForm.prototype.renderLoading = function () { |
||||
return h('span', { |
||||
style: { |
||||
position: 'absolute', |
||||
left: '70px', |
||||
bottom: '194px', |
||||
background: 'transparent', |
||||
width: '229px', |
||||
height: '82px', |
||||
display: 'flex', |
||||
justifyContent: 'center', |
||||
}, |
||||
}, [ |
||||
h('img', { |
||||
style: { |
||||
width: '60px', |
||||
}, |
||||
src: 'images/loading.svg', |
||||
}), |
||||
]) |
||||
ShapeshiftForm.prototype.render = function () { |
||||
const { coinOptions, btnClass } = this.props |
||||
const { depositCoin, errorMessage, showQrCode, depositAddress } = this.state |
||||
const coinPair = `${depositCoin}_eth` |
||||
const { tokenExchangeRates } = this.props |
||||
const token = tokenExchangeRates[coinPair] |
||||
|
||||
return h('div.shapeshift-form-wrapper', [ |
||||
showQrCode |
||||
? this.renderQrCode() |
||||
: h('div.shapeshift-form', [ |
||||
h('div.shapeshift-form__selectors', [ |
||||
|
||||
h('div.shapeshift-form__selector', [ |
||||
|
||||
h('div.shapeshift-form__selector-label', 'Deposit'), |
||||
|
||||
h(SimpleDropdown, { |
||||
selectedOption: this.state.depositCoin, |
||||
onSelect: this.onCoinChange, |
||||
options: Object.entries(coinOptions).map(([coin]) => ({ |
||||
value: coin.toLowerCase(), |
||||
displayValue: coin, |
||||
})), |
||||
}), |
||||
|
||||
]), |
||||
|
||||
h('div.icon.shapeshift-form__caret', { |
||||
style: { backgroundImage: 'url(images/caret-right.svg)'}, |
||||
}), |
||||
|
||||
h('div.shapeshift-form__selector', [ |
||||
|
||||
h('div.shapeshift-form__selector-label', [ |
||||
'Receive', |
||||
]), |
||||
|
||||
h('div.shapeshift-form__selector-input', ['ETH']), |
||||
|
||||
]), |
||||
|
||||
]), |
||||
|
||||
h('div', { |
||||
className: classnames('shapeshift-form__address-input-wrapper', { |
||||
'shapeshift-form__address-input-wrapper--error': errorMessage, |
||||
}), |
||||
}, [ |
||||
|
||||
h('div.shapeshift-form__address-input-label', [ |
||||
'Your Refund Address', |
||||
]), |
||||
|
||||
h('input.shapeshift-form__address-input', { |
||||
type: 'text', |
||||
onChange: e => this.setState({ |
||||
refundAddress: e.target.value, |
||||
errorMessage: '', |
||||
}), |
||||
}), |
||||
|
||||
h('divshapeshift-form__address-input-error-message', [errorMessage]), |
||||
]), |
||||
|
||||
this.renderMarketInfo(), |
||||
|
||||
]), |
||||
|
||||
!depositAddress && h('button.shapeshift-form__shapeshift-buy-btn', { |
||||
className: btnClass, |
||||
disabled: !token, |
||||
onClick: () => this.onBuyWithShapeShift(), |
||||
}, ['Buy']), |
||||
|
||||
]) |
||||
} |
||||
|
||||
Loading…
Reference in new issue