Connect the gas-button-group component to redux and a live api.

5 files changed, 38 insertions, 33 deletions

diff --git a/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/basic-tab-content.component.js b/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/basic-tab-content.component.js
index 751042871..99ef28b5e 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/basic-tab-content.component.js
+++ b/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/basic-tab-content.component.js
@@ -15,7 +15,13 @@ export default class BasicTabContent extends Component {
     return (
       <div className="basic-tab-content">
         <div className="basic-tab-content__title">Suggest gas fee increases</div>
-        <GasPriceButtonGroup {...this.props.gasPriceButtonGroupProps} />
+        <GasPriceButtonGroup
+          {...this.props.gasPriceButtonGroupProps}
+          className="gas-price-button-group"
+          noButtonActiveByDefault={true}
+          showCheck={true}
+          handleGasPriceSelection={(newPrice) => console.log('New Price:', newPrice)}
+        />
       </div>
     )
   }
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 9a0070b2a..399520baf 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
@@ -23,7 +23,9 @@ export default class GasModalPageContainer extends Component {
 
   renderBasicTabContent () {
     return (
-      <BasicTabContent gasPriceButtonGroupProps={this.props.gasPriceButtonGroupProps} />
+      <BasicTabContent
+        gasPriceButtonGroupProps={this.props.gasPriceButtonGroupProps}
+      />
     )
   }
 
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 2354d578c..ebdd035ea 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
@@ -4,45 +4,23 @@ import { hideModal } from '../../../actions'
 import {
   setCustomGasPrice,
   setCustomGasLimit,
-} from '../../../ducks/custom-gas'
+} from '../../../ducks/gas.duck'
 import {
   getCustomGasPrice,
   getCustomGasLimit,
+  getRenderableBasicEstimateData,
+  getBasicGasEstimateLoadingStatus,
 } from '../../../selectors/custom-gas'
 
-const mockGasPriceButtonGroupProps = {
-  buttonDataLoading: false,
-  className: 'gas-price-button-group',
-  gasButtonInfo: [
-    {
-      feeInPrimaryCurrency: '$0.52',
-      feeInSecondaryCurrency: '0.0048 ETH',
-      timeEstimate: '~ 1 min 0 sec',
-      priceInHexWei: '0xa1b2c3f',
-    },
-    {
-      feeInPrimaryCurrency: '$0.39',
-      feeInSecondaryCurrency: '0.004 ETH',
-      timeEstimate: '~ 1 min 30 sec',
-      priceInHexWei: '0xa1b2c39',
-    },
-    {
-      feeInPrimaryCurrency: '$0.30',
-      feeInSecondaryCurrency: '0.00354 ETH',
-      timeEstimate: '~ 2 min 1 sec',
-      priceInHexWei: '0xa1b2c30',
-    },
-  ],
-  handleGasPriceSelection: newPrice => console.log('NewPrice: ', newPrice),
-  noButtonActiveByDefault: true,
-  showCheck: true,
-}
-
 const mapStateToProps = state => {
+  const buttonDataLoading = getBasicGasEstimateLoadingStatus(state)
   return {
     customGasPrice: getCustomGasPrice(state),
     customGasLimit: getCustomGasLimit(state),
-    gasPriceButtonGroupProps: mockGasPriceButtonGroupProps,
+    gasPriceButtonGroupProps: {
+      buttonDataLoading,
+      gasButtonInfo: getRenderableBasicEstimateData(state),
+    },
   }
 }
 
@@ -51,6 +29,7 @@ const mapDispatchToProps = dispatch => {
     hideModal: () => dispatch(hideModal()),
     updateCustomGasPrice: (newPrice) => dispatch(setCustomGasPrice(newPrice)),
     updateCustomGasLimit: (newLimit) => dispatch(setCustomGasLimit(newLimit)),
+    handleGasPriceSelection: newPrice => console.log('NewPrice: ', newPrice),
   }
 }
 
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 119ae640b..4067265b5 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
@@ -25,9 +25,11 @@ proxyquire('../gas-modal-page-container.container.js', {
   '../../../selectors/custom-gas': {
     getCustomGasPrice: (s) => `mockGasPrice:${s}`,
     getCustomGasLimit: (s) => `mockGasLimit:${s}`,
+    getBasicGasEstimateLoadingStatus: (s) => `mockBasicGasEstimateLoadingStatus:${s}`,
+    getRenderableBasicEstimateData: (s) => `mockRenderableBasicEstimateData:${s}`,
   },
   '../../../actions': actionSpies,
-  '../../../ducks/custom-gas': customGasActionSpies,
+  '../../../ducks/gas.duck': customGasActionSpies,
 })
 
 describe('gas-modal-page-container container', () => {
@@ -37,6 +39,8 @@ describe('gas-modal-page-container container', () => {
     it('should map the correct properties to props', () => {
       assert.equal(mapStateToProps('mockState').customGasPrice, 'mockGasPrice:mockState')
       assert.equal(mapStateToProps('mockState').customGasLimit, 'mockGasLimit:mockState')
+      assert.equal(mapStateToProps('mockState').gasPriceButtonGroupProps.buttonDataLoading, 'mockBasicGasEstimateLoadingStatus:mockState')
+      assert.equal(mapStateToProps('mockState').gasPriceButtonGroupProps.gasButtonInfo, 'mockRenderableBasicEstimateData:mockState')
     })
 
   })
diff --git a/ui/app/components/gas-customization/gas.selectors.js b/ui/app/components/gas-customization/gas.selectors.js
new file mode 100644
index 000000000..89374b5f1
--- /dev/null
+++ b/ui/app/components/gas-customization/gas.selectors.js
@@ -0,0 +1,14 @@
+const selectors = {
+  getCurrentBlockTime,
+  getBasicGasEstimateLoadingStatus,
+}
+
+module.exports = selectors
+
+function getCurrentBlockTime (state) {
+  return state.gas.currentBlockTime
+}
+
+function getBasicGasEstimateLoadingStatus (state) {
+  return state.gas.basicEstimateIsLoading
+}