Divided eth components for tx and account detail.

3 files changed, 128 insertions, 15 deletions

diff --git a/ui/app/account-detail.js b/ui/app/account-detail.js
index 7af8aece7..7236a2471 100644
--- a/ui/app/account-detail.js
+++ b/ui/app/account-detail.js
@@ -9,6 +9,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 EtherBalance = require('./components/eth-balance')
 const TransactionList = require('./components/transaction-list')
 const ExportAccountView = require('./components/account-export')
@@ -163,7 +164,7 @@ AccountDetailScreen.prototype.render = function () {
           },
         }, [
 
-          h(EtherBalance, {
+          h(AccountEtherBalance, {
             value: account && account.balance,
             mainBalance: true,
             style: {
diff --git a/ui/app/components/account-eth-balance.js b/ui/app/components/account-eth-balance.js
new file mode 100644
index 000000000..b748ea2ea
--- /dev/null
+++ b/ui/app/components/account-eth-balance.js
@@ -0,0 +1,124 @@
+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
+  var splitBalance = value.split(' ')
+  var ethNumber = splitBalance[0]
+  var ethSuffix = splitBalance[1]
+  var fiatNumber = Number(splitBalance[0]) * state.conversionRate
+  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: `${balance} ${label}`,
+      }, [
+        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: `${fiatNumber} ${fiatSuffix}`,
+      }, [
+        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',
+            },
+          }, `= ${fiatNumber.toFixed(2)}`),
+          h('div', {
+            style: {
+              color: '#AEAEAE',
+              marginLeft: '5px',
+              fontSize: '12px',
+            },
+          }, fiatSuffix),
+        ]),
+      ]),
+    ])
+  )
+}
diff --git a/ui/app/components/eth-balance.js b/ui/app/components/eth-balance.js
index 1a7f75db9..a5584a235 100644
--- a/ui/app/components/eth-balance.js
+++ b/ui/app/components/eth-balance.js
@@ -6,15 +6,7 @@ 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,
-  }
-}
+module.exports = EthBalanceComponent
 
 inherits(EthBalanceComponent, Component)
 function EthBalanceComponent () {
@@ -50,8 +42,6 @@ EthBalanceComponent.prototype.renderBalance = function (value, state) {
   var splitBalance = value.split(' ')
   var ethNumber = splitBalance[0]
   var ethSuffix = splitBalance[1]
-  var fiatNumber = Number(splitBalance[0]) * state.conversionRate
-  var fiatSuffix = state.currentFiat
 
   if (state.shorten) {
     balance = balanceObj.shortBalance
@@ -64,9 +54,7 @@ EthBalanceComponent.prototype.renderBalance = function (value, state) {
   return (
     h(Tooltip, {
       position: 'bottom',
-      multiline: true,
-      title: `${ethNumber} ${ethSuffix}
-      ${fiatNumber} ${fiatSuffix}`,
+      title: `${ethNumber} ${ethSuffix}`,
     }, [
       h('.flex-column', {
         style: {