Broke hex decimal input into its own component

Also added a new state to try to make UI dev mode work again, but it has other issues, like #1128, that need to be addressed before UI dev mode can be used again.

3 files changed, 71 insertions, 25 deletions

diff --git a/ui/app/components/hex-as-decimal-input.js b/ui/app/components/hex-as-decimal-input.js
new file mode 100644
index 000000000..4d3105b8d
--- /dev/null
+++ b/ui/app/components/hex-as-decimal-input.js
@@ -0,0 +1,49 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const ethUtil = require('ethereumjs-util')
+const BN = ethUtil.BN
+
+module.exports = HexAsDecimalInput
+
+inherits(HexAsDecimalInput, Component)
+function HexAsDecimalInput () {
+  Component.call(this)
+}
+
+/* Hex as Decimal Input
+ *
+ * A component for allowing easy, decimal editing
+ * of a passed in hex string value.
+ *
+ * On change, calls back its `onChange` function parameter
+ * and passes it an updated hex string.
+ */
+
+HexAsDecimalInput.prototype.render = function () {
+  const props = this.props
+  const { value, onChange } = props
+  const decimalValue = decimalize(value)
+
+  return (
+    h('input', {
+      value: decimalValue,
+      onChange: (event) => {
+        const hexString = hexify(event.target.value)
+        onChange(hexString)
+      },
+    })
+  )
+}
+
+function hexify (decimalString) {
+  const hexBN = new BN(decimalString, 10)
+  return '0x' + hexBN.toString('hex')
+}
+
+function decimalize (input) {
+  const strippedInput = ethUtil.stripHexPrefix(input)
+  const inputBN = new BN(strippedInput, 'hex')
+  return inputBN.toString(10)
+}
+
diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js
index 9eefe1b22..761c75be3 100644
--- a/ui/app/components/pending-tx.js
+++ b/ui/app/components/pending-tx.js
@@ -2,8 +2,7 @@ const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const PendingTxDetails = require('./pending-tx-details')
-const BN = require('ethereumjs-util').BN
-const ethUtil = require('ethereumjs-util')
+const HexInput = require('./hex-as-decimal-input')
 
 module.exports = PendingTx
 
@@ -13,12 +12,13 @@ function PendingTx () {
 }
 
 PendingTx.prototype.render = function () {
-  var props = this.props
-  var state = this.state || {}
-  var txData = props.txData
-  var txParams = txData.txParams
-  var gasValue = state.gas || txParams.gas
-  var decimalGas = decimalize(gasValue)
+  const props = this.props
+  const state = this.state || {}
+  const txData = props.txData
+  const txParams = txData.txParams
+
+  const gas = state.gas || txParams.gas
+  const gasPrice = state.gasPrice || txParams.gasPrice
 
   return (
 
@@ -78,24 +78,22 @@ PendingTx.prototype.render = function () {
           onClick: props.cancelTransaction,
         }, 'Reject'),
       ]),
-      h('input', {
-          value: decimalGas,
-          onChange: (event) => {
-            const hexString = hexify(event.target.value)
-            this.setState({ gas: hexString })
-          }
+
+      h(HexInput, {
+        value: gas,
+        onChange: (newHex) => {
+          this.setState({ gas: newHex })
+        },
+      }),
+
+      h(HexInput, {
+        value: gasPrice,
+        onChange: (newHex) => {
+          this.setState({ gasPrice: newHex })
+        },
       }),
+
     ])
   )
 }
 
-function decimalize (input) {
-  const strippedInput = ethUtil.stripHexPrefix(input)
-  const inputBN = new BN(strippedInput, 'hex')
-  return inputBN.toString(10)
-}
-
-function hexify (decimalString) {
-  const hexBN = new BN(decimalString, 10)
-  return '0x' + hexBN.toString('hex')
-}
diff --git a/ui/app/conf-tx.js b/ui/app/conf-tx.js
index eed1f59ad..831bed0ec 100644
--- a/ui/app/conf-tx.js
+++ b/ui/app/conf-tx.js
@@ -36,7 +36,6 @@ function ConfirmTxScreen () {
 
 ConfirmTxScreen.prototype.render = function () {
   var props = this.props
-  var state = this.state || {}
 
   var network = props.network
   var provider = props.provider