feat(NOTIFY-1096): add account syncing

app/actions/notification/helpers/index.ts

@@ -171,19 +171,28 @@ export const markMetamaskNotificationsAsRead = async (
     return getErrorMessage(error);
   }
 };
+
+export const syncInternalAccountsWithUserStorage = async () => {
+  try {
+    await Engine.context.UserStorageController.syncInternalAccountsWithUserStorage();
+  } catch (error) {
+    return getErrorMessage(error);
+  }
+};
+
 /**
  * Perform the deletion of the notifications storage key and the creation of on chain triggers to reset the notifications.
  *
  * @returns {Promise<string | undefined>} A promise that resolves to a string error message or undefined if successful.
  */
 export const performDeleteStorage = async (): Promise<string | undefined> => {
   try {
-   await Engine.context.UserStorageController.performDeleteStorage('notifications.notification_settings');
-   await Engine.context.NotificationServicesController.createOnChainTriggers(
-    {
+    await Engine.context.UserStorageController.performDeleteStorage(
+      'notifications.notification_settings',
+    );
+    await Engine.context.NotificationServicesController.createOnChainTriggers({
       resetNotifications: true,
-    },
-  );
+    });
   } catch (error) {
     return getErrorMessage(error);
   }

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,40 @@ describe('Wallet', () => {
     const foxIcon = screen.getByTestId(CommonSelectorsIDs.FOX_ICON);
     expect(foxIcon).toBeDefined();
   });
+  it('dispatches 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('dispatches 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).toHaveBeenCalledWith(
+      'change',
+      expect.any(Function),
+    );
+    const handleAppStateChange = (
+      addEventListener as jest.Mock
+    ).mock.calls.find(([event]) => event === 'change')[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

@@ -104,6 +104,8 @@ import {
 } from '../../../selectors/notifications';
 import { ButtonVariants } from '../../../component-library/components/Buttons/Button';
 import { useListNotifications } from '../../../util/notifications/hooks/useNotifications';
+import { useAccountSyncing } from '../../../util/notifications/hooks/useAccountSyncing';
+
 import { PortfolioBalance } from '../../UI/Tokens/TokenList/PortfolioBalance';
 import { isObject } from 'lodash';
 
@@ -171,6 +173,7 @@ const Wallet = ({
   const appState = useRef(AppState.currentState);
   const { navigate } = useNavigation();
   const { listNotifications } = useListNotifications();
+  const { dispatchAccountSyncing } = useAccountSyncing();
   const walletRef = useRef(null);
   const theme = useTheme();
   const { toastRef } = useContext(ToastContext);
@@ -447,13 +450,17 @@ const Wallet = ({
     [navigation, providerConfig.chainId],
   );
 
+  // Layout effect when component/view is visible
+  // - fetches notifications
+  // - dispatches account syncing
   useLayoutEffect(() => {
     const handleAppStateChange = (nextAppState: AppStateStatus) => {
       if (
-        appState.current.match(/inactive|background/) &&
+        appState.current?.match(/inactive|background/) &&
         nextAppState === 'active'
       ) {
         listNotifications();
+        dispatchAccountSyncing();
       }
 
       appState.current = nextAppState;
@@ -463,11 +470,14 @@ const Wallet = ({
       'change',
       handleAppStateChange,
     );
+
     listNotifications();
+    dispatchAccountSyncing();
+
     return () => {
       subscription.remove();
     };
-  }, [listNotifications]);
+  }, [listNotifications, dispatchAccountSyncing]);
 
   useEffect(() => {
     navigation.setOptions(

app/core/Analytics/MetaMetrics.events.ts

@@ -374,6 +374,9 @@ enum EVENT_NAME {
   PRIMARY_CURRENCY_TOGGLE = 'primary_currency_toggle',
   LOGIN_DOWNLOAD_LOGS = 'Download State Logs Button Clicked',
 
+  // Profile Syncing
+  ACCOUNTS_SYNC_ADDED = 'Accounts Sync Added',
+  ACCOUNTS_SYNC_NAME_UPDATED = 'Accounts Sync Name Updated',
   // network
   MULTI_RPC_MIGRATION_MODAL_ACCEPTED = 'multi_rpc_migration_modal_accepted',
 
@@ -865,7 +868,11 @@ const events = {
   ),
   PRIMARY_CURRENCY_TOGGLE: generateOpt(EVENT_NAME.PRIMARY_CURRENCY_TOGGLE),
   LOGIN_DOWNLOAD_LOGS: generateOpt(EVENT_NAME.LOGIN_DOWNLOAD_LOGS),
-
+  // Profile Syncing
+  ACCOUNTS_SYNC_ADDED: generateOpt(EVENT_NAME.ACCOUNTS_SYNC_ADDED),
+  ACCOUNTS_SYNC_NAME_UPDATED: generateOpt(
+    EVENT_NAME.ACCOUNTS_SYNC_NAME_UPDATED,
+  ),
   // Connection
   CONNECTION_DROPPED: generateOpt(EVENT_NAME.CONNECTION_DROPPED),
   CONNECTION_RESTORED: generateOpt(EVENT_NAME.CONNECTION_RESTORED),

app/core/Engine.ts

@@ -128,7 +128,7 @@ import {
 } from '@metamask/snaps-controllers';
 
 import { WebViewExecutionService } from '@metamask/snaps-controllers/react-native';
-import { NotificationArgs } from '@metamask/snaps-rpc-methods/dist/types/restricted/notify';
+import { NotificationParameters } from '@metamask/snaps-rpc-methods/dist/restricted/notify.cjs';
 import { getSnapsWebViewPromise } from '../lib/snaps';
 import {
   buildSnapEndowmentSpecifications,
@@ -902,7 +902,7 @@ export class Engine {
           type,
           requestData: { content, placeholder },
         }),
-      showInAppNotification: (origin: string, args: NotificationArgs) => {
+      showInAppNotification: (origin: string, args: NotificationParameters) => {
         Logger.log(
           'Snaps/ showInAppNotification called with args: ',
           args,
@@ -1226,26 +1226,55 @@ export class Engine {
 
     const userStorageController = new UserStorageController.Controller({
       getMetaMetricsState: () => MetaMetrics.getInstance().isEnabled(),
+      env: {
+        isAccountSyncingEnabled: Boolean(process.env.IS_TEST),
+      },
+      config: {
+        accountSyncing: {
+          onAccountAdded: (profileId) => {
+            MetaMetrics.getInstance().trackEvent(
+              MetricsEventBuilder.createEventBuilder(
+                MetaMetricsEvents.ACCOUNTS_SYNC_ADDED,
+              )
+                .addProperties({
+                  profile_id: profileId,
+                })
+                .build(),
+            );
+          },
+          onAccountNameUpdated: (profileId) => {
+            MetaMetrics.getInstance().trackEvent(
+              MetricsEventBuilder.createEventBuilder(
+                MetaMetricsEvents.ACCOUNTS_SYNC_NAME_UPDATED,
+              )
+                .addProperties({
+                  profile_id: profileId,
+                })
+                .build(),
+            );
+          },
+        },
+      },
       state: initialState.UserStorageController,
       messenger: this.controllerMessenger.getRestricted({
         name: 'UserStorageController',
         allowedActions: [
           'SnapController:handleRequest',
           'KeyringController:getState',
+          'KeyringController:addNewAccount',
           'AuthenticationController:getBearerToken',
           'AuthenticationController:getSessionProfile',
           'AuthenticationController:isSignedIn',
           'AuthenticationController:performSignOut',
           'AuthenticationController:performSignIn',
           'NotificationServicesController:disableNotificationServices',
           'NotificationServicesController:selectIsNotificationServicesEnabled',
-          'KeyringController:addNewAccount',
           'AccountsController:listAccounts',
           'AccountsController:updateAccountMetadata',
         ],
         allowedEvents: [
-          'KeyringController:lock',
           'KeyringController:unlock',
+          'KeyringController:lock',
           'AccountsController:accountAdded',
           'AccountsController:accountRenamed',
         ],

app/util/notifications/hooks/useAccountSyncing.test.tsx

@@ -0,0 +1,102 @@
+/* eslint-disable import/no-namespace */
+/* eslint-disable react/prop-types */
+/* eslint-disable react/display-name */
+/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable @typescript-eslint/no-require-imports */
+import { act, renderHook } from '@testing-library/react-hooks';
+import React from 'react';
+import { Provider } from 'react-redux';
+import createMockStore from 'redux-mock-store';
+import * as Actions from '../../../actions/notification/helpers';
+import initialRootState from '../../../util/test/initial-root-state';
+import { useAccountSyncing } from './useAccountSyncing';
+
+function arrangeStore() {
+  const store = createMockStore()(initialRootState);
+
+  // Ensure dispatch mocks are handled correctly
+  store.dispatch = jest.fn().mockImplementation((action) => {
+    if (typeof action === 'function') {
+      return action(store.dispatch, store.getState);
+    }
+    return Promise.resolve();
+  });
+
+  return store;
+}
+
+describe('useAccountSyncing', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  function arrangeHook() {
+    const store = arrangeStore();
+    const hook = renderHook(() => useAccountSyncing(), {
+      wrapper: ({ children }) => <Provider store={store}>{children}</Provider>,
+    });
+
+    return hook;
+  }
+
+  function arrangeActions() {
+    const syncInternalAccountsWithUserStorageAction = jest
+      .spyOn(Actions, 'syncInternalAccountsWithUserStorage')
+      .mockResolvedValue(undefined);
+
+    return {
+      syncInternalAccountsWithUserStorageAction,
+    };
+  }
+
+  it('dispatches account syncing and error as undefined', async () => {
+    const mockActions = arrangeActions();
+
+    const { result } = arrangeHook();
+    await act(async () => {
+      await result.current.dispatchAccountSyncing();
+    });
+
+    expect(
+      mockActions.syncInternalAccountsWithUserStorageAction,
+    ).toHaveBeenCalledTimes(1);
+    expect(result.current.error).toBeUndefined();
+  });
+
+  it('sets error message when syncInternalAccountsWithUserStorageAction returns an error', async () => {
+    const mockActions = arrangeActions();
+    mockActions.syncInternalAccountsWithUserStorageAction.mockRejectedValueOnce(
+      new Error('MOCK - failed to sync internal account with user storage'),
+    );
+
+    const { result } = arrangeHook();
+    await act(async () => {
+      await result.current.dispatchAccountSyncing();
+    });
+
+    expect(
+      mockActions.syncInternalAccountsWithUserStorageAction,
+    ).toHaveBeenCalledTimes(1);
+    expect(result.current.error).toBeDefined();
+    expect(result.current.error).toEqual(
+      'MOCK - failed to sync internal account with user storage',
+    );
+  });
+
+  it('sets error message when an error occurs during dispatchAccountSyncing', async () => {
+    const mockActions = arrangeActions();
+    mockActions.syncInternalAccountsWithUserStorageAction.mockRejectedValueOnce(
+      new Error('MOCK - failed to sync internal account with user storage'),
+    );
+
+    const { result } = arrangeHook();
+    await act(async () => {
+      await result.current.dispatchAccountSyncing();
+    });
+
+    expect(result.current.error).toBeDefined();
+    expect(result.current.error).toEqual(
+      'MOCK - failed to sync internal account with user storage',
+    );
+  });
+});

app/util/notifications/hooks/useAccountSyncing.ts

@@ -0,0 +1,32 @@
+import { useState, useCallback } from 'react';
+import { getErrorMessage } from '../../../util/errorHandling';
+import { syncInternalAccountsWithUserStorage as syncInternalAccountsWithUserStorageAction } from '../../../actions/notification/helpers';
+
+/**
+ * Custom hook to dispatch account syncing.
+ *
+ * @returns An object containing the `dispatchAccountSyncing` function, and error state.
+ */
+export const useAccountSyncing = () => {
+  const [error, setError] = useState<string>();
+
+  const dispatchAccountSyncing = useCallback(async () => {
+    setError(undefined);
+    try {
+      const errorMessage = await syncInternalAccountsWithUserStorageAction();
+      if (errorMessage) {
+        setError(getErrorMessage(errorMessage));
+        return errorMessage;
+      }
+    } catch (e) {
+      const errorMessage = getErrorMessage(e);
+      setError(errorMessage);
+      return errorMessage;
+    }
+  }, []);
+
+  return {
+    dispatchAccountSyncing,
+    error,
+  };
+};

app/util/notifications/hooks/useProfileSyncing.ts

@@ -1,4 +1,3 @@
-/* eslint-disable import/prefer-default-export */
 import { useState, useCallback } from 'react';
 import { ProfileSyncingReturn } from './types';
 import { getErrorMessage } from '../../../util/errorHandling';