fix: handle low numbers when saving default advanced gas fees

ui/pages/confirmations/components/advanced-gas-fee-popover/advanced-gas-fee-defaults/advanced-gas-fee-defaults.js

@@ -19,12 +19,21 @@ import { useGasFeeContext } from '../../../../../contexts/gasFee';
 import { useAdvancedGasFeePopoverContext } from '../context';
 import { useI18nContext } from '../../../../../hooks/useI18nContext';
 import { Checkbox, Box } from '../../../../../components/component-library';
+import { Numeric } from '../../../../../../shared/modules/Numeric';
 
 const AdvancedGasFeeDefaults = () => {
   const t = useI18nContext();
   const dispatch = useDispatch();
-  const { gasErrors, maxBaseFee, maxPriorityFeePerGas } =
-    useAdvancedGasFeePopoverContext();
+  const {
+    gasErrors,
+    maxBaseFee: maxBaseFeeNumber,
+    maxPriorityFeePerGas: maxPriorityFeePerGasNumber,
+  } = useAdvancedGasFeePopoverContext();
+  const maxBaseFee = new Numeric(maxBaseFeeNumber, 10).toString();
+  const maxPriorityFeePerGas = new Numeric(
+    maxPriorityFeePerGasNumber,
+    10,
+  ).toString();
   const advancedGasFeeValues = useSelector(getAdvancedGasFeeValues);
   // This will need to use a different chainId in multinetwork
   const chainId = useSelector(getCurrentChainId);

ui/pages/confirmations/components/advanced-gas-fee-popover/advanced-gas-fee-defaults/advanced-gas-fee-defaults.test.js

@@ -71,15 +71,15 @@ describe('AdvancedGasFeeDefaults', () => {
   it('should renders correct message when the default values are set', () => {
     render({
       advancedGasFee: {
-        [CHAIN_IDS.GOERLI]: { maxBaseFee: 50, priorityFee: 2 },
+        [CHAIN_IDS.GOERLI]: { maxBaseFee: '50', priorityFee: '2' },
       },
     });
     expect(screen.queryByText(TEXT_SELECTOR)).toBeInTheDocument();
   });
   it('should renders correct message when the default values are set and the maxBaseFee values are updated', () => {
     render({
       advancedGasFee: {
-        [CHAIN_IDS.GOERLI]: { maxBaseFee: 50, priorityFee: 2 },
+        [CHAIN_IDS.GOERLI]: { maxBaseFee: '50', priorityFee: '2' },
       },
     });
     expect(document.getElementsByTagName('input')[2]).toBeChecked();
@@ -94,7 +94,7 @@ describe('AdvancedGasFeeDefaults', () => {
   it('should renders correct message when the default values are set and the priorityFee values are updated', () => {
     render({
       advancedGasFee: {
-        [CHAIN_IDS.GOERLI]: { maxBaseFee: 50, priorityFee: 2 },
+        [CHAIN_IDS.GOERLI]: { maxBaseFee: '50', priorityFee: '2' },
       },
     });
     expect(document.getElementsByTagName('input')[2]).toBeChecked();

ui/pages/confirmations/components/advanced-gas-fee-popover/advanced-gas-fee-inputs/base-fee-input/base-fee-input.js

@@ -7,10 +7,6 @@ import {
   PriorityLevels,
 } from '../../../../../../../shared/constants/gas';
 import { PRIMARY } from '../../../../../../helpers/constants/common';
-import {
-  bnGreaterThan,
-  bnLessThan,
-} from '../../../../../../helpers/utils/util';
 import { getAdvancedGasFeeValues } from '../../../../../../selectors';
 import { useGasFeeContext } from '../../../../../../contexts/gasFee';
 import { useI18nContext } from '../../../../../../hooks/useI18nContext';
@@ -22,22 +18,24 @@ import FormField from '../../../../../../components/ui/form-field';
 import { useAdvancedGasFeePopoverContext } from '../../context';
 import AdvancedGasFeeInputSubtext from '../../advanced-gas-fee-input-subtext';
 import { decGWEIToHexWEI } from '../../../../../../../shared/modules/conversion.utils';
+import { Numeric } from '../../../../../../../shared/modules/Numeric';
 
 const validateBaseFee = (value, gasFeeEstimates, maxPriorityFeePerGas) => {
-  if (bnGreaterThan(maxPriorityFeePerGas, value)) {
+  const baseFeeValue = new Numeric(value, 10);
+  if (new Numeric(maxPriorityFeePerGas, 10).greaterThan(baseFeeValue)) {
     return 'editGasMaxBaseFeeGWEIImbalance';
   }
   if (
     gasFeeEstimates?.low &&
-    bnLessThan(value, gasFeeEstimates.low.suggestedMaxFeePerGas)
+    baseFeeValue.lessThan(gasFeeEstimates.low.suggestedMaxFeePerGas, 10)
   ) {
     return 'editGasMaxBaseFeeLow';
   }
   if (
     gasFeeEstimates?.high &&
-    bnGreaterThan(
-      value,
+    baseFeeValue.greaterThan(
       gasFeeEstimates.high.suggestedMaxFeePerGas * HIGH_FEE_WARNING_MULTIPLIER,
+      10,
     )
   ) {
     return 'editGasMaxBaseFeeHigh';
@@ -48,8 +46,13 @@ const validateBaseFee = (value, gasFeeEstimates, maxPriorityFeePerGas) => {
 const BaseFeeInput = () => {
   const t = useI18nContext();
 
-  const { gasFeeEstimates, estimateUsed, maxFeePerGas, editGasMode } =
-    useGasFeeContext();
+  const {
+    gasFeeEstimates,
+    estimateUsed,
+    maxFeePerGas: maxBaseFeeNumber,
+    editGasMode,
+  } = useGasFeeContext();
+  const maxFeePerGas = new Numeric(maxBaseFeeNumber, 10).toString();
   const {
     gasLimit,
     maxPriorityFeePerGas,

ui/pages/confirmations/components/advanced-gas-fee-popover/advanced-gas-fee-inputs/base-fee-input/base-fee-input.test.js

@@ -15,6 +15,8 @@ import { AdvancedGasFeePopoverContextProvider } from '../../context';
 import AdvancedGasFeeGasLimit from '../../advanced-gas-fee-gas-limit';
 import BaseFeeInput from './base-fee-input';
 
+const LOW_BASE_FEE = 0.000000001;
+
 jest.mock('../../../../../../store/actions', () => ({
   disconnectGasFeeEstimatePoller: jest.fn(),
   getGasFeeEstimatesAndStartPolling: jest
@@ -91,6 +93,32 @@ describe('BaseFeeInput', () => {
     expect(document.getElementsByTagName('input')[0]).toHaveValue(200);
   });
 
+  describe('renders baseFee if current estimate used is custom', () => {
+    const testCases = [
+      {
+        description: 'with a high value',
+        maxFeePerGas: '0x2E90EDD000',
+        expectedValue: 200,
+      },
+      {
+        description: 'with a low value',
+        maxFeePerGas: '0x1',
+        expectedValue: LOW_BASE_FEE,
+      },
+    ];
+
+    it.each(testCases)('$description', ({ maxFeePerGas, expectedValue }) => {
+      render({
+        txParams: {
+          maxFeePerGas,
+        },
+      });
+      expect(document.getElementsByTagName('input')[0]).toHaveValue(
+        expectedValue,
+      );
+    });
+  });
+
   it('should show current value of estimatedBaseFee in users primary currency in right side of input box', () => {
     render({
       txParams: {
@@ -147,4 +175,24 @@ describe('BaseFeeInput', () => {
       screen.queryByText('Max base fee is higher than necessary'),
     ).toBeInTheDocument();
   });
+
+  describe('updateBaseFee', () => {
+    it('updates base fee correctly', () => {
+      const { getByTestId } = render(<BaseFeeInput />);
+      const input = getByTestId('base-fee-input');
+
+      fireEvent.change(input, { target: { value: '1' } });
+
+      expect(input.value).toBe('1');
+    });
+
+    it('handles low numbers', () => {
+      const { getByTestId } = render(<BaseFeeInput />);
+      const input = getByTestId('base-fee-input');
+
+      fireEvent.change(input, { target: { value: LOW_BASE_FEE } });
+
+      expect(input.value).toBe('1e-9');
+    });
+  });
 });

ui/pages/confirmations/components/advanced-gas-fee-popover/advanced-gas-fee-inputs/priority-fee-input/priority-fee-input.js

@@ -14,31 +14,32 @@ import { useI18nContext } from '../../../../../../hooks/useI18nContext';
 import { useUserPreferencedCurrency } from '../../../../../../hooks/useUserPreferencedCurrency';
 import FormField from '../../../../../../components/ui/form-field';
 import Box from '../../../../../../components/ui/box';
-import {
-  bnGreaterThan,
-  bnLessThan,
-} from '../../../../../../helpers/utils/util';
 
 import { useAdvancedGasFeePopoverContext } from '../../context';
 import AdvancedGasFeeInputSubtext from '../../advanced-gas-fee-input-subtext';
 import { decGWEIToHexWEI } from '../../../../../../../shared/modules/conversion.utils';
+import { Numeric } from '../../../../../../../shared/modules/Numeric';
 
 const validatePriorityFee = (value, gasFeeEstimates) => {
-  if (value < 0) {
+  const priorityFeeValue = new Numeric(value, 10);
+  if (priorityFeeValue.lessThan(0, 10)) {
     return 'editGasMaxPriorityFeeBelowMinimumV2';
   }
   if (
     gasFeeEstimates?.low &&
-    bnLessThan(value, gasFeeEstimates.low.suggestedMaxPriorityFeePerGas)
+    priorityFeeValue.lessThan(
+      gasFeeEstimates.low.suggestedMaxPriorityFeePerGas,
+      10,
+    )
   ) {
     return 'editGasMaxPriorityFeeLowV2';
   }
   if (
     gasFeeEstimates?.high &&
-    bnGreaterThan(
-      value,
+    priorityFeeValue.greaterThan(
       gasFeeEstimates.high.suggestedMaxPriorityFeePerGas *
         HIGH_FEE_WARNING_MULTIPLIER,
+      10,
     )
   ) {
     return 'editGasMaxPriorityFeeHighV2';
@@ -51,8 +52,16 @@ const PriorityFeeInput = () => {
   const advancedGasFeeValues = useSelector(getAdvancedGasFeeValues);
   const { gasLimit, setErrorValue, setMaxPriorityFeePerGas } =
     useAdvancedGasFeePopoverContext();
-  const { editGasMode, estimateUsed, gasFeeEstimates, maxPriorityFeePerGas } =
-    useGasFeeContext();
+  const {
+    editGasMode,
+    estimateUsed,
+    gasFeeEstimates,
+    maxPriorityFeePerGas: maxPriorityFeePerGasNumber,
+  } = useGasFeeContext();
+  const maxPriorityFeePerGas = new Numeric(
+    maxPriorityFeePerGasNumber,
+    10,
+  ).toString();
   const {
     latestPriorityFeeRange,
     historicalPriorityFeeRange,

ui/pages/confirmations/components/advanced-gas-fee-popover/advanced-gas-fee-inputs/priority-fee-input/priority-fee-input.test.js

@@ -16,6 +16,8 @@ import AdvancedGasFeeGasLimit from '../../advanced-gas-fee-gas-limit';
 import { CHAIN_IDS } from '../../../../../../../shared/constants/network';
 import PriorityfeeInput from './priority-fee-input';
 
+const LOW_PRIORITY_FEE = 0.000000001;
+
 jest.mock('../../../../../../store/actions', () => ({
   disconnectGasFeeEstimatePoller: jest.fn(),
   getGasFeeEstimatesAndStartPolling: jest
@@ -83,13 +85,33 @@ describe('PriorityfeeInput', () => {
     );
   });
 
-  it('should renders priorityfee value from transaction if current estimate used is custom', () => {
-    render({
-      txParams: {
+  describe('renders priorityFee if current estimate used is custom', () => {
+    const testCases = [
+      {
+        description: 'with a high value',
         maxPriorityFeePerGas: '0x77359400',
+        expectedValue: 2,
       },
-    });
-    expect(document.getElementsByTagName('input')[0]).toHaveValue(2);
+      {
+        description: 'with a low value',
+        maxPriorityFeePerGas: '0x1',
+        expectedValue: LOW_PRIORITY_FEE,
+      },
+    ];
+
+    it.each(testCases)(
+      '$description',
+      ({ maxPriorityFeePerGas, expectedValue }) => {
+        render({
+          txParams: {
+            maxPriorityFeePerGas,
+          },
+        });
+        expect(document.getElementsByTagName('input')[0]).toHaveValue(
+          expectedValue,
+        );
+      },
+    );
   });
 
   it('should show current priority fee range in subtext', () => {
@@ -139,4 +161,24 @@ describe('PriorityfeeInput', () => {
       screen.queryByText('Priority fee must be greater than 0.'),
     ).not.toBeInTheDocument();
   });
+
+  describe('updatePriorityFee', () => {
+    it('updates base fee correctly', () => {
+      const { getByTestId } = render(<PriorityfeeInput />);
+      const input = getByTestId('priority-fee-input');
+
+      fireEvent.change(input, { target: { value: '1' } });
+
+      expect(input.value).toBe('1');
+    });
+
+    it('handles low numbers', () => {
+      const { getByTestId } = render(<PriorityfeeInput />);
+      const input = getByTestId('priority-fee-input');
+
+      fireEvent.change(input, { target: { value: LOW_PRIORITY_FEE } });
+
+      expect(input.value).toBe('1e-9');
+    });
+  });
 });

ui/store/actions.ts

@@ -3237,7 +3237,7 @@ export function detectNfts(): ThunkAction<
 }
 
 export function setAdvancedGasFee(
-  val: { chainId: Hex; maxBaseFee?: Hex; priorityFee?: Hex } | null,
+  val: { chainId: Hex; maxBaseFee?: string; priorityFee?: string } | null,
 ): ThunkAction<void, MetaMaskReduxState, unknown, AnyAction> {
   return (dispatch: MetaMaskReduxDispatch) => {
     dispatch(showLoadingIndication());