mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
Change buy forms so that they are their own view and add Qr-code
This commit is contained in:
Frankie
parent
2fc26fb264
commit
b4c9a52259
@ -172,7 +172,7 @@ AccountDetailScreen.prototype.render = function () {
|
||||
}),
|
||||
|
||||
h('button', {
|
||||
onClick: this.buyButtonDeligator.bind(this),
|
||||
onClick: () => props.dispatch(actions.buyEthView(selected)),
|
||||
style: {
|
||||
marginBottom: '20px',
|
||||
marginRight: '8px',
|
||||
@ -264,6 +264,6 @@ AccountDetailScreen.prototype.buyButtonDeligator = function () {
|
||||
if (this.props.accountDetail.subview === 'buyForm') {
|
||||
props.dispatch(actions.backToAccountDetail(props.address))
|
||||
} else {
|
||||
props.dispatch(actions.buyEthSubview())
|
||||
props.dispatch(actions.buyEthView())
|
||||
}
|
||||
}
|
||||
|
||||
@ -113,8 +113,8 @@ var actions = {
|
||||
// buy Eth with coinbase
|
||||
BUY_ETH: 'BUY_ETH',
|
||||
buyEth: buyEth,
|
||||
buyEthSubview: buyEthSubview,
|
||||
BUY_ETH_SUBVIEW: 'BUY_ETH_SUBVIEW',
|
||||
buyEthView: buyEthView,
|
||||
BUY_ETH_VIEW: 'BUY_ETH_VIEW',
|
||||
UPDATE_COINBASE_AMOUNT: 'UPDATE_COIBASE_AMOUNT',
|
||||
updateCoinBaseAmount: updateCoinBaseAmount,
|
||||
UPDATE_BUY_ADDRESS: 'UPDATE_BUY_ADDRESS',
|
||||
@ -125,12 +125,14 @@ var actions = {
|
||||
shapeShiftSubview: shapeShiftSubview,
|
||||
PAIR_UPDATE: 'PAIR_UPDATE',
|
||||
pairUpdate: pairUpdate,
|
||||
COIN_SHIFT_REQUEST: 'COIN_SHIFT_REQUEST',
|
||||
coinShiftRquest: coinShiftRquest,
|
||||
SHOW_SUB_LOADING_INDICATION: 'SHOW_SUB_LOADING_INDICATION',
|
||||
showSubLoadingIndication: showSubLoadingIndication,
|
||||
HIDE_SUB_LOADING_INDICATION: 'HIDE_SUB_LOADING_INDICATION',
|
||||
hideSubLoadingIndication: hideSubLoadingIndication,
|
||||
// QR STUFF:
|
||||
SHOW_QR: 'SHOW_QR',
|
||||
getQr: getQr,
|
||||
}
|
||||
|
||||
module.exports = actions
|
||||
@ -625,9 +627,10 @@ function buyEth (address, amount) {
|
||||
}
|
||||
}
|
||||
|
||||
function buyEthSubview () {
|
||||
function buyEthView (address) {
|
||||
return {
|
||||
type: actions.BUY_ETH_SUBVIEW,
|
||||
type: actions.BUY_ETH_VIEW,
|
||||
value: address,
|
||||
}
|
||||
}
|
||||
|
||||
@ -691,19 +694,32 @@ function shapeShiftSubview (network) {
|
||||
|
||||
function coinShiftRquest (data) {
|
||||
return (dispatch) => {
|
||||
dispatch(actions.showSubLoadingIndication())
|
||||
dispatch(actions.showLoadingIndication())
|
||||
shapeShiftRequest('shift', { method: 'POST', data}, (response) => {
|
||||
dispatch(actions.hideSubLoadingIndication())
|
||||
if (response.error) return dispatch(actions.showWarning(response.error))
|
||||
var message = `Deposit your ${response.depositType} to the address bellow:`
|
||||
dispatch(actions.getQr(response.deposit, '125x125', message))
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function getQr (data, size, message) {
|
||||
return (dispatch) => {
|
||||
qrRequest(data, size, (response) => {
|
||||
dispatch(actions.hideLoadingIndication())
|
||||
if (response.error) return dispatch(actions.showWarning(response.error))
|
||||
dispatch({
|
||||
type: actions.COIN_SHIFT_REQUEST,
|
||||
type: actions.SHOW_QR,
|
||||
value: {
|
||||
response: response,
|
||||
qr: response,
|
||||
message: message,
|
||||
data: data,
|
||||
},
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function shapeShiftRequest (query, options, cb) {
|
||||
var queryResponse, method
|
||||
!options ? options = {} : null
|
||||
@ -727,3 +743,15 @@ function shapeShiftRequest (query, options, cb) {
|
||||
return shapShiftReq.send()
|
||||
}
|
||||
}
|
||||
|
||||
function qrRequest (data, size, cb) {
|
||||
var requestListner = function (request) {
|
||||
cb ? cb(this.responseText) : null
|
||||
return this.responseText
|
||||
}
|
||||
|
||||
var qrReq = new XMLHttpRequest()
|
||||
qrReq.addEventListener('load', requestListner)
|
||||
qrReq.open('GET', `https://api.qrserver.com/v1/create-qr-code/?size=${size}&format=svg&data=${data}`, true)
|
||||
qrReq.send()
|
||||
}
|
||||
|
||||
@ -28,7 +28,7 @@ const DropMenuItem = require('./components/drop-menu-item')
|
||||
const NetworkIndicator = require('./components/network')
|
||||
const Tooltip = require('./components/tooltip')
|
||||
const EthStoreWarning = require('./eth-store-warning')
|
||||
|
||||
const BuyView = require('./components/buy-button-subview')
|
||||
module.exports = connect(mapStateToProps)(App)
|
||||
|
||||
inherits(App, Component)
|
||||
@ -366,6 +366,8 @@ App.prototype.renderPrimary = function () {
|
||||
|
||||
case 'createVault':
|
||||
return h(CreateVaultScreen, {key: 'createVault'})
|
||||
case 'buyEth':
|
||||
return h(BuyView, {key: 'buyEthView'})
|
||||
|
||||
default:
|
||||
return h(AccountDetailScreen, {key: 'account-detail'})
|
||||
|
||||
@ -5,6 +5,7 @@ const connect = require('react-redux').connect
|
||||
const actions = require('../actions')
|
||||
const CoinbaseForm = require('./coinbase-form')
|
||||
const ShapeshiftForm = require('./shapeshift-form')
|
||||
const extension = require('../../../app/scripts/lib/extension')
|
||||
|
||||
module.exports = connect(mapStateToProps)(BuyButtonSubview)
|
||||
|
||||
@ -12,6 +13,7 @@ function mapStateToProps (state) {
|
||||
return {
|
||||
selectedAccount: state.selectedAccount,
|
||||
warning: state.appState.warning,
|
||||
buyView: state.appState.buyView,
|
||||
network: state.metamask.network,
|
||||
provider: state.metamask.provider,
|
||||
}
|
||||
@ -24,10 +26,26 @@ function BuyButtonSubview () {
|
||||
|
||||
BuyButtonSubview.prototype.render = function () {
|
||||
const props = this.props
|
||||
const currentForm = props.accountDetail.formView
|
||||
const currentForm = props.buyView.formView
|
||||
|
||||
return (
|
||||
h('span', {key: 'buyForm'}, [
|
||||
h('.buy-eth-section', [
|
||||
// back button
|
||||
h('.flex-row', {
|
||||
style: {
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
}, [
|
||||
h('i.fa.fa-arrow-left.fa-lg.cursor-pointer.color-orange', {
|
||||
onClick: () => props.dispatch(actions.backToAccountDetail(props.selectedAccount)),
|
||||
style: {
|
||||
position: 'absolute',
|
||||
left: '10px',
|
||||
},
|
||||
}),
|
||||
h('h2.page-subtitle', 'Buy Eth'),
|
||||
]),
|
||||
h('h3.flex-row.text-transform-uppercase', {
|
||||
style: {
|
||||
background: '#EBEBEB',
|
||||
@ -39,9 +57,31 @@ BuyButtonSubview.prototype.render = function () {
|
||||
h(currentForm.coinbase ? '.activeForm' : '.inactiveForm', {
|
||||
onClick: () => props.dispatch(actions.coinBaseSubview()),
|
||||
}, 'Coinbase'),
|
||||
h('a', {
|
||||
onClick: (event) => this.navigateTo('https://github.com/MetaMask/faq/blob/master/COINBASE.md'),
|
||||
}, [
|
||||
h('i.fa.fa-question-circle', {
|
||||
style: {
|
||||
position: 'relative',
|
||||
right: '33px',
|
||||
},
|
||||
}),
|
||||
]),
|
||||
h(currentForm.shapeshift ? '.activeForm' : '.inactiveForm', {
|
||||
onClick: () => props.dispatch(actions.shapeShiftSubview(props.provider.type)),
|
||||
}, 'Shapeshift'),
|
||||
|
||||
h('a', {
|
||||
href: 'https://github.com/MetaMask/faq/blob/master/COINBASE.md',
|
||||
onClick: (event) => this.navigateTo('https://info.shapeshift.io/about'),
|
||||
}, [
|
||||
h('i.fa.fa-question-circle', {
|
||||
style: {
|
||||
position: 'relative',
|
||||
right: '28px',
|
||||
},
|
||||
}),
|
||||
]),
|
||||
]),
|
||||
this.formVersionSubview(),
|
||||
])
|
||||
@ -50,9 +90,9 @@ BuyButtonSubview.prototype.render = function () {
|
||||
|
||||
BuyButtonSubview.prototype.formVersionSubview = function () {
|
||||
if (this.props.network === '1') {
|
||||
if (this.props.accountDetail.formView.coinbase) {
|
||||
if (this.props.buyView.formView.coinbase) {
|
||||
return h(CoinbaseForm, this.props)
|
||||
} else if (this.props.accountDetail.formView.shapeshift) {
|
||||
} else if (this.props.buyView.formView.shapeshift) {
|
||||
return h(ShapeshiftForm, this.props)
|
||||
}
|
||||
} else {
|
||||
@ -72,3 +112,6 @@ BuyButtonSubview.prototype.formVersionSubview = function () {
|
||||
}
|
||||
}
|
||||
|
||||
BuyButtonSubview.prototype.navigateTo = function (url) {
|
||||
extension.tabs.create({ url })
|
||||
}
|
||||
|
||||
@ -22,12 +22,13 @@ function CoinbaseForm() {
|
||||
|
||||
CoinbaseForm.prototype.render = function () {
|
||||
var props = this.props
|
||||
var amount = props.accountDetail.amount
|
||||
var address = props.accountDetail.buyAddress
|
||||
var amount = props.buyView.amount
|
||||
var address = props.buyView.buyAddress
|
||||
|
||||
return h('.flex-column', {
|
||||
style: {
|
||||
margin: '10px',
|
||||
// margin: '10px',
|
||||
padding: '25px',
|
||||
},
|
||||
}, [
|
||||
h('.flex-column', {
|
||||
@ -35,35 +36,10 @@ CoinbaseForm.prototype.render = function () {
|
||||
alignItems: 'flex-start',
|
||||
},
|
||||
}, [
|
||||
h('.flex-column', [
|
||||
h('.flex-row', [
|
||||
h('div', 'Address:'),
|
||||
h('.input-container', {
|
||||
style: {},
|
||||
}, [
|
||||
h('input.buy-inputs', {
|
||||
type: 'text',
|
||||
style: {
|
||||
boxSizing: 'border-box',
|
||||
width: '317px',
|
||||
height: '20px',
|
||||
padding: ' 12px 0px 12px 1px ',
|
||||
},
|
||||
defaultValue: address,
|
||||
onChange: this.handleAddress.bind(this),
|
||||
}),
|
||||
h('i.fa.fa-pencil-square-o.edit-text', {
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
color: '#F7861C',
|
||||
position: 'relative',
|
||||
bottom: '8px',
|
||||
right: '11px',
|
||||
},
|
||||
}),
|
||||
|
||||
h('.ellip-address', address),
|
||||
]),
|
||||
]),
|
||||
|
||||
h('.flex-row', [
|
||||
h('div', 'Amount: $'),
|
||||
h('.input-container', [
|
||||
@ -119,7 +95,7 @@ CoinbaseForm.prototype.render = function () {
|
||||
}, 'Continue to Coinbase'),
|
||||
|
||||
h('button', {
|
||||
onClick: () => props.dispatch(actions.backToAccountDetail(props.accounts.address)),
|
||||
onClick: () => props.dispatch(actions.backTobuyView(props.accounts.address)),
|
||||
}, 'Cancel'),
|
||||
]),
|
||||
])
|
||||
@ -132,12 +108,12 @@ CoinbaseForm.prototype.handleAddress = function (event) {
|
||||
}
|
||||
CoinbaseForm.prototype.toCoinbase = function () {
|
||||
var props = this.props
|
||||
var amount = props.accountDetail.amount
|
||||
var address = props.accountDetail.buyAddress
|
||||
var amount = props.buyView.amount
|
||||
var address = props.buyView.buyAddress
|
||||
var message
|
||||
|
||||
if (isValidAddress(address) && isValidAmountforCoinBase(amount).valid) {
|
||||
props.dispatch(actions.buyEth(address, props.accountDetail.amount))
|
||||
props.dispatch(actions.buyEth(address, props.buyView.amount))
|
||||
} else if (!isValidAmountforCoinBase(amount).valid) {
|
||||
message = isValidAmountforCoinBase(amount).message
|
||||
return props.dispatch(actions.showWarning(message))
|
||||
|
||||
50
ui/app/components/qr-code.js
Normal file
50
ui/app/components/qr-code.js
Normal file
@ -0,0 +1,50 @@
|
||||
const Component = require('react').Component
|
||||
const h = require('react-hyperscript')
|
||||
const inherits = require('util').inherits
|
||||
const connect = require('react-redux').connect
|
||||
const CopyButton = require('./copyButton')
|
||||
|
||||
module.exports = connect(mapStateToProps)(QrCodeView)
|
||||
|
||||
function mapStateToProps (state) {
|
||||
return {
|
||||
Qr: state.appState.Qr,
|
||||
buyView: state.appState.buyView,
|
||||
}
|
||||
}
|
||||
|
||||
inherits(QrCodeView, Component)
|
||||
|
||||
function QrCodeView () {
|
||||
Component.call(this)
|
||||
}
|
||||
|
||||
QrCodeView.prototype.render = function () {
|
||||
var props = this.props
|
||||
var Qr = props.Qr
|
||||
return h('.main-container.flex-column', {
|
||||
style: {
|
||||
justifyContent: 'center',
|
||||
padding: '45px',
|
||||
alignItems: 'center',
|
||||
},
|
||||
}, [
|
||||
h('h3', Qr.message),
|
||||
h('#qr-container.flex-column', {
|
||||
key: 'qr',
|
||||
style: {
|
||||
marginTop: '25px',
|
||||
marginBottom: '15px',
|
||||
},
|
||||
dangerouslySetInnerHTML: {
|
||||
__html: Qr.image,
|
||||
},
|
||||
}),
|
||||
h('.flex-row', [
|
||||
h('h3.ellip-address', Qr.data),
|
||||
h(CopyButton, {
|
||||
value: Qr.data,
|
||||
}),
|
||||
]),
|
||||
])
|
||||
}
|
||||
@ -2,9 +2,9 @@ const Component = require('react').Component
|
||||
const h = require('react-hyperscript')
|
||||
const inherits = require('util').inherits
|
||||
const connect = require('react-redux').connect
|
||||
const ReactCSSTransitionGroup = require('react-addons-css-transition-group')
|
||||
const actions = require('../actions')
|
||||
const CopyButton = require('./copyButton')
|
||||
|
||||
const Qr = require('./qr-code')
|
||||
const isValidAddress = require('../util').isValidAddress
|
||||
module.exports = connect(mapStateToProps)(ShapeshiftForm)
|
||||
|
||||
@ -13,23 +13,36 @@ function mapStateToProps(state) {
|
||||
selectedAccount: state.selectedAccount,
|
||||
warning: state.appState.warning,
|
||||
isSubLoading: state.appState.isSubLoading,
|
||||
qrRequested: state.appState.qrRequested,
|
||||
}
|
||||
}
|
||||
|
||||
inherits(ShapeshiftForm, Component)
|
||||
|
||||
function ShapeshiftForm() {
|
||||
function ShapeshiftForm () {
|
||||
Component.call(this)
|
||||
}
|
||||
|
||||
ShapeshiftForm.prototype.render = function () {
|
||||
const marketinfo = this.props.accountDetail.formView.marketinfo
|
||||
const coinOptions = this.props.accountDetail.formView.coinOptions
|
||||
return h(ReactCSSTransitionGroup, {
|
||||
className: 'css-transition-group',
|
||||
transitionName: 'main',
|
||||
transitionEnterTimeout: 300,
|
||||
transitionLeaveTimeout: 300,
|
||||
}, [
|
||||
this.props.qrRequested ? h(Qr, {key: 'qr'}) : this.renderMain(),
|
||||
])
|
||||
|
||||
}
|
||||
|
||||
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: {
|
||||
marginTop: '10px',
|
||||
// marginTop: '10px',
|
||||
padding: '25px',
|
||||
width: '100%',
|
||||
alignItems: 'center',
|
||||
},
|
||||
@ -67,8 +80,8 @@ ShapeshiftForm.prototype.render = function () {
|
||||
fontSize: '12px',
|
||||
color: '#F7861C',
|
||||
position: 'relative',
|
||||
bottom: '23px',
|
||||
right: '11px',
|
||||
bottom: '48px',
|
||||
left: '106px',
|
||||
},
|
||||
}),
|
||||
]),
|
||||
@ -78,7 +91,7 @@ ShapeshiftForm.prototype.render = function () {
|
||||
style: {
|
||||
position: 'relative',
|
||||
bottom: '5px',
|
||||
right: '5px',
|
||||
left: '5px',
|
||||
color: '#F7861C',
|
||||
},
|
||||
onClick: this.updateCoin.bind(this),
|
||||
@ -86,8 +99,8 @@ ShapeshiftForm.prototype.render = function () {
|
||||
h('i.fa.fa-chevron-right.fa-4.orange', {
|
||||
style: {
|
||||
position: 'relative',
|
||||
bottom: '5px',
|
||||
right: '15px',
|
||||
bottom: '26px',
|
||||
left: '10px',
|
||||
color: '#F7861C',
|
||||
},
|
||||
onClick: this.updateCoin.bind(this),
|
||||
@ -107,7 +120,6 @@ ShapeshiftForm.prototype.render = function () {
|
||||
]),
|
||||
|
||||
this.props.isSubLoading ? this.renderLoading() : null,
|
||||
|
||||
h('.flex-column', {
|
||||
style: {
|
||||
width: '235px',
|
||||
@ -124,40 +136,21 @@ ShapeshiftForm.prototype.render = function () {
|
||||
this.props.warning) : this.renderInfo(),
|
||||
]),
|
||||
|
||||
h(this.activeToggle('.input-container'), {
|
||||
h('.flex-row', {
|
||||
style: {
|
||||
padding: '10px',
|
||||
paddingBottom: '0px',
|
||||
paddingBottom: '2px',
|
||||
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('.ellip-address', this.props.buyView.buyAddress),
|
||||
]),
|
||||
|
||||
h(this.activeToggle('.input-container'), {
|
||||
style: {
|
||||
padding: '10px',
|
||||
paddingTop: '0px',
|
||||
width: '100%',
|
||||
},
|
||||
}, [
|
||||
@ -168,7 +161,7 @@ ShapeshiftForm.prototype.render = function () {
|
||||
placeholder: `Your ${coin} Refund Address`,
|
||||
style: {
|
||||
boxSizing: 'border-box',
|
||||
width: '235px',
|
||||
width: '278px',
|
||||
height: '20px',
|
||||
padding: ' 5px ',
|
||||
},
|
||||
@ -183,19 +176,27 @@ ShapeshiftForm.prototype.render = function () {
|
||||
right: '11px',
|
||||
},
|
||||
}),
|
||||
|
||||
h('.flex-row', {
|
||||
style: {
|
||||
justifyContent: 'flex-end',
|
||||
},
|
||||
}, [
|
||||
h('button', {
|
||||
onClick: this.shift.bind(this),
|
||||
style: {
|
||||
marginTop: '10px',
|
||||
},
|
||||
},
|
||||
'Submit'),
|
||||
]),
|
||||
]),
|
||||
])
|
||||
}
|
||||
|
||||
ShapeshiftForm.prototype.shift = function () {
|
||||
var withdrawal = this.props.accountDetail.buyAddress
|
||||
var withdrawal = this.props.buyView.buyAddress
|
||||
var returnAddress = document.getElementById('fromCoinAddress').value
|
||||
var pair = this.props.accountDetail.formView.marketinfo.pair
|
||||
var pair = this.props.buyView.formView.marketinfo.pair
|
||||
var data = {
|
||||
'withdrawal': withdrawal,
|
||||
'pair': pair,
|
||||
@ -208,7 +209,7 @@ ShapeshiftForm.prototype.shift = function () {
|
||||
}
|
||||
|
||||
ShapeshiftForm.prototype.renderCoinList = function () {
|
||||
var list = Object.keys(this.props.accountDetail.formView.coinOptions).map((item) => {
|
||||
var list = Object.keys(this.props.buyView.formView.coinOptions).map((item) => {
|
||||
return h('option', {
|
||||
value: item,
|
||||
}, item)
|
||||
@ -224,7 +225,7 @@ ShapeshiftForm.prototype.renderCoinList = function () {
|
||||
ShapeshiftForm.prototype.updateCoin = function (event) {
|
||||
event.preventDefault()
|
||||
const props = this.props
|
||||
var coinOptions = this.props.accountDetail.formView.coinOptions
|
||||
var coinOptions = this.props.buyView.formView.coinOptions
|
||||
var coin = document.getElementById('fromCoin').value
|
||||
|
||||
if (!coinOptions[coin.toUpperCase()] || coin.toUpperCase() === 'ETH') {
|
||||
@ -237,7 +238,7 @@ ShapeshiftForm.prototype.updateCoin = function (event) {
|
||||
|
||||
ShapeshiftForm.prototype.handleLiveInput = function () {
|
||||
const props = this.props
|
||||
var coinOptions = this.props.accountDetail.formView.coinOptions
|
||||
var coinOptions = this.props.buyView.formView.coinOptions
|
||||
var coin = document.getElementById('fromCoin').value
|
||||
|
||||
if (!coinOptions[coin.toUpperCase()] || coin.toUpperCase() === 'ETH') {
|
||||
@ -248,13 +249,16 @@ ShapeshiftForm.prototype.handleLiveInput = function () {
|
||||
}
|
||||
|
||||
ShapeshiftForm.prototype.renderInfo = function () {
|
||||
const marketinfo = this.props.accountDetail.formView.marketinfo
|
||||
const coinOptions = this.props.accountDetail.formView.coinOptions
|
||||
const marketinfo = this.props.buyView.formView.marketinfo
|
||||
const coinOptions = this.props.buyView.formView.coinOptions
|
||||
var coin = marketinfo.pair.split('_')[0].toUpperCase()
|
||||
const request = this.props.accountDetail.formView.response
|
||||
|
||||
if (!request) {
|
||||
return h('span', [
|
||||
return h('span', {
|
||||
style: {
|
||||
marginTop: '15px',
|
||||
marginBottom: '15px',
|
||||
},
|
||||
}, [
|
||||
h('h3.flex-row.text-transform-uppercase', {
|
||||
style: {
|
||||
color: '#AEAEAE',
|
||||
@ -269,40 +273,6 @@ ShapeshiftForm.prototype.renderInfo = function () {
|
||||
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) {
|
||||
@ -310,7 +280,7 @@ ShapeshiftForm.prototype.handleAddress = function (event) {
|
||||
}
|
||||
|
||||
ShapeshiftForm.prototype.activeToggle = function (elementType) {
|
||||
if (!this.props.accountDetail.formView.response || this.props.warning) return elementType
|
||||
if (!this.props.buyView.formView.response || this.props.warning) return elementType
|
||||
return `${elementType}.inactive`
|
||||
}
|
||||
|
||||
@ -319,7 +289,7 @@ ShapeshiftForm.prototype.renderLoading = function () {
|
||||
style: {
|
||||
position: 'absolute',
|
||||
left: '70px',
|
||||
bottom: '138px',
|
||||
bottom: '194px',
|
||||
background: 'transparent',
|
||||
width: '229px',
|
||||
height: '82px',
|
||||
|
||||
@ -573,3 +573,12 @@ input.large-input {
|
||||
background: #AEAEAE;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.ellip-address {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 5em;
|
||||
font-size: 14px;
|
||||
font-family: "Montserrat Light";
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
@ -378,17 +378,17 @@ function reduceApp (state, action) {
|
||||
},
|
||||
})
|
||||
|
||||
case actions.BUY_ETH_SUBVIEW:
|
||||
case actions.BUY_ETH_VIEW:
|
||||
return extend(appState, {
|
||||
transForward: true,
|
||||
currentView: {
|
||||
name: 'accountDetail',
|
||||
name: 'buyEth',
|
||||
context: appState.currentView.context,
|
||||
},
|
||||
accountDetail: {
|
||||
buyView: {
|
||||
subview: 'buyForm',
|
||||
amount: '5.00',
|
||||
buyAddress: appState.currentView.context,
|
||||
buyAddress: action.value,
|
||||
formView: {
|
||||
coinbase: true,
|
||||
shapeshift: false,
|
||||
@ -398,46 +398,46 @@ function reduceApp (state, action) {
|
||||
|
||||
case actions.UPDATE_BUY_ADDRESS:
|
||||
return extend(appState, {
|
||||
accountDetail: {
|
||||
buyView: {
|
||||
subview: 'buyForm',
|
||||
formView: {
|
||||
coinbase: true,
|
||||
shapeshift: false,
|
||||
coinbase: appState.buyView.formView.coinbase,
|
||||
shapeshift: appState.buyView.formView.shapeshift,
|
||||
},
|
||||
buyAddress: action.value,
|
||||
amount: appState.accountDetail.amount,
|
||||
amount: appState.buyView.amount,
|
||||
},
|
||||
})
|
||||
|
||||
case actions.UPDATE_COINBASE_AMOUNT:
|
||||
return extend(appState, {
|
||||
accountDetail: {
|
||||
buyView: {
|
||||
subview: 'buyForm',
|
||||
formView: {
|
||||
coinbase: true,
|
||||
shapeshift: false,
|
||||
},
|
||||
buyAddress: appState.accountDetail.buyAddress,
|
||||
buyAddress: appState.buyView.buyAddress,
|
||||
amount: action.value,
|
||||
},
|
||||
})
|
||||
|
||||
case actions.COINBASE_SUBVIEW:
|
||||
return extend(appState, {
|
||||
accountDetail: {
|
||||
buyView: {
|
||||
subview: 'buyForm',
|
||||
formView: {
|
||||
coinbase: true,
|
||||
shapeshift: false,
|
||||
},
|
||||
buyAddress: appState.accountDetail.buyAddress,
|
||||
amount: appState.accountDetail.amount,
|
||||
buyAddress: appState.buyView.buyAddress,
|
||||
amount: appState.buyView.amount,
|
||||
},
|
||||
})
|
||||
|
||||
case actions.SHAPESHIFT_SUBVIEW:
|
||||
return extend(appState, {
|
||||
accountDetail: {
|
||||
buyView: {
|
||||
subview: 'buyForm',
|
||||
formView: {
|
||||
coinbase: false,
|
||||
@ -445,41 +445,35 @@ function reduceApp (state, action) {
|
||||
marketinfo: action.value.marketinfo,
|
||||
coinOptions: action.value.coinOptions,
|
||||
},
|
||||
buyAddress: appState.accountDetail.buyAddress,
|
||||
amount: appState.accountDetail.amount,
|
||||
buyAddress: appState.buyView.buyAddress,
|
||||
amount: appState.buyView.amount,
|
||||
},
|
||||
})
|
||||
|
||||
case actions.PAIR_UPDATE:
|
||||
return extend(appState, {
|
||||
accountDetail: {
|
||||
buyView: {
|
||||
subview: 'buyForm',
|
||||
formView: {
|
||||
coinbase: false,
|
||||
shapeshift: true,
|
||||
marketinfo: action.value.marketinfo,
|
||||
coinOptions: appState.accountDetail.formView.coinOptions,
|
||||
coinOptions: appState.buyView.formView.coinOptions,
|
||||
},
|
||||
buyAddress: appState.accountDetail.buyAddress,
|
||||
amount: appState.accountDetail.amount,
|
||||
buyAddress: appState.buyView.buyAddress,
|
||||
amount: appState.buyView.amount,
|
||||
warning: null,
|
||||
},
|
||||
})
|
||||
|
||||
case actions.COIN_SHIFT_REQUEST:
|
||||
case actions.SHOW_QR:
|
||||
return extend(appState, {
|
||||
accountDetail: {
|
||||
subview: 'buyForm',
|
||||
formView: {
|
||||
coinbase: false,
|
||||
shapeshift: true,
|
||||
marketinfo: appState.accountDetail.formView.marketinfo,
|
||||
coinOptions: appState.accountDetail.formView.coinOptions,
|
||||
response: action.value.response,
|
||||
},
|
||||
buyAddress: appState.accountDetail.buyAddress,
|
||||
amount: appState.accountDetail.amount,
|
||||
warning: null,
|
||||
qrRequested: true,
|
||||
transForward: true,
|
||||
Qr: {
|
||||
message: action.value.message,
|
||||
image: action.value.qr,
|
||||
data: action.value.data,
|
||||
},
|
||||
})
|
||||
default:
|
||||
|
||||
Loading…
Reference in New Issue
Block a user