2 files changed, 65 insertions, 0 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
+  }
+}