Merge branch 'master' into networkController

1 files changed, 56 insertions, 39 deletions

diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js
index 5ea885195..0d1f06ba6 100644
--- a/ui/app/components/pending-tx.js
+++ b/ui/app/components/pending-tx.js
@@ -1,5 +1,4 @@
 const Component = require('react').Component
-const connect = require('react-redux').connect
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const actions = require('../actions')
@@ -20,12 +19,7 @@ const GWEI_FACTOR = new BN(1e9)
 const MIN_GAS_PRICE_BN = MIN_GAS_PRICE_GWEI_BN.mul(GWEI_FACTOR)
 const MIN_GAS_LIMIT_BN = new BN(21000)
 
-module.exports = connect(mapStateToProps)(PendingTx)
-
-function mapStateToProps (state) {
-  return {}
-}
-
+module.exports = PendingTx
 inherits(PendingTx, Component)
 function PendingTx () {
   Component.call(this)
@@ -37,7 +31,9 @@ function PendingTx () {
 
 PendingTx.prototype.render = function () {
   const props = this.props
+  const { currentCurrency } = props
 
+  const conversionRate = props.conversionRate
   const txMeta = this.gatherTxMeta()
   const txParams = txMeta.txParams || {}
 
@@ -61,7 +57,6 @@ PendingTx.prototype.render = function () {
   const maxCost = txFeeBn.add(valueBn)
 
   const dataLength = txParams.data ? (txParams.data.length - 2) / 2 : 0
-  const imageify = props.imageifyIdenticons === undefined ? true : props.imageifyIdenticons
 
   const balanceBn = hexToBn(balance)
   const insufficientBalance = balanceBn.lt(maxCost)
@@ -75,18 +70,8 @@ PendingTx.prototype.render = function () {
     }, [
 
       h('form#pending-tx-form', {
-        onSubmit: (event) => {
-          const txMeta = this.gatherTxMeta()
-          event.preventDefault()
-          const form = document.querySelector('form#pending-tx-form')
-          const valid = form.checkValidity()
-          this.setState({ valid })
-          if (valid && this.verifyGasParams()) {
-            props.sendTransaction(txMeta, event)
-          } else {
-            this.props.dispatch(actions.displayWarning('Invalid Gas Parameters'))
-          }
-        },
+        onSubmit: this.onSubmit.bind(this),
+
       }, [
 
         // tx info
@@ -100,7 +85,6 @@ PendingTx.prototype.render = function () {
 
             h(MiniAccountPanel, {
               imageSeed: address,
-              imageifyIdenticons: imageify,
               picOrder: 'right',
             }, [
               h('span.font-small', {
@@ -121,6 +105,8 @@ PendingTx.prototype.render = function () {
               }, [
                 h(EthBalance, {
                   value: balance,
+                  conversionRate,
+                  currentCurrency,
                   inline: true,
                   labelColor: '#F7861C',
                 }),
@@ -158,7 +144,7 @@ PendingTx.prototype.render = function () {
             // in the way that gas and gasLimit currently are.
             h('.row', [
               h('.cell.label', 'Amount'),
-              h(EthBalance, { value: txParams.value }),
+              h(EthBalance, { value: txParams.value, currentCurrency, conversionRate }),
             ]),
 
             // Gas Limit (customizable)
@@ -176,12 +162,8 @@ PendingTx.prototype.render = function () {
                     position: 'relative',
                     top: '5px',
                   },
-                  onChange: (newHex) => {
-                    log.info(`Gas limit changed to ${newHex}`)
-                    const txMeta = this.gatherTxMeta()
-                    txMeta.txParams.gas = newHex
-                    this.setState({ txData: txMeta })
-                  },
+                  onChange: this.gasLimitChanged.bind(this),
+
                   ref: (hexInput) => { this.inputs.push(hexInput) },
                 }),
               ]),
@@ -201,13 +183,7 @@ PendingTx.prototype.render = function () {
                     position: 'relative',
                     top: '5px',
                   },
-                  onChange: (newHex) => {
-                    log.info(`Gas price changed to: ${newHex}`)
-                    const inWei = hexToBn(newHex).mul(GWEI_FACTOR)
-                    const txMeta = this.gatherTxMeta()
-                    txMeta.txParams.gasPrice = inWei.toString(16)
-                    this.setState({ txData: txMeta })
-                  },
+                  onChange: this.gasPriceChanged.bind(this),
                   ref: (hexInput) => { this.inputs.push(hexInput) },
                 }),
               ]),
@@ -216,7 +192,7 @@ PendingTx.prototype.render = function () {
             // Max Transaction Fee (calculated)
             h('.cell.row', [
               h('.cell.label', 'Max Transaction Fee'),
-              h(EthBalance, { value: txFeeBn.toString(16) }),
+              h(EthBalance, { value: txFeeBn.toString(16), currentCurrency, conversionRate }),
             ]),
 
             h('.cell.row', {
@@ -235,6 +211,8 @@ PendingTx.prototype.render = function () {
               }, [
                 h(EthBalance, {
                   value: maxCost.toString(16),
+                  currentCurrency,
+                  conversionRate,
                   inline: true,
                   labelColor: 'black',
                   fontSize: '16px',
@@ -331,13 +309,11 @@ PendingTx.prototype.miniAccountPanelForRecipient = function () {
   const txData = props.txData
   const txParams = txData.txParams || {}
   const isContractDeploy = !('to' in txParams)
-  const imageify = props.imageifyIdenticons === undefined ? true : props.imageifyIdenticons
 
   // If it's not a contract deploy, send to the account
   if (!isContractDeploy) {
     return h(MiniAccountPanel, {
       imageSeed: txParams.to,
-      imageifyIdenticons: imageify,
       picOrder: 'left',
     }, [
       h('span.font-small', {
@@ -353,7 +329,6 @@ PendingTx.prototype.miniAccountPanelForRecipient = function () {
     ])
   } else {
     return h(MiniAccountPanel, {
-      imageifyIdenticons: imageify,
       picOrder: 'left',
     }, [
 
@@ -367,6 +342,21 @@ PendingTx.prototype.miniAccountPanelForRecipient = function () {
   }
 }
 
+PendingTx.prototype.gasPriceChanged = function (newHex) {
+  log.info(`Gas price changed to: ${newHex}`)
+  const inWei = hexToBn(newHex).mul(GWEI_FACTOR)
+  const txMeta = this.gatherTxMeta()
+  txMeta.txParams.gasPrice = inWei.toString(16)
+  this.setState({ txData: txMeta })
+}
+
+PendingTx.prototype.gasLimitChanged = function (newHex) {
+  log.info(`Gas limit changed to ${newHex}`)
+  const txMeta = this.gatherTxMeta()
+  txMeta.txParams.gas = newHex
+  this.setState({ txData: txMeta })
+}
+
 PendingTx.prototype.resetGasFields = function () {
   log.debug(`pending-tx resetGasFields`)
 
@@ -382,6 +372,33 @@ PendingTx.prototype.resetGasFields = function () {
   })
 }
 
+PendingTx.prototype.onSubmit = function (event) {
+  event.preventDefault()
+  const txMeta = this.gatherTxMeta()
+  const valid = this.checkValidity()
+  this.setState({ valid })
+  if (valid && this.verifyGasParams()) {
+    this.props.sendTransaction(txMeta, event)
+  } else {
+    this.props.dispatch(actions.displayWarning('Invalid Gas Parameters'))
+  }
+}
+
+PendingTx.prototype.checkValidity = function () {
+  const form = this.getFormEl()
+  const valid = form.checkValidity()
+  return valid
+}
+
+PendingTx.prototype.getFormEl = function () {
+  const form = document.querySelector('form#pending-tx-form')
+  // Stub out form for unit tests:
+  if (!form) {
+    return { checkValidity () { return true } }
+  }
+  return form
+}
+
 // After a customizable state value has been updated,
 PendingTx.prototype.gatherTxMeta = function () {
   log.debug(`pending-tx gatherTxMeta`)