feat: add chain filter pills with client-side filtering (All, Base, Solana, Ethereum)

Author: Bigshmow

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

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

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

@@ -26,6 +26,7 @@ const fixtureTraders: TopTrader[] = [
     avatarUri: 'https://example.com/avatar1.png',
     percentageChange: 43,
     pnlValue: 963146.8,
+    pnlPerChain: { base: 500000, ethereum: 463146.8 },
     isFollowing: false,
   },
   {
@@ -35,6 +36,7 @@ const fixtureTraders: TopTrader[] = [
     avatarUri: 'https://example.com/avatar2.png',
     percentageChange: 359,
     pnlValue: 474751.45,
+    pnlPerChain: { base: 474751.45 },
     isFollowing: false,
   },
   {
@@ -44,6 +46,7 @@ const fixtureTraders: TopTrader[] = [
     avatarUri: 'https://example.com/avatar3.png',
     percentageChange: 617,
     pnlValue: 374735.16,
+    pnlPerChain: { solana: 374735.16 },
     isFollowing: false,
   },
 ];

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

@@ -1,5 +1,5 @@
-import React, { useCallback, useState } from 'react';
-import { ScrollView } from 'react-native-gesture-handler';
+import React, { useCallback, useMemo, useState } from 'react';
+import { FlatList, TouchableOpacity } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
@@ -18,68 +18,88 @@ import {
 } from '@metamask/design-system-react-native';
 import { strings } from '../../../../../locales/i18n';
 import { TopTradersViewSelectorsIDs } from './TopTradersView.testIds';
-import { TrendingTokenNetworkBottomSheet } from '../../../UI/Trending/components/TrendingTokensBottomSheet';
 import {
   TraderRow,
   TraderRowSkeleton,
-  NetworkFilterButton,
 } from '../../Homepage/Sections/TopTraders/components';
 import { useTopTraders } from '../../Homepage/Sections/TopTraders/hooks';
-import type { NetworkFilterSelection } from '../../Homepage/Sections/TopTraders/types';
-import type { CaipChainId } from '@metamask/utils';
 
 const SKELETON_COUNT = 5;
 const SKELETON_KEYS = Array.from(
   { length: SKELETON_COUNT },
   (_, i) => `top-trader-skeleton-${i}`,
 );
 
-/**
- * TopTradersView — Social leaderboard detail screen.
- *
- * Displays the full ranked list of top-performing traders with
- * network filtering and Follow / Following actions.
- */
+type ChainFilter = 'all' | 'base' | 'solana' | 'ethereum';
+
+const CHAIN_FILTERS: { key: ChainFilter; label: string }[] = [
+  { key: 'all', label: 'All' },
+  { key: 'base', label: 'Base' },
+  { key: 'solana', label: 'Solana' },
+  { key: 'ethereum', label: 'Ethereum' },
+];
+
+interface ChainPillProps {
+  label: string;
+  isSelected: boolean;
+  onPress: () => void;
+}
+
+const ChainPill: React.FC<ChainPillProps> = ({
+  label,
+  isSelected,
+  onPress,
+}) => (
+  <TouchableOpacity
+    onPress={onPress}
+    testID={`chain-filter-${label.toLowerCase()}`}
+  >
+    <Box
+      twClassName={`px-4 py-2 rounded-xl border ${
+        isSelected ? 'bg-default border-white' : 'border-muted'
+      }`}
+    >
+      <Text
+        variant={TextVariant.BodySm}
+        fontWeight={FontWeight.Medium}
+        color={isSelected ? TextColor.TextDefault : TextColor.TextMuted}
+      >
+        {label}
+      </Text>
+    </Box>
+  </TouchableOpacity>
+);
+
 const TopTradersView = () => {
   const navigation = useNavigation();
   const tw = useTailwind();
 
-  const { traders, isLoading, toggleFollow } = useTopTraders();
+  const [selectedChain, setSelectedChain] = useState<ChainFilter>('all');
+
+  const { traders, isLoading, toggleFollow } = useTopTraders({ limit: 250 });
 
-  const [showNetworkBottomSheet, setShowNetworkBottomSheet] = useState(false);
-  const [selectedNetwork, setSelectedNetwork] =
-    useState<NetworkFilterSelection>(null);
+  const filteredTraders = useMemo(() => {
+    const filtered =
+      selectedChain === 'all'
+        ? traders
+        : traders.filter((t) => (t.pnlPerChain[selectedChain] ?? 0) !== 0);
+
+    return filtered.slice(0, 50).map((t, i) => ({ ...t, rank: i + 1 }));
+  }, [traders, selectedChain]);
 
   const handleBack = useCallback(() => {
     navigation.goBack();
   }, [navigation]);
 
   const handleSearchPress = useCallback(() => {
-    // Search UI will be wired when the leaderboard data layer ships.
-  }, []);
-
-  const handleNetworkPress = useCallback(() => {
-    setShowNetworkBottomSheet(true);
-  }, []);
-
-  const handleNetworkSelect = useCallback((chainIds: CaipChainId[] | null) => {
-    setSelectedNetwork(chainIds ? chainIds[0] : null);
+    // Search UI will be wired in a future ticket.
   }, []);
 
-  const handleNetworkBottomSheetClose = useCallback(() => {
-    setShowNetworkBottomSheet(false);
-  }, []);
-
-  const selectedNetworkCaip = selectedNetwork
-    ? ([selectedNetwork] as CaipChainId[])
-    : null;
-
   return (
     <SafeAreaView
       style={tw.style('flex-1 bg-default')}
       testID={TopTradersViewSelectorsIDs.CONTAINER}
     >
-      {/* Header row */}
       <Box
         flexDirection={BoxFlexDirection.Row}
         alignItems={BoxAlignItems.Center}
@@ -100,7 +120,6 @@ const TopTradersView = () => {
         />
       </Box>
 
-      {/* Title */}
       <Box twClassName="px-4 pt-2 pb-3">
         <Text
           variant={TextVariant.HeadingLg}
@@ -111,40 +130,36 @@ const TopTradersView = () => {
         </Text>
       </Box>
 
-      {/* Network filter */}
-      <Box twClassName="px-4 pb-3">
-        <NetworkFilterButton
-          selectedNetwork={selectedNetwork}
-          onPress={handleNetworkPress}
-          testID="top-traders-view-network-filter"
-        />
+      <Box
+        flexDirection={BoxFlexDirection.Row}
+        twClassName="px-4 pb-3 justify-between"
+      >
+        {CHAIN_FILTERS.map(({ key, label }) => (
+          <ChainPill
+            key={key}
+            label={label}
+            isSelected={selectedChain === key}
+            onPress={() => setSelectedChain(key)}
+          />
+        ))}
       </Box>
 
-      {/* Trader list */}
-      <ScrollView
-        showsVerticalScrollIndicator={false}
-        contentContainerStyle={tw.style('pb-6')}
-        testID="top-traders-view-list"
-      >
-        {isLoading
-          ? SKELETON_KEYS.map((key) => <TraderRowSkeleton key={key} />)
-          : traders.map((trader) => (
-              <TraderRow
-                key={trader.id}
-                trader={trader}
-                onFollowPress={toggleFollow}
-              />
-            ))}
-      </ScrollView>
-
-      {/* Network filter bottom sheet */}
-      <TrendingTokenNetworkBottomSheet
-        isVisible={showNetworkBottomSheet}
-        onClose={handleNetworkBottomSheetClose}
-        onNetworkSelect={handleNetworkSelect}
-        selectedNetwork={selectedNetworkCaip}
-        networks={[]}
-      />
+      {isLoading ? (
+        SKELETON_KEYS.map((key) => <TraderRowSkeleton key={key} />)
+      ) : (
+        <FlatList
+          data={filteredTraders}
+          keyExtractor={(item) => item.id}
+          renderItem={({ item }) => (
+            <TraderRow trader={item} onFollowPress={toggleFollow} />
+          )}
+          showsVerticalScrollIndicator={false}
+          contentContainerStyle={tw.style('pb-6')}
+          testID="top-traders-view-list"
+          initialNumToRender={15}
+          windowSize={5}
+        />
+      )}
     </SafeAreaView>
   );
 };