338 lines
8.5 KiB
JavaScript
338 lines
8.5 KiB
JavaScript
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 CopyButton = require('./copyButton')
|
|
|
|
const isValidAddress = require('../util').isValidAddress
|
|
module.exports = connect(mapStateToProps)(ShapeshiftForm)
|
|
|
|
function mapStateToProps(state) {
|
|
return {
|
|
selectedAccount: state.selectedAccount,
|
|
warning: state.appState.warning,
|
|
isSubLoading: state.appState.isSubLoading,
|
|
}
|
|
}
|
|
|
|
inherits(ShapeshiftForm, Component)
|
|
|
|
function ShapeshiftForm() {
|
|
Component.call(this)
|
|
}
|
|
|
|
ShapeshiftForm.prototype.render = function () {
|
|
const marketinfo = this.props.accountDetail.formView.marketinfo
|
|
const coinOptions = this.props.accountDetail.formView.coinOptions
|
|
var coin = marketinfo.pair.split('_')[0].toUpperCase()
|
|
|
|
return h('.flex-column', {
|
|
style: {
|
|
marginTop: '10px',
|
|
width: '100%',
|
|
alignItems: 'center',
|
|
},
|
|
}, [
|
|
h('.flex-row', {
|
|
style: {
|
|
justifyContent: 'center',
|
|
alignItems: 'baseline',
|
|
},
|
|
}, [
|
|
h('img', {
|
|
src: coinOptions[coin].image,
|
|
width: '25px',
|
|
height: '25px',
|
|
style: {
|
|
marginRight: '5px',
|
|
},
|
|
}),
|
|
|
|
h('.input-container', [
|
|
h('input#fromCoin.buy-inputs.ex-coins', {
|
|
type: 'text',
|
|
list: 'coinList',
|
|
style: {
|
|
boxSizing: 'border-box',
|
|
},
|
|
onChange: this.handleLiveInput.bind(this),
|
|
defaultValue: 'BTC',
|
|
}),
|
|
|
|
this.renderCoinList(),
|
|
|
|
h('i.fa.fa-pencil-square-o.edit-text', {
|
|
style: {
|
|
fontSize: '12px',
|
|
color: '#F7861C',
|
|
position: 'relative',
|
|
bottom: '23px',
|
|
right: '11px',
|
|
},
|
|
}),
|
|
]),
|
|
|
|
h('.icon-control', [
|
|
h('i.fa.fa-refresh.fa-4.orange', {
|
|
style: {
|
|
position: 'relative',
|
|
bottom: '5px',
|
|
right: '5px',
|
|
color: '#F7861C',
|
|
},
|
|
onClick: this.updateCoin.bind(this),
|
|
}),
|
|
h('i.fa.fa-chevron-right.fa-4.orange', {
|
|
style: {
|
|
position: 'relative',
|
|
bottom: '5px',
|
|
right: '15px',
|
|
color: '#F7861C',
|
|
},
|
|
onClick: this.updateCoin.bind(this),
|
|
}),
|
|
]),
|
|
|
|
h('#toCoin.ex-coins', marketinfo.pair.split('_')[1].toUpperCase()),
|
|
|
|
h('img', {
|
|
src: coinOptions[marketinfo.pair.split('_')[1].toUpperCase()].image,
|
|
width: '25px',
|
|
height: '25px',
|
|
style: {
|
|
marginLeft: '5px',
|
|
},
|
|
}),
|
|
]),
|
|
|
|
this.props.isSubLoading ? this.renderLoading() : null,
|
|
|
|
h('.flex-column', {
|
|
style: {
|
|
width: '235px',
|
|
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(),
|
|
]),
|
|
|
|
h(this.activeToggle('.input-container'), {
|
|
style: {
|
|
padding: '10px',
|
|
paddingBottom: '0px',
|
|
width: '100%',
|
|
},
|
|
}, [
|
|
h('div', 'Receiving address:'),
|
|
|
|
h('input.buy-inputs', {
|
|
type: 'text',
|
|
value: this.props.accountDetail.buyAddress,
|
|
onChange: this.handleAddress.bind(this),
|
|
style: {
|
|
boxSizing: 'border-box',
|
|
width: '325px',
|
|
height: '20px',
|
|
padding: ' 5px ',
|
|
},
|
|
}),
|
|
|
|
h('i.fa.fa-pencil-square-o.edit-text', {
|
|
style: {
|
|
fontSize: '12px',
|
|
color: '#F7861C',
|
|
position: 'relative',
|
|
bottom: '5px',
|
|
right: '11px',
|
|
},
|
|
}),
|
|
]),
|
|
h(this.activeToggle('.input-container'), {
|
|
style: {
|
|
padding: '10px',
|
|
width: '100%',
|
|
},
|
|
}, [
|
|
h('div', `${coin} Address:`),
|
|
|
|
h('input#fromCoinAddress.buy-inputs', {
|
|
type: 'text',
|
|
placeholder: `Your ${coin} Refund Address`,
|
|
style: {
|
|
boxSizing: 'border-box',
|
|
width: '235px',
|
|
height: '20px',
|
|
padding: ' 5px ',
|
|
},
|
|
}),
|
|
|
|
h('i.fa.fa-pencil-square-o.edit-text', {
|
|
style: {
|
|
fontSize: '12px',
|
|
color: '#F7861C',
|
|
position: 'relative',
|
|
bottom: '5px',
|
|
right: '11px',
|
|
},
|
|
}),
|
|
|
|
h('button', {
|
|
onClick: this.shift.bind(this),
|
|
},
|
|
'Submit'),
|
|
]),
|
|
])
|
|
}
|
|
|
|
ShapeshiftForm.prototype.shift = function () {
|
|
var withdrawal = this.props.accountDetail.buyAddress
|
|
var returnAddress = document.getElementById('fromCoinAddress').value
|
|
var pair = this.props.accountDetail.formView.marketinfo.pair
|
|
var data = {
|
|
'withdrawal': withdrawal,
|
|
'pair': pair,
|
|
'returnAddress': returnAddress,
|
|
}
|
|
|
|
if (isValidAddress(withdrawal)) {
|
|
this.props.dispatch(actions.coinShiftRquest(data))
|
|
}
|
|
}
|
|
|
|
ShapeshiftForm.prototype.renderCoinList = function () {
|
|
var list = Object.keys(this.props.accountDetail.formView.coinOptions).map((item) => {
|
|
return h('option', {
|
|
value: item,
|
|
}, item)
|
|
})
|
|
|
|
return h('datalist#coinList', {
|
|
onClick: (event) => {
|
|
event.preventDefault()
|
|
},
|
|
}, list)
|
|
}
|
|
|
|
ShapeshiftForm.prototype.updateCoin = function (event) {
|
|
event.preventDefault()
|
|
const props = this.props
|
|
var coinOptions = this.props.accountDetail.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.showWarning(message))
|
|
} else {
|
|
return props.dispatch(actions.pairUpdate(coin))
|
|
}
|
|
}
|
|
|
|
ShapeshiftForm.prototype.handleLiveInput = function () {
|
|
const props = this.props
|
|
var coinOptions = this.props.accountDetail.formView.coinOptions
|
|
var coin = document.getElementById('fromCoin').value
|
|
|
|
if (!coinOptions[coin.toUpperCase()] || coin.toUpperCase() === 'ETH') {
|
|
return null
|
|
} else {
|
|
return props.dispatch(actions.pairUpdate(coin))
|
|
}
|
|
}
|
|
|
|
ShapeshiftForm.prototype.renderInfo = function () {
|
|
const marketinfo = this.props.accountDetail.formView.marketinfo
|
|
const coinOptions = this.props.accountDetail.formView.coinOptions
|
|
var coin = marketinfo.pair.split('_')[0].toUpperCase()
|
|
const request = this.props.accountDetail.formView.response
|
|
|
|
if (!request) {
|
|
return h('span', [
|
|
h('h3.flex-row.text-transform-uppercase', {
|
|
style: {
|
|
color: '#AEAEAE',
|
|
paddingTop: '4px',
|
|
justifyContent: 'space-around',
|
|
textAlign: 'center',
|
|
fontSize: '14px',
|
|
},
|
|
}, `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}`]),
|
|
])
|
|
} else {
|
|
return h('.flex-column', {
|
|
style: {
|
|
width: '229px',
|
|
height: '82px',
|
|
},
|
|
}, [
|
|
h('.marketinfo', ['Limit: ', `${marketinfo.limit}`]),
|
|
h('.marketinfo', ['Minimum : ', `${marketinfo.minimum}`]),
|
|
h('div', {
|
|
style: {
|
|
fontSize: '12px',
|
|
lineHeight: '16px',
|
|
marginTop: '4px',
|
|
color: '#F7861C',
|
|
},
|
|
}, `Deposit your ${request.depositType} to the address bellow:`),
|
|
h('.flex-row', {
|
|
style: {
|
|
position: 'relative',
|
|
right: '38px',
|
|
},
|
|
}, [
|
|
h('div', {
|
|
style: {
|
|
fontSize: '13px',
|
|
},
|
|
}, request.deposit),
|
|
h(CopyButton, {
|
|
value: request.deposit,
|
|
}),
|
|
]),
|
|
])
|
|
}
|
|
}
|
|
|
|
ShapeshiftForm.prototype.handleAddress = function (event) {
|
|
this.props.dispatch(actions.updateBuyAddress(event.target.value))
|
|
}
|
|
|
|
ShapeshiftForm.prototype.activeToggle = function (elementType) {
|
|
if (!this.props.accountDetail.formView.response || this.props.warning) return elementType
|
|
return `${elementType}.inactive`
|
|
}
|
|
|
|
ShapeshiftForm.prototype.renderLoading = function () {
|
|
return h('span', {
|
|
style: {
|
|
position: 'absolute',
|
|
left: '70px',
|
|
bottom: '138px',
|
|
background: 'transparent',
|
|
width: '229px',
|
|
height: '82px',
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
},
|
|
}, [
|
|
h('img', {
|
|
style: {
|
|
width: '60px',
|
|
},
|
|
src: 'images/loading.svg',
|
|
}),
|
|
])
|
|
}
|