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

9 files changed, 62 insertions, 34 deletions

diff --git a/ui/app/components/button-group/button-group.component.js b/ui/app/components/button-group/button-group.component.js
index f99f710ce..905bbe9d2 100644
--- a/ui/app/components/button-group/button-group.component.js
+++ b/ui/app/components/button-group/button-group.component.js
@@ -5,6 +5,7 @@ import classnames from 'classnames'
 export default class ButtonGroup extends PureComponent {
   static propTypes = {
     defaultActiveButtonIndex: PropTypes.number,
+    noButtonActiveByDefault: PropTypes.bool,
     disabled: PropTypes.bool,
     children: PropTypes.array,
     className: PropTypes.string,
@@ -16,7 +17,9 @@ export default class ButtonGroup extends PureComponent {
   }
 
   state = {
-    activeButtonIndex: this.props.defaultActiveButtonIndex || 0,
+    activeButtonIndex: this.props.noButtonActiveByDefault
+      ? null
+      : this.props.defaultActiveButtonIndex || 0,
   }
 
   handleButtonClick (activeButtonIndex) {
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
+}
diff --git a/ui/app/components/send/send.component.js b/ui/app/components/send/send.component.js
index a27401f30..a639c24b0 100644
--- a/ui/app/components/send/send.component.js
+++ b/ui/app/components/send/send.component.js
@@ -162,6 +162,10 @@ export default class SendTransactionScreen extends PersistentForm {
     }
   }
 
+  componentDidMount () {
+    this.props.fetchGasEstimates()
+  }
+
   componentWillMount () {
     const {
       from: { address },
diff --git a/ui/app/components/send/send.container.js b/ui/app/components/send/send.container.js
index 87056499f..a00fb3545 100644
--- a/ui/app/components/send/send.container.js
+++ b/ui/app/components/send/send.container.js
@@ -37,6 +37,9 @@ import {
   updateSendErrors,
 } from '../../ducks/send.duck'
 import {
+  fetchGasEstimates,
+} from '../../ducks/gas.duck'
+import {
   calcGasTotal,
 } from './send.utils.js'
 
@@ -104,5 +107,6 @@ function mapDispatchToProps (dispatch) {
     scanQrCode: () => dispatch(showQrScanner(SEND_ROUTE)),
     qrCodeDetected: (data) => dispatch(qrCodeDetected(data)),
     updateSendTo: (to, nickname) => dispatch(updateSendTo(to, nickname)),
+    fetchGasEstimates: () => dispatch(fetchGasEstimates()),
   }
 }
diff --git a/ui/app/components/send/tests/send-component.test.js b/ui/app/components/send/tests/send-component.test.js
index bd136a0b8..0f3902c07 100644
--- a/ui/app/components/send/tests/send-component.test.js
+++ b/ui/app/components/send/tests/send-component.test.js
@@ -13,6 +13,7 @@ const propsMethodSpies = {
   updateSendErrors: sinon.spy(),
   updateSendTokenBalance: sinon.spy(),
   resetSendState: sinon.spy(),
+  fetchGasEstimates: sinon.spy(),
 }
 const utilsMethodStubs = {
   getAmountErrorObject: sinon.stub().returns({ amount: 'mockAmountError' }),
@@ -37,6 +38,7 @@ describe('Send Component', function () {
       blockGasLimit={'mockBlockGasLimit'}
       conversionRate={10}
       editingTransactionId={'mockEditingTransactionId'}
+      fetchGasEstimates={propsMethodSpies.fetchGasEstimates}
       from={ { address: 'mockAddress', balance: 'mockBalance' } }
       gasLimit={'mockGasLimit'}
       gasPrice={'mockGasPrice'}
@@ -63,6 +65,7 @@ describe('Send Component', function () {
     utilsMethodStubs.doesAmountErrorRequireUpdate.resetHistory()
     utilsMethodStubs.getAmountErrorObject.resetHistory()
     utilsMethodStubs.getGasFeeErrorObject.resetHistory()
+    propsMethodSpies.fetchGasEstimates.resetHistory()
     propsMethodSpies.updateAndSetGasTotal.resetHistory()
     propsMethodSpies.updateSendErrors.resetHistory()
     propsMethodSpies.updateSendTokenBalance.resetHistory()
@@ -82,6 +85,15 @@ describe('Send Component', function () {
     })
   })
 
+  describe('componentDidMount', () => {
+    it('should call props.fetchGasEstimates', () => {
+      propsMethodSpies.fetchGasEstimates.resetHistory()
+      assert.equal(propsMethodSpies.fetchGasEstimates.callCount, 0)
+      wrapper.instance().componentDidMount()
+      assert.equal(propsMethodSpies.fetchGasEstimates.callCount, 1)
+    })
+  })
+
   describe('componentWillUnmount', () => {
     it('should call this.props.resetSendState', () => {
       propsMethodSpies.resetSendState.resetHistory()