Chi Kei Chan
7 years ago
committed by
GitHub
commit
71a308d98b
|
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 h = require('react-hyperscript') |
||||||
const inherits = require('util').inherits |
const inherits = require('util').inherits |
||||||
|
const Component = require('react').Component |
||||||
const connect = require('react-redux').connect |
const connect = require('react-redux').connect |
||||||
const actions = require('../actions') |
const classnames = require('classnames') |
||||||
const Qr = require('./qr-code') |
const { qrcode } = require('qrcode-npm') |
||||||
const isValidAddress = require('../util').isValidAddress |
const { shapeShiftSubview, pairUpdate, buyWithShapeShift } = require('../actions') |
||||||
module.exports = connect(mapStateToProps)(ShapeshiftForm) |
const { isValidAddress } = require('../util') |
||||||
|
const SimpleDropdown = require('./dropdowns/simple-dropdown') |
||||||
|
|
||||||
function mapStateToProps (state) { |
function mapStateToProps (state) { |
||||||
|
const { |
||||||
|
coinOptions, |
||||||
|
tokenExchangeRates, |
||||||
|
selectedAddress, |
||||||
|
} = state.metamask |
||||||
|
|
||||||
|
return { |
||||||
|
coinOptions, |
||||||
|
tokenExchangeRates, |
||||||
|
selectedAddress, |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function mapDispatchToProps (dispatch) { |
||||||
return { |
return { |
||||||
warning: state.appState.warning, |
shapeShiftSubview: () => dispatch(shapeShiftSubview()), |
||||||
isSubLoading: state.appState.isSubLoading, |
pairUpdate: coin => dispatch(pairUpdate(coin)), |
||||||
qrRequested: state.appState.qrRequested, |
buyWithShapeShift: data => dispatch(buyWithShapeShift(data)), |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
inherits(ShapeshiftForm, PersistentForm) |
module.exports = connect(mapStateToProps, mapDispatchToProps)(ShapeshiftForm) |
||||||
|
|
||||||
|
inherits(ShapeshiftForm, Component) |
||||||
function ShapeshiftForm () { |
function ShapeshiftForm () { |
||||||
PersistentForm.call(this) |
Component.call(this) |
||||||
this.persistentFormParentId = 'shapeshift-buy-form' |
|
||||||
|
this.state = { |
||||||
|
depositCoin: 'btc', |
||||||
|
refundAddress: '', |
||||||
|
showQrCode: false, |
||||||
|
depositAddress: '', |
||||||
|
errorMessage: '', |
||||||
|
isLoading: false, |
||||||
|
bought: false, |
||||||
|
} |
||||||
} |
} |
||||||
|
|
||||||
ShapeshiftForm.prototype.render = function () { |
ShapeshiftForm.prototype.componentWillMount = function () { |
||||||
return this.props.qrRequested ? h(Qr, {key: 'qr'}) : this.renderMain() |
this.props.shapeShiftSubview() |
||||||
} |
} |
||||||
|
|
||||||
ShapeshiftForm.prototype.renderMain = function () { |
ShapeshiftForm.prototype.onCoinChange = function (e) { |
||||||
const marketinfo = this.props.buyView.formView.marketinfo |
const coin = e.target.value |
||||||
const coinOptions = this.props.buyView.formView.coinOptions |
this.setState({ |
||||||
var coin = marketinfo.pair.split('_')[0].toUpperCase() |
depositCoin: coin, |
||||||
|
errorMessage: '', |
||||||
return h('.flex-column', { |
}) |
||||||
style: { |
this.props.pairUpdate(coin) |
||||||
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', { |
ShapeshiftForm.prototype.onBuyWithShapeShift = function () { |
||||||
position: 'relative', |
this.setState({ |
||||||
}, [ |
isLoading: true, |
||||||
h('input#fromCoin.buy-inputs.ex-coins', { |
showQrCode: true, |
||||||
type: 'text', |
}) |
||||||
list: 'coinList', |
|
||||||
autoFocus: true, |
|
||||||
dataset: { |
|
||||||
persistentFormId: 'input-coin', |
|
||||||
}, |
|
||||||
style: { |
|
||||||
boxSizing: 'border-box', |
|
||||||
}, |
|
||||||
onChange: this.handleLiveInput.bind(this), |
|
||||||
defaultValue: 'BTC', |
|
||||||
}), |
|
||||||
|
|
||||||
this.renderCoinList(), |
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('i.fa.fa-pencil-square-o.edit-text', { |
if (isValidAddress(withdrawal)) { |
||||||
style: { |
buyWithShapeShift(data) |
||||||
fontSize: '12px', |
.then(d => this.setState({ |
||||||
color: '#F7861C', |
showQrCode: true, |
||||||
position: 'absolute', |
depositAddress: d.deposit, |
||||||
}, |
isLoading: false, |
||||||
}), |
})) |
||||||
|
.catch(() => this.setState({ |
||||||
|
showQrCode: false, |
||||||
|
errorMessage: 'Invalid Request', |
||||||
|
isLoading: false, |
||||||
|
})) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
ShapeshiftForm.prototype.renderMetadata = function (label, value) { |
||||||
|
return h('div', {className: 'shapeshift-form__metadata-wrapper'}, [ |
||||||
|
|
||||||
|
h('div.shapeshift-form__metadata-label', {}, [ |
||||||
|
h('span', `${label}:`), |
||||||
]), |
]), |
||||||
|
|
||||||
h('.icon-control', { |
h('div.shapeshift-form__metadata-value', {}, [ |
||||||
style: { |
h('span', value), |
||||||
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), |
|
||||||
}), |
|
||||||
]), |
]), |
||||||
|
|
||||||
h('#toCoin.ex-coins', marketinfo.pair.split('_')[1].toUpperCase()), |
]) |
||||||
|
} |
||||||
|
|
||||||
h('img', { |
ShapeshiftForm.prototype.renderMarketInfo = function () { |
||||||
src: coinOptions[marketinfo.pair.split('_')[1].toUpperCase()].image, |
const { depositCoin } = this.state |
||||||
width: '25px', |
const coinPair = `${depositCoin}_eth` |
||||||
height: '25px', |
const { tokenExchangeRates } = this.props |
||||||
style: { |
const { |
||||||
marginLeft: '5px', |
limit, |
||||||
}, |
rate, |
||||||
}), |
minimum, |
||||||
]), |
} = tokenExchangeRates[coinPair] || {} |
||||||
|
|
||||||
h('.flex-column', { |
return h('div.shapeshift-form__metadata', {}, [ |
||||||
style: { |
|
||||||
marginTop: '1%', |
this.renderMetadata('Status', limit ? 'Available' : 'Unavailable'), |
||||||
alignItems: 'flex-start', |
this.renderMetadata('Limit', limit), |
||||||
}, |
this.renderMetadata('Exchange Rate', rate), |
||||||
}, [ |
this.renderMetadata('Minimum', minimum), |
||||||
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), |
|
||||||
]), |
|
||||||
|
|
||||||
]) |
]) |
||||||
} |
} |
||||||
|
|
||||||
ShapeshiftForm.prototype.renderRefundAddressForCoin = function (coin) { |
ShapeshiftForm.prototype.renderQrCode = function () { |
||||||
return h(this.activeToggle('.input-container'), { |
const { depositAddress, isLoading } = this.state |
||||||
style: { |
const qrImage = qrcode(4, 'M') |
||||||
marginTop: '1%', |
qrImage.addData(depositAddress) |
||||||
}, |
qrImage.make() |
||||||
}, [ |
|
||||||
|
|
||||||
h('div', `${coin} Address:`), |
return h('div.shapeshift-form', {}, [ |
||||||
|
|
||||||
h('input#fromCoinAddress.buy-inputs', { |
h('div.shapeshift-form__deposit-instruction', [ |
||||||
type: 'text', |
'Deposit your BTC to the address below:', |
||||||
placeholder: `Your ${coin} Refund Address`, |
]), |
||||||
dataset: { |
|
||||||
persistentFormId: 'refund-address', |
h('div', depositAddress), |
||||||
|
|
||||||
}, |
|
||||||
style: { |
|
||||||
boxSizing: 'border-box', |
|
||||||
width: '227px', |
|
||||||
height: '30px', |
|
||||||
padding: ' 5px ', |
|
||||||
}, |
|
||||||
}), |
|
||||||
|
|
||||||
h('i.fa.fa-pencil-square-o.edit-text', { |
h('div.shapeshift-form__qr-code', [ |
||||||
style: { |
isLoading |
||||||
fontSize: '12px', |
? h('img', { |
||||||
color: '#F7861C', |
src: 'images/loading.svg', |
||||||
position: 'absolute', |
style: { width: '60px'}, |
||||||
}, |
}) |
||||||
|
: h('div', { |
||||||
|
dangerouslySetInnerHTML: { __html: qrImage.createTableTag(4) }, |
||||||
}), |
}), |
||||||
h('div.flex-row', { |
|
||||||
style: { |
|
||||||
justifyContent: 'flex-start', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
h('button', { |
|
||||||
onClick: this.shift.bind(this), |
|
||||||
style: { |
|
||||||
marginTop: '1%', |
|
||||||
}, |
|
||||||
}, |
|
||||||
'Submit'), |
|
||||||
]), |
]), |
||||||
|
|
||||||
|
this.renderMarketInfo(), |
||||||
|
|
||||||
]) |
]) |
||||||
} |
} |
||||||
|
|
||||||
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.renderCoinList = function () { |
ShapeshiftForm.prototype.render = function () { |
||||||
var list = Object.keys(this.props.buyView.formView.coinOptions).map((item) => { |
const { coinOptions, btnClass } = this.props |
||||||
return h('option', { |
const { depositCoin, errorMessage, showQrCode, depositAddress } = this.state |
||||||
value: item, |
const coinPair = `${depositCoin}_eth` |
||||||
}, item) |
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, |
||||||
|
})), |
||||||
|
}), |
||||||
|
|
||||||
return h('datalist#coinList', { |
]), |
||||||
onClick: (event) => { |
|
||||||
event.preventDefault() |
|
||||||
}, |
|
||||||
}, list) |
|
||||||
} |
|
||||||
|
|
||||||
ShapeshiftForm.prototype.updateCoin = function (event) { |
h('div.icon.shapeshift-form__caret', { |
||||||
event.preventDefault() |
style: { backgroundImage: 'url(images/caret-right.svg)'}, |
||||||
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)) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
ShapeshiftForm.prototype.handleLiveInput = function () { |
h('div.shapeshift-form__selector', [ |
||||||
const props = this.props |
|
||||||
var coinOptions = this.props.buyView.formView.coinOptions |
|
||||||
var coin = document.getElementById('fromCoin').value |
|
||||||
|
|
||||||
if (!coinOptions[coin.toUpperCase()] || coin.toUpperCase() === 'ETH') { |
h('div.shapeshift-form__selector-label', [ |
||||||
return null |
'Receive', |
||||||
} else { |
]), |
||||||
return props.dispatch(actions.pairUpdate(coin)) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
ShapeshiftForm.prototype.renderInfo = function () { |
h('div.shapeshift-form__selector-input', ['ETH']), |
||||||
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 () { |
h('div', { |
||||||
return h('span', { |
className: classnames('shapeshift-form__address-input-wrapper', { |
||||||
style: { |
'shapeshift-form__address-input-wrapper--error': errorMessage, |
||||||
position: 'absolute', |
}), |
||||||
left: '70px', |
|
||||||
bottom: '194px', |
|
||||||
background: 'transparent', |
|
||||||
width: '229px', |
|
||||||
height: '82px', |
|
||||||
display: 'flex', |
|
||||||
justifyContent: 'center', |
|
||||||
}, |
|
||||||
}, [ |
}, [ |
||||||
h('img', { |
|
||||||
style: { |
h('div.shapeshift-form__address-input-label', [ |
||||||
width: '60px', |
'Your Refund Address', |
||||||
}, |
]), |
||||||
src: 'images/loading.svg', |
|
||||||
|
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