Styles and behaviour correct

ui/app/components/fiat-value.js

@@ -12,7 +12,7 @@ function FiatValue () {
 
 FiatValue.prototype.render = function () {
   const props = this.props
-  const { conversionRate, currentCurrency } = props
+  const { conversionRate, currentCurrency, style } = props
 
   const value = formatBalance(props.value, 6)
 
@@ -28,16 +28,18 @@ FiatValue.prototype.render = function () {
     fiatTooltipNumber = 'Unknown'
   }
 
-  return fiatDisplay(fiatDisplayNumber, currentCurrency)
+  return fiatDisplay(fiatDisplayNumber, currentCurrency, style)
 }
 
-function fiatDisplay (fiatDisplayNumber, fiatSuffix) {
+function fiatDisplay (fiatDisplayNumber, fiatSuffix, styleOveride = {}) {
+  const { fontSize, color, fontFamily, lineHeight } = styleOveride
+
   if (fiatDisplayNumber !== 'N/A') {
     return h('.flex-row', {
       style: {
         alignItems: 'flex-end',
-        lineHeight: '13px',
-        fontFamily: 'Montserrat Light',
+        lineHeight: lineHeight || '13px',
+        fontFamily: fontFamily || 'Montserrat Light',
         textRendering: 'geometricPrecision',
       },
     }, [
@@ -45,15 +47,15 @@ function fiatDisplay (fiatDisplayNumber, fiatSuffix) {
         style: {
           width: '100%',
           textAlign: 'right',
-          fontSize: '12px',
-          color: '#333333',
+          fontSize: fontSize || '12px',
+          color: color || '#333333',
         },
       }, fiatDisplayNumber),
       h('div', {
         style: {
-          color: '#AEAEAE',
+          color: color || '#AEAEAE',
           marginLeft: '5px',
-          fontSize: '12px',
+          fontSize: fontSize || '12px',
         },
       }, fiatSuffix),
     ])

ui/app/css/itcss/components/send.scss

@@ -65,6 +65,8 @@
   align-items: center;
   padding-left: 10px;
   padding-right: 12px;
+  font-size: 16px;
+  color: $scorpion;
 }
 
 .send-screen-amount-labels {
@@ -79,8 +81,6 @@
   justify-content: space-between;
 }
 
-.send-screen-bolt-icon {}
-
 .selected-currency {
   color: $curious-blue;
 }

ui/app/css/itcss/settings/variables.scss

@@ -29,6 +29,7 @@ $curious-blue: #2f9ae0;
 $concrete: #f3f3f3;
 $tundora: #4d4d4d;
 $nile-blue: #1b344d;
+$scorpion: #5d5d5d;
 
 /*
   Z-Indicies

ui/app/send.js

@@ -5,13 +5,15 @@ const connect = require('react-redux').connect
 const Identicon = require('./components/identicon')
 const actions = require('./actions')
 const util = require('./util')
+const ethUtil = require('ethereumjs-util')
+const BN = ethUtil.BN
+const hexToBn = require('../../app/scripts/lib/hex-to-bn')
 const numericBalance = require('./util').numericBalance
 const addressSummary = require('./util').addressSummary
 const isHex = require('./util').isHex
 const EthBalance = require('./components/eth-balance')
 const EnsInput = require('./components/ens-input')
 const FiatValue = require('./components/fiat-value.js')
-const ethUtil = require('ethereumjs-util')
 const GasTooltip = require('./components/gas-tooltip.js')
 const { getSelectedIdentity } = require('./selectors')
 
@@ -30,6 +32,7 @@ function mapStateToProps (state) {
     addressBook: state.metamask.addressBook,
     conversionRate: state.metamask.conversionRate,
     currentCurrency: state.metamask.currentCurrency,
+    blockGasLimit: state.metamask.currentBlockGasLimit,
   }
 
   result.error = result.warning && result.warning.split('.')[0]
@@ -53,9 +56,9 @@ function SendTransactionScreen () {
       to: '',
       // these values are hardcoded, so "Next" can be clicked
       amount: '0.0001', // see L544
-      gasPrice: '4a817c800',
+      gasPrice: '0x19',
       gas: '0x7b0d',
-      gasFee: ((parseInt('0x7b0d', 16) * parseInt('4a817c800', 16)) / 1000000000).toFixed(10),
+      gasFee: ((parseInt('0x7b0d', 16) * parseInt('0x19', 16)) / 1000000000).toFixed(6),
       txData: null,
       memo: '',
     },
@@ -63,6 +66,28 @@ function SendTransactionScreen () {
   }
 }
 
+SendTransactionScreen.prototype.bnMultiplyByFraction = function (targetBN, numerator, denominator) {
+  const numBN = new BN(numerator)
+  const denomBN = new BN(denominator)
+  return targetBN.mul(numBN).div(denomBN)
+}
+
+SendTransactionScreen.prototype.getTxFeeBn = function (gas, gasPrice = MIN_GAS_PRICE_BN.toString(16)) {
+  const { blockGasLimit } = this.props;
+  const gasBn = hexToBn(gas)
+  const gasLimit = new BN(parseInt(blockGasLimit))
+  const safeGasLimit = this.bnMultiplyByFraction(gasLimit, 19, 20).toString(10)
+
+
+  // Gas Price
+  const gasPriceBn = hexToBn(gasPrice)
+  const txFeeBn = gasBn.mul(gasPriceBn)
+
+  const fiatMultiplier = hexToBn((1000000000).toString(16))
+  const txFeeAsFiatBn = txFeeBn.mul(fiatMultiplier)
+  return txFeeAsFiatBn;
+}
+
 SendTransactionScreen.prototype.render = function () {
   this.persistentFormParentId = 'send-tx-form'
 
@@ -226,10 +251,21 @@ SendTransactionScreen.prototype.render = function () {
             h('span', {}, ['What\'s this?']),
           ]),
 
+          // TODO: handle loading time when switching to USD
           h('div.large-input.send-screen-gas-input', {}, [
-            h(FiatValue, {
-              value: this.state.newTx.gasFee.toString(16), conversionRate, currentCurrency }
-            ),
+            currentCurrency === 'USD'
+            ? h(FiatValue, {
+              value: this.getTxFeeBn.bind(this)(this.state.newTx.gas.toString(16), this.state.newTx.gasPrice.toString(16)).toString(16),
+              conversionRate,
+              currentCurrency,
+              style: {
+                color: '#5d5d5d',
+                fontSize: '16px',
+                fontFamily: 'DIN OT',
+                lineHeight: '22.4px'
+              }
+            })
+            : h('div', {}, [`${this.state.newTx.gasFee} ETH`]),
             h('div.send-screen-gas-input-customize', {
               onClick: () => this.setTooltipOpen.bind(this)(!this.state.tooltipIsOpen),
             }, [
@@ -248,7 +284,8 @@ SendTransactionScreen.prototype.render = function () {
                 newTx: Object.assign(
                   this.state.newTx,
                   {
-                    gasFee: ((gasLimit * gasPrice) / 1000000000).toFixed(10),
+                    // TODO: determine how prices are rounded on master
+                    gasFee: ((gasPrice / 1000000000) * gasLimit).toFixed(6),
                     gas: gasLimit,
                     gasPrice,
                   }