Move input boxes into table and into details component.

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

@@ -27,6 +27,10 @@ HexAsDecimalInput.prototype.render = function () {
 
   return (
     h('input', {
+      style: {
+        display: 'block',
+        textAlign: 'right',
+      },
       value: decimalValue,
       onChange: (event) => {
         const hexString = hexify(event.target.value)
@@ -46,4 +50,3 @@ function decimalize (input) {
   const inputBN = new BN(strippedInput, 'hex')
   return inputBN.toString(10)
 }
-

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

@@ -7,6 +7,8 @@ const EthBalance = require('./eth-balance')
 const util = require('../util')
 const addressSummary = util.addressSummary
 const nameForAddress = require('../../lib/contract-namer')
+const HexInput = require('./hex-as-decimal-input')
+
 
 module.exports = PendingTxDetails
 
@@ -20,6 +22,7 @@ const PTXP = PendingTxDetails.prototype
 PTXP.render = function () {
   var props = this.props
   var txData = props.txData
+  var state = this.state || {}
 
   var txParams = txData.txParams || {}
   var address = txParams.from || props.selectedAddress
@@ -27,6 +30,9 @@ 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
+
   var txFee = txData.txFee || ''
   var maxCost = txData.maxCost || ''
   var dataLength = txParams.data ? (txParams.data.length - 2) / 2 : 0
@@ -129,7 +135,36 @@ PTXP.render = function () {
             }),
           ]),
         ]),
+        h('.cell.row', {
 
+        }, [
+          h('.cell.label', 'Total Gas'),
+          h('.cell.value', {
+
+          }, [
+            h(HexInput, {
+              value: gas,
+              onChange: (newHex) => {
+                this.setState({ gas: newHex })
+              },
+            }),
+          ])
+        ]),
+        h('.cell.row', {
+
+        }, [
+          h('.cell.label', 'Gas Price'),
+          h('.cell.value', {
+
+          }, [
+            h(HexInput, {
+              value: gasPrice,
+              onChange: (newHex) => {
+                this.setState({ gas: newHex })
+              },
+            }),
+          ])
+        ]),
         h('.cell.row', {
           style: {
             background: '#f7f7f7',

ui/app/components/pending-tx.js

@@ -2,7 +2,6 @@ const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const PendingTxDetails = require('./pending-tx-details')
-const HexInput = require('./hex-as-decimal-input')
 
 module.exports = PendingTx
 
@@ -78,21 +77,6 @@ PendingTx.prototype.render = function () {
           onClick: props.cancelTransaction,
         }, 'Reject'),
       ]),
-
-      h(HexInput, {
-        value: gas,
-        onChange: (newHex) => {
-          this.setState({ gas: newHex })
-        },
-      }),
-
-      h(HexInput, {
-        value: gasPrice,
-        onChange: (newHex) => {
-          this.setState({ gasPrice: newHex })
-        },
-      }),
-
     ])
   )
 }