feat(NOTIFY-1096): add account syncing

app/components/Views/Wallet/index.test.tsx

@@ -1,13 +1,15 @@
 import React from 'react';
 import Wallet from './';
 import { renderScreen } from '../../../util/test/renderWithProvider';
-import { screen } from '@testing-library/react-native';
+import { act, screen } from '@testing-library/react-native';
 import ScrollableTabView from 'react-native-scrollable-tab-view';
 import Routes from '../../../constants/navigation/Routes';
 import { backgroundState } from '../../../util/test/initial-root-state';
 import { createMockAccountsControllerState } from '../../../util/test/accountsControllerTestUtils';
 import { WalletViewSelectorsIDs } from '../../../../e2e/selectors/wallet/WalletView.selectors';
 import { CommonSelectorsIDs } from '../../../../e2e/selectors/Common.selectors';
+import { useAccountSyncing } from '../../../util/notifications/hooks/useAccountSyncing';
+import { AppState } from 'react-native';
 
 const MOCK_ADDRESS = '0xc4955c0d639d99699bfd7ec54d9fafee40e4d272';
 
@@ -108,6 +110,13 @@ jest.mock('react-native-scrollable-tab-view', () => {
   return ScrollableTabViewMock;
 });
 
+jest.mock('../../../util/notifications/hooks/useAccountSyncing', () => ({
+  useAccountSyncing: jest.fn().mockReturnValue({
+    dispatchAccountSyncing: jest.fn(),
+    error: undefined,
+  }),
+}));
+
 const render = (Component: React.ComponentType) =>
   renderScreen(
     Component,
@@ -144,4 +153,36 @@ describe('Wallet', () => {
     const foxIcon = screen.getByTestId(CommonSelectorsIDs.FOX_ICON);
     expect(foxIcon).toBeDefined();
   });
+  it('should dispatch account syncing on mount', () => {
+    jest.clearAllMocks();
+    //@ts-expect-error we are ignoring the navigation params on purpose because we do not want to mock setOptions to test the navbar
+    render(Wallet);
+    expect(useAccountSyncing().dispatchAccountSyncing).toHaveBeenCalledTimes(1);
+  });
+  it('should dispatch account syncing when appState switches from inactive|background to active', () => {
+    jest.clearAllMocks();
+
+    const addEventListener = jest.spyOn(AppState, 'addEventListener');
+
+    //@ts-expect-error we are ignoring the navigation params on purpose because we do not want to mock setOptions to test the navbar
+    render(Wallet);
+
+    expect(addEventListener).toHaveBeenCalledTimes(1);
+
+    const handleAppStateChange = addEventListener.mock.calls[0][1];
+
+    act(() => {
+      handleAppStateChange('background');
+      handleAppStateChange('active');
+    });
+
+    expect(useAccountSyncing().dispatchAccountSyncing).toHaveBeenCalledTimes(2);
+
+    act(() => {
+      handleAppStateChange('inactive');
+      handleAppStateChange('active');
+    });
+
+    expect(useAccountSyncing().dispatchAccountSyncing).toHaveBeenCalledTimes(3);
+  });
 });

app/components/Views/Wallet/index.tsx

@@ -452,7 +452,7 @@ const Wallet = ({
   useLayoutEffect(() => {
     const handleAppStateChange = (nextAppState: AppStateStatus) => {
       if (
-        appState.current.match(/inactive|background/) &&
+        appState.current?.match(/inactive|background/) &&
         nextAppState === 'active'
       ) {
         listNotifications();

app/core/Engine.ts

@@ -252,6 +252,7 @@ import { HandleSnapRequestArgs } from './Snaps/types';
 import { handleSnapRequest } from './Snaps/utils';
 ///: END:ONLY_INCLUDE_IF
 import { trace } from '../util/trace';
+import { MetricsEventBuilder } from './Analytics/MetricsEventBuilder';
 
 const NON_EMPTY = 'NON_EMPTY';
 
@@ -515,7 +516,7 @@ class Engine {
       showApprovalRequest: () => undefined,
       typesExcludedFromRateLimiting: [
         ApprovalType.Transaction,
-        ApprovalType.WatchAsset
+        ApprovalType.WatchAsset,
       ],
     });
 
@@ -1220,18 +1221,24 @@ class Engine {
         accountSyncing: {
           onAccountAdded: (profileId) => {
             MetaMetrics.getInstance().trackEvent(
-              MetaMetricsEvents.ACCOUNTS_SYNC_ADDED,
-              {
-                profile_id: profileId,
-              },
+              MetricsEventBuilder.createEventBuilder(
+                MetaMetricsEvents.ACCOUNTS_SYNC_ADDED,
+              )
+                .addProperties({
+                  profile_id: profileId,
+                })
+                .build(),
             );
           },
           onAccountNameUpdated: (profileId) => {
             MetaMetrics.getInstance().trackEvent(
-              MetaMetricsEvents.ACCOUNTS_SYNC_NAME_UPDATED,
-              {
-                profile_id: profileId,
-              },
+              MetricsEventBuilder.createEventBuilder(
+                MetaMetricsEvents.ACCOUNTS_SYNC_NAME_UPDATED,
+              )
+                .addProperties({
+                  profile_id: profileId,
+                })
+                .build(),
             );
           },
         },