From 77907038ffe0edbe5e3472f98fd10d73b76464b8 Mon Sep 17 00:00:00 2001
From: Dan Finlay <dan@danfinlay.com>
Date: Wed, 22 Mar 2017 15:14:33 -0700
Subject: Got basic validations working

---
 ui/app/components/pending-tx.js | 133 +++++++++++++++++++++++-----------------
 1 file changed, 77 insertions(+), 56 deletions(-)

(limited to 'ui/app/components/pending-tx.js')

diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js
index 2ab6f25a9..f6fb6f85e 100644
--- a/ui/app/components/pending-tx.js
+++ b/ui/app/components/pending-tx.js
@@ -17,11 +17,15 @@ function mapStateToProps (state) {
 inherits(PendingTx, Component)
 function PendingTx () {
   Component.call(this)
+  this.state = { valid: true }
 }
 
 PendingTx.prototype.render = function () {
   const props = this.props
-  const newProps = extend(props, {ref: 'details'})
+  const newProps = extend(props, {
+    ref: 'details',
+    validChanged: this.validChanged.bind(this),
+  })
   const txData = props.txData
 
   return (
@@ -30,70 +34,87 @@ PendingTx.prototype.render = function () {
       key: txData.id,
     }, [
 
-      // tx info
-      h(PendingTxDetails, newProps),
-
-      h('style', `
-        .conf-buttons button {
-          margin-left: 10px;
-          text-transform: uppercase;
-        }
-      `),
-
-      txData.simulationFails ?
-        h('.error', {
-          style: {
-            marginLeft: 50,
-            fontSize: '0.9em',
-          },
-        }, 'Transaction Error. Exception thrown in contract code.')
-      : null,
-
-      props.insufficientBalance ?
-        h('span.error', {
-          style: {
-            marginLeft: 50,
-            fontSize: '0.9em',
-          },
-        }, 'Insufficient balance for transaction')
-      : null,
-
-      // send + cancel
-      h('.flex-row.flex-space-around.conf-buttons', {
-        style: {
-          display: 'flex',
-          justifyContent: 'flex-end',
-          margin: '14px 25px',
+      h('form#pending-tx-form', {
+        onSubmit: (event) => {
+          event.preventDefault()
+          const form = document.querySelector('form#pending-tx-form')
+          const valid = form.checkValidity()
+          this.setState({ valid })
+
+          if (valid && this.refs.details.verifyGasParams()) {
+            props.sendTransaction(txData, event)
+          } else {
+            this.props.dispatch(actions.displayWarning('Invalid Gas Parameters'))
+          }
         },
       }, [
 
+        // tx info
+        h(PendingTxDetails, newProps),
+
+        h('style', `
+          .conf-buttons button {
+            margin-left: 10px;
+            text-transform: uppercase;
+          }
+        `),
+
+        txData.simulationFails ?
+          h('.error', {
+            style: {
+              marginLeft: 50,
+              fontSize: '0.9em',
+            },
+          }, 'Transaction Error. Exception thrown in contract code.')
+        : null,
+
         props.insufficientBalance ?
-          h('button', {
-            onClick: props.buyEth,
-          }, 'Buy Ether')
+          h('span.error', {
+            style: {
+              marginLeft: 50,
+              fontSize: '0.9em',
+            },
+          }, 'Insufficient balance for transaction')
         : null,
 
-        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'))
-            }
+        // send + cancel
+        h('.flex-row.flex-space-around.conf-buttons', {
+          style: {
+            display: 'flex',
+            justifyContent: 'flex-end',
+            margin: '14px 25px',
           },
-        }, 'Accept'),
+        }, [
+
 
-        h('button.cancel.btn-red', {
-          onClick: props.cancelTransaction,
-        }, 'Reject'),
+          props.insufficientBalance ?
+            h('button', {
+              onClick: props.buyEth,
+            }, 'Buy Ether')
+          : null,
+
+          h('button', {
+            onClick: () => {
+              this.refs.details.resetGasFields()
+            },
+          }, 'Reset'),
+
+          h('input.confirm.btn-green', {
+            type: 'submit',
+            value: 'ACCEPT',
+            style: { marginLeft: '10px' },
+            disabled: props.insufficientBalance || !this.state.valid,
+          }),
+
+          h('button.cancel.btn-red', {
+            onClick: props.cancelTransaction,
+          }, 'Reject'),
+        ]),
       ]),
     ])
   )
 }
+
+PendingTx.prototype.validChanged = function (newValid) {
+  this.setState({ valid: newValid })
+}
-- 
cgit v1.2.3


From e7a3330b980b150d4b7eae9c628e4ad2b0a1af34 Mon Sep 17 00:00:00 2001
From: Dan Finlay <dan@danfinlay.com>
Date: Thu, 23 Mar 2017 13:44:09 -0700
Subject: Combine pending-tx-details component into pending-tx-details

These were only separated originally so we could make the notification-based TX approval work, which provided its own buttons.

This two templates are logically highly coupled, and keeping them working while separate has been difficult at times, and has even required resorting to dubious practices, like using React's `refs` pattern.

This combines them into one fairly large component, but I think it's ok, we can still break this up into components, just not the separation that it had previously.
---
 ui/app/components/pending-tx.js | 352 +++++++++++++++++++++++++++++++++++++++-
 1 file changed, 346 insertions(+), 6 deletions(-)

(limited to 'ui/app/components/pending-tx.js')

diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js
index f6fb6f85e..f550c1d35 100644
--- a/ui/app/components/pending-tx.js
+++ b/ui/app/components/pending-tx.js
@@ -2,10 +2,25 @@ 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')
 
+const ethUtil = require('ethereumjs-util')
+const BN = ethUtil.BN
+
+const MiniAccountPanel = require('./mini-account-panel')
+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')
+
+const DEFAULT_GAS_PRICE_BN = new BN(20000000000, '10')
+const DEFAULT_GAS_PRICE = DEFAULT_GAS_PRICE_BN.toString(16)
+
+const MIN_GAS_PRICE_BN = new BN(20000000)
+
+
 module.exports = connect(mapStateToProps)(PendingTx)
 
 function mapStateToProps (state) {
@@ -22,12 +37,28 @@ function PendingTx () {
 
 PendingTx.prototype.render = function () {
   const props = this.props
-  const newProps = extend(props, {
-    ref: 'details',
-    validChanged: this.validChanged.bind(this),
-  })
   const txData = props.txData
 
+  const state = this.state
+
+  const txParams = txData.txParams || {}
+  const address = txParams.from || props.selectedAddress
+  const identity = props.identities[address] || { address: address }
+  const account = props.accounts[address]
+  const balance = account ? account.balance : '0x0'
+
+  const gas = (state.gas === undefined) ? txParams.gas : state.gas
+  const gasPrice = (state.gasPrice === undefined) ? txData.gasPrice : state.gasPrice
+
+  const txFee = state.txFee || txData.txFee || ''
+  const txFeeBn = new BN(txFee, 16)
+  const maxCost = state.maxCost || txData.maxCost || ''
+  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)
+
   return (
 
     h('div', {
@@ -50,7 +81,168 @@ PendingTx.prototype.render = function () {
       }, [
 
         // tx info
-        h(PendingTxDetails, newProps),
+        h('div', [
+
+          h('.flex-row.flex-center', {
+            style: {
+              maxWidth: '100%',
+            },
+          }, [
+
+            h(MiniAccountPanel, {
+              imageSeed: address,
+              imageifyIdenticons: imageify,
+              picOrder: 'right',
+            }, [
+              h('span.font-small', {
+                style: {
+                  fontFamily: 'Montserrat Bold, Montserrat, sans-serif',
+                },
+              }, identity.name),
+              h('span.font-small', {
+                style: {
+                  fontFamily: 'Montserrat Light, Montserrat, sans-serif',
+                },
+              }, addressSummary(address, 6, 4, false)),
+
+              h('span.font-small', {
+                style: {
+                  fontFamily: 'Montserrat Light, Montserrat, sans-serif',
+                },
+              }, [
+                h(EthBalance, {
+                  value: balance,
+                  inline: true,
+                  labelColor: '#F7861C',
+                }),
+              ]),
+            ]),
+
+            forwardCarrat(),
+
+            this.miniAccountPanelForRecipient(),
+          ]),
+
+          h('style', `
+            .table-box {
+              margin: 7px 0px 0px 0px;
+              width: 100%;
+            }
+            .table-box .row {
+              margin: 0px;
+              background: rgb(236,236,236);
+              display: flex;
+              justify-content: space-between;
+              font-family: Montserrat Light, sans-serif;
+              font-size: 13px;
+              padding: 5px 25px;
+            }
+            .table-box .row .value {
+              font-family: Montserrat Regular;
+            }
+          `),
+
+          h('.table-box', [
+
+            // Ether Value
+            // Currently not customizable, but easily modified
+            // in the way that gas and gasLimit currently are.
+            h('.row', [
+              h('.cell.label', 'Amount'),
+              h(EthBalance, { value: txParams.value }),
+            ]),
+
+            // Gas Limit (customizable)
+            h('.cell.row', [
+              h('.cell.label', 'Gas Limit'),
+              h('.cell.value', {
+              }, [
+                h(HexInput, {
+                  name: 'Gas Limit',
+                  value: gas,
+                  min: 21000, // The hard lower limit for gas.
+                  suffix: 'UNITS',
+                  style: {
+                    position: 'relative',
+                    top: '5px',
+                  },
+                  onChange: (newHex) => {
+                    log.info(`Gas limit changed to ${newHex}`)
+                    this.setState({ gas: newHex })
+                  },
+                }),
+              ]),
+            ]),
+
+            // Gas Price (customizable)
+            h('.cell.row', [
+              h('.cell.label', 'Gas Price'),
+              h('.cell.value', {
+              }, [
+                h(HexInput, {
+                  name: 'Gas Price',
+                  value: gasPrice,
+                  suffix: 'WEI',
+                  min: MIN_GAS_PRICE_BN.toString(10),
+                  style: {
+                    position: 'relative',
+                    top: '5px',
+                  },
+                  onChange: (newHex) => {
+                    log.info(`Gas price changed to: ${newHex}`)
+                    this.setState({ gasPrice: newHex })
+                  },
+                }),
+              ]),
+            ]),
+
+            // Max Transaction Fee (calculated)
+            h('.cell.row', [
+              h('.cell.label', 'Max Transaction Fee'),
+              h(EthBalance, { value: txFeeBn.toString(16) }),
+            ]),
+
+            h('.cell.row', {
+              style: {
+                fontFamily: 'Montserrat Regular',
+                background: 'white',
+                padding: '10px 25px',
+              },
+            }, [
+              h('.cell.label', 'Max Total'),
+              h('.cell.value', {
+                style: {
+                  display: 'flex',
+                  alignItems: 'center',
+                },
+              }, [
+                h(EthBalance, {
+                  value: maxCost.toString(16),
+                  inline: true,
+                  labelColor: 'black',
+                  fontSize: '16px',
+                }),
+              ]),
+            ]),
+
+            // Data size row:
+            h('.cell.row', {
+              style: {
+                background: '#f7f7f7',
+                paddingBottom: '0px',
+              },
+            }, [
+              h('.cell.label'),
+              h('.cell.value', {
+                style: {
+                  fontFamily: 'Montserrat Light',
+                  fontSize: '11px',
+                },
+              }, `Data included: ${dataLength} bytes`),
+            ]),
+          ]), // End of Table
+
+        ]),
 
         h('style', `
           .conf-buttons button {
@@ -118,3 +310,151 @@ PendingTx.prototype.render = function () {
 PendingTx.prototype.validChanged = function (newValid) {
   this.setState({ valid: newValid })
 }
+
+PendingTx.prototype.miniAccountPanelForRecipient = function () {
+  const props = this.props
+  const txData = props.txData
+  const txParams = txData.txParams || {}
+  const isContractDeploy = !('to' in txParams)
+  const imageify = props.imageifyIdenticons === undefined ? true : props.imageifyIdenticons
+
+  // If it's not a contract deploy, send to the account
+  if (!isContractDeploy) {
+    return h(MiniAccountPanel, {
+      imageSeed: txParams.to,
+      imageifyIdenticons: imageify,
+      picOrder: 'left',
+    }, [
+      h('span.font-small', {
+        style: {
+          fontFamily: 'Montserrat Bold, Montserrat, sans-serif',
+        },
+      }, nameForAddress(txParams.to, props.identities)),
+      h('span.font-small', {
+        style: {
+          fontFamily: 'Montserrat Light, Montserrat, sans-serif',
+        },
+      }, addressSummary(txParams.to, 6, 4, false)),
+    ])
+  } else {
+    return h(MiniAccountPanel, {
+      imageifyIdenticons: imageify,
+      picOrder: 'left',
+    }, [
+
+      h('span.font-small', {
+        style: {
+          fontFamily: 'Montserrat Bold, Montserrat, sans-serif',
+        },
+      }, 'New Contract'),
+
+    ])
+  }
+}
+
+PendingTx.prototype.componentDidUpdate = function (prevProps, previousState) {
+  log.debug(`pending-tx-details componentDidUpdate`)
+  const state = this.state || {}
+  const prevState = previousState || {}
+  const { gas, gasPrice } = state
+
+  // Only if gas or gasPrice changed:
+  if (!prevState ||
+      (gas !== prevState.gas ||
+      gasPrice !== prevState.gasPrice)) {
+    log.debug(`recalculating gas since prev state change: ${JSON.stringify({ prevState, state })}`)
+    this.calculateGas()
+  }
+}
+
+PendingTx.prototype.isValid = function () {
+  return this.state.valid
+}
+
+PendingTx.prototype.calculateGas = function () {
+  const txMeta = this.gatherParams()
+  log.debug(`pending-tx-details calculating gas for ${JSON.stringify(txMeta)}`)
+
+  const txParams = txMeta.txParams
+  const gasCost = new BN(ethUtil.stripHexPrefix(txParams.gas || txMeta.estimatedGas), 16)
+  const gasPrice = new BN(ethUtil.stripHexPrefix(txParams.gasPrice || DEFAULT_GAS_PRICE), 16)
+
+  const valid = !gasPrice.lt(MIN_GAS_PRICE_BN)
+  this.validChanged(valid)
+
+  const txFee = gasCost.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
+  txMeta.txParams.gasPrice = gasPriceHex
+
+  const newState = {
+    txFee: '0x' + txFee.toString('hex'),
+    maxCost: '0x' + maxCost.toString('hex'),
+  }
+  log.info(`tx form updating local state with ${JSON.stringify(newState)}`)
+  this.setState(newState)
+
+  if (this.props.onTxChange) {
+    this.props.onTxChange(txMeta)
+  }
+}
+
+PendingTx.prototype.resetGasFields = function () {
+  log.debug(`pending-tx-details#resetGasFields`)
+  const txData = this.props.txData
+  this.setState({
+    gas: txData.txParams.gas,
+    gasPrice: txData.gasPrice,
+  })
+}
+
+// After a customizable state value has been updated,
+PendingTx.prototype.gatherParams = function () {
+  log.debug(`pending-tx-details#gatherParams`)
+  const props = this.props
+  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, {
+    gas,
+    gasPrice,
+  })
+  const resultTxMeta = extend(txData, {
+    txParams: resultTx,
+  })
+  log.debug(`UI has computed tx params ${JSON.stringify(resultTx)}`)
+  return resultTxMeta
+}
+
+PendingTx.prototype.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)
+}
+
+PendingTx.prototype._notZeroOrEmptyString = function (obj) {
+  return obj !== '' && obj !== '0x0'
+}
+
+function forwardCarrat () {
+  return (
+
+    h('img', {
+      src: 'images/forward-carrat.svg',
+      style: {
+        padding: '5px 6px 0px 10px',
+        height: '37px',
+      },
+    })
+
+  )
+}
-- 
cgit v1.2.3


From 55e8a717e6a1187381c10d7ad2f9da57888e4fd8 Mon Sep 17 00:00:00 2001
From: Dan Finlay <dan@danfinlay.com>
Date: Thu, 23 Mar 2017 14:55:59 -0700
Subject: Fix some broken refs

---
 ui/app/components/pending-tx.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'ui/app/components/pending-tx.js')

diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js
index f550c1d35..75004b208 100644
--- a/ui/app/components/pending-tx.js
+++ b/ui/app/components/pending-tx.js
@@ -72,7 +72,7 @@ PendingTx.prototype.render = function () {
           const valid = form.checkValidity()
           this.setState({ valid })
 
-          if (valid && this.refs.details.verifyGasParams()) {
+          if (valid && this.verifyGasParams()) {
             props.sendTransaction(txData, event)
           } else {
             this.props.dispatch(actions.displayWarning('Invalid Gas Parameters'))
@@ -287,7 +287,7 @@ PendingTx.prototype.render = function () {
 
           h('button', {
             onClick: () => {
-              this.refs.details.resetGasFields()
+              this.resetGasFields()
             },
           }, 'Reset'),
 
-- 
cgit v1.2.3


From 612bace17d8fb84fd755a30f03fc9075b4d967f1 Mon Sep 17 00:00:00 2001
From: Dan Finlay <dan@danfinlay.com>
Date: Thu, 23 Mar 2017 15:01:05 -0700
Subject: Prevent default for reset and reject buttons

---
 ui/app/components/pending-tx.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'ui/app/components/pending-tx.js')

diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js
index 75004b208..6753fc098 100644
--- a/ui/app/components/pending-tx.js
+++ b/ui/app/components/pending-tx.js
@@ -286,8 +286,9 @@ PendingTx.prototype.render = function () {
           : null,
 
           h('button', {
-            onClick: () => {
+            onClick: (event) => {
               this.resetGasFields()
+              event.preventDefault()
             },
           }, 'Reset'),
 
-- 
cgit v1.2.3


From 31c1839ed76c56c3e988d1f77957ae71f433836c Mon Sep 17 00:00:00 2001
From: Dan Finlay <dan@danfinlay.com>
Date: Thu, 23 Mar 2017 15:10:57 -0700
Subject: Fix initial gas price estimate

---
 ui/app/components/pending-tx.js | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

(limited to 'ui/app/components/pending-tx.js')

diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js
index 6753fc098..c0786d83e 100644
--- a/ui/app/components/pending-tx.js
+++ b/ui/app/components/pending-tx.js
@@ -15,9 +15,6 @@ const addressSummary = util.addressSummary
 const nameForAddress = require('../../lib/contract-namer')
 const HexInput = require('./hex-as-decimal-input')
 
-const DEFAULT_GAS_PRICE_BN = new BN(20000000000, '10')
-const DEFAULT_GAS_PRICE = DEFAULT_GAS_PRICE_BN.toString(16)
-
 const MIN_GAS_PRICE_BN = new BN(20000000)
 
 
@@ -373,12 +370,16 @@ PendingTx.prototype.isValid = function () {
 }
 
 PendingTx.prototype.calculateGas = function () {
+  const state = this.state
+  const props = this.props
+  const txData = props.txData
+
   const txMeta = this.gatherParams()
   log.debug(`pending-tx-details calculating gas for ${JSON.stringify(txMeta)}`)
 
   const txParams = txMeta.txParams
   const gasCost = new BN(ethUtil.stripHexPrefix(txParams.gas || txMeta.estimatedGas), 16)
-  const gasPrice = new BN(ethUtil.stripHexPrefix(txParams.gasPrice || DEFAULT_GAS_PRICE), 16)
+  const gasPrice = (state.gasPrice === undefined) ? txData.gasPrice : state.gasPrice
 
   const valid = !gasPrice.lt(MIN_GAS_PRICE_BN)
   this.validChanged(valid)
-- 
cgit v1.2.3


From 018b1d006f30f7022252c39849abaf8be6fffa45 Mon Sep 17 00:00:00 2001
From: Dan Finlay <dan@danfinlay.com>
Date: Thu, 23 Mar 2017 15:14:18 -0700
Subject: Make reset button clear errors

---
 ui/app/components/pending-tx.js | 1 +
 1 file changed, 1 insertion(+)

(limited to 'ui/app/components/pending-tx.js')

diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js
index c0786d83e..b2195804e 100644
--- a/ui/app/components/pending-tx.js
+++ b/ui/app/components/pending-tx.js
@@ -414,6 +414,7 @@ PendingTx.prototype.resetGasFields = function () {
   this.setState({
     gas: txData.txParams.gas,
     gasPrice: txData.gasPrice,
+    valid: true,
   })
 }
 
-- 
cgit v1.2.3


From 3400ed0955b7f31ddb0be182736fc1e7ae20d4da Mon Sep 17 00:00:00 2001
From: Dan Finlay <dan@danfinlay.com>
Date: Thu, 23 Mar 2017 16:02:40 -0700
Subject: 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.
---
 ui/app/components/pending-tx.js | 28 ++++++++++++++++++----------
 1 file changed, 18 insertions(+), 10 deletions(-)

(limited to 'ui/app/components/pending-tx.js')

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
-- 
cgit v1.2.3


From 9bea31a402d0b343bae6a9ef055efa2b83be9071 Mon Sep 17 00:00:00 2001
From: Dan Finlay <dan@danfinlay.com>
Date: Thu, 23 Mar 2017 16:36:33 -0700
Subject: Fix initial tx fee estimation

---
 ui/app/components/pending-tx.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

(limited to 'ui/app/components/pending-tx.js')

diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js
index 82d9b9fe7..9a3ef272d 100644
--- a/ui/app/components/pending-tx.js
+++ b/ui/app/components/pending-tx.js
@@ -44,11 +44,13 @@ PendingTx.prototype.render = function () {
   const account = props.accounts[address]
   const balance = account ? account.balance : '0x0'
 
+
   const gas = (state.gas === undefined) ? txParams.gas : state.gas
   const gasPrice = (state.gasPrice === undefined) ? txData.gasPrice : state.gasPrice
+  const gasBn = new BN(gas, 16)
+  const gasPriceBn = new BN(gasPrice, 16)
 
-  const txFee = state.txFee || txData.txFee || ''
-  const txFeeBn = new BN(txFee, 16)
+  const txFeeBn = gasBn.mul(gasPriceBn)
   const maxCost = state.maxCost || txData.maxCost || ''
   const dataLength = txParams.data ? (txParams.data.length - 2) / 2 : 0
   const imageify = props.imageifyIdenticons === undefined ? true : props.imageifyIdenticons
@@ -380,7 +382,7 @@ PendingTx.prototype.calculateGas = function () {
 
   const txParams = txMeta.txParams
   const gasLimit = new BN(ethUtil.stripHexPrefix(txParams.gas || txMeta.estimatedGas), 16)
-  const gasPriceHex = state.gasPrice || txData.gasPrice
+  const gasPriceHex = (state.gasPrice === undefined) ? txData.gasPrice : state.gasPrice
   const gasPrice = new BN(ethUtil.stripHexPrefix(gasPriceHex), 16)
 
   const valid = !gasPrice.lt(MIN_GAS_PRICE_BN)
-- 
cgit v1.2.3


From 6a46e9ce0662413f6351756658b2bae8a895a33b Mon Sep 17 00:00:00 2001
From: Dan Finlay <dan@danfinlay.com>
Date: Thu, 23 Mar 2017 17:00:59 -0700
Subject: Make gas calculations on render more consistent

---
 ui/app/components/pending-tx.js | 26 ++++++++++++++++----------
 1 file changed, 16 insertions(+), 10 deletions(-)

(limited to 'ui/app/components/pending-tx.js')

diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js
index 9a3ef272d..2f9e9885b 100644
--- a/ui/app/components/pending-tx.js
+++ b/ui/app/components/pending-tx.js
@@ -21,40 +21,46 @@ const MIN_GAS_PRICE_BN = new BN(20000000)
 module.exports = connect(mapStateToProps)(PendingTx)
 
 function mapStateToProps (state) {
-  return {
-
-  }
+  return {}
 }
 
 inherits(PendingTx, Component)
 function PendingTx () {
   Component.call(this)
-  this.state = { valid: true }
+  this.state = {
+    valid: true,
+    gas: null,
+    gasPrice: null,
+    txData: null,
+  }
 }
 
 PendingTx.prototype.render = function () {
   const props = this.props
-  const txData = props.txData
-
   const state = this.state
 
+  const txData = state.txData || props.txData
   const txParams = txData.txParams || {}
+
   const address = txParams.from || props.selectedAddress
   const identity = props.identities[address] || { address: address }
   const account = props.accounts[address]
   const balance = account ? account.balance : '0x0'
 
-
-  const gas = (state.gas === undefined) ? txParams.gas : state.gas
-  const gasPrice = (state.gasPrice === undefined) ? txData.gasPrice : state.gasPrice
+  const gas = state.gas || txParams.gas
+  const gasPrice = state.gasPrice || txData.gasPrice
   const gasBn = new BN(gas, 16)
   const gasPriceBn = new BN(gasPrice, 16)
 
   const txFeeBn = gasBn.mul(gasPriceBn)
-  const maxCost = state.maxCost || txData.maxCost || ''
+  const valueBn = new BN(ethUtil.stripHexPrefix(txParams.value), 16)
+  const maxCost = txFeeBn.add(valueBn)
+
   const dataLength = txParams.data ? (txParams.data.length - 2) / 2 : 0
   const imageify = props.imageifyIdenticons === undefined ? true : props.imageifyIdenticons
 
+  log.info(`rendering pending-tx form with gas limit ${gas.toString()}, gasPrice ${gasPrice.toString()}, `)
+
   this.inputs = []
 
   return (
-- 
cgit v1.2.3


From 0e74cf2cba206520dbb8d7cc7b2a989566317201 Mon Sep 17 00:00:00 2001
From: Dan Finlay <dan@danfinlay.com>
Date: Fri, 24 Mar 2017 09:45:03 -0700
Subject: Disable accept button when gas limit is too low

---
 ui/app/components/pending-tx.js | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

(limited to 'ui/app/components/pending-tx.js')

diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js
index 2f9e9885b..cfccf2a89 100644
--- a/ui/app/components/pending-tx.js
+++ b/ui/app/components/pending-tx.js
@@ -16,7 +16,7 @@ const nameForAddress = require('../../lib/contract-namer')
 const HexInput = require('./hex-as-decimal-input')
 
 const MIN_GAS_PRICE_BN = new BN(20000000)
-
+const MIN_GAS_LIMIT_BN = new BN(21000)
 
 module.exports = connect(mapStateToProps)(PendingTx)
 
@@ -164,7 +164,7 @@ PendingTx.prototype.render = function () {
                 h(HexInput, {
                   name: 'Gas Limit',
                   value: gas,
-                  min: 21000, // The hard lower limit for gas.
+                  min: MIN_GAS_LIMIT_BN.toString(10), // The hard lower limit for gas.
                   suffix: 'UNITS',
                   style: {
                     position: 'relative',
@@ -298,6 +298,7 @@ PendingTx.prototype.render = function () {
             },
           }, 'Reset'),
 
+          // Accept Button
           h('input.confirm.btn-green', {
             type: 'submit',
             value: 'ACCEPT',
@@ -374,10 +375,6 @@ PendingTx.prototype.componentDidUpdate = function (prevProps, previousState) {
   }
 }
 
-PendingTx.prototype.isValid = function () {
-  return this.state.valid
-}
-
 PendingTx.prototype.calculateGas = function () {
   const state = this.state
   const props = this.props
@@ -388,10 +385,10 @@ PendingTx.prototype.calculateGas = function () {
 
   const txParams = txMeta.txParams
   const gasLimit = new BN(ethUtil.stripHexPrefix(txParams.gas || txMeta.estimatedGas), 16)
-  const gasPriceHex = (state.gasPrice === undefined) ? txData.gasPrice : state.gasPrice
+  const gasPriceHex = state.gasPrice || txData.gasPrice
   const gasPrice = new BN(ethUtil.stripHexPrefix(gasPriceHex), 16)
 
-  const valid = !gasPrice.lt(MIN_GAS_PRICE_BN)
+  const valid = !gasPrice.lt(MIN_GAS_PRICE_BN) && !gasLimit.lt(MIN_GAS_LIMIT_BN)
   this.validChanged(valid)
 
   const txFee = gasLimit.mul(gasPrice)
-- 
cgit v1.2.3


From 8e7b5d6a13e949435fade115f5bf69897c340be1 Mon Sep 17 00:00:00 2001
From: Dan Finlay <dan@danfinlay.com>
Date: Fri, 24 Mar 2017 10:26:50 -0700
Subject: Remove unnecessary log

---
 ui/app/components/pending-tx.js | 2 --
 1 file changed, 2 deletions(-)

(limited to 'ui/app/components/pending-tx.js')

diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js
index cfccf2a89..bd3ec6377 100644
--- a/ui/app/components/pending-tx.js
+++ b/ui/app/components/pending-tx.js
@@ -59,8 +59,6 @@ PendingTx.prototype.render = function () {
   const dataLength = txParams.data ? (txParams.data.length - 2) / 2 : 0
   const imageify = props.imageifyIdenticons === undefined ? true : props.imageifyIdenticons
 
-  log.info(`rendering pending-tx form with gas limit ${gas.toString()}, gasPrice ${gasPrice.toString()}, `)
-
   this.inputs = []
 
   return (
-- 
cgit v1.2.3


From 5cc934f18ccb64d97f6046ecb1adee5860b3b3fa Mon Sep 17 00:00:00 2001
From: Dan Finlay <dan@danfinlay.com>
Date: Fri, 24 Mar 2017 12:50:39 -0700
Subject: Fix tx selecting bug

---
 ui/app/components/pending-tx.js | 1 +
 1 file changed, 1 insertion(+)

(limited to 'ui/app/components/pending-tx.js')

diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js
index bd3ec6377..5bb088af9 100644
--- a/ui/app/components/pending-tx.js
+++ b/ui/app/components/pending-tx.js
@@ -472,3 +472,4 @@ function forwardCarrat () {
 
   )
 }
+
-- 
cgit v1.2.3


From 81d3658343bbdf8dd85b175f759c372d9ee00fb8 Mon Sep 17 00:00:00 2001
From: Dan Finlay <dan@danfinlay.com>
Date: Tue, 28 Mar 2017 11:46:33 -0700
Subject: Improve UI gas calculation logic

- Now striping hex prefixed gas values, which may have been causing mis-estimation.
- Unified calculation logic to be entirely functional.
- Greatly simplified how the pending-tx form keeps updated form state.

Still needs a commit from @kumavis to ensure the background passes in a txMeta.txParams.gasPrice value.
---
 ui/app/components/pending-tx.js | 135 +++++++++++-----------------------------
 1 file changed, 37 insertions(+), 98 deletions(-)

(limited to 'ui/app/components/pending-tx.js')

diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js
index 5bb088af9..1b83f5043 100644
--- a/ui/app/components/pending-tx.js
+++ b/ui/app/components/pending-tx.js
@@ -2,11 +2,11 @@ const Component = require('react').Component
 const connect = require('react-redux').connect
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
-const extend = require('xtend')
 const actions = require('../actions')
 
 const ethUtil = require('ethereumjs-util')
 const BN = ethUtil.BN
+const hexToBn = require('../../../app/scripts/lib/hex-to-bn')
 
 const MiniAccountPanel = require('./mini-account-panel')
 const EthBalance = require('./eth-balance')
@@ -29,42 +29,43 @@ function PendingTx () {
   Component.call(this)
   this.state = {
     valid: true,
-    gas: null,
-    gasPrice: null,
     txData: null,
   }
 }
 
 PendingTx.prototype.render = function () {
   const props = this.props
-  const state = this.state
 
-  const txData = state.txData || props.txData
-  const txParams = txData.txParams || {}
+  const txMeta = this.gatherTxMeta()
+  const txParams = txMeta.txParams || {}
 
   const address = txParams.from || props.selectedAddress
   const identity = props.identities[address] || { address: address }
   const account = props.accounts[address]
   const balance = account ? account.balance : '0x0'
 
-  const gas = state.gas || txParams.gas
-  const gasPrice = state.gasPrice || txData.gasPrice
-  const gasBn = new BN(gas, 16)
-  const gasPriceBn = new BN(gasPrice, 16)
+  const gas = txParams.gas
+  const gasPrice = txParams.gasPrice
+
+  const gasBn = hexToBn(gas)
+  const gasPriceBn = hexToBn(gasPrice)
 
   const txFeeBn = gasBn.mul(gasPriceBn)
-  const valueBn = new BN(ethUtil.stripHexPrefix(txParams.value), 16)
+  const valueBn = hexToBn(txParams.value)
   const maxCost = txFeeBn.add(valueBn)
 
   const dataLength = txParams.data ? (txParams.data.length - 2) / 2 : 0
   const imageify = props.imageifyIdenticons === undefined ? true : props.imageifyIdenticons
 
+  const balanceBn = hexToBn(balance)
+  const insufficientBalance = balanceBn.lt(maxCost)
+
   this.inputs = []
 
   return (
 
     h('div', {
-      key: txData.id,
+      key: txMeta.id,
     }, [
 
       h('form#pending-tx-form', {
@@ -73,9 +74,8 @@ PendingTx.prototype.render = function () {
           const form = document.querySelector('form#pending-tx-form')
           const valid = form.checkValidity()
           this.setState({ valid })
-
           if (valid && this.verifyGasParams()) {
-            props.sendTransaction(txData, event)
+            props.sendTransaction(txMeta, event)
           } else {
             this.props.dispatch(actions.displayWarning('Invalid Gas Parameters'))
           }
@@ -162,7 +162,8 @@ PendingTx.prototype.render = function () {
                 h(HexInput, {
                   name: 'Gas Limit',
                   value: gas,
-                  min: MIN_GAS_LIMIT_BN.toString(10), // The hard lower limit for gas.
+                  // The hard lower limit for gas.
+                  min: MIN_GAS_LIMIT_BN.toString(10),
                   suffix: 'UNITS',
                   style: {
                     position: 'relative',
@@ -170,7 +171,9 @@ PendingTx.prototype.render = function () {
                   },
                   onChange: (newHex) => {
                     log.info(`Gas limit changed to ${newHex}`)
-                    this.setState({ gas: newHex })
+                    const txMeta = this.gatherTxMeta()
+                    txMeta.txParams.gas = newHex
+                    this.setState({ txData: txMeta })
                   },
                   ref: (hexInput) => { this.inputs.push(hexInput) },
                 }),
@@ -193,7 +196,9 @@ PendingTx.prototype.render = function () {
                   },
                   onChange: (newHex) => {
                     log.info(`Gas price changed to: ${newHex}`)
-                    this.setState({ gasPrice: newHex })
+                    const txMeta = this.gatherTxMeta()
+                    txMeta.txParams.gasPrice = newHex
+                    this.setState({ txData: txMeta })
                   },
                   ref: (hexInput) => { this.inputs.push(hexInput) },
                 }),
@@ -255,7 +260,7 @@ PendingTx.prototype.render = function () {
           }
         `),
 
-        txData.simulationFails ?
+        txMeta.simulationFails ?
           h('.error', {
             style: {
               marginLeft: 50,
@@ -264,7 +269,7 @@ PendingTx.prototype.render = function () {
           }, 'Transaction Error. Exception thrown in contract code.')
         : null,
 
-        props.insufficientBalance ?
+        insufficientBalance ?
           h('span.error', {
             style: {
               marginLeft: 50,
@@ -283,7 +288,7 @@ PendingTx.prototype.render = function () {
         }, [
 
 
-          props.insufficientBalance ?
+          insufficientBalance ?
             h('button', {
               onClick: props.buyEth,
             }, 'Buy Ether')
@@ -301,7 +306,7 @@ PendingTx.prototype.render = function () {
             type: 'submit',
             value: 'ACCEPT',
             style: { marginLeft: '10px' },
-            disabled: props.insufficientBalance || !this.state.valid,
+            disabled: insufficientBalance || !this.state.valid,
           }),
 
           h('button.cancel.btn-red', {
@@ -313,10 +318,6 @@ PendingTx.prototype.render = function () {
   )
 }
 
-PendingTx.prototype.validChanged = function (newValid) {
-  this.setState({ valid: newValid })
-}
-
 PendingTx.prototype.miniAccountPanelForRecipient = function () {
   const props = this.props
   const txData = props.txData
@@ -358,63 +359,8 @@ PendingTx.prototype.miniAccountPanelForRecipient = function () {
   }
 }
 
-PendingTx.prototype.componentDidUpdate = function (prevProps, previousState) {
-  log.debug(`pending-tx componentDidUpdate`)
-  const state = this.state || {}
-  const prevState = previousState || {}
-  const { gas, gasPrice } = state
-
-  // Only if gas or gasPrice changed:
-  if (!prevState ||
-      (gas !== prevState.gas ||
-      gasPrice !== prevState.gasPrice)) {
-    log.debug(`recalculating gas since prev state change: ${JSON.stringify({ prevState, state })}`)
-    this.calculateGas()
-  }
-}
-
-PendingTx.prototype.calculateGas = function () {
-  const state = this.state
-  const props = this.props
-  const txData = props.txData
-
-  const txMeta = this.gatherParams()
-  log.debug(`pending-tx calculating gas for ${JSON.stringify(txMeta)}`)
-
-  const txParams = txMeta.txParams
-  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) && !gasLimit.lt(MIN_GAS_LIMIT_BN)
-  this.validChanged(valid)
-
-  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')
-
-  txMeta.txFee = txFeeHex
-  txMeta.maxCost = maxCostHex
-  txMeta.txParams.gasPrice = gasPriceHex
-
-  const newState = {
-    txFee: '0x' + txFee.toString('hex'),
-    maxCost: '0x' + maxCost.toString('hex'),
-  }
-  log.info(`tx form updating local state with ${JSON.stringify(newState)}`)
-  this.setState(newState)
-
-  if (this.props.onTxChange) {
-    this.props.onTxChange(txMeta)
-  }
-}
-
 PendingTx.prototype.resetGasFields = function () {
   log.debug(`pending-tx resetGasFields`)
-  const txData = this.props.txData
 
   this.inputs.forEach((hexInput) => {
     if (hexInput) {
@@ -423,36 +369,29 @@ PendingTx.prototype.resetGasFields = function () {
   })
 
   this.setState({
-    gas: txData.txParams.gas,
-    gasPrice: txData.gasPrice,
+    txData: null,
     valid: true,
   })
 }
 
 // After a customizable state value has been updated,
-PendingTx.prototype.gatherParams = function () {
-  log.debug(`pending-tx gatherParams`)
+PendingTx.prototype.gatherTxMeta = function () {
+  log.debug(`pending-tx gatherTxMeta`)
   const props = this.props
-  const state = this.state || {}
+  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, {
-    gas,
-    gasPrice,
-  })
-  const resultTxMeta = extend(txData, {
-    txParams: resultTx,
-  })
-  log.debug(`UI has computed tx params ${JSON.stringify(resultTx)}`)
-  return resultTxMeta
+
+  log.debug(`UI has defaulted to tx meta ${JSON.stringify(txData)}`)
+  return txData
 }
 
 PendingTx.prototype.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)
+  return (
+    this._notZeroOrEmptyString(this.state.gas) &&
+    this._notZeroOrEmptyString(this.state.gasPrice)
+  )
 }
 
 PendingTx.prototype._notZeroOrEmptyString = function (obj) {
-- 
cgit v1.2.3


From 9ebc5ed33cd3450262c00ccdde9f617544dfa784 Mon Sep 17 00:00:00 2001
From: frankiebee <frankie.diamond@gmail.com>
Date: Mon, 24 Apr 2017 12:36:17 +0200
Subject: make buy button green

---
 ui/app/components/pending-tx.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'ui/app/components/pending-tx.js')

diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js
index 1b83f5043..4b28ae099 100644
--- a/ui/app/components/pending-tx.js
+++ b/ui/app/components/pending-tx.js
@@ -289,7 +289,7 @@ PendingTx.prototype.render = function () {
 
 
           insufficientBalance ?
-            h('button', {
+            h('button.btn-green', {
               onClick: props.buyEth,
             }, 'Buy Ether')
           : null,
-- 
cgit v1.2.3


From 80d8a4e73ef2d55dd9024f6e4f8cf94f263703cc Mon Sep 17 00:00:00 2001
From: Dan Finlay <dan@danfinlay.com>
Date: Sun, 7 May 2017 16:51:57 -0700
Subject: Input gas in gwei

Also enforces "safe low gas" minimum recommended by this article by eth-gas-station:
https://medium.com/@ethgasstation/the-safe-low-gas-price-fb44fdc85b91

Fixes #1381
---
 ui/app/components/pending-tx.js | 21 ++++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

(limited to 'ui/app/components/pending-tx.js')

diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js
index 4b28ae099..c381066a9 100644
--- a/ui/app/components/pending-tx.js
+++ b/ui/app/components/pending-tx.js
@@ -15,7 +15,9 @@ const addressSummary = util.addressSummary
 const nameForAddress = require('../../lib/contract-namer')
 const HexInput = require('./hex-as-decimal-input')
 
-const MIN_GAS_PRICE_BN = new BN(20000000)
+const MIN_GAS_PRICE_GWEI_BN = new BN(2)
+const GWEI_FACTOR = new BN(Math.pow(10, 9))
+const MIN_GAS_PRICE_BN = MIN_GAS_PRICE_GWEI_BN.mul(GWEI_FACTOR)
 const MIN_GAS_LIMIT_BN = new BN(21000)
 
 module.exports = connect(mapStateToProps)(PendingTx)
@@ -39,16 +41,20 @@ PendingTx.prototype.render = function () {
   const txMeta = this.gatherTxMeta()
   const txParams = txMeta.txParams || {}
 
+  // Account Details
   const address = txParams.from || props.selectedAddress
   const identity = props.identities[address] || { address: address }
   const account = props.accounts[address]
   const balance = account ? account.balance : '0x0'
 
+  // Gas
   const gas = txParams.gas
-  const gasPrice = txParams.gasPrice
-
   const gasBn = hexToBn(gas)
+
+  // Gas Price
+  const gasPrice = txParams.gasPrice || MIN_GAS_PRICE_BN.toString(16)
   const gasPriceBn = hexToBn(gasPrice)
+  const gasPriceGweiBn = gasPriceBn.div(new BN(Math.pow(10, 9)))
 
   const txFeeBn = gasBn.mul(gasPriceBn)
   const valueBn = hexToBn(txParams.value)
@@ -187,17 +193,18 @@ PendingTx.prototype.render = function () {
               }, [
                 h(HexInput, {
                   name: 'Gas Price',
-                  value: gasPrice,
-                  suffix: 'WEI',
-                  min: MIN_GAS_PRICE_BN.toString(10),
+                  value: gasPriceGweiBn.toString(16),
+                  suffix: 'GWEI',
+                  min: MIN_GAS_PRICE_GWEI_BN.toString(10),
                   style: {
                     position: 'relative',
                     top: '5px',
                   },
                   onChange: (newHex) => {
                     log.info(`Gas price changed to: ${newHex}`)
+                    const inWei = hexToBn(newHex).mul(GWEI_FACTOR)
                     const txMeta = this.gatherTxMeta()
-                    txMeta.txParams.gasPrice = newHex
+                    txMeta.txParams.gasPrice = inWei.toString(16)
                     this.setState({ txData: txMeta })
                   },
                   ref: (hexInput) => { this.inputs.push(hexInput) },
-- 
cgit v1.2.3


From c7b2f2f2e986981496168dbf57cee787882ffd59 Mon Sep 17 00:00:00 2001
From: Dan Finlay <dan@danfinlay.com>
Date: Mon, 8 May 2017 13:34:01 -0700
Subject: Cleanup

---
 ui/app/components/pending-tx.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'ui/app/components/pending-tx.js')

diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js
index c381066a9..71d4d767a 100644
--- a/ui/app/components/pending-tx.js
+++ b/ui/app/components/pending-tx.js
@@ -16,7 +16,7 @@ const nameForAddress = require('../../lib/contract-namer')
 const HexInput = require('./hex-as-decimal-input')
 
 const MIN_GAS_PRICE_GWEI_BN = new BN(2)
-const GWEI_FACTOR = new BN(Math.pow(10, 9))
+const GWEI_FACTOR = new BN(1e9)
 const MIN_GAS_PRICE_BN = MIN_GAS_PRICE_GWEI_BN.mul(GWEI_FACTOR)
 const MIN_GAS_LIMIT_BN = new BN(21000)
 
@@ -54,7 +54,7 @@ PendingTx.prototype.render = function () {
   // Gas Price
   const gasPrice = txParams.gasPrice || MIN_GAS_PRICE_BN.toString(16)
   const gasPriceBn = hexToBn(gasPrice)
-  const gasPriceGweiBn = gasPriceBn.div(new BN(Math.pow(10, 9)))
+  const gasPriceGweiBn = gasPriceBn.div(GWEI_FACTOR)
 
   const txFeeBn = gasBn.mul(gasPriceBn)
   const valueBn = hexToBn(txParams.value)
-- 
cgit v1.2.3


From d61b587f3014823fcd23b1e5becce7949e88d952 Mon Sep 17 00:00:00 2001
From: Kevin Serrano <kevin.serrano@consensys.net>
Date: Mon, 8 May 2017 16:02:41 -0700
Subject: Redefine txmeta when submitting.

---
 ui/app/components/pending-tx.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'ui/app/components/pending-tx.js')

diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js
index 71d4d767a..5ea885195 100644
--- a/ui/app/components/pending-tx.js
+++ b/ui/app/components/pending-tx.js
@@ -76,6 +76,7 @@ PendingTx.prototype.render = function () {
 
       h('form#pending-tx-form', {
         onSubmit: (event) => {
+          const txMeta = this.gatherTxMeta()
           event.preventDefault()
           const form = document.querySelector('form#pending-tx-form')
           const valid = form.checkValidity()
@@ -418,4 +419,3 @@ function forwardCarrat () {
 
   )
 }
-
-- 
cgit v1.2.3


From d737bd1633977174ddf3d3248ee6873cc3adca8e Mon Sep 17 00:00:00 2001
From: Dan Finlay <dan@danfinlay.com>
Date: Wed, 10 May 2017 17:26:09 -0700
Subject: Break up pending-tx component for better unit testability

---
 ui/app/components/pending-tx.js | 77 +++++++++++++++++++++--------------------
 1 file changed, 39 insertions(+), 38 deletions(-)

(limited to 'ui/app/components/pending-tx.js')

diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js
index 5ea885195..6b8f16dae 100644
--- a/ui/app/components/pending-tx.js
+++ b/ui/app/components/pending-tx.js
@@ -1,5 +1,4 @@
 const Component = require('react').Component
-const connect = require('react-redux').connect
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const actions = require('../actions')
@@ -20,12 +19,7 @@ const GWEI_FACTOR = new BN(1e9)
 const MIN_GAS_PRICE_BN = MIN_GAS_PRICE_GWEI_BN.mul(GWEI_FACTOR)
 const MIN_GAS_LIMIT_BN = new BN(21000)
 
-module.exports = connect(mapStateToProps)(PendingTx)
-
-function mapStateToProps (state) {
-  return {}
-}
-
+module.exports = PendingTx
 inherits(PendingTx, Component)
 function PendingTx () {
   Component.call(this)
@@ -37,7 +31,6 @@ function PendingTx () {
 
 PendingTx.prototype.render = function () {
   const props = this.props
-
   const txMeta = this.gatherTxMeta()
   const txParams = txMeta.txParams || {}
 
@@ -61,7 +54,6 @@ PendingTx.prototype.render = function () {
   const maxCost = txFeeBn.add(valueBn)
 
   const dataLength = txParams.data ? (txParams.data.length - 2) / 2 : 0
-  const imageify = props.imageifyIdenticons === undefined ? true : props.imageifyIdenticons
 
   const balanceBn = hexToBn(balance)
   const insufficientBalance = balanceBn.lt(maxCost)
@@ -75,18 +67,8 @@ PendingTx.prototype.render = function () {
     }, [
 
       h('form#pending-tx-form', {
-        onSubmit: (event) => {
-          const txMeta = this.gatherTxMeta()
-          event.preventDefault()
-          const form = document.querySelector('form#pending-tx-form')
-          const valid = form.checkValidity()
-          this.setState({ valid })
-          if (valid && this.verifyGasParams()) {
-            props.sendTransaction(txMeta, event)
-          } else {
-            this.props.dispatch(actions.displayWarning('Invalid Gas Parameters'))
-          }
-        },
+        onSubmit: this.onSubmit.bind(this),
+
       }, [
 
         // tx info
@@ -100,7 +82,6 @@ PendingTx.prototype.render = function () {
 
             h(MiniAccountPanel, {
               imageSeed: address,
-              imageifyIdenticons: imageify,
               picOrder: 'right',
             }, [
               h('span.font-small', {
@@ -176,12 +157,8 @@ PendingTx.prototype.render = function () {
                     position: 'relative',
                     top: '5px',
                   },
-                  onChange: (newHex) => {
-                    log.info(`Gas limit changed to ${newHex}`)
-                    const txMeta = this.gatherTxMeta()
-                    txMeta.txParams.gas = newHex
-                    this.setState({ txData: txMeta })
-                  },
+                  onChange: this.gasLimitChanged.bind(this),
+
                   ref: (hexInput) => { this.inputs.push(hexInput) },
                 }),
               ]),
@@ -201,13 +178,7 @@ PendingTx.prototype.render = function () {
                     position: 'relative',
                     top: '5px',
                   },
-                  onChange: (newHex) => {
-                    log.info(`Gas price changed to: ${newHex}`)
-                    const inWei = hexToBn(newHex).mul(GWEI_FACTOR)
-                    const txMeta = this.gatherTxMeta()
-                    txMeta.txParams.gasPrice = inWei.toString(16)
-                    this.setState({ txData: txMeta })
-                  },
+                  onChange: this.gasPriceChanged.bind(this),
                   ref: (hexInput) => { this.inputs.push(hexInput) },
                 }),
               ]),
@@ -331,13 +302,11 @@ PendingTx.prototype.miniAccountPanelForRecipient = function () {
   const txData = props.txData
   const txParams = txData.txParams || {}
   const isContractDeploy = !('to' in txParams)
-  const imageify = props.imageifyIdenticons === undefined ? true : props.imageifyIdenticons
 
   // If it's not a contract deploy, send to the account
   if (!isContractDeploy) {
     return h(MiniAccountPanel, {
       imageSeed: txParams.to,
-      imageifyIdenticons: imageify,
       picOrder: 'left',
     }, [
       h('span.font-small', {
@@ -353,7 +322,6 @@ PendingTx.prototype.miniAccountPanelForRecipient = function () {
     ])
   } else {
     return h(MiniAccountPanel, {
-      imageifyIdenticons: imageify,
       picOrder: 'left',
     }, [
 
@@ -367,6 +335,21 @@ PendingTx.prototype.miniAccountPanelForRecipient = function () {
   }
 }
 
+PendingTx.prototype.gasPriceChanged = function (newHex) {
+  log.info(`Gas price changed to: ${newHex}`)
+  const inWei = hexToBn(newHex).mul(GWEI_FACTOR)
+  const txMeta = this.gatherTxMeta()
+  txMeta.txParams.gasPrice = inWei.toString(16)
+  this.setState({ txData: txMeta })
+}
+
+PendingTx.prototype.gasLimitChanged = function (newHex) {
+  log.info(`Gas limit changed to ${newHex}`)
+  const txMeta = this.gatherTxMeta()
+  txMeta.txParams.gas = newHex
+  this.setState({ txData: txMeta })
+}
+
 PendingTx.prototype.resetGasFields = function () {
   log.debug(`pending-tx resetGasFields`)
 
@@ -382,6 +365,24 @@ PendingTx.prototype.resetGasFields = function () {
   })
 }
 
+PendingTx.prototype.onSubmit = function (event) {
+  event.preventDefault()
+  const txMeta = this.gatherTxMeta()
+  const valid = this.checkValidity()
+  this.setState({ valid })
+  if (valid && this.verifyGasParams()) {
+    this.props.sendTransaction(txMeta, event)
+  } else {
+    this.props.dispatch(actions.displayWarning('Invalid Gas Parameters'))
+  }
+}
+
+PendingTx.prototype.checkValidity = function() {
+  const form = document.querySelector('form#pending-tx-form')
+  const valid = form.checkValidity()
+  return valid
+}
+
 // After a customizable state value has been updated,
 PendingTx.prototype.gatherTxMeta = function () {
   log.debug(`pending-tx gatherTxMeta`)
-- 
cgit v1.2.3


From 19db11856bef65c38d96eb1d6084d88ab6e7eebc Mon Sep 17 00:00:00 2001
From: Dan Finlay <dan@danfinlay.com>
Date: Fri, 12 May 2017 12:41:31 -0700
Subject: Remove redux dependency from eth-balance and its dependent tree

For better unit testability of the conf-tx view.
---
 ui/app/components/pending-tx.js | 2 ++
 1 file changed, 2 insertions(+)

(limited to 'ui/app/components/pending-tx.js')

diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js
index 6b8f16dae..fb555b821 100644
--- a/ui/app/components/pending-tx.js
+++ b/ui/app/components/pending-tx.js
@@ -31,6 +31,7 @@ function PendingTx () {
 
 PendingTx.prototype.render = function () {
   const props = this.props
+  const conversionRate = props.conversionRate
   const txMeta = this.gatherTxMeta()
   const txParams = txMeta.txParams || {}
 
@@ -102,6 +103,7 @@ PendingTx.prototype.render = function () {
               }, [
                 h(EthBalance, {
                   value: balance,
+                  conversionRate,
                   inline: true,
                   labelColor: '#F7861C',
                 }),
-- 
cgit v1.2.3


From 4b341e6a955d1fa71decfb021a86e7da09a933b0 Mon Sep 17 00:00:00 2001
From: Dan Finlay <dan@danfinlay.com>
Date: Mon, 15 May 2017 15:07:38 -0700
Subject: Got test failing nearly correctly

---
 ui/app/components/pending-tx.js | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

(limited to 'ui/app/components/pending-tx.js')

diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js
index fb555b821..d31ccf2e5 100644
--- a/ui/app/components/pending-tx.js
+++ b/ui/app/components/pending-tx.js
@@ -380,11 +380,22 @@ PendingTx.prototype.onSubmit = function (event) {
 }
 
 PendingTx.prototype.checkValidity = function() {
-  const form = document.querySelector('form#pending-tx-form')
+  const form = this.getFormEl()
+  console.log("check validity got form el:")
+  console.dir(form)
   const valid = form.checkValidity()
   return valid
 }
 
+PendingTx.prototype.getFormEl = function() {
+  const form = document.querySelector('form#pending-tx-form')
+  // Stub out form for unit tests:
+  if (!form) {
+    return { checkValidity() { return true } }
+  }
+  return form
+}
+
 // After a customizable state value has been updated,
 PendingTx.prototype.gatherTxMeta = function () {
   log.debug(`pending-tx gatherTxMeta`)
-- 
cgit v1.2.3


From 75d9b5619c1b7e0949136702e7301ed0bb648f09 Mon Sep 17 00:00:00 2001
From: Dan Finlay <dan@danfinlay.com>
Date: Mon, 15 May 2017 15:21:28 -0700
Subject: Verify updating gas value updates

---
 ui/app/components/pending-tx.js | 2 --
 1 file changed, 2 deletions(-)

(limited to 'ui/app/components/pending-tx.js')

diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js
index d31ccf2e5..bbdac3bc4 100644
--- a/ui/app/components/pending-tx.js
+++ b/ui/app/components/pending-tx.js
@@ -381,8 +381,6 @@ PendingTx.prototype.onSubmit = function (event) {
 
 PendingTx.prototype.checkValidity = function() {
   const form = this.getFormEl()
-  console.log("check validity got form el:")
-  console.dir(form)
   const valid = form.checkValidity()
   return valid
 }
-- 
cgit v1.2.3


From fc7b4cb4bc5141f920131f8d79c56ca9ff3b6d2c Mon Sep 17 00:00:00 2001
From: Dan Finlay <dan@danfinlay.com>
Date: Mon, 15 May 2017 15:22:49 -0700
Subject: Linted

---
 ui/app/components/pending-tx.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

(limited to 'ui/app/components/pending-tx.js')

diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js
index bbdac3bc4..b084a1d2a 100644
--- a/ui/app/components/pending-tx.js
+++ b/ui/app/components/pending-tx.js
@@ -379,17 +379,17 @@ PendingTx.prototype.onSubmit = function (event) {
   }
 }
 
-PendingTx.prototype.checkValidity = function() {
+PendingTx.prototype.checkValidity = function () {
   const form = this.getFormEl()
   const valid = form.checkValidity()
   return valid
 }
 
-PendingTx.prototype.getFormEl = function() {
+PendingTx.prototype.getFormEl = function () {
   const form = document.querySelector('form#pending-tx-form')
   // Stub out form for unit tests:
   if (!form) {
-    return { checkValidity() { return true } }
+    return { checkValidity () { return true } }
   }
   return form
 }
-- 
cgit v1.2.3


From b4e6ea9db787cbf7839d9caad6e1ea0385cc588e Mon Sep 17 00:00:00 2001
From: Dan Finlay <dan@danfinlay.com>
Date: Tue, 16 May 2017 11:34:53 -0700
Subject: Fix fiat rendering

Fixes #1439.

When reorganizing fiat-value component to not use global state, had missed its necessary `currentCurrency` parameter.

This now passes it in wherever it's used.
---
 ui/app/components/pending-tx.js | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

(limited to 'ui/app/components/pending-tx.js')

diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js
index b084a1d2a..0d1f06ba6 100644
--- a/ui/app/components/pending-tx.js
+++ b/ui/app/components/pending-tx.js
@@ -31,6 +31,8 @@ function PendingTx () {
 
 PendingTx.prototype.render = function () {
   const props = this.props
+  const { currentCurrency } = props
+
   const conversionRate = props.conversionRate
   const txMeta = this.gatherTxMeta()
   const txParams = txMeta.txParams || {}
@@ -104,6 +106,7 @@ PendingTx.prototype.render = function () {
                 h(EthBalance, {
                   value: balance,
                   conversionRate,
+                  currentCurrency,
                   inline: true,
                   labelColor: '#F7861C',
                 }),
@@ -141,7 +144,7 @@ PendingTx.prototype.render = function () {
             // in the way that gas and gasLimit currently are.
             h('.row', [
               h('.cell.label', 'Amount'),
-              h(EthBalance, { value: txParams.value }),
+              h(EthBalance, { value: txParams.value, currentCurrency, conversionRate }),
             ]),
 
             // Gas Limit (customizable)
@@ -189,7 +192,7 @@ PendingTx.prototype.render = function () {
             // Max Transaction Fee (calculated)
             h('.cell.row', [
               h('.cell.label', 'Max Transaction Fee'),
-              h(EthBalance, { value: txFeeBn.toString(16) }),
+              h(EthBalance, { value: txFeeBn.toString(16), currentCurrency, conversionRate }),
             ]),
 
             h('.cell.row', {
@@ -208,6 +211,8 @@ PendingTx.prototype.render = function () {
               }, [
                 h(EthBalance, {
                   value: maxCost.toString(16),
+                  currentCurrency,
+                  conversionRate,
                   inline: true,
                   labelColor: 'black',
                   fontSize: '16px',
-- 
cgit v1.2.3


From 53b8d18a5f649c73a58a96e36a9458903d8af6aa Mon Sep 17 00:00:00 2001
From: Kevin Serrano <kevin.serrano@consensys.net>
Date: Tue, 16 May 2017 15:30:22 -0700
Subject: Complete transition into BN.

---
 ui/app/components/pending-tx.js | 27 ++++++++++++++-------------
 1 file changed, 14 insertions(+), 13 deletions(-)

(limited to 'ui/app/components/pending-tx.js')

diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js
index 5ea885195..95d345a3d 100644
--- a/ui/app/components/pending-tx.js
+++ b/ui/app/components/pending-tx.js
@@ -13,7 +13,7 @@ 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')
+const BNInput = require('./bn-as-decimal-input')
 
 const MIN_GAS_PRICE_GWEI_BN = new BN(2)
 const GWEI_FACTOR = new BN(1e9)
@@ -54,7 +54,6 @@ PendingTx.prototype.render = function () {
   // Gas Price
   const gasPrice = txParams.gasPrice || MIN_GAS_PRICE_BN.toString(16)
   const gasPriceBn = hexToBn(gasPrice)
-  const gasPriceGweiBn = gasPriceBn.div(GWEI_FACTOR)
 
   const txFeeBn = gasBn.mul(gasPriceBn)
   const valueBn = hexToBn(txParams.value)
@@ -166,9 +165,10 @@ PendingTx.prototype.render = function () {
               h('.cell.label', 'Gas Limit'),
               h('.cell.value', {
               }, [
-                h(HexInput, {
+                h(BNInput, {
                   name: 'Gas Limit',
-                  value: gas,
+                  value: gasBn,
+                  precision: 0,
                   // The hard lower limit for gas.
                   min: MIN_GAS_LIMIT_BN.toString(10),
                   suffix: 'UNITS',
@@ -176,10 +176,10 @@ PendingTx.prototype.render = function () {
                     position: 'relative',
                     top: '5px',
                   },
-                  onChange: (newHex) => {
-                    log.info(`Gas limit changed to ${newHex}`)
+                  onChange: (newBN) => {
+                    log.info(`Gas limit changed to ${newBN.toString(10)}`)
                     const txMeta = this.gatherTxMeta()
-                    txMeta.txParams.gas = newHex
+                    txMeta.txParams.gas = '0x' + newBN.toString('hex')
                     this.setState({ txData: txMeta })
                   },
                   ref: (hexInput) => { this.inputs.push(hexInput) },
@@ -192,20 +192,20 @@ PendingTx.prototype.render = function () {
               h('.cell.label', 'Gas Price'),
               h('.cell.value', {
               }, [
-                h(HexInput, {
+                h(BNInput, {
                   name: 'Gas Price',
-                  value: gasPriceGweiBn.toString(16),
+                  value: gasPriceBn,
+                  precision: 9,
                   suffix: 'GWEI',
                   min: MIN_GAS_PRICE_GWEI_BN.toString(10),
                   style: {
                     position: 'relative',
                     top: '5px',
                   },
-                  onChange: (newHex) => {
-                    log.info(`Gas price changed to: ${newHex}`)
-                    const inWei = hexToBn(newHex).mul(GWEI_FACTOR)
+                  onChange: (newBN) => {
+                    log.info(`Gas price changed to: ${newBN.toString(10)}`)
                     const txMeta = this.gatherTxMeta()
-                    txMeta.txParams.gasPrice = inWei.toString(16)
+                    txMeta.txParams.gasPrice = '0x' + newBN.toString('hex')
                     this.setState({ txData: txMeta })
                   },
                   ref: (hexInput) => { this.inputs.push(hexInput) },
@@ -368,6 +368,7 @@ PendingTx.prototype.miniAccountPanelForRecipient = function () {
 }
 
 PendingTx.prototype.resetGasFields = function () {
+
   log.debug(`pending-tx resetGasFields`)
 
   this.inputs.forEach((hexInput) => {
-- 
cgit v1.2.3


From d8130f1effc31a866476e10153bd854709ae23be Mon Sep 17 00:00:00 2001
From: Kevin Serrano <kevin.serrano@consensys.net>
Date: Tue, 16 May 2017 16:20:58 -0700
Subject: Fix reset button.

---
 ui/app/components/pending-tx.js | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

(limited to 'ui/app/components/pending-tx.js')

diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js
index 95d345a3d..5c8d81d07 100644
--- a/ui/app/components/pending-tx.js
+++ b/ui/app/components/pending-tx.js
@@ -180,7 +180,7 @@ PendingTx.prototype.render = function () {
                     log.info(`Gas limit changed to ${newBN.toString(10)}`)
                     const txMeta = this.gatherTxMeta()
                     txMeta.txParams.gas = '0x' + newBN.toString('hex')
-                    this.setState({ txData: txMeta })
+                    this.setState({ txData: cloneObj(txMeta) })
                   },
                   ref: (hexInput) => { this.inputs.push(hexInput) },
                 }),
@@ -206,7 +206,7 @@ PendingTx.prototype.render = function () {
                     log.info(`Gas price changed to: ${newBN.toString(10)}`)
                     const txMeta = this.gatherTxMeta()
                     txMeta.txParams.gasPrice = '0x' + newBN.toString('hex')
-                    this.setState({ txData: txMeta })
+                    this.setState({ txData: cloneObj(txMeta) })
                   },
                   ref: (hexInput) => { this.inputs.push(hexInput) },
                 }),
@@ -388,7 +388,7 @@ PendingTx.prototype.gatherTxMeta = function () {
   log.debug(`pending-tx gatherTxMeta`)
   const props = this.props
   const state = this.state
-  const txData = state.txData || props.txData
+  const txData = cloneObj(state.txData) || cloneObj(props.txData)
 
   log.debug(`UI has defaulted to tx meta ${JSON.stringify(txData)}`)
   return txData
@@ -409,7 +409,6 @@ PendingTx.prototype._notZeroOrEmptyString = function (obj) {
 
 function forwardCarrat () {
   return (
-
     h('img', {
       src: 'images/forward-carrat.svg',
       style: {
@@ -417,6 +416,9 @@ function forwardCarrat () {
         height: '37px',
       },
     })
-
   )
 }
+
+function cloneObj (obj) {
+  return JSON.parse(JSON.stringify(obj))
+}
-- 
cgit v1.2.3


From 717db41d0b7bcd7b6f88a5c460aa4dcbc5828116 Mon Sep 17 00:00:00 2001
From: Kevin Serrano <kevin.serrano@consensys.net>
Date: Wed, 17 May 2017 14:18:01 -0700
Subject: Modify test, replace clone package.

---
 ui/app/components/pending-tx.js | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

(limited to 'ui/app/components/pending-tx.js')

diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js
index 37a3a3bf3..5b238187c 100644
--- a/ui/app/components/pending-tx.js
+++ b/ui/app/components/pending-tx.js
@@ -2,6 +2,7 @@ const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const actions = require('../actions')
+const clone = require('clone')
 
 const ethUtil = require('ethereumjs-util')
 const BN = ethUtil.BN
@@ -347,14 +348,14 @@ PendingTx.prototype.gasPriceChanged = function (newBN) {
   log.info(`Gas price changed to: ${newBN.toString(10)}`)
   const txMeta = this.gatherTxMeta()
   txMeta.txParams.gasPrice = '0x' + newBN.toString('hex')
-  this.setState({ txData: cloneObj(txMeta) })
+  this.setState({ txData: clone(txMeta) })
 }
 
 PendingTx.prototype.gasLimitChanged = function (newBN) {
   log.info(`Gas limit changed to ${newBN.toString(10)}`)
   const txMeta = this.gatherTxMeta()
   txMeta.txParams.gas = '0x' + newBN.toString('hex')
-  this.setState({ txData: cloneObj(txMeta) })
+  this.setState({ txData: clone(txMeta) })
 }
 
 PendingTx.prototype.resetGasFields = function () {
@@ -405,7 +406,7 @@ PendingTx.prototype.gatherTxMeta = function () {
   log.debug(`pending-tx gatherTxMeta`)
   const props = this.props
   const state = this.state
-  const txData = cloneObj(state.txData) || cloneObj(props.txData)
+  const txData = clone(state.txData) || clone(props.txData)
 
   log.debug(`UI has defaulted to tx meta ${JSON.stringify(txData)}`)
   return txData
@@ -435,7 +436,3 @@ function forwardCarrat () {
     })
   )
 }
-
-function cloneObj (obj) {
-  return JSON.parse(JSON.stringify(obj))
-}
-- 
cgit v1.2.3


From 31d17c9e25458cd47f8c18ec3b967aecff236ba6 Mon Sep 17 00:00:00 2001
From: Kevin Serrano <kevin.serrano@consensys.net>
Date: Tue, 23 May 2017 14:26:37 -0700
Subject: Fix test, create new value for precision/scale

---
 ui/app/components/pending-tx.js | 2 ++
 1 file changed, 2 insertions(+)

(limited to 'ui/app/components/pending-tx.js')

diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js
index 5b238187c..eed0fd9ae 100644
--- a/ui/app/components/pending-tx.js
+++ b/ui/app/components/pending-tx.js
@@ -156,6 +156,7 @@ PendingTx.prototype.render = function () {
                   name: 'Gas Limit',
                   value: gasBn,
                   precision: 0,
+                  scale: 0,
                   // The hard lower limit for gas.
                   min: MIN_GAS_LIMIT_BN.toString(10),
                   suffix: 'UNITS',
@@ -179,6 +180,7 @@ PendingTx.prototype.render = function () {
                   name: 'Gas Price',
                   value: gasPriceBn,
                   precision: 9,
+                  scale: 9,
                   suffix: 'GWEI',
                   min: MIN_GAS_PRICE_GWEI_BN.toString(10),
                   style: {
-- 
cgit v1.2.3


From 10ca3b6467af2bea723e661160ba5cf2a41ab3b0 Mon Sep 17 00:00:00 2001
From: Kevin Serrano <kevin.serrano@consensys.net>
Date: Wed, 24 May 2017 10:13:43 -0700
Subject: Fix bug where submit was enabled when invalid params were filled out.

---
 ui/app/components/pending-tx.js | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

(limited to 'ui/app/components/pending-tx.js')

diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js
index eed0fd9ae..8e63f5c76 100644
--- a/ui/app/components/pending-tx.js
+++ b/ui/app/components/pending-tx.js
@@ -346,18 +346,24 @@ PendingTx.prototype.miniAccountPanelForRecipient = function () {
   }
 }
 
-PendingTx.prototype.gasPriceChanged = function (newBN) {
+PendingTx.prototype.gasPriceChanged = function (newBN, valid) {
   log.info(`Gas price changed to: ${newBN.toString(10)}`)
   const txMeta = this.gatherTxMeta()
   txMeta.txParams.gasPrice = '0x' + newBN.toString('hex')
-  this.setState({ txData: clone(txMeta) })
+  this.setState({
+    txData: clone(txMeta),
+    valid,
+  })
 }
 
-PendingTx.prototype.gasLimitChanged = function (newBN) {
+PendingTx.prototype.gasLimitChanged = function (newBN, valid) {
   log.info(`Gas limit changed to ${newBN.toString(10)}`)
   const txMeta = this.gatherTxMeta()
   txMeta.txParams.gas = '0x' + newBN.toString('hex')
-  this.setState({ txData: clone(txMeta) })
+  this.setState({
+    txData: clone(txMeta),
+    valid,
+  })
 }
 
 PendingTx.prototype.resetGasFields = function () {
-- 
cgit v1.2.3


From 9554788c14eab7be51abe0496bab17f9fe40291b Mon Sep 17 00:00:00 2001
From: Kevin Serrano <kevin.serrano@consensys.net>
Date: Wed, 24 May 2017 11:02:58 -0700
Subject: Minor cleanup of lint

---
 ui/app/components/pending-tx.js | 1 -
 1 file changed, 1 deletion(-)

(limited to 'ui/app/components/pending-tx.js')

diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js
index 8e63f5c76..d66d98dd5 100644
--- a/ui/app/components/pending-tx.js
+++ b/ui/app/components/pending-tx.js
@@ -367,7 +367,6 @@ PendingTx.prototype.gasLimitChanged = function (newBN, valid) {
 }
 
 PendingTx.prototype.resetGasFields = function () {
-
   log.debug(`pending-tx resetGasFields`)
 
   this.inputs.forEach((hexInput) => {
-- 
cgit v1.2.3


From 51b5e2f6e74a91198816afee8ddaf468ab7ab583 Mon Sep 17 00:00:00 2001
From: Kevin Serrano <kevin.serrano@consensys.net>
Date: Wed, 24 May 2017 16:18:37 -0700
Subject: Add max gas limit to UI

---
 ui/app/components/pending-tx.js | 2 ++
 1 file changed, 2 insertions(+)

(limited to 'ui/app/components/pending-tx.js')

diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js
index d66d98dd5..b46f715bc 100644
--- a/ui/app/components/pending-tx.js
+++ b/ui/app/components/pending-tx.js
@@ -47,6 +47,7 @@ PendingTx.prototype.render = function () {
   // Gas
   const gas = txParams.gas
   const gasBn = hexToBn(gas)
+  const safeGasLimit = parseInt(txMeta.blockGasLimit)
 
   // Gas Price
   const gasPrice = txParams.gasPrice || MIN_GAS_PRICE_BN.toString(16)
@@ -159,6 +160,7 @@ PendingTx.prototype.render = function () {
                   scale: 0,
                   // The hard lower limit for gas.
                   min: MIN_GAS_LIMIT_BN.toString(10),
+                  max: safeGasLimit,
                   suffix: 'UNITS',
                   style: {
                     position: 'relative',
-- 
cgit v1.2.3


From 2b7d8424981fbbd0f6306b5ee7abf8754f9f7092 Mon Sep 17 00:00:00 2001
From: Kevin Serrano <kevin.serrano@consensys.net>
Date: Fri, 2 Jun 2017 15:18:14 -0700
Subject: Update gasblocklimit params with every block.

---
 ui/app/components/pending-tx.js | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

(limited to 'ui/app/components/pending-tx.js')

diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js
index b46f715bc..0847a8d4c 100644
--- a/ui/app/components/pending-tx.js
+++ b/ui/app/components/pending-tx.js
@@ -32,7 +32,7 @@ function PendingTx () {
 
 PendingTx.prototype.render = function () {
   const props = this.props
-  const { currentCurrency } = props
+  const { currentCurrency, blockGasLimit } = props
 
   const conversionRate = props.conversionRate
   const txMeta = this.gatherTxMeta()
@@ -47,7 +47,8 @@ PendingTx.prototype.render = function () {
   // Gas
   const gas = txParams.gas
   const gasBn = hexToBn(gas)
-  const safeGasLimit = parseInt(txMeta.blockGasLimit)
+  const gasLimit = new BN(parseInt(blockGasLimit))
+  const safeGasLimit = this.bnMultiplyByFraction(gasLimit, 19, 20).toString(10)
 
   // Gas Price
   const gasPrice = txParams.gasPrice || MIN_GAS_PRICE_BN.toString(16)
@@ -434,6 +435,12 @@ PendingTx.prototype._notZeroOrEmptyString = function (obj) {
   return obj !== '' && obj !== '0x0'
 }
 
+PendingTx.prototype.bnMultiplyByFraction = function (targetBN, numerator, denominator) {
+  const numBN = new BN(numerator)
+  const denomBN = new BN(denominator)
+  return targetBN.mul(numBN).div(denomBN)
+}
+
 function forwardCarrat () {
   return (
     h('img', {
-- 
cgit v1.2.3


From ec097c8e3473826f29d988bb6e754345f494913e Mon Sep 17 00:00:00 2001
From: Dan Finlay <dan@danfinlay.com>
Date: Sun, 4 Jun 2017 22:13:28 -0700
Subject: Add copy links to mini tx panels

---
 ui/app/components/pending-tx.js | 48 ++++++++++++++++++++++++++++++++---------
 1 file changed, 38 insertions(+), 10 deletions(-)

(limited to 'ui/app/components/pending-tx.js')

diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js
index b46f715bc..4a62746d6 100644
--- a/ui/app/components/pending-tx.js
+++ b/ui/app/components/pending-tx.js
@@ -9,6 +9,8 @@ const BN = ethUtil.BN
 const hexToBn = require('../../../app/scripts/lib/hex-to-bn')
 
 const MiniAccountPanel = require('./mini-account-panel')
+const Tooltip = require('./tooltip')
+const copyToClipboard = require('copy-to-clipboard')
 const EthBalance = require('./eth-balance')
 const util = require('../util')
 const addressSummary = util.addressSummary
@@ -93,11 +95,23 @@ PendingTx.prototype.render = function () {
                   fontFamily: 'Montserrat Bold, Montserrat, sans-serif',
                 },
               }, identity.name),
-              h('span.font-small', {
-                style: {
-                  fontFamily: 'Montserrat Light, Montserrat, sans-serif',
-                },
-              }, addressSummary(address, 6, 4, false)),
+
+              h(Tooltip, {
+                title: 'Copy address',
+                position: 'bottom',
+              }, [
+                h('span.font-small', {
+                  onClick: (event) => {
+                    event.preventDefault()
+                    event.stopPropagation()
+                    copyToClipboard(ethUtil.toChecksumAddress(address))
+                  },
+                  style: {
+                    cursor: 'pointer',
+                    fontFamily: 'Montserrat Light, Montserrat, sans-serif',
+                  },
+                }, addressSummary(address, 6, 4, false)),
+              ]),
 
               h('span.font-small', {
                 style: {
@@ -322,16 +336,30 @@ PendingTx.prototype.miniAccountPanelForRecipient = function () {
       imageSeed: txParams.to,
       picOrder: 'left',
     }, [
+
       h('span.font-small', {
         style: {
           fontFamily: 'Montserrat Bold, Montserrat, sans-serif',
         },
       }, nameForAddress(txParams.to, props.identities)),
-      h('span.font-small', {
-        style: {
-          fontFamily: 'Montserrat Light, Montserrat, sans-serif',
-        },
-      }, addressSummary(txParams.to, 6, 4, false)),
+
+      h(Tooltip, {
+        title: 'Copy address',
+        position: 'bottom',
+      }, [
+        h('span.font-small', {
+          onClick: (event) => {
+            event.preventDefault()
+            event.stopPropagation()
+            copyToClipboard(ethUtil.toChecksumAddress(txParams.to))
+          },
+          style: {
+            cursor: 'pointer',
+            fontFamily: 'Montserrat Light, Montserrat, sans-serif',
+          },
+        }, addressSummary(txParams.to, 6, 4, false)),
+      ]),
+
     ])
   } else {
     return h(MiniAccountPanel, {
-- 
cgit v1.2.3


From 773b36b0de5613f1f6bda1caba08ee240a14ab32 Mon Sep 17 00:00:00 2001
From: Dan Finlay <dan@danfinlay.com>
Date: Sun, 4 Jun 2017 22:21:37 -0700
Subject: Move address copying into reusable component

"copyable" component allows any elements to be wrapped to include:

- a tool tip that changes/debounces its label when clicked.
- a customizable copyable value.

Fixes #1539
---
 ui/app/components/pending-tx.js | 25 +++++--------------------
 1 file changed, 5 insertions(+), 20 deletions(-)

(limited to 'ui/app/components/pending-tx.js')

diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js
index 4a62746d6..4961db5de 100644
--- a/ui/app/components/pending-tx.js
+++ b/ui/app/components/pending-tx.js
@@ -9,8 +9,7 @@ const BN = ethUtil.BN
 const hexToBn = require('../../../app/scripts/lib/hex-to-bn')
 
 const MiniAccountPanel = require('./mini-account-panel')
-const Tooltip = require('./tooltip')
-const copyToClipboard = require('copy-to-clipboard')
+const Copyable = require('./copyable')
 const EthBalance = require('./eth-balance')
 const util = require('../util')
 const addressSummary = util.addressSummary
@@ -96,18 +95,11 @@ PendingTx.prototype.render = function () {
                 },
               }, identity.name),
 
-              h(Tooltip, {
-                title: 'Copy address',
-                position: 'bottom',
+              h(Copyable, {
+                value: ethUtil.toChecksumAddress(address),
               }, [
                 h('span.font-small', {
-                  onClick: (event) => {
-                    event.preventDefault()
-                    event.stopPropagation()
-                    copyToClipboard(ethUtil.toChecksumAddress(address))
-                  },
                   style: {
-                    cursor: 'pointer',
                     fontFamily: 'Montserrat Light, Montserrat, sans-serif',
                   },
                 }, addressSummary(address, 6, 4, false)),
@@ -343,18 +335,11 @@ PendingTx.prototype.miniAccountPanelForRecipient = function () {
         },
       }, nameForAddress(txParams.to, props.identities)),
 
-      h(Tooltip, {
-        title: 'Copy address',
-        position: 'bottom',
+      h(Copyable, {
+        value: ethUtil.toChecksumAddress(txParams.to),
       }, [
         h('span.font-small', {
-          onClick: (event) => {
-            event.preventDefault()
-            event.stopPropagation()
-            copyToClipboard(ethUtil.toChecksumAddress(txParams.to))
-          },
           style: {
-            cursor: 'pointer',
             fontFamily: 'Montserrat Light, Montserrat, sans-serif',
           },
         }, addressSummary(txParams.to, 6, 4, false)),
-- 
cgit v1.2.3


From bb6e41963d42a91ecc34a728b7c0c18d26e6cd9f Mon Sep 17 00:00:00 2001
From: frankiebee <frankie.diamond@gmail.com>
Date: Mon, 5 Jun 2017 11:40:20 -0700
Subject: Dissallow transactions to be sent to
 0x0000000000000000000000000000000000000000

---
 ui/app/components/pending-tx.js | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

(limited to 'ui/app/components/pending-tx.js')

diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js
index b46f715bc..e8bf32d92 100644
--- a/ui/app/components/pending-tx.js
+++ b/ui/app/components/pending-tx.js
@@ -44,6 +44,9 @@ PendingTx.prototype.render = function () {
   const account = props.accounts[address]
   const balance = account ? account.balance : '0x0'
 
+  // recipient check
+  const isValidAddress = !(txParams.to === '0x0000000000000000000000000000000000000000')
+
   // Gas
   const gas = txParams.gas
   const gasBn = hexToBn(gas)
@@ -261,6 +264,15 @@ PendingTx.prototype.render = function () {
           }, 'Transaction Error. Exception thrown in contract code.')
         : null,
 
+        !isValidAddress ?
+          h('.error', {
+            style: {
+              marginLeft: 50,
+              fontSize: '0.9em',
+            },
+          }, 'Recipient address is invalid sending this transaction will result in a loss of ETH.')
+        : null,
+
         insufficientBalance ?
           h('span.error', {
             style: {
@@ -298,7 +310,7 @@ PendingTx.prototype.render = function () {
             type: 'submit',
             value: 'ACCEPT',
             style: { marginLeft: '10px' },
-            disabled: insufficientBalance || !this.state.valid,
+            disabled: insufficientBalance || !this.state.valid || !isValidAddress,
           }),
 
           h('button.cancel.btn-red', {
-- 
cgit v1.2.3


From 37fd32025f9cb5dffb601011e2442efee59e3595 Mon Sep 17 00:00:00 2001
From: frankiebee <frankie.diamond@gmail.com>
Date: Mon, 5 Jun 2017 12:00:01 -0700
Subject: Fix punctuation

---
 ui/app/components/pending-tx.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'ui/app/components/pending-tx.js')

diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js
index e8bf32d92..2d4dc26a2 100644
--- a/ui/app/components/pending-tx.js
+++ b/ui/app/components/pending-tx.js
@@ -270,7 +270,7 @@ PendingTx.prototype.render = function () {
               marginLeft: 50,
               fontSize: '0.9em',
             },
-          }, 'Recipient address is invalid sending this transaction will result in a loss of ETH.')
+          }, 'Recipient address is invalid. Sending this transaction will result in a loss of ETH.')
         : null,
 
         insufficientBalance ?
-- 
cgit v1.2.3


From 653319be1055b8ff0a36cb334c93ac7435f1fc5c Mon Sep 17 00:00:00 2001
From: frankiebee <frankie.diamond@gmail.com>
Date: Mon, 5 Jun 2017 12:09:19 -0700
Subject: move address check to util.isValidAddress

---
 ui/app/components/pending-tx.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'ui/app/components/pending-tx.js')

diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js
index 2d4dc26a2..56c466506 100644
--- a/ui/app/components/pending-tx.js
+++ b/ui/app/components/pending-tx.js
@@ -7,7 +7,7 @@ const clone = require('clone')
 const ethUtil = require('ethereumjs-util')
 const BN = ethUtil.BN
 const hexToBn = require('../../../app/scripts/lib/hex-to-bn')
-
+const util = require('../util')
 const MiniAccountPanel = require('./mini-account-panel')
 const EthBalance = require('./eth-balance')
 const util = require('../util')
@@ -45,7 +45,7 @@ PendingTx.prototype.render = function () {
   const balance = account ? account.balance : '0x0'
 
   // recipient check
-  const isValidAddress = !(txParams.to === '0x0000000000000000000000000000000000000000')
+  const isValidAddress = util.isValidAddress(txParams.to)
 
   // Gas
   const gas = txParams.gas
-- 
cgit v1.2.3


From 0f69a09823928ec6aaf5189cf4d4f50c52c9debb Mon Sep 17 00:00:00 2001
From: frankiebee <frankie.diamond@gmail.com>
Date: Mon, 5 Jun 2017 12:22:02 -0700
Subject: Fix linting error

---
 ui/app/components/pending-tx.js | 1 -
 1 file changed, 1 deletion(-)

(limited to 'ui/app/components/pending-tx.js')

diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js
index 56c466506..18c378781 100644
--- a/ui/app/components/pending-tx.js
+++ b/ui/app/components/pending-tx.js
@@ -10,7 +10,6 @@ const hexToBn = require('../../../app/scripts/lib/hex-to-bn')
 const util = require('../util')
 const MiniAccountPanel = require('./mini-account-panel')
 const EthBalance = require('./eth-balance')
-const util = require('../util')
 const addressSummary = util.addressSummary
 const nameForAddress = require('../../lib/contract-namer')
 const BNInput = require('./bn-as-decimal-input')
-- 
cgit v1.2.3


From c8f0802a8e63ca29c643d08ebc1b777520645246 Mon Sep 17 00:00:00 2001
From: Dan Finlay <dan@danfinlay.com>
Date: Mon, 5 Jun 2017 15:35:52 -0700
Subject: Fix bug that prevented publishing contracts

---
 ui/app/components/pending-tx.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'ui/app/components/pending-tx.js')

diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js
index a106f245b..e3b307b0b 100644
--- a/ui/app/components/pending-tx.js
+++ b/ui/app/components/pending-tx.js
@@ -45,7 +45,7 @@ PendingTx.prototype.render = function () {
   const balance = account ? account.balance : '0x0'
 
   // recipient check
-  const isValidAddress = util.isValidAddress(txParams.to)
+  const isValidAddress = !txParams.to || util.isValidAddress(txParams.to)
 
   // Gas
   const gas = txParams.gas
-- 
cgit v1.2.3