Read only connection of gas price chart to redux

5 files changed, 54 insertions, 5 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'))
     })