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

1 files changed, 21 insertions, 30 deletions

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];
 }