Merge pull request #1161 from MetaMask/Debugging

Tune up master

ui/app/components/hex-as-decimal-input.js

@@ -39,15 +39,17 @@ HexAsDecimalInput.prototype.render = function () {
       },
     }, [
       h('input.ether-balance.ether-balance-amount', {
+        type: 'number',
         style: extend({
           display: 'block',
           textAlign: 'right',
           backgroundColor: 'transparent',
           border: '1px solid #bdbdbd',
+
         }, style),
         value: decimalValue,
         onChange: (event) => {
-          const hexString = hexify(event.target.value)
+          const hexString = (event.target.value === '') ? '' : hexify(event.target.value)
           onChange(hexString)
         },
       }),
@@ -70,7 +72,11 @@ function hexify (decimalString) {
 }
 
 function decimalize (input, toEth) {
-  const strippedInput = ethUtil.stripHexPrefix(input)
-  const inputBN = new BN(strippedInput, 'hex')
-  return inputBN.toString(10)
+  if (input === '') {
+    return ''
+  } else {
+    const strippedInput = ethUtil.stripHexPrefix(input)
+    const inputBN = new BN(strippedInput, 'hex')
+    return inputBN.toString(10)
+  }
 }

ui/app/components/pending-tx-details.js

@@ -32,10 +32,8 @@ PTXP.render = function () {
   var account = props.accounts[address]
   var balance = account ? account.balance : '0x0'
 
-  const gas = state.gas || txParams.gas
-  const gasPrice = state.gasPrice || txData.gasPrice
-  const gasDefault = txParams.gas
-  const gasPriceDefault = txData.gasPrice
+  const gas = (state.gas === undefined) ? txParams.gas : state.gas
+  const gasPrice = (state.gasPrice === undefined) ? txData.gasPrice : state.gasPrice
 
   var txFee = state.txFee || txData.txFee || ''
   var maxCost = state.maxCost || txData.maxCost || ''
@@ -131,11 +129,7 @@ PTXP.render = function () {
               },
               onChange: (newHex) => {
                 log.info(`Gas limit changed to ${newHex}`)
-                if (newHex === '0x0') {
-                  this.setState({gas: gasDefault})
-                } else {
-                  this.setState({ gas: newHex })
-                }
+                this.setState({ gas: newHex })
               },
             }),
           ]),
@@ -155,11 +149,7 @@ PTXP.render = function () {
               },
               onChange: (newHex) => {
                 log.info(`Gas price changed to: ${newHex}`)
-                if (newHex === '0x0') {
-                  this.setState({gasPrice: gasPriceDefault})
-                } else {
-                  this.setState({ gasPrice: newHex })
-                }
+                this.setState({ gasPrice: newHex })
               },
             }),
           ]),
@@ -316,7 +306,6 @@ PTXP.gatherParams = function () {
   const state = this.state || {}
   const txData = state.txData || props.txData
   const txParams = txData.txParams
-
   const gas = state.gas || txParams.gas
   const gasPrice = state.gasPrice || txParams.gasPrice
   const resultTx = extend(txParams, {
@@ -330,6 +319,16 @@ PTXP.gatherParams = function () {
   return resultTxMeta
 }
 
+PTXP.verifyGasParams = function () {
+  // We call this in case the gas has not been modified at all
+  if (!this.state) { return true }
+  return this._notZeroOrEmptyString(this.state.gas) && this._notZeroOrEmptyString(this.state.gasPrice)
+}
+
+PTXP._notZeroOrEmptyString = function (obj) {
+  return obj !== '' && obj !== '0x0'
+}
+
 function forwardCarrat () {
   return (
 

ui/app/components/pending-tx.js

@@ -1,10 +1,18 @@
 const Component = require('react').Component
+const connect = require('react-redux').connect
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const PendingTxDetails = require('./pending-tx-details')
 const extend = require('xtend')
+const actions = require('../actions')
 
-module.exports = PendingTx
+module.exports = connect(mapStateToProps)(PendingTx)
+
+function mapStateToProps (state) {
+  return {
+
+  }
+}
 
 inherits(PendingTx, Component)
 function PendingTx () {
@@ -60,25 +68,31 @@ PendingTx.prototype.render = function () {
       }, [
 
         props.insufficientBalance ?
-          h('button.btn-green', {
+          h('button', {
             onClick: props.buyEth,
           }, 'Buy Ether')
         : null,
 
-        h('button.confirm', {
-          disabled: props.insufficientBalance,
-          onClick: props.sendTransaction,
-        }, 'Accept'),
-
-        h('button.cancel.btn-red', {
-          onClick: props.cancelTransaction,
-        }, 'Reject'),
-
         h('button', {
           onClick: () => {
             this.refs.details.resetGasFields()
           },
         }, 'Reset'),
+
+        h('button.confirm.btn-green', {
+          disabled: props.insufficientBalance,
+          onClick: (txData, event) => {
+            if (this.refs.details.verifyGasParams()) {
+              props.sendTransaction(txData, event)
+            } else {
+              this.props.dispatch(actions.displayWarning('Invalid Gas Parameters'))
+            }
+          },
+        }, 'Accept'),
+
+        h('button.cancel.btn-red', {
+          onClick: props.cancelTransaction,
+        }, 'Reject'),
       ]),
     ])
   )