Refactor gas-fee-display to include usd and eth fee displays as separate components.

3 files changed, 93 insertions, 30 deletions

diff --git a/ui/app/components/send/eth-fee-display.js b/ui/app/components/send/eth-fee-display.js
new file mode 100644
index 000000000..3dcb711ce
--- /dev/null
+++ b/ui/app/components/send/eth-fee-display.js
@@ -0,0 +1,37 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const EthBalance = require('../eth-balance')
+const { getTxFeeBn } = require('../../util')
+
+module.exports = EthFeeDisplay
+
+inherits(EthFeeDisplay, Component)
+function EthFeeDisplay () {
+  Component.call(this)
+}
+
+EthFeeDisplay.prototype.render = function () {
+  const {
+    currentCurrency,
+    conversionRate,
+    gas,
+    gasPrice,
+    blockGasLimit,
+  } = this.props
+
+  return h(EthBalance, {
+    value: getTxFeeBn(gas, gasPrice, blockGasLimit),
+    currentCurrency,
+    conversionRate,
+    showFiat: false,
+    hideTooltip: true,
+    styleOveride: {
+      color: '#5d5d5d',
+      fontSize: '16px',
+      fontFamily: 'DIN OT',
+      lineHeight: '22.4px'
+    }
+  })
+}
+
diff --git a/ui/app/components/send/gas-fee-display.js b/ui/app/components/send/gas-fee-display.js
index 3add95394..5336be8a3 100644
--- a/ui/app/components/send/gas-fee-display.js
+++ b/ui/app/components/send/gas-fee-display.js
@@ -1,9 +1,8 @@
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
-const EthBalance = require('../eth-balance')
-const FiatValue = require('../fiat-value')
-const { getTxFeeBn } = require('../../util')
+const USDFeeDisplay = require('./usd-fee-display')
+const EthFeeDisplay = require('./eth-fee-display')
 
 module.exports = GasFeeDisplay
 
@@ -21,33 +20,25 @@ GasFeeDisplay.prototype.render = function () {
     blockGasLimit,
   } = this.props
 
-  const renderableCurrencies = {
-    USD: h(FiatValue, {
-      value: getTxFeeBn(gas, gasPrice, blockGasLimit),
-      conversionRate,
-      currentCurrency,
-      style: {
-        color: '#5d5d5d',
-        fontSize: '16px',
-        fontFamily: 'DIN OT',
-        lineHeight: '22.4px'
-      }
-    }),
-    ETH: h(EthBalance, {
-      value: getTxFeeBn(gas, gasPrice, blockGasLimit),
-      currentCurrency,
-      conversionRate,
-      showFiat: false,
-      hideTooltip: true,
-      styleOveride: {
-        color: '#5d5d5d',
-        fontSize: '16px',
-        fontFamily: 'DIN OT',
-        lineHeight: '22.4px'
-      }
-    }),
+  switch (currentCurrency) {
+    case 'USD':
+      return h(USDFeeDisplay, {
+        currentCurrency,
+        conversionRate,
+        gas,
+        gasPrice,
+        blockGasLimit,
+      })
+    case 'ETH':
+      return h(EthFeeDisplay, {
+        currentCurrency,
+        conversionRate,
+        gas,
+        gasPrice,
+        blockGasLimit,
+      })
+    default:
+      return h('noscript');
   }
-
-  return renderableCurrencies[currentCurrency];
 }
 
diff --git a/ui/app/components/send/usd-fee-display.js b/ui/app/components/send/usd-fee-display.js
new file mode 100644
index 000000000..012bda550
--- /dev/null
+++ b/ui/app/components/send/usd-fee-display.js
@@ -0,0 +1,35 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const FiatValue = require('../fiat-value')
+const { getTxFeeBn } = require('../../util')
+
+module.exports = USDFeeDisplay
+
+inherits(USDFeeDisplay, Component)
+function USDFeeDisplay () {
+  Component.call(this)
+}
+
+USDFeeDisplay.prototype.render = function () {
+  const {
+    currentCurrency,
+    conversionRate,
+    gas,
+    gasPrice,
+    blockGasLimit,
+  } = this.props
+
+  return h(FiatValue, {
+    value: getTxFeeBn(gas, gasPrice, blockGasLimit),
+    conversionRate,
+    currentCurrency,
+    style: {
+      color: '#5d5d5d',
+      fontSize: '16px',
+      fontFamily: 'DIN OT',
+      lineHeight: '22.4px'
+    }
+  })
+}
+