Improve data management and tests for gas-modal-page-container price estimates.

ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js

@@ -24,13 +24,16 @@ import {
   getSelectedToken,
 } from '../../../selectors.js'
 import {
-  getCustomGasPrice,
-  getCustomGasLimit,
-  getRenderableBasicEstimateData,
-  getBasicGasEstimateLoadingStatus,
-  getAveragePriceEstimateInHexWEI,
-  getDefaultActiveButtonIndex,
   formatTimeEstimate,
+  getAveragePriceEstimateInHexWEI,
+  getBasicGasEstimateLoadingStatus,
+  getCustomGasLimit,
+  getCustomGasPrice,
+  getDefaultActiveButtonIndex,
+  getEstimatedGasPrices,
+  getEstimatedGasTimes,
+  getPriceAndTimeEstimates,
+  getRenderableBasicEstimateData,
 } from '../../../selectors/custom-gas'
 import {
   formatCurrency,
@@ -69,9 +72,8 @@ const mapStateToProps = state => {
 
   const customGasPrice = calcCustomGasPrice(customModalGasPriceInHex)
 
-  const priceAndTimeEstimates = state.gas.priceAndTimeEstimates
+  const gasPrices = getEstimatedGasPrices(state)
-  const gasPrices = priceAndTimeEstimates.map(({ gasprice }) => gasprice)
+  const estimatedTimes = getEstimatedGasTimes(state)
-  const estimatedTimes = priceAndTimeEstimates.map(({ expectedTime }) => expectedTime)
 
   return {
     hideBasic,
@@ -81,7 +83,7 @@ const mapStateToProps = state => {
     customGasPrice,
     customGasLimit: calcCustomGasLimit(customModalGasLimitInHex),
     newTotalFiat,
-    currentTimeEstimate: getRenderableTimeEstimate(customGasPrice, priceAndTimeEstimates),
+    currentTimeEstimate: getRenderableTimeEstimate(customGasPrice, getPriceAndTimeEstimates(state)),
     gasPriceButtonGroupProps: {
       buttonDataLoading,
       defaultActiveButtonIndex: getDefaultActiveButtonIndex(gasButtonInfo, customModalGasPriceInHex),

ui/app/components/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-container.test.js

@@ -104,12 +104,10 @@ describe('gas-modal-page-container container', () => {
         customModalGasPriceInHex: 'ffffffff',
         gasChartProps: {
           'currentPrice': 4.294967295,
-          priceAndTimeEstimates: [
+          estimatedTimes: ['31', '62', '93', '124'],
-            { gasprice: 3, expectedTime: '31' },
+          estimatedTimesMax: '31',
-            { gasprice: 4, expectedTime: '62' },
+          gasPrices: [3, 4, 5, 6],
-            { gasprice: 5, expectedTime: '93' },
+          gasPricesMax: 7,
-            { gasprice: 6, expectedTime: '124' },
-          ],
         },
         gasPriceButtonGroupProps: {
           buttonDataLoading: 'mockBasicGasEstimateLoadingStatus:4',

ui/app/selectors/custom-gas.js

@@ -21,17 +21,20 @@ import {
 import { addHexPrefix } from 'ethereumjs-util'
 
 const selectors = {
+  formatTimeEstimate,
+  getAveragePriceEstimateInHexWEI,
+  getBasicGasEstimateLoadingStatus,
   getCustomGasErrors,
   getCustomGasLimit,
   getCustomGasPrice,
   getCustomGasTotal,
-  getRenderableEstimateDataForSmallButtons,
-  getRenderableBasicEstimateData,
-  getBasicGasEstimateLoadingStatus,
-  getAveragePriceEstimateInHexWEI,
   getDefaultActiveButtonIndex,
+  getEstimatedGasPrices,
+  getEstimatedGasTimes,
+  getPriceAndTimeEstimates,
+  getRenderableBasicEstimateData,
+  getRenderableEstimateDataForSmallButtons,
   priceEstimateToWei,
-  formatTimeEstimate,
 }
 
 module.exports = selectors
@@ -58,6 +61,18 @@ function getBasicGasEstimateLoadingStatus (state) {
   return state.gas.basicEstimateIsLoading
 }
 
+function getPriceAndTimeEstimates (state) {
+  return state.gas.priceAndTimeEstimates
+}
+
+function getEstimatedGasPrices (state) {
+  return getPriceAndTimeEstimates(state).map(({ gasprice }) => gasprice)
+}
+
+function getEstimatedGasTimes (state) {
+  return getPriceAndTimeEstimates(state).map(({ expectedTime }) => expectedTime)
+}
+
 function getAveragePriceEstimateInHexWEI (state) {
   const averagePriceEstimate = state.gas.basicEstimates.average
   return getGasPriceInHexWei(averagePriceEstimate || '0x0')

ui/app/selectors/tests/custom-gas.test.js

@@ -6,6 +6,9 @@ const {
   getCustomGasLimit,
   getCustomGasPrice,
   getCustomGasTotal,
+  getEstimatedGasPrices,
+  getEstimatedGasTimes,
+  getPriceAndTimeEstimates,
   getRenderableBasicEstimateData,
   getRenderableEstimateDataForSmallButtons,
 } = proxyquire('../custom-gas', {})
@@ -40,6 +43,35 @@ describe('custom-gas selectors', () => {
     })
   })
 
+  describe('getPriceAndTimeEstimates', () => {
+    it('should return price and time estimates', () => {
+      const mockState = { gas: { priceAndTimeEstimates: 'mockPriceAndTimeEstimates' } }
+      assert.equal(getPriceAndTimeEstimates(mockState), 'mockPriceAndTimeEstimates')
+    })
+  })
+
+  describe('getEstimatedGasPrices', () => {
+    it('should return price and time estimates', () => {
+      const mockState = { gas: { priceAndTimeEstimates: [
+        { gasprice: 12, somethingElse: 20 },
+        { gasprice: 22, expectedTime: 30 },
+        { gasprice: 32, somethingElse: 40 },
+      ] } }
+      assert.deepEqual(getEstimatedGasPrices(mockState), [12, 22, 32])
+    })
+  })
+
+  describe('getEstimatedGasTimes', () => {
+    it('should return price and time estimates', () => {
+      const mockState = { gas: { priceAndTimeEstimates: [
+        { somethingElse: 12, expectedTime: 20 },
+        { gasPrice: 22, expectedTime: 30 },
+        { somethingElse: 32, expectedTime: 40 },
+      ] } }
+      assert.deepEqual(getEstimatedGasTimes(mockState), [20, 30, 40])
+    })
+  })
+
   describe('getRenderableBasicEstimateData()', () => {
     const tests = [
       {