diff options
Diffstat (limited to 'ui/app/components/gas-customization/gas-modal-page-container')
5 files changed, 49 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 44aba358c..4dd18ce2b 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 @@ -97,7 +97,7 @@ export default class AdvancedTabContent extends Component { updateCustomGasLimit ) } <div className="advanced-tab__fee-chart__title">Live Gas Price Predictions</div> - <GasPriceChart {...gasChartProps} /> + <GasPriceChart {...gasChartProps} updateCustomGasPrice={updateCustomGasPrice} /> <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 de14e1b38..8f23b22e0 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 @@ -47,6 +47,7 @@ export default class GasModalPageContainer extends Component { customGasLimit, newTotalFiat, gasChartProps, + currentTimeEstimate, }) { const { transactionFee } = this.props return ( @@ -55,7 +56,7 @@ export default class GasModalPageContainer extends Component { updateCustomGasLimit={convertThenUpdateCustomGasLimit} customGasPrice={customGasPrice} customGasLimit={customGasLimit} - timeRemaining="1 min 31 sec" + timeRemaining={currentTimeEstimate} 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 84eae1880..3a62d21cc 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 @@ -10,6 +10,7 @@ import { setCustomGasPrice, setCustomGasLimit, resetCustomData, + setCustomTimeEstimate, } from '../../../ducks/gas.duck' import { hideGasButtonGroup, @@ -29,6 +30,7 @@ import { getBasicGasEstimateLoadingStatus, getAveragePriceEstimateInHexWEI, getDefaultActiveButtonIndex, + formatTimeEstimate, } from '../../../selectors/custom-gas' import { formatCurrency, @@ -65,20 +67,24 @@ const mapStateToProps = state => { const hideBasic = state.appState.modal.modalState.props.hideBasic + const customGasPrice = calcCustomGasPrice(customModalGasPriceInHex) + return { hideBasic, isConfirm: isConfirm(state), customModalGasPriceInHex, customModalGasLimitInHex, - customGasPrice: calcCustomGasPrice(customModalGasPriceInHex), + customGasPrice, customGasLimit: calcCustomGasLimit(customModalGasLimitInHex), newTotalFiat, + currentTimeEstimate: getRenderableTimeEstimate(customGasPrice, state.gas.priceAndTimeEstimates), gasPriceButtonGroupProps: { buttonDataLoading, defaultActiveButtonIndex: getDefaultActiveButtonIndex(gasButtonInfo, customModalGasPriceInHex), gasButtonInfo, }, gasChartProps: { + currentPrice: customGasPrice, priceAndTimeEstimates: state.gas.priceAndTimeEstimates, }, infoRowProps: { @@ -111,6 +117,7 @@ const mapDispatchToProps = dispatch => { return dispatch(updateGasAndCalculate({ gasLimit, gasPrice })) }, hideGasButtonGroup: () => dispatch(hideGasButtonGroup()), + setCustomTimeEstimate: (timeEstimateInSeconds) => dispatch(setCustomTimeEstimate(timeEstimateInSeconds)), } } @@ -181,3 +188,25 @@ function addHexWEIsToRenderableFiat (aHexWEI, bHexWEI, convertedCurrency, conver partialRight(formatCurrency, [convertedCurrency]), )(aHexWEI, bHexWEI) } + +function getRenderableTimeEstimate (currentGasPrice, priceAndTimeEstimates) { + const gasPrices = priceAndTimeEstimates.map(({ gasprice }) => gasprice) + const estimatedTimes = priceAndTimeEstimates.map(({ expectedTime }) => expectedTime) + + const closestLowerValueIndex = gasPrices.findIndex((e, i, a) => { + return e <= currentGasPrice && a[i + 1] >= currentGasPrice + }) + const closestHigherValueIndex = gasPrices.findIndex((e, i, a) => { + return e > currentGasPrice + }) + + const closestLowerValue = gasPrices[closestLowerValueIndex] + const closestHigherValue = gasPrices[closestHigherValueIndex] + const estimatedClosestLowerTimeEstimate = estimatedTimes[closestLowerValueIndex] + const estimatedClosestHigherTimeEstimate = estimatedTimes[closestHigherValueIndex] + + const slope = (estimatedClosestHigherTimeEstimate - estimatedClosestLowerTimeEstimate) / (closestHigherValue - closestLowerValue) + const newTimeEstimate = -1 * (slope * (closestHigherValue - currentGasPrice) - estimatedClosestHigherTimeEstimate) + + return formatTimeEstimate(newTimeEstimate) +} diff --git a/ui/app/components/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-component.test.js b/ui/app/components/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-component.test.js index bb1a28136..61871f5f3 100644 --- a/ui/app/components/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-component.test.js +++ b/ui/app/components/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-component.test.js @@ -65,6 +65,7 @@ describe('GasModalPageContainer Component', function () { customGasLimit={54321} gasPriceButtonGroupProps={mockGasPriceButtonGroupProps} infoRowProps={mockInfoRowProps} + currentTimeEstimate={'1 min 31 sec'} customGasPriceInHex={'mockCustomGasPriceInHex'} customGasLimitInHex={'mockCustomGasLimitInHex'} />, { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } }) @@ -199,6 +200,7 @@ describe('GasModalPageContainer Component', function () { customGasPrice: 123, customGasLimit: 456, newTotalFiat: '$0.30', + currentTimeEstimate: '1 min 31 sec', }) const advancedTabContentProps = renderAdvancedTabContentResult.props assert.equal(advancedTabContentProps.updateCustomGasPrice(), 'mockConvertThenUpdateCustomGasPrice') 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 c16a07b76..3f3be8d0c 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,7 +75,12 @@ describe('gas-modal-page-container container', () => { limit: 'aaaaaaaa', price: 'ffffffff', }, - priceAndTimeEstimates: 'mockPriceAndTimeEstimates', + priceAndTimeEstimates: [ + { gasprice: 3, expectedTime: '31' }, + { gasprice: 4, expectedTime: '62' }, + { gasprice: 5, expectedTime: '93' }, + { gasprice: 6, expectedTime: '124' }, + ], }, confirmTransaction: { txData: { @@ -93,11 +98,18 @@ describe('gas-modal-page-container container', () => { isConfirm: true, customGasPrice: 4.294967295, customGasLimit: 2863311530, + currentTimeEstimate: '~1 min 11 sec', newTotalFiat: '637.41', customModalGasLimitInHex: 'aaaaaaaa', customModalGasPriceInHex: 'ffffffff', gasChartProps: { - priceAndTimeEstimates: 'mockPriceAndTimeEstimates', + 'currentPrice': 4.294967295, + priceAndTimeEstimates: [ + { gasprice: 3, expectedTime: '31' }, + { gasprice: 4, expectedTime: '62' }, + { gasprice: 5, expectedTime: '93' }, + { gasprice: 6, expectedTime: '124' }, + ], }, gasPriceButtonGroupProps: { buttonDataLoading: 'mockBasicGasEstimateLoadingStatus:4', |