Move currency toggle to its own component.

3 files changed, 33 insertions, 13 deletions

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
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', {