Fix a couple things

Sorry apparently the gas fixes weren't in the last commit, but are in this one.

As reported in previous commit, fixes a bug where initial estimate is not derived from the network.

Also fixes a bug where clicking "reset" does not clear our custom validation warnings.

2 files changed, 42 insertions, 15 deletions

diff --git a/ui/app/components/hex-as-decimal-input.js b/ui/app/components/hex-as-decimal-input.js
index e39805787..96a11b84f 100644
--- a/ui/app/components/hex-as-decimal-input.js
+++ b/ui/app/components/hex-as-decimal-input.js
@@ -56,12 +56,11 @@ HexAsDecimalInput.prototype.render = function () {
 
           }, style),
           value: parseInt(decimalValue),
+          onBlur: (event) => {
+            this.updateValidity(event)
+          },
           onChange: (event) => {
-            const target = event.target
-            const valid = target.checkValidity()
-            if (valid) {
-              this.setState({ invalid: null })
-            }
+            this.updateValidity(event)
             const hexString = (event.target.value === '') ? '' : hexify(event.target.value)
             onChange(hexString)
           },
@@ -103,6 +102,26 @@ HexAsDecimalInput.prototype.render = function () {
   )
 }
 
+HexAsDecimalInput.prototype.setValid = function (message) {
+  this.setState({ invalid: null })
+}
+
+HexAsDecimalInput.prototype.updateValidity = function (event) {
+  const target = event.target
+  const value = this.props.value
+  const newValue = target.value
+
+  if (value === newValue) {
+    return
+  }
+
+  const valid = target.checkValidity()
+  console.log('change triggered checking validity and found ' + valid)
+  if (valid) {
+    this.setState({ invalid: null })
+  }
+}
+
 HexAsDecimalInput.prototype.constructWarning = function () {
   const { name, min, max } = this.props
   let message = name ? name + ' ' : ''
diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js
index b2195804e..82d9b9fe7 100644
--- a/ui/app/components/pending-tx.js
+++ b/ui/app/components/pending-tx.js
@@ -53,8 +53,7 @@ PendingTx.prototype.render = function () {
   const dataLength = txParams.data ? (txParams.data.length - 2) / 2 : 0
   const imageify = props.imageifyIdenticons === undefined ? true : props.imageifyIdenticons
 
-  console.log('miniaccountpanelforrecipient?')
-  console.dir(this.miniAccountPanelForRecipient)
+  this.inputs = []
 
   return (
 
@@ -167,6 +166,7 @@ PendingTx.prototype.render = function () {
                     log.info(`Gas limit changed to ${newHex}`)
                     this.setState({ gas: newHex })
                   },
+                  ref: (hexInput) => { this.inputs.push(hexInput) },
                 }),
               ]),
             ]),
@@ -189,6 +189,7 @@ PendingTx.prototype.render = function () {
                     log.info(`Gas price changed to: ${newHex}`)
                     this.setState({ gasPrice: newHex })
                   },
+                  ref: (hexInput) => { this.inputs.push(hexInput) },
                 }),
               ]),
             ]),
@@ -351,7 +352,7 @@ PendingTx.prototype.miniAccountPanelForRecipient = function () {
 }
 
 PendingTx.prototype.componentDidUpdate = function (prevProps, previousState) {
-  log.debug(`pending-tx-details componentDidUpdate`)
+  log.debug(`pending-tx componentDidUpdate`)
   const state = this.state || {}
   const prevState = previousState || {}
   const { gas, gasPrice } = state
@@ -375,22 +376,22 @@ PendingTx.prototype.calculateGas = function () {
   const txData = props.txData
 
   const txMeta = this.gatherParams()
-  log.debug(`pending-tx-details calculating gas for ${JSON.stringify(txMeta)}`)
+  log.debug(`pending-tx calculating gas for ${JSON.stringify(txMeta)}`)
 
   const txParams = txMeta.txParams
-  const gasCost = new BN(ethUtil.stripHexPrefix(txParams.gas || txMeta.estimatedGas), 16)
-  const gasPrice = (state.gasPrice === undefined) ? txData.gasPrice : state.gasPrice
+  const gasLimit = new BN(ethUtil.stripHexPrefix(txParams.gas || txMeta.estimatedGas), 16)
+  const gasPriceHex = state.gasPrice || txData.gasPrice
+  const gasPrice = new BN(ethUtil.stripHexPrefix(gasPriceHex), 16)
 
   const valid = !gasPrice.lt(MIN_GAS_PRICE_BN)
   this.validChanged(valid)
 
-  const txFee = gasCost.mul(gasPrice)
+  const txFee = gasLimit.mul(gasPrice)
   const txValue = new BN(ethUtil.stripHexPrefix(txParams.value || '0x0'), 16)
   const maxCost = txValue.add(txFee)
 
   const txFeeHex = '0x' + txFee.toString('hex')
   const maxCostHex = '0x' + maxCost.toString('hex')
-  const gasPriceHex = '0x' + gasPrice.toString('hex')
 
   txMeta.txFee = txFeeHex
   txMeta.maxCost = maxCostHex
@@ -409,8 +410,15 @@ PendingTx.prototype.calculateGas = function () {
 }
 
 PendingTx.prototype.resetGasFields = function () {
-  log.debug(`pending-tx-details#resetGasFields`)
+  log.debug(`pending-tx resetGasFields`)
   const txData = this.props.txData
+
+  this.inputs.forEach((hexInput) => {
+    if (hexInput) {
+      hexInput.setValid()
+    }
+  })
+
   this.setState({
     gas: txData.txParams.gas,
     gasPrice: txData.gasPrice,
@@ -420,7 +428,7 @@ PendingTx.prototype.resetGasFields = function () {
 
 // After a customizable state value has been updated,
 PendingTx.prototype.gatherParams = function () {
-  log.debug(`pending-tx-details#gatherParams`)
+  log.debug(`pending-tx gatherParams`)
   const props = this.props
   const state = this.state || {}
   const txData = state.txData || props.txData