fix(deps): unpin [email protected],x [email protected]

app/components/Nav/Main/RootRPCMethodsUI.js

@@ -25,7 +25,7 @@ import {
   getIsSwapApproveOrSwapTransaction,
   isApprovalTransaction,
 } from '../../../util/transactions';
-import { BN } from 'ethereumjs-util';
+import BN from 'bnjs4';
 import Logger from '../../../util/Logger';
 import TransactionTypes from '../../../core/TransactionTypes';
 import { swapsUtils } from '@metamask/swaps-controller';

app/components/UI/ConfirmAddAsset/ConfirmAddAsset.test.tsx

@@ -7,7 +7,7 @@ import renderWithProvider, {
 import useBalance from '../Ramp/hooks/useBalance';
 import { toTokenMinimalUnit } from '../../../util/number';
 import { fireEvent } from '@testing-library/react-native';
-import { BN } from 'ethereumjs-util';
+import BN4 from 'bnjs4';
 import { RootState } from '../../../reducers';
 import { mockNetworkState } from '../../../util/test/network';
 import { CHAIN_IDS } from '@metamask/transaction-controller';
@@ -49,7 +49,7 @@ jest.mock('../../../util/navigation/navUtils', () => ({
 
 const mockUseBalanceInitialValue: Partial<ReturnType<typeof useBalance>> = {
   balanceFiat: '$27.02',
-  balanceBN: toTokenMinimalUnit('5.36385', 18) as BN,
+  balanceBN: toTokenMinimalUnit('5.36385', 18) as BN4,
 };
 
 const mockUseBalanceValues: Partial<ReturnType<typeof useBalance>> = {

app/components/UI/Ramp/Views/BuildQuote/BuildQuote.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Limits, Payment } from '@consensys/on-ramp-sdk';
 import { act, fireEvent, screen } from '@testing-library/react-native';
-import { BN } from 'ethereumjs-util';
+import type BN4 from 'bnjs4';
 import { renderScreen } from '../../../../../util/test/renderWithProvider';
 import BuildQuote from './BuildQuote';
 import useRegions from '../../hooks/useRegions';
@@ -191,7 +191,7 @@ jest.mock('../../../../hooks/useAddressBalance/useAddressBalance', () =>
 
 const mockUseBalanceInitialValue: Partial<ReturnType<typeof useBalance>> = {
   balanceFiat: '$27.02',
-  balanceBN: toTokenMinimalUnit('5.36385', 18) as BN,
+  balanceBN: toTokenMinimalUnit('5.36385', 18) as BN4,
 };
 
 let mockUseBalanceValues: Partial<ReturnType<typeof useBalance>> = {
@@ -243,7 +243,7 @@ const mockUseGasPriceEstimationInitialValue: ReturnType<
   estimatedGasFee: toTokenMinimalUnit(
     '0.01',
     mockUseRampSDKInitialValues.selectedAsset?.decimals || 18,
-  ) as BN,
+  ) as BN4,
 };
 
 let mockUseGasPriceEstimationValue: ReturnType<typeof useGasPriceEstimation> =
@@ -679,7 +679,7 @@ describe('BuildQuote View', () => {
       mockUseBalanceValues.balanceBN = toTokenMinimalUnit(
         '5',
         mockUseRampSDKValues.selectedAsset?.decimals || 18,
-      ) as BN;
+      ) as BN4;
       render(BuildQuote);
       const initialAmount = '0';
       const overBalanceAmout = '6';
@@ -698,7 +698,7 @@ describe('BuildQuote View', () => {
       mockUseBalanceValues.balanceBN = toTokenMinimalUnit(
         '1',
         mockUseRampSDKValues.selectedAsset?.decimals || 18,
-      ) as BN;
+      ) as BN4;
       const symbol = mockUseRampSDKValues.selectedAsset?.symbol;
       fireEvent.press(getByRoleButton(`${initialAmount} ${symbol}`));
       fireEvent.press(getByRoleButton('25%'));
@@ -729,13 +729,13 @@ describe('BuildQuote View', () => {
         balanceBN: toTokenMinimalUnit(
           '1',
           mockUseRampSDKValues.selectedAsset?.decimals || 18,
-        ) as BN,
+        ) as BN4,
       };
       mockUseGasPriceEstimationValue = {
         estimatedGasFee: toTokenMinimalUnit(
           '0.27',
           mockUseRampSDKValues.selectedAsset?.decimals || 18,
-        ) as BN,
+        ) as BN4,
       };
       const symbol = mockUseRampSDKValues.selectedAsset?.symbol;
       fireEvent.press(getByRoleButton(`${initialAmount} ${symbol}`));
@@ -762,13 +762,13 @@ describe('BuildQuote View', () => {
         balanceBN: toTokenMinimalUnit(
           '1',
           mockUseRampSDKValues.selectedAsset?.decimals || 18,
-        ) as BN,
+        ) as BN4,
       };
       mockUseGasPriceEstimationValue = {
         estimatedGasFee: toTokenMinimalUnit(
           '0.27',
           mockUseRampSDKValues.selectedAsset?.decimals || 18,
-        ) as BN,
+        ) as BN4,
       };
       const symbol = mockUseRampSDKValues.selectedAsset?.symbol;
       fireEvent.press(getByRoleButton(`${initialAmount} ${symbol}`));

app/components/UI/Ramp/Views/BuildQuote/BuildQuote.tsx

@@ -12,7 +12,7 @@ import Animated, {
   withTiming,
 } from 'react-native-reanimated';
 import { useNavigation } from '@react-navigation/native';
-import { BN } from 'ethereumjs-util';
+import BN4 from 'bnjs4';
 
 import { useRampSDK } from '../../sdk';
 import usePaymentMethods from '../../hooks/usePaymentMethods';
@@ -105,7 +105,7 @@ const BuildQuote = () => {
   const [amountFocused, setAmountFocused] = useState(false);
   const [amount, setAmount] = useState('0');
   const [amountNumber, setAmountNumber] = useState(0);
-  const [amountBNMinimalUnit, setAmountBNMinimalUnit] = useState<BN>();
+  const [amountBNMinimalUnit, setAmountBNMinimalUnit] = useState<BN4>();
   const [error, setError] = useState<string | null>(null);
   const keyboardHeight = useRef(1000);
   const keypadOffset = useSharedValue(1000);
@@ -357,7 +357,7 @@ const BuildQuote = () => {
       setAmountNumber(valueAsNumber);
       if (isSell) {
         setAmountBNMinimalUnit(
-          toTokenMinimalUnit(`${value}`, selectedAsset?.decimals ?? 0) as BN,
+          toTokenMinimalUnit(`${value}`, selectedAsset?.decimals ?? 0) as BN4,
         );
       }
     },
@@ -372,8 +372,8 @@ const BuildQuote = () => {
       } else {
         const percentage = value * 100;
         const amountPercentage = balanceBN
-          ?.mul(new BN(percentage))
-          .div(new BN(100));
+          ?.mul(new BN4(percentage))
+          .div(new BN4(100));
 
         if (!amountPercentage) {
           return;
@@ -741,7 +741,7 @@ const BuildQuote = () => {
         value: quickAmount,
         label: currentFiatCurrency?.denomSymbol + quickAmount.toString(),
       })) ?? [];
-  } else if (balanceBN && !balanceBN.isZero() && maxSellAmount?.gt(new BN(0))) {
+  } else if (balanceBN && !balanceBN.isZero() && maxSellAmount?.gt(new BN4(0))) {
     quickAmounts = [
       { value: 0.25, label: '25%' },
       { value: 0.5, label: '50%' },

app/components/UI/Ramp/Views/SendTransaction/SendTransaction.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { ImageSourcePropType, View } from 'react-native';
 import { useDispatch, useSelector } from 'react-redux';
 import { useNavigation } from '@react-navigation/native';
-import { BN } from 'ethereumjs-util';
+import BN4 from 'bnjs4';
 import { SellOrder } from '@consensys/on-ramp-sdk/dist/API';
 import {
   TransactionParams,
@@ -134,7 +134,7 @@ function SendTransaction() {
       setIsConfirming(true);
       let transactionParams: TransactionParams;
       const amount = addHexPrefix(
-        new BN(
+        new BN4(
           toTokenMinimalUnit(
             orderData.cryptoAmount || '0',
             orderData.cryptoCurrency.decimals,

app/components/UI/Ramp/hooks/useBalance.ts

@@ -1,5 +1,4 @@
 import { useSelector } from 'react-redux';
-import { hexToBN } from '@metamask/controller-utils';
 import { NATIVE_ADDRESS } from '../../../../constants/on-ramp';
 import { selectAccountsByChainId } from '../../../../selectors/accountTrackerController';
 import {
@@ -13,6 +12,7 @@ import { selectEvmChainId } from '../../../../selectors/networkController';
 import { safeToChecksumAddress } from '../../../../util/address';
 import {
   balanceToFiat,
+  hexToBN,
   renderFromTokenMinimalUnit,
   renderFromWei,
   toHexadecimal,

app/components/UI/Ramp/hooks/useGasPriceEstimation.ts

@@ -5,7 +5,7 @@ import {
   type GasFeeController as GasFeeControllerType,
 } from '@metamask/gas-fee-controller';
 
-import { BN } from 'ethereumjs-util';
+import BN from 'bnjs4';
 import Engine from '../../../../core/Engine';
 import { decGWEIToHexWEI } from '../../../../util/conversions';
 import { selectGasFeeControllerState } from '../../../../selectors/gasFeeController';

app/components/UI/Ramp/hooks/useIntentAmount.ts

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { type BN } from 'ethereumjs-util';
+import type BN4 from 'bnjs4';
 import { useRampSDK } from '../sdk';
 import parseAmount from '../utils/parseAmount';
 import { toTokenMinimalUnit } from '../../../../util/number';
@@ -21,7 +21,7 @@ export default function useIntentAmount(
   setAmount: (amount: React.SetStateAction<string>) => void,
   setAmountNumber: (amount: React.SetStateAction<number>) => void,
   setAmountBNMinimalUnit: (
-    amount: React.SetStateAction<BN | undefined>,
+    amount: React.SetStateAction<BN4 | undefined>,
   ) => void,
   currentFiatCurrency: FiatCurrency | null,
 ) {
@@ -53,7 +53,7 @@ export default function useIntentAmount(
               toTokenMinimalUnit(
                 `${parsedAmount}`,
                 selectedAsset?.decimals ?? 0,
-              ) as BN,
+              ) as BN4,
             );
           }
         }

app/components/UI/Stake/components/StakingBalance/StakingBalance.tsx

@@ -24,7 +24,7 @@ import { strings } from '../../../../../../locales/i18n';
 import { renderFromWei } from '../../../../../util/number';
 import { getTimeDifferenceFromNow } from '../../../../../util/date';
 import { filterExitRequests } from './utils';
-import { BN } from 'ethereumjs-util';
+import BN4 from 'bnjs4';
 import bn from 'bignumber.js';
 import {
   CommonPercentageInputUnits,
@@ -99,8 +99,8 @@ const StakingBalanceContent = ({ asset }: StakingBalanceProps) => {
       renderFromWei(
         claimableRequests.reduce(
           (acc, { claimedAssets }) =>
-            claimedAssets ? acc.add(new BN(claimedAssets)) : acc,
-          new BN(0),
+            claimedAssets ? acc.add(new BN4(claimedAssets)) : acc,
+          new BN4(0),
         ),
       ),
     [claimableRequests],

app/components/UI/Stake/hooks/useInputHandler.ts

@@ -1,4 +1,4 @@
-import { BN } from 'ethereumjs-util';
+import BN4 from 'bnjs4';
 import { useState, useMemo, useCallback } from 'react';
 import { useSelector } from 'react-redux';
 import {
@@ -15,19 +15,19 @@ import {
 import { strings } from '../../../../../locales/i18n';
 
 interface InputHandlerParams {
-  balance: BN;
+  balance: BN4;
 }
 const MAX_DIGITS = 12;
 const useInputHandler = ({ balance }: InputHandlerParams) => {
   const [amountEth, setAmountEth] = useState('0');
-  const [amountWei, setAmountWei] = useState<BN>(new BN(0));
+  const [amountWei, setAmountWei] = useState<BN4>(new BN4(0));
   const [fiatAmount, setFiatAmount] = useState('0');
   const [isEth, setIsEth] = useState<boolean>(true);
 
   const currentCurrency = useSelector(selectCurrentCurrency);
   const conversionRate = useSelector(selectConversionRate) || 1;
 
-  const isNonZeroAmount = useMemo(() => amountWei.gt(new BN(0)), [amountWei]);
+  const isNonZeroAmount = useMemo(() => amountWei.gt(new BN4(0)), [amountWei]);
 
   const isOverMaximum = useMemo(
     () => amountWei.gt(balance),
@@ -96,7 +96,7 @@ const useInputHandler = ({ balance }: InputHandlerParams) => {
   const handleQuickAmountPress = useCallback(
     ({ value }: { value: number }) => {
       const percentage = value * 100;
-      const amountPercentage = balance.mul(new BN(percentage)).div(new BN(100));
+      const amountPercentage = balance.mul(new BN4(percentage)).div(new BN4(100));
 
       let newEthAmount;
       try {
@@ -118,7 +118,7 @@ const useInputHandler = ({ balance }: InputHandlerParams) => {
   );
 
   const handleMaxInput = useCallback(
-    (maxStakeableWei: BN) => {
+    (maxStakeableWei: BN4) => {
       setAmountWei(maxStakeableWei);
 
       let ethValue;

app/components/UI/Stake/hooks/useStakingGasFee.test.tsx

@@ -2,7 +2,7 @@ import { act, waitFor } from '@testing-library/react-native';
 import { renderHookWithProvider } from '../../../../util/test/renderWithProvider';
 import useStakingGasFee from './useStakingGasFee';
 import Engine from '../../../../core/Engine';
-import { BN } from 'ethereumjs-util';
+import BN4 from 'bnjs4';
 import { backgroundState } from '../../../../util/test/initial-root-state';
 import { createMockAccountsControllerState } from '../../../../util/test/accountsControllerTestUtils';
 
@@ -93,7 +93,7 @@ describe('useStakingGasFee', () => {
 
     expect(result.current.isLoadingStakingGasFee).toBe(true);
     expect(result.current.isStakingGasFeeError).toBe(false);
-    expect(result.current.estimatedGasFeeWei).toEqual(new BN(0));
+    expect(result.current.estimatedGasFeeWei).toEqual(new BN4(0));
   });
 
   it('should fetch gas limit and calculate gas fee correctly', async () => {
@@ -113,7 +113,7 @@ describe('useStakingGasFee', () => {
         '0x0000000000000000000000000000000000000000',
       );
       expect(result.current.estimatedGasFeeWei).toEqual(
-        new BN('5094922637614180'),
+        new BN4('5094922637614180'),
       );
     });
   });
@@ -132,7 +132,7 @@ describe('useStakingGasFee', () => {
 
     await waitFor(() => {
       expect(result.current.isStakingGasFeeError).toBe(true);
-      expect(result.current.estimatedGasFeeWei).toEqual(new BN(0));
+      expect(result.current.estimatedGasFeeWei).toEqual(new BN4(0));
     });
   });
 

app/components/UI/Stake/hooks/useStakingGasFee.ts

@@ -4,13 +4,13 @@ import { useSelector } from 'react-redux';
 import { selectSelectedInternalAccountFormattedAddress } from '../../../../selectors/accountsController';
 import { GAS_ESTIMATE_TYPES } from '@metamask/gas-fee-controller';
 import { decGWEIToHexWEI } from '../../../../util/conversions';
-import { BN } from 'ethereumjs-util';
+import BN4 from 'bnjs4';
 import { formatEther } from 'ethers/lib/utils';
 import Engine from '../../../../core/Engine';
 import { hexToBN } from '../../../../util/number';
 
 interface StakingGasFee {
-  estimatedGasFeeWei: BN;
+  estimatedGasFeeWei: BN4;
   isLoadingStakingGasFee: boolean;
   isStakingGasFeeError: boolean;
   refreshGasValues: () => void;
@@ -28,7 +28,7 @@ const useStakingGasFee = (depositValueWei: string): StakingGasFee => {
     useState<boolean>(true);
   const [isStakingGasFeeError, setIsStakingGasFeeError] =
     useState<boolean>(false);
-  const [estimatedGasFeeWei, setEstimatedGasFeeWei] = useState<BN>(new BN(0));
+  const [estimatedGasFeeWei, setEstimatedGasFeeWei] = useState<BN4>(new BN4(0));
 
   const fetchDepositGasValues = useCallback(async () => {
     const { GasFeeController } = Engine.context;

app/components/UI/Stake/hooks/useStakingInput.ts

@@ -1,4 +1,4 @@
-import { BN } from 'ethereumjs-util';
+import BN4 from 'bnjs4';
 import { useState, useMemo, useCallback } from 'react';
 import {
   limitToMaximumDecimalPlaces,
@@ -38,14 +38,14 @@ const useStakingInputHandlers = () => {
     () =>
       !isStakingGasFeeError && balance.gt(estimatedGasFeeWei)
         ? balance.sub(estimatedGasFeeWei)
-        : new BN(0),
+        : new BN4(0),
 
     [balance, estimatedGasFeeWei, isStakingGasFeeError],
   );
 
   const isOverMaximum = useMemo(() => {
     const additionalFundsRequired = amountWei.sub(maxStakeableAmountWei);
-    return isNonZeroAmount && additionalFundsRequired.gt(new BN(0));
+    return isNonZeroAmount && additionalFundsRequired.gt(new BN4(0));
   }, [amountWei, isNonZeroAmount, maxStakeableAmountWei]);
 
   const { annualRewardRate, annualRewardRateDecimal, isLoadingVaultMetadata } =
@@ -98,13 +98,13 @@ const useStakingInputHandlers = () => {
     : `${balanceFiatNumber?.toString()} ${currentCurrency.toUpperCase()}`;
 
   const getDepositTxGasPercentage = useCallback(
-    () => estimatedGasFeeWei.mul(new BN(100)).div(amountWei).toString(),
+    () => estimatedGasFeeWei.mul(new BN4(100)).div(amountWei).toString(),
     [amountWei, estimatedGasFeeWei],
   );
 
   // Gas fee make up 30% or more of the deposit amount.
   const isHighGasCostImpact = useCallback(
-    () => new BN(getDepositTxGasPercentage()).gt(new BN(30)),
+    () => new BN4(getDepositTxGasPercentage()).gt(new BN4(30)),
     [getDepositTxGasPercentage],
   );
 

app/components/UI/Stake/hooks/useUnstakingInput.ts

@@ -1,4 +1,4 @@
-import { BN } from 'ethereumjs-util';
+import BN4 from 'bnjs4';
 import useBalance from './useBalance';
 import useInputHandler from './useInputHandler';
 
@@ -22,7 +22,7 @@ const useUnstakingInputHandlers = () => {
     percentageOptions,
     handleQuickAmountPress,
     currentCurrency,
-  } = useInputHandler({ balance: new BN(stakedBalanceWei) });
+  } = useInputHandler({ balance: new BN4(stakedBalanceWei) });
 
   const stakedBalanceValue = isEth
     ? formattedStakedBalanceETH