fix: For batch transactions sum total of gas needed for all transactions in the batched should be check to show insufficient funds error (#31555)

## **Description**

For batch transactions sum total of gas needed for all transactions in
the batched should be check to show insufficient funds error

## **Related issues**

Fixes: MetaMask/MetaMask-planning#4571

## **Manual testing steps**

1. Submit a batched transaction with a simple send whose value is more
than your balance
2. You should see insufficient fund alert

## **Screenshots/Recordings**
TODO

## **Pre-merge author checklist**

- [X] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [X] I've completed the PR template to the best of my ability
- [X] I’ve included tests if applicable
- [X] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [X] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

Author: jpuri

ui/pages/confirmations/hooks/alerts/transactions/useInsufficientBalanceAlerts.test.ts

@@ -2,13 +2,12 @@ import { ApprovalType } from '@metamask/controller-utils';
 import {
   TransactionMeta,
   TransactionParams,
+  TransactionType,
 } from '@metamask/transaction-controller';
 import { createMockInternalAccount } from '../../../../../../test/jest/mocks';
 import { getMockConfirmState } from '../../../../../../test/data/confirmations/helper';
 import { genUnapprovedContractInteractionConfirmation } from '../../../../../../test/data/confirmations/contract-interaction';
 import { renderHookWithConfirmContextProvider } from '../../../../../../test/lib/confirmations/render-helpers';
-import { Severity } from '../../../../../helpers/constants/design-system';
-import { RowAlertKey } from '../../../../../components/app/confirm/info/row/constants';
 import { useInsufficientBalanceAlerts } from './useInsufficientBalanceAlerts';
 
 const TRANSACTION_ID_MOCK = '123-456';
@@ -27,6 +26,24 @@ const TRANSACTION_MOCK = {
   } as TransactionParams,
 } as TransactionMeta;
 
+const ALERT = [
+  {
+    actions: [
+      {
+        key: 'buy',
+        label: 'Buy ETH',
+      },
+    ],
+    field: 'estimatedFee',
+    isBlocking: true,
+    key: 'insufficientBalance',
+    message:
+      'You do not have enough ETH in your account to pay for network fees.',
+    reason: 'Insufficient funds',
+    severity: 'danger',
+  },
+];
+
 function buildState({
   balance,
   currentConfirmation,
@@ -113,6 +130,38 @@ describe('useInsufficientBalanceAlerts', () => {
     ).toEqual([]);
   });
 
+  it('returns alerts for batch transaction if account has balance less than total of the transactions in the batch', () => {
+    const BATCH_TRANSACTION_MOCK = {
+      ...TRANSACTION_MOCK,
+      nestedTransactions: [
+        {
+          to: '0x1234567890123456789012345678901234567890',
+          value: '0x3B9ACA00',
+          type: TransactionType.simpleSend,
+        },
+        {
+          to: '0x1234567890123456789012345678901234567891',
+          value: '0x1DCD6500',
+          type: TransactionType.simpleSend,
+        },
+      ],
+    };
+    expect(
+      runHook({
+        balance: 210000000002,
+        currentConfirmation: TRANSACTION_MOCK as Partial<TransactionMeta>,
+        transaction: TRANSACTION_MOCK as Partial<TransactionMeta>,
+      }),
+    ).toEqual([]);
+    expect(
+      runHook({
+        balance: 210000000002,
+        currentConfirmation: BATCH_TRANSACTION_MOCK as Partial<TransactionMeta>,
+        transaction: BATCH_TRANSACTION_MOCK as Partial<TransactionMeta>,
+      }),
+    ).toEqual(ALERT);
+  });
+
   it('returns no alerts if account has balance greater than gas fee plus value', () => {
     expect(
       runHook({
@@ -140,22 +189,6 @@ describe('useInsufficientBalanceAlerts', () => {
       transaction: TRANSACTION_MOCK,
     });
 
-    expect(alerts).toEqual([
-      {
-        actions: [
-          {
-            key: 'buy',
-            label: 'Buy ETH',
-          },
-        ],
-        field: RowAlertKey.EstimatedFee,
-        isBlocking: true,
-        key: 'insufficientBalance',
-        message:
-          'You do not have enough ETH in your account to pay for network fees.',
-        reason: 'Insufficient funds',
-        severity: Severity.Danger,
-      },
-    ]);
+    expect(alerts).toEqual(ALERT);
   });
 });

ui/pages/confirmations/hooks/alerts/transactions/useInsufficientBalanceAlerts.ts

@@ -1,3 +1,4 @@
+import { Hex } from '@metamask/utils';
 import { useMemo } from 'react';
 import { useSelector } from 'react-redux';
 
@@ -17,12 +18,18 @@ import {
   RowAlertKey,
 } from '../../../../../components/app/confirm/info/row/constants';
 import { useConfirmContext } from '../../../context/confirm';
+import { sumHexes } from '../../../../../../shared/modules/conversion.utils';
 
 export function useInsufficientBalanceAlerts(): Alert[] {
   const t = useI18nContext();
   const { currentConfirmation } = useConfirmContext<TransactionMeta>();
   const { id: transactionId, selectedGasFeeToken } = currentConfirmation ?? {};
 
+  const batchTransactionValues =
+    currentConfirmation?.nestedTransactions?.map(
+      (trxn) => (trxn.value as Hex) ?? 0x0,
+    ) ?? [];
+
   const balance = useSelector((state) =>
     selectTransactionAvailableBalance(state, transactionId),
   );
@@ -31,14 +38,16 @@ export function useInsufficientBalanceAlerts(): Alert[] {
     selectTransactionValue(state, transactionId),
   );
 
+  const totalValue = sumHexes(value, ...batchTransactionValues);
+
   const { hexMaximumTransactionFee } = useSelector((state) =>
     selectTransactionFeeById(state, transactionId),
   );
 
   const nativeCurrency = useSelector(getMultichainNativeCurrency);
 
   const insufficientBalance = !isBalanceSufficient({
-    amount: value,
+    amount: totalValue,
     gasTotal: hexMaximumTransactionFee,
     balance,
   });

ui/pages/confirmations/send/send.utils.js

@@ -1,4 +1,5 @@
 import { encode } from '@metamask/abi-utils';
+import { isHexString } from '@metamask/utils';
 // TODO: Remove restricted import
 // eslint-disable-next-line import/no-restricted-paths
 import { addHexPrefix } from '../../../../app/scripts/lib/util';
@@ -30,7 +31,7 @@ function isBalanceSufficient({
   primaryCurrency = undefined,
 }) {
   let totalAmount = new Numeric(amount, 16).add(new Numeric(gasTotal, 16));
-  let balanceNumeric = new Numeric(balance, 16);
+  let balanceNumeric = new Numeric(balance, isHexString(balance) ? 16 : 10);
 
   if (typeof primaryCurrency !== 'undefined' && primaryCurrency !== null) {
     totalAmount = totalAmount.applyConversionRate(conversionRate);