Move gas fee to a separate component.

2 files changed, 59 insertions, 26 deletions

diff --git a/ui/app/components/send/gas-fee-display.js b/ui/app/components/send/gas-fee-display.js
new file mode 100644
index 000000000..3add95394
--- /dev/null
+++ b/ui/app/components/send/gas-fee-display.js
@@ -0,0 +1,53 @@
+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')
+
+module.exports = GasFeeDisplay
+
+inherits(GasFeeDisplay, Component)
+function GasFeeDisplay () {
+  Component.call(this)
+}
+
+GasFeeDisplay.prototype.render = function () {
+  const {
+    currentCurrency,
+    conversionRate,
+    gas,
+    gasPrice,
+    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'
+      }
+    }),
+  }
+
+  return renderableCurrencies[currentCurrency];
+}
+
diff --git a/ui/app/send.js b/ui/app/send.js
index b3a137adb..3f6cd72c9 100644
--- a/ui/app/send.js
+++ b/ui/app/send.js
@@ -4,11 +4,10 @@ const h = require('react-hyperscript')
 const connect = require('react-redux').connect
 const Identicon = require('./components/identicon')
 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/send/gas-tooltip')
 const CurrencyToggle = require('./components/send/currency-toggle')
+const GasFeeDisplay = require('./components/send/gas-fee-display')
 const { getSelectedIdentity } = require('./selectors')
 
 const {
@@ -24,7 +23,6 @@ const { stripHexPrefix, addHexPrefix, BN } = require('ethereumjs-util')
 const {
   addressSummary,
   bnMultiplyByFraction,
-  getTxFeeBn,
   isHex,
   numericBalance,
 } = require('./util')
@@ -269,30 +267,12 @@ SendTransactionScreen.prototype.render = function () {
 
           // TODO: handle loading time when switching to USD
           h('div.large-input.send-screen-gas-input', {}, [
-            currentCurrency === 'USD'
-            ? h(FiatValue, {
-              value: getTxFeeBn(gas, gasPrice, blockGasLimit),
-              conversionRate,
+            h(GasFeeDisplay, {
               currentCurrency,
-              style: {
-                color: '#5d5d5d',
-                fontSize: '16px',
-                fontFamily: 'DIN OT',
-                lineHeight: '22.4px'
-              }
-            })
-            : h(EthBalance, {
-                value: getTxFeeBn(gas, gasPrice, blockGasLimit),
-                currentCurrency,
-                conversionRate,
-                showFiat: false,
-                hideTooltip: true,
-                styleOveride: {
-                  color: '#5d5d5d',
-                  fontSize: '16px',
-                  fontFamily: 'DIN OT',
-                  lineHeight: '22.4px'
-                }
+              conversionRate,
+              gas,
+              gasPrice,
+              blockGasLimit,
             }),
             h('div.send-screen-gas-input-customize', {
               onClick: this.toggleTooltip,