Use gas recommendation constants throughout app (#12461)

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) {

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);

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',
       );
     });

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
  */

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,

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;

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 = () => {
     <div style={{ width: '600px' }}>
       <EditGasPopover
         transaction={{
-          userFeeLevel: 'medium',
+          userFeeLevel: GAS_RECOMMENDATIONS.MEDIUM,
           txParams: {
             maxFeePerGas: decGWEIToHexWEI('10000'),
             maxPriorityFeePerGas: '0x5600',
@@ -29,7 +33,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 = () => {
       <EditGasPopover
         confirmButtonText="Custom Value"
         transaction={{
-          userFeeLevel: 'medium',
+          userFeeLevel: GAS_RECOMMENDATIONS.MEDIUM,
           txParams: {
             maxFeePerGas: decGWEIToHexWEI('10000'),
             maxPriorityFeePerGas: '0x5600',
@@ -53,7 +57,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`)()}

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 = () => {
       <RadioGroup
         name="gas-recommendation"
         options={[
-          { value: 'low', label: 'Low', recommended: false },
-          { value: 'medium', label: 'Medium', recommended: false },
-          { value: 'high', label: 'High', recommended: true },
+          { value: GAS_RECOMMENDATIONS.LOW, label: 'Low', recommended: false },
+          {
+            value: GAS_RECOMMENDATIONS.MEDIUM,
+            label: 'Medium',
+            recommended: false,
+          },
+          { value: GAS_RECOMMENDATIONS.HIGH, label: 'High', recommended: true },
         ]}
-        selectedValue="high"
+        selectedValue={GAS_RECOMMENDATIONS.HIGH}
       />
     </div>
   );

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);

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' },
         }),
       );

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(() => {

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);

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: {},
       },
     });

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' },
       },
     });

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;

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);

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),

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 {
           <div className="advanced-tab__gas-inputs">
             <AdvancedGasInputs
               updateCustomGasPrice={(updatedPrice) => {
-                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}

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', [

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);
   });
 });

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 && (
           <EditGasPopover
             transaction={{
-              userFeeLevel: swapsUserFeeLevel || 'high',
+              userFeeLevel: swapsUserFeeLevel || GAS_RECOMMENDATIONS.HIGH,
               txParams: {
                 maxFeePerGas,
                 maxPriorityFeePerGas,
@@ -703,7 +709,7 @@ export default function ViewQuote() {
               },
             }}
             minimumGasLimit={usedGasLimit}
-            defaultEstimateToUse="high"
+            defaultEstimateToUse={GAS_RECOMMENDATIONS.HIGH}
             mode={EDIT_GAS_MODES.SWAPS}
             confirmButtonText={t('submit')}
             onClose={onCloseEditGasPopover}

ui/selectors/confirm-transaction.js

@@ -17,7 +17,10 @@ import {
 } from '../ducks/metamask/metamask';
 import { TRANSACTION_ENVELOPE_TYPES } from '../../shared/constants/transaction';
 import { decGWEIToHexWEI } from '../helpers/utils/conversions.util';
-import { GAS_ESTIMATE_TYPES } from '../../shared/constants/gas';
+import {
+  GAS_ESTIMATE_TYPES,
+  CUSTOM_GAS_ESTIMATE,
+} from '../../shared/constants/gas';
 import {
   getMaximumGasTotalInHexWei,
   getMinimumGasTotalInHexWei,
@@ -258,12 +261,13 @@ export const transactionFeeSelector = function (state, txData) {
       } = selectedGasEstimates;
       gasEstimationObject.maxFeePerGas =
         txData.txParams?.maxFeePerGas &&
-        (txData.userFeeLevel === 'custom' || !suggestedMaxFeePerGas)
+        (txData.userFeeLevel === CUSTOM_GAS_ESTIMATE || !suggestedMaxFeePerGas)
           ? txData.txParams?.maxFeePerGas
           : decGWEIToHexWEI(suggestedMaxFeePerGas || gasPrice);
       gasEstimationObject.maxPriorityFeePerGas =
         txData.txParams?.maxPriorityFeePerGas &&
-        (txData.userFeeLevel === 'custom' || !suggestedMaxPriorityFeePerGas)
+        (txData.userFeeLevel === CUSTOM_GAS_ESTIMATE ||
+          !suggestedMaxPriorityFeePerGas)
           ? txData.txParams?.maxPriorityFeePerGas
           : (suggestedMaxPriorityFeePerGas &&
               decGWEIToHexWEI(suggestedMaxPriorityFeePerGas)) ||