Read only connection of gas price chart to redux

10 files changed, 95 insertions, 21 deletions

diff --git a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js
index f90da0a88..44aba358c 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js
+++ b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js
@@ -15,6 +15,7 @@ export default class AdvancedTabContent extends Component {
     millisecondsRemaining: PropTypes.number,
     totalFee: PropTypes.string,
     timeRemaining: PropTypes.string,
+    gasChartProps: PropTypes.object,
   }
 
   gasInput (value, onChange, min, precision, showGWEI) {
@@ -82,6 +83,7 @@ export default class AdvancedTabContent extends Component {
       customGasPrice,
       customGasLimit,
       totalFee,
+      gasChartProps,
     } = this.props
 
     return (
@@ -95,7 +97,7 @@ export default class AdvancedTabContent extends Component {
               updateCustomGasLimit
           ) }
           <div className="advanced-tab__fee-chart__title">Live Gas Price Predictions</div>
-          <GasPriceChart />
+          <GasPriceChart {...gasChartProps} />
           <div className="advanced-tab__fee-chart__speed-buttons">
             <span>Slower</span>
             <span>Faster</span>
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.component.js b/ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.component.js
index ac5981ab7..de14e1b38 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.component.js
+++ b/ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.component.js
@@ -46,6 +46,7 @@ export default class GasModalPageContainer extends Component {
     customGasPrice,
     customGasLimit,
     newTotalFiat,
+    gasChartProps,
   }) {
     const { transactionFee } = this.props
     return (
@@ -57,6 +58,7 @@ export default class GasModalPageContainer extends Component {
         timeRemaining="1 min 31 sec"
         transactionFee={transactionFee}
         totalFee={newTotalFiat}
+        gasChartProps={gasChartProps}
       />
     )
   }
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js b/ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js
index 9d6dd3fb5..84eae1880 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js
+++ b/ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js
@@ -73,12 +73,14 @@ const mapStateToProps = state => {
     customGasPrice: calcCustomGasPrice(customModalGasPriceInHex),
     customGasLimit: calcCustomGasLimit(customModalGasLimitInHex),
     newTotalFiat,
-    transactionFee: addHexWEIsToRenderableFiat('0x0', customGasTotal, currentCurrency, conversionRate),
     gasPriceButtonGroupProps: {
       buttonDataLoading,
       defaultActiveButtonIndex: getDefaultActiveButtonIndex(gasButtonInfo, customModalGasPriceInHex),
       gasButtonInfo,
     },
+    gasChartProps: {
+      priceAndTimeEstimates: state.gas.priceAndTimeEstimates,
+    },
     infoRowProps: {
       originalTotalFiat: addHexWEIsToRenderableFiat(value, gasTotal, currentCurrency, conversionRate),
       originalTotalEth: addHexWEIsToRenderableEth(value, gasTotal),
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-container.test.js b/ui/app/components/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-container.test.js
index 3d9fb2624..c16a07b76 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-container.test.js
+++ b/ui/app/components/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-container.test.js
@@ -75,6 +75,7 @@ describe('gas-modal-page-container container', () => {
             limit: 'aaaaaaaa',
             price: 'ffffffff',
           },
+          priceAndTimeEstimates: 'mockPriceAndTimeEstimates',
         },
         confirmTransaction: {
           txData: {
@@ -95,6 +96,9 @@ describe('gas-modal-page-container container', () => {
         newTotalFiat: '637.41',
         customModalGasLimitInHex: 'aaaaaaaa',
         customModalGasPriceInHex: 'ffffffff',
+        gasChartProps: {
+          priceAndTimeEstimates: 'mockPriceAndTimeEstimates',
+        },
         gasPriceButtonGroupProps: {
           buttonDataLoading: 'mockBasicGasEstimateLoadingStatus:4',
           defaultActiveButtonIndex: 'mockRenderableBasicEstimateData:4ffffffff',
diff --git a/ui/app/components/gas-customization/gas-price-chart/tests/gas-price-chart.component.test.js b/ui/app/components/gas-customization/gas-price-chart/tests/gas-price-chart.component.test.js
index 1a0f6760e..ae98659cc 100644
--- a/ui/app/components/gas-customization/gas-price-chart/tests/gas-price-chart.component.test.js
+++ b/ui/app/components/gas-customization/gas-price-chart/tests/gas-price-chart.component.test.js
@@ -1,18 +1,57 @@
 import React from 'react'
 import assert from 'assert'
+import proxyquire from 'proxyquire'
+import sinon from 'sinon'
 import shallow from '../../../../../lib/shallow-with-context'
-import GasPriceChart from '../gas-price-chart.component.js'
+import * as d3 from 'd3'
+
+const mockSelectReturn = {
+  ...d3.select('div'),
+  node: () => ({
+    getBoundingClientRect: () => ({ x: 123, y: 321, width: 400 }),
+  }),
+  select: d3.select,
+  attr: sinon.spy(),
+  on: sinon.spy(),
+}
+
+const GasPriceChart = proxyquire('../gas-price-chart.component.js', {
+  'c3': {
+    generate: function () {
+      return {
+        internal: {
+          showTooltip: () => {},
+          showXGridFocus: () => {},
+        },
+      }
+    },
+  },
+  'd3': {
+    ...d3,
+    select: function (...args) {
+      const result = d3.select(...args)
+      return result.empty()
+        ? mockSelectReturn
+        : result
+    },
+  },
+}).default
 
 describe('GasPriceChart Component', function () {
   let wrapper
 
   beforeEach(() => {
-    wrapper = shallow(<GasPriceChart />)
+    wrapper = shallow(<GasPriceChart
+      priceAndTimeEstimates={[
+        { gasprice: 1, expectedTime: 10 },
+        { gasprice: 2, expectedTime: 20 },
+        { gasprice: 3, expectedTime: 30 },
+      ]}
+    />)
   })
 
   describe('render()', () => {
     it('should render', () => {
-      console.log('wrapper', wrapper.html())
       assert(wrapper.hasClass('gas-price-chart'))
     })
 
diff --git a/ui/app/components/pages/confirm-transaction/confirm-transaction.component.js b/ui/app/components/pages/confirm-transaction/confirm-transaction.component.js
index 614b3e584..7a3b58ffa 100644
--- a/ui/app/components/pages/confirm-transaction/confirm-transaction.component.js
+++ b/ui/app/components/pages/confirm-transaction/confirm-transaction.component.js
@@ -32,7 +32,7 @@ export default class ConfirmTransaction extends Component {
     setTransactionToConfirm: PropTypes.func,
     confirmTransaction: PropTypes.object,
     clearConfirmTransaction: PropTypes.func,
-    fetchGasEstimates: PropTypes.func,
+    fetchBasicGasEstimates: PropTypes.func,
   }
 
   getParamsTransactionId () {
@@ -46,7 +46,7 @@ export default class ConfirmTransaction extends Component {
       send = {},
       history,
       confirmTransaction: { txData: { id: transactionId } = {} },
-      fetchGasEstimates,
+      fetchBasicGasEstimates,
     } = this.props
 
     if (!totalUnapprovedCount && !send.to) {
@@ -55,7 +55,7 @@ export default class ConfirmTransaction extends Component {
     }
 
     if (!transactionId) {
-      fetchGasEstimates()
+      fetchBasicGasEstimates()
       this.setTransactionToConfirm()
     }
   }
diff --git a/ui/app/components/pages/confirm-transaction/confirm-transaction.container.js b/ui/app/components/pages/confirm-transaction/confirm-transaction.container.js
index cb1a737f9..a7e6966af 100644
--- a/ui/app/components/pages/confirm-transaction/confirm-transaction.container.js
+++ b/ui/app/components/pages/confirm-transaction/confirm-transaction.container.js
@@ -6,7 +6,7 @@ import {
   clearConfirmTransaction,
 } from '../../../ducks/confirm-transaction.duck'
 import {
-  fetchGasEstimates,
+  fetchBasicGasEstimates,
 } from '../../../ducks/gas.duck'
 import ConfirmTransaction from './confirm-transaction.component'
 import { getTotalUnapprovedCount } from '../../../selectors'
@@ -27,7 +27,7 @@ const mapDispatchToProps = dispatch => {
   return {
     setTransactionToConfirm: transactionId => dispatch(setTransactionToConfirm(transactionId)),
     clearConfirmTransaction: () => dispatch(clearConfirmTransaction()),
-    fetchGasEstimates: () => dispatch(fetchGasEstimates()),
+    fetchBasicGasEstimates: () => dispatch(fetchBasicGasEstimates()),
   }
 }
 
diff --git a/ui/app/components/send/send.component.js b/ui/app/components/send/send.component.js
index 5c12826ea..301acb1db 100644
--- a/ui/app/components/send/send.component.js
+++ b/ui/app/components/send/send.component.js
@@ -163,9 +163,10 @@ export default class SendTransactionScreen extends PersistentForm {
   }
 
   componentDidMount () {
-    this.props.fetchGasEstimates()
-    .then(() => {
+    this.props.fetchBasicGasEstimates()
+    .then(basicEstimates => {
       this.updateGas()
+      this.props.fetchGasEstimates(basicEstimates.blockTime)
     })
   }
 
diff --git a/ui/app/components/send/send.container.js b/ui/app/components/send/send.container.js
index f240774d4..ac804cf2a 100644
--- a/ui/app/components/send/send.container.js
+++ b/ui/app/components/send/send.container.js
@@ -37,6 +37,7 @@ import {
   updateSendErrors,
 } from '../../ducks/send.duck'
 import {
+  fetchBasicGasEstimates,
   fetchGasEstimates,
 } from '../../ducks/gas.duck'
 import {
@@ -107,6 +108,7 @@ function mapDispatchToProps (dispatch) {
     scanQrCode: () => dispatch(showQrScanner(SEND_ROUTE)),
     qrCodeDetected: (data) => dispatch(qrCodeDetected(data)),
     updateSendTo: (to, nickname) => dispatch(updateSendTo(to, nickname)),
-    fetchGasEstimates: () => dispatch(fetchGasEstimates()),
+    fetchBasicGasEstimates: () => dispatch(fetchBasicGasEstimates()),
+    fetchGasEstimates: (blockTime) => dispatch(fetchGasEstimates(blockTime)),
   }
 }
diff --git a/ui/app/components/send/tests/send-component.test.js b/ui/app/components/send/tests/send-component.test.js
index 82e84de30..68d2fc47e 100644
--- a/ui/app/components/send/tests/send-component.test.js
+++ b/ui/app/components/send/tests/send-component.test.js
@@ -8,12 +8,23 @@ import SendHeader from '../send-header/send-header.container'
 import SendContent from '../send-content/send-content.component'
 import SendFooter from '../send-footer/send-footer.container'
 
+function timeout (time) {
+  return new Promise((resolve, reject) => {
+    setTimeout(resolve, time || 1500)
+  })
+}
+
+const mockBasicGasEstimates = {
+  blockTime: 'mockBlockTime',
+}
+
 const propsMethodSpies = {
   updateAndSetGasLimit: sinon.spy(),
   updateSendErrors: sinon.spy(),
   updateSendTokenBalance: sinon.spy(),
   resetSendState: sinon.spy(),
-  fetchGasEstimates: sinon.stub().returns(Promise.resolve()),
+  fetchBasicGasEstimates: sinon.stub().returns(Promise.resolve(mockBasicGasEstimates)),
+  fetchGasEstimates: sinon.spy(),
 }
 const utilsMethodStubs = {
   getAmountErrorObject: sinon.stub().returns({ amount: 'mockAmountError' }),
@@ -38,6 +49,7 @@ describe('Send Component', function () {
       blockGasLimit={'mockBlockGasLimit'}
       conversionRate={10}
       editingTransactionId={'mockEditingTransactionId'}
+      fetchBasicGasEstimates={propsMethodSpies.fetchBasicGasEstimates}
       fetchGasEstimates={propsMethodSpies.fetchGasEstimates}
       from={ { address: 'mockAddress', balance: 'mockBalance' } }
       gasLimit={'mockGasLimit'}
@@ -65,7 +77,7 @@ describe('Send Component', function () {
     utilsMethodStubs.doesAmountErrorRequireUpdate.resetHistory()
     utilsMethodStubs.getAmountErrorObject.resetHistory()
     utilsMethodStubs.getGasFeeErrorObject.resetHistory()
-    propsMethodSpies.fetchGasEstimates.resetHistory()
+    propsMethodSpies.fetchBasicGasEstimates.resetHistory()
     propsMethodSpies.updateAndSetGasLimit.resetHistory()
     propsMethodSpies.updateSendErrors.resetHistory()
     propsMethodSpies.updateSendTokenBalance.resetHistory()
@@ -76,19 +88,29 @@ describe('Send Component', function () {
   })
 
   describe('componentDidMount', () => {
-    it('should call props.fetchGasEstimates', () => {
-      propsMethodSpies.fetchGasEstimates.resetHistory()
-      assert.equal(propsMethodSpies.fetchGasEstimates.callCount, 0)
+    it('should call props.fetchBasicGasEstimates', () => {
+      propsMethodSpies.fetchBasicGasEstimates.resetHistory()
+      assert.equal(propsMethodSpies.fetchBasicGasEstimates.callCount, 0)
       wrapper.instance().componentDidMount()
-      assert.equal(propsMethodSpies.fetchGasEstimates.callCount, 1)
+      assert.equal(propsMethodSpies.fetchBasicGasEstimates.callCount, 1)
     })
 
-    it('should call this.updateGas', () => {
+    it('should call this.updateGas', async () => {
       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)
+      await timeout(250)
+      assert.equal(SendTransactionScreen.prototype.updateGas.callCount, 1)
+    })
+
+    it('should call props.fetchGasEstimates with the block time returned by fetchBasicGasEstimates', async () => {
+      propsMethodSpies.fetchGasEstimates.resetHistory()
+      assert.equal(propsMethodSpies.fetchGasEstimates.callCount, 0)
+      wrapper.instance().componentDidMount()
+      await timeout(250)
+      assert.equal(propsMethodSpies.fetchGasEstimates.callCount, 1)
+      assert.equal(propsMethodSpies.fetchGasEstimates.getCall(0).args[0], 'mockBlockTime')
     })
   })