chore(runway): cherry-pick fix: cp-7.63.0 Fix mm_pay_quote_* metrics (#25306)

- fix: cp-7.63.0 Fix `mm_pay_quote_*` metrics (#25159)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

This PR aims to fix `mm_pay_quote_requested` and `mm_pay_quote_loaded`
on certain `Transaction*` events.

After this PR metrics will be setlled as noted below:

1. On `TransactionAdded, both `mm_pay_quote_requested` and
`mm_pay_quote_loaded` are initialized to `false`.
2. If no quote is requested and the user rejects the transaction, both
values stay `false`.
3. If the user views the quote and then rejects the transaction, both
values are true in the `TransactionRejected` event.
4. If the user requests a quote but it hasn’t finished loading before
they reject, `mm_pay_quote_requested` is true and `mm_pay_quote_loaded`
is false.
5. If the user requests a quote, let it load then change the amount to
get new quote but leave it while loading, both values remain `true` as
they request and load before.
6. If the user views the quote and approves the transaction, both values
are true in the finalized `TransactionConfirmed` event.

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry:

## **Related issues**

Fixes: #25112

## **Manual testing steps**

```gherkin
Feature: my feature name

  Scenario: user [verb for user action]
    Given [describe expected initial app state]

    When user [verb for user action]
    Then [describe expected outcome]
```

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **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]
> Aligns `mm_pay_quote_*` metrics and centralizes source-amount logic.
> 
> - New `useTransactionPayHasSourceAmount` hook (with tests) to detect
when quotes are required; integrated into `custom-amount-info` and
`useTransactionCustomAmount`
> - `useTransactionCustomAmount` now sets `mm_pay_quote_requested` when
updating amount only if a source amount exists
> - `useTransactionPayMetrics` refactored to read
`mm_pay_quote_requested` from stored metrics and set
`mm_pay_quote_loaded` via an internal ref once quotes are present;
removes dependency on quote-loading flag
> - Expanded/updated tests for metrics, custom amount behavior, and
quote flags
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
e1b4bd1. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->


[5f3d172](5f3d172)

Co-authored-by: OGPoyraz <omergoktugpoyraz@gmail.com>

Author: runway-github[bot]

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

@@ -28,8 +28,8 @@ import {
   useIsTransactionPayLoading,
   useTransactionPayQuotes,
   useTransactionPayRequiredTokens,
-  useTransactionPaySourceAmounts,
 } from '../../../hooks/pay/useTransactionPayData';
+import { useTransactionPayHasSourceAmount } from '../../../hooks/pay/useTransactionPayHasSourceAmount';
 import { useTransactionPayMetrics } from '../../../hooks/pay/useTransactionPayMetrics';
 import { useTransactionPayAvailableTokens } from '../../../hooks/pay/useTransactionPayAvailableTokens';
 import Text, {
@@ -290,16 +290,7 @@ 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,
-    ),
-  );
+  const hasSourceAmount = useTransactionPayHasSourceAmount();
 
   return (
     !isKeyboardVisible &&

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

@@ -0,0 +1,119 @@
+import {
+  TransactionPayRequiredToken,
+  TransactionPaySourceAmount,
+} from '@metamask/transaction-pay-controller';
+import { renderHookWithProvider } from '../../../../../util/test/renderWithProvider';
+import { useTransactionPayHasSourceAmount } from './useTransactionPayHasSourceAmount';
+import { merge } from 'lodash';
+import {
+  simpleSendTransactionControllerMock,
+  transactionIdMock,
+} from '../../__mocks__/controllers/transaction-controller-mock';
+import { transactionApprovalControllerMock } from '../../__mocks__/controllers/approval-controller-mock';
+import { Hex } from '@metamask/utils';
+import {
+  ConfirmationContextParams,
+  useConfirmationContext,
+} from '../../context/confirmation-context';
+
+jest.mock('../../context/confirmation-context');
+
+const TOKEN_ADDRESS_MOCK = '0x123' as Hex;
+const OTHER_TOKEN_ADDRESS_MOCK = '0x456' as Hex;
+
+function createSourceAmount(
+  targetTokenAddress: Hex,
+): TransactionPaySourceAmount {
+  return {
+    targetTokenAddress,
+  } as unknown as TransactionPaySourceAmount;
+}
+
+function createRequiredToken(
+  address: Hex,
+  skipIfBalance: boolean,
+): TransactionPayRequiredToken {
+  return {
+    address,
+    skipIfBalance,
+  } as unknown as TransactionPayRequiredToken;
+}
+
+function runHook({
+  sourceAmounts = [],
+  tokens = [],
+}: {
+  sourceAmounts?: TransactionPaySourceAmount[];
+  tokens?: TransactionPayRequiredToken[];
+} = {}) {
+  const state = merge(
+    {},
+    simpleSendTransactionControllerMock,
+    transactionApprovalControllerMock,
+    {
+      engine: {
+        backgroundState: {
+          TransactionPayController: {
+            transactionData: {
+              [transactionIdMock]: {
+                isLoading: false,
+                sourceAmounts,
+                tokens,
+              },
+            },
+          },
+        },
+      },
+    },
+  );
+
+  return renderHookWithProvider(useTransactionPayHasSourceAmount, { state });
+}
+
+describe('useTransactionPayHasSourceAmount', () => {
+  const useConfirmationContextMock = jest.mocked(useConfirmationContext);
+
+  beforeEach(() => {
+    jest.resetAllMocks();
+
+    useConfirmationContextMock.mockReturnValue({
+      isTransactionDataUpdating: false,
+    } as ConfirmationContextParams);
+  });
+
+  it('returns true when there are non-optional source amounts', () => {
+    const { result } = runHook({
+      sourceAmounts: [createSourceAmount(TOKEN_ADDRESS_MOCK)],
+      tokens: [createRequiredToken(TOKEN_ADDRESS_MOCK, false)],
+    });
+
+    expect(result.current).toBe(true);
+  });
+
+  it('returns false when source amounts are empty', () => {
+    const { result } = runHook({
+      sourceAmounts: [],
+      tokens: [createRequiredToken(TOKEN_ADDRESS_MOCK, false)],
+    });
+
+    expect(result.current).toBe(false);
+  });
+
+  it('returns false when all source amounts are optional', () => {
+    const { result } = runHook({
+      sourceAmounts: [createSourceAmount(TOKEN_ADDRESS_MOCK)],
+      tokens: [createRequiredToken(TOKEN_ADDRESS_MOCK, true)],
+    });
+
+    expect(result.current).toBe(false);
+  });
+
+  it('returns false when source amounts do not match required tokens', () => {
+    const { result } = runHook({
+      sourceAmounts: [createSourceAmount(OTHER_TOKEN_ADDRESS_MOCK)],
+      tokens: [createRequiredToken(TOKEN_ADDRESS_MOCK, false)],
+    });
+
+    expect(result.current).toBe(false);
+  });
+});

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

@@ -0,0 +1,26 @@
+import { useMemo } from 'react';
+import {
+  useTransactionPayRequiredTokens,
+  useTransactionPaySourceAmounts,
+} from './useTransactionPayData';
+
+/**
+ * Returns whether there are non-optional source amounts that require a quote.
+ * This is true when the user needs to bridge/swap tokens to complete the transaction.
+ */
+export function useTransactionPayHasSourceAmount() {
+  const sourceAmounts = useTransactionPaySourceAmounts();
+  const requiredTokens = useTransactionPayRequiredTokens();
+
+  return useMemo(
+    () =>
+      sourceAmounts?.some((a) =>
+        requiredTokens.some(
+          (rt) =>
+            rt.address.toLowerCase() === a.targetTokenAddress.toLowerCase() &&
+            !rt.skipIfBalance,
+        ),
+      ) ?? false,
+    [sourceAmounts, requiredTokens],
+  );
+}

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

@@ -21,7 +21,6 @@ import {
 } from '@metamask/transaction-pay-controller';
 import { Json } from '@metamask/utils';
 import {
-  useIsTransactionPayQuoteLoading,
   useTransactionPayQuotes,
   useTransactionPayRequiredTokens,
   useTransactionPayTotals,
@@ -37,9 +36,13 @@ jest.mock('../pay/useTransactionPayData');
 jest.mock('./useTransactionPayAvailableTokens');
 jest.mock('../send/useAccountTokens');
 
+const mockSelectConfirmationMetricsById = jest.fn();
+
 jest.mock('../../../../../core/redux/slices/confirmationMetrics', () => ({
   ...jest.requireActual('../../../../../core/redux/slices/confirmationMetrics'),
   updateConfirmationMetric: jest.fn(),
+  selectConfirmationMetricsById: (...args: unknown[]) =>
+    mockSelectConfirmationMetricsById(...args),
 }));
 
 const CHAIN_ID_MOCK = '0x1';
@@ -89,10 +92,6 @@ describe('useTransactionPayMetrics', () => {
     useTransactionPayAvailableTokens,
   );
 
-  const useIsTransactionPayQuoteLoadingMock = jest.mocked(
-    useIsTransactionPayQuoteLoading,
-  );
-
   const useAccountTokensMock = jest.mocked(useAccountTokens);
 
   beforeEach(() => {
@@ -114,8 +113,8 @@ describe('useTransactionPayMetrics', () => {
     } as never);
 
     useTransactionPayQuotesMock.mockReturnValue([]);
-    useIsTransactionPayQuoteLoadingMock.mockReturnValue(false);
     useAccountTokensMock.mockReturnValue([]);
+    mockSelectConfirmationMetricsById.mockReturnValue(undefined);
 
     useTransactionPayAvailableTokensMock.mockReturnValue([
       {},
@@ -343,12 +342,14 @@ describe('useTransactionPayMetrics', () => {
       });
     });
 
-    it('is true when loading starts', async () => {
+    it('is true when stored in metrics', async () => {
       useTransactionPayTokenMock.mockReturnValue({
         payToken: PAY_TOKEN_MOCK,
         setPayToken: noop,
       } as ReturnType<typeof useTransactionPayToken>);
-      useIsTransactionPayQuoteLoadingMock.mockReturnValue(true);
+      mockSelectConfirmationMetricsById.mockReturnValue({
+        properties: { mm_pay_quote_requested: true },
+      });
 
       runHook();
 
@@ -389,29 +390,6 @@ describe('useTransactionPayMetrics', () => {
       });
     });
 
-    it('is true when has quotes even while loading new quotes', async () => {
-      useTransactionPayTokenMock.mockReturnValue({
-        payToken: PAY_TOKEN_MOCK,
-        setPayToken: noop,
-      } as ReturnType<typeof useTransactionPayToken>);
-      useIsTransactionPayQuoteLoadingMock.mockReturnValue(true);
-      useTransactionPayQuotesMock.mockReturnValue([QUOTE_MOCK]);
-
-      runHook();
-
-      await act(async () => noop());
-
-      expect(updateConfirmationMetricMock).toHaveBeenCalledWith({
-        id: transactionIdMock,
-        params: {
-          properties: expect.objectContaining({
-            mm_pay_quote_loaded: true,
-          }),
-          sensitiveProperties: {},
-        },
-      });
-    });
-
     it('is false when no quotes', async () => {
       useTransactionPayTokenMock.mockReturnValue({
         payToken: PAY_TOKEN_MOCK,

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

@@ -1,6 +1,10 @@
 import { useEffect, useMemo, useRef } from 'react';
-import { useDispatch } from 'react-redux';
-import { updateConfirmationMetric } from '../../../../../core/redux/slices/confirmationMetrics';
+import { useDispatch, useSelector } from 'react-redux';
+import {
+  selectConfirmationMetricsById,
+  updateConfirmationMetric,
+} from '../../../../../core/redux/slices/confirmationMetrics';
+import { RootState } from '../../../../../reducers';
 import { useTransactionMetadataRequest } from '../transactions/useTransactionMetadataRequest';
 import { useDeepMemo } from '../useDeepMemo';
 import { Hex, Json, isCaipChainId, isHexString } from '@metamask/utils';
@@ -10,7 +14,6 @@ import { useTransactionPayToken } from './useTransactionPayToken';
 import { BridgeToken } from '../../../../UI/Bridge/types';
 import { hasTransactionType } from '../../utils/transaction';
 import {
-  useIsTransactionPayQuoteLoading,
   useTransactionPayQuotes,
   useTransactionPayRequiredTokens,
   useTransactionPayTotals,
@@ -28,22 +31,26 @@ export function useTransactionPayMetrics() {
   const requiredTokens = useTransactionPayRequiredTokens();
   const highestBalanceChainId = useHighestBalanceCaipChainId();
   const automaticPayToken = useRef<BridgeToken>();
-  const hasRequestedQuoteRef = useRef(false);
+  const hasLoadedQuoteRef = useRef(false);
   const quotes = useTransactionPayQuotes();
-  const isQuotesLoading = useIsTransactionPayQuoteLoading();
   const totals = useTransactionPayTotals();
   const tokens = useTransactionPayAvailableTokens();
 
-  if (isQuotesLoading && !hasRequestedQuoteRef.current) {
-    hasRequestedQuoteRef.current = true;
+  const transactionId = transactionMeta?.id ?? '';
+  const storedMetrics = useSelector((state: RootState) =>
+    selectConfirmationMetricsById(state, transactionId),
+  );
+
+  const hasQuotes = (quotes?.length ?? 0) > 0;
+
+  if (hasQuotes && !hasLoadedQuoteRef.current) {
+    hasLoadedQuoteRef.current = true;
   }
 
   const availableTokens = useMemo(
     () => tokens.filter((t) => !t.disabled),
     [tokens],
   );
-
-  const transactionId = transactionMeta?.id ?? '';
   const { chainId, type } = transactionMeta ?? {};
   const primaryRequiredToken = requiredTokens.find((t) => !t.skipIfBalance);
   const sendingValue = Number(primaryRequiredToken?.amountHuman ?? '0');
@@ -55,8 +62,6 @@ export function useTransactionPayMetrics() {
   const properties: Json = {};
   const sensitiveProperties: Json = {};
 
-  const hasQuotes = (quotes?.length ?? 0) > 0;
-
   if (payToken) {
     properties.mm_pay = true;
     properties.mm_pay_token_selected = payToken.symbol;
@@ -74,8 +79,9 @@ export function useTransactionPayMetrics() {
 
     properties.mm_pay_payment_token_list_size = availableTokens.length;
 
-    properties.mm_pay_quote_requested = hasRequestedQuoteRef.current;
-    properties.mm_pay_quote_loaded = hasQuotes;
+    properties.mm_pay_quote_requested =
+      (storedMetrics?.properties?.mm_pay_quote_requested as boolean) ?? false;
+    properties.mm_pay_quote_loaded = hasLoadedQuoteRef.current;
     properties.mm_pay_chain_highest_balance_caip =
       highestBalanceChainId ?? null;
   }