feat(swaps): add post-trade modal analytics (MetaMask#31699)

bfullam · web-flow · commit 8276fc815c57 · 2026-06-16T10:41:29.000Z
## **Description**   Adds analytics coverage for the unified swaps/bridge post-trade status modal so the funnel can measure when users see the modal, dismiss it, or click a modal CTA after a trade. This adds MetaMetrics event definitions for viewed, dismissed, and button clicked events; normalizes post-trade statuses to `in_progress`, `complete`, and `failed`; includes shared swap/bridge token and chain properties; records modal open duration; and prevents CTA interactions from also being counted as dismissals. It also tracks the merged post-trade trending-token suggestion CTA as `trending_token` with the clicked token metadata. ## **Changelog**   CHANGELOG entry: null ## **Related issues**  Refs: [SWAPS-4569](https://consensyssoftware.atlassian.net/browse/SWAPS-4569) ## **Manual testing steps**  N/A - analytics-only change covered by focused unit tests. ## **Screenshots/Recordings**   ### **Before** N/A ### **After** N/A ## **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. #### Performance checks (if applicable) - [x] I've tested on Android - Ideally on a mid-range device; emulator is acceptable - [x] I've tested with a power user scenario - Use these [power-user SRPs](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/edit-v2/401401446401?draftShareId=9d77e1e1-4bdc-4be1-9ebb-ccd916988d93) to import wallets with many accounts and tokens - [x] I've instrumented key operations with Sentry traces for production performance metrics - See [`trace()`](/app/util/trace.ts) for usage and [`addToken`](/app/components/Views/AddAsset/components/AddCustomToken/AddCustomToken.tsx#L274) for an example For performance guidelines and tooling, see the [Performance Guide](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/400085549067/Performance+Guide+for+Engineers). ## **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.  [SWAPS-4569]: https://consensyssoftware.atlassian.net/browse/SWAPS-4569?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ
diff --git a/app/components/UI/Bridge/components/PostTradeBottomSheet/PostTradeBottomSheet.analytics.ts b/app/components/UI/Bridge/components/PostTradeBottomSheet/PostTradeBottomSheet.analytics.ts
@@ -0,0 +1,43 @@
+import { getDecimalChainId } from '../../../../../util/networks';
+import {
+  PostTradeBottomSheetParams,
+  PostTradeStatus,
+} from './PostTradeBottomSheet.types';
+
+export type PostTradeAnalyticsStatus = 'in_progress' | 'complete' | 'failed';
+export type PostTradeAnalyticsCta =
+  | 'view_activity'
+  | 'try_again'
+  | 'trending_token';
+
+export const getAnalyticsStatus = (
+  status: PostTradeStatus,
+): PostTradeAnalyticsStatus => {
+  if (status === PostTradeStatus.Success) {
+    return 'complete';
+  }
+
+  if (status === PostTradeStatus.Failed) {
+    return 'failed';
+  }
+
+  return 'in_progress';
+};
+
+export const getPostTradeSharedAnalyticsProperties = ({
+  sourceToken,
+  destToken,
+}: PostTradeBottomSheetParams) => ({
+  swap_type:
+    sourceToken?.chainId &&
+    destToken?.chainId &&
+    sourceToken.chainId !== destToken.chainId
+      ? 'crosschain'
+      : 'single_chain',
+  chain_id_source: getDecimalChainId(sourceToken?.chainId),
+  chain_id_destination: getDecimalChainId(destToken?.chainId),
+  token_symbol_source: sourceToken?.symbol,
+  token_symbol_destination: destToken?.symbol,
+  token_address_source: sourceToken?.address,
+  token_address_destination: destToken?.address,
+});
diff --git a/app/components/UI/Bridge/components/PostTradeBottomSheet/PostTradeBottomSheet.test.ts b/app/components/UI/Bridge/components/PostTradeBottomSheet/PostTradeBottomSheet.test.ts
@@ -1,7 +1,7 @@
 import React from 'react';
 import { fireEvent, render } from '@testing-library/react-native';
 import { PostTradeBottomSheet } from './index';
-import Routes from '../../../../../constants/navigation/Routes';
+import { MetaMetricsEvents } from '../../../../../core/Analytics';
 import {
   getPostTradeSuggestionPillTestId,
   PostTradeBottomSheetTestIds,
@@ -12,6 +12,13 @@ const mockDispatch = jest.fn();
 const mockNavigate = jest.fn();
 const mockResetState = jest.fn();
 const mockUpdateQuoteParams = jest.fn();
+const mockTrackEvent = jest.fn();
+const mockCreateEventBuilder = jest.fn((event) => ({
+  addProperties: (properties: Record<string, unknown>) => ({
+    build: () => ({ event, properties }),
+  }),
+}));
+let mockNow = 1000;
 let mockPostTradeStatus = PostTradeStatus.Failed;
 let mockPostTradeTrendingTokens = {
   tokens: [] as unknown[],
@@ -36,8 +43,23 @@ let mockParams = {
     decimals: 6,
   },
 };
+const expectedSharedProperties = {
+  swap_type: 'single_chain',
+  chain_id_source: '1',
+  chain_id_destination: '1',
+  token_symbol_source: 'ETH',
+  token_symbol_destination: 'USDC',
+  token_address_source: '0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee',
+  token_address_destination: '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48',
+};
 
 jest.mock('react-redux', () => ({ useDispatch: () => mockDispatch }));
+jest.mock('../../../../hooks/useAnalytics/useAnalytics', () => ({
+  useAnalytics: () => ({
+    trackEvent: mockTrackEvent,
+    createEventBuilder: mockCreateEventBuilder,
+  }),
+}));
 jest.mock('../../hooks/useBridgeQuoteRequest', () => ({
   useBridgeQuoteRequest: () => mockUpdateQuoteParams,
 }));
@@ -62,6 +84,8 @@ jest.mock('./usePostTradeTrendingTokens', () => ({
 
 beforeEach(() => {
   jest.clearAllMocks();
+  mockNow = 1000;
+  jest.spyOn(Date, 'now').mockImplementation(() => mockNow);
   mockPostTradeStatus = PostTradeStatus.Failed;
   mockPostTradeTrendingTokens = {
     tokens: [],
@@ -88,8 +112,61 @@ beforeEach(() => {
   };
 });
 
+afterEach(() => {
+  jest.restoreAllMocks();
+});
+
+const getTrackedEvent = (event: unknown) =>
+  mockTrackEvent.mock.calls.find(
+    ([trackedEvent]) => trackedEvent.event === event,
+  )?.[0];
+
 describe('PostTradeBottomSheet', () => {
-  it('runs failed-state actions', () => {
+  it('tracks viewed with normalized status and trade properties', () => {
+    mockPostTradeStatus = PostTradeStatus.Success;
+    mockParams = {
+      ...mockParams,
+      status: PostTradeStatus.Success,
+      destToken: {
+        ...mockParams.destToken,
+        chainId: '0x89',
+      },
+    };
+
+    render(React.createElement(PostTradeBottomSheet));
+
+    expect(
+      getTrackedEvent(MetaMetricsEvents.SWAPBRIDGE_STATUS_MODAL_VIEWED),
+    ).toEqual({
+      event: MetaMetricsEvents.SWAPBRIDGE_STATUS_MODAL_VIEWED,
+      properties: {
+        initial_status: 'complete',
+        ...expectedSharedProperties,
+        swap_type: 'crosschain',
+        chain_id_destination: '137',
+      },
+    });
+  });
+
+  it('tracks dismissed when the modal closes', () => {
+    const { getByTestId } = render(React.createElement(PostTradeBottomSheet));
+
+    mockNow = 1250;
+    fireEvent.press(getByTestId(PostTradeBottomSheetTestIds.CLOSE_BUTTON));
+
+    expect(
+      getTrackedEvent(MetaMetricsEvents.SWAPBRIDGE_STATUS_MODAL_DISMISSED),
+    ).toEqual({
+      event: MetaMetricsEvents.SWAPBRIDGE_STATUS_MODAL_DISMISSED,
+      properties: {
+        status_at_dismissal: 'failed',
+        time_modal_open_ms: 250,
+        ...expectedSharedProperties,
+      },
+    });
+  });
+
+  it('tracks CTA clicks without double-counting dismissal', () => {
     const { getByTestId, queryByTestId } = render(
       React.createElement(PostTradeBottomSheet),
     );
@@ -98,12 +175,23 @@ describe('PostTradeBottomSheet', () => {
       queryByTestId(PostTradeBottomSheetTestIds.SUGGESTIONS_SECTION),
     ).toBeNull();
 
+    mockNow = 1400;
     fireEvent.press(getByTestId(PostTradeBottomSheetTestIds.TRY_AGAIN_BUTTON));
-    fireEvent.press(
-      getByTestId(PostTradeBottomSheetTestIds.VIEW_ACTIVITY_BUTTON),
-    );
 
-    expect(mockNavigate).toHaveBeenCalledWith(Routes.TRANSACTIONS_VIEW);
+    expect(
+      getTrackedEvent(MetaMetricsEvents.SWAPBRIDGE_STATUS_MODAL_BUTTON_CLICKED),
+    ).toEqual({
+      event: MetaMetricsEvents.SWAPBRIDGE_STATUS_MODAL_BUTTON_CLICKED,
+      properties: {
+        status_at_click: 'failed',
+        cta_clicked: 'try_again',
+        time_modal_open_ms: 400,
+        ...expectedSharedProperties,
+      },
+    });
+    expect(
+      getTrackedEvent(MetaMetricsEvents.SWAPBRIDGE_STATUS_MODAL_DISMISSED),
+    ).toBeUndefined();
     expect(mockResetState).toHaveBeenCalled();
     expect(mockUpdateQuoteParams).toHaveBeenCalled();
     expect(mockDispatch).toHaveBeenCalledWith(
@@ -150,10 +238,23 @@ describe('PostTradeBottomSheet', () => {
 
     const { getByTestId } = render(React.createElement(PostTradeBottomSheet));
 
+    mockNow = 1500;
     fireEvent.press(
       getByTestId(getPostTradeSuggestionPillTestId(suggestedToken.assetId)),
     );
 
+    expect(
+      getTrackedEvent(MetaMetricsEvents.SWAPBRIDGE_STATUS_MODAL_BUTTON_CLICKED),
+    ).toMatchObject({
+      properties: {
+        status_at_click: 'complete',
+        cta_clicked: 'trending_token',
+        time_modal_open_ms: 500,
+        token_symbol_clicked: 'UNI',
+        token_address_clicked: '0x1111111111111111111111111111111111111111',
+        token_clicked_is_imported: false,
+      },
+    });
     expect(mockResetState).toHaveBeenCalled();
     expect(mockDispatch).toHaveBeenCalledWith(
       expect.objectContaining({
diff --git a/app/components/UI/Bridge/components/PostTradeBottomSheet/index.tsx b/app/components/UI/Bridge/components/PostTradeBottomSheet/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { useDispatch } from 'react-redux';
 import { useNavigation } from '@react-navigation/native';
 import type { TrendingAsset } from '@metamask/assets-controllers';
@@ -55,6 +55,13 @@ import {
   hidePostTradeNotificationSurface,
   showPostTradeNotificationSurface,
 } from '../../utils/postTradeNotifications';
+import { useAnalytics } from '../../../../hooks/useAnalytics/useAnalytics';
+import { MetaMetricsEvents } from '../../../../../core/Analytics';
+import {
+  getAnalyticsStatus,
+  getPostTradeSharedAnalyticsProperties,
+  type PostTradeAnalyticsCta,
+} from './PostTradeBottomSheet.analytics';
 
 export const getTradeSubtitle = ({
   sourceAmount,
@@ -124,13 +131,21 @@ export const PostTradeBottomSheet = () => {
   const dispatch = useDispatch();
   const sheetRef = useRef<BottomSheetRef>(null);
   const hasRefreshedBalancesRef = useRef(false);
+  const hasTrackedViewedRef = useRef(false);
+  const modalOpenedAtRef = useRef(Date.now());
+  const shouldSkipDismissedTrackingRef = useRef(false);
   const { styles } = useStyles(styleSheet, {});
   const params = useParams<PostTradeBottomSheetParams>();
   const updateQuoteParams = useBridgeQuoteRequest();
+  const { trackEvent, createEventBuilder } = useAnalytics();
   const isBridge =
     params.sourceToken?.chainId &&
     params.destToken?.chainId &&
     params.sourceToken.chainId !== params.destToken.chainId;
+  const sharedAnalyticsProperties = useMemo(
+    () => getPostTradeSharedAnalyticsProperties(params),
+    [params],
+  );
 
   const status = usePostTradeTxStatus({
     initialStatus: params.status,
@@ -139,6 +154,11 @@ export const PostTradeBottomSheet = () => {
     transactionHash: params.transactionHash,
   });
 
+  const getTimeModalOpenMs = useCallback(
+    () => Date.now() - modalOpenedAtRef.current,
+    [],
+  );
+
   useEffect(() => {
     showPostTradeNotificationSurface();
 
@@ -147,6 +167,27 @@ export const PostTradeBottomSheet = () => {
     };
   }, []);
 
+  useEffect(() => {
+    if (hasTrackedViewedRef.current) {
+      return;
+    }
+
+    hasTrackedViewedRef.current = true;
+    trackEvent(
+      createEventBuilder(MetaMetricsEvents.SWAPBRIDGE_STATUS_MODAL_VIEWED)
+        .addProperties({
+          initial_status: getAnalyticsStatus(params.status),
+          ...sharedAnalyticsProperties,
+        })
+        .build(),
+    );
+  }, [
+    createEventBuilder,
+    params.status,
+    sharedAnalyticsProperties,
+    trackEvent,
+  ]);
+
   useEffect(() => {
     const isTerminalStatus =
       status === PostTradeStatus.Success || status === PostTradeStatus.Failed;
@@ -173,17 +214,75 @@ export const PostTradeBottomSheet = () => {
   });
   const titleType = isBridge ? 'bridge' : 'swap';
 
+  const trackButtonClicked = useCallback(
+    (
+      ctaClicked: PostTradeAnalyticsCta,
+      clickedTokenProperties?: Record<string, unknown>,
+    ) => {
+      trackEvent(
+        createEventBuilder(
+          MetaMetricsEvents.SWAPBRIDGE_STATUS_MODAL_BUTTON_CLICKED,
+        )
+          .addProperties({
+            status_at_click: getAnalyticsStatus(status),
+            cta_clicked: ctaClicked,
+            time_modal_open_ms: getTimeModalOpenMs(),
+            ...clickedTokenProperties,
+            ...sharedAnalyticsProperties,
+          })
+          .build(),
+      );
+    },
+    [
+      createEventBuilder,
+      getTimeModalOpenMs,
+      sharedAnalyticsProperties,
+      status,
+      trackEvent,
+    ],
+  );
+
+  const handleDismiss = useCallback(
+    (hasPendingAction?: boolean) => {
+      if (shouldSkipDismissedTrackingRef.current || hasPendingAction) {
+        shouldSkipDismissedTrackingRef.current = false;
+        return;
+      }
+
+      trackEvent(
+        createEventBuilder(MetaMetricsEvents.SWAPBRIDGE_STATUS_MODAL_DISMISSED)
+          .addProperties({
+            status_at_dismissal: getAnalyticsStatus(status),
+            time_modal_open_ms: getTimeModalOpenMs(),
+            ...sharedAnalyticsProperties,
+          })
+          .build(),
+      );
+    },
+    [
+      createEventBuilder,
+      getTimeModalOpenMs,
+      sharedAnalyticsProperties,
+      status,
+      trackEvent,
+    ],
+  );
+
   const handleClose = () => {
     sheetRef.current?.onCloseBottomSheet();
   };
 
   const handleViewActivity = () => {
+    trackButtonClicked('view_activity');
+    shouldSkipDismissedTrackingRef.current = true;
     sheetRef.current?.onCloseBottomSheet(() => {
       navigation.navigate(Routes.TRANSACTIONS_VIEW);
     });
   };
 
   const handleTryAgain = () => {
+    trackButtonClicked('try_again');
+    shouldSkipDismissedTrackingRef.current = true;
     if (params.sourceToken) {
       dispatch(setSourceToken(params.sourceToken));
     }
@@ -212,6 +311,13 @@ export const PostTradeBottomSheet = () => {
       return;
     }
 
+    trackButtonClicked('trending_token', {
+      token_symbol_clicked: selectedDestToken.symbol,
+      token_address_clicked: selectedDestToken.address,
+      token_clicked_is_imported: false,
+    });
+    shouldSkipDismissedTrackingRef.current = true;
+
     if (params.sourceToken) {
       dispatch(setSourceToken(params.sourceToken));
     }
@@ -244,7 +350,11 @@ export const PostTradeBottomSheet = () => {
       : undefined;
 
   return (
-    <BottomSheet ref={sheetRef} goBack={() => navigation.goBack()}>
+    <BottomSheet
+      ref={sheetRef}
+      goBack={() => navigation.goBack()}
+      onClose={handleDismiss}
+    >
       <BottomSheetHeader
         onClose={handleClose}
         closeButtonProps={{ testID: PostTradeBottomSheetTestIds.CLOSE_BUTTON }}
diff --git a/app/core/Analytics/MetaMetrics.events.ts b/app/core/Analytics/MetaMetrics.events.ts
