Remove redux dependency from eth-balance and its dependent tree

For better unit testability of the conf-tx view.

6 files changed, 24 insertions, 22 deletions

diff --git a/ui/app/components/eth-balance.js b/ui/app/components/eth-balance.js
index 57ca84564..21906aa09 100644
--- a/ui/app/components/eth-balance.js
+++ b/ui/app/components/eth-balance.js
@@ -16,20 +16,19 @@ function EthBalanceComponent () {
 EthBalanceComponent.prototype.render = function () {
   var props = this.props
   let { value } = props
-  var style = props.style
+  const { style, width } = props
   var needsParse = this.props.needsParse !== undefined ? this.props.needsParse : true
   value = value ? formatBalance(value, 6, needsParse) : '...'
-  var width = props.width
 
   return (
 
     h('.ether-balance.ether-balance-amount', {
-      style: style,
+      style,
     }, [
       h('div', {
         style: {
           display: 'inline',
-          width: width,
+          width,
         },
       }, this.renderBalance(value)),
     ])
@@ -38,16 +37,17 @@ EthBalanceComponent.prototype.render = function () {
 }
 EthBalanceComponent.prototype.renderBalance = function (value) {
   var props = this.props
+  const { conversionRate, shorten, incoming } = props
   if (value === 'None') return value
   if (value === '...') return value
-  var balanceObj = generateBalanceObject(value, props.shorten ? 1 : 3)
+  var balanceObj = generateBalanceObject(value, shorten ? 1 : 3)
   var balance
   var splitBalance = value.split(' ')
   var ethNumber = splitBalance[0]
   var ethSuffix = splitBalance[1]
   const showFiat = 'showFiat' in props ? props.showFiat : true
 
-  if (props.shorten) {
+  if (shorten) {
     balance = balanceObj.shortBalance
   } else {
     balance = balanceObj.balance
@@ -73,7 +73,7 @@ EthBalanceComponent.prototype.renderBalance = function (value) {
             width: '100%',
             textAlign: 'right',
           },
-        }, this.props.incoming ? `+${balance}` : balance),
+        }, incoming ? `+${balance}` : balance),
         h('div', {
           style: {
             color: ' #AEAEAE',
@@ -83,7 +83,7 @@ EthBalanceComponent.prototype.renderBalance = function (value) {
         }, label),
       ]),
 
-      showFiat ? h(FiatValue, { value: props.value }) : null,
+      showFiat ? h(FiatValue, { value, conversionRate }) : null,
     ]))
   )
 }
diff --git a/ui/app/components/fiat-value.js b/ui/app/components/fiat-value.js
index 298809b30..6e306c9e6 100644
--- a/ui/app/components/fiat-value.js
+++ b/ui/app/components/fiat-value.js
@@ -1,17 +1,9 @@
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
-const connect = require('react-redux').connect
 const formatBalance = require('../util').formatBalance
 
-module.exports = connect(mapStateToProps)(FiatValue)
-
-function mapStateToProps (state) {
-  return {
-    conversionRate: state.metamask.conversionRate,
-    currentCurrency: state.metamask.currentCurrency,
-  }
-}
+module.exports = FiatValue
 
 inherits(FiatValue, Component)
 function FiatValue () {
@@ -20,14 +12,16 @@ function FiatValue () {
 
 FiatValue.prototype.render = function () {
   const props = this.props
+  const { conversionRate } = props
+
   const value = formatBalance(props.value, 6)
 
   if (value === 'None') return value
   var fiatDisplayNumber, fiatTooltipNumber
   var splitBalance = value.split(' ')
 
-  if (props.conversionRate !== 0) {
-    fiatTooltipNumber = Number(splitBalance[0]) * props.conversionRate
+  if (conversionRate !== 0) {
+    fiatTooltipNumber = Number(splitBalance[0]) * conversionRate
     fiatDisplayNumber = fiatTooltipNumber.toFixed(2)
   } else {
     fiatDisplayNumber = 'N/A'
diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js
index 6b8f16dae..fb555b821 100644
--- a/ui/app/components/pending-tx.js
+++ b/ui/app/components/pending-tx.js
@@ -31,6 +31,7 @@ function PendingTx () {
 
 PendingTx.prototype.render = function () {
   const props = this.props
+  const conversionRate = props.conversionRate
   const txMeta = this.gatherTxMeta()
   const txParams = txMeta.txParams || {}
 
@@ -102,6 +103,7 @@ PendingTx.prototype.render = function () {
               }, [
                 h(EthBalance, {
                   value: balance,
+                  conversionRate,
                   inline: true,
                   labelColor: '#F7861C',
                 }),
diff --git a/ui/app/components/shift-list-item.js b/ui/app/components/shift-list-item.js
index 96a7cba6e..db5fda5cb 100644
--- a/ui/app/components/shift-list-item.js
+++ b/ui/app/components/shift-list-item.js
@@ -15,7 +15,9 @@ const Tooltip = require('./tooltip')
 module.exports = connect(mapStateToProps)(ShiftListItem)
 
 function mapStateToProps (state) {
-  return {}
+  return {
+    conversionRate: state.metamask.conversionRate,
+  }
 }
 
 inherits(ShiftListItem, Component)
@@ -64,6 +66,7 @@ function formatDate (date) {
 
 ShiftListItem.prototype.renderUtilComponents = function () {
   var props = this.props
+  const { conversionRate } = props
 
   switch (props.response.status) {
     case 'no_deposits':
@@ -96,6 +99,7 @@ ShiftListItem.prototype.renderUtilComponents = function () {
         }),
         h(EtherBalance, {
           value: `${props.response.outgoingCoin}`,
+          conversionRate,
           width: '55px',
           shorten: true,
           needsParse: false,
diff --git a/ui/app/components/transaction-list-item.js b/ui/app/components/transaction-list-item.js
index 7fb2e88d9..3db4c016e 100644
--- a/ui/app/components/transaction-list-item.js
+++ b/ui/app/components/transaction-list-item.js
@@ -19,7 +19,7 @@ function TransactionListItem () {
 }
 
 TransactionListItem.prototype.render = function () {
-  const { transaction, network } = this.props
+  const { transaction, network, conversionRate } = this.props
   if (transaction.key === 'shapeshift') {
     if (network === '1') return h(ShiftListItem, transaction)
   }
@@ -80,6 +80,7 @@ TransactionListItem.prototype.render = function () {
 
       isTx ? h(EtherBalance, {
         value: txParams.value,
+        conversionRate,
         width: '55px',
         shorten: true,
         showFiat: false,
diff --git a/ui/app/components/transaction-list.js b/ui/app/components/transaction-list.js
index 3ae953637..37a757309 100644
--- a/ui/app/components/transaction-list.js
+++ b/ui/app/components/transaction-list.js
@@ -13,7 +13,7 @@ function TransactionList () {
 }
 
 TransactionList.prototype.render = function () {
-  const { transactions, network, unapprovedMsgs } = this.props
+  const { transactions, network, unapprovedMsgs, conversionRate } = this.props
 
   var shapeShiftTxList
   if (network === '1') {
@@ -69,6 +69,7 @@ TransactionList.prototype.render = function () {
             }
             return h(TransactionListItem, {
               transaction, i, network, key,
+              conversionRate,
               showTx: (txId) => {
                 this.props.viewPendingTx(txId)
               },