feat(perps): add event tracking for cancel trade with token flow

Author: michalconsensys

app/components/UI/Perps/hooks/usePerpsOrderDepositTracking.test.ts

@@ -8,6 +8,7 @@ import { usePerpsOrderDepositTracking } from './usePerpsOrderDepositTracking';
 
 const mockShowToast = jest.fn();
 const mockSubscribe = jest.fn();
+const mockTrack = jest.fn();
 
 jest.mock('./usePerpsToasts', () => ({
   __esModule: true,
@@ -48,6 +49,24 @@ jest.mock('@metamask/perps-controller', () => ({
   PERPS_CONSTANTS: {
     DepositTakingLongerToastDelayMs: 100,
   },
+  PERPS_EVENT_PROPERTY: {
+    SCREEN_TYPE: 'screen_type',
+    INTERACTION_TYPE: 'interaction_type',
+  },
+  PERPS_EVENT_VALUE: {
+    SCREEN_TYPE: {
+      CANCEL_TRADE_WITH_TOKEN_TOAST: 'cancel_trade_with_token_toast',
+    },
+    INTERACTION_TYPE: {
+      CANCEL_TRADE_WITH_TOKEN: 'cancel_trade_with_token',
+    },
+  },
+}));
+
+jest.mock('./usePerpsEventTracking', () => ({
+  usePerpsEventTracking: () => ({
+    track: mockTrack,
+  }),
 }));
 
 describe('usePerpsOrderDepositTracking', () => {
@@ -188,6 +207,13 @@ describe('usePerpsOrderDepositTracking', () => {
       closeButtonOptions?.closeButtonOptions?.onPress?.();
     });
 
+    expect(mockTrack).toHaveBeenCalledWith(
+      expect.objectContaining({ category: 'Perp UI Interaction' }),
+      expect.objectContaining({
+        interaction_type: 'cancel_trade_with_token',
+      }),
+    );
+
     const statusUpdatedHandler = handlers.statusUpdated;
     expect(statusUpdatedHandler).toBeDefined();
     act(() => {
@@ -260,6 +286,13 @@ describe('usePerpsOrderDepositTracking', () => {
       jest.advanceTimersByTime(100);
     });
 
+    expect(mockTrack).toHaveBeenCalledWith(
+      expect.objectContaining({ category: 'Perp Screen Viewed' }),
+      expect.objectContaining({
+        screen_type: 'cancel_trade_with_token_toast',
+      }),
+    );
+
     expect(mockShowToast).toHaveBeenCalled();
     expect(mockShowToast.mock.calls[0][0]).toMatchObject({
       closeButtonOptions: expect.any(Object),

app/components/UI/Perps/hooks/usePerpsOrderDepositTracking.ts

@@ -6,8 +6,14 @@ import {
 import { useCallback } from 'react';
 import Engine from '../../../../core/Engine';
 import { strings } from '../../../../../locales/i18n';
-import { PERPS_CONSTANTS } from '@metamask/perps-controller';
+import {
+  PERPS_CONSTANTS,
+  PERPS_EVENT_PROPERTY,
+  PERPS_EVENT_VALUE,
+} from '@metamask/perps-controller';
 import usePerpsToasts from './usePerpsToasts';
+import { MetaMetricsEvents } from '../../../../core/Analytics';
+import { usePerpsEventTracking } from './usePerpsEventTracking';
 
 /**
  * Hook to track deposit status for Perps order view
@@ -23,6 +29,7 @@ import usePerpsToasts from './usePerpsToasts';
  */
 export const usePerpsOrderDepositTracking = () => {
   const { showToast, PerpsToastOptions } = usePerpsToasts();
+  const { track } = usePerpsEventTracking();
 
   const showProgressToast = useCallback(
     (transactionId: string) => {
@@ -57,11 +64,23 @@ export const usePerpsOrderDepositTracking = () => {
         PerpsToastOptions.accountManagement.deposit.takingLonger;
       const cancelTradeOnPress = () => {
         cancelTradeRequested = true;
+
+        track(MetaMetricsEvents.PERPS_UI_INTERACTION, {
+          [PERPS_EVENT_PROPERTY.INTERACTION_TYPE]:
+            PERPS_EVENT_VALUE.INTERACTION_TYPE.CANCEL_TRADE_WITH_TOKEN,
+        });
+
         // Replace current toast with "Trade canceled" (don't close first to avoid race)
         showToast(PerpsToastOptions.accountManagement.deposit.tradeCanceled);
       };
       const depositLongerTimeoutId = setTimeout(() => {
         const baseClose = takingLongerToastOptions.closeButtonOptions;
+
+        track(MetaMetricsEvents.PERPS_SCREEN_VIEWED, {
+          [PERPS_EVENT_PROPERTY.SCREEN_TYPE]:
+            PERPS_EVENT_VALUE.SCREEN_TYPE.CANCEL_TRADE_WITH_TOKEN_TOAST,
+        });
+
         showToast({
           ...takingLongerToastOptions,
           closeButtonOptions: baseClose
@@ -111,7 +130,12 @@ export const usePerpsOrderDepositTracking = () => {
         handleTransactionStatusUpdated,
       );
     },
-    [showToast, showProgressToast, PerpsToastOptions.accountManagement.deposit],
+    [
+      showToast,
+      showProgressToast,
+      PerpsToastOptions.accountManagement.deposit,
+      track,
+    ],
   );
 
   return {

app/controllers/perps/constants/eventNames.ts

@@ -305,6 +305,8 @@ export const PERPS_EVENT_VALUE = {
     // Pay-with interactions
     PAYMENT_TOKEN_SELECTOR: 'payment_token_selector',
     PAYMENT_METHOD_CHANGED: 'payment_method_changed',
+    // Deposit + order (pay-with token) cancel
+    CANCEL_TRADE_WITH_TOKEN: 'cancel_trade_with_token',
   },
   ACTION_TYPE: {
     START_TRADING: 'start_trading',
@@ -376,6 +378,8 @@ export const PERPS_EVENT_VALUE = {
     ADD_MARGIN: 'add_margin',
     REMOVE_MARGIN: 'remove_margin',
     GEO_BLOCK_NOTIF: 'geo_block_notif',
+    // Deposit + order (pay-with token) cancel toast
+    CANCEL_TRADE_WITH_TOKEN_TOAST: 'cancel_trade_with_token_toast',
   },
   SETTING_TYPE: {
     LEVERAGE: 'leverage',