From 9c6dd9ef4953f6e421feb6e6684ef43da26f6b75 Mon Sep 17 00:00:00 2001 From: Frankie Date: Wed, 10 Aug 2016 13:43:01 -0700 Subject: Create "buy form" add shape shift --- ui/app/components/buy-button-subview.js | 74 +++++++ ui/app/components/coinbase-form.js | 186 ++++++++++++++++++ ui/app/components/shapeshift-form.js | 335 ++++++++++++++++++++++++++++++++ 3 files changed, 595 insertions(+) create mode 100644 ui/app/components/buy-button-subview.js create mode 100644 ui/app/components/coinbase-form.js create mode 100644 ui/app/components/shapeshift-form.js (limited to 'ui/app/components') diff --git a/ui/app/components/buy-button-subview.js b/ui/app/components/buy-button-subview.js new file mode 100644 index 000000000..b410630a9 --- /dev/null +++ b/ui/app/components/buy-button-subview.js @@ -0,0 +1,74 @@ +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 CoinbaseForm = require('./coinbase-form') +const ShapeshiftForm = require('./shapeshift-form') + +module.exports = connect(mapStateToProps)(BuyButtonSubview) + +function mapStateToProps (state) { + return { + selectedAccount: state.selectedAccount, + warning: state.appState.warning, + network: state.metamask.network, + provider: state.metamask.provider, + } +} + +inherits(BuyButtonSubview, Component) +function BuyButtonSubview () { + Component.call(this) +} + +BuyButtonSubview.prototype.render = function () { + const props = this.props + const currentForm = props.accountDetail.formView + + return ( + h('span', {key: 'buyForm'}, [ + h('h3.flex-row.text-transform-uppercase', { + style: { + background: '#EBEBEB', + color: '#AEAEAE', + paddingTop: '4px', + justifyContent: 'space-around', + }, + }, [ + h(currentForm.coinbase ? '.activeForm' : '.inactiveForm', { + onClick: () => props.dispatch(actions.coinBaseSubview()), + }, 'Coinbase'), + h(currentForm.shapeshift ? '.activeForm' : '.inactiveForm', { + onClick: () => props.dispatch(actions.shapeShiftSubview(props.provider.type)), + }, 'Shapeshift'), + ]), + this.formVersionSubview(), + ]) + ) +} + +BuyButtonSubview.prototype.formVersionSubview = function () { + if (this.props.network === '1') { + if (this.props.accountDetail.formView.coinbase) { + return h(CoinbaseForm, this.props) + } else if (this.props.accountDetail.formView.shapeshift) { + return h(ShapeshiftForm, this.props) + } + } else { + console.log(this.props.network) + return h('div.flex-column', { + style: { + alignItems: 'center', + margin: '50px', + }, + }, [ + h('h3.text-transform-uppercase', { + style: { + width: '225px', + }, + }, 'In order to access this feature please switch too the Main Network'), + ]) + } +} + diff --git a/ui/app/components/coinbase-form.js b/ui/app/components/coinbase-form.js new file mode 100644 index 000000000..5ab6b507a --- /dev/null +++ b/ui/app/components/coinbase-form.js @@ -0,0 +1,186 @@ +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 isValidAddress = require('../util').isValidAddress +module.exports = connect(mapStateToProps)(CoinbaseForm) + +function mapStateToProps(state) { + return { + selectedAccount: state.selectedAccount, + warning: state.appState.warning, + } +} + +inherits(CoinbaseForm, Component) + +function CoinbaseForm() { + Component.call(this) +} + +CoinbaseForm.prototype.render = function () { + var props = this.props + var amount = props.accountDetail.amount + var address = props.accountDetail.buyAddress + + return h('.flex-column', { + style: { + margin: '10px', + }, + }, [ + h('.flex-column', { + style: { + alignItems: 'flex-start', + }, + }, [ + h('.flex-column', [ + 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('.flex-row', [ + h('div', 'Amount: $'), + h('.input-container', [ + h('input.buy-inputs', { + style: { + width: '3em', + boxSizing: 'border-box', + }, + defaultValue: amount, + onChange: this.handleAmount.bind(this), + }), + h('i.fa.fa-pencil-square-o.edit-text', { + style: { + fontSize: '12px', + color: '#F7861C', + position: 'relative', + bottom: '5px', + right: '11px', + }, + }), + ]), + ]), + ]), + + h('.info-gray', { + style: { + fontSize: '10px', + fontFamily: 'Montserrat Light', + margin: '15px', + lineHeight: '13px', + }, + }, + `there is a USD$ 5 a day max and a USD$ 50 + dollar limit per the life time of an account without a + coinbase account. A fee of 3.75% will be aplied to debit/credit cards.`), + + !props.warning ? h('div', { + style: { + width: '340px', + height: '22px', + }, + }) : props.warning && h('span.error.flex-center', props.warning), + + + h('.flex-row', { + style: { + justifyContent: 'space-around', + margin: '33px', + }, + }, [ + h('button', { + onClick: this.toCoinbase.bind(this), + }, 'Continue to Coinbase'), + + h('button', { + onClick: () => props.dispatch(actions.backToAccountDetail(props.accounts.address)), + }, 'Cancel'), + ]), + ]) +} +CoinbaseForm.prototype.handleAmount = function (event) { + this.props.dispatch(actions.updateCoinBaseAmount(event.target.value)) +} +CoinbaseForm.prototype.handleAddress = function (event) { + this.props.dispatch(actions.updateBuyAddress(event.target.value)) +} +CoinbaseForm.prototype.toCoinbase = function () { + var props = this.props + var amount = props.accountDetail.amount + var address = props.accountDetail.buyAddress + var message + + if (isValidAddress(address) && isValidAmountforCoinBase(amount).valid) { + props.dispatch(actions.buyEth(address, props.accountDetail.amount)) + } else if (!isValidAmountforCoinBase(amount).valid) { + message = isValidAmountforCoinBase(amount).message + return props.dispatch(actions.showWarning(message)) + } else { + message = 'Receiving address is invalid.' + return props.dispatch(actions.showWarning(message)) + } +} + +CoinbaseForm.prototype.renderLoading = function () { + + return h('img', { + style: { + width: '27px', + marginRight: '-27px', + }, + src: 'images/loading.svg', + }) +} + +function isValidAmountforCoinBase(amount) { + amount = parseFloat(amount) + + if (amount) { + if (amount <= 5 && amount > 0) { + return { + valid: true, + } + } else if (amount > 5) { + return { + valid: false, + message: 'The amount can not be greater then $5', + } + } else { + return { + valid: false, + message: 'Can not buy amounts less then $0', + } + } + } else { + return { + valid: false, + message: 'The amount entered is not a number', + } + } +} diff --git a/ui/app/components/shapeshift-form.js b/ui/app/components/shapeshift-form.js new file mode 100644 index 000000000..fea9539b0 --- /dev/null +++ b/ui/app/components/shapeshift-form.js @@ -0,0 +1,335 @@ +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: { + margin: '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: { + width: '100%', + marginTop: '19px', + }, + }, [ + 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: { + 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', + }), + ]) +} -- cgit v1.2.3 From c8b2826441d03dd2fb525ce6f7a89e3873117a37 Mon Sep 17 00:00:00 2001 From: Frankie Date: Wed, 10 Aug 2016 15:07:10 -0700 Subject: Fix typo for copyButton --- ui/app/components/shapeshift-form.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/components') diff --git a/ui/app/components/shapeshift-form.js b/ui/app/components/shapeshift-form.js index fea9539b0..116842043 100644 --- a/ui/app/components/shapeshift-form.js +++ b/ui/app/components/shapeshift-form.js @@ -3,7 +3,7 @@ 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 CopyButton = require('./copyButton') const isValidAddress = require('../util').isValidAddress module.exports = connect(mapStateToProps)(ShapeshiftForm) -- cgit v1.2.3 From 2fc26fb264ba0df7e4fc60128c6cbe19d3141beb Mon Sep 17 00:00:00 2001 From: Frankie Date: Wed, 10 Aug 2016 18:53:11 -0700 Subject: Even out some of the margins --- ui/app/components/shapeshift-form.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) (limited to 'ui/app/components') diff --git a/ui/app/components/shapeshift-form.js b/ui/app/components/shapeshift-form.js index 116842043..9c9ec2a05 100644 --- a/ui/app/components/shapeshift-form.js +++ b/ui/app/components/shapeshift-form.js @@ -29,7 +29,7 @@ ShapeshiftForm.prototype.render = function () { return h('.flex-column', { style: { - margin: '10px', + marginTop: '10px', width: '100%', alignItems: 'center', }, @@ -126,8 +126,9 @@ ShapeshiftForm.prototype.render = function () { h(this.activeToggle('.input-container'), { style: { + padding: '10px', + paddingBottom: '0px', width: '100%', - marginTop: '19px', }, }, [ h('div', 'Receiving address:'), @@ -156,6 +157,7 @@ ShapeshiftForm.prototype.render = function () { ]), h(this.activeToggle('.input-container'), { style: { + padding: '10px', width: '100%', }, }, [ -- cgit v1.2.3 From b4c9a5225947f9aadac5fd1bb23fde64740d774a Mon Sep 17 00:00:00 2001 From: Frankie Date: Fri, 12 Aug 2016 15:41:59 -0700 Subject: Change buy forms so that they are their own view and add Qr-code --- ui/app/components/buy-button-subview.js | 51 +++++++++- ui/app/components/coinbase-form.js | 44 ++------ ui/app/components/qr-code.js | 50 ++++++++++ ui/app/components/shapeshift-form.js | 172 +++++++++++++------------------- 4 files changed, 178 insertions(+), 139 deletions(-) create mode 100644 ui/app/components/qr-code.js (limited to 'ui/app/components') diff --git a/ui/app/components/buy-button-subview.js b/ui/app/components/buy-button-subview.js index b410630a9..3f13878df 100644 --- a/ui/app/components/buy-button-subview.js +++ b/ui/app/components/buy-button-subview.js @@ -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 }) +} diff --git a/ui/app/components/coinbase-form.js b/ui/app/components/coinbase-form.js index 5ab6b507a..efd05ec96 100644 --- a/ui/app/components/coinbase-form.js +++ b/ui/app/components/coinbase-form.js @@ -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)) diff --git a/ui/app/components/qr-code.js b/ui/app/components/qr-code.js new file mode 100644 index 000000000..765322239 --- /dev/null +++ b/ui/app/components/qr-code.js @@ -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, + }), + ]), + ]) +} diff --git a/ui/app/components/shapeshift-form.js b/ui/app/components/shapeshift-form.js index 9c9ec2a05..52bacf798 100644 --- a/ui/app/components/shapeshift-form.js +++ b/ui/app/components/shapeshift-form.js @@ -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('button', { - onClick: this.shift.bind(this), - }, - 'Submit'), + 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,61 +249,30 @@ 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', [ - 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', { + return h('span', { + style: { + marginTop: '15px', + marginBottom: '15px', + }, + }, [ + h('h3.flex-row.text-transform-uppercase', { style: { - width: '229px', - height: '82px', + color: '#AEAEAE', + paddingTop: '4px', + justifyContent: 'space-around', + textAlign: 'center', + fontSize: '14px', }, - }, [ - 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, - }), - ]), - ]) - } + }, `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.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', -- cgit v1.2.3 From b72c00a6c15af9692cbaf46b89a19e5cef45f7b7 Mon Sep 17 00:00:00 2001 From: Frankie Date: Fri, 12 Aug 2016 15:59:12 -0700 Subject: Add a to test faucet button --- ui/app/components/buy-button-subview.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) (limited to 'ui/app/components') diff --git a/ui/app/components/buy-button-subview.js b/ui/app/components/buy-button-subview.js index 3f13878df..19a6e251f 100644 --- a/ui/app/components/buy-button-subview.js +++ b/ui/app/components/buy-button-subview.js @@ -96,7 +96,6 @@ BuyButtonSubview.prototype.formVersionSubview = function () { return h(ShapeshiftForm, this.props) } } else { - console.log(this.props.network) return h('div.flex-column', { style: { alignItems: 'center', @@ -108,6 +107,10 @@ BuyButtonSubview.prototype.formVersionSubview = function () { width: '225px', }, }, 'In order to access this feature please switch too the Main Network'), + h('h3.text-transform-uppercase', 'or:'), + this.props.network === '2' ? h('button.text-transform-uppercase', { + onClick: () => this.props.dispatch(actions.buyEth()), + }, 'Go To Test Faucet') : null, ]) } } -- cgit v1.2.3 From 99a788a6f02ffcd53e88222ab0ba4b89d8040f4f Mon Sep 17 00:00:00 2001 From: Frankie Date: Fri, 12 Aug 2016 17:43:24 -0700 Subject: Add multi message capability to Qr view for market info --- ui/app/components/qr-code.js | 8 +++++++- ui/app/components/shapeshift-form.js | 8 ++++++-- 2 files changed, 13 insertions(+), 3 deletions(-) (limited to 'ui/app/components') diff --git a/ui/app/components/qr-code.js b/ui/app/components/qr-code.js index 765322239..1c744b234 100644 --- a/ui/app/components/qr-code.js +++ b/ui/app/components/qr-code.js @@ -29,7 +29,7 @@ QrCodeView.prototype.render = function () { alignItems: 'center', }, }, [ - h('h3', Qr.message), + Array.isArray(Qr.message) ? h('.message-container', this.renderMultiMessage()) : h('h3', Qr.message), h('#qr-container.flex-column', { key: 'qr', style: { @@ -48,3 +48,9 @@ QrCodeView.prototype.render = function () { ]), ]) } + +QrCodeView.prototype.renderMultiMessage = function () { + var Qr = this.props.Qr + var multiMessage = Qr.message.map((message) => h('.qr-message', message)) + return multiMessage +} diff --git a/ui/app/components/shapeshift-form.js b/ui/app/components/shapeshift-form.js index 52bacf798..48d220693 100644 --- a/ui/app/components/shapeshift-form.js +++ b/ui/app/components/shapeshift-form.js @@ -194,6 +194,7 @@ ShapeshiftForm.prototype.renderMain = function () { } 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 @@ -202,9 +203,12 @@ ShapeshiftForm.prototype.shift = function () { 'pair': pair, 'returnAddress': returnAddress, } - + 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)) + this.props.dispatch(actions.coinShiftRquest(data, message)) } } -- cgit v1.2.3