Customize Gas connected to state

3 files changed, 80 insertions, 14 deletions

diff --git a/ui/app/components/customize-gas-modal/index.js b/ui/app/components/customize-gas-modal/index.js
index 91e2626b4..2df24b4e1 100644
--- a/ui/app/components/customize-gas-modal/index.js
+++ b/ui/app/components/customize-gas-modal/index.js
@@ -5,32 +5,90 @@ const connect = require('react-redux').connect
 const actions = require('../../actions')
 const GasModalCard = require('./gas-modal-card')
 
+const { conversionUtil } = require('../../conversion-util')
+
+const {
+  getGasPrice,
+  getGasLimit,
+  conversionRateSelector,
+} = require('../../selectors')
+
 function mapStateToProps (state) {
-  return {}
+  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)),
   }
 }
 
 inherits(CustomizeGasModal, Component)
-function CustomizeGasModal () {
+function CustomizeGasModal (props) {
   Component.call(this)
 
   this.state = {
-    gasPrice: '0.23',
-    gasLimit: '25000',
+    gasPrice: props.gasPrice,
+    gasLimit: props.gasLimit,
   }
 }
 
 module.exports = connect(mapStateToProps, mapDispatchToProps)(CustomizeGasModal)
 
+CustomizeGasModal.prototype.save = function (gasPrice, gasLimit) {
+  const {
+    updateGasPrice,
+    updateGasLimit,
+    hideModal,
+  } = this.props
+
+  updateGasPrice(gasPrice)
+  updateGasLimit(gasLimit)
+  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 } = this.props
+  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', {
     }, [
@@ -47,21 +105,21 @@ CustomizeGasModal.prototype.render = function () {
       h('div.send-v2__customize-gas__body', {}, [
         
         h(GasModalCard, {
-          value: gasPrice,
-          min: 0.0,
-          max: 5.0,
-          step: 0.01,
-          onChange: gasPrice => this.setState({ gasPrice }),
+          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: gasLimit,
+          value: convertedGasLimit,
           min: 20000,
           max: 100000,
           step: 1,
-          onChange: gasLimit => this.setState({ gasLimit }),
+          onChange: value => this.convertAndSetGasLimit(value),
           title: 'Gas Limit',
           copy: 'We calculate the suggested gas limit based on network success rates.',
         }),
@@ -80,7 +138,7 @@ CustomizeGasModal.prototype.render = function () {
           }, ['CANCEL']),
 
           h('div.send-v2__customize-gas__save', {
-            onClick: () => console.log('Save'),
+            onClick: () => this.save(gasPrice, gasLimit),
           }, ['SAVE']),
         ])
 
diff --git a/ui/app/components/send/gas-fee-display-v2.js b/ui/app/components/send/gas-fee-display-v2.js
index 226ae93f8..961d55610 100644
--- a/ui/app/components/send/gas-fee-display-v2.js
+++ b/ui/app/components/send/gas-fee-display-v2.js
@@ -28,7 +28,11 @@ GasFeeDisplay.prototype.render = function () {
       ? h(CurrencyDisplay, {
         primaryCurrency: 'ETH',
         convertedCurrency: 'USD',
-        value: multiplyCurrencies(gasLimit, gasPrice, { toNumericBase: 'hex' }),
+        value: multiplyCurrencies(gasLimit, gasPrice, {
+          toNumericBase: 'hex',
+          multiplicandBase: 16,
+          multiplierBase: 16,
+        }),
         conversionRate,
         convertedPrefix: '$',
         readOnly: true,
diff --git a/ui/app/components/send/send-v2-container.js b/ui/app/components/send/send-v2-container.js
index 0c8dd5335..c3af1c972 100644
--- a/ui/app/components/send/send-v2-container.js
+++ b/ui/app/components/send/send-v2-container.js
@@ -12,6 +12,8 @@ const {
   getSelectedToken,
   getSelectedTokenExchangeRate,
   getSelectedAddress,
+  getGasPrice,
+  getGasLimit,
 } = require('../../selectors')
 
 module.exports = connect(mapStateToProps, mapDispatchToProps)(SendEther)
@@ -49,6 +51,8 @@ function mapStateToProps (state) {
     primaryCurrency,
     data,
     tokenToUSDRate,
+    gasPrice: getGasPrice(state),
+    gasLimit: getGasLimit(state),
   }
 }