Merge pull request #1154 from MetaMask/i765-gaslimits

Add ability to customize gas and gasPrice on tx confirmation screen

CHANGELOG.md

@@ -3,6 +3,7 @@
 ## Current Master
 
 - Add personal_sign method support.
+- Add ability to customize gas and gasPrice on the transaction approval screen.
 
 ## 3.3.0 2017-2-20
 

app/scripts/lib/config-manager.js

@@ -228,18 +228,6 @@ ConfigManager.prototype._emitUpdates = function (state) {
   })
 }
 
-ConfigManager.prototype.getGasMultiplier = function () {
-  var data = this.getData()
-  return data.gasMultiplier
-}
-
-ConfigManager.prototype.setGasMultiplier = function (gasMultiplier) {
-  var data = this.getData()
-
-  data.gasMultiplier = gasMultiplier
-  this.setData(data)
-}
-
 ConfigManager.prototype.setLostAccounts = function (lostAccounts) {
   var data = this.getData()
   data.lostAccounts = lostAccounts

app/scripts/lib/id-management.js

@@ -7,7 +7,6 @@
  */
 
 const ethUtil = require('ethereumjs-util')
-const BN = ethUtil.BN
 const Transaction = require('ethereumjs-tx')
 
 module.exports = IdManagement
@@ -25,13 +24,9 @@ function IdManagement (opts) {
   }
 
   this.signTx = function (txParams) {
-    //  calculate gas with custom gas multiplier
-    var gasMultiplier = this.configManager.getGasMultiplier() || 1
-    var gasPrice = new BN(ethUtil.stripHexPrefix(txParams.gasPrice), 16)
-    gasPrice = gasPrice.mul(new BN(gasMultiplier * 100, 10)).div(new BN(100, 10))
-    txParams.gasPrice = ethUtil.intToHex(gasPrice.toNumber())
-    // normalize values
 
+    // normalize values
+    txParams.gasPrice = ethUtil.intToHex(txParams.gasPrice)
     txParams.to = ethUtil.addHexPrefix(txParams.to)
     txParams.from = ethUtil.addHexPrefix(txParams.from.toLowerCase())
     txParams.value = ethUtil.addHexPrefix(txParams.value)

app/scripts/lib/idStore.js

@@ -95,7 +95,6 @@ IdentityStore.prototype.getState = function () {
     isUnlocked: this._isUnlocked(),
     seedWords: seedWords,
     selectedAddress: configManager.getSelectedAccount(),
-    gasMultiplier: configManager.getGasMultiplier(),
   }))
 }
 

app/scripts/lib/tx-utils.js

@@ -92,11 +92,10 @@ module.exports = class txProviderUtils {
   }
 
   // builds ethTx from txParams object
-  buildEthTxFromParams (txParams, gasMultiplier = 1) {
+  buildEthTxFromParams (txParams) {
     // apply gas multiplyer
     let gasPrice = new BN(ethUtil.stripHexPrefix(txParams.gasPrice), 16)
     // multiply and divide by 100 so as to add percision to integer mul
-    gasPrice = gasPrice.mul(new BN(gasMultiplier * 100, 10)).div(new BN(100, 10))
     txParams.gasPrice = ethUtil.intToHex(gasPrice.toNumber())
     // normalize values
     txParams.to = normalize(txParams.to)
@@ -106,6 +105,7 @@ module.exports = class txProviderUtils {
     txParams.gasLimit = normalize(txParams.gasLimit || txParams.gas)
     txParams.nonce = normalize(txParams.nonce)
     // build ethTx
+    log.info(`Prepared tx for signing: ${JSON.stringify(txParams)}`)
     const ethTx = new Transaction(txParams)
     return ethTx
   }

app/scripts/metamask-controller.js

@@ -248,7 +248,6 @@ module.exports = class MetamaskController extends EventEmitter {
       setProviderType:       this.setProviderType.bind(this),
       useEtherscanProvider:  this.useEtherscanProvider.bind(this),
       setCurrentCurrency:    this.setCurrentCurrency.bind(this),
-      setGasMultiplier:      this.setGasMultiplier.bind(this),
       markAccountsFound:     this.markAccountsFound.bind(this),
       // coinbase
       buyEth: this.buyEth.bind(this),
@@ -276,8 +275,9 @@ module.exports = class MetamaskController extends EventEmitter {
       exportAccount:             nodeify(keyringController.exportAccount).bind(keyringController),
 
       // txManager
-      approveTransaction:    txManager.approveTransaction.bind(txManager),
-      cancelTransaction:     txManager.cancelTransaction.bind(txManager),
+      approveTransaction:          txManager.approveTransaction.bind(txManager),
+      cancelTransaction:           txManager.cancelTransaction.bind(txManager),
+      updateAndApproveTransaction: this.updateAndApproveTx.bind(this),
 
       // messageManager
       signMessage:           nodeify(this.signMessage).bind(this),
@@ -407,6 +407,7 @@ module.exports = class MetamaskController extends EventEmitter {
   //
 
   newUnapprovedTransaction (txParams, cb) {
+    log.debug(`MetaMaskController newUnapprovedTransaction ${JSON.stringify(txParams)}`)
     const self = this
     self.txManager.addUnapprovedTransaction(txParams, (err, txMeta) => {
       if (err) return cb(err)
@@ -462,6 +463,13 @@ module.exports = class MetamaskController extends EventEmitter {
     })
   }
 
+  updateAndApproveTx(txMeta, cb) {
+    log.debug(`MetaMaskController - updateAndApproveTx: ${JSON.stringify(txMeta)}`)
+    const txManager = this.txManager
+    txManager.updateTx(txMeta)
+    txManager.approveTransaction(txMeta.id, cb)
+  }
+
   signMessage (msgParams, cb) {
     log.info('MetaMaskController - signMessage')
     const msgId = msgParams.metamaskId
@@ -644,15 +652,6 @@ module.exports = class MetamaskController extends EventEmitter {
     this.shapeshiftController.createShapeShiftTx(depositAddress, depositType)
   }
 
-  setGasMultiplier (gasMultiplier, cb) {
-    try {
-      this.txManager.setGasMultiplier(gasMultiplier)
-      cb()
-    } catch (err) {
-      cb(err)
-    }
-  }
-
   //
   // network
   //

app/scripts/transaction-manager.js

@@ -13,7 +13,6 @@ module.exports = class TransactionManager extends EventEmitter {
     super()
     this.store = new ObservableStore(extend({
       transactions: [],
-      gasMultiplier: 1,
     }, opts.initState))
     this.memStore = new ObservableStore({})
     this.networkStore = opts.networkStore || new ObservableStore({})
@@ -52,14 +51,6 @@ module.exports = class TransactionManager extends EventEmitter {
     return fullTxList.filter(txMeta => txMeta.metamaskNetworkId === network)
   }
 
-  getGasMultiplier () {
-    return this.store.getState().gasMultiplier
-  }
-
-  setGasMultiplier (gasMultiplier) {
-    return this.store.updateState({ gasMultiplier })
-  }
-
   // Adds a tx to the txlist
   addTx (txMeta) {
     var txList = this.getTxList()
@@ -129,7 +120,6 @@ module.exports = class TransactionManager extends EventEmitter {
           id: txId,
           time: time,
           status: 'unapproved',
-          gasMultiplier: this.getGasMultiplier(),
           metamaskNetworkId: this.getNetwork(),
           txParams: txParams,
         }
@@ -147,16 +137,15 @@ module.exports = class TransactionManager extends EventEmitter {
 
   setMaxTxCostAndFee (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)
     txMeta.txFee = txFee
     txMeta.txValue = txValue
     txMeta.maxCost = maxCost
+    txMeta.gasPrice = gasPrice
     this.updateTx(txMeta)
   }
 
@@ -209,7 +198,7 @@ module.exports = class TransactionManager extends EventEmitter {
     let txMeta = this.getTx(txId)
     let txParams = txMeta.txParams
     let fromAddress = txParams.from
-    let ethTx = this.txProviderUtils.buildEthTxFromParams(txParams, txMeta.gasMultiplier)
+    let ethTx = this.txProviderUtils.buildEthTxFromParams(txParams)
     this.signEthTx(ethTx, fromAddress).then(() => {
       this.setTxStatusSigned(txMeta.id)
       cb(null, ethUtil.bufferToHex(ethTx.serialize()))

ui/app/actions.js

@@ -94,6 +94,7 @@ var actions = {
   cancelPersonalMsg,
   sendTx: sendTx,
   signTx: signTx,
+  updateAndApproveTx,
   cancelTx: cancelTx,
   completedTx: completedTx,
   txError: txError,
@@ -387,22 +388,18 @@ 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())
   }
 }
 
 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) => {
@@ -415,6 +412,20 @@ function sendTx (txData) {
   }
 }
 
+function updateAndApproveTx (txData) {
+  log.info('actions: updateAndApproveTx: ' + JSON.stringify(txData))
+  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,

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

@@ -0,0 +1,76 @@
+const Component = require('react').Component
+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
+
+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 toEth = props.toEth
+  const suffix = props.suffix
+  const decimalValue = decimalize(value, toEth)
+  const style = props.style
+
+  return (
+    h('.flex-row', {
+      style: {
+        alignItems: 'flex-end',
+        lineHeight: '13px',
+        fontFamily: 'Montserrat Light',
+        textRendering: 'geometricPrecision',
+      },
+    }, [
+      h('input.ether-balance.ether-balance-amount', {
+        style: extend({
+          display: 'block',
+          textAlign: 'right',
+          backgroundColor: 'transparent',
+          border: '1px solid #bdbdbd',
+        }, style),
+        value: decimalValue,
+        onChange: (event) => {
+          const hexString = hexify(event.target.value)
+          onChange(hexString)
+        },
+      }),
+      h('div', {
+        style: {
+          color: ' #AEAEAE',
+          fontSize: '12px',
+          marginLeft: '5px',
+          marginRight: '6px',
+          width: '20px',
+        },
+      }, suffix),
+    ])
+  )
+}
+
+function hexify (decimalString) {
+  const hexBN = new BN(decimalString, 10)
+  return '0x' + hexBN.toString('hex')
+}
+
+function decimalize (input, toEth) {
+  const strippedInput = ethUtil.stripHexPrefix(input)
+  const inputBN = new BN(strippedInput, 'hex')
+  return inputBN.toString(10)
+}

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

@@ -1,12 +1,16 @@
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
+const extend = require('xtend')
+const ethUtil = require('ethereumjs-util')
+const BN = ethUtil.BN
 
 const MiniAccountPanel = require('./mini-account-panel')
 const EthBalance = require('./eth-balance')
 const util = require('../util')
 const addressSummary = util.addressSummary
 const nameForAddress = require('../../lib/contract-namer')
+const HexInput = require('./hex-as-decimal-input')
 
 module.exports = PendingTxDetails
 
@@ -19,7 +23,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 txParams = txData.txParams || {}
   var address = txParams.from || props.selectedAddress
@@ -27,11 +32,18 @@ PTXP.render = function () {
   var account = props.accounts[address]
   var balance = account ? account.balance : '0x0'
 
-  var txFee = txData.txFee || ''
-  var maxCost = txData.maxCost || ''
+  const gas = state.gas || txParams.gas
+  const gasPrice = state.gasPrice || txData.gasPrice
+  const gasDefault = txParams.gas
+  const gasPriceDefault = txData.gasPrice
+
+  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', [
 
@@ -97,11 +109,63 @@ 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', 'Gas Limit'),
+          h('.cell.value', {
+          }, [
+            h(HexInput, {
+              value: gas,
+              suffix: 'UNITS',
+              style: {
+                position: 'relative',
+                top: '5px',
+              },
+              onChange: (newHex) => {
+                log.info(`Gas limit changed to ${newHex}`)
+                if (newHex === '0x0') {
+                  this.setState({gas: gasDefault})
+                } else {
+                  this.setState({ gas: newHex })
+                }
+              },
+            }),
+          ]),
+        ]),
+
+        // Gas Price (customizable)
+        h('.cell.row', [
+          h('.cell.label', 'Gas Price'),
+          h('.cell.value', {
+          }, [
+            h(HexInput, {
+              value: gasPrice,
+              suffix: 'WEI',
+              style: {
+                position: 'relative',
+                top: '5px',
+              },
+              onChange: (newHex) => {
+                log.info(`Gas price changed to: ${newHex}`)
+                if (newHex === '0x0') {
+                  this.setState({gasPrice: gasPriceDefault})
+                } else {
+                  this.setState({ gasPrice: newHex })
+                }
+              },
+            }),
+          ]),
+        ]),
+
+        // Max Transaction Fee (calculated)
         h('.cell.row', [
           h('.cell.label', 'Max Transaction Fee'),
           h(EthBalance, { value: txFee.toString(16) }),
@@ -130,6 +194,7 @@ PTXP.render = function () {
           ]),
         ]),
 
+        // Data size row:
         h('.cell.row', {
           style: {
             background: '#f7f7f7',
@@ -191,6 +256,80 @@ 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
+
+  // Only if gas or gasPrice changed:
+  if (!prevState ||
+      (gas !== prevState.gas ||
+      gasPrice !== prevState.gasPrice)) {
+    log.debug(`recalculating gas since prev state change: ${JSON.stringify({ prevState, state })}`)
+    this.calculateGas()
+  }
+}
+
+PTXP.calculateGas = function () {
+  const txMeta = this.gatherParams()
+  log.debug(`pending-tx-details calculating gas for ${JSON.stringify(txMeta)}`)
+
+  var txParams = txMeta.txParams
+  var gasCost = new BN(ethUtil.stripHexPrefix(txParams.gas || txMeta.estimatedGas), 16)
+  var gasPrice = new BN(ethUtil.stripHexPrefix(txParams.gasPrice || '0x4a817c800'), 16)
+  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)
+  }
+}
+
+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`)
+  const props = this.props
+  const state = this.state || {}
+  const txData = state.txData || props.txData
+  const txParams = txData.txParams
+
+  const gas = state.gas || txParams.gas
+  const gasPrice = state.gasPrice || txParams.gasPrice
+  const resultTx = extend(txParams, {
+    gas,
+    gasPrice,
+  })
+  const resultTxMeta = extend(txData, {
+    txParams: resultTx,
+  })
+  log.debug(`UI has computed tx params ${JSON.stringify(resultTx)}`)
+  return resultTxMeta
+}
+
 function forwardCarrat () {
   return (
 

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
 
@@ -11,8 +12,9 @@ function PendingTx () {
 }
 
 PendingTx.prototype.render = function () {
-  var state = this.props
-  var txData = state.txData
+  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, state),
+      h(PendingTxDetails, newProps),
 
       h('style', `
         .conf-buttons button {
@@ -39,7 +41,7 @@ PendingTx.prototype.render = function () {
         }, 'Transaction Error. Exception thrown in contract code.')
       : null,
 
-      state.insufficientBalance ?
+      props.insufficientBalance ?
         h('span.error', {
           style: {
             marginLeft: 50,
@@ -57,20 +59,26 @@ 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('button', {
+          onClick: () => {
+            this.refs.details.resetGasFields()
+          },
+        }, 'Reset'),
       ]),
     ])
   )

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 (
 
@@ -104,6 +105,8 @@ ConfirmTxScreen.prototype.render = function () {
           accounts: props.accounts,
           identities: props.identities,
           insufficientBalance: this.checkBalanceAgainstTx(txData),
+          // State actions
+          onTxChange: this.onTxChange.bind(this),
           // Actions
           buyEth: this.buyEth.bind(this, txParams.from || props.selectedAddress),
           sendTransaction: this.sendTransaction.bind(this, txData),
@@ -141,6 +144,7 @@ function currentTxView (opts) {
     }
   }
 }
+
 ConfirmTxScreen.prototype.checkBalanceAgainstTx = function (txData) {
   if (!txData.txParams) return false
   var props = this.props
@@ -158,9 +162,20 @@ 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) {
+  log.debug(`conf-tx onTxChange triggered with ${JSON.stringify(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.updateAndApproveTx(txMeta || txData))
 }
 
 ConfirmTxScreen.prototype.cancelTransaction = function (txData, event) {

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,

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) {
@@ -208,73 +206,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 +220,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 +253,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)

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())
   }