chore: Cherry pick 2506358 (merge in trackEvent work)

app/actions/onboarding/index.ts

@@ -1,11 +1,11 @@
-import { IMetaMetricsEvent } from '../../core/Analytics';
+import { ITrackingEvent } from '../../core/Analytics/MetaMetrics.types';
 
 export const SAVE_EVENT = 'SAVE_EVENT';
 export const CLEAR_EVENTS = 'CLEAR_EVENTS';
 
 interface SaveEventAction {
   type: typeof SAVE_EVENT;
-  event: [IMetaMetricsEvent];
+  event: [ITrackingEvent];
 }
 
 interface ClearEventsAction {
@@ -15,7 +15,7 @@ interface ClearEventsAction {
 export type OnboardingActionTypes = SaveEventAction | ClearEventsAction;
 
 export function saveOnboardingEvent(
-  eventArgs: [IMetaMetricsEvent],
+  eventArgs: [ITrackingEvent],
 ): SaveEventAction {
   return {
     type: SAVE_EVENT,

app/component-library/components/Navigation/TabBar/TabBar.tsx

@@ -25,7 +25,7 @@ import OnboardingWizard from '../../../../components/UI/OnboardingWizard';
 
 const TabBar = ({ state, descriptors, navigation }: TabBarProps) => {
   const { colors } = useTheme();
-  const { trackEvent } = useMetrics();
+  const { trackEvent, createEventBuilder } = useMetrics();
   const { bottom: bottomInset } = useSafeAreaInsets();
   const { styles } = useStyles(styleSheet, { bottomInset });
   const chainId = useSelector(selectChainId);
@@ -73,10 +73,14 @@ const TabBar = ({ state, descriptors, navigation }: TabBarProps) => {
             navigation.navigate(Routes.MODAL.ROOT_MODAL_FLOW, {
               screen: Routes.MODAL.WALLET_ACTIONS,
             });
-            trackEvent(MetaMetricsEvents.ACTIONS_BUTTON_CLICKED, {
-              text: '',
-              chain_id: getDecimalChainId(chainId),
-            });
+            trackEvent(
+              createEventBuilder(MetaMetricsEvents.ACTIONS_BUTTON_CLICKED)
+                .addProperties({
+                  text: '',
+                  chain_id: getDecimalChainId(chainId),
+                })
+                .build(),
+            );
             break;
           case Routes.BROWSER_VIEW:
             navigation.navigate(Routes.BROWSER.HOME, {
@@ -124,7 +128,15 @@ const TabBar = ({ state, descriptors, navigation }: TabBarProps) => {
         />
       );
     },
-    [state, descriptors, navigation, colors, chainId, trackEvent],
+    [
+      state,
+      descriptors,
+      navigation,
+      colors,
+      chainId,
+      trackEvent,
+      createEventBuilder,
+    ],
   );
 
   const renderTabBarItems = useCallback(

app/components/Approvals/PermissionApproval/PermissionApproval.test.tsx

@@ -9,6 +9,7 @@ import { MetaMetricsEvents } from '../../../core/Analytics';
 import { backgroundState } from '../../../util/test/initial-root-state';
 import { render } from '@testing-library/react-native';
 import { useMetrics } from '../../../components/hooks/useMetrics';
+import { MetricsEventBuilder } from '../../../core/Analytics/MetricsEventBuilder';
 
 jest.mock('../../Views/confirmations/hooks/useApprovalRequest');
 jest.mock('../../../components/hooks/useMetrics');
@@ -68,22 +69,23 @@ const mockSelectorState = (state: any) => {
 
 const mockTrackEvent = jest.fn();
 
+(useMetrics as jest.MockedFn<typeof useMetrics>).mockReturnValue({
+  trackEvent: mockTrackEvent,
+  createEventBuilder: MetricsEventBuilder.createEventBuilder,
+  enable: jest.fn(),
+  addTraitsToUser: jest.fn(),
+  createDataDeletionTask: jest.fn(),
+  checkDataDeleteStatus: jest.fn(),
+  getDeleteRegulationCreationDate: jest.fn(),
+  getDeleteRegulationId: jest.fn(),
+  isDataRecorded: jest.fn(),
+  isEnabled: jest.fn(),
+  getMetaMetricsId: jest.fn(),
+});
+
 describe('PermissionApproval', () => {
   beforeEach(() => {
-    jest.resetAllMocks();
-    (useMetrics as jest.MockedFn<typeof useMetrics>).mockReturnValue({
-      trackEvent: mockTrackEvent,
-      createEventBuilder: jest.fn(),
-      enable: jest.fn(),
-      addTraitsToUser: jest.fn(),
-      createDataDeletionTask: jest.fn(),
-      checkDataDeleteStatus: jest.fn(),
-      getDeleteRegulationCreationDate: jest.fn(),
-      getDeleteRegulationId: jest.fn(),
-      isDataRecorded: jest.fn(),
-      isEnabled: jest.fn(),
-      getMetaMetricsId: jest.fn(),
-    });
+    jest.clearAllMocks();
   });
 
   it('navigates', async () => {
@@ -143,14 +145,17 @@ describe('PermissionApproval', () => {
 
     render(<PermissionApproval navigation={navigationMock} />);
 
-    expect(mockTrackEvent).toHaveBeenCalledTimes(1);
-    expect(mockTrackEvent).toHaveBeenCalledWith(
+    const expectedEvent = MetricsEventBuilder.createEventBuilder(
       MetaMetricsEvents.CONNECT_REQUEST_STARTED,
-      {
+    )
+      .addProperties({
         number_of_accounts: 3,
         source: 'PERMISSION SYSTEM',
-      },
-    );
+      })
+      .build();
+
+    expect(mockTrackEvent).toHaveBeenCalledTimes(1);
+    expect(mockTrackEvent).toHaveBeenCalledWith(expectedEvent);
   });
 
   it('does not navigate if no approval request', async () => {

app/components/Approvals/PermissionApproval/PermissionApproval.tsx

@@ -15,7 +15,7 @@ export interface PermissionApprovalProps {
 }
 
 const PermissionApproval = (props: PermissionApprovalProps) => {
-  const { trackEvent } = useMetrics();
+  const { trackEvent, createEventBuilder } = useMetrics();
   const { approvalRequest } = useApprovalRequest();
   const totalAccounts = useSelector(selectAccountsLength);
   const isProcessing = useRef<boolean>(false);
@@ -38,18 +38,28 @@ const PermissionApproval = (props: PermissionApprovalProps) => {
 
     isProcessing.current = true;
 
-    trackEvent(MetaMetricsEvents.CONNECT_REQUEST_STARTED, {
-      number_of_accounts: totalAccounts,
-      source: 'PERMISSION SYSTEM',
-    });
+    trackEvent(
+      createEventBuilder(MetaMetricsEvents.CONNECT_REQUEST_STARTED)
+        .addProperties({
+          number_of_accounts: totalAccounts,
+          source: 'PERMISSION SYSTEM',
+        })
+        .build(),
+    );
 
     props.navigation.navigate(
       ...createAccountConnectNavDetails({
         hostInfo: requestData,
         permissionRequestId: id,
       }),
     );
-  }, [approvalRequest, totalAccounts, props.navigation, trackEvent]);
+  }, [
+    approvalRequest,
+    totalAccounts,
+    props.navigation,
+    trackEvent,
+    createEventBuilder,
+  ]);
 
   return null;
 };

app/components/Nav/Main/MainNavigator.js

@@ -400,7 +400,7 @@ const SettingsFlow = () => (
 );
 
 const HomeTabs = () => {
-  const { trackEvent } = useMetrics();
+  const { trackEvent, createEventBuilder } = useMetrics();
   const drawerRef = useRef(null);
   const [isKeyboardHidden, setIsKeyboardHidden] = useState(true);
 
@@ -439,10 +439,14 @@ const HomeTabs = () => {
     home: {
       tabBarIconKey: TabBarIconKey.Wallet,
       callback: () => {
-        trackEvent(MetaMetricsEvents.WALLET_OPENED, {
-          number_of_accounts: accountsLength,
-          chain_id: getDecimalChainId(chainId),
-        });
+        trackEvent(
+          createEventBuilder(MetaMetricsEvents.WALLET_OPENED)
+            .addProperties({
+              number_of_accounts: accountsLength,
+              chain_id: getDecimalChainId(chainId),
+            })
+            .build(),
+        );
       },
       rootScreenName: Routes.WALLET_VIEW,
     },
@@ -453,27 +457,39 @@ const HomeTabs = () => {
     browser: {
       tabBarIconKey: TabBarIconKey.Browser,
       callback: () => {
-        trackEvent(MetaMetricsEvents.BROWSER_OPENED, {
-          number_of_accounts: accountsLength,
-          chain_id: getDecimalChainId(chainId),
-          source: 'Navigation Tab',
-          active_connected_dapp: activeConnectedDapp,
-          number_of_open_tabs: amountOfBrowserOpenTabs,
-        });
+        trackEvent(
+          createEventBuilder(MetaMetricsEvents.BROWSER_OPENED)
+            .addProperties({
+              number_of_accounts: accountsLength,
+              chain_id: getDecimalChainId(chainId),
+              source: 'Navigation Tab',
+              active_connected_dapp: activeConnectedDapp,
+              number_of_open_tabs: amountOfBrowserOpenTabs,
+            })
+            .build(),
+        );
       },
       rootScreenName: Routes.BROWSER_VIEW,
     },
     activity: {
       tabBarIconKey: TabBarIconKey.Activity,
       callback: () => {
-        trackEvent(MetaMetricsEvents.NAVIGATION_TAPS_TRANSACTION_HISTORY);
+        trackEvent(
+          createEventBuilder(
+            MetaMetricsEvents.NAVIGATION_TAPS_TRANSACTION_HISTORY,
+          ).build(),
+        );
       },
       rootScreenName: Routes.TRANSACTIONS_VIEW,
     },
     settings: {
       tabBarIconKey: TabBarIconKey.Setting,
       callback: () => {
-        trackEvent(MetaMetricsEvents.NAVIGATION_TAPS_SETTINGS);
+        trackEvent(
+          createEventBuilder(
+            MetaMetricsEvents.NAVIGATION_TAPS_SETTINGS,
+          ).build(),
+        );
       },
       rootScreenName: Routes.SETTINGS_VIEW,
       unmountOnBlur: true,

app/components/Nav/Main/RootRPCMethodsUI.js

@@ -128,7 +128,7 @@ export const useSwapConfirmedEvent = ({ trackSwaps }) => {
 };
 
 const RootRPCMethodsUI = (props) => {
-  const { trackEvent } = useMetrics();
+  const { trackEvent, createEventBuilder } = useMetrics();
   const [transactionModalType, setTransactionModalType] = useState(undefined);
   const tokenList = useSelector(selectTokenList);
   const setTransactionObject = props.setTransactionObject;
@@ -241,15 +241,28 @@ const RootRPCMethodsUI = (props) => {
 
         Logger.log('Swaps', 'Sending metrics event', event);
 
-        trackEvent(event, { sensitiveProperties: { ...parameters } });
+        trackEvent(
+          createEventBuilder(event)
+            .addSensitiveProperties({ ...parameters })
+            .build(),
+        );
       } catch (e) {
         Logger.error(e, MetaMetricsEvents.SWAP_TRACKING_FAILED);
-        trackEvent(MetaMetricsEvents.SWAP_TRACKING_FAILED, {
-          error: e,
-        });
+        trackEvent(
+          createEventBuilder(MetaMetricsEvents.SWAP_TRACKING_FAILED)
+            .addProperties({
+              error: e,
+            })
+            .build(),
+        );
       }
     },
-    [props.selectedAddress, props.shouldUseSmartTransaction, trackEvent],
+    [
+      props.selectedAddress,
+      props.shouldUseSmartTransaction,
+      trackEvent,
+      createEventBuilder,
+    ],
   );
 
   const { addTransactionMetaIdForListening } = useSwapConfirmedEvent({
@@ -323,7 +336,11 @@ const RootRPCMethodsUI = (props) => {
           );
           Logger.error(error, 'error while trying to send transaction (Main)');
         } else {
-          trackEvent(MetaMetricsEvents.QR_HARDWARE_TRANSACTION_CANCELED);
+          trackEvent(
+            createEventBuilder(
+              MetaMetricsEvents.QR_HARDWARE_TRANSACTION_CANCELED,
+            ).build(),
+          );
         }
       }
     },
@@ -333,6 +350,7 @@ const RootRPCMethodsUI = (props) => {
       trackEvent,
       swapsTransactions,
       addTransactionMetaIdForListening,
+      createEventBuilder,
     ],
   );