Merge branch 'NewUI-flat' into merge

3 files changed, 263 insertions, 0 deletions

diff --git a/ui/app/components/customize-gas-modal/gas-modal-card.js b/ui/app/components/customize-gas-modal/gas-modal-card.js
new file mode 100644
index 000000000..8e739ee40
--- /dev/null
+++ b/ui/app/components/customize-gas-modal/gas-modal-card.js
@@ -0,0 +1,55 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const InputNumber = require('../input-number.js')
+const GasSlider = require('./gas-slider.js')
+
+module.exports = GasModalCard
+
+inherits(GasModalCard, Component)
+function GasModalCard () {
+  Component.call(this)
+}
+
+GasModalCard.prototype.render = function () {
+  const {
+    memo,
+    identities,
+    onChange,
+    unitLabel,
+    value,
+    min,
+    max,
+    step,
+    title,
+    copy
+  } = this.props
+
+  return h('div.send-v2__gas-modal-card', [
+
+    h('div.send-v2__gas-modal-card__title', {}, title),
+
+    h('div.send-v2__gas-modal-card__copy', {}, copy),
+
+    h(InputNumber, {
+      unitLabel,
+      step,
+      max,
+      min,
+      placeholder: '0',
+      value,
+      onChange,
+    }),
+
+    h(GasSlider, {
+      value,
+      step,
+      max,
+      min,
+      onChange,
+    }),
+    
+  ])
+    
+}
+
diff --git a/ui/app/components/customize-gas-modal/gas-slider.js b/ui/app/components/customize-gas-modal/gas-slider.js
new file mode 100644
index 000000000..e76e96545
--- /dev/null
+++ b/ui/app/components/customize-gas-modal/gas-slider.js
@@ -0,0 +1,50 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+
+module.exports = GasSlider
+
+inherits(GasSlider, Component)
+function GasSlider () {
+  Component.call(this)
+}
+
+GasSlider.prototype.render = function () {
+  const {
+    memo,
+    identities,
+    onChange,
+    unitLabel,
+    value,
+    id,
+    step,
+    max,
+    min,
+  } = this.props
+
+  return h('div.gas-slider', [
+
+    h('input.gas-slider__input', {
+      type: 'range',
+      step,
+      max,
+      min,
+      value,
+      id: 'gasSlider',
+      onChange: event => onChange(event.target.value),
+    }, []),
+
+    h('div.gas-slider__bar', [
+
+      h('div.gas-slider__low'),
+
+      h('div.gas-slider__mid'),
+
+      h('div.gas-slider__high'),
+
+    ]),
+    
+  ])
+    
+}
+
diff --git a/ui/app/components/customize-gas-modal/index.js b/ui/app/components/customize-gas-modal/index.js
new file mode 100644
index 000000000..0ba768893
--- /dev/null
+++ b/ui/app/components/customize-gas-modal/index.js
@@ -0,0 +1,158 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const connect = require('react-redux').connect
+const actions = require('../../actions')
+const GasModalCard = require('./gas-modal-card')
+
+const { conversionUtil, multiplyCurrencies } = require('../../conversion-util')
+
+const {
+  getGasPrice,
+  getGasLimit,
+  conversionRateSelector,
+} = require('../../selectors')
+
+function mapStateToProps (state) {
+  return {
+    gasPrice: getGasPrice(state),
+    gasLimit: getGasLimit(state),
+    conversionRate: conversionRateSelector(state),
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    hideModal: () => dispatch(actions.hideModal()),
+    updateGasPrice: newGasPrice => dispatch(actions.updateGasPrice(newGasPrice)),
+    updateGasLimit: newGasLimit => dispatch(actions.updateGasLimit(newGasLimit)),
+    updateGasTotal: newGasTotal => dispatch(actions.updateGasTotal(newGasTotal)),
+  }
+}
+
+inherits(CustomizeGasModal, Component)
+function CustomizeGasModal (props) {
+  Component.call(this)
+
+  this.state = {
+    gasPrice: props.gasPrice,
+    gasLimit: props.gasLimit,
+  }
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(CustomizeGasModal)
+
+CustomizeGasModal.prototype.save = function (gasPrice, gasLimit) {
+  const {
+    updateGasPrice,
+    updateGasLimit,
+    hideModal,
+    updateGasTotal
+  } = this.props
+
+  const newGasTotal = multiplyCurrencies(gasLimit, gasPrice, {
+    toNumericBase: 'hex',
+    multiplicandBase: 16,
+    multiplierBase: 16,
+  })
+
+  updateGasPrice(gasPrice)
+  updateGasLimit(gasLimit)
+  updateGasTotal(newGasTotal)
+  hideModal()
+}
+
+CustomizeGasModal.prototype.convertAndSetGasLimit = function (newGasLimit) {
+  const convertedGasLimit = conversionUtil(newGasLimit, {
+    fromNumericBase: 'dec',
+    toNumericBase: 'hex',
+  })
+
+  this.setState({ gasLimit: convertedGasLimit })
+}
+
+CustomizeGasModal.prototype.convertAndSetGasPrice = function (newGasPrice) {
+  const convertedGasPrice = conversionUtil(newGasPrice, {
+    fromNumericBase: 'dec',
+    toNumericBase: 'hex',
+    fromDenomination: 'GWEI',
+    toDenomination: 'WEI',
+  })
+
+  this.setState({ gasPrice: convertedGasPrice })
+}
+
+CustomizeGasModal.prototype.render = function () {
+  const { hideModal, conversionRate } = this.props
+  const { gasPrice, gasLimit } = this.state
+
+  const convertedGasPrice = conversionUtil(gasPrice, {
+    fromNumericBase: 'hex',
+    toNumericBase: 'dec',
+    fromDenomination: 'WEI',
+    toDenomination: 'GWEI',
+  })
+
+  const convertedGasLimit = conversionUtil(gasLimit, {
+    fromNumericBase: 'hex',
+    toNumericBase: 'dec',
+  })
+
+  return h('div.send-v2__customize-gas', {}, [
+    h('div', {
+    }, [
+      h('div.send-v2__customize-gas__header', {}, [
+
+        h('div.send-v2__customize-gas__title', 'Customize Gas'),
+
+        h('div.send-v2__customize-gas__close', {
+          onClick: hideModal,
+        }),
+
+      ]),
+
+      h('div.send-v2__customize-gas__body', {}, [
+        
+        h(GasModalCard, {
+          value: convertedGasPrice,
+          min: 0,
+          max: 1000,
+          step: 1,
+          onChange: value => this.convertAndSetGasPrice(value),
+          title: 'Gas Price',
+          copy: 'We calculate the suggested gas prices based on network success rates.',
+        }),
+
+        h(GasModalCard, {
+          value: convertedGasLimit,
+          min: 20000,
+          max: 100000,
+          step: 1,
+          onChange: value => this.convertAndSetGasLimit(value),
+          title: 'Gas Limit',
+          copy: 'We calculate the suggested gas limit based on network success rates.',
+        }),
+
+      ]),
+
+      h('div.send-v2__customize-gas__footer', {}, [
+        
+        h('div.send-v2__customize-gas__revert', {
+          onClick: () => console.log('Revert'),
+        }, ['Revert']),
+
+        h('div.send-v2__customize-gas__buttons', [
+          h('div.send-v2__customize-gas__cancel', {
+            onClick: this.props.hideModal,
+          }, ['CANCEL']),
+
+          h('div.send-v2__customize-gas__save', {
+            onClick: () => this.save(gasPrice, gasLimit),
+          }, ['SAVE']),
+        ])
+
+      ]),
+
+    ]),
+  ])
+}