Fully connect gas data in send form and tooltip to state; final styling improvements.

Fully connect gas fields in send form and tooltip to state

ui/app/components/gas-tooltip.js

@@ -18,6 +18,12 @@ function GasTooltip () {
   this.updateGasLimit = this.updateGasLimit.bind(this);
 }
 
+GasTooltip.prototype.componentWillMount = function () {
+  const { gasPrice = 0, gasLimit = 0} = this.props
+  
+  this.setState({ gasPrice, gasLimit })
+}
+
 GasTooltip.prototype.updateGasPrice = function (newPrice) {
   const { onFeeChange } = this.props
   const { gasLimit } = this.state
@@ -57,7 +63,11 @@ GasTooltip.prototype.render = function () {
             initValue: gasPrice,
             onChange: (newPrice) => this.updateGasPrice(newPrice), 
           }),
-          h('div.gas-tooltip-input-label', {}, [
+          h('div.gas-tooltip-input-label', {
+            style: {
+              'marginTop': '81px',
+            },
+          }, [
             h('span.gas-tooltip-label', {}, ['Gas Limit']),
             h('i.fa.fa-info-circle')
           ]),
@@ -104,10 +114,7 @@ GasTooltip.prototype.componentWillUnmount = function () {
 GasTooltip.prototype.globalClickOccurred = function (event) {
   const target = event.target
   const container = findDOMNode(this)
-  console.log(`target`, target);
-  console.log(`container`, container);
-  console.log(`this.container`, this.container);
-  console.log(`this.outsideClickHandler`, this.outsideClickHandler);
+  
   if (target !== container &&
     !isDescendant(container, target) &&
     this.outsideClickHandler) {

ui/app/components/input-number.js

@@ -16,7 +16,7 @@ function InputNumber () {
   this.setValue = this.setValue.bind(this);
 }
 
-InputNumber.prototype.componentWillMount == function () {
+InputNumber.prototype.componentWillMount = function () {
   const { initValue = 0 } = this.props
   
   this.setState({ value: initValue });

ui/app/send.js

@@ -10,6 +10,7 @@ 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')
@@ -54,7 +55,7 @@ function SendTransactionScreen () {
       amount: '0.0001', // see L544
       gasPrice: '4a817c800',
       gas: '0x7b0d',
-      gasFee: 0,
+      gasFee: ((parseInt('0x7b0d', 16) * parseInt('4a817c800', 16)) / 1000000000).toFixed(10),
       txData: null,
       memo: '',
     },
@@ -225,20 +226,22 @@ SendTransactionScreen.prototype.render = function () {
             h('span', {}, ['What\'s this?']),
           ]),
 
-          h('input.large-input.send-screen-gas-input', {
-            placeholder: '0',
-            value: this.state.newTx.gasFee
-          }, []),
-
-          h('div.send-screen-gas-input-customize', {
-            onClick: () => this.setTooltipOpen.bind(this)(!this.state.tooltipIsOpen),
-          }, [
-            'Customize'
+          h('div.large-input.send-screen-gas-input', {}, [
+            h(FiatValue, {
+              value: this.state.newTx.gasFee.toString(16), conversionRate, currentCurrency }
+            ),
+            h('div.send-screen-gas-input-customize', {
+              onClick: () => this.setTooltipOpen.bind(this)(!this.state.tooltipIsOpen),
+            }, [
+              'Customize'
+            ]),
           ]),
 
           h(GasTooltip, {
             isOpen: this.state.tooltipIsOpen,
             className: 'send-tooltip',
+            gasPrice: parseInt(this.state.newTx.gasPrice, 16),
+            gasLimit: parseInt(this.state.newTx.gas, 16),
             onClickOutside: () => this.setTooltipOpen.bind(this)(false),
             onFeeChange: ({gasLimit, gasPrice}) => {
               this.setState({
@@ -246,6 +249,8 @@ SendTransactionScreen.prototype.render = function () {
                   this.state.newTx,
                   {
                     gasFee: ((gasLimit * gasPrice) / 1000000000).toFixed(10),
+                    gas: gasLimit,
+                    gasPrice,
                   }
                 ),
               })