MetaMask
diff --git a/‎app/components/Views/SocialLeaderboard/TraderProfileView/TraderProfileView.test.tsx‎
Lines changed: 171 additions & 0 deletions b/‎app/components/Views/SocialLeaderboard/TraderProfileView/TraderProfileView.test.tsx‎
Lines changed: 171 additions & 0 deletions
diff --git a/‎app/components/Views/SocialLeaderboard/TraderProfileView/TraderProfileView.testIds.ts‎
Lines changed: 1 addition & 0 deletions b/‎app/components/Views/SocialLeaderboard/TraderProfileView/TraderProfileView.testIds.ts‎
Lines changed: 1 addition & 0 deletions
diff --git a/‎app/components/Views/SocialLeaderboard/TraderProfileView/TraderProfileView.tsx‎
Lines changed: 73 additions & 16 deletions b/‎app/components/Views/SocialLeaderboard/TraderProfileView/TraderProfileView.tsx‎
Lines changed: 73 additions & 16 deletions
diff --git a/‎app/components/Views/SocialLeaderboard/TraderProfileView/components/SortButton.tsx‎
Lines changed: 53 additions & 0 deletions b/‎app/components/Views/SocialLeaderboard/TraderProfileView/components/SortButton.tsx‎
Lines changed: 53 additions & 0 deletions
@@ -15,6 +15,12 @@ const mockGoBack = jest.fn();
 const mockNavigate = jest.fn();
 const mockToggleFollow = jest.fn();
 const mockRefresh = jest.fn();
+const mockPlaySelection = jest.fn().mockResolvedValue(undefined);
+
+jest.mock('../../../../util/haptics', () => ({
+  ...jest.requireActual('../../../../util/haptics'),
+  playSelection: (...args: unknown[]) => mockPlaySelection(...args),
+}));
 
 jest.mock('../../../UI/Bridge/hooks/useAssetMetadata/utils', () => ({
   getAssetImageUrl: () => 'https://example.com/token.png',
@@ -181,6 +187,60 @@ const fixtureOpenPositions: Position[] = [
   },
 ];
 
+const fixtureClosedPositions: Position[] = [
+  {
+    positionId: 'cult-eth',
+    tokenSymbol: 'CULT',
+    tokenName: 'Cult',
+    tokenAddress: '0xc01t',
+    chain: 'ethereum',
+    positionAmount: 0,
+    boughtUsd: 100,
+    soldUsd: 300,
+    realizedPnl: 200,
+    costBasis: 100,
+    trades: [],
+    lastTradeAt: 1000,
+    currentValueUSD: 0,
+    pnlValueUsd: 200,
+    pnlPercent: null,
+  },
+  {
+    positionId: 'moonkin-sol',
+    tokenSymbol: 'MOONKIN',
+    tokenName: 'Moonkin',
+    tokenAddress: '0xm00n',
+    chain: 'solana',
+    positionAmount: 0,
+    boughtUsd: 100,
+    soldUsd: 1000,
+    realizedPnl: 900,
+    costBasis: 100,
+    trades: [],
+    lastTradeAt: 3000,
+    currentValueUSD: 0,
+    pnlValueUsd: 900,
+    pnlPercent: null,
+  },
+  {
+    positionId: 'dope-base',
+    tokenSymbol: 'DOPE',
+    tokenName: 'Dope',
+    tokenAddress: '0xd0pe',
+    chain: 'base',
+    positionAmount: 0,
+    boughtUsd: 500,
+    soldUsd: 500,
+    realizedPnl: 0,
+    costBasis: 500,
+    trades: [],
+    lastTradeAt: 2000,
+    currentValueUSD: 0,
+    pnlValueUsd: 0,
+    pnlPercent: null,
+  },
+];
+
 let mockProfileResult: UseTraderProfileResult = {
   profile: fixtureProfile,
   isLoading: false,
@@ -436,4 +496,115 @@ describe('TraderProfileView', () => {
       expect(screen.getByText('45 followers')).toBeOnTheScreen();
     });
   });
+
+  describe('sort button', () => {
+    it('renders with default Value label on the Open tab', () => {
+      renderWithProvider(<TraderProfileView />);
+
+      expect(
+        screen.getByTestId(TraderProfileViewSelectorsIDs.SORT_BUTTON),
+      ).toBeOnTheScreen();
+      expect(screen.getByText('Value')).toBeOnTheScreen();
+    });
+
+    it('cycles Open tab sort Value -> P&L % -> Value on consecutive taps', () => {
+      renderWithProvider(<TraderProfileView />);
+
+      fireEvent.press(
+        screen.getByTestId(TraderProfileViewSelectorsIDs.SORT_BUTTON),
+      );
+      expect(screen.getByText('P&L %')).toBeOnTheScreen();
+
+      fireEvent.press(
+        screen.getByTestId(TraderProfileViewSelectorsIDs.SORT_BUTTON),
+      );
+      expect(screen.getByText('Value')).toBeOnTheScreen();
+    });
+
+    it('defaults Closed tab sort to Recent and cycles Recent -> Value -> P&L % -> Recent', () => {
+      mockPositionsResult.closedPositions = fixtureClosedPositions;
+      renderWithProvider(<TraderProfileView />);
+      fireEvent.press(
+        screen.getByTestId(TraderProfileViewSelectorsIDs.TAB_CLOSED),
+      );
+
+      expect(screen.getByText('Recent')).toBeOnTheScreen();
+
+      fireEvent.press(
+        screen.getByTestId(TraderProfileViewSelectorsIDs.SORT_BUTTON),
+      );
+      expect(screen.getByText('Value')).toBeOnTheScreen();
+
+      fireEvent.press(
+        screen.getByTestId(TraderProfileViewSelectorsIDs.SORT_BUTTON),
+      );
+      expect(screen.getByText('P&L %')).toBeOnTheScreen();
+
+      fireEvent.press(
+        screen.getByTestId(TraderProfileViewSelectorsIDs.SORT_BUTTON),
+      );
+      expect(screen.getByText('Recent')).toBeOnTheScreen();
+    });
+
+    it('preserves independent sort state when switching between tabs', () => {
+      mockPositionsResult.closedPositions = fixtureClosedPositions;
+      renderWithProvider(<TraderProfileView />);
+
+      fireEvent.press(
+        screen.getByTestId(TraderProfileViewSelectorsIDs.SORT_BUTTON),
+      );
+      expect(screen.getByText('P&L %')).toBeOnTheScreen();
+
+      fireEvent.press(
+        screen.getByTestId(TraderProfileViewSelectorsIDs.TAB_CLOSED),
+      );
+      expect(screen.getByText('Recent')).toBeOnTheScreen();
+
+      fireEvent.press(
+        screen.getByTestId(TraderProfileViewSelectorsIDs.SORT_BUTTON),
+      );
+      expect(screen.getByText('Value')).toBeOnTheScreen();
+
+      fireEvent.press(
+        screen.getByTestId(TraderProfileViewSelectorsIDs.TAB_OPEN),
+      );
+      expect(screen.getByText('P&L %')).toBeOnTheScreen();
+
+      fireEvent.press(
+        screen.getByTestId(TraderProfileViewSelectorsIDs.TAB_CLOSED),
+      );
+      expect(screen.getByText('Value')).toBeOnTheScreen();
+    });
+
+    it('triggers a haptic on each sort tap', () => {
+      renderWithProvider(<TraderProfileView />);
+
+      fireEvent.press(
+        screen.getByTestId(TraderProfileViewSelectorsIDs.SORT_BUTTON),
+      );
+      fireEvent.press(
+        screen.getByTestId(TraderProfileViewSelectorsIDs.SORT_BUTTON),
+      );
+
+      expect(mockPlaySelection).toHaveBeenCalledTimes(2);
+    });
+
+    it('hides the sort button when positions list is empty', () => {
+      mockPositionsResult.openPositions = [];
+      renderWithProvider(<TraderProfileView />);
+
+      expect(
+        screen.queryByTestId(TraderProfileViewSelectorsIDs.SORT_BUTTON),
+      ).not.toBeOnTheScreen();
+    });
+
+    it('hides the sort button while positions are loading', () => {
+      mockPositionsResult.isLoadingOpen = true;
+      renderWithProvider(<TraderProfileView />);
+
+      expect(
+        screen.queryByTestId(TraderProfileViewSelectorsIDs.SORT_BUTTON),
+      ).not.toBeOnTheScreen();
+    });
+  });
 });
@@ -7,6 +7,7 @@ export const TraderProfileViewSelectorsIDs = {
   FOLLOW_BUTTON: 'trader-profile-follow-button',
   TAB_OPEN: 'trader-profile-tab-open',
   TAB_CLOSED: 'trader-profile-tab-closed',
+  SORT_BUTTON: 'trader-profile-sort-button',
   ERROR_BANNER: 'trader-profile-error-banner',
   TWITTER_LINK: 'trader-profile-twitter-link',
 };
@@ -1,6 +1,7 @@
-import React, { useCallback, useRef, useState } from 'react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
 import { TouchableOpacity } from 'react-native';
 import { ScrollView } from 'react-native-gesture-handler';
+import { playSelection } from '../../../../util/haptics';
 import {
   useNavigation,
   useRoute,
@@ -33,6 +34,15 @@ import type { Position } from '@metamask/social-controllers';
 import ProfileHeader from './components/ProfileHeader';
 import StatsRow from './components/StatsRow';
 import PositionRow from './components/PositionRow';
+import SortButton from './components/SortButton';
+import {
+  CLOSED_SORT_CYCLE,
+  OPEN_SORT_CYCLE,
+  sortPositions,
+  type ClosedSortKey,
+  type OpenSortKey,
+  type SortKey,
+} from './utils/sortPositions';
 import {
   ProfileHeaderSkeleton,
   StatsRowSkeleton,
@@ -53,6 +63,12 @@ const POSITION_SKELETON_KEYS = Array.from(
   (_, i) => `position-skeleton-${i}`,
 );
 
+const SORT_LABEL_KEYS: Record<SortKey, string> = {
+  value: 'social_leaderboard.trader_profile.sort.value',
+  pnl: 'social_leaderboard.trader_profile.sort.pnl_percent',
+  recent: 'social_leaderboard.trader_profile.sort.recent',
+};
+
 interface TabButtonProps {
   label: string;
   isActive: boolean;
@@ -110,6 +126,8 @@ const TraderProfileView = () => {
   } = useNotificationPreferences();
 
   const [activeTab, setActiveTab] = useState<'open' | 'closed'>('open');
+  const [openSort, setOpenSort] = useState<OpenSortKey>('value');
+  const [closedSort, setClosedSort] = useState<ClosedSortKey>('recent');
 
   const notificationsSheetRef = useRef<TraderNotificationsBottomSheetRef>(null);
   const setupSheetRef =
@@ -147,6 +165,29 @@ const TraderProfileView = () => {
   const isLoadingPositions =
     activeTab === 'open' ? isLoadingOpen : isLoadingClosed;
 
+  const currentSortKey: SortKey = activeTab === 'open' ? openSort : closedSort;
+
+  const sortedPositions = useMemo(
+    () => sortPositions(positions, currentSortKey, activeTab),
+    [positions, currentSortKey, activeTab],
+  );
+
+  const handleSortPress = useCallback(() => {
+    // Fire-and-forget haptic; ignore rejection (unsupported platforms).
+    playSelection().catch(() => undefined);
+    if (activeTab === 'open') {
+      setOpenSort((current) => {
+        const idx = OPEN_SORT_CYCLE.indexOf(current);
+        return OPEN_SORT_CYCLE[(idx + 1) % OPEN_SORT_CYCLE.length];
+      });
+    } else {
+      setClosedSort((current) => {
+        const idx = CLOSED_SORT_CYCLE.indexOf(current);
+        return CLOSED_SORT_CYCLE[(idx + 1) % CLOSED_SORT_CYCLE.length];
+      });
+    }
+  }, [activeTab]);
+
   return (
     <SafeAreaView
       style={tw.style('flex-1 bg-default')}
@@ -242,28 +283,44 @@ const TraderProfileView = () => {
 
                 <Box
                   flexDirection={BoxFlexDirection.Row}
+                  alignItems={BoxAlignItems.Center}
+                  justifyContent={BoxJustifyContent.Between}
                   twClassName="px-4 mb-2"
-                  gap={4}
                 >
-                  <TabButton
-                    label={strings('social_leaderboard.trader_profile.open')}
-                    isActive={activeTab === 'open'}
-                    onPress={() => setActiveTab('open')}
-                    testID={TraderProfileViewSelectorsIDs.TAB_OPEN}
-                  />
-                  <TabButton
-                    label={strings('social_leaderboard.trader_profile.closed')}
-                    isActive={activeTab === 'closed'}
-                    onPress={() => setActiveTab('closed')}
-                    testID={TraderProfileViewSelectorsIDs.TAB_CLOSED}
-                  />
+                  <Box
+                    flexDirection={BoxFlexDirection.Row}
+                    alignItems={BoxAlignItems.Center}
+                    gap={4}
+                  >
+                    <TabButton
+                      label={strings('social_leaderboard.trader_profile.open')}
+                      isActive={activeTab === 'open'}
+                      onPress={() => setActiveTab('open')}
+                      testID={TraderProfileViewSelectorsIDs.TAB_OPEN}
+                    />
+                    <TabButton
+                      label={strings(
+                        'social_leaderboard.trader_profile.closed',
+                      )}
+                      isActive={activeTab === 'closed'}
+                      onPress={() => setActiveTab('closed')}
+                      testID={TraderProfileViewSelectorsIDs.TAB_CLOSED}
+                    />
+                  </Box>
+                  {!isLoadingPositions && positions.length > 0 && (
+                    <SortButton
+                      label={strings(SORT_LABEL_KEYS[currentSortKey])}
+                      onPress={handleSortPress}
+                      testID={TraderProfileViewSelectorsIDs.SORT_BUTTON}
+                    />
+                  )}
                 </Box>
 
                 {isLoadingPositions ? (
                   POSITION_SKELETON_KEYS.map((key) => (
                     <PositionRowSkeleton key={key} />
                   ))
-                ) : positions.length === 0 ? (
+                ) : sortedPositions.length === 0 ? (
                   <Box
                     twClassName="px-4 py-8"
                     alignItems={BoxAlignItems.Center}
@@ -278,7 +335,7 @@ const TraderProfileView = () => {
                     </Text>
                   </Box>
                 ) : (
-                  positions.map((position, index) => (
+                  sortedPositions.map((position, index) => (
                     <PositionRow
                       key={`${position.tokenAddress}-${position.chain}-${index}`}
                       position={position}
 
@@ -0,0 +1,53 @@
+import React from 'react';
+import { Pressable } from 'react-native';
+import {
+  Box,
+  BoxAlignItems,
+  BoxFlexDirection,
+  Icon,
+  IconColor,
+  IconName,
+  IconSize,
+  Text,
+  TextColor,
+  TextVariant,
+} from '@metamask/design-system-react-native';
+import { useTailwind } from '@metamask/design-system-twrnc-preset';
+
+export interface SortButtonProps {
+  label: string;
+  onPress: () => void;
+  testID?: string;
+}
+
+const SortButton: React.FC<SortButtonProps> = ({ label, onPress, testID }) => {
+  const tw = useTailwind();
+
+  return (
+    <Pressable
+      onPress={onPress}
+      testID={testID}
+      hitSlop={8}
+      style={({ pressed }) =>
+        tw.style('flex-row items-center', pressed && 'opacity-70')
+      }
+    >
+      <Box
+        flexDirection={BoxFlexDirection.Row}
+        alignItems={BoxAlignItems.Center}
+        gap={1}
+      >
+        <Text variant={TextVariant.BodySm} color={TextColor.TextAlternative}>
+          {label}
+        </Text>
+        <Icon
+          name={IconName.SwapVertical}
+          size={IconSize.Sm}
+          color={IconColor.IconAlternative}
+        />
+      </Box>
+    </Pressable>
+  );
+};
+
+export default SortButton;