From 83811910c84342094be4ac94dca829e8f5ff630f Mon Sep 17 00:00:00 2001 From: frankiebee Date: Tue, 18 Apr 2017 18:20:31 +0200 Subject: [PATCH 01/11] Create a custom radio list component --- ui/app/components/custom-radio-list.js | 61 ++++++++++++++++++++++++++ 1 file changed, 61 insertions(+) create mode 100644 ui/app/components/custom-radio-list.js diff --git a/ui/app/components/custom-radio-list.js b/ui/app/components/custom-radio-list.js new file mode 100644 index 000000000..201ec11dc --- /dev/null +++ b/ui/app/components/custom-radio-list.js @@ -0,0 +1,61 @@ +const Component = require('react').Component +const h = require('react-hyperscript') +const inherits = require('util').inherits + +module.exports = RadioList + +inherits(RadioList, Component) +function RadioList () { + Component.call(this) +} + +RadioList.prototype.render = function () { + const props = this.props + let activeClass = '.custom-radio-selected' + let inactiveClass = '.custom-radio-inactive' + let { + lables, + defaultFocus, + onClick, + } = props + + + return ( + h('.flex-row', { + style: { + fontSize: '12px', + } + }, [ + h('.flex-column.custom-radios', { + style: { + marginRight: '5px', + } + }, + lables.map((lable, i) => { + let isSelcted = (this.state !== null ) + isSelcted = isSelcted ? (this.state.selected === lable) : (this.props.defaultFocus === lable) + return h(isSelcted ? activeClass : inactiveClass, { + title: lable, + onClick: (event) => { + this.setState({selected: event.target.title}) + props.onClick(event) + } + }) + }), + ), + h('.text', {}, + lables.map((lable) => { + if (props.subtext) { + return h('.flex-row', {}, [ + h('.radio-titles', lable), + h('.radio-titles-subtext', `- ${props.subtext[lable]}`) + ]) + } else { + return h('.radio-titles', lable) + } + }) + ) + ]) + ) +} + From ce03b7db51570295c7868382cf997dbb1bc5725a Mon Sep 17 00:00:00 2001 From: frankiebee Date: Tue, 18 Apr 2017 18:21:24 +0200 Subject: [PATCH 02/11] Initial redo attempt of the buy view to look like vladt's desighn --- ui/app/components/buy-button-subview.js | 139 +++++++++++++++--------- ui/app/components/coinbase-form.js | 101 +---------------- ui/app/components/custom-radio-list.js | 49 ++++----- ui/app/components/shapeshift-form.js | 24 ++-- ui/app/css/index.css | 41 +++++++ ui/app/reducers/app.js | 14 ++- 6 files changed, 173 insertions(+), 195 deletions(-) diff --git a/ui/app/components/buy-button-subview.js b/ui/app/components/buy-button-subview.js index 6810303e1..8d3e9aa21 100644 --- a/ui/app/components/buy-button-subview.js +++ b/ui/app/components/buy-button-subview.js @@ -6,12 +6,15 @@ const actions = require('../actions') const CoinbaseForm = require('./coinbase-form') const ShapeshiftForm = require('./shapeshift-form') const Loading = require('./loading') -const TabBar = require('./tab-bar') +const AccountPanel = require('./account-panel') +const RadioList = require('./custom-radio-list') module.exports = connect(mapStateToProps)(BuyButtonSubview) function mapStateToProps (state) { return { + identity: state.appState.identity, + account: state.metamask.accounts[state.appState.buyView.buyAddress], warning: state.appState.warning, buyView: state.appState.buyView, network: state.metamask.network, @@ -31,7 +34,11 @@ BuyButtonSubview.prototype.render = function () { const isLoading = props.isSubLoading return ( - h('.buy-eth-section', [ + h('.buy-eth-section.flex-column', { + style: { + alignItems: 'center', + }, + }, [ // back button h('.flex-row', { style: { @@ -46,58 +53,79 @@ BuyButtonSubview.prototype.render = function () { left: '10px', }, }), - h('h2.page-subtitle', 'Buy Eth'), - ]), - - h(Loading, { isLoading }), - - h(TabBar, { - tabs: [ - { - content: [ - 'Coinbase', - h('a', { - onClick: (event) => this.navigateTo('https://github.com/MetaMask/faq/blob/master/COINBASE.md'), - }, [ - h('i.fa.fa-question-circle', { - style: { - margin: '0px 5px', - }, - }), - ]), - ], - key: 'coinbase', + h('h2.text-transform-uppercase.flex-center', { + style: { + width: '100vw', + background: 'rgb(235, 235, 235)', + color: 'rgb(174, 174, 174)', + paddingTop: '4px', + paddingBottom: '4px', }, - { - content: [ - '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: { - margin: '0px 5px', - }, - }), - ]), - ], - key: 'shapeshift', + }, 'Buy Eth'), + ]), + h('div', { + style: { + position: 'absolute', + top: '57vh', + left: '49vw', + }, + }, [ + h(Loading, {isLoading}), + ]), + h('div', { + style: { + width: '80%', + }, + }, [ + h(AccountPanel, { + showFullAddress: true, + identity: props.identity, + account: props.account, + }), + ]), + h('h3.text-transform-uppercase', { + style: { + paddingLeft: '15px', + fontFamily: 'Montserrat Light', + width: '100vw', + background: 'rgb(235, 235, 235)', + color: 'rgb(174, 174, 174)', + paddingTop: '4px', + paddingBottom: '4px', + }, + }, 'Select Service'), + h('.flex-row.selected-exchange', { + style: { + position: 'relative', + right: '35px', + marginTop: '20px', + marginBottom: '20px', + }, + }, [ + h(RadioList, { + defaultFocus: props.buyView.subview, + lables: [ + 'Coinbase', + 'ShapeShift', + ], + subtext: { + 'Coinbase': 'Crypto/FIAT (USA only)', + 'ShapeShift': 'Crypto', }, - ], - defaultTab: 'coinbase', - tabSelected: (key) => { - switch (key) { - case 'coinbase': - props.dispatch(actions.coinBaseSubview()) - break - case 'shapeshift': - props.dispatch(actions.shapeShiftSubview(props.provider.type)) - break - } + onClick: this.radioHandler.bind(this), + }), + ]), + h('h3.text-transform-uppercase', { + style: { + paddingLeft: '15px', + fontFamily: 'Montserrat Light', + width: '100vw', + background: 'rgb(235, 235, 235)', + color: 'rgb(174, 174, 174)', + paddingTop: '4px', + paddingBottom: '4px', }, - }), - + }, props.buyView.subview), this.formVersionSubview(), ]) ) @@ -152,3 +180,12 @@ BuyButtonSubview.prototype.backButtonContext = function () { this.props.dispatch(actions.goHome()) } } + +BuyButtonSubview.prototype.radioHandler = function (event) { + switch (event.target.title) { + case 'Coinbase': + return this.props.dispatch(actions.coinBaseSubview()) + case 'ShapeShift': + return this.props.dispatch(actions.shapeShiftSubview(this.props.provider.type)) + } +} diff --git a/ui/app/components/coinbase-form.js b/ui/app/components/coinbase-form.js index fd5816a21..b92799375 100644 --- a/ui/app/components/coinbase-form.js +++ b/ui/app/components/coinbase-form.js @@ -4,7 +4,6 @@ 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) { @@ -21,72 +20,19 @@ function CoinbaseForm () { CoinbaseForm.prototype.render = function () { var props = this.props - var amount = props.buyView.amount - var address = props.buyView.buyAddress return h('.flex-column', { style: { // margin: '10px', padding: '25px', + width: '100%', }, }, [ - h('.flex-column', { - style: { - alignItems: 'flex-start', - }, - }, [ - h('.flex-row', [ - h('div', 'Address:'), - h('.ellip-address', address), - ]), - 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$ 15 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', + marginTop: '0px', }, }, [ h('button', { @@ -106,20 +52,9 @@ CoinbaseForm.prototype.handleAddress = function (event) { this.props.dispatch(actions.updateBuyAddress(event.target.value)) } CoinbaseForm.prototype.toCoinbase = function () { - var props = this.props - var amount = props.buyView.amount - var address = props.buyView.buyAddress - var message - - if (isValidAddress(address) && isValidAmountforCoinBase(amount).valid) { - props.dispatch(actions.buyEth({ network: '1', address, amount: props.buyView.amount })) - } else if (!isValidAmountforCoinBase(amount).valid) { - message = isValidAmountforCoinBase(amount).message - return props.dispatch(actions.displayWarning(message)) - } else { - message = 'Receiving address is invalid.' - return props.dispatch(actions.displayWarning(message)) - } + const props = this.props + const address = props.buyView.buyAddress + props.dispatch(actions.buyEth({ network: '1', address, amount: 0 })) } CoinbaseForm.prototype.renderLoading = function () { @@ -131,29 +66,3 @@ CoinbaseForm.prototype.renderLoading = function () { src: 'images/loading.svg', }) } - -function isValidAmountforCoinBase (amount) { - amount = parseFloat(amount) - if (amount) { - if (amount <= 15 && amount > 0) { - return { - valid: true, - } - } else if (amount > 15) { - return { - valid: false, - message: 'The amount can not be greater then $15', - } - } 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/custom-radio-list.js b/ui/app/components/custom-radio-list.js index 201ec11dc..a19287630 100644 --- a/ui/app/components/custom-radio-list.js +++ b/ui/app/components/custom-radio-list.js @@ -11,12 +11,11 @@ function RadioList () { RadioList.prototype.render = function () { const props = this.props - let activeClass = '.custom-radio-selected' - let inactiveClass = '.custom-radio-inactive' - let { + const activeClass = '.custom-radio-selected' + const inactiveClass = '.custom-radio-inactive' + const { lables, defaultFocus, - onClick, } = props @@ -24,37 +23,37 @@ RadioList.prototype.render = function () { h('.flex-row', { style: { fontSize: '12px', - } + }, }, [ - h('.flex-column.custom-radios', { - style: { - marginRight: '5px', - } + h('.flex-column.custom-radios', { + style: { + marginRight: '5px', }, - lables.map((lable, i) => { - let isSelcted = (this.state !== null ) - isSelcted = isSelcted ? (this.state.selected === lable) : (this.props.defaultFocus === lable) - return h(isSelcted ? activeClass : inactiveClass, { - title: lable, - onClick: (event) => { - this.setState({selected: event.target.title}) - props.onClick(event) - } - }) - }), - ), - h('.text', {}, - lables.map((lable) => { + }, + lables.map((lable, i) => { + let isSelcted = (this.state !== null) + isSelcted = isSelcted ? (this.state.selected === lable) : (defaultFocus === lable) + return h(isSelcted ? activeClass : inactiveClass, { + title: lable, + onClick: (event) => { + this.setState({selected: event.target.title}) + props.onClick(event) + }, + }) + }) + ), + h('.text', {}, + lables.map((lable) => { if (props.subtext) { return h('.flex-row', {}, [ h('.radio-titles', lable), - h('.radio-titles-subtext', `- ${props.subtext[lable]}`) + h('.radio-titles-subtext', `- ${props.subtext[lable]}`), ]) } else { return h('.radio-titles', lable) } }) - ) + ), ]) ) } diff --git a/ui/app/components/shapeshift-form.js b/ui/app/components/shapeshift-form.js index 8c9686035..2745b1b11 100644 --- a/ui/app/components/shapeshift-form.js +++ b/ui/app/components/shapeshift-form.js @@ -43,14 +43,18 @@ ShapeshiftForm.prototype.renderMain = function () { style: { // marginTop: '10px', padding: '25px', + paddingTop: '5px', width: '100%', + minHeight: '215px', alignItems: 'center', + overflowY: 'auto', }, }, [ h('.flex-row', { style: { justifyContent: 'center', alignItems: 'baseline', + height: '42px', }, }, [ h('img', { @@ -82,7 +86,6 @@ ShapeshiftForm.prototype.renderMain = function () { style: { fontSize: '12px', color: '#F7861C', - position: 'relative', bottom: '48px', left: '106px', }, @@ -92,7 +95,6 @@ ShapeshiftForm.prototype.renderMain = function () { h('.icon-control', [ h('i.fa.fa-refresh.fa-4.orange', { style: { - position: 'relative', bottom: '5px', left: '5px', color: '#F7861C', @@ -121,8 +123,6 @@ ShapeshiftForm.prototype.renderMain = function () { }, }), ]), - - this.props.isSubLoading ? this.renderLoading() : null, h('.flex-column', { style: { alignItems: 'flex-start', @@ -138,17 +138,6 @@ ShapeshiftForm.prototype.renderMain = function () { this.props.warning) : this.renderInfo(), ]), - h('.flex-row', { - style: { - padding: '10px', - paddingBottom: '2px', - width: '100%', - }, - }, [ - h('div', 'Receiving address:'), - h('.ellip-address', this.props.buyView.buyAddress), - ]), - h(this.activeToggle('.input-container'), { style: { padding: '10px', @@ -156,6 +145,7 @@ ShapeshiftForm.prototype.renderMain = function () { width: '100%', }, }, [ + h('div', `${coin} Address:`), h('input#fromCoinAddress.buy-inputs', { @@ -190,6 +180,8 @@ ShapeshiftForm.prototype.renderMain = function () { onClick: this.shift.bind(this), style: { marginTop: '10px', + position: 'relative', + bottom: '33px', }, }, 'Submit'), @@ -266,8 +258,6 @@ ShapeshiftForm.prototype.renderInfo = function () { return h('span', { style: { - marginTop: '10px', - marginBottom: '15px', }, }, [ h('h3.flex-row.text-transform-uppercase', { diff --git a/ui/app/css/index.css b/ui/app/css/index.css index 033502f5a..808aafb4c 100644 --- a/ui/app/css/index.css +++ b/ui/app/css/index.css @@ -489,6 +489,47 @@ input.large-input { } /* buy eth warning screen */ +.custom-radios { + justify-content: space-around; + align-items: center; +} + + +.custom-radio-selected { + width: 17px; + height: 17px; + border: solid; + border-style: double; + border-radius: 15px; + border-width: 5px; + background: rgba(247, 134, 28, 1); + border-color: #F7F7F7; +} + +.custom-radio-inactive { + width: 14px; + height: 14px; + border: solid; + border-width: 1px; + border-radius: 24px; + border-color: #AEAEAE; +} + +.radio-titles { + color: rgba(247, 134, 28, 1); +} + +.radio-titles-subtext { + +} + +.selected-exchange { + +} + +.buy-radio { + +} .eth-warning{ transition: opacity 400ms ease-in, transform 400ms ease-in; diff --git a/ui/app/reducers/app.js b/ui/app/reducers/app.js index 7ad1229e5..6b040e988 100644 --- a/ui/app/reducers/app.js +++ b/ui/app/reducers/app.js @@ -469,8 +469,10 @@ function reduceApp (state, action) { name: 'buyEth', context: appState.currentView.name, }, + identity: state.metamask.identities[action.value], + buyAddress: action.value, buyView: { - subview: 'buyForm', + subview: 'Coinbase', amount: '15.00', buyAddress: action.value, formView: { @@ -483,7 +485,7 @@ function reduceApp (state, action) { case actions.UPDATE_BUY_ADDRESS: return extend(appState, { buyView: { - subview: 'buyForm', + subview: appState.subview, formView: { coinbase: appState.buyView.formView.coinbase, shapeshift: appState.buyView.formView.shapeshift, @@ -496,7 +498,7 @@ function reduceApp (state, action) { case actions.UPDATE_COINBASE_AMOUNT: return extend(appState, { buyView: { - subview: 'buyForm', + subview: 'Coinbase', formView: { coinbase: true, shapeshift: false, @@ -509,7 +511,7 @@ function reduceApp (state, action) { case actions.COINBASE_SUBVIEW: return extend(appState, { buyView: { - subview: 'buyForm', + subview: 'Coinbase', formView: { coinbase: true, shapeshift: false, @@ -522,7 +524,7 @@ function reduceApp (state, action) { case actions.SHAPESHIFT_SUBVIEW: return extend(appState, { buyView: { - subview: 'buyForm', + subview: 'ShapeShift', formView: { coinbase: false, shapeshift: true, @@ -537,7 +539,7 @@ function reduceApp (state, action) { case actions.PAIR_UPDATE: return extend(appState, { buyView: { - subview: 'buyForm', + subview: 'ShapeShift', formView: { coinbase: false, shapeshift: true, From e543050868b58ea1a1b0cad363d763eab2ade25d Mon Sep 17 00:00:00 2001 From: Jared Pereira Date: Sun, 23 Apr 2017 15:27:17 +0400 Subject: [PATCH 03/11] remove extra buyAddress in state --- ui/app/reducers/app.js | 1 - 1 file changed, 1 deletion(-) diff --git a/ui/app/reducers/app.js b/ui/app/reducers/app.js index 6b040e988..036286a8b 100644 --- a/ui/app/reducers/app.js +++ b/ui/app/reducers/app.js @@ -470,7 +470,6 @@ function reduceApp (state, action) { context: appState.currentView.name, }, identity: state.metamask.identities[action.value], - buyAddress: action.value, buyView: { subview: 'Coinbase', amount: '15.00', From 7a8496f9da894bf8821e91746b33f53fe23cf150 Mon Sep 17 00:00:00 2001 From: Jared Pereira Date: Sun, 23 Apr 2017 15:28:45 +0400 Subject: [PATCH 04/11] remove buyButtonDeligator function --- ui/app/account-detail.js | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/ui/app/account-detail.js b/ui/app/account-detail.js index 018e74893..d4b371947 100644 --- a/ui/app/account-detail.js +++ b/ui/app/account-detail.js @@ -262,15 +262,3 @@ AccountDetailScreen.prototype.transactionList = function () { AccountDetailScreen.prototype.requestAccountExport = function () { this.props.dispatch(actions.requestExportAccount()) } - - -AccountDetailScreen.prototype.buyButtonDeligator = function () { - var props = this.props - var selected = props.address || Object.keys(props.accounts)[0] - - if (this.props.accountDetail.subview === 'buyForm') { - props.dispatch(actions.backToAccountDetail(props.address)) - } else { - props.dispatch(actions.buyEthView(selected)) - } -} From c1df7dedd9065c8fe600642638e0e0a5d71e6f6e Mon Sep 17 00:00:00 2001 From: Jared Pereira Date: Sun, 23 Apr 2017 15:36:48 +0400 Subject: [PATCH 05/11] remove case buyForm --- ui/app/account-detail.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/ui/app/account-detail.js b/ui/app/account-detail.js index d4b371947..d592a5ad6 100644 --- a/ui/app/account-detail.js +++ b/ui/app/account-detail.js @@ -16,7 +16,6 @@ const ExportAccountView = require('./components/account-export') const ethUtil = require('ethereumjs-util') const EditableLabel = require('./components/editable-label') const Tooltip = require('./components/tooltip') -const BuyButtonSubview = require('./components/buy-button-subview') module.exports = connect(mapStateToProps)(AccountDetailScreen) function mapStateToProps (state) { @@ -238,8 +237,6 @@ AccountDetailScreen.prototype.subview = function () { case 'export': var state = extend({key: 'export'}, this.props) return h(ExportAccountView, state) - case 'buyForm': - return h(BuyButtonSubview, extend({key: 'buyForm'}, this.props)) default: return this.transactionList() } From 5cabd3e02d0eeef8bd7c65db193b0bdb8cc9cc04 Mon Sep 17 00:00:00 2001 From: Jared Pereira Date: Sun, 23 Apr 2017 21:18:14 +0400 Subject: [PATCH 06/11] remove updateBuyAddress action --- ui/app/actions.js | 9 --------- ui/app/components/coinbase-form.js | 4 +--- ui/app/components/shapeshift-form.js | 4 ---- ui/app/reducers/app.js | 13 ------------- 4 files changed, 1 insertion(+), 29 deletions(-) diff --git a/ui/app/actions.js b/ui/app/actions.js index 8934299e7..f08a93ff4 100644 --- a/ui/app/actions.js +++ b/ui/app/actions.js @@ -136,8 +136,6 @@ var actions = { BUY_ETH_VIEW: 'BUY_ETH_VIEW', UPDATE_COINBASE_AMOUNT: 'UPDATE_COIBASE_AMOUNT', updateCoinBaseAmount: updateCoinBaseAmount, - UPDATE_BUY_ADDRESS: 'UPDATE_BUY_ADDRESS', - updateBuyAddress: updateBuyAddress, COINBASE_SUBVIEW: 'COINBASE_SUBVIEW', coinBaseSubview: coinBaseSubview, SHAPESHIFT_SUBVIEW: 'SHAPESHIFT_SUBVIEW', @@ -859,13 +857,6 @@ function updateCoinBaseAmount (value) { } } -function updateBuyAddress (value) { - return { - type: actions.UPDATE_BUY_ADDRESS, - value, - } -} - function coinBaseSubview () { return { type: actions.COINBASE_SUBVIEW, diff --git a/ui/app/components/coinbase-form.js b/ui/app/components/coinbase-form.js index b92799375..82d1458bf 100644 --- a/ui/app/components/coinbase-form.js +++ b/ui/app/components/coinbase-form.js @@ -48,9 +48,7 @@ CoinbaseForm.prototype.render = function () { 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 () { const props = this.props const address = props.buyView.buyAddress diff --git a/ui/app/components/shapeshift-form.js b/ui/app/components/shapeshift-form.js index 2745b1b11..f0a067c05 100644 --- a/ui/app/components/shapeshift-form.js +++ b/ui/app/components/shapeshift-form.js @@ -276,10 +276,6 @@ ShapeshiftForm.prototype.renderInfo = function () { ]) } -ShapeshiftForm.prototype.handleAddress = function (event) { - this.props.dispatch(actions.updateBuyAddress(event.target.value)) -} - ShapeshiftForm.prototype.activeToggle = function (elementType) { if (!this.props.buyView.formView.response || this.props.warning) return elementType return `${elementType}.inactive` diff --git a/ui/app/reducers/app.js b/ui/app/reducers/app.js index 036286a8b..016ddb569 100644 --- a/ui/app/reducers/app.js +++ b/ui/app/reducers/app.js @@ -481,19 +481,6 @@ function reduceApp (state, action) { }, }) - case actions.UPDATE_BUY_ADDRESS: - return extend(appState, { - buyView: { - subview: appState.subview, - formView: { - coinbase: appState.buyView.formView.coinbase, - shapeshift: appState.buyView.formView.shapeshift, - }, - buyAddress: action.value, - amount: appState.buyView.amount, - }, - }) - case actions.UPDATE_COINBASE_AMOUNT: return extend(appState, { buyView: { From 7f12be6a014286d727766174bff9391b2cc55ae9 Mon Sep 17 00:00:00 2001 From: Jared Pereira Date: Mon, 24 Apr 2017 12:18:54 +0400 Subject: [PATCH 07/11] remove updateCoinBaseAmount action --- ui/app/actions.js | 9 --------- ui/app/components/coinbase-form.js | 3 --- ui/app/reducers/app.js | 13 ------------- 3 files changed, 25 deletions(-) diff --git a/ui/app/actions.js b/ui/app/actions.js index f08a93ff4..18f341411 100644 --- a/ui/app/actions.js +++ b/ui/app/actions.js @@ -134,8 +134,6 @@ var actions = { buyEth: buyEth, buyEthView: buyEthView, BUY_ETH_VIEW: 'BUY_ETH_VIEW', - UPDATE_COINBASE_AMOUNT: 'UPDATE_COIBASE_AMOUNT', - updateCoinBaseAmount: updateCoinBaseAmount, COINBASE_SUBVIEW: 'COINBASE_SUBVIEW', coinBaseSubview: coinBaseSubview, SHAPESHIFT_SUBVIEW: 'SHAPESHIFT_SUBVIEW', @@ -850,13 +848,6 @@ function buyEthView (address) { } } -function updateCoinBaseAmount (value) { - return { - type: actions.UPDATE_COINBASE_AMOUNT, - value, - } -} - function coinBaseSubview () { return { type: actions.COINBASE_SUBVIEW, diff --git a/ui/app/components/coinbase-form.js b/ui/app/components/coinbase-form.js index 82d1458bf..7ba8ca79e 100644 --- a/ui/app/components/coinbase-form.js +++ b/ui/app/components/coinbase-form.js @@ -45,9 +45,6 @@ CoinbaseForm.prototype.render = function () { ]), ]) } -CoinbaseForm.prototype.handleAmount = function (event) { - this.props.dispatch(actions.updateCoinBaseAmount(event.target.value)) -} CoinbaseForm.prototype.toCoinbase = function () { const props = this.props diff --git a/ui/app/reducers/app.js b/ui/app/reducers/app.js index 016ddb569..324a4df35 100644 --- a/ui/app/reducers/app.js +++ b/ui/app/reducers/app.js @@ -481,19 +481,6 @@ function reduceApp (state, action) { }, }) - case actions.UPDATE_COINBASE_AMOUNT: - return extend(appState, { - buyView: { - subview: 'Coinbase', - formView: { - coinbase: true, - shapeshift: false, - }, - buyAddress: appState.buyView.buyAddress, - amount: action.value, - }, - }) - case actions.COINBASE_SUBVIEW: return extend(appState, { buyView: { From 1eda55c85a958eef7814fadd29b257c5fbf884e0 Mon Sep 17 00:00:00 2001 From: frankiebee Date: Mon, 24 Apr 2017 12:35:45 +0200 Subject: [PATCH 08/11] Fix issue where stopPropagation didnt stop submitting the tx when clicking buy button --- ui/app/conf-tx.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/app/conf-tx.js b/ui/app/conf-tx.js index 3b8618992..770f79b19 100644 --- a/ui/app/conf-tx.js +++ b/ui/app/conf-tx.js @@ -141,7 +141,7 @@ function currentTxView (opts) { } ConfirmTxScreen.prototype.buyEth = function (address, event) { - this.stopPropagation(event) + event.preventDefault() this.props.dispatch(actions.buyEthView(address)) } From 9ebc5ed33cd3450262c00ccdde9f617544dfa784 Mon Sep 17 00:00:00 2001 From: frankiebee Date: Mon, 24 Apr 2017 12:36:17 +0200 Subject: [PATCH 09/11] make buy button green --- ui/app/components/pending-tx.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js index 1b83f5043..4b28ae099 100644 --- a/ui/app/components/pending-tx.js +++ b/ui/app/components/pending-tx.js @@ -289,7 +289,7 @@ PendingTx.prototype.render = function () { insufficientBalance ? - h('button', { + h('button.btn-green', { onClick: props.buyEth, }, 'Buy Ether') : null, From df9e40be636738336d6fa3c775bbcc99a9a0e210 Mon Sep 17 00:00:00 2001 From: frankiebee Date: Mon, 24 Apr 2017 12:58:01 +0200 Subject: [PATCH 10/11] Css fixes --- ui/app/components/coinbase-form.js | 6 +++--- ui/app/components/shapeshift-form.js | 10 ++++++---- 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/ui/app/components/coinbase-form.js b/ui/app/components/coinbase-form.js index 7ba8ca79e..f44d86045 100644 --- a/ui/app/components/coinbase-form.js +++ b/ui/app/components/coinbase-form.js @@ -23,7 +23,7 @@ CoinbaseForm.prototype.render = function () { return h('.flex-column', { style: { - // margin: '10px', + marginTop: '35px', padding: '25px', width: '100%', }, @@ -35,11 +35,11 @@ CoinbaseForm.prototype.render = function () { marginTop: '0px', }, }, [ - h('button', { + h('button.btn-green', { onClick: this.toCoinbase.bind(this), }, 'Continue to Coinbase'), - h('button', { + h('button.btn-red', { onClick: () => props.dispatch(actions.backTobuyView(props.accounts.address)), }, 'Cancel'), ]), diff --git a/ui/app/components/shapeshift-form.js b/ui/app/components/shapeshift-form.js index f0a067c05..e0a720426 100644 --- a/ui/app/components/shapeshift-form.js +++ b/ui/app/components/shapeshift-form.js @@ -70,6 +70,7 @@ ShapeshiftForm.prototype.renderMain = function () { h('input#fromCoin.buy-inputs.ex-coins', { type: 'text', list: 'coinList', + autoFocus: true, dataset: { persistentFormId: 'input-coin', }, @@ -86,6 +87,7 @@ ShapeshiftForm.prototype.renderMain = function () { style: { fontSize: '12px', color: '#F7861C', + position: 'relative', bottom: '48px', left: '106px', }, @@ -156,8 +158,8 @@ ShapeshiftForm.prototype.renderMain = function () { }, style: { boxSizing: 'border-box', - width: '278px', - height: '20px', + width: '227px', + height: '30px', padding: ' 5px ', }, }), @@ -167,7 +169,7 @@ ShapeshiftForm.prototype.renderMain = function () { fontSize: '12px', color: '#F7861C', position: 'relative', - bottom: '5px', + bottom: '10px', right: '11px', }, }), @@ -181,7 +183,7 @@ ShapeshiftForm.prototype.renderMain = function () { style: { marginTop: '10px', position: 'relative', - bottom: '33px', + bottom: '40px', }, }, 'Submit'), From 79f88398acd116980fe91d4c56a1ec6a15672745 Mon Sep 17 00:00:00 2001 From: frankiebee Date: Mon, 24 Apr 2017 20:56:31 +0200 Subject: [PATCH 11/11] fix spelling --- ui/app/components/buy-button-subview.js | 2 +- ui/app/components/custom-radio-list.js | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/ui/app/components/buy-button-subview.js b/ui/app/components/buy-button-subview.js index 8d3e9aa21..191f46319 100644 --- a/ui/app/components/buy-button-subview.js +++ b/ui/app/components/buy-button-subview.js @@ -104,7 +104,7 @@ BuyButtonSubview.prototype.render = function () { }, [ h(RadioList, { defaultFocus: props.buyView.subview, - lables: [ + labels: [ 'Coinbase', 'ShapeShift', ], diff --git a/ui/app/components/custom-radio-list.js b/ui/app/components/custom-radio-list.js index a19287630..a4c525396 100644 --- a/ui/app/components/custom-radio-list.js +++ b/ui/app/components/custom-radio-list.js @@ -14,7 +14,7 @@ RadioList.prototype.render = function () { const activeClass = '.custom-radio-selected' const inactiveClass = '.custom-radio-inactive' const { - lables, + labels, defaultFocus, } = props @@ -30,7 +30,7 @@ RadioList.prototype.render = function () { marginRight: '5px', }, }, - lables.map((lable, i) => { + labels.map((lable, i) => { let isSelcted = (this.state !== null) isSelcted = isSelcted ? (this.state.selected === lable) : (defaultFocus === lable) return h(isSelcted ? activeClass : inactiveClass, { @@ -43,7 +43,7 @@ RadioList.prototype.render = function () { }) ), h('.text', {}, - lables.map((lable) => { + labels.map((lable) => { if (props.subtext) { return h('.flex-row', {}, [ h('.radio-titles', lable),