feat(3299): add tracking to network switching and confirmation

app/components/UI/SwitchCustomNetwork/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import StyledButton from '../StyledButton';
 import { StyleSheet, View } from 'react-native';
@@ -8,8 +8,14 @@ import Device from '../../../util/device';
 import Text from '../../Base/Text';
 import { useTheme } from '../../../util/theme';
 import { CommonSelectorsIDs } from '../../../../e2e/selectors/Common.selectors';
-import { isMultichainVersion1Enabled } from '../../../util/networks';
+import {
+  isMultichainVersion1Enabled,
+  getDecimalChainId,
+} from '../../../util/networks';
 import PermissionSummary from '../PermissionsSummary';
+import { MetaMetricsEvents } from '../../../core/Analytics';
+import { useNetworkInfo } from '../../../selectors/selectedNetworkController';
+import { useMetrics } from '../../../components/hooks/useMetrics';
 
 const createStyles = (colors) =>
   StyleSheet.create({
@@ -90,11 +96,33 @@ const SwitchCustomNetwork = ({
 }) => {
   const { colors } = useTheme();
   const styles = createStyles(colors);
+  const { trackEvent } = useMetrics();
+
+  const { networkName } = useNetworkInfo(
+    new URL(currentPageInformation.url).hostname,
+  );
+
+  const trackingData = useMemo(
+    () => ({
+      chain_id: getDecimalChainId(customNetworkInformation.chainId),
+      from_network: networkName,
+      to_network: customNetworkInformation.chainName,
+    }),
+    [customNetworkInformation, networkName],
+  );
+
+  useEffect(() => {
+    trackEvent(
+      MetaMetricsEvents.NETWORK_SWITCH_REQUESTED_AND_MODAL_SHOWN,
+      trackingData,
+    );
+  }, [trackEvent, trackingData]);
 
   /**
    * Calls onConfirm callback and analytics to track connect confirmed event
    */
   const confirm = () => {
+    trackEvent(MetaMetricsEvents.NETWORK_SWITCH_CONFIRM_PRESSED, trackingData);
     onConfirm && onConfirm();
   };
 

app/components/UI/SwitchCustomNetwork/index.test.tsx

@@ -1,13 +1,29 @@
 import React from 'react';
 import SwitchCustomNetwork from './';
 import renderWithProvider from '../../../util/test/renderWithProvider';
+import { backgroundState } from '../../../util/test/initial-root-state';
+import { MOCK_ACCOUNTS_CONTROLLER_STATE } from '../../../util/test/accountsControllerTestUtils';
+
+const mockInitialState = {
+  wizard: {
+    step: 1,
+  },
+  engine: {
+    backgroundState: {
+      ...backgroundState,
+      AccountsController: MOCK_ACCOUNTS_CONTROLLER_STATE,
+    },
+  },
+};
 
 describe('SwitchCustomNetwork', () => {
   it('should render correctly', () => {
     const { toJSON } = renderWithProvider(
       <SwitchCustomNetwork
         customNetworkInformation={{ chainName: '', chainId: '' }}
+        currentPageInformation={{ url: 'https://app.uniswap.org/' }}
       />,
+      { state: mockInitialState },
     );
     expect(toJSON()).toMatchSnapshot();
   });

app/core/Analytics/MetaMetrics.events.ts

@@ -80,6 +80,8 @@ enum EVENT_NAME {
 
   // Network
   NETWORK_SWITCHED = 'Network Switched',
+  NETWORK_SWITCH_REQUESTED_AND_MODAL_SHOWN = 'Network Switch Requested and Modal Shown',
+  NETWORK_SWITCH_CONFIRM_PRESSED = 'Network Switch Confirm Pressed',
   NETWORK_ADDED = 'Network Added',
   NETWORK_REQUESTED = 'Network Requested',
   NETWORK_REQUEST_REJECTED = 'Network Request Rejected',
@@ -482,6 +484,12 @@ const events = {
   COLLECTIBLE_REMOVED: generateOpt(EVENT_NAME.COLLECTIBLE_REMOVED),
   CURRENCY_CHANGED: generateOpt(EVENT_NAME.CURRENCY_CHANGED),
   NETWORK_SWITCHED: generateOpt(EVENT_NAME.NETWORK_SWITCHED),
+  NETWORK_SWITCH_REQUESTED_AND_MODAL_SHOWN: generateOpt(
+    EVENT_NAME.NETWORK_SWITCH_REQUESTED_AND_MODAL_SHOWN,
+  ),
+  NETWORK_SWITCH_CONFIRM_PRESSED: generateOpt(
+    EVENT_NAME.NETWORK_SWITCH_CONFIRM_PRESSED,
+  ),
   NETWORK_ADDED: generateOpt(EVENT_NAME.NETWORK_ADDED),
   NETWORK_REQUESTED: generateOpt(EVENT_NAME.NETWORK_REQUESTED),
   NETWORK_REQUEST_REJECTED: generateOpt(EVENT_NAME.NETWORK_REQUEST_REJECTED),