refactor(analytics): C3-a migrate security, wallet UI, navigation, and settings to useAnalytics

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

@@ -18,7 +18,7 @@ import { IconName } from '../../Icons/Icon';
 
 import { MetaMetricsEvents } from '../../../../core/Analytics';
 import { getDecimalChainId } from '../../../../util/networks';
-import { useMetrics } from '../../../../components/hooks/useMetrics';
+import { useAnalytics } from '../../../../components/hooks/useAnalytics/useAnalytics';
 import { strings } from '../../../../../locales/i18n';
 
 // Internal dependencies.
@@ -38,7 +38,7 @@ const FILLED_ICONS: Partial<Record<TabBarIconKey, IconName>> = {
 };
 
 const TabBar = ({ state, descriptors, navigation }: TabBarProps) => {
-  const { trackEvent, createEventBuilder } = useMetrics();
+  const { trackEvent, createEventBuilder } = useAnalytics();
   const { bottom: bottomInset } = useSafeAreaInsets();
   const chainId = useSelector(selectChainId);
   const isAccountMenuEnabled = useAccountMenuEnabled();

app/components/UI/BackupAlert/BackupAlert.tsx

@@ -21,7 +21,7 @@ import Icon, {
 import Text, {
   TextVariant,
 } from '../../../component-library/components/Texts/Text';
-import { useMetrics } from '../../../components/hooks/useMetrics';
+import { useAnalytics } from '../../../components/hooks/useAnalytics/useAnalytics';
 import Routes from '../../../constants/navigation/Routes';
 import { selectSeedlessOnboardingLoginFlow } from '../../../selectors/seedlessOnboardingController';
 import { RootState } from '../../../reducers';
@@ -44,7 +44,7 @@ const BLOCKED_LIST = [
 
 const BackupAlert = ({ navigation, onDismiss }: BackupAlertI) => {
   const { styles } = useStyles(styleSheet, {});
-  const { trackEvent, createEventBuilder } = useMetrics();
+  const { trackEvent, createEventBuilder } = useAnalytics();
   const [inBrowserView, setInBrowserView] = useState(false);
   const [inBlockedView, setInBlockedView] = useState(false);
   const [isVisible, setIsVisible] = useState(true);

app/components/UI/BalanceEmptyState/BalanceEmptyState.test.tsx

@@ -5,7 +5,9 @@ import { backgroundState } from '../../../util/test/initial-root-state';
 import BalanceEmptyState from './BalanceEmptyState';
 import { BalanceEmptyStateProps } from './BalanceEmptyState.types';
 import { RampsButtonClickData } from '../Ramp/hooks/useRampsButtonClickData';
-import { useMetrics } from '../../hooks/useMetrics';
+import { useAnalytics } from '../../hooks/useAnalytics/useAnalytics';
+import { createMockUseAnalyticsHook } from '../../../util/test/analyticsMock';
+import { MetaMetricsEvents } from '../../../core/Analytics';
 
 // Mock useRampNavigation hook
 const mockGoToBuy = jest.fn();
@@ -39,12 +41,7 @@ const mockEventBuilder = {
   build: jest.fn().mockReturnValue({ event: 'built' }),
 };
 
-jest.mock('../../hooks/useMetrics', () => ({
-  useMetrics: jest.fn(),
-  MetaMetricsEvents: {
-    RAMPS_BUTTON_CLICKED: 'ramps_button_clicked',
-  },
-}));
+jest.mock('../../hooks/useAnalytics/useAnalytics');
 
 jest.mock('../../../util/networks', () => ({
   getDecimalChainId: jest.fn(() => 1),
@@ -54,10 +51,12 @@ describe('BalanceEmptyState', () => {
   beforeEach(() => {
     jest.clearAllMocks();
     mockCreateEventBuilder.mockReturnValue(mockEventBuilder);
-    (useMetrics as jest.Mock).mockReturnValue({
-      trackEvent: mockTrackEvent,
-      createEventBuilder: mockCreateEventBuilder,
-    });
+    jest.mocked(useAnalytics).mockReturnValue(
+      createMockUseAnalyticsHook({
+        trackEvent: mockTrackEvent,
+        createEventBuilder: mockCreateEventBuilder,
+      }),
+    );
     mockUseRampsUnifiedV1Enabled.mockReturnValue(false);
   });
 
@@ -103,7 +102,9 @@ describe('BalanceEmptyState', () => {
 
     fireEvent.press(actionButton);
 
-    expect(mockCreateEventBuilder).toHaveBeenCalledWith('ramps_button_clicked');
+    expect(mockCreateEventBuilder).toHaveBeenCalledWith(
+      MetaMetricsEvents.RAMPS_BUTTON_CLICKED,
+    );
     expect(mockEventBuilder.addProperties).toHaveBeenCalledWith(
       expect.objectContaining({
         button_text: 'Add funds',
@@ -126,7 +127,9 @@ describe('BalanceEmptyState', () => {
 
     fireEvent.press(actionButton);
 
-    expect(mockCreateEventBuilder).toHaveBeenCalledWith('ramps_button_clicked');
+    expect(mockCreateEventBuilder).toHaveBeenCalledWith(
+      MetaMetricsEvents.RAMPS_BUTTON_CLICKED,
+    );
     expect(mockEventBuilder.addProperties).toHaveBeenCalledWith(
       expect.objectContaining({
         button_text: 'Add funds',

app/components/UI/BalanceEmptyState/BalanceEmptyState.tsx

@@ -16,7 +16,8 @@ import {
 } from '@metamask/design-system-react-native';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
 import { strings } from '../../../../locales/i18n';
-import { MetaMetricsEvents, useMetrics } from '../../hooks/useMetrics';
+import { MetaMetricsEvents } from '../../../core/Analytics';
+import { useAnalytics } from '../../hooks/useAnalytics/useAnalytics';
 import { getDecimalChainId } from '../../../util/networks';
 import { selectChainId } from '../../../selectors/networkController';
 import { trace, TraceName } from '../../../util/trace';
@@ -38,7 +39,7 @@ const BalanceEmptyState: React.FC<BalanceEmptyStateProps> = ({
 }) => {
   const tw = useTailwind();
   const chainId = useSelector(selectChainId);
-  const { trackEvent, createEventBuilder } = useMetrics();
+  const { trackEvent, createEventBuilder } = useAnalytics();
   const rampGeodetectedRegion = useSelector(getDetectedGeolocation);
   const { goToBuy } = useRampNavigation();
   const buttonClickData = useRampsButtonClickData();

app/components/UI/Bridge/hooks/useGoToPortfolioBridge.ts

@@ -9,7 +9,7 @@ import { selectEvmChainId } from '../../../../selectors/networkController';
 import type { BrowserTab } from '../../Tokens/types';
 import type { BrowserParams } from '../../../Views/Browser/Browser.types';
 import { getDecimalChainId } from '../../../../util/networks';
-import { useMetrics } from '../../../hooks/useMetrics';
+import { useAnalytics } from '../../../hooks/useAnalytics/useAnalytics';
 import { isBridgeUrl } from '../../../../util/url';
 import { useBuildPortfolioUrl } from '../../../hooks/useBuildPortfolioUrl';
 
@@ -24,7 +24,7 @@ export default function useGoToPortfolioBridge(location: string) {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const browserTabs = useSelector((state: any) => state.browser.tabs);
   const { navigate } = useNavigation();
-  const { trackEvent, createEventBuilder } = useMetrics();
+  const { trackEvent, createEventBuilder } = useAnalytics();
   const buildPortfolioUrlWithMetrics = useBuildPortfolioUrl();
   return (address?: string) => {
     const existingBridgeTab = browserTabs.find((tab: BrowserTab) =>

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

@@ -64,8 +64,8 @@ const mockTrackEvent = jest.fn();
 const mockCreateEventBuilder = jest.fn(() => ({
   build: () => ({ category: 'Banner Display', properties: {} }),
 }));
-jest.mock('../../../components/hooks/useMetrics', () => ({
-  useMetrics: () => ({
+jest.mock('../../../components/hooks/useAnalytics/useAnalytics', () => ({
+  useAnalytics: () => ({
     trackEvent: mockTrackEvent,
     createEventBuilder: mockCreateEventBuilder,
   }),

app/components/UI/Carousel/index.tsx

@@ -21,7 +21,7 @@ import {
   TextColor,
 } from '@metamask/design-system-react-native';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
-import { useMetrics } from '../../../components/hooks/useMetrics';
+import { useAnalytics } from '../../../components/hooks/useAnalytics/useAnalytics';
 import { WalletViewSelectorsIDs } from '../../Views/Wallet/WalletView.testIds';
 import { selectDismissedBanners } from '../../../selectors/banner';
 ///: BEGIN:ONLY_INCLUDE_IF(solana)
@@ -170,7 +170,7 @@ const CarouselComponent: FC<CarouselProps> = ({ style, onEmptyState }) => {
     carouselScaleY,
   });
 
-  const { trackEvent, createEventBuilder } = useMetrics();
+  const { trackEvent, createEventBuilder } = useAnalytics();
   const hasBalance = useSelector(selectAddressHasTokenBalances);
   const dispatch = useDispatch();
   const { navigate } = useNavigation();

app/components/UI/OTAUpdatesModal/OTAUpdatesModal.test.tsx

@@ -126,8 +126,8 @@ const mockCreateEventBuilder = jest.fn((event: string): MockEventBuilder => {
 
 const mockTrackEvent = jest.fn();
 
-jest.mock('../../hooks/useMetrics', () => ({
-  useMetrics: () => ({
+jest.mock('../../hooks/useAnalytics/useAnalytics', () => ({
+  useAnalytics: () => ({
     trackEvent: mockTrackEvent,
     createEventBuilder: mockCreateEventBuilder,
   }),

app/components/UI/OTAUpdatesModal/OTAUpdatesModal.tsx

@@ -17,7 +17,7 @@ import Logger from '../../../util/Logger';
 import { useAssetFromTheme } from '../../../util/theme';
 import { MetaMetricsEvents } from '../../../core/Analytics';
 import generateDeviceAnalyticsMetaData from '../../../util/metrics';
-import { useMetrics } from '../../hooks/useMetrics';
+import { useAnalytics } from '../../hooks/useAnalytics/useAnalytics';
 import BottomSheet, {
   BottomSheetRef,
 } from '../../../component-library/components/BottomSheets/BottomSheet';
@@ -35,7 +35,7 @@ export const createOTAUpdatesModalNavDetails = createNavigationDetails(
 
 const OTAUpdatesModal = () => {
   const tw = useTailwind();
-  const { trackEvent, createEventBuilder } = useMetrics();
+  const { trackEvent, createEventBuilder } = useAnalytics();
   const bottomSheetRef = useRef<BottomSheetRef | null>(null);
   const metamaskName = useAssetFromTheme(
     metamaskNameLightMode,

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

@@ -28,6 +28,32 @@ jest.mock('../../../util/analytics/analytics', () => ({
   },
 }));
 
+// Override global useAnalytics mock so calls proxy through to the mocked analytics module above
+jest.mock('../../hooks/useAnalytics/useAnalytics', () => {
+  const { AnalyticsEventBuilder } = jest.requireActual(
+    '../../../util/analytics/AnalyticsEventBuilder',
+  );
+  const { analytics: a } = jest.requireMock(
+    '../../../util/analytics/analytics',
+  );
+  return {
+    useAnalytics: () => ({
+      trackEvent: (event: unknown) => a.trackEvent(event),
+      createEventBuilder: AnalyticsEventBuilder.createEventBuilder,
+      enable: async (enable: boolean) => {
+        if (enable === false) {
+          await a.optOut();
+        } else {
+          await a.optIn();
+        }
+      },
+      identify: (traits: unknown) => a.identify(traits),
+      isEnabled: () => a.isEnabled(),
+      getAnalyticsId: () => a.getAnalyticsId(),
+    }),
+  };
+});
+
 // Mock MetaMetrics for events and getInstance
 jest.mock('../../../core/Analytics/MetaMetrics', () => ({
   MetaMetricsEvents: jest.requireActual('../../../core/Analytics/MetaMetrics')

app/components/UI/OptinMetrics/index.tsx

@@ -31,7 +31,9 @@ import { useDispatch, useSelector } from 'react-redux';
 import { clearOnboardingEvents } from '../../../actions/onboarding';
 import { selectOnboardingAccountType } from '../../../selectors/onboarding';
 import { setDataCollectionForMarketing } from '../../../actions/security';
-import { MetaMetricsEvents, useMetrics } from '../../hooks/useMetrics';
+import { MetaMetricsEvents } from '../../../core/Analytics';
+import { AnalyticsEventBuilder } from '../../../util/analytics/AnalyticsEventBuilder';
+import { useAnalytics } from '../../hooks/useAnalytics/useAnalytics';
 import { markMetricsOptInUISeen } from '../../../util/metrics/metricsOptInUIUtils';
 import { MetaMetricsOptInSelectorsIDs } from './MetaMetricsOptIn.testIds';
 import Checkbox from '../../../component-library/components/Checkbox';
@@ -73,7 +75,7 @@ const OptinMetrics = () => {
       >
     >();
   const tw = useTailwind();
-  const metrics = useMetrics();
+  const metrics = useAnalytics();
 
   // Redux state selectors
   const events = useSelector((state: RootState) => state.onboarding.events);
@@ -198,7 +200,7 @@ const OptinMetrics = () => {
         .build(),
     );
 
-    await metrics.addTraitsToUser({
+    await metrics.identify({
       ...generateDeviceAnalyticsMetaData(),
       ...generateUserSettingsAnalyticsMetaData(),
       [UserProfileProperty.CHAIN_IDS]: getConfiguredCaipChainIds(),
@@ -217,7 +219,10 @@ const OptinMetrics = () => {
         // as precision is only to the milisecond
         // and loop seems to runs faster than that
         setTimeout(() => {
-          metrics.trackEvent(...eventArgs);
+          const event = AnalyticsEventBuilder.createEventBuilder(
+            eventArgs[0],
+          ).build();
+          metrics.trackEvent(event);
         }, delay);
         delay += eventTrackingDelay;
       });

app/components/UI/ProtectYourWalletModal/index.js

@@ -25,7 +25,8 @@ import { strings } from '../../../../locales/i18n';
 import scaling from '../../../util/scaling';
 import { MetaMetricsEvents } from '../../../core/Analytics/MetaMetrics.events';
 import { ProtectWalletModalSelectorsIDs } from './ProtectWalletModal.testIds';
-import { withAnalyticsAwareness } from '../../../components/hooks/useAnalytics/withAnalyticsAwareness';
+import { analytics } from '../../../util/analytics/analytics';
+import { AnalyticsEventBuilder } from '../../../util/analytics/AnalyticsEventBuilder';
 import { selectSeedlessOnboardingLoginFlow } from '../../../selectors/seedlessOnboardingController';
 
 import protectWalletImage from '../../../images/explain-backup-seedphrase.png';
@@ -36,7 +37,6 @@ class ProtectYourWalletModal extends PureComponent {
     protectWalletModalNotVisible: PropTypes.func,
     protectWalletModalVisible: PropTypes.bool,
     passwordSet: PropTypes.bool,
-    analytics: PropTypes.object,
     isSeedlessOnboardingLoginFlow: PropTypes.bool,
   };
 
@@ -46,9 +46,10 @@ class ProtectYourWalletModal extends PureComponent {
       'SetPasswordFlow',
       this.props.passwordSet ? { screen: 'AccountBackupStep1' } : undefined,
     );
-    this.props.analytics.trackEvent(
-      this.props.analytics
-        .createEventBuilder(MetaMetricsEvents.WALLET_SECURITY_PROTECT_ENGAGED)
+    analytics.trackEvent(
+      AnalyticsEventBuilder.createEventBuilder(
+        MetaMetricsEvents.WALLET_SECURITY_PROTECT_ENGAGED,
+      )
         .addProperties({
           wallet_protection_required: false,
           source: 'Modal',
@@ -70,9 +71,10 @@ class ProtectYourWalletModal extends PureComponent {
 
   onDismiss = () => {
     this.props.protectWalletModalNotVisible();
-    this.props.analytics.trackEvent(
-      this.props.analytics
-        .createEventBuilder(MetaMetricsEvents.WALLET_SECURITY_PROTECT_DISMISSED)
+    analytics.trackEvent(
+      AnalyticsEventBuilder.createEventBuilder(
+        MetaMetricsEvents.WALLET_SECURITY_PROTECT_DISMISSED,
+      )
         .addProperties({
           wallet_protection_required: false,
           source: 'Modal',
@@ -174,4 +176,4 @@ const mapDispatchToProps = (dispatch) => ({
 export default connect(
   mapStateToProps,
   mapDispatchToProps,
-)(withAnalyticsAwareness(ProtectYourWalletModal));
+)(ProtectYourWalletModal);