Connects remained of the gas customization component to redux.

6 files changed, 43 insertions, 38 deletions

diff --git a/ui/app/components/send/send.component.js b/ui/app/components/send/send.component.js
index a639c24b0..5c12826ea 100644
--- a/ui/app/components/send/send.component.js
+++ b/ui/app/components/send/send.component.js
@@ -73,10 +73,10 @@ export default class SendTransactionScreen extends PersistentForm {
       selectedAddress,
       selectedToken = {},
       to: currentToAddress,
-      updateAndSetGasTotal,
+      updateAndSetGasLimit,
     } = this.props
 
-    updateAndSetGasTotal({
+    updateAndSetGasLimit({
       blockGasLimit,
       editingTransactionId,
       gasLimit,
@@ -164,6 +164,9 @@ export default class SendTransactionScreen extends PersistentForm {
 
   componentDidMount () {
     this.props.fetchGasEstimates()
+    .then(() => {
+      this.updateGas()
+    })
   }
 
   componentWillMount () {
@@ -173,12 +176,12 @@ export default class SendTransactionScreen extends PersistentForm {
       tokenContract,
       updateSendTokenBalance,
     } = this.props
+
     updateSendTokenBalance({
       selectedToken,
       tokenContract,
       address,
     })
-    this.updateGas()
 
     // Show QR Scanner modal  if ?scan=true
     if (window.location.search === '?scan=true') {
diff --git a/ui/app/components/send/send.container.js b/ui/app/components/send/send.container.js
index a00fb3545..f240774d4 100644
--- a/ui/app/components/send/send.container.js
+++ b/ui/app/components/send/send.container.js
@@ -79,7 +79,7 @@ function mapStateToProps (state) {
 
 function mapDispatchToProps (dispatch) {
   return {
-    updateAndSetGasTotal: ({
+    updateAndSetGasLimit: ({
       blockGasLimit,
       editingTransactionId,
       gasLimit,
@@ -92,7 +92,7 @@ function mapDispatchToProps (dispatch) {
       data,
     }) => {
       !editingTransactionId
-        ? dispatch(updateGasData({ recentBlocks, selectedAddress, selectedToken, blockGasLimit, to, value, data }))
+        ? dispatch(updateGasData({ gasPrice, recentBlocks, selectedAddress, selectedToken, blockGasLimit, to, value, data }))
         : dispatch(setGasTotal(calcGasTotal(gasLimit, gasPrice)))
     },
     updateSendTokenBalance: ({ selectedToken, tokenContract, address }) => {
diff --git a/ui/app/components/send/send.selectors.js b/ui/app/components/send/send.selectors.js
index c217d848e..71eb93d61 100644
--- a/ui/app/components/send/send.selectors.js
+++ b/ui/app/components/send/send.selectors.js
@@ -8,7 +8,11 @@ const {
 } = require('../../selectors')
 const {
   estimateGasPriceFromRecentBlocks,
+  calcGasTotal,
 } = require('./send.utils')
+import {
+  getAveragePriceEstimateInHexWEI,
+} from '../../selectors/custom-gas'
 
 const selectors = {
   accountsWithSendEtherInfoSelector,
@@ -131,11 +135,11 @@ function getForceGasMin (state) {
 }
 
 function getGasLimit (state) {
-  return state.metamask.send.gasLimit
+  return state.metamask.send.gasLimit || '0'
 }
 
 function getGasPrice (state) {
-  return state.metamask.send.gasPrice
+  return state.metamask.send.gasPrice || getAveragePriceEstimateInHexWEI(state)
 }
 
 function getGasPriceFromRecentBlocks (state) {
@@ -143,7 +147,7 @@ function getGasPriceFromRecentBlocks (state) {
 }
 
 function getGasTotal (state) {
-  return state.metamask.send.gasTotal
+  return calcGasTotal(getGasLimit(state), getGasPrice(state))
 }
 
 function getPrimaryCurrency (state) {
diff --git a/ui/app/components/send/tests/send-component.test.js b/ui/app/components/send/tests/send-component.test.js
index 0f3902c07..82e84de30 100644
--- a/ui/app/components/send/tests/send-component.test.js
+++ b/ui/app/components/send/tests/send-component.test.js
@@ -9,11 +9,11 @@ import SendContent from '../send-content/send-content.component'
 import SendFooter from '../send-footer/send-footer.container'
 
 const propsMethodSpies = {
-  updateAndSetGasTotal: sinon.spy(),
+  updateAndSetGasLimit: sinon.spy(),
   updateSendErrors: sinon.spy(),
   updateSendTokenBalance: sinon.spy(),
   resetSendState: sinon.spy(),
-  fetchGasEstimates: sinon.spy(),
+  fetchGasEstimates: sinon.stub().returns(Promise.resolve()),
 }
 const utilsMethodStubs = {
   getAmountErrorObject: sinon.stub().returns({ amount: 'mockAmountError' }),
@@ -52,7 +52,7 @@ describe('Send Component', function () {
       showHexData={true}
       tokenBalance={'mockTokenBalance'}
       tokenContract={'mockTokenContract'}
-      updateAndSetGasTotal={propsMethodSpies.updateAndSetGasTotal}
+      updateAndSetGasLimit={propsMethodSpies.updateAndSetGasLimit}
       updateSendErrors={propsMethodSpies.updateSendErrors}
       updateSendTokenBalance={propsMethodSpies.updateSendTokenBalance}
       resetSendState={propsMethodSpies.resetSendState}
@@ -66,7 +66,7 @@ describe('Send Component', function () {
     utilsMethodStubs.getAmountErrorObject.resetHistory()
     utilsMethodStubs.getGasFeeErrorObject.resetHistory()
     propsMethodSpies.fetchGasEstimates.resetHistory()
-    propsMethodSpies.updateAndSetGasTotal.resetHistory()
+    propsMethodSpies.updateAndSetGasLimit.resetHistory()
     propsMethodSpies.updateSendErrors.resetHistory()
     propsMethodSpies.updateSendTokenBalance.resetHistory()
   })
@@ -75,16 +75,6 @@ describe('Send Component', function () {
     assert(SendTransactionScreen.prototype.componentDidMount.calledOnce)
   })
 
-  describe('componentWillMount', () => {
-    it('should call this.updateGas', () => {
-      SendTransactionScreen.prototype.updateGas.resetHistory()
-      propsMethodSpies.updateSendErrors.resetHistory()
-      assert.equal(SendTransactionScreen.prototype.updateGas.callCount, 0)
-      wrapper.instance().componentWillMount()
-      assert.equal(SendTransactionScreen.prototype.updateGas.callCount, 1)
-    })
-  })
-
   describe('componentDidMount', () => {
     it('should call props.fetchGasEstimates', () => {
       propsMethodSpies.fetchGasEstimates.resetHistory()
@@ -92,6 +82,14 @@ describe('Send Component', function () {
       wrapper.instance().componentDidMount()
       assert.equal(propsMethodSpies.fetchGasEstimates.callCount, 1)
     })
+
+    it('should call this.updateGas', () => {
+      SendTransactionScreen.prototype.updateGas.resetHistory()
+      propsMethodSpies.updateSendErrors.resetHistory()
+      assert.equal(SendTransactionScreen.prototype.updateGas.callCount, 0)
+      wrapper.instance().componentDidMount()
+      setTimeout(() => assert.equal(SendTransactionScreen.prototype.updateGas.callCount, 1), 250)
+    })
   })
 
   describe('componentWillUnmount', () => {
@@ -283,12 +281,12 @@ describe('Send Component', function () {
   })
 
   describe('updateGas', () => {
-    it('should call updateAndSetGasTotal with the correct params if no to prop is passed', () => {
-      propsMethodSpies.updateAndSetGasTotal.resetHistory()
+    it('should call updateAndSetGasLimit with the correct params if no to prop is passed', () => {
+      propsMethodSpies.updateAndSetGasLimit.resetHistory()
       wrapper.instance().updateGas()
-      assert.equal(propsMethodSpies.updateAndSetGasTotal.callCount, 1)
+      assert.equal(propsMethodSpies.updateAndSetGasLimit.callCount, 1)
       assert.deepEqual(
-        propsMethodSpies.updateAndSetGasTotal.getCall(0).args[0],
+        propsMethodSpies.updateAndSetGasLimit.getCall(0).args[0],
         {
           blockGasLimit: 'mockBlockGasLimit',
           editingTransactionId: 'mockEditingTransactionId',
@@ -304,20 +302,20 @@ describe('Send Component', function () {
       )
     })
 
-    it('should call updateAndSetGasTotal with the correct params if a to prop is passed', () => {
-      propsMethodSpies.updateAndSetGasTotal.resetHistory()
+    it('should call updateAndSetGasLimit with the correct params if a to prop is passed', () => {
+      propsMethodSpies.updateAndSetGasLimit.resetHistory()
       wrapper.setProps({ to: 'someAddress' })
       wrapper.instance().updateGas()
       assert.equal(
-        propsMethodSpies.updateAndSetGasTotal.getCall(0).args[0].to,
+        propsMethodSpies.updateAndSetGasLimit.getCall(0).args[0].to,
         'someaddress',
       )
     })
 
-    it('should call updateAndSetGasTotal with to set to lowercase if passed', () => {
-      propsMethodSpies.updateAndSetGasTotal.resetHistory()
+    it('should call updateAndSetGasLimit with to set to lowercase if passed', () => {
+      propsMethodSpies.updateAndSetGasLimit.resetHistory()
       wrapper.instance().updateGas({ to: '0xABC' })
-      assert.equal(propsMethodSpies.updateAndSetGasTotal.getCall(0).args[0].to, '0xabc')
+      assert.equal(propsMethodSpies.updateAndSetGasLimit.getCall(0).args[0].to, '0xabc')
     })
   })
 
diff --git a/ui/app/components/send/tests/send-container.test.js b/ui/app/components/send/tests/send-container.test.js
index 6aa4bf826..d8fe85d22 100644
--- a/ui/app/components/send/tests/send-container.test.js
+++ b/ui/app/components/send/tests/send-container.test.js
@@ -94,7 +94,7 @@ describe('send container', () => {
       mapDispatchToPropsObject = mapDispatchToProps(dispatchSpy)
     })
 
-    describe('updateAndSetGasTotal()', () => {
+    describe('updateAndSetGasLimit()', () => {
       const mockProps = {
         blockGasLimit: 'mockBlockGasLimit',
         editingTransactionId: '0x2',
@@ -109,7 +109,7 @@ describe('send container', () => {
       }
 
       it('should dispatch a setGasTotal action when editingTransactionId is truthy', () => {
-        mapDispatchToPropsObject.updateAndSetGasTotal(mockProps)
+        mapDispatchToPropsObject.updateAndSetGasLimit(mockProps)
         assert(dispatchSpy.calledOnce)
         assert.equal(
           actionSpies.setGasTotal.getCall(0).args[0],
@@ -118,14 +118,14 @@ describe('send container', () => {
       })
 
       it('should dispatch an updateGasData action when editingTransactionId is falsy', () => {
-        const { selectedAddress, selectedToken, recentBlocks, blockGasLimit, to, value, data } = mockProps
-        mapDispatchToPropsObject.updateAndSetGasTotal(
+        const { gasPrice, selectedAddress, selectedToken, recentBlocks, blockGasLimit, to, value, data } = mockProps
+        mapDispatchToPropsObject.updateAndSetGasLimit(
           Object.assign({}, mockProps, {editingTransactionId: false})
         )
         assert(dispatchSpy.calledOnce)
         assert.deepEqual(
           actionSpies.updateGasData.getCall(0).args[0],
-          { selectedAddress, selectedToken, recentBlocks, blockGasLimit, to, value, data }
+          { gasPrice, selectedAddress, selectedToken, recentBlocks, blockGasLimit, to, value, }
         )
       })
     })
diff --git a/ui/app/components/send/tests/send-selectors.test.js b/ui/app/components/send/tests/send-selectors.test.js
index e7e901f0d..cdc86fe59 100644
--- a/ui/app/components/send/tests/send-selectors.test.js
+++ b/ui/app/components/send/tests/send-selectors.test.js
@@ -237,7 +237,7 @@ describe('send selectors', () => {
     it('should return the send.gasTotal', () => {
       assert.equal(
         getGasTotal(mockState),
-        '0xb451dc41b578'
+        'a9ff56'
       )
     })
   })