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/gas-tooltip.js b/ui/app/components/send/gas-tooltip.js similarity index 98% rename from ui/app/components/gas-tooltip.js rename to ui/app/components/send/gas-tooltip.js index 68b7aea61..472a8e287 100644 --- a/ui/app/components/gas-tooltip.js +++ b/ui/app/components/send/gas-tooltip.js @@ -1,7 +1,7 @@ const Component = require('react').Component const h = require('react-hyperscript') const inherits = require('util').inherits -const InputNumber = require('./input-number.js') +const InputNumber = require('../input-number.js') const findDOMNode = require('react-dom').findDOMNode module.exports = GasTooltip 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', {