Add custom gas field to send page

3 files changed, 178 insertions, 33 deletions

diff --git a/ui/app/components/pending-tx-details.js b/ui/app/components/pending-tx-details.js
index d8e8524bf..7fa3d6ddd 100644
--- a/ui/app/components/pending-tx-details.js
+++ b/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 = txParams.gasMultiplier
   var gasCost = new BN(ethUtil.stripHexPrefix(txParams.gas || txData.estimatedGas), 16)
   var gasPrice = new BN(ethUtil.stripHexPrefix(txParams.gasPrice || '0x4a817c800'), 16)
+  gasPrice = new BN(parseFloat(gasPrice.toString()) * gasMultiplier)
   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/components/range-slider.js b/ui/app/components/range-slider.js
new file mode 100644
index 000000000..6ca6e434e
--- /dev/null
+++ b/ui/app/components/range-slider.js
@@ -0,0 +1,63 @@
+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 props = this.props
+  const onChange = props.onChange || 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,
+        defaultValue: defaultValue,
+        onChange: mirrorInput ? this.mirrorInputs.bind(this, name) : onChange,
+      }),
+
+      // Mirrored input for range
+      mirrorInput ? h('input.large-input', {
+        type: 'number',
+        name: `${name}Mirror`,
+        min: min,
+        max: max,
+        defaultValue: defaultValue,
+        step: increment,
+        style: input,
+        onChange: this.mirrorInputs.bind(this, `${name}Mirror`),
+      }) : null,
+    ])
+  )
+}
+
+RangeSlider.prototype.mirrorInputs = function (active) {
+  var range = document.querySelector(`input[name="${this.props.name}"]`)
+  var inputMirror = document.querySelector(`input[name="${this.props.name}Mirror"]`)
+  if (active === this.props.name) {
+    inputMirror.value = range.value
+  } else {
+    range.value = inputMirror.value
+  }
+}
diff --git a/ui/app/send.js b/ui/app/send.js
index 009866cf7..d10c658e3 100644
--- a/ui/app/send.js
+++ b/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', {
+            style: {
+              marginTop: '28px',
+            },
+          }),
 
         ]),
 
         // 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', {
+        h('.flex-column', {
           style: {
-            marginBottom: 8,
+            marginTop: '10px',
+            alignItems: 'flex-start',
           },
         }, [
+          h('h2.font-medium.color-forest.flex-center', {
+            style: {
+              paddingTop: '8px',
+              marginBottom: '8px',
+            },
+          }, identity && identity.name),
 
-          h('div', {
+          // address and getter actions
+          h('.flex-row.flex-center', {
             style: {
-              lineHeight: '16px',
+              marginBottom: '8px',
             },
-          }, addressSummary(address)),
+          }, [
 
-        ]),
+            h('div', {
+              style: {
+                lineHeight: '16px',
+              },
+            }, addressSummary(address)),
+
+          ]),
 
-        // balance
-        h('.flex-row.flex-center', [
+          // balance
+          h('.flex-row.flex-center', [
 
-          h(EthBalance, {
-            value: account && account.balance,
-          }),
+            h(EthBalance, {
+              value: account && account.balance,
+            }),
 
+          ]),
         ]),
-
       ]),
 
       //
@@ -123,8 +134,8 @@ SendTransactionScreen.prototype.render = function () {
         style: {
           background: '#EBEBEB',
           color: '#AEAEAE',
-          marginTop: 32,
-          marginBottom: 16,
+          marginTop: '15px',
+          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,
-          marginBottom: 16,
+          marginTop: '16px',
+          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,75 @@ SendTransactionScreen.prototype.render = function () {
           },
         }),
       ]),
+      // custom gas 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 transactions
+          gas price. seting it to 100% will use
+          the full recomend 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 +290,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
 
@@ -243,6 +323,6 @@ SendTransactionScreen.prototype.onSubmit = function () {
 
   if (recipient) txParams.to = ethUtil.addHexPrefix(recipient)
   if (txData) txParams.data = txData
-
+  txParams.gasMultiplier = gasMultiplier * 0.01
   this.props.dispatch(actions.signTx(txParams))
 }