From 89af0ef408eb62b7af5e05167f210d6563ef0f43 Mon Sep 17 00:00:00 2001
From: Kevin Serrano <kevgagser@gmail.com>
Date: Fri, 17 Feb 2017 12:08:54 -0800
Subject: Change state to props, add modifiable fields.

---
 ui/app/components/pending-tx.js | 42 ++++++++++++++++++++++++++++++++---------
 ui/app/conf-tx.js               | 40 ++++++++++++++++++++-------------------
 2 files changed, 54 insertions(+), 28 deletions(-)

(limited to 'ui')

diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js
index 96f968929..9eefe1b22 100644
--- a/ui/app/components/pending-tx.js
+++ b/ui/app/components/pending-tx.js
@@ -2,6 +2,8 @@ const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const PendingTxDetails = require('./pending-tx-details')
+const BN = require('ethereumjs-util').BN
+const ethUtil = require('ethereumjs-util')
 
 module.exports = PendingTx
 
@@ -11,8 +13,12 @@ function PendingTx () {
 }
 
 PendingTx.prototype.render = function () {
-  var state = this.props
-  var txData = state.txData
+  var props = this.props
+  var state = this.state || {}
+  var txData = props.txData
+  var txParams = txData.txParams
+  var gasValue = state.gas || txParams.gas
+  var decimalGas = decimalize(gasValue)
 
   return (
 
@@ -21,7 +27,7 @@ PendingTx.prototype.render = function () {
     }, [
 
       // tx info
-      h(PendingTxDetails, state),
+      h(PendingTxDetails, props),
 
       h('style', `
         .conf-buttons button {
@@ -39,7 +45,7 @@ PendingTx.prototype.render = function () {
         }, 'Transaction Error. Exception thrown in contract code.')
       : null,
 
-      state.insufficientBalance ?
+      props.insufficientBalance ?
         h('span.error', {
           style: {
             marginLeft: 50,
@@ -57,21 +63,39 @@ PendingTx.prototype.render = function () {
         },
       }, [
 
-        state.insufficientBalance ?
+        props.insufficientBalance ?
           h('button.btn-green', {
-            onClick: state.buyEth,
+            onClick: props.buyEth,
           }, 'Buy Ether')
         : null,
 
         h('button.confirm', {
-          disabled: state.insufficientBalance,
-          onClick: state.sendTransaction,
+          disabled: props.insufficientBalance,
+          onClick: props.sendTransaction,
         }, 'Accept'),
 
         h('button.cancel.btn-red', {
-          onClick: state.cancelTransaction,
+          onClick: props.cancelTransaction,
         }, 'Reject'),
       ]),
+      h('input', {
+          value: decimalGas,
+          onChange: (event) => {
+            const hexString = hexify(event.target.value)
+            this.setState({ gas: hexString })
+          }
+      }),
     ])
   )
 }
+
+function decimalize (input) {
+  const strippedInput = ethUtil.stripHexPrefix(input)
+  const inputBN = new BN(strippedInput, 'hex')
+  return inputBN.toString(10)
+}
+
+function hexify (decimalString) {
+  const hexBN = new BN(decimalString, 10)
+  return '0x' + hexBN.toString('hex')
+}
diff --git a/ui/app/conf-tx.js b/ui/app/conf-tx.js
index a27219576..eed1f59ad 100644
--- a/ui/app/conf-tx.js
+++ b/ui/app/conf-tx.js
@@ -35,15 +35,16 @@ function ConfirmTxScreen () {
 }
 
 ConfirmTxScreen.prototype.render = function () {
-  var state = this.props
+  var props = this.props
+  var state = this.state || {}
 
-  var network = state.network
-  var provider = state.provider
-  var unapprovedTxs = state.unapprovedTxs
-  var unapprovedMsgs = state.unapprovedMsgs
+  var network = props.network
+  var provider = props.provider
+  var unapprovedTxs = props.unapprovedTxs
+  var unapprovedMsgs = props.unapprovedMsgs
 
   var unconfTxList = txHelper(unapprovedTxs, unapprovedMsgs, network)
-  var index = state.index !== undefined && unconfTxList[index] ? state.index : 0
+  var index = props.index !== undefined && unconfTxList[index] ? props.index : 0
   var txData = unconfTxList[index] || {}
   var txParams = txData.params || {}
   var isNotification = isPopupOrNotification() === 'notification'
@@ -73,20 +74,20 @@ ConfirmTxScreen.prototype.render = function () {
       }, [
         h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', {
           style: {
-            display: state.index === 0 ? 'none' : 'inline-block',
+            display: props.index === 0 ? 'none' : 'inline-block',
           },
-          onClick: () => state.dispatch(actions.previousTx()),
+          onClick: () => props.dispatch(actions.previousTx()),
         }),
-        ` ${state.index + 1} of ${unconfTxList.length} `,
+        ` ${props.index + 1} of ${unconfTxList.length} `,
         h('i.fa.fa-arrow-right.fa-lg.cursor-pointer', {
           style: {
-            display: state.index + 1 === unconfTxList.length ? 'none' : 'inline-block',
+            display: props.index + 1 === unconfTxList.length ? 'none' : 'inline-block',
           },
-          onClick: () => state.dispatch(actions.nextTx()),
+          onClick: () => props.dispatch(actions.nextTx()),
         }),
       ]),
 
-      warningIfExists(state.warning),
+      warningIfExists(props.warning),
 
       h(ReactCSSTransitionGroup, {
         className: 'css-transition-group',
@@ -99,12 +100,12 @@ ConfirmTxScreen.prototype.render = function () {
           // Properties
           txData: txData,
           key: txData.id,
-          selectedAddress: state.selectedAddress,
-          accounts: state.accounts,
-          identities: state.identities,
+          selectedAddress: props.selectedAddress,
+          accounts: props.accounts,
+          identities: props.identities,
           insufficientBalance: this.checkBalanceAgainstTx(txData),
           // Actions
-          buyEth: this.buyEth.bind(this, txParams.from || state.selectedAddress),
+          buyEth: this.buyEth.bind(this, txParams.from || props.selectedAddress),
           sendTransaction: this.sendTransaction.bind(this, txData),
           cancelTransaction: this.cancelTransaction.bind(this, txData),
           signMessage: this.signMessage.bind(this, txData),
@@ -128,11 +129,12 @@ function currentTxView (opts) {
     return h(PendingMsg, opts)
   }
 }
+
 ConfirmTxScreen.prototype.checkBalanceAgainstTx = function (txData) {
   if (!txData.txParams) return false
-  var state = this.props
-  var address = txData.txParams.from || state.selectedAddress
-  var account = state.accounts[address]
+  var props = this.props
+  var address = txData.txParams.from || props.selectedAddress
+  var account = props.accounts[address]
   var balance = account ? account.balance : '0x0'
   var maxCost = new BN(txData.maxCost, 16)
 
-- 
cgit v1.2.3


From 6b56d6ba9853ec978cd2d3d030882fa5ee3645cd Mon Sep 17 00:00:00 2001
From: Dan Finlay <dan@danfinlay.com>
Date: Fri, 17 Feb 2017 12:44:09 -0800
Subject: Broke hex decimal input into its own component

Also added a new state to try to make UI dev mode work again, but it has other issues, like #1128, that need to be addressed before UI dev mode can be used again.
---
 ui/app/components/hex-as-decimal-input.js | 49 +++++++++++++++++++++++++++++++
 ui/app/components/pending-tx.js           | 46 ++++++++++++++---------------
 ui/app/conf-tx.js                         |  1 -
 3 files changed, 71 insertions(+), 25 deletions(-)
 create mode 100644 ui/app/components/hex-as-decimal-input.js

(limited to 'ui')

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


From 564f920ae0a1be1aa08905f1b4cf6d081e9a5a0b Mon Sep 17 00:00:00 2001
From: Dan Finlay <dan@danfinlay.com>
Date: Wed, 22 Feb 2017 16:23:13 -0800
Subject: Add personal sign actions and template

---
 ui/app/actions.js                         | 22 ++++++++++++
 ui/app/components/pending-personal-msg.js | 56 +++++++++++++++++++++++++++++++
 ui/app/conf-tx.js                         | 41 +++++++++++-----------
 ui/lib/tx-helper.js                       | 13 ++++---
 4 files changed, 106 insertions(+), 26 deletions(-)
 create mode 100644 ui/app/components/pending-personal-msg.js

(limited to 'ui')

diff --git a/ui/app/actions.js b/ui/app/actions.js
index 6552e7f5c..6060d4299 100644
--- a/ui/app/actions.js
+++ b/ui/app/actions.js
@@ -90,6 +90,8 @@ var actions = {
   PREVIOUS_TX: 'PREV_TX',
   signMsg: signMsg,
   cancelMsg: cancelMsg,
+  signPersonalMsg,
+  cancelPersonalMsg,
   sendTx: sendTx,
   signTx: signTx,
   cancelTx: cancelTx,
@@ -359,6 +361,20 @@ function signMsg (msgData) {
   }
 }
 
+function signPersonalMsg (msgData) {
+  return (dispatch) => {
+    dispatch(actions.showLoadingIndication())
+
+    if (global.METAMASK_DEBUG) console.log(`background.signMessage`)
+    background.signPersonalMessage(msgData, (err) => {
+      dispatch(actions.hideLoadingIndication())
+
+      if (err) return dispatch(actions.displayWarning(err.message))
+      dispatch(actions.completedTx(msgData.metamaskId))
+    })
+  }
+}
+
 function signTx (txData) {
   return (dispatch) => {
     if (global.METAMASK_DEBUG) console.log(`background.setGasMultiplier`)
@@ -408,6 +424,12 @@ function cancelMsg (msgData) {
   return actions.completedTx(msgData.id)
 }
 
+function cancelPersonalMsg (msgData) {
+  if (global.METAMASK_DEBUG) console.log(`background.cancelMessage`)
+  background.cancelPersonalMessage(msgData.id)
+  return actions.completedTx(msgData.id)
+}
+
 function cancelTx (txData) {
   if (global.METAMASK_DEBUG) console.log(`background.cancelTransaction`)
   background.cancelTransaction(txData.id)
diff --git a/ui/app/components/pending-personal-msg.js b/ui/app/components/pending-personal-msg.js
new file mode 100644
index 000000000..b2cac164a
--- /dev/null
+++ b/ui/app/components/pending-personal-msg.js
@@ -0,0 +1,56 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const PendingTxDetails = require('./pending-msg-details')
+
+module.exports = PendingMsg
+
+inherits(PendingMsg, Component)
+function PendingMsg () {
+  Component.call(this)
+}
+
+PendingMsg.prototype.render = function () {
+  var state = this.props
+  var msgData = state.txData
+
+  return (
+
+    h('div', {
+      key: msgData.id,
+    }, [
+
+      // header
+      h('h3', {
+        style: {
+          fontWeight: 'bold',
+          textAlign: 'center',
+        },
+      }, 'Sign Message'),
+
+      h('.error', {
+        style: {
+          margin: '10px',
+        },
+      }, `Signing this message can have
+        dangerous side effects. Only sign messages from
+        sites you fully trust with your entire account.
+        This will be fixed in a future version.`),
+
+      // message details
+      h(PendingTxDetails, state),
+
+      // sign + cancel
+      h('.flex-row.flex-space-around', [
+        h('button', {
+          onClick: state.cancelMessage,
+        }, 'Cancel'),
+        h('button', {
+          onClick: state.signMessage,
+        }, 'Sign'),
+      ]),
+    ])
+
+  )
+}
+
diff --git a/ui/app/conf-tx.js b/ui/app/conf-tx.js
index 646dbb602..672ea54ae 100644
--- a/ui/app/conf-tx.js
+++ b/ui/app/conf-tx.js
@@ -12,6 +12,7 @@ const BN = ethUtil.BN
 
 const PendingTx = require('./components/pending-tx')
 const PendingMsg = require('./components/pending-msg')
+const PendingPersonalMsg = require('./components/pending-personal-msg')
 
 module.exports = connect(mapStateToProps)(ConfirmTxScreen)
 
@@ -22,6 +23,7 @@ function mapStateToProps (state) {
     selectedAddress: state.metamask.selectedAddress,
     unapprovedTxs: state.metamask.unapprovedTxs,
     unapprovedMsgs: state.metamask.unapprovedMsgs,
+    unapprovedPersonalMsgs: state.metamask.unapprovedPersonalMsgs,
     index: state.appState.currentView.context,
     warning: state.appState.warning,
     network: state.metamask.network,
@@ -35,15 +37,12 @@ function ConfirmTxScreen () {
 }
 
 ConfirmTxScreen.prototype.render = function () {
-  var state = this.props
+  const props = this.props
+  const { network, provider, unapprovedTxs,
+    unapprovedMsgs, unapprovedPersonalMsgs } = props
 
-  var network = state.network
-  var provider = state.provider
-  var unapprovedTxs = state.unapprovedTxs
-  var unapprovedMsgs = state.unapprovedMsgs
-
-  var unconfTxList = txHelper(unapprovedTxs, unapprovedMsgs, network)
-  var index = state.index !== undefined && unconfTxList[index] ? state.index : 0
+  var unconfTxList = txHelper(unapprovedTxs, unapprovedMsgs, unapprovedPersonalMsgs, network)
+  var index = props.index !== undefined && unconfTxList[index] ? props.index : 0
   var txData = unconfTxList[index] || {}
   var txParams = txData.params || {}
   var isNotification = isPopupOrNotification() === 'notification'
@@ -75,20 +74,20 @@ ConfirmTxScreen.prototype.render = function () {
       }, [
         h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', {
           style: {
-            display: state.index === 0 ? 'none' : 'inline-block',
+            display: props.index === 0 ? 'none' : 'inline-block',
           },
-          onClick: () => state.dispatch(actions.previousTx()),
+          onClick: () => props.dispatch(actions.previousTx()),
         }),
-        ` ${state.index + 1} of ${unconfTxList.length} `,
+        ` ${props.index + 1} of ${unconfTxList.length} `,
         h('i.fa.fa-arrow-right.fa-lg.cursor-pointer', {
           style: {
-            display: state.index + 1 === unconfTxList.length ? 'none' : 'inline-block',
+            display: props.index + 1 === unconfTxList.length ? 'none' : 'inline-block',
           },
-          onClick: () => state.dispatch(actions.nextTx()),
+          onClick: () => props.dispatch(actions.nextTx()),
         }),
       ]),
 
-      warningIfExists(state.warning),
+      warningIfExists(props.warning),
 
       h(ReactCSSTransitionGroup, {
         className: 'css-transition-group',
@@ -101,12 +100,12 @@ ConfirmTxScreen.prototype.render = function () {
           // Properties
           txData: txData,
           key: txData.id,
-          selectedAddress: state.selectedAddress,
-          accounts: state.accounts,
-          identities: state.identities,
+          selectedAddress: props.selectedAddress,
+          accounts: props.accounts,
+          identities: props.identities,
           insufficientBalance: this.checkBalanceAgainstTx(txData),
           // Actions
-          buyEth: this.buyEth.bind(this, txParams.from || state.selectedAddress),
+          buyEth: this.buyEth.bind(this, txParams.from || props.selectedAddress),
           sendTransaction: this.sendTransaction.bind(this, txData),
           cancelTransaction: this.cancelTransaction.bind(this, txData),
           signMessage: this.signMessage.bind(this, txData),
@@ -135,9 +134,9 @@ function currentTxView (opts) {
 }
 ConfirmTxScreen.prototype.checkBalanceAgainstTx = function (txData) {
   if (!txData.txParams) return false
-  var state = this.props
-  var address = txData.txParams.from || state.selectedAddress
-  var account = state.accounts[address]
+  var props = this.props
+  var address = txData.txParams.from || props.selectedAddress
+  var account = props.accounts[address]
   var balance = account ? account.balance : '0x0'
   var maxCost = new BN(txData.maxCost, 16)
 
diff --git a/ui/lib/tx-helper.js b/ui/lib/tx-helper.js
index 7f64f9fbe..c8dc46c9d 100644
--- a/ui/lib/tx-helper.js
+++ b/ui/lib/tx-helper.js
@@ -1,13 +1,16 @@
 const valuesFor = require('../app/util').valuesFor
 
-module.exports = function (unapprovedTxs, unapprovedMsgs, network) {
+module.exports = function (unapprovedTxs, unapprovedMsgs, personalMsgs, network) {
   log.debug('tx-helper called with params:')
-  log.debug({ unapprovedTxs, unapprovedMsgs, network })
+  log.debug({ unapprovedTxs, unapprovedMsgs, personalMsgs, network })
 
-  var txValues = network ? valuesFor(unapprovedTxs).filter(tx => tx.txParams.metamaskNetworkId === network) : valuesFor(unapprovedTxs)
+  const txValues = network ? valuesFor(unapprovedTxs).filter(tx => tx.txParams.metamaskNetworkId === network) : valuesFor(unapprovedTxs)
   log.debug(`tx helper found ${txValues.length} unapproved txs`)
-  var msgValues = valuesFor(unapprovedMsgs)
+  const msgValues = valuesFor(unapprovedMsgs)
   log.debug(`tx helper found ${msgValues.length} unsigned messages`)
-  var allValues = txValues.concat(msgValues)
+  let allValues = txValues.concat(msgValues)
+  const personalValues = valuesFor(personalMsgs)
+  allValues = allValues.concat(personalValues)
+
   return allValues.sort(tx => tx.time)
 }
-- 
cgit v1.2.3


From 7ec25526b70473247a69ab4a3a1302e50b06f12b Mon Sep 17 00:00:00 2001
From: Dan Finlay <dan@danfinlay.com>
Date: Thu, 23 Feb 2017 11:18:49 -0800
Subject: Add alternate UI for pending personal_sign messages

---
 ui/app/components/pending-personal-msg.js |  9 ---------
 ui/app/conf-tx.js                         | 17 ++++++++++++-----
 2 files changed, 12 insertions(+), 14 deletions(-)

(limited to 'ui')

diff --git a/ui/app/components/pending-personal-msg.js b/ui/app/components/pending-personal-msg.js
index b2cac164a..f4bde91dc 100644
--- a/ui/app/components/pending-personal-msg.js
+++ b/ui/app/components/pending-personal-msg.js
@@ -28,15 +28,6 @@ PendingMsg.prototype.render = function () {
         },
       }, 'Sign Message'),
 
-      h('.error', {
-        style: {
-          margin: '10px',
-        },
-      }, `Signing this message can have
-        dangerous side effects. Only sign messages from
-        sites you fully trust with your entire account.
-        This will be fixed in a future version.`),
-
       // message details
       h(PendingTxDetails, state),
 
diff --git a/ui/app/conf-tx.js b/ui/app/conf-tx.js
index 672ea54ae..571ae85b6 100644
--- a/ui/app/conf-tx.js
+++ b/ui/app/conf-tx.js
@@ -118,18 +118,25 @@ ConfirmTxScreen.prototype.render = function () {
 }
 
 function currentTxView (opts) {
+  log.info('rendering current tx view')
   const { txData } = opts
-  const { txParams, msgParams } = txData
+  const { txParams, msgParams, type } = txData
 
-  log.info('rendering current tx view')
   if (txParams) {
-    // This is a pending transaction
     log.debug('txParams detected, rendering pending tx')
     return h(PendingTx, opts)
+
   } else if (msgParams) {
-    // This is a pending message to sign
     log.debug('msgParams detected, rendering pending msg')
-    return h(PendingMsg, opts)
+
+    if (type === 'eth_sign') {
+      log.debug('rendering eth_sign message')
+      return h(PendingMsg, opts)
+
+    } else if (type === 'personal_sign') {
+      log.debug('rendering personal_sign message')
+      return h(PendingPersonalMsg, opts)
+    }
   }
 }
 ConfirmTxScreen.prototype.checkBalanceAgainstTx = function (txData) {
-- 
cgit v1.2.3


From 4697aca02c669b1787e72f0648b3043270867799 Mon Sep 17 00:00:00 2001
From: Dan Finlay <dan@danfinlay.com>
Date: Thu, 23 Feb 2017 14:23:45 -0800
Subject: Got personal_sign working

Also fixed bug where signing would not close popup.
---
 ui/app/actions.js                                 | 77 +++++++++++++----------
 ui/app/app.js                                     |  2 +
 ui/app/components/pending-personal-msg-details.js | 50 +++++++++++++++
 ui/app/components/pending-personal-msg.js         |  4 +-
 ui/app/conf-tx.js                                 | 14 ++++-
 ui/app/reducers/app.js                            | 30 +++++----
 ui/index.js                                       |  3 +-
 ui/lib/tx-helper.js                               |  1 +
 8 files changed, 133 insertions(+), 48 deletions(-)
 create mode 100644 ui/app/components/pending-personal-msg-details.js

(limited to 'ui')

diff --git a/ui/app/actions.js b/ui/app/actions.js
index 6060d4299..12ee0367a 100644
--- a/ui/app/actions.js
+++ b/ui/app/actions.js
@@ -180,7 +180,7 @@ function tryUnlockMetamask (password) {
   return (dispatch) => {
     dispatch(actions.showLoadingIndication())
     dispatch(actions.unlockInProgress())
-    if (global.METAMASK_DEBUG) console.log(`background.submitPassword`)
+    log.debug(`background.submitPassword`)
     background.submitPassword(password, (err) => {
       dispatch(actions.hideLoadingIndication())
       if (err) {
@@ -208,7 +208,7 @@ function transitionBackward () {
 function confirmSeedWords () {
   return (dispatch) => {
     dispatch(actions.showLoadingIndication())
-    if (global.METAMASK_DEBUG) console.log(`background.clearSeedWordCache`)
+    log.debug(`background.clearSeedWordCache`)
     background.clearSeedWordCache((err, account) => {
       dispatch(actions.hideLoadingIndication())
       if (err) {
@@ -224,7 +224,7 @@ function confirmSeedWords () {
 function createNewVaultAndRestore (password, seed) {
   return (dispatch) => {
     dispatch(actions.showLoadingIndication())
-    if (global.METAMASK_DEBUG) console.log(`background.createNewVaultAndRestore`)
+    log.debug(`background.createNewVaultAndRestore`)
     background.createNewVaultAndRestore(password, seed, (err) => {
       dispatch(actions.hideLoadingIndication())
       if (err) return dispatch(actions.displayWarning(err.message))
@@ -236,12 +236,12 @@ function createNewVaultAndRestore (password, seed) {
 function createNewVaultAndKeychain (password) {
   return (dispatch) => {
     dispatch(actions.showLoadingIndication())
-    if (global.METAMASK_DEBUG) console.log(`background.createNewVaultAndKeychain`)
+    log.debug(`background.createNewVaultAndKeychain`)
     background.createNewVaultAndKeychain(password, (err) => {
       if (err) {
         return dispatch(actions.displayWarning(err.message))
       }
-      if (global.METAMASK_DEBUG) console.log(`background.placeSeedWords`)
+      log.debug(`background.placeSeedWords`)
       background.placeSeedWords((err) => {
         if (err) {
           return dispatch(actions.displayWarning(err.message))
@@ -262,10 +262,10 @@ function revealSeedConfirmation () {
 function requestRevealSeed (password) {
   return (dispatch) => {
     dispatch(actions.showLoadingIndication())
-    if (global.METAMASK_DEBUG) console.log(`background.submitPassword`)
+    log.debug(`background.submitPassword`)
     background.submitPassword(password, (err) => {
       if (err) return dispatch(actions.displayWarning(err.message))
-      if (global.METAMASK_DEBUG) console.log(`background.placeSeedWords`)
+      log.debug(`background.placeSeedWords`)
       background.placeSeedWords((err) => {
         if (err) return dispatch(actions.displayWarning(err.message))
         dispatch(actions.hideLoadingIndication())
@@ -277,7 +277,7 @@ function requestRevealSeed (password) {
 function addNewKeyring (type, opts) {
   return (dispatch) => {
     dispatch(actions.showLoadingIndication())
-    if (global.METAMASK_DEBUG) console.log(`background.addNewKeyring`)
+    log.debug(`background.addNewKeyring`)
     background.addNewKeyring(type, opts, (err) => {
       dispatch(actions.hideLoadingIndication())
       if (err) return dispatch(actions.displayWarning(err.message))
@@ -289,11 +289,11 @@ function addNewKeyring (type, opts) {
 function importNewAccount (strategy, args) {
   return (dispatch) => {
     dispatch(actions.showLoadingIndication('This may take a while, be patient.'))
-    if (global.METAMASK_DEBUG) console.log(`background.importAccountWithStrategy`)
+    log.debug(`background.importAccountWithStrategy`)
     background.importAccountWithStrategy(strategy, args, (err) => {
       dispatch(actions.hideLoadingIndication())
       if (err) return dispatch(actions.displayWarning(err.message))
-      if (global.METAMASK_DEBUG) console.log(`background.getState`)
+      log.debug(`background.getState`)
       background.getState((err, newState) => {
         if (err) {
           return dispatch(actions.displayWarning(err.message))
@@ -315,7 +315,7 @@ function navigateToNewAccountScreen() {
 }
 
 function addNewAccount () {
-  if (global.METAMASK_DEBUG) console.log(`background.addNewAccount`)
+  log.debug(`background.addNewAccount`)
   return callBackgroundThenUpdate(background.addNewAccount)
 }
 
@@ -328,7 +328,7 @@ function showInfoPage () {
 function setCurrentFiat (currencyCode) {
   return (dispatch) => {
     dispatch(this.showLoadingIndication())
-    if (global.METAMASK_DEBUG) console.log(`background.setCurrentFiat`)
+    log.debug(`background.setCurrentFiat`)
     background.setCurrentCurrency(currencyCode, (err, data) => {
       dispatch(this.hideLoadingIndication())
       if (err) {
@@ -348,28 +348,38 @@ function setCurrentFiat (currencyCode) {
 }
 
 function signMsg (msgData) {
+  log.debug('action - signMsg')
   return (dispatch) => {
     dispatch(actions.showLoadingIndication())
 
-    if (global.METAMASK_DEBUG) console.log(`background.signMessage`)
-    background.signMessage(msgData, (err) => {
+    log.debug(`actions calling background.signMessage`)
+    background.signMessage(msgData, (err, newState) => {
+      log.debug('signMessage called back')
+      dispatch(actions.updateMetamaskState(newState))
       dispatch(actions.hideLoadingIndication())
 
+      if (err) log.error(err)
       if (err) return dispatch(actions.displayWarning(err.message))
+
       dispatch(actions.completedTx(msgData.metamaskId))
     })
   }
 }
 
 function signPersonalMsg (msgData) {
+  log.debug('action - signPersonalMsg')
   return (dispatch) => {
     dispatch(actions.showLoadingIndication())
 
-    if (global.METAMASK_DEBUG) console.log(`background.signMessage`)
-    background.signPersonalMessage(msgData, (err) => {
+    log.debug(`actions calling background.signPersonalMessage`)
+    background.signPersonalMessage(msgData, (err, newState) => {
+      log.debug('signPersonalMessage called back')
+      dispatch(actions.updateMetamaskState(newState))
       dispatch(actions.hideLoadingIndication())
 
+      if (err) log.error(err)
       if (err) return dispatch(actions.displayWarning(err.message))
+
       dispatch(actions.completedTx(msgData.metamaskId))
     })
   }
@@ -377,7 +387,7 @@ function signPersonalMsg (msgData) {
 
 function signTx (txData) {
   return (dispatch) => {
-    if (global.METAMASK_DEBUG) console.log(`background.setGasMultiplier`)
+    log.debug(`background.setGasMultiplier`)
     background.setGasMultiplier(txData.gasMultiplier, (err) => {
       if (err) return dispatch(actions.displayWarning(err.message))
       web3.eth.sendTransaction(txData, (err, data) => {
@@ -392,8 +402,9 @@ function signTx (txData) {
 }
 
 function sendTx (txData) {
+  log.info('actions: sendTx')
   return (dispatch) => {
-    if (global.METAMASK_DEBUG) console.log(`background.approveTransaction`)
+    log.debug(`actions calling background.approveTransaction`)
     background.approveTransaction(txData.id, (err) => {
       if (err) {
         dispatch(actions.txError(err))
@@ -419,19 +430,19 @@ function txError (err) {
 }
 
 function cancelMsg (msgData) {
-  if (global.METAMASK_DEBUG) console.log(`background.cancelMessage`)
+  log.debug(`background.cancelMessage`)
   background.cancelMessage(msgData.id)
   return actions.completedTx(msgData.id)
 }
 
 function cancelPersonalMsg (msgData) {
-  if (global.METAMASK_DEBUG) console.log(`background.cancelMessage`)
+  log.debug(`background.cancelMessage`)
   background.cancelPersonalMessage(msgData.id)
   return actions.completedTx(msgData.id)
 }
 
 function cancelTx (txData) {
-  if (global.METAMASK_DEBUG) console.log(`background.cancelTransaction`)
+  log.debug(`background.cancelTransaction`)
   background.cancelTransaction(txData.id)
   return actions.completedTx(txData.id)
 }
@@ -527,14 +538,14 @@ function updateMetamaskState (newState) {
 }
 
 function lockMetamask () {
-  if (global.METAMASK_DEBUG) console.log(`background.setLocked`)
+  log.debug(`background.setLocked`)
   return callBackgroundThenUpdate(background.setLocked)
 }
 
 function showAccountDetail (address) {
   return (dispatch) => {
     dispatch(actions.showLoadingIndication())
-    if (global.METAMASK_DEBUG) console.log(`background.setSelectedAddress`)
+    log.debug(`background.setSelectedAddress`)
     background.setSelectedAddress(address, (err) => {
       dispatch(actions.hideLoadingIndication())
       if (err) {
@@ -607,7 +618,7 @@ function goBackToInitView () {
 function markNoticeRead (notice) {
   return (dispatch) => {
     dispatch(this.showLoadingIndication())
-    if (global.METAMASK_DEBUG) console.log(`background.markNoticeRead`)
+    log.debug(`background.markNoticeRead`)
     background.markNoticeRead(notice, (err, notice) => {
       dispatch(this.hideLoadingIndication())
       if (err) {
@@ -639,7 +650,7 @@ function clearNotices () {
 }
 
 function markAccountsFound() {
-  if (global.METAMASK_DEBUG) console.log(`background.markAccountsFound`)
+  log.debug(`background.markAccountsFound`)
   return callBackgroundThenUpdate(background.markAccountsFound)
 }
 
@@ -648,7 +659,7 @@ function markAccountsFound() {
 //
 
 function setRpcTarget (newRpc) {
-  if (global.METAMASK_DEBUG) console.log(`background.setRpcTarget`)
+  log.debug(`background.setRpcTarget`)
   background.setRpcTarget(newRpc)
   return {
     type: actions.SET_RPC_TARGET,
@@ -657,7 +668,7 @@ function setRpcTarget (newRpc) {
 }
 
 function setProviderType (type) {
-  if (global.METAMASK_DEBUG) console.log(`background.setProviderType`)
+  log.debug(`background.setProviderType`)
   background.setProviderType(type)
   return {
     type: actions.SET_PROVIDER_TYPE,
@@ -666,7 +677,7 @@ function setProviderType (type) {
 }
 
 function useEtherscanProvider () {
-  if (global.METAMASK_DEBUG) console.log(`background.useEtherscanProvider`)
+  log.debug(`background.useEtherscanProvider`)
   background.useEtherscanProvider()
   return {
     type: actions.USE_ETHERSCAN_PROVIDER,
@@ -723,7 +734,7 @@ function exportAccount (address) {
   return function (dispatch) {
     dispatch(self.showLoadingIndication())
 
-    if (global.METAMASK_DEBUG) console.log(`background.exportAccount`)
+    log.debug(`background.exportAccount`)
     background.exportAccount(address, function (err, result) {
       dispatch(self.hideLoadingIndication())
 
@@ -747,7 +758,7 @@ function showPrivateKey (key) {
 function saveAccountLabel (account, label) {
   return (dispatch) => {
     dispatch(actions.showLoadingIndication())
-    if (global.METAMASK_DEBUG) console.log(`background.saveAccountLabel`)
+    log.debug(`background.saveAccountLabel`)
     background.saveAccountLabel(account, label, (err) => {
       dispatch(actions.hideLoadingIndication())
       if (err) {
@@ -769,7 +780,7 @@ function showSendPage () {
 
 function buyEth (address, amount) {
   return (dispatch) => {
-    if (global.METAMASK_DEBUG) console.log(`background.buyEth`)
+    log.debug(`background.buyEth`)
     background.buyEth(address, amount)
     dispatch({
       type: actions.BUY_ETH,
@@ -849,7 +860,7 @@ function coinShiftRquest (data, marketData) {
       if (response.error) return dispatch(actions.displayWarning(response.error))
       var message = `
         Deposit your ${response.depositType} to the address bellow:`
-      if (global.METAMASK_DEBUG) console.log(`background.createShapeShiftTx`)
+      log.debug(`background.createShapeShiftTx`)
       background.createShapeShiftTx(response.deposit, response.depositType)
       dispatch(actions.showQrView(response.deposit, [message].concat(marketData)))
     })
@@ -929,7 +940,7 @@ function callBackgroundThenUpdate (method, ...args) {
 }
 
 function forceUpdateMetamaskState(dispatch){
-  if (global.METAMASK_DEBUG) console.log(`background.getState`)
+  log.debug(`background.getState`)
   background.getState((err, newState) => {
     if (err) {
       return dispatch(actions.displayWarning(err.message))
diff --git a/ui/app/app.js b/ui/app/app.js
index 6e249b09e..63fab5db8 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -64,6 +64,7 @@ function mapStateToProps (state) {
 App.prototype.render = function () {
   var props = this.props
   const { isLoading, loadingMessage, transForward } = props
+  log.debug('Main ui render function')
 
   return (
 
@@ -347,6 +348,7 @@ App.prototype.renderBackButton = function (style, justArrow = false) {
 }
 
 App.prototype.renderPrimary = function () {
+  log.debug('rendering primary')
   var props = this.props
 
   // notices
diff --git a/ui/app/components/pending-personal-msg-details.js b/ui/app/components/pending-personal-msg-details.js
new file mode 100644
index 000000000..16308d121
--- /dev/null
+++ b/ui/app/components/pending-personal-msg-details.js
@@ -0,0 +1,50 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+
+const AccountPanel = require('./account-panel')
+
+module.exports = PendingMsgDetails
+
+inherits(PendingMsgDetails, Component)
+function PendingMsgDetails () {
+  Component.call(this)
+}
+
+PendingMsgDetails.prototype.render = function () {
+  var state = this.props
+  var msgData = state.txData
+
+  var msgParams = msgData.msgParams || {}
+  var address = msgParams.from || state.selectedAddress
+  var identity = state.identities[address] || { address: address }
+  var account = state.accounts[address] || { address: address }
+
+  return (
+    h('div', {
+      key: msgData.id,
+      style: {
+        margin: '10px 20px',
+      },
+    }, [
+
+      // account that will sign
+      h(AccountPanel, {
+        showFullAddress: true,
+        identity: identity,
+        account: account,
+        imageifyIdenticons: state.imageifyIdenticons,
+      }),
+
+      // message data
+      h('.tx-data.flex-column.flex-justify-center.flex-grow.select-none', [
+        h('.flex-row.flex-space-between', [
+          h('label.font-small', 'MESSAGE'),
+          h('span.font-small', msgParams.data),
+        ]),
+      ]),
+
+    ])
+  )
+}
+
diff --git a/ui/app/components/pending-personal-msg.js b/ui/app/components/pending-personal-msg.js
index f4bde91dc..d48dd5ecc 100644
--- a/ui/app/components/pending-personal-msg.js
+++ b/ui/app/components/pending-personal-msg.js
@@ -1,7 +1,7 @@
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
-const PendingTxDetails = require('./pending-msg-details')
+const PendingTxDetails = require('./pending-personal-msg-details')
 
 module.exports = PendingMsg
 
@@ -37,7 +37,7 @@ PendingMsg.prototype.render = function () {
           onClick: state.cancelMessage,
         }, 'Cancel'),
         h('button', {
-          onClick: state.signMessage,
+          onClick: state.signPersonalMessage,
         }, 'Sign'),
       ]),
     ])
diff --git a/ui/app/conf-tx.js b/ui/app/conf-tx.js
index 571ae85b6..a2e5ee94c 100644
--- a/ui/app/conf-tx.js
+++ b/ui/app/conf-tx.js
@@ -109,6 +109,7 @@ ConfirmTxScreen.prototype.render = function () {
           sendTransaction: this.sendTransaction.bind(this, txData),
           cancelTransaction: this.cancelTransaction.bind(this, txData),
           signMessage: this.signMessage.bind(this, txData),
+          signPersonalMessage: this.signPersonalMessage.bind(this, txData),
           cancelMessage: this.cancelMessage.bind(this, txData),
         }),
 
@@ -167,13 +168,24 @@ ConfirmTxScreen.prototype.cancelTransaction = function (txData, event) {
 }
 
 ConfirmTxScreen.prototype.signMessage = function (msgData, event) {
+  log.info('conf-tx.js: signing message')
   var params = msgData.msgParams
+  var type = msgData.type
   params.metamaskId = msgData.id
   event.stopPropagation()
   this.props.dispatch(actions.signMsg(params))
 }
 
+ConfirmTxScreen.prototype.signPersonalMessage = function (msgData, event) {
+  log.info('conf-tx.js: signing personal message')
+  var params = msgData.msgParams
+  params.metamaskId = msgData.id
+  event.stopPropagation()
+  this.props.dispatch(actions.signPersonalMsg(params))
+}
+
 ConfirmTxScreen.prototype.cancelMessage = function (msgData, event) {
+  log.info('canceling message')
   event.stopPropagation()
   this.props.dispatch(actions.cancelMsg(msgData))
 }
@@ -185,7 +197,7 @@ ConfirmTxScreen.prototype.goHome = function (event) {
 
 function warningIfExists (warning) {
   if (warning &&
-      // Do not display user rejections on this screen:
+     // Do not display user rejections on this screen:
      warning.indexOf('User denied transaction signature') === -1) {
     return h('.error', {
       style: {
diff --git a/ui/app/reducers/app.js b/ui/app/reducers/app.js
index de6536c2e..6d92764f1 100644
--- a/ui/app/reducers/app.js
+++ b/ui/app/reducers/app.js
@@ -6,6 +6,7 @@ const notification = require('../../../app/scripts/lib/notifications')
 module.exports = reduceApp
 
 function reduceApp (state, action) {
+  log.debug('App Reducer got ' + action.type)
   // clone and defaults
   const selectedAddress = state.metamask.selectedAddress
   const pendingTxs = hasPendingTxs(state)
@@ -289,32 +290,36 @@ function reduceApp (state, action) {
     case actions.SHOW_CONF_TX_PAGE:
       return extend(appState, {
         currentView: {
-          name: 'confTx',
+          name: pendingTxs ? 'confTx' : 'account-detail',
           context: 0,
         },
         transForward: action.transForward,
         warning: null,
+        isLoading: false,
       })
 
     case actions.SHOW_CONF_MSG_PAGE:
       return extend(appState, {
         currentView: {
-          name: 'confTx',
+          name: pendingTxs ? 'confTx' : 'account-detail',
           context: 0,
         },
         transForward: true,
         warning: null,
+        isLoading: false,
       })
 
     case actions.COMPLETED_TX:
-      var unapprovedTxs = state.metamask.unapprovedTxs
-      var unapprovedMsgs = state.metamask.unapprovedMsgs
-      var network = state.metamask.network
+      log.debug('reducing COMPLETED_TX')
+      var { unapprovedTxs, unapprovedMsgs,
+        unapprovedPersonalMsgs, network } = state.metamask
 
-      var unconfTxList = txHelper(unapprovedTxs, unapprovedMsgs, network)
-    .filter(tx => tx !== tx.id)
+      var unconfTxList = txHelper(unapprovedTxs, unapprovedMsgs, unapprovedPersonalMsgs, network)
+      .filter(tx => tx !== tx.id)
+      log.debug(`actions - COMPLETED_TX with ${unconfTxList.length} txs`)
 
       if (unconfTxList && unconfTxList.length > 0) {
+        log.debug('reducer detected txs - rendering confTx view')
         return extend(appState, {
           transForward: false,
           currentView: {
@@ -324,6 +329,7 @@ function reduceApp (state, action) {
           warning: null,
         })
       } else {
+        log.debug('attempting to close popup')
         notification.closePopup()
 
         return extend(appState, {
@@ -572,10 +578,12 @@ function reduceApp (state, action) {
 }
 
 function hasPendingTxs (state) {
-  var unapprovedTxs = state.metamask.unapprovedTxs
-  var unapprovedMsgs = state.metamask.unapprovedMsgs
-  var network = state.metamask.network
-  var unconfTxList = txHelper(unapprovedTxs, unapprovedMsgs, network)
+  var { unapprovedTxs, unapprovedMsgs,
+    unapprovedPersonalMsgs, network } = state.metamask
+
+  var unconfTxList = txHelper(unapprovedTxs, unapprovedMsgs, unapprovedPersonalMsgs, network)
+  var has = unconfTxList.length > 0
+  log.debug('checking if state has pending txs, concluded ' + has)
   return unconfTxList.length > 0
 }
 
diff --git a/ui/index.js b/ui/index.js
index 844e6c417..6b65f12d4 100644
--- a/ui/index.js
+++ b/ui/index.js
@@ -6,9 +6,10 @@ const configureStore = require('./app/store')
 const txHelper = require('./lib/tx-helper')
 module.exports = launchApp
 
+let debugMode = window.METAMASK_DEBUG
 const log = require('loglevel')
 window.log = log
-log.setLevel('warn')
+log.setLevel(debugMode ? 'debug' : 'warn')
 
 function launchApp (opts) {
   var accountManager = opts.accountManager
diff --git a/ui/lib/tx-helper.js b/ui/lib/tx-helper.js
index c8dc46c9d..2eefdff68 100644
--- a/ui/lib/tx-helper.js
+++ b/ui/lib/tx-helper.js
@@ -10,6 +10,7 @@ module.exports = function (unapprovedTxs, unapprovedMsgs, personalMsgs, network)
   log.debug(`tx helper found ${msgValues.length} unsigned messages`)
   let allValues = txValues.concat(msgValues)
   const personalValues = valuesFor(personalMsgs)
+  log.debug(`tx helper found ${personalValues.length} unsigned personal messages`)
   allValues = allValues.concat(personalValues)
 
   return allValues.sort(tx => tx.time)
-- 
cgit v1.2.3


From 1d1d296a1eec2fc66927dd80bf0f1bbd1a6841cf Mon Sep 17 00:00:00 2001
From: Dan Finlay <dan@danfinlay.com>
Date: Thu, 23 Feb 2017 14:40:18 -0800
Subject: Make personal sign view look nice

---
 ui/app/components/pending-personal-msg-details.js | 21 ++++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

(limited to 'ui')

diff --git a/ui/app/components/pending-personal-msg-details.js b/ui/app/components/pending-personal-msg-details.js
index 16308d121..ffd11ca0b 100644
--- a/ui/app/components/pending-personal-msg-details.js
+++ b/ui/app/components/pending-personal-msg-details.js
@@ -20,6 +20,8 @@ PendingMsgDetails.prototype.render = function () {
   var identity = state.identities[address] || { address: address }
   var account = state.accounts[address] || { address: address }
 
+  var { data } = msgParams
+
   return (
     h('div', {
       key: msgData.id,
@@ -37,11 +39,20 @@ PendingMsgDetails.prototype.render = function () {
       }),
 
       // message data
-      h('.tx-data.flex-column.flex-justify-center.flex-grow.select-none', [
-        h('.flex-row.flex-space-between', [
-          h('label.font-small', 'MESSAGE'),
-          h('span.font-small', msgParams.data),
-        ]),
+      h('div', [
+        h('label.font-small', { style: { display: 'block' } }, 'MESSAGE'),
+        h('textarea.font-small', {
+          readOnly: true,
+          style: {
+            width: '315px',
+            maxHeight: '210px',
+            resize: 'none',
+            border: 'none',
+            background: 'white',
+            padding: '3px',
+          },
+          defaultValue: data,
+        }),
       ]),
 
     ])
-- 
cgit v1.2.3


From 961a83769bd46334f5ecf72d00a32730d19866c3 Mon Sep 17 00:00:00 2001
From: Dan Finlay <dan@danfinlay.com>
Date: Thu, 23 Feb 2017 16:00:43 -0800
Subject: Fix cancel msg signing behavior.

---
 ui/app/actions.js                         |  8 ++++----
 ui/app/components/pending-personal-msg.js |  2 +-
 ui/app/conf-tx.js                         |  8 +++++++-
 ui/app/reducers/app.js                    | 15 ++++++++-------
 4 files changed, 20 insertions(+), 13 deletions(-)

(limited to 'ui')

diff --git a/ui/app/actions.js b/ui/app/actions.js
index 12ee0367a..89a4fadfa 100644
--- a/ui/app/actions.js
+++ b/ui/app/actions.js
@@ -418,7 +418,7 @@ function sendTx (txData) {
 function completedTx (id) {
   return {
     type: actions.COMPLETED_TX,
-    id,
+    value: id,
   }
 }
 
@@ -436,9 +436,9 @@ function cancelMsg (msgData) {
 }
 
 function cancelPersonalMsg (msgData) {
-  log.debug(`background.cancelMessage`)
-  background.cancelPersonalMessage(msgData.id)
-  return actions.completedTx(msgData.id)
+  const id = msgData.id
+  background.cancelPersonalMessage(id)
+  return actions.completedTx(id)
 }
 
 function cancelTx (txData) {
diff --git a/ui/app/components/pending-personal-msg.js b/ui/app/components/pending-personal-msg.js
index d48dd5ecc..4542adb28 100644
--- a/ui/app/components/pending-personal-msg.js
+++ b/ui/app/components/pending-personal-msg.js
@@ -34,7 +34,7 @@ PendingMsg.prototype.render = function () {
       // sign + cancel
       h('.flex-row.flex-space-around', [
         h('button', {
-          onClick: state.cancelMessage,
+          onClick: state.cancelPersonalMessage,
         }, 'Cancel'),
         h('button', {
           onClick: state.signPersonalMessage,
diff --git a/ui/app/conf-tx.js b/ui/app/conf-tx.js
index a2e5ee94c..2df6c5384 100644
--- a/ui/app/conf-tx.js
+++ b/ui/app/conf-tx.js
@@ -111,6 +111,7 @@ ConfirmTxScreen.prototype.render = function () {
           signMessage: this.signMessage.bind(this, txData),
           signPersonalMessage: this.signPersonalMessage.bind(this, txData),
           cancelMessage: this.cancelMessage.bind(this, txData),
+          cancelPersonalMessage: this.cancelPersonalMessage.bind(this, txData),
         }),
 
       ]),
@@ -170,7 +171,6 @@ ConfirmTxScreen.prototype.cancelTransaction = function (txData, event) {
 ConfirmTxScreen.prototype.signMessage = function (msgData, event) {
   log.info('conf-tx.js: signing message')
   var params = msgData.msgParams
-  var type = msgData.type
   params.metamaskId = msgData.id
   event.stopPropagation()
   this.props.dispatch(actions.signMsg(params))
@@ -190,6 +190,12 @@ ConfirmTxScreen.prototype.cancelMessage = function (msgData, event) {
   this.props.dispatch(actions.cancelMsg(msgData))
 }
 
+ConfirmTxScreen.prototype.cancelPersonalMessage = function (msgData, event) {
+  log.info('canceling personal message')
+  event.stopPropagation()
+  this.props.dispatch(actions.cancelPersonalMsg(msgData))
+}
+
 ConfirmTxScreen.prototype.goHome = function (event) {
   event.stopPropagation()
   this.props.dispatch(actions.goHome())
diff --git a/ui/app/reducers/app.js b/ui/app/reducers/app.js
index 6d92764f1..136326301 100644
--- a/ui/app/reducers/app.js
+++ b/ui/app/reducers/app.js
@@ -9,12 +9,13 @@ function reduceApp (state, action) {
   log.debug('App Reducer got ' + action.type)
   // clone and defaults
   const selectedAddress = state.metamask.selectedAddress
-  const pendingTxs = hasPendingTxs(state)
+  let pendingTxs = hasPendingTxs(state)
   let name = 'accounts'
   if (selectedAddress) {
     name = 'accountDetail'
   }
   if (pendingTxs) {
+    log.debug('pending txs detected, defaulting to conf-tx view.')
     name = 'confTx'
   }
 
@@ -310,15 +311,16 @@ function reduceApp (state, action) {
       })
 
     case actions.COMPLETED_TX:
-      log.debug('reducing COMPLETED_TX')
+      log.debug('reducing COMPLETED_TX for tx ' + action.value)
       var { unapprovedTxs, unapprovedMsgs,
         unapprovedPersonalMsgs, network } = state.metamask
 
       var unconfTxList = txHelper(unapprovedTxs, unapprovedMsgs, unapprovedPersonalMsgs, network)
-      .filter(tx => tx !== tx.id)
-      log.debug(`actions - COMPLETED_TX with ${unconfTxList.length} txs`)
+      .filter(tx => tx.id !== action.value )
 
-      if (unconfTxList && unconfTxList.length > 0) {
+      pendingTxs = unconfTxList.length > 0
+
+      if (pendingTxs) {
         log.debug('reducer detected txs - rendering confTx view')
         return extend(appState, {
           transForward: false,
@@ -583,8 +585,7 @@ function hasPendingTxs (state) {
 
   var unconfTxList = txHelper(unapprovedTxs, unapprovedMsgs, unapprovedPersonalMsgs, network)
   var has = unconfTxList.length > 0
-  log.debug('checking if state has pending txs, concluded ' + has)
-  return unconfTxList.length > 0
+  return has
 }
 
 function indexForPending (state, txId) {
-- 
cgit v1.2.3


From 42c2c3df3791e5c3f6cd744393c723c7e32e2403 Mon Sep 17 00:00:00 2001
From: Dan Finlay <dan@danfinlay.com>
Date: Thu, 23 Feb 2017 17:45:37 -0800
Subject: Improve pending tx blue dot style

---
 ui/app/components/transaction-list-item-icon.js | 6 +-----
 ui/app/css/index.css                            | 7 +++----
 2 files changed, 4 insertions(+), 9 deletions(-)

(limited to 'ui')

diff --git a/ui/app/components/transaction-list-item-icon.js b/ui/app/components/transaction-list-item-icon.js
index 90b4ec094..ca2781451 100644
--- a/ui/app/components/transaction-list-item-icon.js
+++ b/ui/app/components/transaction-list-item-icon.js
@@ -15,11 +15,7 @@ TransactionIcon.prototype.render = function () {
   const { transaction, txParams, isMsg } = this.props
   switch (transaction.status) {
     case 'unapproved':
-      return h( !isMsg ? '.unapproved-tx-icon' : 'i.fa.fa-certificate.fa-lg', {
-        style: {
-          width: '24px',
-        },
-      })
+      return h( !isMsg ? '.unapproved-tx-icon' : 'i.fa.fa-certificate.fa-lg')
 
     case 'rejected':
       return h('i.fa.fa-exclamation-triangle.fa-lg.warning', {
diff --git a/ui/app/css/index.css b/ui/app/css/index.css
index 4b9b5b67d..8c6ff29d3 100644
--- a/ui/app/css/index.css
+++ b/ui/app/css/index.css
@@ -410,11 +410,10 @@ input.large-input {
 }
 
 .unapproved-tx-icon {
-  height: 24px;
-  background: #4dffff;
-  border: solid;
+  height: 16px;
+  width: 16px;
+  background: rgb(47, 174, 244);
   border-color: #AEAEAE;
-  border-width: 0.5px;
   border-radius: 13px;
 }
 
-- 
cgit v1.2.3


From dfc89d6c6dd622e7dff79544c0885594000ffd37 Mon Sep 17 00:00:00 2001
From: Kevin Serrano <kevgagser@gmail.com>
Date: Fri, 24 Feb 2017 15:06:55 -0800
Subject: Make gasPrice accessible to the UI.

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

(limited to 'ui')

diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js
index 761c75be3..f1f479794 100644
--- a/ui/app/components/pending-tx.js
+++ b/ui/app/components/pending-tx.js
@@ -18,7 +18,7 @@ PendingTx.prototype.render = function () {
   const txParams = txData.txParams
 
   const gas = state.gas || txParams.gas
-  const gasPrice = state.gasPrice || txParams.gasPrice
+  const gasPrice = state.gasPrice || txData.gasPrice
 
   return (
 
@@ -96,4 +96,3 @@ PendingTx.prototype.render = function () {
     ])
   )
 }
-
-- 
cgit v1.2.3


From a77a5f0ab329433404893ff1280fb90ff2a12029 Mon Sep 17 00:00:00 2001
From: Kevin Serrano <kevgagser@gmail.com>
Date: Mon, 27 Feb 2017 13:53:43 -0800
Subject: Move input boxes into table and into details component.

---
 ui/app/components/hex-as-decimal-input.js |  5 ++++-
 ui/app/components/pending-tx-details.js   | 35 +++++++++++++++++++++++++++++++
 ui/app/components/pending-tx.js           | 16 --------------
 3 files changed, 39 insertions(+), 17 deletions(-)

(limited to 'ui')

diff --git a/ui/app/components/hex-as-decimal-input.js b/ui/app/components/hex-as-decimal-input.js
index 4d3105b8d..34f628f7f 100644
--- a/ui/app/components/hex-as-decimal-input.js
+++ b/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)
 }
-
diff --git a/ui/app/components/pending-tx-details.js b/ui/app/components/pending-tx-details.js
index e8615404e..973f6ac92 100644
--- a/ui/app/components/pending-tx-details.js
+++ b/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',
diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js
index f1f479794..23b0dc00f 100644
--- a/ui/app/components/pending-tx.js
+++ b/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 })
-        },
-      }),
-
     ])
   )
 }
-- 
cgit v1.2.3


From 57fec36a7d999e4fdfc06e0b1f8649ec39d7eed4 Mon Sep 17 00:00:00 2001
From: Dan Finlay <dan@danfinlay.com>
Date: Mon, 27 Feb 2017 16:06:28 -0800
Subject: Add non-working gas recalculating logic to tx-details view

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

(limited to 'ui')

diff --git a/ui/app/components/pending-tx-details.js b/ui/app/components/pending-tx-details.js
index 973f6ac92..a4ca2d32b 100644
--- a/ui/app/components/pending-tx-details.js
+++ b/ui/app/components/pending-tx-details.js
@@ -1,7 +1,10 @@
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
+const debounce = require('debounce')
+const extend = require('xtend')
 
+const TxUtils = require('../../../app/scripts/lib/tx-utils')
 const MiniAccountPanel = require('./mini-account-panel')
 const EthBalance = require('./eth-balance')
 const util = require('../util')
@@ -21,7 +24,8 @@ const PTXP = PendingTxDetails.prototype
 
 PTXP.render = function () {
   var props = this.props
-  var txData = props.txData
+  var state = this.state || {}
+  var txData = state.txMeta || props.txData
   var state = this.state || {}
 
   var txParams = txData.txParams || {}
@@ -33,11 +37,13 @@ PTXP.render = function () {
   const gas = state.gas || txParams.gas
   const gasPrice = state.gasPrice || txData.gasPrice
 
-  var txFee = txData.txFee || ''
-  var maxCost = txData.maxCost || ''
+  var txFee = state.txFee || txData.txFee || ''
+  var maxCost = state.maxCost || txData.maxCost || ''
   var dataLength = txParams.data ? (txParams.data.length - 2) / 2 : 0
   var imageify = props.imageifyIdenticons === undefined ? true : props.imageifyIdenticons
 
+  log.debug(`rendering gas: ${gas}, gasPrice: ${gasPrice}, txFee: ${txFee}, maxCost: ${maxCost}`)
+
   return (
     h('div', [
 
@@ -138,13 +144,14 @@ PTXP.render = function () {
         h('.cell.row', {
 
         }, [
-          h('.cell.label', 'Total Gas'),
+          h('.cell.label', 'Gas Limit'),
           h('.cell.value', {
 
           }, [
             h(HexInput, {
               value: gas,
               onChange: (newHex) => {
+                log.info(`Gas limit changed to ${newHex}`)
                 this.setState({ gas: newHex })
               },
             }),
@@ -155,12 +162,12 @@ PTXP.render = function () {
         }, [
           h('.cell.label', 'Gas Price'),
           h('.cell.value', {
-
           }, [
             h(HexInput, {
               value: gasPrice,
               onChange: (newHex) => {
-                this.setState({ gas: newHex })
+                log.info(`Gas price changed to: ${newHex}`)
+                this.setState({ gasPrice: newHex })
               },
             }),
           ])
@@ -226,6 +233,62 @@ PTXP.miniAccountPanelForRecipient = function () {
   }
 }
 
+PTXP.componentDidMount = function () {
+  this.txUtils = new TxUtils(web3.currentProvider)
+  this.recalculateGas = debounce(this.calculateGas.bind(this), 300)
+}
+
+PTXP.componentDidUpdate = function (prevProps, prevState) {
+  const state = this.state || {}
+  log.debug(`pending-tx-details componentDidUpdate`)
+  console.log(arguments)
+
+  // Only if gas or gasPrice changed:
+  if (prevState &&
+      (state.gas !== prevState.gas ||
+      state.gasPrice !== prevState.gasPrice) &&
+      this.recalculateGas) {
+    log.debug(`recalculating gas since prev state change: ${JSON.stringify({ prevState, state })}`)
+    this.recalculateGas()
+  }
+}
+
+PTXP.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(`gathered params: ${JSON.stringify(resultTxMeta)}`)
+  return resultTxMeta
+}
+
+PTXP.calculateGas = function () {
+  const txMeta = this.gatherParams()
+  log.debug(`pending-tx-details calculating gas for ${ JSON.stringify(txMeta) }`)
+  const txUtils = this.txUtils
+  this.txUtils.analyzeGasUsage(txMeta, (err, result) => {
+    console.log('ANALYZED')
+    console.dir(arguments)
+    const { txFee, maxCost } = result || txMeta
+    if (txFee === txMeta.txFee && maxCost === txMeta.maxCost) {
+      log.warn(`Recalculating gas resulted in no change.`)
+    }
+    log.debug(`pending-tx-details calculated tx fee: ${txFee} and max cost: ${maxCost}`)
+    this.setState({ txFee, maxCost })
+  })
+}
+
 function forwardCarrat () {
   return (
 
-- 
cgit v1.2.3


From c4e935457589b9bb503a430906515b48a24a6d3d Mon Sep 17 00:00:00 2001
From: Dan Finlay <dan@danfinlay.com>
Date: Mon, 27 Feb 2017 16:09:05 -0800
Subject: Linted

---
 ui/app/components/pending-tx-details.js | 13 ++++++-------
 ui/app/components/pending-tx.js         |  5 -----
 2 files changed, 6 insertions(+), 12 deletions(-)

(limited to 'ui')

diff --git a/ui/app/components/pending-tx-details.js b/ui/app/components/pending-tx-details.js
index a4ca2d32b..c82a46328 100644
--- a/ui/app/components/pending-tx-details.js
+++ b/ui/app/components/pending-tx-details.js
@@ -26,7 +26,6 @@ PTXP.render = function () {
   var props = this.props
   var state = this.state || {}
   var txData = state.txMeta || props.txData
-  var state = this.state || {}
 
   var txParams = txData.txParams || {}
   var address = txParams.from || props.selectedAddress
@@ -155,7 +154,7 @@ PTXP.render = function () {
                 this.setState({ gas: newHex })
               },
             }),
-          ])
+          ]),
         ]),
         h('.cell.row', {
 
@@ -170,7 +169,7 @@ PTXP.render = function () {
                 this.setState({ gasPrice: newHex })
               },
             }),
-          ])
+          ]),
         ]),
         h('.cell.row', {
           style: {
@@ -275,11 +274,11 @@ PTXP.gatherParams = function () {
 
 PTXP.calculateGas = function () {
   const txMeta = this.gatherParams()
-  log.debug(`pending-tx-details calculating gas for ${ JSON.stringify(txMeta) }`)
-  const txUtils = this.txUtils
+  log.debug(`pending-tx-details calculating gas for ${JSON.stringify(txMeta)}`)
   this.txUtils.analyzeGasUsage(txMeta, (err, result) => {
-    console.log('ANALYZED')
-    console.dir(arguments)
+    if (err) {
+      return this.setState({ error: err })
+    }
     const { txFee, maxCost } = result || txMeta
     if (txFee === txMeta.txFee && maxCost === txMeta.maxCost) {
       log.warn(`Recalculating gas resulted in no change.`)
diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js
index 23b0dc00f..3c898edec 100644
--- a/ui/app/components/pending-tx.js
+++ b/ui/app/components/pending-tx.js
@@ -12,12 +12,7 @@ function PendingTx () {
 
 PendingTx.prototype.render = function () {
   const props = this.props
-  const state = this.state || {}
   const txData = props.txData
-  const txParams = txData.txParams
-
-  const gas = state.gas || txParams.gas
-  const gasPrice = state.gasPrice || txData.gasPrice
 
   return (
 
-- 
cgit v1.2.3


From 5d1a4db5e51158523c2c8f3979c91800ddfc041e Mon Sep 17 00:00:00 2001
From: Kevin Serrano <kevgagser@gmail.com>
Date: Mon, 27 Feb 2017 16:33:58 -0800
Subject: Further styling to get hex component working. Fix some typos.

---
 ui/app/components/hex-as-decimal-input.js | 43 +++++++++++++++++++++++--------
 ui/app/components/pending-tx-details.js   | 14 ++++++++--
 ui/app/components/pending-tx.js           |  3 ---
 3 files changed, 44 insertions(+), 16 deletions(-)

(limited to 'ui')

diff --git a/ui/app/components/hex-as-decimal-input.js b/ui/app/components/hex-as-decimal-input.js
index 34f628f7f..bdc0ed191 100644
--- a/ui/app/components/hex-as-decimal-input.js
+++ b/ui/app/components/hex-as-decimal-input.js
@@ -3,6 +3,7 @@ const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const ethUtil = require('ethereumjs-util')
 const BN = ethUtil.BN
+const extend = require('xtend')
 
 module.exports = HexAsDecimalInput
 
@@ -23,20 +24,40 @@ function HexAsDecimalInput () {
 HexAsDecimalInput.prototype.render = function () {
   const props = this.props
   const { value, onChange } = props
-  const decimalValue = decimalize(value)
+  const toEth = props.toEth
+  const suffix = props.suffix
+  const decimalValue = decimalize(value, toEth)
+  const style = props.style
 
   return (
-    h('input', {
+    h('.flex-row', {
       style: {
-        display: 'block',
-        textAlign: 'right',
+        alignItems: 'flex-end',
+        lineHeight: '13px',
+        fontFamily: 'Montserrat Light',
+        textRendering: 'geometricPrecision',
       },
-      value: decimalValue,
-      onChange: (event) => {
-        const hexString = hexify(event.target.value)
-        onChange(hexString)
-      },
-    })
+    }, [
+      h('input.ether-balance.ether-balance-amount', {
+        style: extend({
+          display: 'block',
+          textAlign: 'right',
+          backgroundColor: 'transparent',
+        }, style),
+        value: decimalValue,
+        onChange: (event) => {
+          const hexString = hexify(event.target.value)
+          onChange(hexString)
+        },
+      }),
+      h('div', {
+        style: {
+          color: ' #AEAEAE',
+          fontSize: '12px',
+          marginLeft: '5px',
+        },
+      }, suffix),
+    ])
   )
 }
 
@@ -45,7 +66,7 @@ function hexify (decimalString) {
   return '0x' + hexBN.toString('hex')
 }
 
-function decimalize (input) {
+function decimalize (input, toEth) {
   const strippedInput = ethUtil.stripHexPrefix(input)
   const inputBN = new BN(strippedInput, 'hex')
   return inputBN.toString(10)
diff --git a/ui/app/components/pending-tx-details.js b/ui/app/components/pending-tx-details.js
index 973f6ac92..65eb1d2af 100644
--- a/ui/app/components/pending-tx-details.js
+++ b/ui/app/components/pending-tx-details.js
@@ -138,12 +138,17 @@ PTXP.render = function () {
         h('.cell.row', {
 
         }, [
-          h('.cell.label', 'Total Gas'),
+          h('.cell.label', 'Gas Limit'),
           h('.cell.value', {
 
           }, [
             h(HexInput, {
               value: gas,
+              suffix: 'UNITS',
+              style: {
+                position: 'relative',
+                top: '5px',
+              },
               onChange: (newHex) => {
                 this.setState({ gas: newHex })
               },
@@ -159,8 +164,13 @@ PTXP.render = function () {
           }, [
             h(HexInput, {
               value: gasPrice,
+              suffix: 'WEI',
+              style: {
+                position: 'relative',
+                top: '5px',
+              },
               onChange: (newHex) => {
-                this.setState({ gas: newHex })
+                this.setState({ gasPrice: newHex })
               },
             }),
           ])
diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js
index 23b0dc00f..2b0bb1dfb 100644
--- a/ui/app/components/pending-tx.js
+++ b/ui/app/components/pending-tx.js
@@ -16,9 +16,6 @@ PendingTx.prototype.render = function () {
   const txData = props.txData
   const txParams = txData.txParams
 
-  const gas = state.gas || txParams.gas
-  const gasPrice = state.gasPrice || txData.gasPrice
-
   return (
 
     h('div', {
-- 
cgit v1.2.3


From 2b0e939abdfe8207d47cce863aab48898dbf4e8c Mon Sep 17 00:00:00 2001
From: Kevin Serrano <kevgagser@gmail.com>
Date: Mon, 27 Feb 2017 16:55:58 -0800
Subject: Align input fields for gas.

---
 ui/app/components/hex-as-decimal-input.js | 1 +
 1 file changed, 1 insertion(+)

(limited to 'ui')

diff --git a/ui/app/components/hex-as-decimal-input.js b/ui/app/components/hex-as-decimal-input.js
index bdc0ed191..95d805335 100644
--- a/ui/app/components/hex-as-decimal-input.js
+++ b/ui/app/components/hex-as-decimal-input.js
@@ -55,6 +55,7 @@ HexAsDecimalInput.prototype.render = function () {
           color: ' #AEAEAE',
           fontSize: '12px',
           marginLeft: '5px',
+          width: '20px',
         },
       }, suffix),
     ])
-- 
cgit v1.2.3


From 4370ca0cef1f58e78b7d596c0976d6b18fe998f8 Mon Sep 17 00:00:00 2001
From: Dan Finlay <dan@danfinlay.com>
Date: Mon, 27 Feb 2017 18:18:39 -0800
Subject: Got gas live re-estimating

---
 ui/app/components/hex-as-decimal-input.js |  1 +
 ui/app/components/pending-tx-details.js   | 42 ++++++++++++++++---------------
 2 files changed, 23 insertions(+), 20 deletions(-)

(limited to 'ui')

diff --git a/ui/app/components/hex-as-decimal-input.js b/ui/app/components/hex-as-decimal-input.js
index 95d805335..254232a0a 100644
--- a/ui/app/components/hex-as-decimal-input.js
+++ b/ui/app/components/hex-as-decimal-input.js
@@ -43,6 +43,7 @@ HexAsDecimalInput.prototype.render = function () {
           display: 'block',
           textAlign: 'right',
           backgroundColor: 'transparent',
+          border: '1px solid #bdbdbd',
         }, style),
         value: decimalValue,
         onChange: (event) => {
diff --git a/ui/app/components/pending-tx-details.js b/ui/app/components/pending-tx-details.js
index d6ae8b85f..d94d65d5b 100644
--- a/ui/app/components/pending-tx-details.js
+++ b/ui/app/components/pending-tx-details.js
@@ -1,10 +1,10 @@
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
-const debounce = require('debounce')
 const extend = require('xtend')
+const ethUtil = require('ethereumjs-util')
+const BN = ethUtil.BN
 
-const TxUtils = require('../../../app/scripts/lib/tx-utils')
 const MiniAccountPanel = require('./mini-account-panel')
 const EthBalance = require('./eth-balance')
 const util = require('../util')
@@ -242,11 +242,6 @@ PTXP.miniAccountPanelForRecipient = function () {
   }
 }
 
-PTXP.componentDidMount = function () {
-  this.txUtils = new TxUtils(web3.currentProvider)
-  this.recalculateGas = debounce(this.calculateGas.bind(this), 300)
-}
-
 PTXP.componentDidUpdate = function (prevProps, prevState) {
   const state = this.state || {}
   log.debug(`pending-tx-details componentDidUpdate`)
@@ -255,10 +250,9 @@ PTXP.componentDidUpdate = function (prevProps, prevState) {
   // Only if gas or gasPrice changed:
   if (prevState &&
       (state.gas !== prevState.gas ||
-      state.gasPrice !== prevState.gasPrice) &&
-      this.recalculateGas) {
+      state.gasPrice !== prevState.gasPrice)) {
     log.debug(`recalculating gas since prev state change: ${JSON.stringify({ prevState, state })}`)
-    this.recalculateGas()
+    this.calculateGas()
   }
 }
 
@@ -285,19 +279,27 @@ PTXP.gatherParams = function () {
 PTXP.calculateGas = function () {
   const txMeta = this.gatherParams()
   log.debug(`pending-tx-details calculating gas for ${JSON.stringify(txMeta)}`)
-  this.txUtils.analyzeGasUsage(txMeta, (err, result) => {
-    if (err) {
-      return this.setState({ error: err })
-    }
-    const { txFee, maxCost } = result || txMeta
-    if (txFee === txMeta.txFee && maxCost === txMeta.maxCost) {
-      log.warn(`Recalculating gas resulted in no change.`)
-    }
-    log.debug(`pending-tx-details calculated tx fee: ${txFee} and max cost: ${maxCost}`)
-    this.setState({ txFee, maxCost })
+
+  var txParams = txMeta.txParams
+  var gasMultiplier = txMeta.gasMultiplier
+  var gasCost = new BN(ethUtil.stripHexPrefix(txParams.gas || txMeta.estimatedGas), 16)
+  var gasPrice = new BN(ethUtil.stripHexPrefix(txParams.gasPrice || '0x4a817c800'), 16)
+  gasPrice = gasPrice.mul(new BN(gasMultiplier * 100), 10).div(new BN(100, 10))
+  var txFee = gasCost.mul(gasPrice)
+  var txValue = new BN(ethUtil.stripHexPrefix(txParams.value || '0x0'), 16)
+  var maxCost = txValue.add(txFee)
+
+  this.setState({
+    txFee: '0x' + txFee.toString('hex'),
+    maxCost: '0x' + maxCost.toString('hex'),
   })
 }
 
+function bnFromHex (hex) {
+  var bn = new BN(ethUtil.stripHexPrefix(hex), 16)
+  return bn
+}
+
 function forwardCarrat () {
   return (
 
-- 
cgit v1.2.3


From d844769c926ebc0c43363b4228892e7b2e4e74ee Mon Sep 17 00:00:00 2001
From: Dan Finlay <dan@danfinlay.com>
Date: Mon, 27 Feb 2017 18:26:04 -0800
Subject: Add action for updating and approving a tx in one action

---
 ui/app/actions.js | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

(limited to 'ui')

diff --git a/ui/app/actions.js b/ui/app/actions.js
index 89a4fadfa..b9169a106 100644
--- a/ui/app/actions.js
+++ b/ui/app/actions.js
@@ -94,6 +94,7 @@ var actions = {
   cancelPersonalMsg,
   sendTx: sendTx,
   signTx: signTx,
+  updateAndApproveTx,
   cancelTx: cancelTx,
   completedTx: completedTx,
   txError: txError,
@@ -415,6 +416,20 @@ function sendTx (txData) {
   }
 }
 
+function updateAndApproveTx (txData) {
+  log.info('actions: updateAndApproveTx')
+  return (dispatch) => {
+    log.debug(`actions calling background.updateAndApproveTx`)
+    background.updateAndApproveTransaction(txData, (err) => {
+      if (err) {
+        dispatch(actions.txError(err))
+        return console.error(err.message)
+      }
+      dispatch(actions.completedTx(txData.id))
+    })
+  }
+}
+
 function completedTx (id) {
   return {
     type: actions.COMPLETED_TX,
-- 
cgit v1.2.3


From 2e80e8f722e60573764cddfea0b66739626f717a Mon Sep 17 00:00:00 2001
From: Dan Finlay <dan@danfinlay.com>
Date: Mon, 27 Feb 2017 18:26:18 -0800
Subject: Remove unused function

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

(limited to 'ui')

diff --git a/ui/app/components/pending-tx-details.js b/ui/app/components/pending-tx-details.js
index d94d65d5b..778651d61 100644
--- a/ui/app/components/pending-tx-details.js
+++ b/ui/app/components/pending-tx-details.js
@@ -295,11 +295,6 @@ PTXP.calculateGas = function () {
   })
 }
 
-function bnFromHex (hex) {
-  var bn = new BN(ethUtil.stripHexPrefix(hex), 16)
-  return bn
-}
-
 function forwardCarrat () {
   return (
 
-- 
cgit v1.2.3


From 3ddfdfff98806065291bb39f31d73879aa4939e8 Mon Sep 17 00:00:00 2001
From: Dan Finlay <dan@danfinlay.com>
Date: Mon, 27 Feb 2017 18:33:33 -0800
Subject: Emit updated tx values on accept click

---
 ui/app/components/pending-tx-details.js |  7 +++++++
 ui/app/conf-tx.js                       | 14 +++++++++++++-
 2 files changed, 20 insertions(+), 1 deletion(-)

(limited to 'ui')

diff --git a/ui/app/components/pending-tx-details.js b/ui/app/components/pending-tx-details.js
index 778651d61..1e6299902 100644
--- a/ui/app/components/pending-tx-details.js
+++ b/ui/app/components/pending-tx-details.js
@@ -253,6 +253,13 @@ PTXP.componentDidUpdate = function (prevProps, prevState) {
       state.gasPrice !== prevState.gasPrice)) {
     log.debug(`recalculating gas since prev state change: ${JSON.stringify({ prevState, state })}`)
     this.calculateGas()
+
+  // Otherwise this was a recalculation,
+  // so we should inform the parent:
+  } else {
+    if (this.props.onTxChange) {
+      this.props.onTxChange(this.gatherParams)
+    }
   }
 }
 
diff --git a/ui/app/conf-tx.js b/ui/app/conf-tx.js
index cd4bef2b9..9741d5f32 100644
--- a/ui/app/conf-tx.js
+++ b/ui/app/conf-tx.js
@@ -104,6 +104,8 @@ ConfirmTxScreen.prototype.render = function () {
           accounts: props.accounts,
           identities: props.identities,
           insufficientBalance: this.checkBalanceAgainstTx(txData),
+          // State actions
+          onTxChange: this.updateTxCache.bind(this),
           // Actions
           buyEth: this.buyEth.bind(this, txParams.from || props.selectedAddress),
           sendTransaction: this.sendTransaction.bind(this, txData),
@@ -159,9 +161,19 @@ ConfirmTxScreen.prototype.buyEth = function (address, event) {
   this.props.dispatch(actions.buyEthView(address))
 }
 
+// Allows the detail view to update the gas calculations,
+// for manual gas controls.
+ConfirmTxScreen.prototype.onTxChange = function (txData) {
+  this.setState({ txData })
+}
+
+// Must default to any local state txData,
+// to allow manual override of gas calculations.
 ConfirmTxScreen.prototype.sendTransaction = function (txData, event) {
   event.stopPropagation()
-  this.props.dispatch(actions.sendTx(txData))
+  const state = this.state || {}
+  const txMeta = state.txData
+  this.props.dispatch(actions.sendTx(txMeta || txData))
 }
 
 ConfirmTxScreen.prototype.cancelTransaction = function (txData, event) {
-- 
cgit v1.2.3


From 0e817c9e7fae4c60f0baf52be60fd7489c977b38 Mon Sep 17 00:00:00 2001
From: Dan Finlay <dan@danfinlay.com>
Date: Mon, 27 Feb 2017 18:36:43 -0800
Subject: Reorder rows for better table logic

---
 ui/app/components/pending-tx-details.js | 69 ++++++++++++++++++---------------
 1 file changed, 37 insertions(+), 32 deletions(-)

(limited to 'ui')

diff --git a/ui/app/components/pending-tx-details.js b/ui/app/components/pending-tx-details.js
index 1e6299902..510ef78e6 100644
--- a/ui/app/components/pending-tx-details.js
+++ b/ui/app/components/pending-tx-details.js
@@ -108,44 +108,18 @@ PTXP.render = function () {
 
       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', 'Max Transaction Fee'),
-          h(EthBalance, { value: txFee.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',
-            }),
-          ]),
-        ]),
-        h('.cell.row', {
-
-        }, [
           h('.cell.label', 'Gas Limit'),
           h('.cell.value', {
-
           }, [
             h(HexInput, {
               value: gas,
@@ -161,9 +135,9 @@ PTXP.render = function () {
             }),
           ]),
         ]),
-        h('.cell.row', {
 
-        }, [
+        // Gas Price (customizable)
+        h('.cell.row', [
           h('.cell.label', 'Gas Price'),
           h('.cell.value', {
           }, [
@@ -181,6 +155,37 @@ PTXP.render = function () {
             }),
           ]),
         ]),
+
+        // Max Transaction Fee (calculated)
+        h('.cell.row', [
+          h('.cell.label', 'Max Transaction Fee'),
+          h(EthBalance, { value: txFee.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',
-- 
cgit v1.2.3


From 04df5c1f2ded53229edbff85401c659c958389f0 Mon Sep 17 00:00:00 2001
From: Dan Finlay <dan@danfinlay.com>
Date: Tue, 28 Feb 2017 10:06:59 -0800
Subject: Fix reference

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

(limited to 'ui')

diff --git a/ui/app/conf-tx.js b/ui/app/conf-tx.js
index 9741d5f32..de2c73cbc 100644
--- a/ui/app/conf-tx.js
+++ b/ui/app/conf-tx.js
@@ -105,7 +105,7 @@ ConfirmTxScreen.prototype.render = function () {
           identities: props.identities,
           insufficientBalance: this.checkBalanceAgainstTx(txData),
           // State actions
-          onTxChange: this.updateTxCache.bind(this),
+          onTxChange: this.onTxChange.bind(this),
           // Actions
           buyEth: this.buyEth.bind(this, txParams.from || props.selectedAddress),
           sendTransaction: this.sendTransaction.bind(this, txData),
-- 
cgit v1.2.3


From 666044d417d45ee0e5e491cac388d1f57ee83932 Mon Sep 17 00:00:00 2001
From: Kevin Serrano <kevgagser@gmail.com>
Date: Tue, 28 Feb 2017 10:23:47 -0800
Subject: Add margins to align.

---
 ui/app/components/hex-as-decimal-input.js | 1 +
 1 file changed, 1 insertion(+)

(limited to 'ui')

diff --git a/ui/app/components/hex-as-decimal-input.js b/ui/app/components/hex-as-decimal-input.js
index 254232a0a..523c1264b 100644
--- a/ui/app/components/hex-as-decimal-input.js
+++ b/ui/app/components/hex-as-decimal-input.js
@@ -56,6 +56,7 @@ HexAsDecimalInput.prototype.render = function () {
           color: ' #AEAEAE',
           fontSize: '12px',
           marginLeft: '5px',
+          marginRight: '6px',
           width: '20px',
         },
       }, suffix),
-- 
cgit v1.2.3


From 45138af6c6b97f795bac954ffb1229a3569591bc Mon Sep 17 00:00:00 2001
From: Dan Finlay <dan@danfinlay.com>
Date: Tue, 28 Feb 2017 11:35:04 -0800
Subject: Fix infinite loop bug

---
 ui/app/components/pending-tx-details.js | 68 ++++++++++++++++++---------------
 ui/app/conf-tx.js                       |  1 +
 2 files changed, 39 insertions(+), 30 deletions(-)

(limited to 'ui')

diff --git a/ui/app/components/pending-tx-details.js b/ui/app/components/pending-tx-details.js
index 510ef78e6..643e69902 100644
--- a/ui/app/components/pending-tx-details.js
+++ b/ui/app/components/pending-tx-details.js
@@ -247,27 +247,55 @@ PTXP.miniAccountPanelForRecipient = function () {
   }
 }
 
-PTXP.componentDidUpdate = function (prevProps, prevState) {
+PTXP.componentDidUpdate = function (prevProps, previousState) {
   const state = this.state || {}
+  const prevState = previousState || {}
+  const { gas, gasPrice } = state
+
   log.debug(`pending-tx-details componentDidUpdate`)
   console.log(arguments)
 
   // Only if gas or gasPrice changed:
-  if (prevState &&
-      (state.gas !== prevState.gas ||
-      state.gasPrice !== prevState.gasPrice)) {
+  if (!prevState ||
+      (gas !== prevState.gas ||
+      gasPrice !== prevState.gasPrice)) {
     log.debug(`recalculating gas since prev state change: ${JSON.stringify({ prevState, state })}`)
     this.calculateGas()
+  }
+}
 
-  // Otherwise this was a recalculation,
-  // so we should inform the parent:
-  } else {
-    if (this.props.onTxChange) {
-      this.props.onTxChange(this.gatherParams)
-    }
+PTXP.calculateGas = function () {
+  const txMeta = this.gatherParams()
+  log.debug(`pending-tx-details calculating gas for ${JSON.stringify(txMeta)}`)
+
+  var txParams = txMeta.txParams
+  var gasMultiplier = txMeta.gasMultiplier
+  var gasCost = new BN(ethUtil.stripHexPrefix(txParams.gas || txMeta.estimatedGas), 16)
+  var gasPrice = new BN(ethUtil.stripHexPrefix(txParams.gasPrice || '0x4a817c800'), 16)
+  gasPrice = gasPrice.mul(new BN(gasMultiplier * 100), 10).div(new BN(100, 10))
+  var txFee = gasCost.mul(gasPrice)
+  var txValue = new BN(ethUtil.stripHexPrefix(txParams.value || '0x0'), 16)
+  var 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
+
+  this.setState({
+    txFee: '0x' + txFee.toString('hex'),
+    maxCost: '0x' + maxCost.toString('hex'),
+  })
+
+  if (this.props.onTxChange) {
+    this.props.onTxChange(txMeta)
   }
 }
 
+// After a customizable state value has been updated,
 PTXP.gatherParams = function () {
   log.debug(`pending-tx-details#gatherParams`)
   const props = this.props
@@ -284,29 +312,9 @@ PTXP.gatherParams = function () {
   const resultTxMeta = extend(txData, {
     txParams: resultTx,
   })
-  log.debug(`gathered params: ${JSON.stringify(resultTxMeta)}`)
   return resultTxMeta
 }
 
-PTXP.calculateGas = function () {
-  const txMeta = this.gatherParams()
-  log.debug(`pending-tx-details calculating gas for ${JSON.stringify(txMeta)}`)
-
-  var txParams = txMeta.txParams
-  var gasMultiplier = txMeta.gasMultiplier
-  var gasCost = new BN(ethUtil.stripHexPrefix(txParams.gas || txMeta.estimatedGas), 16)
-  var gasPrice = new BN(ethUtil.stripHexPrefix(txParams.gasPrice || '0x4a817c800'), 16)
-  gasPrice = gasPrice.mul(new BN(gasMultiplier * 100), 10).div(new BN(100, 10))
-  var txFee = gasCost.mul(gasPrice)
-  var txValue = new BN(ethUtil.stripHexPrefix(txParams.value || '0x0'), 16)
-  var maxCost = txValue.add(txFee)
-
-  this.setState({
-    txFee: '0x' + txFee.toString('hex'),
-    maxCost: '0x' + maxCost.toString('hex'),
-  })
-}
-
 function forwardCarrat () {
   return (
 
diff --git a/ui/app/conf-tx.js b/ui/app/conf-tx.js
index de2c73cbc..0a59eee37 100644
--- a/ui/app/conf-tx.js
+++ b/ui/app/conf-tx.js
@@ -164,6 +164,7 @@ ConfirmTxScreen.prototype.buyEth = function (address, event) {
 // Allows the detail view to update the gas calculations,
 // for manual gas controls.
 ConfirmTxScreen.prototype.onTxChange = function (txData) {
+  log.debug(`conf-tx onTxChange triggered with ${JSON.stringify(txData)}`)
   this.setState({ txData })
 }
 
-- 
cgit v1.2.3


From 2e16e1eb94d0ec68da74d3ee4ce1c9ac2115c13d Mon Sep 17 00:00:00 2001
From: Dan Finlay <dan@danfinlay.com>
Date: Tue, 28 Feb 2017 12:00:07 -0800
Subject: Fixed bug that made send screen sometimes transition to account
 detail

---
 ui/app/conf-tx.js      | 3 ++-
 ui/app/reducers/app.js | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

(limited to 'ui')

diff --git a/ui/app/conf-tx.js b/ui/app/conf-tx.js
index 0a59eee37..ed633553b 100644
--- a/ui/app/conf-tx.js
+++ b/ui/app/conf-tx.js
@@ -13,6 +13,7 @@ const BN = ethUtil.BN
 const PendingTx = require('./components/pending-tx')
 const PendingMsg = require('./components/pending-msg')
 const PendingPersonalMsg = require('./components/pending-personal-msg')
+const Loading = require('./components/loading')
 
 module.exports = connect(mapStateToProps)(ConfirmTxScreen)
 
@@ -48,7 +49,7 @@ ConfirmTxScreen.prototype.render = function () {
   var isNotification = isPopupOrNotification() === 'notification'
 
   log.info(`rendering a combined ${unconfTxList.length} unconf msg & txs`)
-  if (unconfTxList.length === 0) return null
+  if (unconfTxList.length === 0) return h(Loading)
 
   return (
 
diff --git a/ui/app/reducers/app.js b/ui/app/reducers/app.js
index 136326301..7ea1e1d7c 100644
--- a/ui/app/reducers/app.js
+++ b/ui/app/reducers/app.js
@@ -291,7 +291,7 @@ function reduceApp (state, action) {
     case actions.SHOW_CONF_TX_PAGE:
       return extend(appState, {
         currentView: {
-          name: pendingTxs ? 'confTx' : 'account-detail',
+          name: 'confTx',
           context: 0,
         },
         transForward: action.transForward,
-- 
cgit v1.2.3


From 5a74c0fcad92cf4192eefedcb092d4525157902f Mon Sep 17 00:00:00 2001
From: Dan Finlay <dan@danfinlay.com>
Date: Tue, 28 Feb 2017 12:12:18 -0800
Subject: Fix bug that showed conf-tx screen on boot at wrong times

---
 ui/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'ui')

diff --git a/ui/index.js b/ui/index.js
index 6b65f12d4..1a65f813c 100644
--- a/ui/index.js
+++ b/ui/index.js
@@ -37,7 +37,7 @@ function startApp (metamaskState, accountManager, opts) {
   })
 
   // if unconfirmed txs, start on txConf page
-  var unapprovedTxsAll = txHelper(metamaskState.unapprovedTxs, metamaskState.unapprovedMsgs, metamaskState.network)
+  var unapprovedTxsAll = txHelper(metamaskState.unapprovedTxs, metamaskState.unapprovedMsgs, metamaskState.unapprovedPersonalMsgs, metamaskState.network)
   if (unapprovedTxsAll.length > 0) {
     store.dispatch(actions.showConfTxPage())
   }
-- 
cgit v1.2.3


From acfb6ff0f87309f45ade0ec4c5a3bd3d7cbad35c Mon Sep 17 00:00:00 2001
From: Kevin Serrano <kevgagser@gmail.com>
Date: Tue, 28 Feb 2017 14:07:19 -0800
Subject: Hide gas options behind an advanced options checkbox.

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

(limited to 'ui')

diff --git a/ui/app/components/pending-tx-details.js b/ui/app/components/pending-tx-details.js
index 643e69902..9bb75bd98 100644
--- a/ui/app/components/pending-tx-details.js
+++ b/ui/app/components/pending-tx-details.js
@@ -40,6 +40,7 @@ PTXP.render = function () {
   var maxCost = state.maxCost || txData.maxCost || ''
   var dataLength = txParams.data ? (txParams.data.length - 2) / 2 : 0
   var imageify = props.imageifyIdenticons === undefined ? true : props.imageifyIdenticons
+  var advanced = state.advanced || false
 
   log.debug(`rendering gas: ${gas}, gasPrice: ${gasPrice}, txFee: ${txFee}, maxCost: ${maxCost}`)
 
@@ -108,6 +109,17 @@ PTXP.render = function () {
 
       h('.table-box', [
 
+        h('.row', [
+          h('.cell.label', 'Advanced Options'),
+          h('input', {
+            type: 'checkbox',
+            selected: advanced,
+            onChange: () => {
+              this.setState({advanced: !advanced})
+            }
+          })
+        ]),
+
         // Ether Value
         // Currently not customizable, but easily modified
         // in the way that gas and gasLimit currently are.
@@ -117,7 +129,7 @@ PTXP.render = function () {
         ]),
 
         // Gas Limit (customizable)
-        h('.cell.row', [
+        advanced ? h('.cell.row', [
           h('.cell.label', 'Gas Limit'),
           h('.cell.value', {
           }, [
@@ -134,10 +146,10 @@ PTXP.render = function () {
               },
             }),
           ]),
-        ]),
+        ]) : null,
 
         // Gas Price (customizable)
-        h('.cell.row', [
+        advanced ? h('.cell.row', [
           h('.cell.label', 'Gas Price'),
           h('.cell.value', {
           }, [
@@ -154,7 +166,7 @@ PTXP.render = function () {
               },
             }),
           ]),
-        ]),
+        ]) : null,
 
         // Max Transaction Fee (calculated)
         h('.cell.row', [
-- 
cgit v1.2.3


From da88481560f0f2ad7e12b3e94082aa10147b900e Mon Sep 17 00:00:00 2001
From: Dan Finlay <dan@danfinlay.com>
Date: Tue, 28 Feb 2017 14:08:00 -0800
Subject: Remove gasMultiplier txMeta param

This was used by the custom gas slider on the `send` screen, and it was used to modify the gas value before sending it out, breaking our new custom gas field logic.

Removed it and the logic that referred to this now-outdated parameter.
---
 ui/app/actions.js                       | 14 +++----
 ui/app/components/pending-tx-details.js |  6 +--
 ui/app/send.js                          | 71 +--------------------------------
 3 files changed, 7 insertions(+), 84 deletions(-)

(limited to 'ui')

diff --git a/ui/app/actions.js b/ui/app/actions.js
index b9169a106..8177696f1 100644
--- a/ui/app/actions.js
+++ b/ui/app/actions.js
@@ -388,17 +388,13 @@ function signPersonalMsg (msgData) {
 
 function signTx (txData) {
   return (dispatch) => {
-    log.debug(`background.setGasMultiplier`)
-    background.setGasMultiplier(txData.gasMultiplier, (err) => {
+    web3.eth.sendTransaction(txData, (err, data) => {
+      dispatch(actions.hideLoadingIndication())
       if (err) return dispatch(actions.displayWarning(err.message))
-      web3.eth.sendTransaction(txData, (err, data) => {
-        dispatch(actions.hideLoadingIndication())
-        if (err) return dispatch(actions.displayWarning(err.message))
-        dispatch(actions.hideWarning())
-        dispatch(actions.goHome())
-      })
-      dispatch(this.showConfTxPage())
+      dispatch(actions.hideWarning())
+      dispatch(actions.goHome())
     })
+    dispatch(this.showConfTxPage())
   }
 }
 
diff --git a/ui/app/components/pending-tx-details.js b/ui/app/components/pending-tx-details.js
index 643e69902..f5651bb1d 100644
--- a/ui/app/components/pending-tx-details.js
+++ b/ui/app/components/pending-tx-details.js
@@ -248,13 +248,11 @@ PTXP.miniAccountPanelForRecipient = function () {
 }
 
 PTXP.componentDidUpdate = function (prevProps, previousState) {
+  log.debug(`pending-tx-details componentDidUpdate`)
   const state = this.state || {}
   const prevState = previousState || {}
   const { gas, gasPrice } = state
 
-  log.debug(`pending-tx-details componentDidUpdate`)
-  console.log(arguments)
-
   // Only if gas or gasPrice changed:
   if (!prevState ||
       (gas !== prevState.gas ||
@@ -269,10 +267,8 @@ PTXP.calculateGas = function () {
   log.debug(`pending-tx-details calculating gas for ${JSON.stringify(txMeta)}`)
 
   var txParams = txMeta.txParams
-  var gasMultiplier = txMeta.gasMultiplier
   var gasCost = new BN(ethUtil.stripHexPrefix(txParams.gas || txMeta.estimatedGas), 16)
   var gasPrice = new BN(ethUtil.stripHexPrefix(txParams.gasPrice || '0x4a817c800'), 16)
-  gasPrice = gasPrice.mul(new BN(gasMultiplier * 100), 10).div(new BN(100, 10))
   var txFee = gasCost.mul(gasPrice)
   var txValue = new BN(ethUtil.stripHexPrefix(txParams.value || '0x0'), 16)
   var maxCost = txValue.add(txFee)
diff --git a/ui/app/send.js b/ui/app/send.js
index d16270b41..752eed15a 100644
--- a/ui/app/send.js
+++ b/ui/app/send.js
@@ -208,73 +208,6 @@ SendTransactionScreen.prototype.render = function () {
           },
         }),
       ]),
-      // custom gasPrice field
-      h('h3.flex-center.text-transform-uppercase', {
-        style: {
-          background: '#EBEBEB',
-          color: '#AEAEAE',
-          marginBottom: '5px',
-        },
-      }, [
-        'Transaction Fee (optional)',
-        h(Tooltip, {
-          title: `
-            This is used to set the transaction's gas price.
-            Setting it to 100% will use the full recommended value.          `,
-        }, [
-          h('i.fa.fa-question-circle', {
-            style: {
-              marginLeft: '5px',
-            },
-          }),
-        ]),
-      ]),
-
-      h('section.flex-column.flex-center', [
-        h('.flex-row', [
-          h(RangeSlider, {
-            name: 'gasInput',
-            options: {
-              mirrorInput: true,
-              defaultValue: 100,
-              min: 80,
-              max: 220,
-            },
-            style: {
-              container: {
-                marginBottom: '16px',
-              },
-              range: {
-                width: '68vw',
-              },
-              input: {
-                width: '5em',
-                marginLeft: '5px',
-              },
-            },
-          }),
-
-          h('div', {
-            style: {
-              fontSize: '12px',
-              paddingTop: '8px',
-              paddingLeft: '5px',
-            },
-          }, '%'),
-        ]),
-        h('.flex-row', {
-          style: {
-            justifyContent: 'space-between',
-            width: '243px',
-            position: 'relative',
-            fontSize: '12px',
-            right: '42px',
-            bottom: '30px',
-          },
-        }, [
-          h('span', 'Cheaper'), h('span', 'Faster'),
-        ]),
-      ]),
     ])
   )
 }
@@ -289,12 +222,11 @@ SendTransactionScreen.prototype.back = function () {
   this.props.dispatch(actions.backToAccountDetail(address))
 }
 
-SendTransactionScreen.prototype.onSubmit = function (gasPrice) {
+SendTransactionScreen.prototype.onSubmit = function () {
   const recipient = document.querySelector('input[name="address"]').value
   const input = document.querySelector('input[name="amount"]').value
   const value = util.normalizeEthStringToWei(input)
   const txData = document.querySelector('input[name="txData"]').value
-  const gasMultiplier = document.querySelector('input[name="gasInput"]').value
   const balance = this.props.balance
   let message
 
@@ -323,7 +255,6 @@ SendTransactionScreen.prototype.onSubmit = function (gasPrice) {
   var txParams = {
     from: this.props.address,
     value: '0x' + value.toString(16),
-    gasMultiplier: gasMultiplier * 0.01,
   }
 
   if (recipient) txParams.to = ethUtil.addHexPrefix(recipient)
-- 
cgit v1.2.3


From 486583e20371204d3a406a3984da0006fcfd8c56 Mon Sep 17 00:00:00 2001
From: Kevin Serrano <kevgagser@gmail.com>
Date: Tue, 28 Feb 2017 14:12:50 -0800
Subject: lint

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

(limited to 'ui')

diff --git a/ui/app/components/pending-tx-details.js b/ui/app/components/pending-tx-details.js
index 9bb75bd98..b3260e112 100644
--- a/ui/app/components/pending-tx-details.js
+++ b/ui/app/components/pending-tx-details.js
@@ -116,8 +116,8 @@ PTXP.render = function () {
             selected: advanced,
             onChange: () => {
               this.setState({advanced: !advanced})
-            }
-          })
+            },
+          }),
         ]),
 
         // Ether Value
@@ -168,6 +168,8 @@ PTXP.render = function () {
           ]),
         ]) : null,
 
+
+
         // Max Transaction Fee (calculated)
         h('.cell.row', [
           h('.cell.label', 'Max Transaction Fee'),
-- 
cgit v1.2.3


From e07e4b7bc73da1d5a2712893cc03e6f4bd90fb6d Mon Sep 17 00:00:00 2001
From: Dan Finlay <dan@danfinlay.com>
Date: Tue, 28 Feb 2017 14:12:07 -0800
Subject: Linted

---
 ui/app/components/pending-tx-details.js | 4 ++--
 ui/app/send.js                          | 2 --
 2 files changed, 2 insertions(+), 4 deletions(-)

(limited to 'ui')

diff --git a/ui/app/components/pending-tx-details.js b/ui/app/components/pending-tx-details.js
index 892ef4ad6..9a8f202be 100644
--- a/ui/app/components/pending-tx-details.js
+++ b/ui/app/components/pending-tx-details.js
@@ -116,8 +116,8 @@ PTXP.render = function () {
             selected: advanced,
             onChange: () => {
               this.setState({advanced: !advanced})
-            }
-          })
+            },
+          }),
         ]),
 
         // Ether Value
diff --git a/ui/app/send.js b/ui/app/send.js
index 752eed15a..581e3afa0 100644
--- a/ui/app/send.js
+++ b/ui/app/send.js
@@ -10,8 +10,6 @@ const addressSummary = require('./util').addressSummary
 const isHex = require('./util').isHex
 const EthBalance = require('./components/eth-balance')
 const ethUtil = require('ethereumjs-util')
-const RangeSlider = require('./components/range-slider')
-const Tooltip = require('./components/tooltip')
 module.exports = connect(mapStateToProps)(SendTransactionScreen)
 
 function mapStateToProps (state) {
-- 
cgit v1.2.3


From d21915c605a502d306acd8b728d920217d0f13df Mon Sep 17 00:00:00 2001
From: Kevin Serrano <kevgagser@gmail.com>
Date: Tue, 28 Feb 2017 14:19:32 -0800
Subject: Remove advanced options for now.

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

(limited to 'ui')

diff --git a/ui/app/components/pending-tx-details.js b/ui/app/components/pending-tx-details.js
index a9172d4ad..040fc2f34 100644
--- a/ui/app/components/pending-tx-details.js
+++ b/ui/app/components/pending-tx-details.js
@@ -109,17 +109,6 @@ PTXP.render = function () {
 
       h('.table-box', [
 
-        h('.row', [
-          h('.cell.label', 'Advanced Options'),
-          h('input', {
-            type: 'checkbox',
-            selected: advanced,
-            onChange: () => {
-              this.setState({advanced: !advanced})
-            },
-          }),
-        ]),
-
         // Ether Value
         // Currently not customizable, but easily modified
         // in the way that gas and gasLimit currently are.
@@ -129,7 +118,7 @@ PTXP.render = function () {
         ]),
 
         // Gas Limit (customizable)
-        advanced ? h('.cell.row', [
+        h('.cell.row', [
           h('.cell.label', 'Gas Limit'),
           h('.cell.value', {
           }, [
@@ -146,10 +135,10 @@ PTXP.render = function () {
               },
             }),
           ]),
-        ]) : null,
+        ]),
 
         // Gas Price (customizable)
-        advanced ? h('.cell.row', [
+        h('.cell.row', [
           h('.cell.label', 'Gas Price'),
           h('.cell.value', {
           }, [
@@ -166,7 +155,7 @@ PTXP.render = function () {
               },
             }),
           ]),
-        ]) : null,
+        ]),
 
 
 
-- 
cgit v1.2.3


From 9fb4b4a77fb97e5bf1081127071c232d9729e8eb Mon Sep 17 00:00:00 2001
From: Kevin Serrano <kevgagser@gmail.com>
Date: Tue, 28 Feb 2017 14:21:44 -0800
Subject: lints

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

(limited to 'ui')

diff --git a/ui/app/components/pending-tx-details.js b/ui/app/components/pending-tx-details.js
index 040fc2f34..f5651bb1d 100644
--- a/ui/app/components/pending-tx-details.js
+++ b/ui/app/components/pending-tx-details.js
@@ -40,7 +40,6 @@ PTXP.render = function () {
   var maxCost = state.maxCost || txData.maxCost || ''
   var dataLength = txParams.data ? (txParams.data.length - 2) / 2 : 0
   var imageify = props.imageifyIdenticons === undefined ? true : props.imageifyIdenticons
-  var advanced = state.advanced || false
 
   log.debug(`rendering gas: ${gas}, gasPrice: ${gasPrice}, txFee: ${txFee}, maxCost: ${maxCost}`)
 
@@ -157,8 +156,6 @@ PTXP.render = function () {
           ]),
         ]),
 
-
-
         // Max Transaction Fee (calculated)
         h('.cell.row', [
           h('.cell.label', 'Max Transaction Fee'),
-- 
cgit v1.2.3


From f908aaafbc0c3ed94ef8892b9bd16a9c1b49269f Mon Sep 17 00:00:00 2001
From: Dan Finlay <dan@danfinlay.com>
Date: Tue, 28 Feb 2017 14:45:21 -0800
Subject: Use correct action to update and submit tx

---
 ui/app/actions.js | 4 ++--
 ui/app/conf-tx.js | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

(limited to 'ui')

diff --git a/ui/app/actions.js b/ui/app/actions.js
index 8177696f1..7f972fb37 100644
--- a/ui/app/actions.js
+++ b/ui/app/actions.js
@@ -399,7 +399,7 @@ function signTx (txData) {
 }
 
 function sendTx (txData) {
-  log.info('actions: sendTx')
+  log.info(`actions - sendTx: ${JSON.stringify(txData.txParams)}`)
   return (dispatch) => {
     log.debug(`actions calling background.approveTransaction`)
     background.approveTransaction(txData.id, (err) => {
@@ -413,7 +413,7 @@ function sendTx (txData) {
 }
 
 function updateAndApproveTx (txData) {
-  log.info('actions: updateAndApproveTx')
+  log.info('actions: updateAndApproveTx: ' + JSON.stringify(txData))
   return (dispatch) => {
     log.debug(`actions calling background.updateAndApproveTx`)
     background.updateAndApproveTransaction(txData, (err) => {
diff --git a/ui/app/conf-tx.js b/ui/app/conf-tx.js
index ed633553b..7e93ea29f 100644
--- a/ui/app/conf-tx.js
+++ b/ui/app/conf-tx.js
@@ -175,7 +175,7 @@ ConfirmTxScreen.prototype.sendTransaction = function (txData, event) {
   event.stopPropagation()
   const state = this.state || {}
   const txMeta = state.txData
-  this.props.dispatch(actions.sendTx(txMeta || txData))
+  this.props.dispatch(actions.updateAndApproveTx(txMeta || txData))
 }
 
 ConfirmTxScreen.prototype.cancelTransaction = function (txData, event) {
-- 
cgit v1.2.3


From 576cc9eb754258f3a534633af460ff657c8e112a Mon Sep 17 00:00:00 2001
From: Kevin Serrano <kevgagser@gmail.com>
Date: Tue, 28 Feb 2017 15:21:48 -0800
Subject: Gas and Gaslimit revert to default if set to 0

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

(limited to 'ui')

diff --git a/ui/app/components/pending-tx-details.js b/ui/app/components/pending-tx-details.js
index f5651bb1d..5eade525a 100644
--- a/ui/app/components/pending-tx-details.js
+++ b/ui/app/components/pending-tx-details.js
@@ -35,6 +35,8 @@ PTXP.render = function () {
 
   const gas = state.gas || txParams.gas
   const gasPrice = state.gasPrice || txData.gasPrice
+  const gasDefault = gas
+  const gasPriceDefault = gasPrice
 
   var txFee = state.txFee || txData.txFee || ''
   var maxCost = state.maxCost || txData.maxCost || ''
@@ -130,7 +132,11 @@ PTXP.render = function () {
               },
               onChange: (newHex) => {
                 log.info(`Gas limit changed to ${newHex}`)
-                this.setState({ gas: newHex })
+                if (newHex === '0x0') {
+                  this.setState({gas: gasDefault})
+                } else {
+                  this.setState({ gas: newHex })
+                }
               },
             }),
           ]),
@@ -150,7 +156,11 @@ PTXP.render = function () {
               },
               onChange: (newHex) => {
                 log.info(`Gas price changed to: ${newHex}`)
-                this.setState({ gasPrice: newHex })
+                if (newHex === '0x0') {
+                  this.setState({gasPrice: gasPriceDefault})
+                } else {
+                  this.setState({ gasPrice: newHex })
+                }
               },
             }),
           ]),
-- 
cgit v1.2.3


From ddc136a7c25d9b0f8a1fca2b9ea2fc490e601c83 Mon Sep 17 00:00:00 2001
From: Dan Finlay <dan@danfinlay.com>
Date: Tue, 28 Feb 2017 15:41:17 -0800
Subject: Add a couple more debug logs

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

(limited to 'ui')

diff --git a/ui/app/components/pending-tx-details.js b/ui/app/components/pending-tx-details.js
index f5651bb1d..eddf7db4c 100644
--- a/ui/app/components/pending-tx-details.js
+++ b/ui/app/components/pending-tx-details.js
@@ -308,6 +308,7 @@ PTXP.gatherParams = function () {
   const resultTxMeta = extend(txData, {
     txParams: resultTx,
   })
+  log.debug(`UI has computed tx params ${JSON.stringify(resultTx)}`)
   return resultTxMeta
 }
 
-- 
cgit v1.2.3


From a600ccd4f863d7a473392fc283f4cec248225a27 Mon Sep 17 00:00:00 2001
From: Kevin Serrano <kevgagser@gmail.com>
Date: Tue, 28 Feb 2017 16:36:05 -0800
Subject: Add reset button to reset gas fields.

---
 ui/app/components/pending-tx-details.js | 14 +++++++++++---
 ui/app/components/pending-tx.js         | 10 +++++++++-
 2 files changed, 20 insertions(+), 4 deletions(-)

(limited to 'ui')

diff --git a/ui/app/components/pending-tx-details.js b/ui/app/components/pending-tx-details.js
index 61e18c706..b1ab9576b 100644
--- a/ui/app/components/pending-tx-details.js
+++ b/ui/app/components/pending-tx-details.js
@@ -12,7 +12,6 @@ const addressSummary = util.addressSummary
 const nameForAddress = require('../../lib/contract-namer')
 const HexInput = require('./hex-as-decimal-input')
 
-
 module.exports = PendingTxDetails
 
 inherits(PendingTxDetails, Component)
@@ -35,8 +34,8 @@ PTXP.render = function () {
 
   const gas = state.gas || txParams.gas
   const gasPrice = state.gasPrice || txData.gasPrice
-  const gasDefault = gas
-  const gasPriceDefault = gasPrice
+  const gasDefault = txParams.gas
+  const gasPriceDefault = txData.gasPrice
 
   var txFee = state.txFee || txData.txFee || ''
   var maxCost = state.maxCost || txData.maxCost || ''
@@ -301,6 +300,15 @@ PTXP.calculateGas = function () {
   }
 }
 
+PTXP.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,
 PTXP.gatherParams = function () {
   log.debug(`pending-tx-details#gatherParams`)
diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js
index 3c898edec..d39cbc0f8 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 PendingTxDetails = require('./pending-tx-details')
+const extend = require('xtend')
 
 module.exports = PendingTx
 
@@ -12,6 +13,7 @@ function PendingTx () {
 
 PendingTx.prototype.render = function () {
   const props = this.props
+  const newProps = extend(props, {ref: 'details'})
   const txData = props.txData
 
   return (
@@ -21,7 +23,7 @@ PendingTx.prototype.render = function () {
     }, [
 
       // tx info
-      h(PendingTxDetails, props),
+      h(PendingTxDetails, newProps),
 
       h('style', `
         .conf-buttons button {
@@ -71,6 +73,12 @@ PendingTx.prototype.render = function () {
         h('button.cancel.btn-red', {
           onClick: props.cancelTransaction,
         }, 'Reject'),
+
+        h('button', {
+          onClick: () => {
+            this.refs.details.resetGasFields()
+          },
+        }, 'Reset'),
       ]),
     ])
   )
-- 
cgit v1.2.3