MetaMask
diff --git a/‎app/components/Views/Homepage/Sections/TopTraders/hooks/useTopTraders.test.ts‎
Lines changed: 116 additions & 12 deletions b/‎app/components/Views/Homepage/Sections/TopTraders/hooks/useTopTraders.test.ts‎
Lines changed: 116 additions & 12 deletions
diff --git a/‎app/components/Views/Homepage/Sections/TopTraders/hooks/useTopTraders.ts‎
Lines changed: 6 additions & 28 deletions b/‎app/components/Views/Homepage/Sections/TopTraders/hooks/useTopTraders.ts‎
Lines changed: 6 additions & 28 deletions
diff --git a/‎app/components/Views/SocialLeaderboard/TraderProfileView/TraderProfileView.test.tsx‎
Lines changed: 8 additions & 8 deletions b/‎app/components/Views/SocialLeaderboard/TraderProfileView/TraderProfileView.test.tsx‎
Lines changed: 8 additions & 8 deletions
@@ -1,12 +1,37 @@
 import { renderHook, act } from '@testing-library/react-native';
+import { useSelector } from 'react-redux';
 import { useQuery } from '@metamask/react-data-query';
+import Engine from '../../../../../../core/Engine';
 import Logger from '../../../../../../util/Logger';
 import { useTopTraders } from './useTopTraders';
 
+jest.mock('react-redux', () => ({
+  useSelector: jest.fn().mockReturnValue([]),
+}));
+
+jest.mock('../../../../../../selectors/socialController', () => ({
+  selectFollowingProfileIds: jest.fn(),
+}));
+
 jest.mock('../../../../../../util/Logger', () => ({
   error: jest.fn(),
 }));
 
+jest.mock('../../../../../../core/Engine', () => ({
+  context: {
+    AuthenticationController: {
+      getSessionProfile: jest
+        .fn()
+        .mockResolvedValue({ profileId: 'mock-profile-id' }),
+    },
+  },
+  controllerMessenger: {
+    call: jest.fn(),
+    subscribe: jest.fn(),
+    unsubscribe: jest.fn(),
+  },
+}));
+
 const mockTraders = [
   {
     rank: 1,
@@ -43,6 +68,7 @@ jest.mock('@metamask/react-data-query');
 
 const mockRefetch = jest.fn();
 const mockUseQuery = useQuery as jest.MockedFunction<typeof useQuery>;
+const mockUseSelector = useSelector as jest.MockedFunction<typeof useSelector>;
 
 const makeQueryResult = (
   overrides: Partial<ReturnType<typeof useQuery>> = {},
@@ -59,6 +85,7 @@ describe('useTopTraders', () => {
   beforeEach(() => {
     jest.clearAllMocks();
     mockUseQuery.mockReturnValue(makeQueryResult());
+    mockUseSelector.mockReturnValue([]);
   });
 
   describe('data mapping', () => {
@@ -158,43 +185,120 @@ describe('useTopTraders', () => {
     });
   });
 
+  describe('isFollowing seeding from controller state', () => {
+    it('seeds isFollowing true for traders present in followingProfileIds', () => {
+      mockUseSelector.mockReturnValue([mockTraders[0].profileId]);
+      mockUseQuery.mockReturnValue(
+        makeQueryResult({ data: mockLeaderboardResponse as never }),
+      );
+      const { result } = renderHook(() => useTopTraders());
+      expect(result.current.traders[0].isFollowing).toBe(true);
+      expect(result.current.traders[1].isFollowing).toBe(false);
+    });
+  });
+
   describe('toggleFollow', () => {
     beforeEach(() => {
       mockUseQuery.mockReturnValue(
         makeQueryResult({ data: mockLeaderboardResponse as never }),
       );
+      (Engine.controllerMessenger.call as jest.Mock).mockResolvedValue({
+        followed: [],
+        unfollowed: [],
+      });
     });
 
-    it('sets isFollowing to true on the first toggle', () => {
+    it('calls followTrader when trader is not followed', async () => {
       const { result } = renderHook(() => useTopTraders());
-      const traderId = mockTraders[0].profileId;
 
-      act(() => {
-        result.current.toggleFollow(traderId);
+      await act(async () => {
+        await result.current.toggleFollow(mockTraders[0].profileId);
+      });
+
+      expect(Engine.controllerMessenger.call).toHaveBeenCalledWith(
+        'SocialController:followTrader',
+        {
+          addressOrUid: 'mock-profile-id',
+          targets: [mockTraders[0].profileId],
+        },
+      );
+    });
+
+    it('calls unfollowTrader when trader is already followed', async () => {
+      mockUseSelector.mockReturnValue([mockTraders[0].profileId]);
+      const { result } = renderHook(() => useTopTraders());
+
+      await act(async () => {
+        await result.current.toggleFollow(mockTraders[0].profileId);
+      });
+
+      expect(Engine.controllerMessenger.call).toHaveBeenCalledWith(
+        'SocialController:unfollowTrader',
+        {
+          addressOrUid: 'mock-profile-id',
+          targets: [mockTraders[0].profileId],
+        },
+      );
+    });
+
+    it('flips isFollowing optimistically for the tapped trader', async () => {
+      let resolveCall: (value: unknown) => void = () => undefined;
+      (Engine.controllerMessenger.call as jest.Mock).mockImplementation(
+        () =>
+          new Promise((resolve) => {
+            resolveCall = resolve;
+          }),
+      );
+      const { result } = renderHook(() => useTopTraders());
+
+      expect(result.current.traders[0].isFollowing).toBe(false);
+
+      await act(async () => {
+        result.current.toggleFollow(mockTraders[0].profileId);
       });
 
       expect(result.current.traders[0].isFollowing).toBe(true);
+      expect(result.current.traders[1].isFollowing).toBe(false);
+
+      await act(async () => {
+        resolveCall({ followed: [], unfollowed: [] });
+      });
     });
 
-    it('toggles isFollowing back to false on a second call', () => {
+    it('reverts optimistic isFollowing when the API call rejects', async () => {
+      (Engine.controllerMessenger.call as jest.Mock).mockRejectedValue(
+        new Error('boom'),
+      );
       const { result } = renderHook(() => useTopTraders());
-      const traderId = mockTraders[0].profileId;
 
-      act(() => result.current.toggleFollow(traderId));
-      act(() => result.current.toggleFollow(traderId));
+      await act(async () => {
+        await result.current.toggleFollow(mockTraders[0].profileId);
+      });
 
       expect(result.current.traders[0].isFollowing).toBe(false);
     });
 
-    it('does not affect other traders when one is toggled', () => {
+    it('ignores concurrent toggleFollow calls for the same trader while in flight', async () => {
+      let resolveCall: (value: unknown) => void = () => undefined;
+      (Engine.controllerMessenger.call as jest.Mock).mockImplementation(
+        () =>
+          new Promise((resolve) => {
+            resolveCall = resolve;
+          }),
+      );
       const { result } = renderHook(() => useTopTraders());
 
-      act(() => {
+      await act(async () => {
+        result.current.toggleFollow(mockTraders[0].profileId);
+      });
+      await act(async () => {
         result.current.toggleFollow(mockTraders[0].profileId);
       });
 
-      result.current.traders.slice(1).forEach((trader) => {
-        expect(trader.isFollowing).toBe(false);
+      expect(Engine.controllerMessenger.call).toHaveBeenCalledTimes(1);
+
+      await act(async () => {
+        resolveCall({ followed: [], unfollowed: [] });
       });
     });
   });
 
@@ -1,39 +1,26 @@
-import { useMemo, useCallback, useState, useEffect } from 'react';
+import { useMemo, useCallback, useEffect } from 'react';
 import { useQuery } from '@metamask/react-data-query';
 import type {
   LeaderboardResponse,
   FetchLeaderboardOptions,
 } from '@metamask/social-controllers';
 import Logger from '../../../../../../util/Logger';
+import { useFollowToggleMany } from '../../../../../hooks/useFollowToggle';
 import type { TopTrader } from '../types';
 
-/**
- * Result interface for the useTopTraders hook.
- */
 export interface UseTopTradersResult {
   traders: TopTrader[];
   isLoading: boolean;
   error: string | null;
   refresh: () => Promise<void>;
-  toggleFollow: (traderId: string) => void;
+  toggleFollow: (addressOrId: string) => void;
 }
 
 interface UseTopTradersOptions {
   limit?: number;
   enabled?: boolean;
 }
 
-/**
- * Hook that provides top traders data for the social leaderboard.
- *
- * Uses the Data Services Pattern -- `useQuery` from `@metamask/react-data-query`
- * resolves the `SocialService:fetchLeaderboard` query key through the messenger
- * adapter, so the SocialService handles caching, de-duplication, and retries.
- *
- * @param options - Optional configuration.
- * @param options.limit - Maximum number of traders to return.
- * @returns Object with traders, isLoading, error, refresh, toggleFollow
- */
 export const useTopTraders = (
   options?: UseTopTradersOptions,
 ): UseTopTradersResult => {
@@ -51,9 +38,7 @@ export const useTopTraders = (
     enabled: options?.enabled ?? true,
   });
 
-  const [localFollowOverrides, setLocalFollowOverrides] = useState<
-    Record<string, boolean>
-  >({});
+  const { isFollowing, toggleFollow } = useFollowToggleMany();
 
   const traders: TopTrader[] = useMemo(() => {
     if (!data?.traders) {
@@ -68,9 +53,9 @@ export const useTopTraders = (
       percentageChange: (entry.roiPercent30d ?? 0) * 100,
       pnlValue: entry.pnl30d,
       pnlPerChain: entry.pnlPerChain ?? {},
-      isFollowing: localFollowOverrides[entry.profileId] ?? false,
+      isFollowing: isFollowing(entry.profileId),
     }));
-  }, [data, localFollowOverrides]);
+  }, [data, isFollowing]);
 
   const refresh = useCallback(async () => {
     try {
@@ -81,13 +66,6 @@ export const useTopTraders = (
     }
   }, [refetch]);
 
-  const toggleFollow = useCallback((traderId: string) => {
-    setLocalFollowOverrides((prev) => ({
-      ...prev,
-      [traderId]: !prev[traderId],
-    }));
-  }, []);
-
   useEffect(() => {
     if (error) {
       Logger.error(error as Error, 'useTopTraders: leaderboard fetch failed');
 
@@ -1,15 +1,15 @@
+import type {
+  Position,
+  TraderProfileResponse,
+} from '@metamask/social-controllers';
+import { fireEvent, screen } from '@testing-library/react-native';
 import React from 'react';
-import { screen, fireEvent } from '@testing-library/react-native';
+import Routes from '../../../../constants/navigation/Routes';
 import renderWithProvider from '../../../../util/test/renderWithProvider';
+import type { UseTraderPositionsResult } from './hooks/useTraderPositions';
+import type { UseTraderProfileResult } from './hooks/useTraderProfile';
 import TraderProfileView from './TraderProfileView';
 import { TraderProfileViewSelectorsIDs } from './TraderProfileView.testIds';
-import Routes from '../../../../constants/navigation/Routes';
-import type { UseTraderProfileResult } from './hooks/useTraderProfile';
-import type { UseTraderPositionsResult } from './hooks/useTraderPositions';
-import type {
-  TraderProfileResponse,
-  Position,
-} from '@metamask/social-controllers';
 
 const mockGoBack = jest.fn();
 const mockNavigate = jest.fn();