From 1485ec7392a03a9b3a63262e0ecf0d90f0713251 Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 29 Aug 2017 11:25:11 -0230 Subject: Move currency toggle to its own component. --- ui/app/components/gas-tooltip.js | 102 ------------------------------ ui/app/components/send/currency-toggle.js | 26 ++++++++ ui/app/components/send/gas-tooltip.js | 102 ++++++++++++++++++++++++++++++ ui/app/send.js | 18 ++---- 4 files changed, 134 insertions(+), 114 deletions(-) delete mode 100644 ui/app/components/gas-tooltip.js create mode 100644 ui/app/components/send/currency-toggle.js create mode 100644 ui/app/components/send/gas-tooltip.js diff --git a/ui/app/components/gas-tooltip.js b/ui/app/components/gas-tooltip.js deleted file mode 100644 index 68b7aea61..000000000 --- a/ui/app/components/gas-tooltip.js +++ /dev/null @@ -1,102 +0,0 @@ -const Component = require('react').Component -const h = require('react-hyperscript') -const inherits = require('util').inherits -const InputNumber = require('./input-number.js') -const findDOMNode = require('react-dom').findDOMNode - -module.exports = GasTooltip - -inherits(GasTooltip, Component) -function GasTooltip () { - Component.call(this) - this.state = { - gasLimit: 0, - gasPrice: 0, - } - - this.updateGasPrice = this.updateGasPrice.bind(this); - this.updateGasLimit = this.updateGasLimit.bind(this); - this.onClose = this.onClose.bind(this); -} - -GasTooltip.prototype.componentWillMount = function () { - const { gasPrice = 0, gasLimit = 0} = this.props - - this.setState({ - gasPrice: parseInt(gasPrice, 16) / 1000000000, - gasLimit: parseInt(gasLimit, 16), - }) -} - -GasTooltip.prototype.updateGasPrice = function (newPrice) { - const { onFeeChange } = this.props - const { gasLimit } = this.state - - this.setState({ gasPrice: newPrice }) - onFeeChange({ - gasLimit: gasLimit.toString(16), - gasPrice: (newPrice * 1000000000).toString(16) - }) -} - -GasTooltip.prototype.updateGasLimit = function (newLimit) { - const { onFeeChange } = this.props - const { gasPrice } = this.state - - this.setState({ gasLimit: newLimit }) - onFeeChange({ - gasLimit: newLimit.toString(16), - gasPrice: (gasPrice * 1000000000).toString(16) - }) -} - -GasTooltip.prototype.onClose = function (e) { - e.stopPropagation(); - this.props.onClose(); -} - -GasTooltip.prototype.render = function () { - const { position, title, children, className } = this.props - const { gasPrice, gasLimit } = this.state - - return h('div.gas-tooltip', {}, [ - h('div.gas-tooltip-close-area', { - onClick: this.onClose - }), - h('div.customize-gas-tooltip-container', {}, [ - h('div.customize-gas-tooltip', {}, [ - h('div.gas-tooltip-header.gas-tooltip-label', {}, ['Customize Gas']), - h('div.gas-tooltip-input-label', {}, [ - h('span.gas-tooltip-label', {}, ['Gas Price']), - h('i.fa.fa-info-circle') - ]), - h(InputNumber, { - unitLabel: 'GWEI', - step: 1, - min: 0, - placeholder: '0', - initValue: gasPrice, - onChange: (newPrice) => this.updateGasPrice(newPrice), - }), - h('div.gas-tooltip-input-label', { - style: { - 'marginTop': '81px', - }, - }, [ - h('span.gas-tooltip-label', {}, ['Gas Limit']), - h('i.fa.fa-info-circle') - ]), - h(InputNumber, { - unitLabel: 'UNITS', - step: 1, - min: 0, - placeholder: '0', - initValue: gasLimit, - onChange: (newLimit) => this.updateGasLimit(newLimit), - }), - ]), - h('div.gas-tooltip-arrow', {}), - ]) - ]) -} - diff --git a/ui/app/components/send/currency-toggle.js b/ui/app/components/send/currency-toggle.js new file mode 100644 index 000000000..37c026542 --- /dev/null +++ b/ui/app/components/send/currency-toggle.js @@ -0,0 +1,26 @@ +const Component = require('react').Component +const h = require('react-hyperscript') +const inherits = require('util').inherits +module.exports = CurrencyToggle + +inherits(CurrencyToggle, Component) +function CurrencyToggle () { + Component.call(this) +} + +CurrencyToggle.prototype.render = function () { + const { onClick, currentCurrency } = this.props + + return h('span', {}, [ + h('span', { + className: currentCurrency === 'ETH' ? 'selected-currency' : 'unselected-currency', + onClick: () => onClick('ETH') + }, ['ETH']), + '<>', + h('span', { + className: currentCurrency === 'USD' ? 'selected-currency' : 'unselected-currency', + onClick: () => onClick('USD'), + }, ['USD']), + ]) //holding on icon from design +} + diff --git a/ui/app/components/send/gas-tooltip.js b/ui/app/components/send/gas-tooltip.js new file mode 100644 index 000000000..472a8e287 --- /dev/null +++ b/ui/app/components/send/gas-tooltip.js @@ -0,0 +1,102 @@ +const Component = require('react').Component +const h = require('react-hyperscript') +const inherits = require('util').inherits +const InputNumber = require('../input-number.js') +const findDOMNode = require('react-dom').findDOMNode + +module.exports = GasTooltip + +inherits(GasTooltip, Component) +function GasTooltip () { + Component.call(this) + this.state = { + gasLimit: 0, + gasPrice: 0, + } + + this.updateGasPrice = this.updateGasPrice.bind(this); + this.updateGasLimit = this.updateGasLimit.bind(this); + this.onClose = this.onClose.bind(this); +} + +GasTooltip.prototype.componentWillMount = function () { + const { gasPrice = 0, gasLimit = 0} = this.props + + this.setState({ + gasPrice: parseInt(gasPrice, 16) / 1000000000, + gasLimit: parseInt(gasLimit, 16), + }) +} + +GasTooltip.prototype.updateGasPrice = function (newPrice) { + const { onFeeChange } = this.props + const { gasLimit } = this.state + + this.setState({ gasPrice: newPrice }) + onFeeChange({ + gasLimit: gasLimit.toString(16), + gasPrice: (newPrice * 1000000000).toString(16) + }) +} + +GasTooltip.prototype.updateGasLimit = function (newLimit) { + const { onFeeChange } = this.props + const { gasPrice } = this.state + + this.setState({ gasLimit: newLimit }) + onFeeChange({ + gasLimit: newLimit.toString(16), + gasPrice: (gasPrice * 1000000000).toString(16) + }) +} + +GasTooltip.prototype.onClose = function (e) { + e.stopPropagation(); + this.props.onClose(); +} + +GasTooltip.prototype.render = function () { + const { position, title, children, className } = this.props + const { gasPrice, gasLimit } = this.state + + return h('div.gas-tooltip', {}, [ + h('div.gas-tooltip-close-area', { + onClick: this.onClose + }), + h('div.customize-gas-tooltip-container', {}, [ + h('div.customize-gas-tooltip', {}, [ + h('div.gas-tooltip-header.gas-tooltip-label', {}, ['Customize Gas']), + h('div.gas-tooltip-input-label', {}, [ + h('span.gas-tooltip-label', {}, ['Gas Price']), + h('i.fa.fa-info-circle') + ]), + h(InputNumber, { + unitLabel: 'GWEI', + step: 1, + min: 0, + placeholder: '0', + initValue: gasPrice, + onChange: (newPrice) => this.updateGasPrice(newPrice), + }), + h('div.gas-tooltip-input-label', { + style: { + 'marginTop': '81px', + }, + }, [ + h('span.gas-tooltip-label', {}, ['Gas Limit']), + h('i.fa.fa-info-circle') + ]), + h(InputNumber, { + unitLabel: 'UNITS', + step: 1, + min: 0, + placeholder: '0', + initValue: gasLimit, + onChange: (newLimit) => this.updateGasLimit(newLimit), + }), + ]), + h('div.gas-tooltip-arrow', {}), + ]) + ]) +} + diff --git a/ui/app/send.js b/ui/app/send.js index b099c0251..b3a137adb 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -7,7 +7,8 @@ const hexToBn = require('../../app/scripts/lib/hex-to-bn') const EthBalance = require('./components/eth-balance') const EnsInput = require('./components/ens-input') const FiatValue = require('./components/fiat-value') -const GasTooltip = require('./components/gas-tooltip') +const GasTooltip = require('./components/send/gas-tooltip') +const CurrencyToggle = require('./components/send/currency-toggle') const { getSelectedIdentity } = require('./selectors') const { @@ -210,17 +211,10 @@ SendTransactionScreen.prototype.render = function () { h('div.send-screen-amount-labels', {}, [ h('span', {}, ['Amount']), - h('span', {}, [ - h('span', { - className: currentCurrency === 'ETH' ? 'selected-currency' : 'unselected-currency', - onClick: () => this.setCurrentCurrency('ETH') - }, ['ETH']), - '<>', - h('span', { - className: currentCurrency === 'USD' ? 'selected-currency' : 'unselected-currency', - onClick: () => this.setCurrentCurrency('USD'), - }, ['USD']), - ]), //holding on icon from design + h(CurrencyToggle, { + currentCurrency, + onClick: (newCurrency) => this.setCurrentCurrency(newCurrency) + }), //holding on icon from design ]), h('input.large-input.send-screen-input', { -- cgit