From 0e37904692eb0f4bc2266a1906e8c1662ed36096 Mon Sep 17 00:00:00 2001 From: Dan J Miller Date: Mon, 12 Oct 2020 14:21:17 -0230 Subject: [PATCH] Add useFastestButtons options to gas-customization modal and utilize it in swaps. (#9548) --- app/_locales/en/messages.json | 3 + .../gas-modal-page-container.container.js | 3 +- .../gas-price-button-group.component.js | 2 + ui/app/ducks/swaps/swaps.js | 2 +- ui/app/helpers/constants/common.js | 1 + ui/app/pages/swaps/view-quote/view-quote.js | 1 + ui/app/selectors/custom-gas.js | 79 +++++++++++-------- ui/app/selectors/tests/custom-gas.test.js | 57 ++++++++++++- 8 files changed, 111 insertions(+), 37 deletions(-) diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 4303efb99..b098e984e 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -669,6 +669,9 @@ "faster": { "message": "Faster" }, + "fastest": { + "message": "Fastest" + }, "feeAssociatedRequest": { "message": "A fee is associated with this request." }, diff --git a/ui/app/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js b/ui/app/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js index 73407bf3c..54465f674 100644 --- a/ui/app/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js +++ b/ui/app/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js @@ -74,6 +74,7 @@ const mapStateToProps = (state, ownProps) => { customGasLimitMessage = '', customTotalSupplement = '', extraInfoRow = null, + useFastestButtons = false, } = modalProps || {} const { transaction = {} } = ownProps const selectedTransaction = isSwap @@ -97,7 +98,7 @@ const mapStateToProps = (state, ownProps) => { const customModalGasLimitInHex = getCustomGasLimit(state) || currentGasLimit || '0x5208' const customGasTotal = calcGasTotal(customModalGasLimitInHex, customModalGasPriceInHex) - const gasButtonInfo = getRenderableBasicEstimateData(state, customModalGasLimitInHex) + const gasButtonInfo = getRenderableBasicEstimateData(state, customModalGasLimitInHex, useFastestButtons) const currentCurrency = getCurrentCurrency(state) const conversionRate = getConversionRate(state) diff --git a/ui/app/components/app/gas-customization/gas-price-button-group/gas-price-button-group.component.js b/ui/app/components/app/gas-customization/gas-price-button-group/gas-price-button-group.component.js index 77c098983..8cf327013 100644 --- a/ui/app/components/app/gas-customization/gas-price-button-group/gas-price-button-group.component.js +++ b/ui/app/components/app/gas-customization/gas-price-button-group/gas-price-button-group.component.js @@ -35,6 +35,8 @@ export default class GasPriceButtonGroup extends Component { return this.context.t('average') } else if (gasEstimateType === GAS_ESTIMATE_TYPES.FAST) { return this.context.t('fast') + } else if (gasEstimateType === GAS_ESTIMATE_TYPES.FASTEST) { + return this.context.t('fastest') } throw new Error(`Unrecognized gas estimate type: ${gasEstimateType}`) } diff --git a/ui/app/ducks/swaps/swaps.js b/ui/app/ducks/swaps/swaps.js index 9fa019079..6e88ae826 100644 --- a/ui/app/ducks/swaps/swaps.js +++ b/ui/app/ducks/swaps/swaps.js @@ -245,7 +245,7 @@ export const prepareToLeaveSwaps = () => { export const fetchAndSetSwapsGasPriceInfo = () => { return async (dispatch) => { const basicEstimates = await dispatch(fetchBasicGasAndTimeEstimates()) - dispatch(setSwapsTxGasPrice(decGWEIToHexWEI(basicEstimates.fast))) + dispatch(setSwapsTxGasPrice(decGWEIToHexWEI(basicEstimates.fastest))) await dispatch(fetchGasEstimates(basicEstimates.blockTime)) } diff --git a/ui/app/helpers/constants/common.js b/ui/app/helpers/constants/common.js index 5055f88a7..573bab820 100644 --- a/ui/app/helpers/constants/common.js +++ b/ui/app/helpers/constants/common.js @@ -17,4 +17,5 @@ export const GAS_ESTIMATE_TYPES = { SLOW: 'SLOW', AVERAGE: 'AVERAGE', FAST: 'FAST', + FASTEST: 'FASTEST', } diff --git a/ui/app/pages/swaps/view-quote/view-quote.js b/ui/app/pages/swaps/view-quote/view-quote.js index 04db7a9c2..19a19125f 100644 --- a/ui/app/pages/swaps/view-quote/view-quote.js +++ b/ui/app/pages/swaps/view-quote/view-quote.js @@ -393,6 +393,7 @@ export default function ViewQuote () { } : null ), + useFastestButtons: true, })) const thirdRowTextComponent = ( diff --git a/ui/app/selectors/custom-gas.js b/ui/app/selectors/custom-gas.js index b3c1b1dcd..4c4968d7e 100644 --- a/ui/app/selectors/custom-gas.js +++ b/ui/app/selectors/custom-gas.js @@ -71,9 +71,9 @@ export function getFastPriceEstimateInHexWEI (state) { } export function getDefaultActiveButtonIndex (gasButtonInfo, customGasPriceInHex, gasPrice) { - return gasButtonInfo.findIndex(({ priceInHexWei }) => { - return priceInHexWei === addHexPrefix(customGasPriceInHex || gasPrice) - }) + return gasButtonInfo + .map(({ priceInHexWei }) => priceInHexWei) + .lastIndexOf(addHexPrefix(customGasPriceInHex || gasPrice)) } export function getSafeLowEstimate (state) { @@ -191,7 +191,7 @@ export function getGasPriceInHexWei (price) { return addHexPrefix(priceEstimateToWei(value)) } -export function getRenderableBasicEstimateData (state, gasLimit) { +export function getRenderableBasicEstimateData (state, gasLimit, useFastestButtons) { if (getBasicGasEstimateLoadingStatus(state)) { return [] } @@ -210,39 +210,52 @@ export function getRenderableBasicEstimateData (state, gasLimit) { safeLowWait, avgWait, fastWait, + fastest, + fastestWait, }, }, } = state - return [ - { - gasEstimateType: GAS_ESTIMATE_TYPES.SLOW, - feeInPrimaryCurrency: getRenderableEthFee(safeLow, gasLimit), - feeInSecondaryCurrency: showFiat - ? getRenderableConvertedCurrencyFee(safeLow, gasLimit, currentCurrency, conversionRate) - : '', - timeEstimate: safeLowWait && getRenderableTimeEstimate(safeLowWait), - priceInHexWei: getGasPriceInHexWei(safeLow), - }, - { - gasEstimateType: GAS_ESTIMATE_TYPES.AVERAGE, - feeInPrimaryCurrency: getRenderableEthFee(average, gasLimit), - feeInSecondaryCurrency: showFiat - ? getRenderableConvertedCurrencyFee(average, gasLimit, currentCurrency, conversionRate) - : '', - timeEstimate: avgWait && getRenderableTimeEstimate(avgWait), - priceInHexWei: getGasPriceInHexWei(average), - }, - { - gasEstimateType: GAS_ESTIMATE_TYPES.FAST, - feeInPrimaryCurrency: getRenderableEthFee(fast, gasLimit), - feeInSecondaryCurrency: showFiat - ? getRenderableConvertedCurrencyFee(fast, gasLimit, currentCurrency, conversionRate) - : '', - timeEstimate: fastWait && getRenderableTimeEstimate(fastWait), - priceInHexWei: getGasPriceInHexWei(fast), - }, - ] + const slowEstimatData = { + gasEstimateType: GAS_ESTIMATE_TYPES.SLOW, + feeInPrimaryCurrency: getRenderableEthFee(safeLow, gasLimit), + feeInSecondaryCurrency: showFiat + ? getRenderableConvertedCurrencyFee(safeLow, gasLimit, currentCurrency, conversionRate) + : '', + timeEstimate: safeLowWait && getRenderableTimeEstimate(safeLowWait), + priceInHexWei: getGasPriceInHexWei(safeLow), + } + const averageEstimateData = { + gasEstimateType: GAS_ESTIMATE_TYPES.AVERAGE, + feeInPrimaryCurrency: getRenderableEthFee(average, gasLimit), + feeInSecondaryCurrency: showFiat + ? getRenderableConvertedCurrencyFee(average, gasLimit, currentCurrency, conversionRate) + : '', + timeEstimate: avgWait && getRenderableTimeEstimate(avgWait), + priceInHexWei: getGasPriceInHexWei(average), + } + const fastEstimatData = { + gasEstimateType: GAS_ESTIMATE_TYPES.FAST, + feeInPrimaryCurrency: getRenderableEthFee(fast, gasLimit), + feeInSecondaryCurrency: showFiat + ? getRenderableConvertedCurrencyFee(fast, gasLimit, currentCurrency, conversionRate) + : '', + timeEstimate: fastWait && getRenderableTimeEstimate(fastWait), + priceInHexWei: getGasPriceInHexWei(fast), + } + const fastestEstimateData = { + gasEstimateType: GAS_ESTIMATE_TYPES.FASTEST, + feeInPrimaryCurrency: getRenderableEthFee(fastest, gasLimit), + feeInSecondaryCurrency: showFiat + ? getRenderableConvertedCurrencyFee(fastest, gasLimit, currentCurrency, conversionRate) + : '', + timeEstimate: fastestWait && getRenderableTimeEstimate(fastestWait), + priceInHexWei: getGasPriceInHexWei(fastest), + } + + return useFastestButtons + ? [averageEstimateData, fastEstimatData, fastestEstimateData] + : [slowEstimatData, averageEstimateData, fastEstimatData] } export function getRenderableEstimateDataForSmallButtonsFromGWEI (state) { diff --git a/ui/app/selectors/tests/custom-gas.test.js b/ui/app/selectors/tests/custom-gas.test.js index 6ae6119c4..f9d2e67f0 100644 --- a/ui/app/selectors/tests/custom-gas.test.js +++ b/ui/app/selectors/tests/custom-gas.test.js @@ -344,16 +344,69 @@ describe('custom-gas selectors', function () { }, }, }, + { + expectedResult: [ + { + gasEstimateType: 'AVERAGE', + feeInPrimaryCurrency: '0.000147 ETH', + feeInSecondaryCurrency: '$0.38', + priceInHexWei: '0x1a13b8600', + timeEstimate: '~10 min 6 sec', + }, + { + gasEstimateType: 'FAST', + feeInSecondaryCurrency: '$0.54', + feeInPrimaryCurrency: '0.00021 ETH', + timeEstimate: '~6 min 36 sec', + priceInHexWei: '0x2540be400', + }, + { + feeInPrimaryCurrency: '0.00042 ETH', + feeInSecondaryCurrency: '$1.07', + gasEstimateType: 'FASTEST', + priceInHexWei: '0x4a817c800', + timeEstimate: '~1 min', + }, + ], + mockState: { + metamask: { + conversionRate: 2557.1, + currentCurrency: 'usd', + send: { + gasLimit: '0x5208', + }, + preferences: { + showFiatInTestnets: true, + }, + provider: { + type: 'mainnet', + }, + }, + gas: { + basicEstimates: { + blockTime: 14.16326530612245, + safeLow: 5, + safeLowWait: 13.2, + average: 7, + avgWait: 10.1, + fast: 10, + fastWait: 6.6, + fastest: 20, + fastestWait: 1.0, + }, + }, + }, + useFastestButtons: true, + }, ] it('should return renderable data about basic estimates', function () { tests.forEach((test) => { assert.deepEqual( - getRenderableBasicEstimateData(test.mockState, '0x5208'), + getRenderableBasicEstimateData(test.mockState, '0x5208', test.useFastestButtons), test.expectedResult, ) }) }) - }) describe('getRenderableEstimateDataForSmallButtonsFromGWEI()', function () {