feat: add chain filter pills with client-side filtering (All, Base, S…

app/components/Views/Homepage/Sections/TopTraders/components/TopTraderCard.test.tsx

@@ -11,6 +11,7 @@ const baseTrader: TopTrader = {
   avatarUri: 'https://example.com/avatar.png',
   percentageChange: 43,
   pnlValue: 963146.8,
+  pnlPerChain: { base: 963146.8 },
   isFollowing: false,
 };
 

app/components/Views/Homepage/Sections/TopTraders/components/TraderRow.test.tsx

@@ -11,6 +11,7 @@ const baseTrader: TopTrader = {
   avatarUri: 'https://example.com/avatar.png',
   percentageChange: 43,
   pnlValue: 963146.8,
+  pnlPerChain: { base: 963146.8 },
   isFollowing: false,
 };
 

app/components/Views/Homepage/Sections/TopTraders/components/TraderRow.tsx

@@ -159,4 +159,4 @@ const TraderRow: React.FC<TraderRowProps> = ({
   );
 };
 
-export default TraderRow;
+export default React.memo(TraderRow);

app/components/Views/Homepage/Sections/TopTraders/components/index.ts

@@ -7,6 +7,3 @@ export { default as TopTraderCard } from './TopTraderCard';
 export type { TopTraderCardProps } from './TopTraderCard';
 
 export { default as TopTraderCardSkeleton } from './TopTraderCardSkeleton';
-
-export { default as NetworkFilterButton } from './NetworkFilterButton';
-export type { NetworkFilterButtonProps } from './NetworkFilterButton';

app/components/Views/Homepage/Sections/TopTraders/hooks/useTopTraders.test.ts

@@ -15,6 +15,7 @@ const mockTraders = [
     imageUrl: 'https://example.com/avatar1.png',
     pnl30d: 963146.8,
     roiPercent30d: 0.43,
+    pnlPerChain: { base: 963146.8 },
   },
   {
     rank: 2,
@@ -23,6 +24,7 @@ const mockTraders = [
     imageUrl: 'https://example.com/avatar2.png',
     pnl30d: 474751.45,
     roiPercent30d: 3.59,
+    pnlPerChain: { ethereum: 474751.45 },
   },
   {
     rank: 3,
@@ -31,6 +33,7 @@ const mockTraders = [
     imageUrl: 'https://example.com/avatar3.png',
     pnl30d: 374735.16,
     roiPercent30d: 6.17,
+    pnlPerChain: { solana: 374735.16 },
   },
 ];
 
@@ -92,6 +95,7 @@ describe('useTopTraders', () => {
         avatarUri: first.imageUrl,
         percentageChange: first.roiPercent30d * 100,
         pnlValue: first.pnl30d,
+        pnlPerChain: first.pnlPerChain ?? {},
         isFollowing: false,
       });
     });

app/components/Views/Homepage/Sections/TopTraders/hooks/useTopTraders.ts

@@ -67,6 +67,7 @@ export const useTopTraders = (
       avatarUri: entry.imageUrl ?? undefined,
       percentageChange: (entry.roiPercent30d ?? 0) * 100,
       pnlValue: entry.pnl30d,
+      pnlPerChain: entry.pnlPerChain ?? {},
       isFollowing: localFollowOverrides[entry.profileId] ?? false,
     }));
   }, [data, localFollowOverrides]);

app/components/Views/Homepage/Sections/TopTraders/types.ts

@@ -16,6 +16,8 @@ export interface TopTrader {
   percentageChange: number;
   /** Absolute PnL over 30 days in USD (raw number, formatted by the UI). */
   pnlValue: number;
+  /** PnL broken down by chain. Used for client-side chain filtering. */
+  pnlPerChain: Record<string, number>;
   /** Whether the current user is following this trader. */
   isFollowing: boolean;
 }

app/components/Views/SocialLeaderboard/TopTradersView/TopTradersView.test.tsx

@@ -32,6 +32,7 @@ const fixtureTraders: TopTrader[] = [
     avatarUri: 'https://example.com/avatar1.png',
     percentageChange: 43,
     pnlValue: 963146.8,
+    pnlPerChain: { base: 500000, ethereum: 463146.8 },
     isFollowing: false,
   },
   {
@@ -41,6 +42,7 @@ const fixtureTraders: TopTrader[] = [
     avatarUri: 'https://example.com/avatar2.png',
     percentageChange: 359,
     pnlValue: 474751.45,
+    pnlPerChain: { base: 474751.45 },
     isFollowing: false,
   },
   {
@@ -50,18 +52,21 @@ const fixtureTraders: TopTrader[] = [
     avatarUri: 'https://example.com/avatar3.png',
     percentageChange: 617,
     pnlValue: 374735.16,
+    pnlPerChain: { solana: 374735.16 },
     isFollowing: false,
   },
 ];
 
-const mockUseTopTraders: UseTopTradersResult = {
+const defaultUseTopTradersResult: UseTopTradersResult = {
   traders: fixtureTraders,
   isLoading: false,
   error: null,
   refresh: mockRefresh as () => Promise<void>,
   toggleFollow: mockToggleFollow,
 };
 
+const mockUseTopTradersHook = jest.fn(() => defaultUseTopTradersResult);
+
 const mockSelectSocialLeaderboardEnabled = jest.fn((): boolean => true);
 jest.mock(
   '../../../../selectors/featureFlagController/socialLeaderboard',
@@ -71,12 +76,14 @@ jest.mock(
 );
 
 jest.mock('../../Homepage/Sections/TopTraders/hooks', () => ({
-  useTopTraders: () => mockUseTopTraders,
+  useTopTraders: () => mockUseTopTradersHook(),
 }));
 
 describe('TopTradersView', () => {
   beforeEach(() => {
     jest.clearAllMocks();
+    mockUseTopTradersHook.mockImplementation(() => defaultUseTopTradersResult);
+    mockSelectSocialLeaderboardEnabled.mockReturnValue(true);
   });
 
   it('renders the container', () => {
@@ -178,4 +185,65 @@ describe('TopTradersView', () => {
     renderWithProvider(<TopTradersView />);
     expect(mockGoBack).toHaveBeenCalledTimes(1);
   });
+
+  it('renders all four chain filter pills', () => {
+    renderWithProvider(<TopTradersView />);
+    expect(
+      screen.getByTestId(TopTradersViewSelectorsIDs.CHAIN_FILTER_ALL),
+    ).toBeOnTheScreen();
+    expect(
+      screen.getByTestId(TopTradersViewSelectorsIDs.CHAIN_FILTER_BASE),
+    ).toBeOnTheScreen();
+    expect(
+      screen.getByTestId(TopTradersViewSelectorsIDs.CHAIN_FILTER_SOLANA),
+    ).toBeOnTheScreen();
+    expect(
+      screen.getByTestId(TopTradersViewSelectorsIDs.CHAIN_FILTER_ETHEREUM),
+    ).toBeOnTheScreen();
+  });
+
+  it('filters traders when a chain pill is tapped', () => {
+    renderWithProvider(<TopTradersView />);
+    fireEvent.press(
+      screen.getByTestId(TopTradersViewSelectorsIDs.CHAIN_FILTER_BASE),
+    );
+    expect(screen.getByText('sniperliquid.hl')).toBeOnTheScreen();
+    expect(screen.getByText('nervousdegen')).toBeOnTheScreen();
+    expect(screen.queryByText('baznocap')).not.toBeOnTheScreen();
+  });
+
+  it('shows all traders when All filter is tapped after filtering', () => {
+    renderWithProvider(<TopTradersView />);
+    fireEvent.press(
+      screen.getByTestId(TopTradersViewSelectorsIDs.CHAIN_FILTER_SOLANA),
+    );
+    expect(screen.queryByText('sniperliquid.hl')).not.toBeOnTheScreen();
+    fireEvent.press(
+      screen.getByTestId(TopTradersViewSelectorsIDs.CHAIN_FILTER_ALL),
+    );
+    expect(screen.getByText('sniperliquid.hl')).toBeOnTheScreen();
+    expect(screen.getByText('baznocap')).toBeOnTheScreen();
+  });
+
+  it('re-ranks traders within filtered results', () => {
+    renderWithProvider(<TopTradersView />);
+    fireEvent.press(
+      screen.getByTestId(TopTradersViewSelectorsIDs.CHAIN_FILTER_SOLANA),
+    );
+    expect(screen.getByText('1.')).toBeOnTheScreen();
+    expect(screen.queryByText('3.')).not.toBeOnTheScreen();
+  });
+
+  it('renders skeletons during initial load', () => {
+    mockUseTopTradersHook.mockReturnValueOnce({
+      ...defaultUseTopTradersResult,
+      isLoading: true,
+      traders: [],
+    });
+    renderWithProvider(<TopTradersView />);
+    expect(
+      screen.queryByTestId(TopTradersViewSelectorsIDs.CHAIN_FILTER_ALL),
+    ).toBeOnTheScreen();
+    expect(screen.queryByText('sniperliquid.hl')).not.toBeOnTheScreen();
+  });
 });

app/components/Views/SocialLeaderboard/TopTradersView/TopTradersView.testIds.ts

@@ -3,4 +3,8 @@ export const TopTradersViewSelectorsIDs = {
   BACK_BUTTON: 'top-traders-view-back-button',
   SEARCH_BUTTON: 'top-traders-view-search-button',
   TRADER_LIST: 'top-traders-view-list',
+  CHAIN_FILTER_ALL: 'chain-filter-all',
+  CHAIN_FILTER_BASE: 'chain-filter-base',
+  CHAIN_FILTER_SOLANA: 'chain-filter-solana',
+  CHAIN_FILTER_ETHEREUM: 'chain-filter-ethereum',
 };