chore: social - traders list leaderboard

app/components/Views/Homepage/Homepage.test.tsx

@@ -169,6 +169,16 @@ jest.mock('../../../selectors/featureFlagController/socialLeaderboard', () => ({
   selectSocialLeaderboardEnabled: jest.fn(() => false),
 }));
 
+jest.mock('./Sections/TopTraders/hooks', () => ({
+  useTopTraders: jest.fn(() => ({
+    traders: [],
+    isLoading: false,
+    error: null,
+    refresh: jest.fn().mockResolvedValue(undefined),
+    toggleFollow: jest.fn(),
+  })),
+}));
+
 /** Shape of first argument to useHomeViewedEvent (for asserting in tests). */
 interface UseHomeViewedEventParamsSnapshot {
   sectionName?: string;

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

@@ -5,8 +5,32 @@ import TopTradersSection from './TopTradersSection';
 import Routes from '../../../../../constants/navigation/Routes';
 import { SectionRefreshHandle } from '../../types';
 
+const mockRefetch = jest.fn().mockResolvedValue(undefined);
 const mockNavigate = jest.fn();
 
+const mockTraders = [
+  {
+    id: 'trader-1',
+    rank: 1,
+    username: 'alice',
+    percentageChange: 96.2,
+    pnlValue: 963000,
+    isFollowing: false,
+  },
+];
+
+const mockUseTopTraders = jest.fn((_options?: unknown) => ({
+  traders: mockTraders,
+  isLoading: false,
+  error: null,
+  refresh: mockRefetch,
+  toggleFollow: jest.fn(),
+}));
+
+jest.mock('./hooks', () => ({
+  useTopTraders: (args: unknown) => mockUseTopTraders(args),
+}));
+
 jest.mock('@react-navigation/native', () => {
   const actual = jest.requireActual('@react-navigation/native');
   return {
@@ -47,6 +71,39 @@ describe('TopTradersSection', () => {
   beforeEach(() => {
     jest.clearAllMocks();
     mockSelectSocialLeaderboardEnabled.mockImplementation(() => true);
+    mockUseTopTraders.mockReturnValue({
+      traders: mockTraders,
+      isLoading: false,
+      error: null,
+      refresh: mockRefetch,
+      toggleFollow: jest.fn(),
+    });
+  });
+
+  it('returns null when the API returns no traders', () => {
+    mockUseTopTraders.mockReturnValue({
+      traders: [],
+      isLoading: false,
+      error: null,
+      refresh: mockRefetch,
+      toggleFollow: jest.fn(),
+    });
+    renderWithProvider(<TopTradersSection {...defaultProps} />);
+    expect(screen.queryByTestId('homepage-top-traders-carousel')).toBeNull();
+  });
+
+  it('renders skeletons while loading even when traders is empty', () => {
+    mockUseTopTraders.mockReturnValue({
+      traders: [],
+      isLoading: true,
+      error: null,
+      refresh: mockRefetch,
+      toggleFollow: jest.fn(),
+    });
+    renderWithProvider(<TopTradersSection {...defaultProps} />);
+    expect(
+      screen.getByTestId('homepage-top-traders-carousel'),
+    ).toBeOnTheScreen();
   });
 
   it('returns null when the feature flag is disabled', () => {

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

@@ -4,11 +4,12 @@ import React, {
   useImperativeHandle,
   useRef,
 } from 'react';
-import { ScrollView, View } from 'react-native';
+import { View } from 'react-native';
+import { ScrollView } from 'react-native-gesture-handler';
 import { useNavigation } from '@react-navigation/native';
 import { useSelector } from 'react-redux';
-import { useTailwind } from '@metamask/design-system-twrnc-preset';
 import { Box } from '@metamask/design-system-react-native';
+import { useTailwind } from '@metamask/design-system-twrnc-preset';
 import SectionHeader from '../../../../../component-library/components-temp/SectionHeader';
 import { SectionRefreshHandle } from '../../types';
 import { selectSocialLeaderboardEnabled } from '../../../../../selectors/featureFlagController/socialLeaderboard';
@@ -17,51 +18,65 @@ import Routes from '../../../../../constants/navigation/Routes';
 import useHomeViewedEvent, {
   HomeSectionNames,
 } from '../../hooks/useHomeViewedEvent';
+import { TopTraderCard, TopTraderCardSkeleton } from './components';
+import { useTopTraders } from './hooks';
+
+const HOME_TRADER_LIMIT = 3;
+const SKELETON_KEYS = Array.from(
+  { length: HOME_TRADER_LIMIT },
+  (_, i) => `home-trader-skeleton-${i}`,
+);
 
 interface TopTradersSectionProps {
   sectionIndex: number;
   totalSectionsLoaded: number;
 }
 
 /**
- * TopTradersSection — Social leaderboard section on the homepage.
+ * TopTradersSection -- Social leaderboard entry point on the homepage.
  *
- * Shows a horizontal carousel of top-performing traders.
- * Currently renders an empty placeholder carousel while the data layer is being built.
+ * Renders a section header plus a horizontally scrollable row of the
+ * top 3 trader cards. Tapping the header chevron navigates to the
+ * full TopTradersView.
  */
 const TopTradersSection = forwardRef<
   SectionRefreshHandle,
   TopTradersSectionProps
 >(({ sectionIndex, totalSectionsLoaded }, ref) => {
   const sectionViewRef = useRef<View>(null);
-  const tw = useTailwind();
   const navigation = useNavigation();
+  const tw = useTailwind();
   const isEnabled = useSelector(selectSocialLeaderboardEnabled);
   const title = strings('homepage.sections.top_traders');
 
+  const { traders, isLoading, refresh, toggleFollow } = useTopTraders({
+    limit: HOME_TRADER_LIMIT,
+    enabled: isEnabled,
+  });
+
   useImperativeHandle(
     ref,
     () => ({
-      refresh: async () => undefined,
+      refresh,
     }),
-    [],
+    [refresh],
   );
 
   const { onLayout } = useHomeViewedEvent({
     sectionRef: sectionViewRef,
-    isLoading: false,
+    isLoading,
     sectionName: HomeSectionNames.TOP_TRADERS,
     sectionIndex,
     totalSectionsLoaded,
-    isEmpty: true,
-    itemCount: 0,
+    isEmpty: traders.length === 0,
+    itemCount: traders.length,
   });
 
   const handleViewAll = useCallback(() => {
     navigation.navigate(Routes.SOCIAL_LEADERBOARD.VIEW as never);
   }, [navigation]);
 
-  if (!isEnabled) {
+  if (!isEnabled || (!isLoading && traders.length === 0)) {
     return null;
   }
 
@@ -73,12 +88,23 @@ const TopTradersSection = forwardRef<
     >
       <Box gap={3}>
         <SectionHeader title={title} onPress={handleViewAll} />
+
         <ScrollView
           horizontal
           showsHorizontalScrollIndicator={false}
-          contentContainerStyle={tw.style('px-4 gap-2.5')}
+          contentContainerStyle={tw.style('px-4 gap-3 pb-2')}
           testID="homepage-top-traders-carousel"
-        />
+        >
+          {isLoading
+            ? SKELETON_KEYS.map((key) => <TopTraderCardSkeleton key={key} />)
+            : traders.map((trader) => (
+                <TopTraderCard
+                  key={trader.id}
+                  trader={trader}
+                  onFollowPress={toggleFollow}
+                />
+              ))}
+        </ScrollView>
       </Box>
     </View>
   );

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

@@ -0,0 +1,61 @@
+import React from 'react';
+import { TouchableOpacity, View } from 'react-native';
+import { useTailwind } from '@metamask/design-system-twrnc-preset';
+import {
+  Text,
+  Icon,
+  IconName,
+  IconColor,
+  IconSize,
+} from '@metamask/design-system-react-native';
+import { strings } from '../../../../../../../locales/i18n';
+import type { NetworkFilterSelection } from '../types';
+
+export interface NetworkFilterButtonProps {
+  /** Currently selected network label (null = All networks) */
+  selectedNetwork: NetworkFilterSelection;
+  /** Called when the user taps the button */
+  onPress: () => void;
+  testID?: string;
+}
+
+/**
+ * NetworkFilterButton — compact dropdown-style button for filtering by network.
+ *
+ * Follows the same visual pattern as the FilterButton in the Trending section.
+ * Tapping opens the TrendingTokenNetworkBottomSheet managed by the parent.
+ */
+const NetworkFilterButton: React.FC<NetworkFilterButtonProps> = ({
+  selectedNetwork,
+  onPress,
+  testID,
+}) => {
+  const tw = useTailwind();
+
+  const label = selectedNetwork ?? strings('social_leaderboard.all_networks');
+
+  return (
+    <TouchableOpacity
+      testID={testID ?? 'top-traders-network-filter-button'}
+      onPress={onPress}
+      style={tw.style('self-start rounded-lg bg-muted py-2 px-3')}
+      activeOpacity={0.2}
+    >
+      <View style={tw`flex-row items-center justify-center gap-1`}>
+        <Text
+          twClassName="text-[14px] font-semibold text-default"
+          numberOfLines={1}
+        >
+          {label}
+        </Text>
+        <Icon
+          name={IconName.ArrowDown}
+          color={IconColor.IconAlternative}
+          size={IconSize.Xs}
+        />
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+export default NetworkFilterButton;