feat: c-a views components events migration to segment

app/components/Views/AccountActions/AccountActions.tsx

@@ -20,7 +20,7 @@ import {
   getEtherscanAddressUrl,
   getEtherscanBaseUrl,
 } from '../../../util/etherscan';
-import { Analytics, MetaMetricsEvents } from '../../../core/Analytics';
+import { MetaMetricsEvents } from '../../../core/Analytics';
 import { RPC } from '../../../constants/network';
 import {
   selectNetworkConfigurations,
@@ -33,7 +33,6 @@ import { strings } from '../../../../locales/i18n';
 import styleSheet from './AccountActions.styles';
 import Logger from '../../../util/Logger';
 import { protectWalletModalVisible } from '../../../actions/user';
-import AnalyticsV2 from '../../../util/analyticsV2';
 import Routes from '../../../constants/navigation/Routes';
 import generateTestId from '../../../../wdio/utils/generateTestId';
 import {
@@ -42,12 +41,14 @@ import {
   SHOW_PRIVATE_KEY,
   VIEW_ETHERSCAN,
 } from './AccountActions.constants';
+import { useMetrics } from '../../../components/hooks/useMetrics';
 
 const AccountActions = () => {
   const { styles } = useStyles(styleSheet, {});
   const sheetRef = useRef<BottomSheetRef>(null);
   const { navigate } = useNavigation();
   const dispatch = useDispatch();
+  const { trackEvent } = useMetrics();
 
   const providerConfig = useSelector(selectProviderConfig);
 
@@ -94,7 +95,7 @@ const AccountActions = () => {
         goToBrowserUrl(url, etherscan_url);
       }
 
-      Analytics.trackEvent(MetaMetricsEvents.NAVIGATION_TAPS_VIEW_ETHERSCAN);
+      trackEvent(MetaMetricsEvents.NAVIGATION_TAPS_VIEW_ETHERSCAN);
     });
   };
 
@@ -110,18 +111,13 @@ const AccountActions = () => {
           Logger.log('Error while trying to share address', err);
         });
 
-      Analytics.trackEvent(
-        MetaMetricsEvents.NAVIGATION_TAPS_SHARE_PUBLIC_ADDRESS,
-      );
+      trackEvent(MetaMetricsEvents.NAVIGATION_TAPS_SHARE_PUBLIC_ADDRESS);
     });
   };
 
   const goToExportPrivateKey = () => {
     sheetRef.current?.onCloseBottomSheet(() => {
-      AnalyticsV2.trackEvent(
-        MetaMetricsEvents.REVEAL_PRIVATE_KEY_INITIATED,
-        {},
-      );
+      trackEvent(MetaMetricsEvents.REVEAL_PRIVATE_KEY_INITIATED);
 
       navigate(Routes.SETTINGS.REVEAL_PRIVATE_CREDENTIAL, {
         credentialName: 'private_key',

app/components/Views/AccountBackupStep1/index.js

@@ -29,9 +29,8 @@ import { MetaMetricsEvents } from '../../../core/Analytics';
 
 import DefaultPreference from 'react-native-default-preference';
 import { useTheme } from '../../../util/theme';
-import trackAfterInteractions from '../../../util/metrics/TrackAfterInteraction/trackAfterInteractions';
-import Logger from '../../../util/Logger';
 import { ManualBackUpStepsSelectorsIDs } from '../../../../e2e/selectors/Onboarding/ManualBackUpSteps.selectors';
+import trackOnboarding from '../../../util/metrics/TrackOnboarding/trackOnboarding';
 const createStyles = (colors) =>
   StyleSheet.create({
     mainWrapper: {
@@ -128,9 +127,7 @@ const AccountBackupStep1 = (props) => {
   const styles = createStyles(colors);
 
   const track = (event, properties) => {
-    trackAfterInteractions(event, properties).catch(() => {
-      Logger.log('AccountBackupStep1', `Failed to track ${event}`);
-    });
+    trackOnboarding(event, properties);
   };
 
   useEffect(() => {

app/components/Views/AccountBackupStep1B/index.js

@@ -24,9 +24,8 @@ import { CHOOSE_PASSWORD_STEPS } from '../../../constants/onboarding';
 import { MetaMetricsEvents } from '../../../core/Analytics';
 
 import { useTheme } from '../../../util/theme';
-import trackAfterInteractions from '../../../util/metrics/TrackAfterInteraction/trackAfterInteractions';
-import Logger from '../../../util/Logger';
 import { ManualBackUpStepsSelectorsIDs } from '../../../../e2e/selectors/Onboarding/ManualBackUpSteps.selectors';
+import trackOnboarding from '../../../util/metrics/TrackOnboarding/trackOnboarding';
 
 const explain_backup_seedphrase = require('../../../images/explain-backup-seedphrase.png'); // eslint-disable-line
 
@@ -207,9 +206,7 @@ const AccountBackupStep1B = (props) => {
   const styles = createStyles(colors);
 
   const track = (event, properties) => {
-    trackAfterInteractions(event, properties).catch(() => {
-      Logger.log('AccountBackupStep1B', `Failed to track ${event}`);
-    });
+    trackOnboarding(event, properties);
   };
 
   useEffect(() => {

app/components/Views/AccountConnect/AccountConnect.tsx

@@ -18,7 +18,6 @@ import BottomSheet, {
 import UntypedEngine from '../../../core/Engine';
 import { isDefaultAccountName } from '../../../util/ENSUtils';
 import Logger from '../../../util/Logger';
-import AnalyticsV2 from '../../../util/analyticsV2';
 import { MetaMetricsEvents } from '../../../core/Analytics';
 import { SelectedAccount } from '../../../components/UI/AccountSelectorList/AccountSelectorList.types';
 import {
@@ -55,12 +54,14 @@ import AccountConnectMultiSelector from './AccountConnectMultiSelector';
 import useFavicon from '../../hooks/useFavicon/useFavicon';
 import URLParse from 'url-parse';
 import { trackDappVisitedEvent } from '../../../util/metrics';
+import { useMetrics } from '../../../components/hooks/useMetrics';
 
 const AccountConnect = (props: AccountConnectProps) => {
   const Engine = UntypedEngine as any;
   const { hostInfo, permissionRequestId } = props.route.params;
   const [isLoading, setIsLoading] = useState(false);
   const navigation = useNavigation();
+  const { trackEvent } = useMetrics();
   const selectedWalletAddress = useSelector(selectSelectedAddress);
   const [selectedAddresses, setSelectedAddresses] = useState<string[]>([
     selectedWalletAddress,
@@ -117,12 +118,12 @@ const AccountConnect = (props: AccountConnectProps) => {
     (requestId) => {
       Engine.context.PermissionController.rejectPermissionsRequest(requestId);
 
-      AnalyticsV2.trackEvent(MetaMetricsEvents.CONNECT_REQUEST_CANCELLED, {
+      trackEvent(MetaMetricsEvents.CONNECT_REQUEST_CANCELLED, {
         number_of_accounts: accountsLength,
         source: 'permission system',
       });
     },
-    [Engine.context.PermissionController, accountsLength],
+    [Engine.context.PermissionController, accountsLength, trackEvent],
   );
 
   const triggerDappVisitedEvent = useCallback(
@@ -160,7 +161,7 @@ const AccountConnect = (props: AccountConnectProps) => {
 
       triggerDappVisitedEvent(connectedAccountLength);
 
-      AnalyticsV2.trackEvent(MetaMetricsEvents.CONNECT_REQUEST_COMPLETED, {
+      trackEvent(MetaMetricsEvents.CONNECT_REQUEST_COMPLETED, {
         number_of_accounts: accountsLength,
         number_of_accounts_connected: connectedAccountLength,
         account_type: getAddressAccountType(activeAddress),
@@ -204,6 +205,7 @@ const AccountConnect = (props: AccountConnectProps) => {
     toastRef,
     accountsLength,
     triggerDappVisitedEvent,
+    trackEvent,
   ]);
 
   const handleCreateAccount = useCallback(
@@ -216,17 +218,14 @@ const AccountConnect = (props: AccountConnectProps) => {
           addedAccountAddress,
         ) as string;
         !isMultiSelect && setSelectedAddresses([checksummedAddress]);
-        AnalyticsV2.trackEvent(
-          MetaMetricsEvents.ACCOUNTS_ADDED_NEW_ACCOUNT,
-          {},
-        );
+        trackEvent(MetaMetricsEvents.ACCOUNTS_ADDED_NEW_ACCOUNT);
       } catch (e: any) {
         Logger.error(e, 'error while trying to add a new account');
       } finally {
         setIsLoading(false);
       }
     },
-    [Engine.context],
+    [Engine.context, trackEvent],
   );
 
   const hideSheet = (callback?: () => void) =>
@@ -266,16 +265,13 @@ const AccountConnect = (props: AccountConnectProps) => {
         case USER_INTENT.Import: {
           navigation.navigate('ImportPrivateKeyView');
           // TODO: Confirm if this is where we want to track importing an account or within ImportPrivateKeyView screen.
-          AnalyticsV2.trackEvent(
-            MetaMetricsEvents.ACCOUNTS_IMPORTED_NEW_ACCOUNT,
-            {},
-          );
+          trackEvent(MetaMetricsEvents.ACCOUNTS_IMPORTED_NEW_ACCOUNT);
           break;
         }
         case USER_INTENT.ConnectHW: {
           navigation.navigate('ConnectQRHardwareFlow');
           // TODO: Confirm if this is where we want to track connecting a hardware wallet or within ConnectQRHardwareFlow screen.
-          AnalyticsV2.trackEvent(MetaMetricsEvents.CONNECT_HARDWARE_WALLET, {});
+          trackEvent(MetaMetricsEvents.CONNECT_HARDWARE_WALLET);
 
           break;
         }
@@ -293,6 +289,7 @@ const AccountConnect = (props: AccountConnectProps) => {
     permissionRequestId,
     handleCreateAccount,
     handleConnect,
+    trackEvent,
   ]);
 
   const handleSheetDismiss = () => {

app/components/Views/AccountPermissions/AccountPermissions.tsx

@@ -27,7 +27,6 @@ import {
   ToastVariants,
 } from '../../../component-library/components/Toast';
 import { ToastOptions } from '../../../component-library/components/Toast/Toast.types';
-import AnalyticsV2 from '../../../util/analyticsV2';
 import { MetaMetricsEvents } from '../../../core/Analytics';
 import { useAccounts, Account } from '../../hooks/useAccounts';
 import getAccountNameWithENS from '../../../util/accounts';
@@ -50,9 +49,11 @@ import AccountPermissionsRevoke from './AccountPermissionsRevoke';
 import { USER_INTENT } from '../../../constants/permissions';
 import useFavicon from '../../hooks/useFavicon/useFavicon';
 import URLParse from 'url-parse';
+import { useMetrics } from '../../../components/hooks/useMetrics';
 
 const AccountPermissions = (props: AccountPermissionsProps) => {
   const navigation = useNavigation();
+  const { trackEvent } = useMetrics();
   const Engine = UntypedEngine as any;
   const {
     hostInfo: {
@@ -170,11 +171,8 @@ const AccountPermissions = (props: AccountPermissionsProps) => {
       try {
         setIsLoading(true);
         await KeyringController.addNewAccount();
-        AnalyticsV2.trackEvent(
-          MetaMetricsEvents.ACCOUNTS_ADDED_NEW_ACCOUNT,
-          {},
-        );
-        AnalyticsV2.trackEvent(MetaMetricsEvents.SWITCHED_ACCOUNT, {
+        trackEvent(MetaMetricsEvents.ACCOUNTS_ADDED_NEW_ACCOUNT);
+        trackEvent(MetaMetricsEvents.SWITCHED_ACCOUNT, {
           source: metricsSource,
           number_of_accounts: accounts?.length,
         });
@@ -226,7 +224,7 @@ const AccountPermissions = (props: AccountPermissionsProps) => {
       const totalAccounts = accountsLength;
       // TODO: confirm this value is the newly added accounts or total connected accounts
       const connectedAccounts = connectedAccountLength;
-      AnalyticsV2.trackEvent(MetaMetricsEvents.ADD_ACCOUNT_DAPP_PERMISSIONS, {
+      trackEvent(MetaMetricsEvents.ADD_ACCOUNT_DAPP_PERMISSIONS, {
         number_of_accounts: totalAccounts,
         number_of_accounts_connected: connectedAccounts,
         number_of_networks: nonTestnetNetworks,
@@ -246,6 +244,7 @@ const AccountPermissions = (props: AccountPermissionsProps) => {
     accountAvatarType,
     accountsLength,
     nonTestnetNetworks,
+    trackEvent,
   ]);
 
   useEffect(() => {
@@ -256,7 +255,7 @@ const AccountPermissions = (props: AccountPermissionsProps) => {
         case USER_INTENT.Confirm: {
           handleConnect();
           hideSheet(() => {
-            AnalyticsV2.trackEvent(MetaMetricsEvents.SWITCHED_ACCOUNT, {
+            trackEvent(MetaMetricsEvents.SWITCHED_ACCOUNT, {
               source: metricsSource,
               number_of_accounts: accounts?.length,
             });
@@ -275,17 +274,14 @@ const AccountPermissions = (props: AccountPermissionsProps) => {
         case USER_INTENT.Import: {
           navigation.navigate('ImportPrivateKeyView');
           // Is this where we want to track importing an account or within ImportPrivateKeyView screen?
-          AnalyticsV2.trackEvent(
-            MetaMetricsEvents.ACCOUNTS_IMPORTED_NEW_ACCOUNT,
-            {},
-          );
+          trackEvent(MetaMetricsEvents.ACCOUNTS_IMPORTED_NEW_ACCOUNT);
 
           break;
         }
         case USER_INTENT.ConnectHW: {
           navigation.navigate('ConnectQRHardwareFlow');
           // Is this where we want to track connecting a hardware wallet or within ConnectQRHardwareFlow screen?
-          AnalyticsV2.trackEvent(MetaMetricsEvents.CONNECT_HARDWARE_WALLET, {});
+          trackEvent(MetaMetricsEvents.CONNECT_HARDWARE_WALLET);
 
           break;
         }
@@ -303,6 +299,7 @@ const AccountPermissions = (props: AccountPermissionsProps) => {
     handleCreateAccount,
     handleConnect,
     accounts?.length,
+    trackEvent,
   ]);
 
   const renderConnectedScreen = useCallback(

app/components/Views/AccountPermissions/AccountPermissionsConnected/AccountPermissionsConnected.tsx

@@ -24,7 +24,6 @@ import {
   ToastVariants,
 } from '../../../../component-library/components/Toast';
 import getAccountNameWithENS from '../../../../util/accounts';
-import AnalyticsV2 from '../../../../util/analyticsV2';
 import { MetaMetricsEvents } from '../../../../core/Analytics';
 import Routes from '../../../../constants/navigation/Routes';
 import { selectProviderConfig } from '../../../../selectors/networkController';
@@ -33,6 +32,7 @@ import { ConnectedAccountsSelectorsIDs } from '../../../../../e2e/selectors/Moda
 // Internal dependencies.
 import { AccountPermissionsConnectedProps } from './AccountPermissionsConnected.types';
 import styles from './AccountPermissionsConnected.styles';
+import { useMetrics } from '../../../../components/hooks/useMetrics';
 
 const AccountPermissionsConnected = ({
   ensByAccountAddress,
@@ -49,6 +49,7 @@ const AccountPermissionsConnected = ({
   urlWithProtocol,
 }: AccountPermissionsConnectedProps) => {
   const { navigate } = useNavigation();
+  const { trackEvent } = useMetrics();
 
   const providerConfig: ProviderConfig = useSelector(selectProviderConfig);
 
@@ -112,10 +113,10 @@ const AccountPermissionsConnected = ({
       screen: Routes.SHEET.NETWORK_SELECTOR,
     });
 
-    AnalyticsV2.trackEvent(MetaMetricsEvents.NETWORK_SELECTOR_PRESSED, {
+    trackEvent(MetaMetricsEvents.NETWORK_SELECTOR_PRESSED, {
       chain_id: getDecimalChainId(providerConfig.chainId),
     });
-  }, [providerConfig.chainId, navigate]);
+  }, [providerConfig.chainId, navigate, trackEvent]);
 
   const renderSheetAction = useCallback(
     () => (