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 && (