chore: remove usage of bn.js v4

app/components/Nav/Main/RootRPCMethodsUI.js

@@ -25,7 +25,7 @@ import {
   getIsSwapApproveOrSwapTransaction,
   isApprovalTransaction,
 } from '../../../util/transactions';
-import BN from 'bnjs4';
+import BN from 'bn.js';
 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 BN4 from 'bnjs4';
+import BN from 'bn.js';
 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 BN4,
+  balanceBN: toTokenMinimalUnit('5.36385', 18) as BN,
 };
 
 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 type BN4 from 'bnjs4';
+import type BN from 'bn.js';
 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 BN4,
+  balanceBN: toTokenMinimalUnit('5.36385', 18) as BN,
 };
 
 let mockUseBalanceValues: Partial<ReturnType<typeof useBalance>> = {
@@ -242,7 +242,7 @@ const mockUseGasPriceEstimationInitialValue: ReturnType<
   estimatedGasFee: toTokenMinimalUnit(
     '0.01',
     mockUseRampSDKInitialValues.selectedAsset?.decimals || 18,
-  ) as BN4,
+  ) as BN,
 };
 
 let mockUseGasPriceEstimationValue: ReturnType<typeof useGasPriceEstimation> =
@@ -669,7 +669,7 @@ describe('BuildQuote View', () => {
       mockUseBalanceValues.balanceBN = toTokenMinimalUnit(
         '5',
         mockUseRampSDKValues.selectedAsset?.decimals || 18,
-      ) as BN4;
+      ) as BN;
       render(BuildQuote);
       const initialAmount = '0';
       const overBalanceAmout = '6';
@@ -688,7 +688,7 @@ describe('BuildQuote View', () => {
       mockUseBalanceValues.balanceBN = toTokenMinimalUnit(
         '1',
         mockUseRampSDKValues.selectedAsset?.decimals || 18,
-      ) as BN4;
+      ) as BN;
       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 BN4,
+        ) as BN,
       };
       mockUseGasPriceEstimationValue = {
         estimatedGasFee: toTokenMinimalUnit(
           '0.27',
           mockUseRampSDKValues.selectedAsset?.decimals || 18,
-        ) as BN4,
+        ) as BN,
       };
       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 BN4,
+        ) as BN,
       };
       mockUseGasPriceEstimationValue = {
         estimatedGasFee: toTokenMinimalUnit(
           '0.27',
           mockUseRampSDKValues.selectedAsset?.decimals || 18,
-        ) as BN4,
+        ) as BN,
       };
       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 BN4 from 'bnjs4';
+import BN from 'bn.js';
 
 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<BN4>();
+  const [amountBNMinimalUnit, setAmountBNMinimalUnit] = useState<BN>();
   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 BN4,
+          toTokenMinimalUnit(`${value}`, selectedAsset?.decimals ?? 0) as BN,
         );
       }
     },
@@ -356,8 +356,8 @@ const BuildQuote = () => {
       } else {
         const percentage = value * 100;
         const amountPercentage = balanceBN
-          ?.mul(new BN4(percentage))
-          .div(new BN4(100));
+          ?.mul(new BN(percentage))
+          .div(new BN(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 BN4(0))) {
+  } else if (balanceBN && !balanceBN.isZero() && maxSellAmount?.gt(new BN(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 BN4 from 'bnjs4';
+import BN from 'bn.js';
 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 BN4(
+        new BN(
           toTokenMinimalUnit(
             orderData.cryptoAmount || '0',
             orderData.cryptoCurrency.decimals,

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

@@ -5,7 +5,7 @@ import {
   type GasFeeController as GasFeeControllerType,
 } from '@metamask/gas-fee-controller';
 
-import BN from 'bnjs4';
+import BN from 'bn.js';
 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 BN4 from 'bnjs4';
+import type BN from 'bn.js';
 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<BN4 | undefined>,
+    amount: React.SetStateAction<BN | undefined>,
   ) => void,
   currentFiatCurrency: FiatCurrency | null,
 ) {
@@ -53,7 +53,7 @@ export default function useIntentAmount(
               toTokenMinimalUnit(
                 `${parsedAmount}`,
                 selectedAsset?.decimals ?? 0,
-              ) as BN4,
+              ) as BN,
             );
           }
         }

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 BN5 from 'bnjs5';
+import BN from 'bn.js';
 import { Stake } from '../../sdk/stakeSdkProvider';
 import { ChainId, PooledStakingContract } from '@metamask/stake-sdk';
 import { Contract } from 'ethers';
@@ -54,7 +54,7 @@ jest.mock('../../../../../selectors/currencyRateController.ts', () => ({
   selectCurrentCurrency: jest.fn(() => 'USD'),
 }));
 
-const mockBalanceBN = new BN5('1500000000000000000');
+const mockBalanceBN = new BN('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 BN4 from 'bnjs4';
+import BN from 'bn.js';
 import UnstakeInputViewBanner from './UnstakeBanner';
 import { strings } from '../../../../../../locales/i18n';
 import Button, {
@@ -43,7 +43,7 @@ const UnstakeInputView = () => {
     handleAmountPress,
     handleKeypadChange,
     conversionRate,
-  } = useStakingInputHandlers(new BN4(stakedBalanceWei));
+  } = useStakingInputHandlers(new BN(stakedBalanceWei));
 
   const stakeBalanceInEth = renderFromWei(stakedBalanceWei, 5);
   const stakeBalanceFiatNumber = weiToFiatNumber(

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 BN4 from 'bnjs4';
+import BN from 'bn.js';
 import bn from 'bignumber.js';
 import {
   CommonPercentageInputUnits,
@@ -82,8 +82,8 @@ const StakingBalanceContent = ({ asset }: StakingBalanceProps) => {
       renderFromWei(
         claimableRequests.reduce(
           (acc, { claimedAssets }) =>
-            claimedAssets ? acc.add(new BN4(claimedAssets)) : acc,
-          new BN4(0),
+            claimedAssets ? acc.add(new BN(claimedAssets)) : acc,
+          new BN(0),
         ),
       ),
     [claimableRequests],

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

@@ -1,4 +1,4 @@
-import BN4 from 'bnjs4';
+import BN from 'bn.js';
 import { useState, useMemo, useCallback } from 'react';
 import { useSelector } from 'react-redux';
 import {
@@ -17,15 +17,15 @@ import {
 import { strings } from '../../../../../locales/i18n';
 import useVaultData from './useVaultData';
 
-const useStakingInputHandlers = (balance: BN4) => {
+const useStakingInputHandlers = (balance: BN) => {
   const [amountEth, setAmountEth] = useState('0');
-  const [amountWei, setAmountWei] = useState<BN4>(new BN4(0));
+  const [amountWei, setAmountWei] = useState<BN>(new BN(0));
   const [estimatedAnnualRewards, setEstimatedAnnualRewards] = useState('-');
 
-  const isNonZeroAmount = useMemo(() => amountWei.gt(new BN4(0)), [amountWei]);
+  const isNonZeroAmount = useMemo(() => amountWei.gt(new BN(0)), [amountWei]);
   const isOverMaximum = useMemo(() => {
-    const additionalFundsRequired = amountWei.sub(balance || new BN4(0));
-    return isNonZeroAmount && additionalFundsRequired.gt(new BN4(0));
+    const additionalFundsRequired = amountWei.sub(balance || new BN(0));
+    return isNonZeroAmount && additionalFundsRequired.gt(new BN(0));
   }, [amountWei, balance, isNonZeroAmount]);
 
   const [fiatAmount, setFiatAmount] = useState('0');
@@ -92,7 +92,7 @@ const useStakingInputHandlers = (balance: BN4) => {
     ({ value }: { value: number }) => {
       if (!balance) return;
       const percentage = value * 100;
-      const amountPercentage = balance.mul(new BN4(percentage)).div(new BN4(100));
+      const amountPercentage = balance.mul(new BN(percentage)).div(new BN(100));
 
       const newAmountString = fromTokenMinimalUnitString(
         amountPercentage.toString(10),

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 BN5 from 'bnjs5';
+import BN from 'bn.js';
 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 BN5(2),
-          '0x01': new BN5(2),
-          '0x02': new BN5(0),
+          '0x00': new BN(2),
+          '0x01': new BN(2),
+          '0x02': new BN(0),
         },
       },
     },

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

@@ -2,7 +2,7 @@ import React from 'react';
 // eslint-disable-next-line @typescript-eslint/no-shadow
 import { fireEvent, waitFor } from '@testing-library/react-native';
 import Tokens from './';
-import BN5 from 'bnjs5';
+import BN from 'bn.js';
 import renderWithProvider from '../../../util/test/renderWithProvider';
 import { createStackNavigator } from '@react-navigation/stack';
 import { getAssetTestId } from '../../../../wdio/screen-objects/testIDs/Screens/WalletView.testIds';
@@ -109,9 +109,9 @@ const initialState = {
       },
       TokenBalancesController: {
         contractBalances: {
-          '0x00': new BN5(2),
-          '0x01': new BN5(2),
-          '0x02': new BN5(0),
+          '0x00': new BN(2),
+          '0x01': new BN(2),
+          '0x02': new BN(0),
         },
       },
     },
@@ -262,7 +262,7 @@ describe('Tokens', () => {
           },
           TokenBalancesController: {
             contractBalances: {
-              '0x02': new BN5(1),
+              '0x02': new BN(1),
             },
           },
         },

app/components/Views/confirmations/Approval/components/TransactionEditor/index.js

@@ -10,7 +10,7 @@ import {
   toHexadecimal,
 } from '../../../../../../util/number';
 import { isValidAddress, addHexPrefix } from 'ethereumjs-util';
-import BN from 'bnjs4';
+import BN from 'bn.js';
 import { strings } from '../../../../../../../locales/i18n';
 import { connect } from 'react-redux';
 import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';

app/components/Views/confirmations/SendFlow/Confirm/validation.test.ts

@@ -1,4 +1,4 @@
-import BN from 'bnjs4';
+import BN from 'bn.js';
 import { validateSufficientBalance, validateSufficientTokenBalance } from './validation';
 import { renderFromWei, hexToBN } from '../../../../../util/number';
 import {