fix: migrate from deprecated legacy packages

.iyarc

@@ -1,3 +0,0 @@
-# ReDoS vulnerability, no impact to this application, and fix not backported yet to the versions we use
-
-GHSA-c2qf-rxjj-qqgw

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/AccountFromToInfoCard/AddressFrom.tsx

@@ -1,4 +1,4 @@
-import { toChecksumAddress } from 'ethereumjs-util';
+import { toChecksumAddress } from '@ethereumjs/util';
 import React, { useEffect, useState } from 'react';
 import { View } from 'react-native';
 import { useSelector } from 'react-redux';

app/components/UI/AddCustomCollectible/index.tsx

@@ -10,7 +10,7 @@ import {
 import { fontStyles } from '../../../styles/common';
 import Engine from '../../../core/Engine';
 import { strings } from '../../../../locales/i18n';
-import { isValidAddress } from 'ethereumjs-util';
+import { isValidAddress } from '@ethereumjs/util';
 import ActionView from '../ActionView';
 import { isSmartContractAddress } from '../../../util/transactions';
 import Device from '../../../util/device';

app/components/UI/AddCustomToken/index.js

@@ -12,7 +12,7 @@ import { fontStyles } from '../../../styles/common';
 import Engine from '../../../core/Engine';
 import PropTypes from 'prop-types';
 import { strings } from '../../../../locales/i18n';
-import { isValidAddress } from 'ethereumjs-util';
+import { isValidAddress } from '@ethereumjs/util';
 import { isSmartContractAddress } from '../../../util/transactions';
 import { MetaMetricsEvents } from '../../../core/Analytics';
 

app/components/UI/ApprovalTagUrl/ApprovalTagUrl.tsx

@@ -1,4 +1,4 @@
-import { toChecksumAddress } from 'ethereumjs-util';
+import { toChecksumAddress } from '@ethereumjs/util';
 import React, { useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 

app/components/UI/AssetOverview/AboutAsset/AboutAsset.tsx

@@ -1,4 +1,4 @@
-import { zeroAddress } from 'ethereumjs-util';
+import { zeroAddress } from '@ethereumjs/util';
 import React from 'react';
 import { DimensionValue, View } from 'react-native';
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';

app/components/UI/AssetOverview/AssetOverview.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import AssetOverview from './AssetOverview';
-import { zeroAddress } from 'ethereumjs-util';
+import { zeroAddress } from '@ethereumjs/util';
 import renderWithProvider from '../../../util/test/renderWithProvider';
 import { backgroundState } from '../../../util/test/initial-root-state';
 import { NetworkController } from '@metamask/network-controller';

app/components/UI/AssetOverview/AssetOverview.tsx

@@ -1,4 +1,4 @@
-import { zeroAddress } from 'ethereumjs-util';
+import { zeroAddress } from '@ethereumjs/util';
 import React, { useCallback, useEffect } from 'react';
 import { Platform, TouchableOpacity, View } from 'react-native';
 import { useDispatch, useSelector } from 'react-redux';

app/components/UI/AssetOverview/TokenDetails/TokenDetails.tsx

@@ -1,4 +1,4 @@
-import { zeroAddress } from 'ethereumjs-util';
+import { zeroAddress } from '@ethereumjs/util';
 import React, { useState } from 'react';
 import { View } from 'react-native';
 import { useSelector } from 'react-redux';

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';
@@ -48,7 +48,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/PaymentRequest/AssetList/index.tsx

@@ -6,7 +6,7 @@ import { fontStyles } from '../../../../styles/common';
 import Identicon from '../../Identicon';
 import NetworkMainAssetLogo from '../../NetworkMainAssetLogo';
 import { useSelector } from 'react-redux';
-import { toChecksumAddress } from 'ethereumjs-util';
+import { toChecksumAddress } from '@ethereumjs/util';
 import { useTheme } from '../../../../util/theme';
 import { selectTokenList } from '../../../../selectors/tokenListController';
 

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>> = {
@@ -242,7 +242,7 @@ const mockUseGasPriceEstimationInitialValue: ReturnType<
   estimatedGasFee: toTokenMinimalUnit(
     '0.01',
     mockUseRampSDKInitialValues.selectedAsset?.decimals || 18,
-  ) as BN,
+  ) as BN4,
 };
 
 let mockUseGasPriceEstimationValue: ReturnType<typeof useGasPriceEstimation> =
@@ -669,7 +669,7 @@ describe('BuildQuote View', () => {
       mockUseBalanceValues.balanceBN = toTokenMinimalUnit(
         '5',
         mockUseRampSDKValues.selectedAsset?.decimals || 18,
-      ) as BN;
+      ) as BN4;
       render(BuildQuote);
       const initialAmount = '0';
       const overBalanceAmout = '6';
@@ -688,7 +688,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%'));
@@ -719,13 +719,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}`));
@@ -752,13 +752,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';
@@ -104,7 +104,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);
@@ -341,7 +341,7 @@ const BuildQuote = () => {
       setAmountNumber(valueAsNumber);
       if (isSell) {
         setAmountBNMinimalUnit(
-          toTokenMinimalUnit(`${value}`, selectedAsset?.decimals ?? 0) as BN,
+          toTokenMinimalUnit(`${value}`, selectedAsset?.decimals ?? 0) as BN4,
         );
       }
     },
@@ -356,8 +356,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;
@@ -698,7 +698,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,
@@ -132,7 +132,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 { selectChainId } 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 BN from 'bnjs4';
 import { useRampSDK } from '../sdk';
 import parseAmount from '../utils/parseAmount';
 import { toTokenMinimalUnit } from '../../../../util/number';

app/components/UI/Stake/Views/StakeInputView/StakeInputView.test.tsx

@@ -4,7 +4,7 @@ import StakeInputView from './StakeInputView';
 import { renderScreen } from '../../../../../util/test/renderWithProvider';
 import Routes from '../../../../../constants/navigation/Routes';
 import { backgroundState } from '../../../../../util/test/initial-root-state';
-import { BN } from 'ethereumjs-util';
+import BN5 from 'bnjs5';
 import { Stake } from '../../sdk/stakeSdkProvider';
 import { ChainId, PooledStakingContract } from '@metamask/stake-sdk';
 import { Contract } from 'ethers';
@@ -53,7 +53,7 @@ jest.mock('../../../../../selectors/currencyRateController.ts', () => ({
   selectCurrentCurrency: jest.fn(() => 'USD'),
 }));
 
-const mockBalanceBN = new BN('1500000000000000000');
+const mockBalanceBN = new BN5('1500000000000000000');
 
 const mockPooledStakingContractService: PooledStakingContract = {
   chainId: ChainId.ETHEREUM,

app/components/UI/Stake/Views/UnstakeInputView/UnstakeInputView.tsx

@@ -1,6 +1,6 @@
 import { useNavigation } from '@react-navigation/native';
 import React, { useCallback, useEffect } from 'react';
-import { BN } from 'ethereumjs-util';
+import BN4 from 'bnjs4';
 import UnstakeInputViewBanner from './UnstakeBanner';
 import { strings } from '../../../../../../locales/i18n';
 import Button, {
@@ -40,7 +40,7 @@ const UnstakeInputView = () => {
     handleAmountPress,
     handleKeypadChange,
     conversionRate,
-  } = useStakingInputHandlers(new BN(stakeBalance));
+  } = useStakingInputHandlers(new BN4(stakeBalance));
 
   const stakeBalanceInEth = renderFromWei(stakeBalance, 5);
   const stakeBalanceFiatNumber = weiToFiatNumber(stakeBalance, conversionRate);

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

@@ -25,7 +25,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,
@@ -63,8 +63,8 @@ const StakingBalance = () => {
       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/useStakingInput.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 {
@@ -16,15 +16,15 @@ import {
 } from '../../../../util/number';
 import { strings } from '../../../../../locales/i18n';
 
-const useStakingInputHandlers = (balance: BN) => {
+const useStakingInputHandlers = (balance: BN4) => {
   const [amountEth, setAmountEth] = useState('0');
-  const [amountWei, setAmountWei] = useState<BN>(new BN(0));
+  const [amountWei, setAmountWei] = useState<BN4>(new BN4(0));
   const [estimatedAnnualRewards, setEstimatedAnnualRewards] = useState('-');
 
-  const isNonZeroAmount = useMemo(() => amountWei.gt(new BN(0)), [amountWei]);
+  const isNonZeroAmount = useMemo(() => amountWei.gt(new BN4(0)), [amountWei]);
   const isOverMaximum = useMemo(() => {
-    const additionalFundsRequired = amountWei.sub(balance || new BN(0));
-    return isNonZeroAmount && additionalFundsRequired.gt(new BN(0));
+    const additionalFundsRequired = amountWei.sub(balance || new BN4(0));
+    return isNonZeroAmount && additionalFundsRequired.gt(new BN4(0));
   }, [amountWei, balance, isNonZeroAmount]);
 
   const [fiatAmount, setFiatAmount] = useState('0');
@@ -90,7 +90,7 @@ const useStakingInputHandlers = (balance: BN) => {
     ({ value }: { value: number }) => {
       if (!balance) return;
       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));
 
       const newAmountString = fromTokenMinimalUnitString(
         amountPercentage.toString(10),

app/components/UI/Swaps/QuotesView.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
-import Eth from 'ethjs-query';
+import Eth from '@metamask/ethjs-query';
 import {
   View,
   StyleSheet,

app/components/UI/Swaps/components/TokenSelectModal.js

@@ -16,7 +16,7 @@ import Icon from 'react-native-vector-icons/Ionicons';
 import FAIcon from 'react-native-vector-icons/FontAwesome5';
 import Fuse from 'fuse.js';
 import { connect } from 'react-redux';
-import { isValidAddress } from 'ethereumjs-util';
+import { isValidAddress } from '@ethereumjs/util';
 
 import Device from '../../../../util/device';
 import {

app/components/UI/Tokens/TokenList/PortfolioBalance/index.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { fireEvent } from '@testing-library/react-native';
-import { BN } from 'ethereumjs-util';
+import BN5 from 'bnjs5';
 import renderWithProvider from '../../../../../util/test/renderWithProvider';
 import { backgroundState } from '../../../../../util/test/initial-root-state';
 import AppConstants from '../../../../../../app/core/AppConstants';
@@ -70,9 +70,9 @@ const initialState = {
       },
       TokenBalancesController: {
         contractBalances: {
-          '0x00': new BN(2),
-          '0x01': new BN(2),
-          '0x02': new BN(0),
+          '0x00': new BN5(2),
+          '0x01': new BN5(2),
+          '0x02': new BN5(0),
         },
       },
     },