From 17b64e94fcad7914414510a7b33a23ab85f14237 Mon Sep 17 00:00:00 2001 From: David Walsh Date: Fri, 5 Nov 2021 19:59:23 -0500 Subject: [PATCH] Use gas recommendation constants throughout app (#12461) --- app/scripts/controllers/transactions/index.js | 8 +++--- .../controllers/transactions/index.test.js | 25 +++++++++++-------- .../controllers/transactions/lib/util.test.js | 9 ++++--- shared/constants/gas.js | 5 ++++ .../edit-gas-display.component.js | 3 ++- .../edit-gas-popover.component.js | 20 ++++++++++----- .../edit-gas-popover.stories.js | 18 +++++++------ .../ui/radio-group/radio-group.stories.js | 13 +++++++--- ui/hooks/gasFeeInput/useGasFeeInputs.js | 8 ++++-- ui/hooks/gasFeeInput/useGasFeeInputs.test.js | 25 ++++++++++++------- ui/hooks/gasFeeInput/useGasPriceInput.js | 7 ++++-- ui/hooks/gasFeeInput/useGasPriceInput.test.js | 18 +++++++------ .../gasFeeInput/useMaxFeePerGasInput.test.js | 16 +++++++----- .../useMaxPriorityFeePerGasInput.test.js | 14 +++++++---- ui/hooks/gasFeeInput/utils.js | 8 ++++-- .../confirm-transaction-base.container.js | 3 ++- .../send/send-footer/send-footer.container.js | 3 ++- ...swaps-gas-customization-modal.component.js | 5 ++-- .../view-quote/view-quote-price-difference.js | 3 ++- .../view-quote-price-difference.test.js | 15 +++++------ ui/pages/swaps/view-quote/view-quote.js | 22 ++++++++++------ ui/selectors/confirm-transaction.js | 10 +++++--- 22 files changed, 166 insertions(+), 92 deletions(-) diff --git a/app/scripts/controllers/transactions/index.js b/app/scripts/controllers/transactions/index.js index 4c95556ee..74eacc396 100644 --- a/app/scripts/controllers/transactions/index.js +++ b/app/scripts/controllers/transactions/index.js @@ -30,6 +30,8 @@ import { METAMASK_CONTROLLER_EVENTS } from '../../metamask-controller'; import { GAS_LIMITS, GAS_ESTIMATE_TYPES, + GAS_RECOMMENDATIONS, + CUSTOM_GAS_ESTIMATE, } from '../../../../shared/constants/gas'; import { decGWEIToHexWEI } from '../../../../shared/modules/conversion.utils'; import { @@ -435,7 +437,7 @@ export default class TransactionController extends EventEmitter { ) { txMeta.txParams.maxFeePerGas = txMeta.txParams.gasPrice; txMeta.txParams.maxPriorityFeePerGas = txMeta.txParams.gasPrice; - txMeta.userFeeLevel = 'custom'; + txMeta.userFeeLevel = CUSTOM_GAS_ESTIMATE; } else { if ( (defaultMaxFeePerGas && @@ -444,9 +446,9 @@ export default class TransactionController extends EventEmitter { !txMeta.txParams.maxPriorityFeePerGas) || txMeta.origin === 'metamask' ) { - txMeta.userFeeLevel = 'medium'; + txMeta.userFeeLevel = GAS_RECOMMENDATIONS.MEDIUM; } else { - txMeta.userFeeLevel = 'custom'; + txMeta.userFeeLevel = CUSTOM_GAS_ESTIMATE; } if (defaultMaxFeePerGas && !txMeta.txParams.maxFeePerGas) { diff --git a/app/scripts/controllers/transactions/index.test.js b/app/scripts/controllers/transactions/index.test.js index a343fe1ed..dbf7ca9d8 100644 --- a/app/scripts/controllers/transactions/index.test.js +++ b/app/scripts/controllers/transactions/index.test.js @@ -16,7 +16,10 @@ import { } from '../../../../shared/constants/transaction'; import { SECOND } from '../../../../shared/constants/time'; -import { GAS_ESTIMATE_TYPES } from '../../../../shared/constants/gas'; +import { + GAS_ESTIMATE_TYPES, + GAS_RECOMMENDATIONS, +} from '../../../../shared/constants/gas'; import { METAMASK_CONTROLLER_EVENTS } from '../../metamask-controller'; import TransactionController, { TRANSACTION_EVENTS } from '.'; @@ -1001,8 +1004,8 @@ describe('Transaction Controller', function () { to: '0xB09d8505E1F4EF1CeA089D47094f5DD3464083d4', gas: '0x5209', gasPrice: '0xa', - estimateSuggested: 'medium', - estimateUsed: 'high', + estimateSuggested: GAS_RECOMMENDATIONS.MEDIUM, + estimateUsed: GAS_RECOMMENDATIONS.HIGH, }; txController.txStateManager._addTransactionsToState([ { @@ -1702,8 +1705,8 @@ describe('Transaction Controller', function () { maxPriorityFeePerGas: '0x77359400', gas: '0x7b0d', nonce: '0x4b', - estimateSuggested: 'medium', - estimateUsed: 'high', + estimateSuggested: GAS_RECOMMENDATIONS.MEDIUM, + estimateUsed: GAS_RECOMMENDATIONS.HIGH, }, type: TRANSACTION_TYPES.SIMPLE_SEND, origin: 'other', @@ -1730,8 +1733,8 @@ describe('Transaction Controller', function () { first_seen: 1624408066355, transaction_envelope_type: 'fee-market', status: 'unapproved', - estimate_suggested: 'medium', - estimate_used: 'high', + estimate_suggested: GAS_RECOMMENDATIONS.MEDIUM, + estimate_used: GAS_RECOMMENDATIONS.HIGH, }, }; @@ -1804,14 +1807,14 @@ describe('Transaction Controller', function () { const params = { max_fee_per_gas: '0x77359400', max_priority_fee_per_gas: '0x77359400', - estimate_suggested: 'medium', - estimate_used: 'high', + estimate_suggested: GAS_RECOMMENDATIONS.MEDIUM, + estimate_used: GAS_RECOMMENDATIONS.HIGH, }; const expectedParams = { max_fee_per_gas: '2', max_priority_fee_per_gas: '2', - estimate_suggested: 'medium', - estimate_used: 'high', + estimate_suggested: GAS_RECOMMENDATIONS.MEDIUM, + estimate_used: GAS_RECOMMENDATIONS.HIGH, }; const result = txController._getGasValuesInGWEI(params); assert.deepEqual(result, expectedParams); diff --git a/app/scripts/controllers/transactions/lib/util.test.js b/app/scripts/controllers/transactions/lib/util.test.js index b5b94d5fc..6c162ef4e 100644 --- a/app/scripts/controllers/transactions/lib/util.test.js +++ b/app/scripts/controllers/transactions/lib/util.test.js @@ -1,6 +1,7 @@ import { strict as assert } from 'assert'; import { TRANSACTION_ENVELOPE_TYPES } from '../../../../../shared/constants/transaction'; import { BURN_ADDRESS } from '../../../../../shared/modules/hexstring-utils'; +import { GAS_RECOMMENDATIONS } from '../../../../../shared/constants/gas'; import * as txUtils from './util'; describe('txUtils', function () { @@ -323,8 +324,8 @@ describe('txUtils', function () { gasPrice: '1', maxFeePerGas: '1', maxPriorityFeePerGas: '1', - estimateSuggested: 'medium', - estimateUsed: 'high', + estimateSuggested: GAS_RECOMMENDATIONS.MEDIUM, + estimateUsed: GAS_RECOMMENDATIONS.HIGH, type: '1', }; @@ -382,12 +383,12 @@ describe('txUtils', function () { assert.equal( normalizedTxParams.estimateSuggested, - 'medium', + GAS_RECOMMENDATIONS.MEDIUM, 'estimateSuggested should be the string originally provided', ); assert.equal( normalizedTxParams.estimateUsed, - 'high', + GAS_RECOMMENDATIONS.HIGH, 'estimateSuggested should be the string originally provided', ); }); diff --git a/shared/constants/gas.js b/shared/constants/gas.js index ebae444a4..1c0bc8ae7 100644 --- a/shared/constants/gas.js +++ b/shared/constants/gas.js @@ -30,6 +30,11 @@ export const GAS_RECOMMENDATIONS = { HIGH: 'high', }; +/** + * Represents the user customizing their gas preference + */ +export const CUSTOM_GAS_ESTIMATE = 'custom'; + /** * These represent the different edit modes presented in the UI */ diff --git a/ui/components/app/edit-gas-display/edit-gas-display.component.js b/ui/components/app/edit-gas-display/edit-gas-display.component.js index e7b7da25e..99e7e17f6 100644 --- a/ui/components/app/edit-gas-display/edit-gas-display.component.js +++ b/ui/components/app/edit-gas-display/edit-gas-display.component.js @@ -6,6 +6,7 @@ import { GAS_RECOMMENDATIONS, EDIT_GAS_MODES, GAS_ESTIMATE_TYPES, + CUSTOM_GAS_ESTIMATE, } from '../../../../shared/constants/gas'; import Button from '../../ui/button'; @@ -84,7 +85,7 @@ export default function EditGasDisplay({ ); const [showAdvancedForm, setShowAdvancedForm] = useState( - !estimateToUse || estimateToUse === 'custom' || !supportsEIP1559, + !estimateToUse || estimateToUse === CUSTOM_GAS_ESTIMATE || !supportsEIP1559, ); const [hideRadioButtons, setHideRadioButtons] = useState( showAdvancedInlineGasIfPossible, diff --git a/ui/components/app/edit-gas-popover/edit-gas-popover.component.js b/ui/components/app/edit-gas-popover/edit-gas-popover.component.js index e9ab37249..60b73d170 100644 --- a/ui/components/app/edit-gas-popover/edit-gas-popover.component.js +++ b/ui/components/app/edit-gas-popover/edit-gas-popover.component.js @@ -4,7 +4,12 @@ import { useDispatch, useSelector } from 'react-redux'; import { useGasFeeInputs } from '../../../hooks/gasFeeInput/useGasFeeInputs'; import { getGasLoadingAnimationIsShowing } from '../../../ducks/app/app'; import { txParamsAreDappSuggested } from '../../../../shared/modules/transaction.utils'; -import { EDIT_GAS_MODES, GAS_LIMITS } from '../../../../shared/constants/gas'; +import { + EDIT_GAS_MODES, + GAS_LIMITS, + GAS_RECOMMENDATIONS, + CUSTOM_GAS_ESTIMATE, +} from '../../../../shared/constants/gas'; import { decGWEIToHexWEI, @@ -35,7 +40,7 @@ export default function EditGasPopover({ popoverTitle = '', confirmButtonText = '', editGasDisplayProps = {}, - defaultEstimateToUse = 'medium', + defaultEstimateToUse = GAS_RECOMMENDATIONS.MEDIUM, transaction, mode, onClose, @@ -70,7 +75,7 @@ export default function EditGasPopover({ if (mode === EDIT_GAS_MODES.SPEED_UP || mode === EDIT_GAS_MODES.CANCEL) { updatedTransaction = { ...transaction, - userFeeLevel: 'custom', + userFeeLevel: CUSTOM_GAS_ESTIMATE, txParams: { ...transaction.txParams, ...updatedCustomGasSettings, @@ -112,7 +117,8 @@ export default function EditGasPopover({ ); const txParamsHaveBeenCustomized = - estimateToUse === 'custom' || txParamsAreDappSuggested(updatedTransaction); + estimateToUse === CUSTOM_GAS_ESTIMATE || + txParamsAreDappSuggested(updatedTransaction); /** * Temporary placeholder, this should be managed by the parent component but @@ -157,7 +163,7 @@ export default function EditGasPopover({ const updatedTxMeta = { ...updatedTransaction, - userFeeLevel: estimateToUse || 'custom', + userFeeLevel: estimateToUse || CUSTOM_GAS_ESTIMATE, txParams: { ...cleanTransactionParams, ...newGasSettings, @@ -185,7 +191,9 @@ export default function EditGasPopover({ case EDIT_GAS_MODES.SWAPS: // This popover component should only be used for the "FEE_MARKET" type in Swaps. if (supportsEIP1559) { - dispatch(updateSwapsUserFeeLevel(estimateToUse || 'custom')); + dispatch( + updateSwapsUserFeeLevel(estimateToUse || CUSTOM_GAS_ESTIMATE), + ); dispatch(updateCustomSwapsEIP1559GasParams(newGasSettings)); } break; diff --git a/ui/components/app/edit-gas-popover/edit-gas-popover.stories.js b/ui/components/app/edit-gas-popover/edit-gas-popover.stories.js index b18d834be..cf26bdb1c 100644 --- a/ui/components/app/edit-gas-popover/edit-gas-popover.stories.js +++ b/ui/components/app/edit-gas-popover/edit-gas-popover.stories.js @@ -5,7 +5,11 @@ import { boolean } from '@storybook/addon-knobs'; import { decGWEIToHexWEI } from '../../../helpers/utils/conversions.util'; import configureStore from '../../../store/store'; import testData from '../../../../.storybook/test-data'; -import { EDIT_GAS_MODES } from '../../../../shared/constants/gas'; +import { + EDIT_GAS_MODES, + GAS_RECOMMENDATIONS, +} from '../../../../shared/constants/gas'; + import EditGasPopover from '.'; const store = configureStore(testData); @@ -21,7 +25,7 @@ export const Basic = () => {
{ gasPrice: '0x5600', }, }} - defaultEstimateToUse="high" + defaultEstimateToUse={GAS_RECOMMENDATIONS.HIGH} mode={EDIT_GAS_MODES.SWAPS} confirmButtonText="Submit" onClose={() => action(`Close Edit Gas Popover`)()} @@ -45,7 +49,7 @@ export const BasicWithDifferentButtonText = () => { { gasPrice: '0x5600', }, }} - defaultEstimateToUse="high" + defaultEstimateToUse={GAS_RECOMMENDATIONS.HIGH} mode={EDIT_GAS_MODES.SWAPS} onClose={() => action(`Close Edit Gas Popover`)()} minimumGasLimit="5700" @@ -70,7 +74,7 @@ export const EducationalContentFlow = () => { showEducationButton: boolean('Show Education Button', true), }} transaction={{ - userFeeLevel: 'medium', + userFeeLevel: GAS_RECOMMENDATIONS.MEDIUM, txParams: { maxFeePerGas: decGWEIToHexWEI('10000'), maxPriorityFeePerGas: '0x5600', @@ -78,7 +82,7 @@ export const EducationalContentFlow = () => { gasPrice: '0x5600', }, }} - defaultEstimateToUse="high" + defaultEstimateToUse={GAS_RECOMMENDATIONS.HIGH} mode={EDIT_GAS_MODES.SWAPS} confirmButtonText="Submit" onClose={() => action(`Close Edit Gas Popover`)()} diff --git a/ui/components/ui/radio-group/radio-group.stories.js b/ui/components/ui/radio-group/radio-group.stories.js index d14435301..c614e7bad 100644 --- a/ui/components/ui/radio-group/radio-group.stories.js +++ b/ui/components/ui/radio-group/radio-group.stories.js @@ -1,4 +1,5 @@ import React from 'react'; +import { GAS_RECOMMENDATIONS } from '../../../../shared/constants/gas'; import RadioGroup from '.'; export default { @@ -12,11 +13,15 @@ export const radioGroup = () => {
); diff --git a/ui/hooks/gasFeeInput/useGasFeeInputs.js b/ui/hooks/gasFeeInput/useGasFeeInputs.js index 25f6d5c76..e67bd031f 100644 --- a/ui/hooks/gasFeeInput/useGasFeeInputs.js +++ b/ui/hooks/gasFeeInput/useGasFeeInputs.js @@ -4,6 +4,10 @@ import { useSelector } from 'react-redux'; import { getAdvancedInlineGasShown } from '../../selectors'; import { hexToDecimal } from '../../helpers/utils/conversions.util'; import { GAS_FORM_ERRORS } from '../../helpers/constants/gas'; +import { + GAS_RECOMMENDATIONS, + CUSTOM_GAS_ESTIMATE, +} from '../../../shared/constants/gas'; import { useGasFeeEstimates } from '../useGasFeeEstimates'; import { useGasFeeErrors } from './useGasFeeErrors'; @@ -58,7 +62,7 @@ import { useGasEstimates } from './useGasEstimates'; * ).GasEstimates} - gas fee input state and the GasFeeEstimates object */ export function useGasFeeInputs( - defaultEstimateToUse = 'medium', + defaultEstimateToUse = GAS_RECOMMENDATIONS.MEDIUM, transaction, minimumGasLimit = '0x5208', editGasMode, @@ -199,7 +203,7 @@ export function useGasFeeInputs( ); const onManualChange = useCallback(() => { - setInternalEstimateToUse('custom'); + setInternalEstimateToUse(CUSTOM_GAS_ESTIMATE); handleGasLimitOutOfBoundError(); // Restore existing values setGasPrice(gasPrice); diff --git a/ui/hooks/gasFeeInput/useGasFeeInputs.test.js b/ui/hooks/gasFeeInput/useGasFeeInputs.test.js index 277812185..5127c61b7 100644 --- a/ui/hooks/gasFeeInput/useGasFeeInputs.test.js +++ b/ui/hooks/gasFeeInput/useGasFeeInputs.test.js @@ -1,6 +1,10 @@ import { act, renderHook } from '@testing-library/react-hooks'; import { useSelector } from 'react-redux'; import { TRANSACTION_ENVELOPE_TYPES } from '../../../shared/constants/transaction'; +import { + GAS_RECOMMENDATIONS, + CUSTOM_GAS_ESTIMATE, +} from '../../../shared/constants/gas'; import { ETH, PRIMARY } from '../../helpers/constants/common'; @@ -116,7 +120,7 @@ describe('useGasFeeInputs', () => { it('returns gasPrice appropriately, and "0" for EIP1559 fields', () => { const { result } = renderHook(() => - useGasFeeInputs('medium', { + useGasFeeInputs(GAS_RECOMMENDATIONS.MEDIUM, { txParams: { value: '3782DACE9D90000', gasLimit: '0x5028', @@ -167,7 +171,10 @@ describe('useGasFeeInputs', () => { }), ); const { result } = renderHook(() => - useGasFeeInputs(null, { txParams: {}, userFeeLevel: 'medium' }), + useGasFeeInputs(null, { + txParams: {}, + userFeeLevel: GAS_RECOMMENDATIONS.MEDIUM, + }), ); expect(result.current.maxFeePerGas).toBe( FEE_MARKET_ESTIMATE_RETURN_VALUE.gasFeeEstimates.medium @@ -226,7 +233,7 @@ describe('useGasFeeInputs', () => { it('should return true', () => { const { result } = renderHook(() => useGasFeeInputs(null, { - userFeeLevel: 'medium', + userFeeLevel: GAS_RECOMMENDATIONS.MEDIUM, txParams: { gas: '0x5208' }, }), ); @@ -242,14 +249,14 @@ describe('useGasFeeInputs', () => { it('should change estimateToUse value', () => { const { result } = renderHook(() => useGasFeeInputs(null, { - userFeeLevel: 'medium', + userFeeLevel: GAS_RECOMMENDATIONS.MEDIUM, txParams: { gas: '0x5208' }, }), ); act(() => { - result.current.setEstimateToUse('high'); + result.current.setEstimateToUse(GAS_RECOMMENDATIONS.HIGH); }); - expect(result.current.estimateToUse).toBe('high'); + expect(result.current.estimateToUse).toBe(GAS_RECOMMENDATIONS.HIGH); expect(result.current.maxFeePerGas).toBe( FEE_MARKET_ESTIMATE_RETURN_VALUE.gasFeeEstimates.high .suggestedMaxFeePerGas, @@ -269,7 +276,7 @@ describe('useGasFeeInputs', () => { it('should change estimateToUse value to custom', () => { const { result } = renderHook(() => useGasFeeInputs(null, { - userFeeLevel: 'medium', + userFeeLevel: GAS_RECOMMENDATIONS.MEDIUM, txParams: { gas: '0x5208' }, }), ); @@ -278,7 +285,7 @@ describe('useGasFeeInputs', () => { result.current.setMaxFeePerGas('100'); result.current.setMaxPriorityFeePerGas('10'); }); - expect(result.current.estimateToUse).toBe('custom'); + expect(result.current.estimateToUse).toBe(CUSTOM_GAS_ESTIMATE); expect(result.current.maxFeePerGas).toBe('100'); expect(result.current.maxPriorityFeePerGas).toBe('10'); }); @@ -298,7 +305,7 @@ describe('useGasFeeInputs', () => { it('does not return fiat values', () => { const { result } = renderHook(() => useGasFeeInputs(null, { - userFeeLevel: 'medium', + userFeeLevel: GAS_RECOMMENDATIONS.MEDIUM, txParams: { gas: '0x5208' }, }), ); diff --git a/ui/hooks/gasFeeInput/useGasPriceInput.js b/ui/hooks/gasFeeInput/useGasPriceInput.js index 2e278da00..acc12207e 100644 --- a/ui/hooks/gasFeeInput/useGasPriceInput.js +++ b/ui/hooks/gasFeeInput/useGasPriceInput.js @@ -1,7 +1,10 @@ import { useState } from 'react'; import { isEqual } from 'lodash'; -import { GAS_ESTIMATE_TYPES } from '../../../shared/constants/gas'; +import { + GAS_ESTIMATE_TYPES, + CUSTOM_GAS_ESTIMATE, +} from '../../../shared/constants/gas'; import { hexWEIToDecGWEI } from '../../helpers/utils/conversions.util'; import { isLegacyTransaction } from '../../helpers/utils/transactions.util'; @@ -30,7 +33,7 @@ export function useGasPriceInput({ transaction, }) { const [gasPriceHasBeenManuallySet, setGasPriceHasBeenManuallySet] = useState( - transaction?.userFeeLevel === 'custom', + transaction?.userFeeLevel === CUSTOM_GAS_ESTIMATE, ); const [gasPrice, setGasPrice] = useState(() => { diff --git a/ui/hooks/gasFeeInput/useGasPriceInput.test.js b/ui/hooks/gasFeeInput/useGasPriceInput.test.js index 9514f969a..9f1d27431 100644 --- a/ui/hooks/gasFeeInput/useGasPriceInput.test.js +++ b/ui/hooks/gasFeeInput/useGasPriceInput.test.js @@ -1,5 +1,9 @@ import { act, renderHook } from '@testing-library/react-hooks'; +import { + GAS_RECOMMENDATIONS, + CUSTOM_GAS_ESTIMATE, +} from '../../../shared/constants/gas'; import { FEE_MARKET_ESTIMATE_RETURN_VALUE, LEGACY_GAS_ESTIMATE_RETURN_VALUE, @@ -30,7 +34,7 @@ describe('useGasPriceInput', () => { const { result } = renderHook(() => useGasPriceInput({ transaction: { - userFeeLevel: 'custom', + userFeeLevel: CUSTOM_GAS_ESTIMATE, txParams: { gasPrice: '0x5028' }, }, }), @@ -42,9 +46,9 @@ describe('useGasPriceInput', () => { configure(); const { result } = renderHook(() => useGasPriceInput({ - estimateToUse: 'high', + estimateToUse: GAS_RECOMMENDATIONS.HIGH, transaction: { - userFeeLevel: 'high', + userFeeLevel: GAS_RECOMMENDATIONS.HIGH, txParams: { gasPrice: '0x5028' }, }, ...LEGACY_GAS_ESTIMATE_RETURN_VALUE, @@ -56,7 +60,7 @@ describe('useGasPriceInput', () => { it('if no gasPrice is provided returns default estimate for legacy transaction', () => { const { result } = renderHook(() => useGasPriceInput({ - estimateToUse: 'medium', + estimateToUse: GAS_RECOMMENDATIONS.MEDIUM, ...LEGACY_GAS_ESTIMATE_RETURN_VALUE, }), ); @@ -66,7 +70,7 @@ describe('useGasPriceInput', () => { it('for legacy transaction if estimateToUse is high and no gasPrice is provided returns high estimate value', () => { const { result } = renderHook(() => useGasPriceInput({ - estimateToUse: 'high', + estimateToUse: GAS_RECOMMENDATIONS.HIGH, ...LEGACY_GAS_ESTIMATE_RETURN_VALUE, }), ); @@ -76,7 +80,7 @@ describe('useGasPriceInput', () => { it('returns 0 if gasPrice is not present in transaction and estimates are also not legacy', () => { const { result } = renderHook(() => useGasPriceInput({ - estimateToUse: 'medium', + estimateToUse: GAS_RECOMMENDATIONS.MEDIUM, ...FEE_MARKET_ESTIMATE_RETURN_VALUE, }), ); @@ -85,7 +89,7 @@ describe('useGasPriceInput', () => { it('returns gasPrice set by user if gasPriceHasBeenManuallySet is true', () => { const { result } = renderHook(() => - useGasPriceInput({ estimateToUse: 'medium' }), + useGasPriceInput({ estimateToUse: GAS_RECOMMENDATIONS.MEDIUM }), ); act(() => { result.current.setGasPriceHasBeenManuallySet(true); diff --git a/ui/hooks/gasFeeInput/useMaxFeePerGasInput.test.js b/ui/hooks/gasFeeInput/useMaxFeePerGasInput.test.js index d51c57c0e..318e9d7e9 100644 --- a/ui/hooks/gasFeeInput/useMaxFeePerGasInput.test.js +++ b/ui/hooks/gasFeeInput/useMaxFeePerGasInput.test.js @@ -3,6 +3,10 @@ import { act, renderHook } from '@testing-library/react-hooks'; import { getMaximumGasTotalInHexWei } from '../../../shared/modules/gas.utils'; import { decimalToHex } from '../../helpers/utils/conversions.util'; +import { + GAS_RECOMMENDATIONS, + CUSTOM_GAS_ESTIMATE, +} from '../../../shared/constants/gas'; import { FEE_MARKET_ESTIMATE_RETURN_VALUE, @@ -31,9 +35,9 @@ const renderUseMaxFeePerGasInputHook = (props) => renderHook(() => useMaxFeePerGasInput({ gasLimit: '21000', - estimateToUse: 'medium', + estimateToUse: GAS_RECOMMENDATIONS.MEDIUM, transaction: { - userFeeLevel: 'custom', + userFeeLevel: CUSTOM_GAS_ESTIMATE, txParams: { maxFeePerGas: '0x5028' }, }, ...FEE_MARKET_ESTIMATE_RETURN_VALUE, @@ -55,7 +59,7 @@ describe('useMaxFeePerGasInput', () => { it('returns gasPrice values from transaction if transaction.userFeeLevel is custom and maxFeePerGas is not provided', () => { const { result } = renderUseMaxFeePerGasInputHook({ transaction: { - userFeeLevel: 'custom', + userFeeLevel: CUSTOM_GAS_ESTIMATE, txParams: { gasPrice: '0x5028' }, }, }); @@ -64,9 +68,9 @@ describe('useMaxFeePerGasInput', () => { it('does not returns maxFeePerGas values from transaction if transaction.userFeeLevel is not custom', () => { const { result } = renderUseMaxFeePerGasInputHook({ - estimateToUse: 'high', + estimateToUse: GAS_RECOMMENDATIONS.HIGH, transaction: { - userFeeLevel: 'high', + userFeeLevel: GAS_RECOMMENDATIONS.HIGH, txParams: { maxFeePerGas: '0x5028' }, }, }); @@ -79,7 +83,7 @@ describe('useMaxFeePerGasInput', () => { it('if no maxFeePerGas is provided by user or in transaction it returns value from fee market estimate', () => { const { result } = renderUseMaxFeePerGasInputHook({ transaction: { - userFeeLevel: 'high', + userFeeLevel: GAS_RECOMMENDATIONS.HIGH, txParams: {}, }, }); diff --git a/ui/hooks/gasFeeInput/useMaxPriorityFeePerGasInput.test.js b/ui/hooks/gasFeeInput/useMaxPriorityFeePerGasInput.test.js index 4539a2363..5601ef98a 100644 --- a/ui/hooks/gasFeeInput/useMaxPriorityFeePerGasInput.test.js +++ b/ui/hooks/gasFeeInput/useMaxPriorityFeePerGasInput.test.js @@ -1,6 +1,10 @@ import { useSelector } from 'react-redux'; import { act, renderHook } from '@testing-library/react-hooks'; +import { + GAS_RECOMMENDATIONS, + CUSTOM_GAS_ESTIMATE, +} from '../../../shared/constants/gas'; import { FEE_MARKET_ESTIMATE_RETURN_VALUE, LEGACY_GAS_ESTIMATE_RETURN_VALUE, @@ -28,9 +32,9 @@ const renderUseMaxPriorityFeePerGasInputHook = (props) => { return renderHook(() => useMaxPriorityFeePerGasInput({ gasLimit: '21000', - estimateToUse: 'medium', + estimateToUse: GAS_RECOMMENDATIONS.MEDIUM, transaction: { - userFeeLevel: 'custom', + userFeeLevel: CUSTOM_GAS_ESTIMATE, txParams: { maxPriorityFeePerGas: '0x5028' }, }, ...FEE_MARKET_ESTIMATE_RETURN_VALUE, @@ -56,7 +60,7 @@ describe('useMaxPriorityFeePerGasInput', () => { it('returns maxFeePerGas values from transaction if transaction.userFeeLevel is custom and maxPriorityFeePerGas is not provided', () => { const { result } = renderUseMaxPriorityFeePerGasInputHook({ transaction: { - userFeeLevel: 'custom', + userFeeLevel: CUSTOM_GAS_ESTIMATE, txParams: { maxFeePerGas: '0x5028' }, }, }); @@ -65,9 +69,9 @@ describe('useMaxPriorityFeePerGasInput', () => { it('does not returns maxPriorityFeePerGas values from transaction if transaction.userFeeLevel is not custom', () => { const { result } = renderUseMaxPriorityFeePerGasInputHook({ - estimateToUse: 'high', + estimateToUse: GAS_RECOMMENDATIONS.HIGH, transaction: { - userFeeLevel: 'high', + userFeeLevel: GAS_RECOMMENDATIONS.HIGH, txParams: { maxPriorityFeePerGas: '0x5028' }, }, }); diff --git a/ui/hooks/gasFeeInput/utils.js b/ui/hooks/gasFeeInput/utils.js index ce8b76ac7..3c27f6416 100644 --- a/ui/hooks/gasFeeInput/utils.js +++ b/ui/hooks/gasFeeInput/utils.js @@ -1,4 +1,7 @@ -import { GAS_ESTIMATE_TYPES } from '../../../shared/constants/gas'; +import { + GAS_ESTIMATE_TYPES, + CUSTOM_GAS_ESTIMATE, +} from '../../../shared/constants/gas'; export function getGasFeeEstimate( field, @@ -14,4 +17,5 @@ export function getGasFeeEstimate( } export const feeParamsAreCustom = (transaction) => - !transaction?.userFeeLevel || transaction?.userFeeLevel === 'custom'; + !transaction?.userFeeLevel || + transaction?.userFeeLevel === CUSTOM_GAS_ESTIMATE; diff --git a/ui/pages/confirm-transaction-base/confirm-transaction-base.container.js b/ui/pages/confirm-transaction-base/confirm-transaction-base.container.js index dfaa57a57..5ba1a215f 100644 --- a/ui/pages/confirm-transaction-base/confirm-transaction-base.container.js +++ b/ui/pages/confirm-transaction-base/confirm-transaction-base.container.js @@ -48,6 +48,7 @@ import { toChecksumHexAddress } from '../../../shared/modules/hexstring-utils'; import { getGasLoadingAnimationIsShowing } from '../../ducks/app/app'; import { isLegacyTransaction } from '../../helpers/utils/transactions.util'; +import { CUSTOM_GAS_ESTIMATE } from '../../../shared/constants/gas'; import ConfirmTransactionBase from './confirm-transaction-base.component'; let customNonceValue = ''; @@ -168,7 +169,7 @@ const mapStateToProps = (state, ownProps) => { const noGasPrice = !supportsEIP1559 && getNoGasPriceFetched(state); const { useNativeCurrencyAsPrimaryCurrency } = getPreferences(state); const gasFeeIsCustom = - fullTxData.userFeeLevel === 'custom' || + fullTxData.userFeeLevel === CUSTOM_GAS_ESTIMATE || txParamsAreDappSuggested(fullTxData); const fromAddressIsLedger = isAddressLedger(state, fromAddress); const nativeCurrency = getNativeCurrency(state); diff --git a/ui/pages/send/send-footer/send-footer.container.js b/ui/pages/send/send-footer/send-footer.container.js index eba93e5d7..3ec6ddbc1 100644 --- a/ui/pages/send/send-footer/send-footer.container.js +++ b/ui/pages/send/send-footer/send-footer.container.js @@ -17,6 +17,7 @@ import { import { getMostRecentOverviewPage } from '../../../ducks/history/history'; import { addHexPrefix } from '../../../../app/scripts/lib/util'; import { getSendToAccounts } from '../../../ducks/metamask/metamask'; +import { CUSTOM_GAS_ESTIMATE } from '../../../../shared/constants/gas'; import SendFooter from './send-footer.component'; export default connect(mapStateToProps, mapDispatchToProps)(SendFooter); @@ -39,7 +40,7 @@ function mapStateToProps(state) { const gasEstimateType = activeButtonIndex >= 0 ? gasButtonInfo[activeButtonIndex].gasEstimateType - : 'custom'; + : CUSTOM_GAS_ESTIMATE; return { disabled: isSendFormInvalid(state), diff --git a/ui/pages/swaps/swaps-gas-customization-modal/swaps-gas-customization-modal.component.js b/ui/pages/swaps/swaps-gas-customization-modal/swaps-gas-customization-modal.component.js index dc3c32285..d0f21cfe0 100644 --- a/ui/pages/swaps/swaps-gas-customization-modal/swaps-gas-customization-modal.component.js +++ b/ui/pages/swaps/swaps-gas-customization-modal/swaps-gas-customization-modal.component.js @@ -7,6 +7,7 @@ import { sumHexWEIsToUnformattedFiat } from '../../../helpers/utils/conversions. import AdvancedGasInputs from '../../../components/app/gas-customization/advanced-gas-inputs'; import BasicTabContent from '../../../components/app/gas-customization/gas-modal-page-container/basic-tab-content'; import { GAS_ESTIMATE_TYPES } from '../../../helpers/constants/common'; +import { CUSTOM_GAS_ESTIMATE } from '../../../../shared/constants/gas'; export default class GasModalPageContainer extends Component { static contextTypes = { @@ -99,11 +100,11 @@ export default class GasModalPageContainer extends Component {
{ - this.setState({ gasSpeedType: 'custom' }); + this.setState({ gasSpeedType: CUSTOM_GAS_ESTIMATE }); setSwapsCustomizationModalPrice(updatedPrice); }} updateCustomGasLimit={(updatedLimit) => { - this.setState({ gasSpeedType: 'custom' }); + this.setState({ gasSpeedType: CUSTOM_GAS_ESTIMATE }); setSwapsCustomizationModalLimit(updatedLimit); }} customGasPrice={customGasPrice} diff --git a/ui/pages/swaps/view-quote/view-quote-price-difference.js b/ui/pages/swaps/view-quote/view-quote-price-difference.js index af73963e1..343083ce5 100644 --- a/ui/pages/swaps/view-quote/view-quote-price-difference.js +++ b/ui/pages/swaps/view-quote/view-quote-price-difference.js @@ -11,6 +11,7 @@ import { JUSTIFY_CONTENT, DISPLAY, } from '../../../helpers/constants/design-system'; +import { GAS_RECOMMENDATIONS } from '../../../../shared/constants/gas'; export default function ViewQuotePriceDifference(props) { const { @@ -35,7 +36,7 @@ export default function ViewQuotePriceDifference(props) { // A calculation error signals we cannot determine dollar value priceDifferenceTitle = t('swapPriceUnavailableTitle'); priceDifferenceMessage = t('swapPriceUnavailableDescription'); - priceDifferenceClass = 'high'; + priceDifferenceClass = GAS_RECOMMENDATIONS.HIGH; priceDifferenceAcknowledgementText = t('tooltipApproveButton'); } else { priceDifferenceTitle = t('swapPriceDifferenceTitle', [ diff --git a/ui/pages/swaps/view-quote/view-quote-price-difference.test.js b/ui/pages/swaps/view-quote/view-quote-price-difference.test.js index cd94ab4a0..085cb8ea2 100644 --- a/ui/pages/swaps/view-quote/view-quote-price-difference.test.js +++ b/ui/pages/swaps/view-quote/view-quote-price-difference.test.js @@ -3,6 +3,7 @@ import { shallow } from 'enzyme'; import { Provider } from 'react-redux'; import configureMockStore from 'redux-mock-store'; import { NETWORK_TYPE_RPC } from '../../../../shared/constants/network'; +import { GAS_RECOMMENDATIONS } from '../../../../shared/constants/gas'; import ViewQuotePriceDifference from './view-quote-price-difference'; describe('View Price Quote Difference', () => { @@ -48,7 +49,7 @@ describe('View Price Quote Difference', () => { priceSlippage: { ratio: 1.007876641534847, calculationError: '', - bucket: 'low', + bucket: GAS_RECOMMENDATIONS.LOW, sourceAmountInETH: 1, destinationAmountInETH: 0.9921849150875727, }, @@ -113,7 +114,7 @@ describe('View Price Quote Difference', () => { it('does not render when the item is in the low bucket', () => { const props = { ...DEFAULT_PROPS }; - props.usedQuote.priceSlippage.bucket = 'low'; + props.usedQuote.priceSlippage.bucket = GAS_RECOMMENDATIONS.LOW; renderComponent(props); const wrappingDiv = component.find( @@ -124,18 +125,18 @@ describe('View Price Quote Difference', () => { it('displays an error when in medium bucket', () => { const props = { ...DEFAULT_PROPS }; - props.usedQuote.priceSlippage.bucket = 'medium'; + props.usedQuote.priceSlippage.bucket = GAS_RECOMMENDATIONS.MEDIUM; renderComponent(props); - expect(component.html()).toContain('medium'); + expect(component.html()).toContain(GAS_RECOMMENDATIONS.MEDIUM); }); it('displays an error when in high bucket', () => { const props = { ...DEFAULT_PROPS }; - props.usedQuote.priceSlippage.bucket = 'high'; + props.usedQuote.priceSlippage.bucket = GAS_RECOMMENDATIONS.HIGH; renderComponent(props); - expect(component.html()).toContain('high'); + expect(component.html()).toContain(GAS_RECOMMENDATIONS.HIGH); }); it('displays a fiat error when calculationError is present', () => { @@ -144,6 +145,6 @@ describe('View Price Quote Difference', () => { 'Could not determine price.'; renderComponent(props); - expect(component.html()).toContain('high'); + expect(component.html()).toContain(GAS_RECOMMENDATIONS.HIGH); }); }); diff --git a/ui/pages/swaps/view-quote/view-quote.js b/ui/pages/swaps/view-quote/view-quote.js index f64fc185b..7ec692c80 100644 --- a/ui/pages/swaps/view-quote/view-quote.js +++ b/ui/pages/swaps/view-quote/view-quote.js @@ -93,7 +93,10 @@ import { } from '../swaps.util'; import { useTokenTracker } from '../../../hooks/useTokenTracker'; import { QUOTES_EXPIRED_ERROR } from '../../../../shared/constants/swaps'; -import { EDIT_GAS_MODES } from '../../../../shared/constants/gas'; +import { + EDIT_GAS_MODES, + GAS_RECOMMENDATIONS, +} from '../../../../shared/constants/gas'; import CountdownTimer from '../countdown-timer'; import SwapsFooter from '../swaps-footer'; import ViewQuotePriceDifference from './view-quote-price-difference'; @@ -117,7 +120,10 @@ export default function ViewQuote() { acknowledgedPriceDifference, setAcknowledgedPriceDifference, ] = useState(false); - const priceDifferenceRiskyBuckets = ['high', 'medium']; + const priceDifferenceRiskyBuckets = [ + GAS_RECOMMENDATIONS.HIGH, + GAS_RECOMMENDATIONS.MEDIUM, + ]; const routeState = useSelector(getBackgroundSwapRouteState); const quotes = useSelector(getQuotes, isEqual); @@ -163,8 +169,8 @@ export default function ViewQuote() { if (networkAndAccountSupports1559) { // For Swaps we want to get 'high' estimations by default. // eslint-disable-next-line react-hooks/rules-of-hooks - gasFeeInputs = useGasFeeInputs('high', { - userFeeLevel: swapsUserFeeLevel || 'high', + gasFeeInputs = useGasFeeInputs(GAS_RECOMMENDATIONS.HIGH, { + userFeeLevel: swapsUserFeeLevel || GAS_RECOMMENDATIONS.HIGH, }); } @@ -592,8 +598,8 @@ export default function ViewQuote() { useEffect(() => { if ( acknowledgedPriceDifference && - lastPriceDifferenceBucket === 'medium' && - priceSlippageBucket === 'high' + lastPriceDifferenceBucket === GAS_RECOMMENDATIONS.MEDIUM && + priceSlippageBucket === GAS_RECOMMENDATIONS.HIGH ) { setAcknowledgedPriceDifference(false); } @@ -695,7 +701,7 @@ export default function ViewQuote() { {showEditGasPopover && networkAndAccountSupports1559 && (