feat: Missing migration events (#8731)

## **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?
-->

## **Related issues**

Fixes:

## **Manual testing steps**

1. Go to this page...
2.
3.

## **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**

- [ ] I’ve followed [MetaMask Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've clearly explained what problem this PR is solving and how it
is solved.
- [ ] I've linked related issues
- [ ] I've included manual testing steps
- [ ] I've included screenshots/recordings if applicable
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] 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.
- [ ] I’ve properly set the pull request status:
  - [ ] In case it's not yet "ready for review", I've set it to "draft".
- [ ] In case it's "ready for review", I've changed it from "draft" to
"non-draft".

## **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.

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

@@ -12,10 +12,10 @@ import { useStyles } from '../../../hooks';
 import generateTestId from '../../../../../wdio/utils/generateTestId';
 import Routes from '../../../../constants/navigation/Routes';
 import { useTheme } from '../../../../util/theme';
-import Analytics from '../../../../core/Analytics/Analytics';
 import { MetaMetricsEvents } from '../../../../core/Analytics';
 import { selectChainId } from '../../../../selectors/networkController';
 import { getDecimalChainId } from '../../../../util/networks';
+import { useMetrics } from '../../../../components/hooks/useMetrics';
 
 // Internal dependencies.
 import { TabBarProps } from './TabBar.types';
@@ -27,6 +27,7 @@ import OnboardingWizard from '../../../../components/UI/OnboardingWizard';
 
 const TabBar = ({ state, descriptors, navigation }: TabBarProps) => {
   const { colors } = useTheme();
+  const { trackEvent } = useMetrics();
   const { bottom: bottomInset } = useSafeAreaInsets();
   const { styles } = useStyles(styleSheet, { bottomInset });
   const chainId = useSelector(selectChainId);
@@ -73,13 +74,10 @@ const TabBar = ({ state, descriptors, navigation }: TabBarProps) => {
             navigation.navigate(Routes.MODAL.ROOT_MODAL_FLOW, {
               screen: Routes.MODAL.WALLET_ACTIONS,
             });
-            Analytics.trackEventWithParameters(
-              MetaMetricsEvents.ACTIONS_BUTTON_CLICKED,
-              {
-                text: '',
-                chain_id: getDecimalChainId(chainId),
-              },
-            );
+            trackEvent(MetaMetricsEvents.ACTIONS_BUTTON_CLICKED, {
+              text: '',
+              chain_id: getDecimalChainId(chainId),
+            });
             break;
           case Routes.BROWSER_VIEW:
             navigation.navigate(Routes.BROWSER.HOME, {
@@ -127,7 +125,7 @@ const TabBar = ({ state, descriptors, navigation }: TabBarProps) => {
         />
       );
     },
-    [state, descriptors, navigation, colors, chainId],
+    [state, descriptors, navigation, colors, chainId, trackEvent],
   );
 
   const renderTabBarItems = useCallback(

app/components/UI/AccountApproval/showWarningBanner.tsx

@@ -17,8 +17,8 @@ import {
   IconSize,
 } from '../../../component-library/components/Icons/Icon';
 import { CONNECTING_TO_A_DECEPTIVE_SITE } from '../../../constants/urls';
-import AnalyticsV2 from '../../../util/analyticsV2';
 import { AccordionHeaderHorizontalAlignment } from '../../../component-library/components/Accordions/Accordion';
+import { MetaMetrics } from '../../../core/Analytics';
 
 const descriptionArray = [
   strings('accounts.fake_metamask'),
@@ -28,11 +28,14 @@ const descriptionArray = [
 
 const goToLearnMore = () => {
   Linking.openURL(CONNECTING_TO_A_DECEPTIVE_SITE);
-  AnalyticsV2.trackEvent('EXTERNAL_LINK_CLICKED', {
-    location: 'dapp_connection_request',
-    text: 'Learn More',
-    url_domain: CONNECTING_TO_A_DECEPTIVE_SITE,
-  });
+  MetaMetrics.getInstance().trackEvent(
+    { category: 'EXTERNAL_LINK_CLICKED' },
+    {
+      location: 'dapp_connection_request',
+      text: 'Learn More',
+      url_domain: CONNECTING_TO_A_DECEPTIVE_SITE,
+    },
+  );
 };
 
 const ShowWarningBanner = () => {

app/components/UI/Swaps/index.js

@@ -39,7 +39,6 @@ import {
   swapsTokensWithBalanceSelector,
   swapsTopAssetsSelector,
 } from '../../../reducers/swaps';
-import Analytics from '../../../core/Analytics/Analytics';
 import Device from '../../../util/device';
 import Engine from '../../../core/Engine';
 import AppConstants from '../../../core/AppConstants';
@@ -88,6 +87,7 @@ import {
   SWAP_MAX_SLIPPAGE,
 } from '../../../../wdio/screen-objects/testIDs/Screens/QuoteView.js';
 import { getDecimalChainId } from '../../../util/networks';
+import { useMetrics } from '../../../components/hooks/useMetrics';
 
 const createStyles = (colors) =>
   StyleSheet.create({
@@ -203,6 +203,7 @@ function SwapsAmountView({
   const navigation = useNavigation();
   const route = useRoute();
   const { colors } = useTheme();
+  const { trackAnonymousEvent } = useMetrics();
   const styles = createStyles(colors);
 
   const previousSelectedAddress = useRef();
@@ -286,15 +287,8 @@ function SwapsAmountView({
               )?.symbol,
               chain_id: getDecimalChainId(chainId),
             };
-            Analytics.trackEventWithParameters(
-              MetaMetricsEvents.SWAPS_OPENED,
-              {},
-            );
-            Analytics.trackEventWithParameters(
-              MetaMetricsEvents.SWAPS_OPENED,
-              parameters,
-              true,
-            );
+
+            trackAnonymousEvent(MetaMetricsEvents.SWAPS_OPENED, parameters);
           });
         } else {
           navigation.pop();

app/components/Views/Settings/NetworksSettings/NetworkSettings/index.js

@@ -33,7 +33,6 @@ import Logger from '../../../../../util/Logger';
 import { isPrefixedFormattedHexString } from '../../../../../util/number';
 import AppConstants from '../../../../../core/AppConstants';
 import { MetaMetricsEvents } from '../../../../../core/Analytics';
-import AnalyticsV2 from '../../../../../util/analyticsV2';
 import ScrollableTabView from 'react-native-scrollable-tab-view';
 import DefaultTabBar from 'react-native-scrollable-tab-view/DefaultTabBar';
 import PopularList from '../../../../../util/networks/customNetworks';
@@ -67,6 +66,7 @@ import {
 import { regex } from '../../../../../../app/util/regex';
 import { NetworksViewSelectorsIDs } from '../../../../../../e2e/selectors/Settings/NetworksView.selectors';
 import { updateIncomingTransactions } from '../../../../../util/transaction-controller';
+import { withMetricsAwareness } from '../../../../../components/hooks/useMetrics';
 
 const createStyles = (colors) =>
   StyleSheet.create({
@@ -233,6 +233,10 @@ class NetworkSettings extends PureComponent {
      * Current network provider configuration
      */
     providerConfig: PropTypes.object,
+    /**
+     * Metrics injected by withMetricsAwareness HOC
+     */
+    metrics: PropTypes.object,
   };
 
   state = {
@@ -463,7 +467,7 @@ class NetworkSettings extends PureComponent {
       enableAction,
     } = this.state;
     const ticker = this.state.ticker && this.state.ticker.toUpperCase();
-    const { navigation, networkOnboardedState, route } = this.props;
+    const { navigation, networkOnboardedState, route, metrics } = this.props;
     const isCustomMainnet = route.params?.isCustomMainnet;
     // This must be defined before NetworkController.upsertNetworkConfiguration.
     const prevRPCURL = isCustomMainnet
@@ -555,10 +559,7 @@ class NetworkSettings extends PureComponent {
         source: 'Custom network form',
         symbol: ticker,
       };
-      AnalyticsV2.trackEvent(
-        MetaMetricsEvents.NETWORK_ADDED,
-        analyticsParamsAdd,
-      );
+      metrics.trackEvent(MetaMetricsEvents.NETWORK_ADDED, analyticsParamsAdd);
       this.props.showNetworkOnboardingAction({
         networkUrl,
         networkType,
@@ -1222,4 +1223,7 @@ const mapStateToProps = (state) => ({
   networkOnboardedState: state.networkOnboarded.networkOnboardedState,
 });
 
-export default connect(mapStateToProps, mapDispatchToProps)(NetworkSettings);
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(withMetricsAwareness(NetworkSettings));

app/components/Views/Settings/SecuritySettings/Sections/AutomaticSecurityChecks.tsx

@@ -4,27 +4,28 @@ import { strings } from '../../../../../../locales/i18n';
 import { useSelector, useDispatch } from 'react-redux';
 import { setAutomaticSecurityChecks } from '../../../../../actions/security';
 import { MetaMetricsEvents } from '../../../../../core/Analytics';
-import AnalyticsV2 from '../../../../../util/analyticsV2';
 
 import { Platform } from 'react-native';
+import { useMetrics } from '../../../../../components/hooks/useMetrics';
 
 const AutomaticSecurityChecks = () => {
   const dispatch = useDispatch();
+  const { trackEvent } = useMetrics();
   const automaticSecurityChecksState = useSelector(
     (state: any) => state.security.automaticSecurityChecksEnabled,
   );
 
   const toggleAutomaticSecurityChecks = useCallback(
     (value: boolean) => {
-      AnalyticsV2.trackEvent(
+      trackEvent(
         value
           ? MetaMetricsEvents.AUTOMATIC_SECURITY_CHECKS_ENABLED_FROM_SETTINGS
           : MetaMetricsEvents.AUTOMATIC_SECURITY_CHECKS_DISABLED_FROM_SETTINGS,
         { platform: Platform.OS },
       );
       dispatch(setAutomaticSecurityChecks(value));
     },
-    [dispatch],
+    [dispatch, trackEvent],
   );
   return (
     <SecurityOptionToggle

app/components/Views/Settings/SecuritySettings/Sections/BlockaidSettings.tsx

@@ -11,15 +11,16 @@ import { useSelector } from 'react-redux';
 import { selectIsSecurityAlertsEnabled } from '../../../../../selectors/preferencesController';
 import Engine from '../../../../../core/Engine';
 import { MetaMetricsEvents } from '../../../../../core/Analytics';
-import AnalyticsV2 from '../../../../../util/analyticsV2';
 import { useNavigation } from '@react-navigation/native';
 import Routes from '../../../../../constants/navigation/Routes';
 import SECURITY_ALERTS_TOGGLE_TEST_ID from '../constants';
 import createStyles from './BlockaidSettings.styles';
+import { useMetrics } from '../../../../../components/hooks/useMetrics';
 
 const BlockaidSettings = () => {
   const theme = useTheme();
   const { colors } = useTheme();
+  const { trackEvent } = useMetrics();
   const styles = createStyles();
   const securityAlertsEnabled = useSelector(selectIsSecurityAlertsEnabled);
   const navigation = useNavigation();
@@ -29,12 +30,9 @@ const BlockaidSettings = () => {
 
     if (securityAlertsEnabled) {
       PreferencesController?.setSecurityAlertsEnabled(false);
-      AnalyticsV2.trackEvent(
-        MetaMetricsEvents.SETTINGS_SECURITY_ALERTS_ENABLED,
-        {
-          security_alerts_enabled: false,
-        },
-      );
+      trackEvent(MetaMetricsEvents.SETTINGS_SECURITY_ALERTS_ENABLED, {
+        security_alerts_enabled: false,
+      });
     } else if (Device.isIos()) {
       PreferencesController?.setSecurityAlertsEnabled(true);
     } else {

app/components/Views/Settings/SecuritySettings/Sections/ProtectYourWallet/ProtectYourWallet.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { View, Linking, InteractionManager } from 'react-native';
+import { View, Linking } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import Button, {
   ButtonSize,
@@ -12,7 +12,6 @@ import Text, {
 } from '../../../../../../component-library/components/Texts/Text';
 import SeedPhraseVideo from '../../../../../UI/SeedPhraseVideo';
 import { MetaMetricsEvents } from '../../../../../../core/Analytics';
-import AnalyticsV2 from '../../../../../../util/analyticsV2';
 import { useTheme } from '../../../../../../util/theme';
 import { strings } from '../../../../../../../locales/i18n';
 import { LEARN_MORE_URL } from '../../../../../../constants/urls';
@@ -23,6 +22,7 @@ import Banner, {
   BannerVariant,
   BannerAlertSeverity,
 } from '../../../../../../component-library/components/Banners/Banner';
+import { useMetrics } from '../../../../../../components/hooks/useMetrics';
 
 interface IProtectYourWalletProps {
   srpBackedup: boolean;
@@ -36,6 +36,7 @@ const ProtectYourWallet = ({
   toggleHint,
 }: IProtectYourWalletProps) => {
   const { colors } = useTheme();
+  const { trackEvent } = useMetrics();
   const styles = createStyles(colors);
   const navigation = useNavigation();
 
@@ -47,10 +48,9 @@ const ProtectYourWallet = ({
 
   const goToBackup = (): void => {
     navigation.navigate(Routes.ACCOUNT_BACKUP.STEP_1_B);
-    InteractionManager.runAfterInteractions(() => {
-      AnalyticsV2.trackEvent(MetaMetricsEvents.WALLET_SECURITY_STARTED, {
-        source: 'Settings',
-      });
+
+    trackEvent(MetaMetricsEvents.WALLET_SECURITY_STARTED, {
+      source: 'Settings',
     });
   };
 

app/components/Views/Settings/SecuritySettings/Sections/RevealPrivateKey/RevealPrivateKey.tsx

@@ -12,7 +12,6 @@ import Text, {
   TextColor,
 } from '../../../../../../component-library/components/Texts/Text';
 import { MetaMetricsEvents } from '../../../../../../core/Analytics';
-import AnalyticsV2 from '../../../../../../util/analyticsV2';
 import { strings } from '../../../../../../../locales/i18n';
 import { createStyles } from './styles';
 import Routes from '../../../../../../constants/navigation/Routes';
@@ -22,6 +21,7 @@ import {
   selectSelectedAddress,
 } from '../../../../../../selectors/preferencesController';
 import { REVEAL_PRIVATE_KEY_SECTION } from '../../SecuritySettings.constants';
+import { useMetrics } from '../../../../../../components/hooks/useMetrics';
 
 const testIds = {
   section: REVEAL_PRIVATE_KEY_SECTION,
@@ -30,6 +30,7 @@ const testIds = {
 const RevealPrivateKey = () => {
   const styles = createStyles();
   const navigation = useNavigation();
+  const { trackEvent } = useMetrics();
 
   const accounts = useSelector(selectAccounts);
   const identities = useSelector(selectIdentities);
@@ -41,7 +42,7 @@ const RevealPrivateKey = () => {
   };
 
   const goToExportPrivateKey = () => {
-    AnalyticsV2.trackEvent(MetaMetricsEvents.REVEAL_PRIVATE_KEY_INITIATED, {});
+    trackEvent(MetaMetricsEvents.REVEAL_PRIVATE_KEY_INITIATED, {});
     navigation.navigate(Routes.SETTINGS.REVEAL_PRIVATE_CREDENTIAL, {
       credentialName: 'private_key',
       shouldUpdateNav: true,

app/core/Engine.ts

@@ -146,8 +146,8 @@ import Logger from '../util/Logger';
 import { EndowmentPermissions } from '../constants/permissions';
 ///: END:ONLY_INCLUDE_IF
 import { isZero } from '../util/lodash';
-import { MetaMetricsEvents } from './Analytics';
-import AnalyticsV2 from '../util/analyticsV2';
+import { MetaMetricsEvents, MetaMetrics } from './Analytics';
+
 ///: BEGIN:ONLY_INCLUDE_IF(snaps)
 import {
   SnapBridge,
@@ -931,13 +931,16 @@ class Engine {
           ),
         addDetectedTokens: async (tokens) => {
           // Track detected tokens event
-          AnalyticsV2.trackEvent(MetaMetricsEvents.TOKEN_DETECTED, {
-            token_standard: 'ERC20',
-            asset_type: 'token',
-            chain_id: getDecimalChainId(
-              networkController.state.providerConfig.chainId,
-            ),
-          });
+          MetaMetrics.getInstance().trackEvent(
+            MetaMetricsEvents.TOKEN_DETECTED,
+            {
+              token_standard: 'ERC20',
+              asset_type: 'token',
+              chain_id: getDecimalChainId(
+                networkController.state.providerConfig.chainId,
+              ),
+            },
+          );
           tokensController.addDetectedTokens(tokens);
         },
         updateTokensName: (tokenList) =>