Merge pull request #615 from MetaMask/ModularFiatBalance

Add fiat conversion to tx confirmation view

11 files changed, 110 insertions, 175 deletions

diff --git a/ui/app/account-detail.js b/ui/app/account-detail.js
index 486a1a633..cc956fed3 100644
--- a/ui/app/account-detail.js
+++ b/ui/app/account-detail.js
@@ -10,7 +10,7 @@ const ReactCSSTransitionGroup = require('react-addons-css-transition-group')
 const valuesFor = require('./util').valuesFor
 
 const Identicon = require('./components/identicon')
-const AccountEtherBalance = require('./components/account-eth-balance')
+const EthBalance = require('./components/eth-balance')
 const TransactionList = require('./components/transaction-list')
 const ExportAccountView = require('./components/account-export')
 const ethUtil = require('ethereumjs-util')
@@ -168,7 +168,7 @@ AccountDetailScreen.prototype.render = function () {
           },
         }, [
 
-          h(AccountEtherBalance, {
+          h(EthBalance, {
             value: account && account.balance,
             style: {
               lineHeight: '7px',
diff --git a/ui/app/accounts/account-list-item.js b/ui/app/accounts/account-list-item.js
index aa80e0e23..0b4acdfec 100644
--- a/ui/app/accounts/account-list-item.js
+++ b/ui/app/accounts/account-list-item.js
@@ -3,7 +3,7 @@ const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const ethUtil = require('ethereumjs-util')
 
-const AccountEtherBalance = require('../components/account-eth-balance')
+const EthBalance = require('../components/eth-balance')
 const CopyButton = require('../components/copyButton')
 const Identicon = require('../components/identicon')
 
@@ -50,7 +50,7 @@ NewComponent.prototype.render = function () {
             textOverflow: 'ellipsis',
           },
         }, ethUtil.toChecksumAddress(identity.address)),
-        h(AccountEtherBalance, {
+        h(EthBalance, {
           value: account.balance,
           style: {
             lineHeight: '7px',
diff --git a/ui/app/app.js b/ui/app/app.js
index b674efff1..2e05f0038 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -245,7 +245,7 @@ App.prototype.renderNetworkDropdown = function () {
       label: 'Localhost 8545',
       closeMenu: () => this.setState({ isNetworkMenuOpen: false }),
       action: () => props.dispatch(actions.setRpcTarget('http://localhost:8545')),
-      icon: h('i.fa.fa-question-circle.fa-lg', { ariaHidden: true }),
+      icon: h('i.fa.fa-question-circle.fa-lg'),
       activeNetworkRender: props.provider.rpcTarget,
     }),
 
@@ -253,7 +253,7 @@ App.prototype.renderNetworkDropdown = function () {
       label: 'Custom RPC',
       closeMenu: () => this.setState({ isNetworkMenuOpen: false }),
       action: () => this.props.dispatch(actions.showConfigPage()),
-      icon: h('i.fa.fa-question-circle.fa-lg', { ariaHidden: true }),
+      icon: h('i.fa.fa-question-circle.fa-lg'),
     }),
 
     this.renderCustomOption(props.provider.rpcTarget),
@@ -289,21 +289,21 @@ App.prototype.renderDropdown = function () {
       label: 'Settings',
       closeMenu: () => this.setState({ isMainMenuOpen: !isOpen }),
       action: () => this.props.dispatch(actions.showConfigPage()),
-      icon: h('i.fa.fa-gear.fa-lg', { ariaHidden: true }),
+      icon: h('i.fa.fa-gear.fa-lg'),
     }),
 
     h(DropMenuItem, {
       label: 'Lock',
       closeMenu: () => this.setState({ isMainMenuOpen: !isOpen }),
       action: () => this.props.dispatch(actions.lockMetamask()),
-      icon: h('i.fa.fa-lock.fa-lg', { ariaHidden: true }),
+      icon: h('i.fa.fa-lock.fa-lg'),
     }),
 
     h(DropMenuItem, {
       label: 'Help',
       closeMenu: () => this.setState({ isMainMenuOpen: !isOpen }),
       action: () => this.props.dispatch(actions.showInfoPage()),
-      icon: h('i.fa.fa-question.fa-lg', { ariaHidden: true }),
+      icon: h('i.fa.fa-question.fa-lg'),
     }),
   ])
 }
@@ -312,7 +312,6 @@ App.prototype.renderBackButton = function (style, justArrow = false) {
   return (
     h('.flex-row', {
       key: 'leftArrow',
-      transForward: false,
       style: style,
       onClick: () => props.dispatch(actions.goBackToInitView()),
     }, [
@@ -515,14 +514,14 @@ App.prototype.renderCustomOption = function (rpcTarget) {
         label: 'Custom RPC',
         closeMenu: () => this.setState({ isNetworkMenuOpen: false }),
         action: () => this.props.dispatch(actions.showConfigPage()),
-        icon: h('i.fa.fa-question-circle.fa-lg', { ariaHidden: true }),
+        icon: h('i.fa.fa-question-circle.fa-lg'),
       })
 
     default:
       return h(DropMenuItem, {
         label: `${rpcTarget}`,
         closeMenu: () => this.setState({ isNetworkMenuOpen: false }),
-        icon: h('i.fa.fa-question-circle.fa-lg', { ariaHidden: true }),
+        icon: h('i.fa.fa-question-circle.fa-lg'),
         activeNetworkRender: 'custom',
       })
   }
diff --git a/ui/app/components/account-eth-balance.js b/ui/app/components/account-eth-balance.js
deleted file mode 100644
index 8d693685f..000000000
--- a/ui/app/components/account-eth-balance.js
+++ /dev/null
@@ -1,140 +0,0 @@
-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
-const generateBalanceObject = require('../util').generateBalanceObject
-const Tooltip = require('./tooltip.js')
-
-module.exports = connect(mapStateToProps)(EthBalanceComponent)
-
-function mapStateToProps (state) {
-  return {
-    conversionRate: state.metamask.conversionRate,
-    conversionDate: state.metamask.conversionDate,
-    currentFiat: state.metamask.currentFiat,
-  }
-}
-
-inherits(EthBalanceComponent, Component)
-function EthBalanceComponent () {
-  Component.call(this)
-}
-
-EthBalanceComponent.prototype.render = function () {
-  var state = this.props
-  var style = state.style
-
-  const value = formatBalance(state.value, 6)
-  var width = state.width
-
-  return (
-
-    h('.ether-balance', {
-      style: style,
-    }, [
-      h('.ether-balance-amount', {
-        style: {
-          display: 'inline',
-          width: width,
-        },
-      }, this.renderBalance(value, state)),
-    ])
-
-  )
-}
-EthBalanceComponent.prototype.renderBalance = function (value, state) {
-  if (value === 'None') return value
-  var balanceObj = generateBalanceObject(value, state.shorten ? 1 : 3)
-  var balance, fiatDisplayNumber, fiatTooltipNumber
-  var splitBalance = value.split(' ')
-  var ethNumber = splitBalance[0]
-  var ethSuffix = splitBalance[1]
-
-
-  if (state.conversionRate !== 0) {
-    fiatTooltipNumber = Number(splitBalance[0]) * state.conversionRate
-    fiatDisplayNumber = fiatTooltipNumber.toFixed(2)
-  } else {
-    fiatDisplayNumber = 'N/A'
-  }
-
-  var fiatSuffix = state.currentFiat
-
-  if (state.shorten) {
-    balance = balanceObj.shortBalance
-  } else {
-    balance = balanceObj.balance
-  }
-
-  var label = balanceObj.label
-
-  return (
-    h('.flex-column', [
-      h(Tooltip, {
-        position: 'bottom',
-        title: `${ethNumber} ${ethSuffix}`,
-      }, [
-        h('.flex-row', {
-          style: {
-            alignItems: 'flex-end',
-            lineHeight: '13px',
-            fontFamily: 'Montserrat Light',
-            textRendering: 'geometricPrecision',
-            marginBottom: '5px',
-          },
-        }, [
-          h('div', {
-            style: {
-              width: '100%',
-              textAlign: 'right',
-            },
-          }, balance),
-          h('div', {
-            style: {
-              color: '#AEAEAE',
-              marginLeft: '5px',
-            },
-          }, label),
-        ]),
-      ]),
-      h(Tooltip, {
-        position: 'bottom',
-        title: `${fiatTooltipNumber} ${fiatSuffix}`,
-      }, [
-        fiatDisplay(fiatDisplayNumber, fiatSuffix),
-      ]),
-    ])
-  )
-}
-
-function fiatDisplay (fiatDisplayNumber, fiatSuffix) {
-  if (fiatDisplayNumber !== 'N/A') {
-    return h('.flex-row', {
-      style: {
-        alignItems: 'flex-end',
-        lineHeight: '13px',
-        fontFamily: 'Montserrat Light',
-        textRendering: 'geometricPrecision',
-      },
-    }, [
-      h('div', {
-        style: {
-          width: '100%',
-          textAlign: 'right',
-          fontSize: '12px',
-          color: '#333333',
-        },
-      }, fiatDisplayNumber),
-      h('div', {
-        style: {
-          color: '#AEAEAE',
-          marginLeft: '5px',
-          fontSize: '12px',
-        },
-      }, fiatSuffix),
-    ])
-  } else {
-    return h('div')
-  }
-}
diff --git a/ui/app/components/eth-balance.js b/ui/app/components/eth-balance.js
index 498873faa..46127bed5 100644
--- a/ui/app/components/eth-balance.js
+++ b/ui/app/components/eth-balance.js
@@ -4,6 +4,7 @@ const inherits = require('util').inherits
 const formatBalance = require('../util').formatBalance
 const generateBalanceObject = require('../util').generateBalanceObject
 const Tooltip = require('./tooltip.js')
+const FiatValue = require('./fiat-value.js')
 
 module.exports = EthBalanceComponent
 
@@ -13,11 +14,11 @@ function EthBalanceComponent () {
 }
 
 EthBalanceComponent.prototype.render = function () {
-  var state = this.props
-  var style = state.style
+  var props = this.props
+  var style = props.style
   var needsParse = this.props.needsParse !== undefined ? this.props.needsParse : true
-  const value = formatBalance(state.value, 6, needsParse)
-  var width = state.width
+  const value = formatBalance(props.value, 6, needsParse)
+  var width = props.width
 
   return (
 
@@ -35,15 +36,16 @@ EthBalanceComponent.prototype.render = function () {
   )
 }
 EthBalanceComponent.prototype.renderBalance = function (value) {
-  var state = this.props
+  var props = this.props
   if (value === 'None') return value
-  var balanceObj = generateBalanceObject(value, state.shorten ? 1 : 3)
+  var balanceObj = generateBalanceObject(value, props.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 (state.shorten) {
+  if (props.shorten) {
     balance = balanceObj.shortBalance
   } else {
     balance = balanceObj.balance
@@ -55,8 +57,8 @@ EthBalanceComponent.prototype.renderBalance = function (value) {
     h(Tooltip, {
       position: 'bottom',
       title: `${ethNumber} ${ethSuffix}`,
-    }, [
-      h('.flex-column', {
+    }, h('div.flex-column', [
+      h('.flex-row', {
         style: {
           alignItems: 'flex-end',
           lineHeight: '13px',
@@ -74,9 +76,12 @@ EthBalanceComponent.prototype.renderBalance = function (value) {
           style: {
             color: ' #AEAEAE',
             fontSize: '12px',
+            marginLeft: '5px',
           },
         }, label),
       ]),
-    ])
+
+      showFiat ? h(FiatValue, { value: props.value }) : null,
+    ]))
   )
 }
diff --git a/ui/app/components/fiat-value.js b/ui/app/components/fiat-value.js
new file mode 100644
index 000000000..13ee48245
--- /dev/null
+++ b/ui/app/components/fiat-value.js
@@ -0,0 +1,71 @@
+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,
+    currentFiat: state.metamask.currentFiat,
+  }
+}
+
+inherits(FiatValue, Component)
+function FiatValue () {
+  Component.call(this)
+}
+
+FiatValue.prototype.render = function () {
+  const props = this.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
+    fiatDisplayNumber = fiatTooltipNumber.toFixed(2)
+  } else {
+    fiatDisplayNumber = 'N/A'
+    fiatTooltipNumber = 'Unknown'
+  }
+
+  var fiatSuffix = props.currentFiat
+
+  return fiatDisplay(fiatDisplayNumber, fiatSuffix)
+}
+
+function fiatDisplay (fiatDisplayNumber, fiatSuffix) {
+  if (fiatDisplayNumber !== 'N/A') {
+    return h('.flex-row', {
+      style: {
+        alignItems: 'flex-end',
+        lineHeight: '13px',
+        fontFamily: 'Montserrat Light',
+        textRendering: 'geometricPrecision',
+      },
+    }, [
+      h('div', {
+        style: {
+          width: '100%',
+          textAlign: 'right',
+          fontSize: '12px',
+          color: '#333333',
+        },
+      }, fiatDisplayNumber),
+      h('div', {
+        style: {
+          color: '#AEAEAE',
+          marginLeft: '5px',
+          fontSize: '12px',
+        },
+      }, fiatSuffix),
+    ])
+  } else {
+    return h('div')
+  }
+}
diff --git a/ui/app/components/network.js b/ui/app/components/network.js
index 6826e0685..845861396 100644
--- a/ui/app/components/network.js
+++ b/ui/app/components/network.js
@@ -75,7 +75,6 @@ Network.prototype.render = function () {
           default:
             return h('.network-indicator', [
               h('i.fa.fa-question-circle.fa-lg', {
-                ariaHidden: true,
                 style: {
                   margin: '10px',
                   color: 'rgb(125, 128, 130)',
diff --git a/ui/app/components/pending-tx-details.js b/ui/app/components/pending-tx-details.js
index 2fb0eae3f..c2e39a1ca 100644
--- a/ui/app/components/pending-tx-details.js
+++ b/ui/app/components/pending-tx-details.js
@@ -4,9 +4,8 @@ const inherits = require('util').inherits
 const carratInline = require('fs').readFileSync('./images/forward-carrat.svg', 'utf8')
 
 const MiniAccountPanel = require('./mini-account-panel')
-const EtherBalance = require('./eth-balance')
+const EthBalance = require('./eth-balance')
 const addressSummary = require('../util').addressSummary
-const formatBalance = require('../util').formatBalance
 const nameForAddress = require('../../lib/contract-namer')
 const ethUtil = require('ethereumjs-util')
 const BN = ethUtil.BN
@@ -70,7 +69,7 @@ PTXP.render = function () {
               fontFamily: 'Montserrat Light, Montserrat, sans-serif',
             },
           }, [
-            h(EtherBalance, {
+            h(EthBalance, {
               value: balance,
               inline: true,
               labelColor: '#F7861C',
@@ -107,12 +106,12 @@ PTXP.render = function () {
 
         h('.row', [
           h('.cell.label', 'Amount'),
-          h('.cell.value', formatBalance(txParams.value)),
+          h(EthBalance, { value: txParams.value }),
         ]),
 
         h('.cell.row', [
           h('.cell.label', 'Max Transaction Fee'),
-          h('.cell.value', formatBalance(txFee.toString(16))),
+          h(EthBalance, { value: txFee.toString(16) }),
         ]),
 
         h('.cell.row', {
@@ -129,7 +128,7 @@ PTXP.render = function () {
               alignItems: 'center',
             },
           }, [
-            h(EtherBalance, {
+            h(EthBalance, {
               value: maxCost.toString(16),
               inline: true,
               labelColor: 'black',
diff --git a/ui/app/components/tooltip.js b/ui/app/components/tooltip.js
index fb67c717e..757ad0cd6 100644
--- a/ui/app/components/tooltip.js
+++ b/ui/app/components/tooltip.js
@@ -11,12 +11,14 @@ function Tooltip () {
 }
 
 Tooltip.prototype.render = function () {
+
   const props = this.props
+  const { position, title, children } = props
 
   return h(ReactTooltip, {
-    position: props.position ? props.position : 'left',
-    title: props.title,
+    position: position || 'left',
+    title,
     fixed: false,
-  }, props.children)
+  }, children)
 
 }
diff --git a/ui/app/components/transaction-list-item.js b/ui/app/components/transaction-list-item.js
index 1b85464e1..66a232981 100644
--- a/ui/app/components/transaction-list-item.js
+++ b/ui/app/components/transaction-list-item.js
@@ -77,6 +77,7 @@ TransactionListItem.prototype.render = function () {
         value: txParams.value,
         width: '55px',
         shorten: true,
+        showFiat: false,
         style: {fontSize: '15px'},
       }) : h('.flex-column'),
     ])
diff --git a/ui/app/send.js b/ui/app/send.js
index cf1b43b1d..009866cf7 100644
--- a/ui/app/send.js
+++ b/ui/app/send.js
@@ -7,7 +7,7 @@ const actions = require('./actions')
 const util = require('./util')
 const numericBalance = require('./util').numericBalance
 const addressSummary = require('./util').addressSummary
-const EtherBalance = require('./components/eth-balance')
+const EthBalance = require('./components/eth-balance')
 const ethUtil = require('ethereumjs-util')
 
 module.exports = connect(mapStateToProps)(SendTransactionScreen)
@@ -107,8 +107,7 @@ SendTransactionScreen.prototype.render = function () {
         // balance
         h('.flex-row.flex-center', [
 
-          // h('div', formatBalance(account && account.balance)),
-          h(EtherBalance, {
+          h(EthBalance, {
             value: account && account.balance,
           }),