Customize Gas connected to state

ui/app/actions.js

@@ -133,6 +133,10 @@ var actions = {
   // send screen
   estimateGas,
   getGasPrice,
+  UPDATE_GAS_LIMIT: 'UPDATE_GAS_LIMIT',
+  UPDATE_GAS_PRICE: 'UPDATE_GAS_PRICE',
+  updateGasLimit,
+  updateGasPrice,
   // app messages
   confirmSeedWords: confirmSeedWords,
   showAccountDetail: showAccountDetail,
@@ -463,12 +467,20 @@ function estimateGas (params = {}) {
           return reject(err)
         }
         dispatch(actions.hideWarning())
+        dispatch(actions.updateGasLimit(data))
         return resolve(data)
       })
     })
   }
 }
 
+function updateGasLimit (gasLimit) {
+  return {
+    type: actions.UPDATE_GAS_LIMIT,
+    value: gasLimit,
+  }
+}
+
 function getGasPrice () {
   return (dispatch) => {
     return new Promise((resolve, reject) => {
@@ -478,12 +490,20 @@ function getGasPrice () {
           return reject(err)
         }
         dispatch(actions.hideWarning())
+        dispatch(actions.updateGasPrice(data))
         return resolve(data)
       })
     })
   }
 }
 
+function updateGasPrice (gasPrice) {
+  return {
+    type: actions.UPDATE_GAS_PRICE,
+    value: gasPrice,
+  }
+}
+
 function sendTx (txData) {
   log.info(`actions - sendTx: ${JSON.stringify(txData.txParams)}`)
   return (dispatch) => {

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']),
         ])
 

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,

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),
   }
 }
 

ui/app/conversion-util.js

@@ -32,6 +32,7 @@ BigNumber.config({
 
 // Big Number Constants
 const BIG_NUMBER_WEI_MULTIPLIER = new BigNumber('1000000000000000000')
+const BIG_NUMBER_GWEI_MULTIPLIER = new BigNumber('1000000000')
 
 // Individual Setters
 const convert = R.invoker(1, 'times')
@@ -45,10 +46,12 @@ const toBigNumber = {
   BN: n => new BigNumber(n.toString(16), 16),
 }
 const toNormalizedDenomination = {
-  WEI: bigNumber => bigNumber.div(BIG_NUMBER_WEI_MULTIPLIER)
+  WEI: bigNumber => bigNumber.div(BIG_NUMBER_WEI_MULTIPLIER),
+  GWEI: bigNumber => bigNumber.div(BIG_NUMBER_GWEI_MULTIPLIER),
 }
 const toSpecifiedDenomination = {
-  WEI: bigNumber => bigNumber.times(BIG_NUMBER_WEI_MULTIPLIER).round()
+  WEI: bigNumber => bigNumber.times(BIG_NUMBER_WEI_MULTIPLIER).round(),
+  GWEI: bigNumber => bigNumber.times(BIG_NUMBER_GWEI_MULTIPLIER).round(),
 }
 const baseChange = {
   hex: n => n.toString(16),
@@ -139,8 +142,13 @@ const addCurrencies = (a, b, options = {}) => {
 }
 
 const multiplyCurrencies = (a, b, options = {}) => {
-  const { toNumericBase, numberOfDecimals } = options
-  const value = (new BigNumber(a)).times(b);
+  const {
+    toNumericBase,
+    numberOfDecimals,
+    multiplicandBase,
+    multiplierBase,
+  } = options
+  const value = (new BigNumber(a, multiplicandBase)).times(b, multiplierBase);
   return converter({
     value,
     toNumericBase,

ui/app/reducers/metamask.js

@@ -20,6 +20,10 @@ function reduceMetamask (state, action) {
     selectedTokenAddress: null,
     tokenExchangeRates: {},
     tokens: [],
+    send: {
+      gasLimit: null,
+      gasPrice: null,
+    },
   }, state.metamask)
 
   switch (action.type) {
@@ -152,6 +156,22 @@ function reduceMetamask (state, action) {
         tokens: action.newTokens,
       })
 
+    case actions.UPDATE_GAS_LIMIT:
+      return extend(metamaskState, {
+        send: {
+          ...metamaskState.send,
+          gasLimit: action.value,
+        },
+      })
+
+    case actions.UPDATE_GAS_PRICE:
+      return extend(metamaskState, {
+        send: {
+          ...metamaskState.send,
+          gasPrice: action.value,
+        },
+      })
+
     default:
       return metamaskState
 

ui/app/selectors.js

@@ -10,6 +10,8 @@ const selectors = {
   transactionsSelector,
   accountsWithSendEtherInfoSelector,
   getCurrentAccountWithSendEtherInfo,
+  getGasPrice,
+  getGasLimit,
 }
 
 module.exports = selectors
@@ -46,7 +48,7 @@ function getSelectedTokenExchangeRate (state) {
   const tokenExchangeRates = state.metamask.tokenExchangeRates
   const selectedToken = getSelectedToken(state) || {}
   const { symbol = '' } = selectedToken
-  
+
   const pair = `${symbol.toLowerCase()}_eth`
   const { rate: tokenExchangeRate = 0 } = tokenExchangeRates[pair] || {}
 
@@ -92,3 +94,11 @@ function transactionsSelector (state) {
     : txsToRender
       .sort((a, b) => b.time - a.time)
 }
+
+function getGasPrice (state) {
+  return state.metamask.send.gasPrice
+}
+
+function getGasLimit (state) {
+  return state.metamask.send.gasLimit
+}

ui/app/send-v2.js

@@ -62,12 +62,6 @@ SendTransactionScreen.prototype.componentWillMount = function () {
       gas: '746a528800',
     }),
   ])
-  .then(([blockGasPrice, estimatedGas]) => {
-    this.setState({
-      gasPrice: blockGasPrice,
-      gasLimit: estimatedGas,
-    })
-  })
 }
 
 SendTransactionScreen.prototype.renderHeaderIcon = function () {
@@ -112,14 +106,16 @@ SendTransactionScreen.prototype.render = function () {
     showCustomizeGasModal,
     selectedAccount,
     primaryCurrency = 'ETH',
+    gasLimit,
+    gasPrice,
   } = this.props
 
   const {
     dropdownOpen,
     to,
     amount,
-    gasLimit,
-    gasPrice,
+    // gasLimit,
+    // gasPrice,
     memo,
   } = this.state