Merge pull request #720 from MetaMask/i#495CustomGasField

add a gasPrice field

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Current Master
 
+- Add a custom transaction fee field to send form.
+
 ## 2.13.3 2016-10-4
 
 - Fix bug where log queries were filtered out.

app/scripts/lib/config-manager.js

@@ -384,3 +384,15 @@ ConfigManager.prototype.createShapeShiftTx = function (depositAddress, depositTy
   }
   this.setData(data)
 }
+
+ConfigManager.prototype.getGasMultiplier = function () {
+  var data = this.getData()
+  return ('gasMultiplier' in data) && data.gasMultiplier
+}
+
+ConfigManager.prototype.setGasMultiplier = function (gasMultiplier) {
+  var data = this.getData()
+
+  data.gasMultiplier = gasMultiplier
+  this.setData(data)
+}

app/scripts/lib/id-management.js

@@ -7,6 +7,7 @@
  */
 
 const ethUtil = require('ethereumjs-util')
+const BN = ethUtil.BN
 const Transaction = require('ethereumjs-tx')
 
 module.exports = IdManagement
@@ -24,7 +25,13 @@ 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
+
     txParams.to = ethUtil.addHexPrefix(txParams.to)
     txParams.from = ethUtil.addHexPrefix(txParams.from.toLowerCase())
     txParams.value = ethUtil.addHexPrefix(txParams.value)

app/scripts/lib/idStore.js

@@ -112,6 +112,8 @@ IdentityStore.prototype.getState = function () {
     currentFiat: configManager.getCurrentFiat(),
     conversionRate: configManager.getConversionRate(),
     conversionDate: configManager.getConversionDate(),
+    gasMultiplier: configManager.getGasMultiplier(),
+
   }))
 }
 
@@ -211,6 +213,7 @@ IdentityStore.prototype.exportAccount = function (address, cb) {
 // comes from dapp via zero-client hooked-wallet provider
 IdentityStore.prototype.addUnconfirmedTransaction = function (txParams, onTxDoneCb, cb) {
   const configManager = this.configManager
+
   var self = this
   // create txData obj with parameters and meta data
   var time = (new Date()).getTime()
@@ -222,6 +225,7 @@ IdentityStore.prototype.addUnconfirmedTransaction = function (txParams, onTxDone
     txParams: txParams,
     time: time,
     status: 'unconfirmed',
+    gasMultiplier: configManager.getGasMultiplier() || 1,
   }
 
   console.log('addUnconfirmedTransaction:', txData)

app/scripts/metamask-controller.js

@@ -55,6 +55,7 @@ module.exports = class MetamaskController {
       agreeToEthWarning: this.agreeToEthWarning.bind(this),
       setTOSHash: this.setTOSHash.bind(this),
       checkTOSChange: this.checkTOSChange.bind(this),
+      setGasMultiplier: this.setGasMultiplier.bind(this),
 
       // forward directly to idStore
       createNewVault: idStore.createNewVault.bind(idStore),
@@ -377,4 +378,13 @@ module.exports = class MetamaskController {
   createShapeShiftTx (depositAddress, depositType) {
     this.configManager.createShapeShiftTx(depositAddress, depositType)
   }
+
+  setGasMultiplier (gasMultiplier, cb) {
+    try {
+      this.configManager.setGasMultiplier(gasMultiplier)
+      cb()
+    } catch (e) {
+      cb(e)
+    }
+  }
 }

ui/app/actions.js

@@ -278,14 +278,16 @@ function signMsg (msgData) {
 
 function signTx (txData) {
   return (dispatch) => {
-    web3.eth.sendTransaction(txData, (err, data) => {
+    _accountManager.setGasMultiplier(txData.gasMultiplier, (err) => {
-      dispatch(actions.hideLoadingIndication())
-
       if (err) return dispatch(actions.displayWarning(err.message))
-      dispatch(actions.hideWarning())
+      web3.eth.sendTransaction(txData, (err, data) => {
-      dispatch(actions.goHome())
+        dispatch(actions.hideLoadingIndication())
+        if (err) return dispatch(actions.displayWarning(err.message))
+        dispatch(actions.hideWarning())
+        dispatch(actions.goHome())
+      })
+      dispatch(this.showConfTxPage())
     })
-    dispatch(this.showConfTxPage())
   }
 }
 

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

@@ -29,8 +29,10 @@ PTXP.render = function () {
   var account = props.accounts[address]
   var balance = account ? account.balance : '0x0'
 
+  var gasMultiplier = txData.gasMultiplier
   var gasCost = new BN(ethUtil.stripHexPrefix(txParams.gas || txData.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)

ui/app/components/range-slider.js

@@ -0,0 +1,58 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+
+module.exports = RangeSlider
+
+inherits(RangeSlider, Component)
+function RangeSlider () {
+  Component.call(this)
+}
+
+RangeSlider.prototype.render = function () {
+  const state = this.state || {}
+  const props = this.props
+  const onInput = props.onInput || function () {}
+  const name = props.name
+  const {
+    min = 0,
+    max = 100,
+    increment = 1,
+    defaultValue = 50,
+    mirrorInput = false,
+  } = this.props.options
+  const {container, input, range} = props.style
+
+  return (
+    h('.flex-row', {
+      style: container,
+    }, [
+      h('input', {
+        type: 'range',
+        name: name,
+        min: min,
+        max: max,
+        step: increment,
+        style: range,
+        value: state.value || defaultValue,
+        onChange: mirrorInput ? this.mirrorInputs.bind(this, event) : onInput,
+      }),
+
+      // Mirrored input for range
+      mirrorInput ? h('input.large-input', {
+        type: 'number',
+        name: `${name}Mirror`,
+        min: min,
+        max: max,
+        value: state.value || defaultValue,
+        step: increment,
+        style: input,
+        onChange: this.mirrorInputs.bind(this, event),
+      }) : null,
+    ])
+  )
+}
+
+RangeSlider.prototype.mirrorInputs = function (event) {
+  this.setState({value: event.target.value})
+}

ui/app/send.js

@@ -9,7 +9,8 @@ const numericBalance = require('./util').numericBalance
 const addressSummary = require('./util').addressSummary
 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) {
@@ -50,7 +51,7 @@ SendTransactionScreen.prototype.render = function () {
       // Sender Profile
       //
 
-      h('.account-data-subsection.flex-column.flex-grow', {
+      h('.account-data-subsection.flex-row.flex-grow', {
         style: {
           margin: '0 20px',
         },
@@ -59,10 +60,9 @@ SendTransactionScreen.prototype.render = function () {
         // header - identicon + nav
         h('.flex-row.flex-space-between', {
           style: {
-            marginTop: 28,
+            marginTop: '15px',
           },
         }, [
-
           // back button
           h('i.fa.fa-arrow-left.fa-lg.cursor-pointer.color-orange', {
             onClick: this.back.bind(this),
@@ -77,42 +77,53 @@ SendTransactionScreen.prototype.render = function () {
           ]),
 
           // invisible place holder
-          h('i.fa.fa-users.fa-lg.invisible'),
+          h('i.fa.fa-users.fa-lg.invisible', {
-
-        ]),
-
-        // account label
-        h('h2.font-medium.color-forest.flex-center', {
-          style: {
-            paddingTop: 8,
-            marginBottom: 8,
-          },
-        }, identity && identity.name),
-
-        // address and getter actions
-        h('.flex-row.flex-center', {
-          style: {
-            marginBottom: 8,
-          },
-        }, [
-
-          h('div', {
             style: {
-              lineHeight: '16px',
+              marginTop: '28px',
             },
-          }, addressSummary(address)),
-
-        ]),
-
-        // balance
-        h('.flex-row.flex-center', [
-
-          h(EthBalance, {
-            value: account && account.balance,
           }),
 
         ]),
 
+        // account label
+
+        h('.flex-column', {
+          style: {
+            marginTop: '10px',
+            alignItems: 'flex-start',
+          },
+        }, [
+          h('h2.font-medium.color-forest.flex-center', {
+            style: {
+              paddingTop: '8px',
+              marginBottom: '8px',
+            },
+          }, identity && identity.name),
+
+          // address and getter actions
+          h('.flex-row.flex-center', {
+            style: {
+              marginBottom: '8px',
+            },
+          }, [
+
+            h('div', {
+              style: {
+                lineHeight: '16px',
+              },
+            }, addressSummary(address)),
+
+          ]),
+
+          // balance
+          h('.flex-row.flex-center', [
+
+            h(EthBalance, {
+              value: account && account.balance,
+            }),
+
+          ]),
+        ]),
       ]),
 
       //
@@ -123,8 +134,8 @@ SendTransactionScreen.prototype.render = function () {
         style: {
           background: '#EBEBEB',
           color: '#AEAEAE',
-          marginTop: 32,
+          marginTop: '15px',
-          marginBottom: 16,
+          marginBottom: '16px',
         },
       }, [
         'Send Transaction',
@@ -152,7 +163,7 @@ SendTransactionScreen.prototype.render = function () {
           placeholder: 'Amount',
           type: 'number',
           style: {
-            marginRight: 6,
+            marginRight: '6px',
           },
           dataset: {
             persistentFormId: 'tx-amount',
@@ -171,20 +182,19 @@ SendTransactionScreen.prototype.render = function () {
       //
       // Optional Fields
       //
-
       h('h3.flex-center.text-transform-uppercase', {
         style: {
           background: '#EBEBEB',
           color: '#AEAEAE',
-          marginTop: 16,
+          marginTop: '16px',
-          marginBottom: 16,
+          marginBottom: '16px',
         },
       }, [
         'Transactional Data (optional)',
       ]),
 
       // 'data' field
-      h('section.flex-row.flex-center', [
+      h('section.flex-column.flex-center', [
         h('input.large-input', {
           name: 'txData',
           placeholder: '0x01234',
@@ -197,6 +207,73 @@ 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'),
+        ]),
+      ]),
     ])
   )
 }
@@ -211,11 +288,12 @@ SendTransactionScreen.prototype.back = function () {
   this.props.dispatch(actions.backToAccountDetail(address))
 }
 
-SendTransactionScreen.prototype.onSubmit = function () {
+SendTransactionScreen.prototype.onSubmit = function (gasPrice) {
   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
 
@@ -239,6 +317,7 @@ SendTransactionScreen.prototype.onSubmit = function () {
   var txParams = {
     from: this.props.address,
     value: '0x' + value.toString(16),
+    gasMultiplier: gasMultiplier * 0.01,
   }
 
   if (recipient) txParams.to = ethUtil.addHexPrefix(recipient)