Using eth balance component to ensure proper rounding.

ui/app/components/eth-balance.js

@@ -37,7 +37,17 @@ EthBalanceComponent.prototype.render = function () {
 }
 EthBalanceComponent.prototype.renderBalance = function (value) {
   var props = this.props
-  const { conversionRate, shorten, incoming, currentCurrency } = props
+  const {
+    conversionRate,
+    shorten,
+    incoming,
+    currentCurrency,
+    hideTooltip,
+    styleOveride,
+  } = props
+
+  const { fontSize, color, fontFamily, lineHeight } = styleOveride
+
   if (value === 'None') return value
   if (value === '...') return value
   var balanceObj = generateBalanceObject(value, shorten ? 1 : 3)
@@ -54,36 +64,41 @@ EthBalanceComponent.prototype.renderBalance = function (value) {
   }
 
   var label = balanceObj.label
+  const tooltipProps = hideTooltip ? {} : {
+    position: 'bottom',
+    title: `${ethNumber} ${ethSuffix}`,
+  };
 
   return (
-    h(Tooltip, {
+    h(hideTooltip ? 'div' : Tooltip,
-      position: 'bottom',
+      tooltipProps,
-      title: `${ethNumber} ${ethSuffix}`,
+      h('div.flex-column', [
-    }, h('div.flex-column', [
+        h('.flex-row', {
-      h('.flex-row', {
-        style: {
-          alignItems: 'flex-end',
-          lineHeight: '13px',
-          fontFamily: 'Montserrat Light',
-          textRendering: 'geometricPrecision',
-        },
-      }, [
-        h('div', {
           style: {
-            width: '100%',
+            alignItems: 'flex-end',
-            textAlign: 'right',
+            lineHeight: lineHeight || '13px',
+            fontFamily: fontFamily || 'Montserrat Light',
+            textRendering: 'geometricPrecision',
           },
-        }, incoming ? `+${balance}` : balance),
+        }, [
-        h('div', {
+          h('div', {
-          style: {
+            style: {
-            color: ' #AEAEAE',
+              width: '100%',
-            fontSize: '12px',
+              textAlign: 'right',
-            marginLeft: '5px',
+              fontSize: fontSize || 'inherit',
-          },
+              color: color || 'inherit',
-        }, label),
+            },
-      ]),
+          }, incoming ? `+${balance}` : balance),
+          h('div', {
+            style: {
+              color: color || '#AEAEAE',
+              fontSize: fontSize || '12px',
+              marginLeft: '5px',
+            },
+          }, label),
+        ]),
 
-      showFiat ? h(FiatValue, { value: props.value, conversionRate, currentCurrency }) : null,
+        showFiat ? h(FiatValue, { value: props.value, conversionRate, currentCurrency }) : null,
-    ]))
+      ]))
   )
 }

ui/app/components/tooltip.js

@@ -12,7 +12,7 @@ function Tooltip () {
 
 Tooltip.prototype.render = function () {
   const props = this.props
-  const { position, title, children } = props
+  const { position, title, children, show = true } = props
 
   return h(ReactTooltip, {
     position: position || 'left',

ui/app/send.js

@@ -58,7 +58,6 @@ function SendTransactionScreen () {
       amount: '0.0001', // see L544
       gasPrice: '0x19',
       gas: '0x7b0d',
-      gasFee: ((parseInt('0x7b0d', 16) * parseInt('0x19', 16)) / 1000000000).toFixed(6),
       txData: null,
       memo: '',
     },
@@ -276,7 +275,19 @@ SendTransactionScreen.prototype.render = function () {
                 lineHeight: '22.4px'
               }
             })
-            : h('div', {}, [`${this.state.newTx.gasFee} ETH`]),
+            : h(EthBalance, {
+                value: this.getTxFeeBn(this.state.newTx.gas.toString(16), this.state.newTx.gasPrice.toString(16)).toString(16),
+                currentCurrency,
+                conversionRate,
+                showFiat: false,
+                hideTooltip: true,
+                styleOveride: {
+                  color: '#5d5d5d',
+                  fontSize: '16px',
+                  fontFamily: 'DIN OT',
+                  lineHeight: '22.4px'
+                }
+            }),
             h('div.send-screen-gas-input-customize', {
               onClick: () => this.toggleTooltip.bind(this)(!this.state.tooltipIsOpen),
             }, [
@@ -294,8 +305,6 @@ SendTransactionScreen.prototype.render = function () {
                 newTx: Object.assign(
                   this.state.newTx,
                   {
-                    // TODO: determine how prices are rounded on master
-                    gasFee: ((gasPrice / 1000000000) * gasLimit).toFixed(6),
                     gas: gasLimit,
                     gasPrice,
                   }