fix: cp-7.60.0 target network fee alert in metamask pay (#22839)

## **Description**

Ensure the insufficient balance alert is displayed for Predict
confirmations when the token is Polygon USDC.e.

## **Changelog**

CHANGELOG entry: null

## **Related issues**

Fixes: #22713 

## **Manual testing steps**

## **Screenshots/Recordings**

### **Before**

### **After**

## **Pre-merge author checklist**

- [x] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/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-mobile/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.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Refines insufficient balance alert logic to consider pay token vs
required tokens and updates result readiness to check required token
source amounts; adds corresponding tests.
> 
> - **Alerts (useInsufficientBalanceAlert)**:
> - Consider `payToken` and `useTransactionPayRequiredTokens()`; compute
primary required token and show alert only when relevant.
> - Early-exit when a `payToken` is set for a different token; only
ignore `TransactionType.predictWithdraw`.
>   - Update memo deps accordingly.
> - **Custom Amount UI**:
> - `useIsResultReady` now checks for source amounts matching
non-skippable required tokens instead of `sourceAmounts` length.
> - **Tests**:
> - Add/adjust unit tests for pay-token/required-token scenarios and
ignored types.
>   - Update mocks, types (`Hex`), and defaults for new hooks.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
6fe6488. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: matthewwalsh0

app/components/Views/confirmations/components/info/custom-amount-info/custom-amount-info.tsx

@@ -250,11 +250,20 @@ function useIsResultReady({
 }) {
   const quotes = useTransactionPayQuotes();
   const isQuotesLoading = useIsTransactionPayLoading();
+  const requiredTokens = useTransactionPayRequiredTokens();
   const sourceAmounts = useTransactionPaySourceAmounts();
 
+  const hasSourceAmount = sourceAmounts?.some((a) =>
+    requiredTokens.some(
+      (rt) =>
+        rt.address.toLowerCase() === a.targetTokenAddress.toLowerCase() &&
+        !rt.skipIfBalance,
+    ),
+  );
+
   return (
     !isKeyboardVisible &&
-    (isQuotesLoading || Boolean(quotes?.length) || !sourceAmounts?.length)
+    (isQuotesLoading || Boolean(quotes?.length) || !hasSourceAmount)
   );
 }
 

app/components/Views/confirmations/hooks/alerts/useInsufficientBalanceAlert.test.ts

@@ -17,6 +17,12 @@ import { noop } from 'lodash';
 import { useConfirmationContext } from '../../context/confirmation-context';
 import { useRampNavigation } from '../../../../UI/Ramp/hooks/useRampNavigation';
 import { useIsGaslessSupported } from '../gas/useIsGaslessSupported';
+import { useTransactionPayRequiredTokens } from '../pay/useTransactionPayData';
+import {
+  TransactionPayRequiredToken,
+  TransactionPaymentToken,
+} from '@metamask/transaction-pay-controller';
+import { Hex } from '@metamask/utils';
 
 jest.mock('../../../../../util/navigation/navUtils', () => ({
   useParams: jest.fn().mockReturnValue({
@@ -30,6 +36,7 @@ jest.mock('react-redux', () => ({
   ...jest.requireActual('react-redux'),
   useSelector: jest.fn().mockImplementation((selector) => selector()),
 }));
+
 jest.mock('@react-navigation/native', () => {
   const actualNav = jest.requireActual('@react-navigation/native');
   return {
@@ -39,6 +46,7 @@ jest.mock('@react-navigation/native', () => {
     }),
   };
 });
+
 jest.mock('../useConfirmActions');
 jest.mock('../transactions/useTransactionMetadataRequest');
 jest.mock('../pay/useTransactionPayToken');
@@ -54,6 +62,8 @@ jest.mock('../../../../UI/Ramp/hooks/useRampNavigation', () => ({
   RampMode: { AGGREGATOR: 'AGGREGATOR', DEPOSIT: 'DEPOSIT' },
 }));
 jest.mock('../gas/useIsGaslessSupported');
+jest.mock('../pay/useTransactionPayData');
+jest.mock('../pay/useTransactionPayData');
 
 describe('useInsufficientBalanceAlert', () => {
   const mockUseTransactionMetadataRequest = jest.mocked(
@@ -69,8 +79,12 @@ describe('useInsufficientBalanceAlert', () => {
   const mockUseRampNavigation = jest.mocked(useRampNavigation);
   const mockGoToRamps = jest.fn();
   const useIsGaslessSupportedMock = jest.mocked(useIsGaslessSupported);
+  const useTransactionPayRequiredTokensMock = jest.mocked(
+    useTransactionPayRequiredTokens,
+  );
+  const useTransactionPayTokenMock = jest.mocked(useTransactionPayToken);
 
-  const mockChainId = '0x1';
+  const mockChainId = '0x1' as Hex;
   const mockFromAddress = '0x123';
   const mockNativeCurrency = 'ETH';
   const mockTransaction = {
@@ -126,6 +140,13 @@ describe('useInsufficientBalanceAlert', () => {
     mockUseRampNavigation.mockReturnValue({
       goToRamps: mockGoToRamps,
     });
+
+    useTransactionPayRequiredTokensMock.mockReturnValue([]);
+
+    useTransactionPayTokenMock.mockReturnValue({
+      payToken: undefined,
+      setPayToken: jest.fn(),
+    });
   });
 
   it('return empty array when no transaction metadata is available', () => {
@@ -229,14 +250,48 @@ describe('useInsufficientBalanceAlert', () => {
   it('returns empty array if transaction type ignored', () => {
     mockUseTransactionMetadataRequest.mockReturnValue({
       ...mockTransaction,
-      type: TransactionType.perpsDeposit,
+      type: TransactionType.predictWithdraw,
     } as unknown as TransactionMeta);
 
     const { result } = renderHook(() => useInsufficientBalanceAlert());
 
     expect(result.current).toStrictEqual([]);
   });
 
+  it('returns no alert if pay token', () => {
+    useTransactionPayTokenMock.mockReturnValue({
+      payToken: {
+        address: '0x123' as Hex,
+      } as TransactionPaymentToken,
+      setPayToken: jest.fn(),
+    });
+
+    const { result } = renderHook(() => useInsufficientBalanceAlert());
+
+    expect(result.current).toStrictEqual([]);
+  });
+
+  it('returns alert if pay token matches required token', () => {
+    useTransactionPayTokenMock.mockReturnValue({
+      payToken: {
+        address: '0x123' as Hex,
+        chainId: mockChainId,
+      } as TransactionPaymentToken,
+      setPayToken: jest.fn(),
+    });
+
+    useTransactionPayRequiredTokensMock.mockReturnValue([
+      {
+        address: '0x123' as Hex,
+        chainId: mockChainId,
+      } as TransactionPayRequiredToken,
+    ]);
+
+    const { result } = renderHook(() => useInsufficientBalanceAlert());
+
+    expect(result.current).toHaveLength(1);
+  });
+
   describe('when ignoreGasFeeToken is true', () => {
     it('returns empty array', () => {
       mockUseAccountNativeBalance.mockReturnValue({

app/components/Views/confirmations/hooks/alerts/useInsufficientBalanceAlert.ts

@@ -24,12 +24,10 @@ import { useConfirmationContext } from '../../context/confirmation-context';
 import { useIsGaslessSupported } from '../gas/useIsGaslessSupported';
 import { TransactionType } from '@metamask/transaction-controller';
 import { hasTransactionType } from '../../utils/transaction';
+import { useTransactionPayToken } from '../pay/useTransactionPayToken';
+import { useTransactionPayRequiredTokens } from '../pay/useTransactionPayData';
 
-const IGNORE_TYPES = [
-  TransactionType.perpsDeposit,
-  TransactionType.predictDeposit,
-  TransactionType.predictWithdraw,
-];
+const IGNORE_TYPES = [TransactionType.predictWithdraw];
 
 const HEX_ZERO = '0x0';
 
@@ -48,9 +46,25 @@ export const useInsufficientBalanceAlert = ({
   const { isTransactionValueUpdating } = useConfirmationContext();
   const { onReject } = useConfirmActions();
   const { isSupported: isGaslessSupported } = useIsGaslessSupported();
+  const { payToken } = useTransactionPayToken();
+  const requiredTokens = useTransactionPayRequiredTokens();
+
+  const primaryRequiredToken = (requiredTokens ?? []).find(
+    (token) => !token.skipIfBalance,
+  );
+
+  const isPayTokenTarget =
+    payToken &&
+    payToken.chainId === primaryRequiredToken?.chainId &&
+    payToken.address.toLowerCase() ===
+      primaryRequiredToken?.address.toLowerCase();
 
   return useMemo(() => {
-    if (!transactionMetadata || isTransactionValueUpdating) {
+    if (
+      !transactionMetadata ||
+      isTransactionValueUpdating ||
+      (payToken && !isPayTokenTarget)
+    ) {
       return [];
     }
 
@@ -117,9 +131,11 @@ export const useInsufficientBalanceAlert = ({
     balanceWeiInHex,
     ignoreGasFeeToken,
     isGaslessSupported,
+    isPayTokenTarget,
     isTransactionValueUpdating,
     networkConfigurations,
     onReject,
+    payToken,
     transactionMetadata,
     goToRamps,
   ]);