feat: metamask pay metrics (#19602)

## **Description**

Add initial metrics for MetaMask pay and Perps deposit confirmation.

Bump transaction controller to fix Perps deposit using swaps.

## **Changelog**

CHANGELOG entry: null

## **Related issues**

Fixes:
[#5606](MetaMask/MetaMask-planning#5606)
[#5774](MetaMask/MetaMask-planning#5774)

## **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.

Author: matthewwalsh0

app/components/Views/confirmations/hooks/metrics/useConfirmationAlertMetrics.ts

@@ -110,11 +110,11 @@ const ALERTS_NAME_METRICS: AlertNameMetrics = {
   [AlertKeys.Blockaid]: 'blockaid',
   [AlertKeys.DomainMismatch]: 'domain_mismatch',
   [AlertKeys.InsufficientBalance]: 'insufficient_balance',
-  [AlertKeys.InsufficientPayTokenBalance]: 'insufficient_pay_token_balance',
-  [AlertKeys.InsufficientPayTokenNative]: 'insufficient_pay_token_native',
-  [AlertKeys.NoPayTokenQuotes]: 'no_pay_token_quotes',
+  [AlertKeys.InsufficientPayTokenBalance]: 'insufficient_funds',
+  [AlertKeys.InsufficientPayTokenNative]: 'insufficient_funds_for_gas',
+  [AlertKeys.NoPayTokenQuotes]: 'no_payment_route_available',
   [AlertKeys.PendingTransaction]: 'pending_transaction',
-  [AlertKeys.PerpsDepositMinimum]: 'perps_deposit_minimum',
+  [AlertKeys.PerpsDepositMinimum]: 'minimum_deposit',
   [AlertKeys.PerpsHardwareAccount]: 'perps_hardware_account',
   [AlertKeys.SignedOrSubmitted]: 'signed_or_submitted',
 };

app/components/Views/confirmations/hooks/pay/useAutomaticTransactionPayToken.test.ts

@@ -374,4 +374,43 @@ describe('useAutomaticTransactionPayToken', () => {
       chainId: CHAIN_ID_1_MOCK,
     });
   });
+
+  it('returns number of tokens with sufficient balance', () => {
+    useTokensWithBalanceMock.mockReturnValue([
+      {
+        address: TOKEN_ADDRESS_1_MOCK,
+        chainId: CHAIN_ID_1_MOCK,
+        tokenFiatAmount: TOTAL_FIAT_MOCK - 1,
+      },
+      {
+        address: TOKEN_ADDRESS_2_MOCK,
+        chainId: CHAIN_ID_1_MOCK,
+        tokenFiatAmount: TOTAL_FIAT_MOCK - 2,
+      },
+      {
+        address: TOKEN_ADDRESS_1_MOCK,
+        chainId: CHAIN_ID_2_MOCK,
+        tokenFiatAmount: TOTAL_FIAT_MOCK + 10,
+      },
+      {
+        address: TOKEN_ADDRESS_3_MOCK,
+        chainId: CHAIN_ID_2_MOCK,
+        tokenFiatAmount: TOTAL_FIAT_MOCK + 20,
+      },
+      {
+        address: NATIVE_TOKEN_ADDRESS,
+        chainId: CHAIN_ID_1_MOCK,
+        tokenFiatAmount: 1,
+      },
+      {
+        address: NATIVE_TOKEN_ADDRESS,
+        chainId: CHAIN_ID_2_MOCK,
+        tokenFiatAmount: 1,
+      },
+    ] as unknown as ReturnType<typeof useTokensWithBalance>);
+
+    const { result } = runHook();
+
+    expect(result.current.count).toBe(2);
+  });
 });

app/components/Views/confirmations/hooks/pay/useAutomaticTransactionPayToken.ts

@@ -23,8 +23,10 @@ export interface BalanceOverride {
 
 export function useAutomaticTransactionPayToken({
   balanceOverrides,
+  countOnly = false,
 }: {
   balanceOverrides?: BalanceOverride[];
+  countOnly?: boolean;
 } = {}) {
   const isUpdated = useRef(false);
   const supportedChains = useSelector(selectEnabledSourceChains);
@@ -43,11 +45,12 @@ export function useAutomaticTransactionPayToken({
   );
 
   const tokens = useTokensWithBalance({ chainIds });
-
   const isHardwareWallet = isHardwareAccount(from ?? '');
+
   let automaticToken: { address: string; chainId?: string } | undefined;
+  let count = 0;
 
-  if (!isUpdated.current) {
+  if (!isUpdated.current || countOnly) {
     const targetToken =
       requiredTokens.find((token) => token.address !== NATIVE_TOKEN_ADDRESS) ??
       requiredTokens[0];
@@ -68,6 +71,8 @@ export function useAutomaticTransactionPayToken({
       'desc',
     );
 
+    count = sufficientBalanceTokens.length;
+
     const requiredToken = sufficientBalanceTokens.find(
       (token) =>
         token.address === targetToken?.address && token.chainId === chainId,
@@ -100,7 +105,12 @@ export function useAutomaticTransactionPayToken({
   }
 
   useEffect(() => {
-    if (isUpdated.current || !automaticToken || !requiredTokens?.length) {
+    if (
+      isUpdated.current ||
+      !automaticToken ||
+      !requiredTokens?.length ||
+      countOnly
+    ) {
       return;
     }
 
@@ -112,7 +122,9 @@ export function useAutomaticTransactionPayToken({
     isUpdated.current = true;
 
     log('Automatically selected pay token', automaticToken);
-  }, [automaticToken, isUpdated, requiredTokens, setPayToken]);
+  }, [automaticToken, countOnly, isUpdated, requiredTokens, setPayToken]);
+
+  return { count };
 }
 
 function isTokenSupported(

app/components/Views/confirmations/hooks/pay/useTransactionBridgeQuotes.ts

@@ -19,6 +19,7 @@ import {
   isQuoteExpired,
 } from '../../../../UI/Bridge/utils/quoteUtils';
 import { selectBridgeFeatureFlags } from '../../../../../core/redux/slices/bridge';
+import { useTransactionPayMetrics } from './useTransactionPayMetrics';
 
 const EXCLUDED_ALERTS = [
   AlertKeys.NoPayTokenQuotes,
@@ -42,6 +43,8 @@ export function useTransactionBridgeQuotes() {
   const isExpired = useRef(false);
   const [refreshIndex, setRefreshIndex] = useState(0);
 
+  useTransactionPayMetrics();
+
   useEffect(() => {
     if (interval.current) {
       clearInterval(interval.current as unknown as number);

app/components/Views/confirmations/hooks/pay/useTransactionPayMetrics.test.ts

@@ -0,0 +1,252 @@
+import { merge, noop } from 'lodash';
+import { renderHookWithProvider } from '../../../../../util/test/renderWithProvider';
+import {
+  simpleSendTransactionControllerMock,
+  transactionIdMock,
+} from '../../__mocks__/controllers/transaction-controller-mock';
+import { useTransactionPayMetrics } from './useTransactionPayMetrics';
+import { transactionApprovalControllerMock } from '../../__mocks__/controllers/approval-controller-mock';
+import {
+  otherControllersMock,
+  tokenAddress1Mock,
+} from '../../__mocks__/controllers/other-controllers-mock';
+import { useTransactionPayToken } from './useTransactionPayToken';
+import { useTokenAmount } from '../useTokenAmount';
+import { act } from '@testing-library/react-native';
+import {
+  selectTransactionBridgeQuotesById,
+  updateConfirmationMetric,
+} from '../../../../../core/redux/slices/confirmationMetrics';
+import { TransactionType } from '@metamask/transaction-controller';
+import { NATIVE_TOKEN_ADDRESS } from '../../constants/tokens';
+import { useAutomaticTransactionPayToken } from './useAutomaticTransactionPayToken';
+
+jest.mock('./useTransactionPayToken');
+jest.mock('./useAutomaticTransactionPayToken');
+jest.mock('../useTokenAmount');
+
+jest.mock('../../../../../core/redux/slices/confirmationMetrics', () => ({
+  ...jest.requireActual('../../../../../core/redux/slices/confirmationMetrics'),
+  updateConfirmationMetric: jest.fn(),
+  selectTransactionBridgeQuotesById: jest.fn(),
+}));
+
+const CHAIN_ID_MOCK = '0x1';
+const TOKEN_AMOUNT_MOCK = '1.23';
+
+const PAY_TOKEN_MOCK = {
+  address: tokenAddress1Mock,
+  chainId: CHAIN_ID_MOCK,
+  symbol: 'TST',
+};
+
+function runHook() {
+  const state = merge(
+    {},
+    simpleSendTransactionControllerMock,
+    transactionApprovalControllerMock,
+    otherControllersMock,
+  );
+
+  state.engine.backgroundState.TransactionController.transactions[0].type =
+    TransactionType.perpsDeposit;
+
+  return renderHookWithProvider(useTransactionPayMetrics, {
+    state,
+  });
+}
+
+describe('useTransactionPayMetrics', () => {
+  const useTransactionPayTokenMock = jest.mocked(useTransactionPayToken);
+  const useTokenAmountMock = jest.mocked(useTokenAmount);
+  const updateConfirmationMetricMock = jest.mocked(updateConfirmationMetric);
+
+  const useAutomaticTransactionPayTokenMock = jest.mocked(
+    useAutomaticTransactionPayToken,
+  );
+
+  const selectTransactionBridgeQuotesByIdMock = jest.mocked(
+    selectTransactionBridgeQuotesById,
+  );
+
+  beforeEach(() => {
+    jest.resetAllMocks();
+
+    useTransactionPayTokenMock.mockReturnValue({
+      payToken: undefined,
+      setPayToken: noop,
+    });
+
+    useTokenAmountMock.mockReturnValue({
+      amountPrecise: TOKEN_AMOUNT_MOCK,
+    } as ReturnType<typeof useTokenAmount>);
+
+    updateConfirmationMetricMock.mockReturnValue({
+      type: 'test',
+    } as never);
+
+    selectTransactionBridgeQuotesByIdMock.mockReturnValue([] as never[]);
+
+    useAutomaticTransactionPayTokenMock.mockReturnValue({
+      count: 5,
+    });
+  });
+
+  it('does not update metrics if no pay token selected', async () => {
+    runHook();
+
+    await act(async () => noop());
+
+    expect(updateConfirmationMetricMock).toHaveBeenCalledWith({
+      id: transactionIdMock,
+      params: {
+        properties: {},
+        sensitiveProperties: {},
+      },
+    });
+  });
+
+  it('includes pay token properties if pay token selected', async () => {
+    useTransactionPayTokenMock.mockReturnValue({
+      payToken: PAY_TOKEN_MOCK,
+      setPayToken: noop,
+    } as ReturnType<typeof useTransactionPayToken>);
+
+    runHook();
+
+    await act(async () => noop());
+
+    expect(updateConfirmationMetricMock).toHaveBeenCalledWith({
+      id: transactionIdMock,
+      params: {
+        properties: expect.objectContaining({
+          mm_pay: true,
+          mm_pay_token_selected: PAY_TOKEN_MOCK.symbol,
+          mm_pay_chain_selected: CHAIN_ID_MOCK,
+          mm_pay_token_presented: PAY_TOKEN_MOCK.symbol,
+          mm_pay_chain_presented: PAY_TOKEN_MOCK.chainId,
+        }),
+        sensitiveProperties: {},
+      },
+    });
+  });
+
+  it('includes step properties based on number of quotes', async () => {
+    useTransactionPayTokenMock.mockReturnValue({
+      payToken: PAY_TOKEN_MOCK,
+      setPayToken: noop,
+    } as ReturnType<typeof useTransactionPayToken>);
+
+    selectTransactionBridgeQuotesByIdMock.mockReturnValue([
+      {} as never,
+      {} as never,
+      {} as never,
+    ] as never[]);
+
+    runHook();
+
+    await act(async () => noop());
+
+    expect(updateConfirmationMetricMock).toHaveBeenCalledWith({
+      id: transactionIdMock,
+      params: {
+        properties: expect.objectContaining({
+          mm_pay_transaction_step_total: 4,
+          mm_pay_transaction_step: 4,
+        }),
+        sensitiveProperties: {},
+      },
+    });
+  });
+
+  it('includes perps deposit properties', async () => {
+    useTransactionPayTokenMock.mockReturnValue({
+      payToken: PAY_TOKEN_MOCK,
+      setPayToken: noop,
+    } as ReturnType<typeof useTransactionPayToken>);
+
+    selectTransactionBridgeQuotesByIdMock.mockReturnValue([
+      {} as never,
+      {} as never,
+      {} as never,
+    ] as never[]);
+
+    runHook();
+
+    await act(async () => noop());
+
+    expect(updateConfirmationMetricMock).toHaveBeenCalledWith({
+      id: transactionIdMock,
+      params: {
+        properties: expect.objectContaining({
+          mm_pay_use_case: 'perps_deposit',
+          simulation_sending_assets_total_value: TOKEN_AMOUNT_MOCK,
+        }),
+        sensitiveProperties: {},
+      },
+    });
+  });
+
+  it('includes dust property for non-native quote', async () => {
+    useTransactionPayTokenMock.mockReturnValue({
+      payToken: PAY_TOKEN_MOCK,
+      setPayToken: noop,
+    } as ReturnType<typeof useTransactionPayToken>);
+
+    selectTransactionBridgeQuotesByIdMock.mockReturnValue([
+      {
+        quote: {
+          minDestTokenAmount: '2000000',
+        },
+        request: {
+          targetAmountMinimum: '1500000',
+          targetTokenAddress: NATIVE_TOKEN_ADDRESS,
+        },
+      },
+      {
+        quote: {
+          minDestTokenAmount: '3000000',
+        },
+        request: {
+          targetAmountMinimum: '2500000',
+          targetTokenAddress: tokenAddress1Mock,
+        },
+      },
+    ] as never[]);
+
+    runHook();
+
+    await act(async () => noop());
+
+    expect(updateConfirmationMetricMock).toHaveBeenCalledWith({
+      id: transactionIdMock,
+      params: {
+        properties: expect.objectContaining({
+          mm_pay_dust_usd: '0.5',
+        }),
+        sensitiveProperties: {},
+      },
+    });
+  });
+
+  it('includes token size property', async () => {
+    useTransactionPayTokenMock.mockReturnValue({
+      payToken: PAY_TOKEN_MOCK,
+      setPayToken: noop,
+    } as ReturnType<typeof useTransactionPayToken>);
+
+    runHook();
+
+    await act(async () => noop());
+
+    expect(updateConfirmationMetricMock).toHaveBeenCalledWith({
+      id: transactionIdMock,
+      params: {
+        properties: expect.objectContaining({
+          mm_pay_payment_token_list_size: 5,
+        }),
+        sensitiveProperties: {},
+      },
+    });
+  });
+});