fix: accounts not syncing between devices bug (#11801)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

This PR fixed an issue preventing mobile accounts to sync its states
(enable/disable) with other clients (platform and extension).
[NOTIFY-1218](https://consensyssoftware.atlassian.net/browse/NOTIFY-1218?atlOrigin=eyJpIjoiZTRlYTlkNjVjOGVjNDAyYTljNmM3YTg2NjBiYzllNGYiLCJwIjoiaiJ9)

## **Related issues**

Fixes:

## **Manual testing steps**

1. Import the same SRP on Mobile
2. Make sure all accounts are visible on both devices/platforms. If not,
import all accounts
3. Switch Notifications state in account "A" on extension.
4. Go to Notifications Settings on mobile and see if the state is
propagated.
5. Switch back on mobile
6. Go to extension and see if state is propagated. 

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**


https://github.com/user-attachments/assets/860e2e46-f08a-45fd-b965-a9948ef59630


<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [x] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] 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.

## **Pre-merge reviewer checklist**

- [x] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [x] 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.


[NOTIFY-1218]:
https://consensyssoftware.atlassian.net/browse/NOTIFY-1218?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

app/components/Views/Settings/NotificationsSettings/AccountsList.test.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import renderWithProvider, { DeepPartial } from '../../../../util/test/renderWithProvider';
+import { AccountsList } from './AccountsList';
+import { AvatarAccountType } from '../../../../component-library/components/Avatars/Avatar';
+import { Account } from '../../../../components/hooks/useAccounts/useAccounts.types';
+import { MOCK_ACCOUNTS_CONTROLLER_STATE } from '../../../../util/test/accountsControllerTestUtils';
+import { Hex } from '@metamask/utils';
+import { KeyringTypes } from '@metamask/keyring-controller';
+import { toChecksumAddress } from 'ethereumjs-util';
+import { RootState } from '../../../../reducers';
+import { backgroundState } from '../../../../util/test/initial-root-state';
+
+const MOCK_ACCOUNT_ADDRESSES = Object.values(
+  MOCK_ACCOUNTS_CONTROLLER_STATE.internalAccounts.accounts,
+).map((account) => account.address);
+
+const MOCK_ACCOUNT_1: Account = {
+  name: 'Account 1',
+  address: toChecksumAddress(MOCK_ACCOUNT_ADDRESSES[0]) as Hex,
+  type: KeyringTypes.hd,
+  yOffset: 0,
+  isSelected: false,
+  assets: {
+    fiatBalance: '\n0 ETH',
+  },
+  balanceError: undefined,
+};
+const MOCK_ACCOUNT_2: Account = {
+  name: 'Account 2',
+  address: toChecksumAddress(MOCK_ACCOUNT_ADDRESSES[1]) as Hex,
+  type: KeyringTypes.hd,
+  yOffset: 78,
+  isSelected: true,
+  assets: {
+    fiatBalance: '\n< 0.00001 ETH',
+  },
+  balanceError: undefined,
+};
+
+const MOCK_ACCOUNTS = [MOCK_ACCOUNT_1, MOCK_ACCOUNT_2];
+
+const mockInitialState: DeepPartial<RootState> = {
+  engine: {
+    backgroundState: {
+      ...backgroundState,
+      NotificationServicesController: {
+        metamaskNotificationsList: [],
+      },
+    },
+  },
+};
+
+describe('AccountsList', () => {
+  it('matches snapshot', () => {
+
+    const { toJSON } = renderWithProvider(
+      <AccountsList
+        accounts={MOCK_ACCOUNTS}
+        accountAvatarType={AvatarAccountType.JazzIcon}
+        accountSettingsData={{}}
+        updateAndfetchAccountSettings={jest.fn()}
+        isUpdatingMetamaskNotificationsAccount={[]}
+      />,
+      {
+        state: mockInitialState,
+      },
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('triggers updateAndfetchAccountSettings on mount', () => {
+    const updateAndfetchAccountSettings = jest.fn();
+    renderWithProvider(
+      <AccountsList
+        accounts={MOCK_ACCOUNTS}
+        accountAvatarType={AvatarAccountType.JazzIcon}
+        accountSettingsData={{}}
+        updateAndfetchAccountSettings={updateAndfetchAccountSettings}
+        isUpdatingMetamaskNotificationsAccount={[]}
+      />,
+      {
+        state: mockInitialState,
+      },
+    );
+
+    expect(updateAndfetchAccountSettings).toHaveBeenCalledTimes(1);
+  });
+});

app/components/Views/Settings/NotificationsSettings/AccountsList.tsx

@@ -0,0 +1,53 @@
+import React, { useEffect } from 'react';
+import { FlatList, View } from 'react-native';
+import NotificationOptionToggle from './NotificationOptionToggle';
+import { Account } from '../../../../components/hooks/useAccounts/useAccounts.types';
+import { NotificationsToggleTypes } from './NotificationsSettings.constants';
+import { NotificationsAccountsState } from '../../../../core/redux/slices/notifications';
+import { AvatarAccountType } from '../../../../component-library/components/Avatars/Avatar';
+
+export const AccountsList = ({
+  accounts,
+  accountAvatarType,
+  accountSettingsData,
+  updateAndfetchAccountSettings,
+  isUpdatingMetamaskNotificationsAccount,
+}: {
+  accounts: Account[];
+  accountAvatarType: AvatarAccountType;
+  accountSettingsData: NotificationsAccountsState;
+  updateAndfetchAccountSettings: () => Promise<Record<string, boolean> | undefined>;
+  isUpdatingMetamaskNotificationsAccount: string[];
+}) => {
+
+  useEffect(() => {
+    const fetchInitialData = async () => {
+      await updateAndfetchAccountSettings();
+    };
+    fetchInitialData();
+  }, [updateAndfetchAccountSettings]);
+
+  return (
+    <View>
+      <FlatList
+      data={accounts}
+      keyExtractor={(item) => `address-${item.address}`}
+      renderItem={({ item }) => (
+        <NotificationOptionToggle
+          type={NotificationsToggleTypes.ACCOUNT}
+          icon={accountAvatarType}
+          key={item.address}
+          title={item.name}
+          address={item.address}
+          disabledSwitch={isUpdatingMetamaskNotificationsAccount.length > 0}
+          isLoading={isUpdatingMetamaskNotificationsAccount.includes(
+            item.address.toLowerCase(),
+          )}
+          isEnabled={accountSettingsData?.[item.address.toLowerCase()]}
+          updateAndfetchAccountSettings={updateAndfetchAccountSettings}
+          />
+    )}
+  />
+  </View>
+  );
+};

app/components/Views/Settings/NotificationsSettings/NotificationOptionToggle/index.tsx

@@ -34,7 +34,7 @@ interface NotificationOptionsToggleProps {
   disabledSwitch?: boolean;
   isLoading?: boolean;
   isEnabled: boolean;
-  refetchAccountSettings: () => Promise<void>;
+  updateAndfetchAccountSettings: () => Promise<Record<string, boolean> | undefined>;
 }
 
 /**
@@ -50,7 +50,7 @@ const NotificationOptionToggle = ({
   isEnabled,
   disabledSwitch,
   isLoading,
-  refetchAccountSettings,
+  updateAndfetchAccountSettings,
 }: NotificationOptionsToggleProps) => {
   const theme = useTheme();
   const { colors } = theme;
@@ -59,7 +59,7 @@ const NotificationOptionToggle = ({
 
   const { toggleAccount, loading: isUpdatingAccount } = useUpdateAccountSetting(
     address,
-    refetchAccountSettings,
+    updateAndfetchAccountSettings,
   );
 
   const loading = isLoading || isUpdatingAccount;
@@ -104,7 +104,7 @@ const NotificationOptionToggle = ({
         )}
       </View>
       <View style={styles.switchElement}>
-        {isLoading || loading ? (
+        {loading ? (
           <ActivityIndicator />
         ) : (
           <Switch

app/components/Views/Settings/NotificationsSettings/NotificationsSettings.styles.ts

@@ -60,7 +60,14 @@ const styleSheet = (params: { theme: Theme }) =>
     },
     button: {
       alignSelf: 'stretch',
-      marginBottom: 16,
+      marginBottom: 48,
+    },
+
+  });
+
+  export const styles = StyleSheet.create({
+    headerLeft: {
+      marginHorizontal: 16,
     },
   });