Mark Stacey
6 years ago
committed by
Dan J Miller
parent
a257a73172
commit
313def1ce2
@ -1,40 +0,0 @@ |
||||
const Component = require('react').Component |
||||
const h = require('react-hyperscript') |
||||
const inherits = require('util').inherits |
||||
const connect = require('react-redux').connect |
||||
const actions = require('../../../store/actions') |
||||
const QrView = require('../../ui/qr-code') |
||||
const AccountModalContainer = require('./account-modal-container') |
||||
|
||||
function mapStateToProps (state) { |
||||
return { |
||||
Qr: state.appState.modal.modalState.props.Qr, |
||||
} |
||||
} |
||||
|
||||
function mapDispatchToProps (dispatch) { |
||||
return { |
||||
hideModal: () => { |
||||
dispatch(actions.hideModal()) |
||||
}, |
||||
} |
||||
} |
||||
|
||||
inherits(ShapeshiftDepositTxModal, Component) |
||||
function ShapeshiftDepositTxModal () { |
||||
Component.call(this) |
||||
|
||||
} |
||||
|
||||
module.exports = connect(mapStateToProps, mapDispatchToProps)(ShapeshiftDepositTxModal) |
||||
|
||||
ShapeshiftDepositTxModal.prototype.render = function () { |
||||
const { Qr } = this.props |
||||
|
||||
return h(AccountModalContainer, { |
||||
}, [ |
||||
h('div', {}, [ |
||||
h(QrView, {key: 'qr', Qr}), |
||||
]), |
||||
]) |
||||
} |
||||
@ -1,256 +0,0 @@ |
||||
const h = require('react-hyperscript') |
||||
const inherits = require('util').inherits |
||||
const PropTypes = require('prop-types') |
||||
const Component = require('react').Component |
||||
const connect = require('react-redux').connect |
||||
const classnames = require('classnames') |
||||
const qrcode = require('qrcode-generator') |
||||
const { shapeShiftSubview, pairUpdate, buyWithShapeShift } = require('../../store/actions') |
||||
const { isValidAddress } = require('../../helpers/utils/util') |
||||
const SimpleDropdown = require('./dropdowns/simple-dropdown') |
||||
|
||||
import Button from '../ui/button' |
||||
|
||||
function mapStateToProps (state) { |
||||
const { |
||||
coinOptions, |
||||
tokenExchangeRates, |
||||
selectedAddress, |
||||
} = state.metamask |
||||
const { warning } = state.appState |
||||
|
||||
return { |
||||
coinOptions, |
||||
tokenExchangeRates, |
||||
selectedAddress, |
||||
warning, |
||||
} |
||||
} |
||||
|
||||
function mapDispatchToProps (dispatch) { |
||||
return { |
||||
shapeShiftSubview: () => dispatch(shapeShiftSubview()), |
||||
pairUpdate: coin => dispatch(pairUpdate(coin)), |
||||
buyWithShapeShift: data => dispatch(buyWithShapeShift(data)), |
||||
} |
||||
} |
||||
|
||||
ShapeshiftForm.contextTypes = { |
||||
t: PropTypes.func, |
||||
} |
||||
|
||||
module.exports = connect(mapStateToProps, mapDispatchToProps)(ShapeshiftForm) |
||||
|
||||
|
||||
inherits(ShapeshiftForm, Component) |
||||
function ShapeshiftForm () { |
||||
Component.call(this) |
||||
|
||||
this.state = { |
||||
depositCoin: 'btc', |
||||
refundAddress: '', |
||||
showQrCode: false, |
||||
depositAddress: '', |
||||
errorMessage: '', |
||||
isLoading: false, |
||||
bought: false, |
||||
} |
||||
} |
||||
|
||||
ShapeshiftForm.prototype.getCoinPair = function () { |
||||
return `${this.state.depositCoin.toUpperCase()}_ETH` |
||||
} |
||||
|
||||
ShapeshiftForm.prototype.componentWillMount = function () { |
||||
this.props.shapeShiftSubview() |
||||
} |
||||
|
||||
ShapeshiftForm.prototype.onCoinChange = function (coin) { |
||||
this.setState({ |
||||
depositCoin: coin, |
||||
errorMessage: '', |
||||
}) |
||||
this.props.pairUpdate(coin) |
||||
} |
||||
|
||||
ShapeshiftForm.prototype.onBuyWithShapeShift = function () { |
||||
this.setState({ |
||||
isLoading: true, |
||||
showQrCode: true, |
||||
}) |
||||
|
||||
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', |
||||
} |
||||
|
||||
if (isValidAddress(withdrawal)) { |
||||
buyWithShapeShift(data) |
||||
.then(d => this.setState({ |
||||
showQrCode: true, |
||||
depositAddress: d.deposit, |
||||
isLoading: false, |
||||
})) |
||||
.catch(() => this.setState({ |
||||
showQrCode: false, |
||||
errorMessage: this.context.t('invalidRequest'), |
||||
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('div.shapeshift-form__metadata-value', {}, [ |
||||
h('span', value), |
||||
]), |
||||
|
||||
]) |
||||
} |
||||
|
||||
ShapeshiftForm.prototype.renderMarketInfo = function () { |
||||
const { tokenExchangeRates } = this.props |
||||
const { |
||||
limit, |
||||
rate, |
||||
minimum, |
||||
} = tokenExchangeRates[this.getCoinPair()] || {} |
||||
|
||||
return h('div.shapeshift-form__metadata', {}, [ |
||||
|
||||
this.renderMetadata(this.context.t('status'), limit ? this.context.t('available') : this.context.t('unavailable')), |
||||
this.renderMetadata(this.context.t('limit'), limit), |
||||
this.renderMetadata(this.context.t('exchangeRate'), rate), |
||||
this.renderMetadata(this.context.t('min'), minimum), |
||||
|
||||
]) |
||||
} |
||||
|
||||
ShapeshiftForm.prototype.renderQrCode = function () { |
||||
const { depositAddress, isLoading, depositCoin } = this.state |
||||
const qrImage = qrcode(4, 'M') |
||||
qrImage.addData(depositAddress) |
||||
qrImage.make() |
||||
|
||||
return h('div.shapeshift-form', {}, [ |
||||
|
||||
h('div.shapeshift-form__deposit-instruction', [ |
||||
this.context.t('depositCoin', [depositCoin.toUpperCase()]), |
||||
]), |
||||
|
||||
h('div', depositAddress), |
||||
|
||||
h('div.shapeshift-form__qr-code', [ |
||||
isLoading |
||||
? h('img', { |
||||
src: 'images/loading.svg', |
||||
style: { width: '60px'}, |
||||
}) |
||||
: h('div', { |
||||
dangerouslySetInnerHTML: { __html: qrImage.createTableTag(4) }, |
||||
}), |
||||
]), |
||||
|
||||
this.renderMarketInfo(), |
||||
|
||||
]) |
||||
} |
||||
|
||||
|
||||
ShapeshiftForm.prototype.render = function () { |
||||
const { coinOptions, btnClass, warning } = this.props |
||||
const { errorMessage, showQrCode, depositAddress } = this.state |
||||
const { tokenExchangeRates } = this.props |
||||
const token = tokenExchangeRates[this.getCoinPair()] |
||||
|
||||
return h('div.shapeshift-form-wrapper', [ |
||||
showQrCode |
||||
? this.renderQrCode() |
||||
: h('div.modal-shapeshift-form', [ |
||||
h('div.shapeshift-form__selectors', [ |
||||
|
||||
h('div.shapeshift-form__selector', [ |
||||
|
||||
h('div.shapeshift-form__selector-label', this.context.t('deposit')), |
||||
|
||||
h(SimpleDropdown, { |
||||
selectedOption: this.state.depositCoin, |
||||
onSelect: (coin) => this.onCoinChange(coin), |
||||
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', [ |
||||
this.context.t('receive'), |
||||
]), |
||||
|
||||
h('div.shapeshift-form__selector-input', ['ETH']), |
||||
|
||||
]), |
||||
|
||||
]), |
||||
|
||||
warning && h('div.shapeshift-form__address-input-label', warning), |
||||
|
||||
!warning && h('div', { |
||||
className: classnames('shapeshift-form__address-input-wrapper', { |
||||
'shapeshift-form__address-input-wrapper--error': errorMessage, |
||||
}), |
||||
}, [ |
||||
|
||||
h('div.shapeshift-form__address-input-label', [ |
||||
this.context.t('refundAddress'), |
||||
]), |
||||
|
||||
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]), |
||||
]), |
||||
|
||||
!warning && this.renderMarketInfo(), |
||||
|
||||
]), |
||||
|
||||
!depositAddress && h(Button, { |
||||
type: 'secondary', |
||||
large: true, |
||||
className: `${btnClass} shapeshift-form__shapeshift-buy-btn`, |
||||
disabled: !token, |
||||
onClick: () => this.onBuyWithShapeShift(), |
||||
}, [this.context.t('buy')]), |
||||
|
||||
]) |
||||
} |
||||
Loading…
Reference in new issue