fix: show realized PnL on closed perp feed rows (#33356)

<!--
Please submit this PR as a draft initially.

Do not mark it as "Ready for review" until this PR meets the canonical
Definition of Ready For Review in `docs/readme/ready-for-review.md`.

In short: the template must be materially complete (not just section
titles
present), all status checks must be currently passing, and the only
expected
follow-up commits must be reviewer-driven.
-->
<!--
mms-check directive vocabulary — read by
.github/scripts/shared/pr-template-checks.ts
at module load to build the validation plan. Directives are invisible in
rendered
markdown and must NOT be removed or edited without updating the
validator registry.

  type=text           Section must contain non-placeholder prose.
  type=changelog      Section must have a valid CHANGELOG entry: line.
type=issue-link Section must have a Fixes:/Closes:/Refs: line with a
value.
type=manual-testing Section must have real testing steps or an explicit
N/A.
type=screenshot Section must have evidence (image/URL) or an explicit
N/A.
type=checklist Section must have all checkboxes consciously checked.
required=true|false Whether a missing/invalid section runs the validator
at all.
blocking=true|false Whether a failure of this check fails the CI
workflow.
Default: false — failures are shown as warnings in the sticky
                      comment but do not block the PR.

Sections without a directive are checked for structural presence only.
-->

## **Description**

<!-- mms-check: type=text required=true -->

This PR fixes empty PnL column on closed perp feed rows.
Root cause: the action label used the exit trade (`intent === 'exit'`),
but PnL presentation used `isClosedPosition()`, which can misclassify
closed perps when API still reports a non-zero `marginUsd`. That left
the action reading as a
close while the PnL path treated the position as open (empty column).

Also includes the Leaderboard "All types" dropdown (shared with feed).

<img height="190" alt="Screenshot 2026-07-15 at 21 12 38"
src="https://github.com/user-attachments/assets/b9143105-cde3-4044-827f-ea8b28122e8a"
/>


## **Changelog**

<!-- mms-check: type=changelog required=true blocking=true -->

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry: null

## **Related issues**

<!-- mms-check: type=issue-link required=true -->

Fixes: https://consensyssoftware.atlassian.net/browse/TSA-893

## **Manual testing steps**

<!-- mms-check: type=manual-testing required=true -->

```gherkin
Feature: my feature name

  Scenario: user [verb for user action]
    Given [describe expected initial app state]

    When user [verb for user action]
    Then [describe expected outcome]
```

## **Screenshots/Recordings**

<!-- mms-check: type=screenshot required=true -->

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

NA

### **After**

NA

## **Pre-merge author checklist**

<!-- mms-check: type=checklist required=true -->

<!--
Every checklist item must be consciously assessed before marking this PR
as
"Ready for review". A checked box means you deliberately considered that
responsibility, not that you literally performed every action listed.

Unchecked boxes are ambiguous: they are not an implicit "N/A" and they
are not
a silent "skip". See `docs/readme/ready-for-review.md` for the full
checklist
semantics.
-->

- [ ] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] I've included tests if applicable
- [ ] I've documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I've applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

#### Performance checks (if applicable)

- [ ] I've tested on Android
  - Ideally on a mid-range device; emulator is acceptable
- [ ] I've tested with a power user scenario
- Use these [power-user
SRPs](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/edit-v2/401401446401?draftShareId=9d77e1e1-4bdc-4be1-9ebb-ccd916988d93)
to import wallets with many accounts and tokens
- [ ] I've instrumented key operations with Sentry traces for production
performance metrics
- See [`trace()`](/app/util/trace.ts) for usage and
[`addToken`](/app/components/Views/AddAsset/components/AddCustomToken/AddCustomToken.tsx#L274)
for an example

For performance guidelines and tooling, see the [Performance
Guide](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/400085549067/Performance+Guide+for+Engineers).

## **Pre-merge reviewer checklist**

<!--
Reviewer checklist items follow the same semantics as the author
checklist: an
unchecked box is ambiguous, a checked box means the reviewer consciously
assessed that responsibility. See `docs/readme/ready-for-review.md`.
-->

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.



<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Medium Risk**
> Feed row labeling and PnL depend on trade intent vs snapshot
heuristics, and leaderboard filtering UX changed (dropdown + perps-off
behavior), so regressions could affect social surfaces users see often.
> 
> **Overview**
> **Feed mapping** now treats the triggering trade’s `enter`/`exit`
intent as the source of truth for whether a row is open or closed, so
action labels and PnL/value presentation stay aligned. That fixes closed
perp rows that still showed an empty PnL column when Clicker left stale
non-zero `marginUsd` while the exit fill was clearly an `exit`.
> 
> **Leaderboard + feed** share a new `TypeFilter` module
(`TypeFilterSelector` + `TypeFilterSheet`) under Social Leaderboard.
`TopTradersView` drops inline All/Tokens/Perps pills in favor of the
same “All types” dropdown as `FeedView`; when perps are disabled the
selector is hidden instead of showing only All. Copy moves to
`social_leaderboard.type_filter.*` and titles are sentence-cased in
`en.json`.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
fb7f086. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: zone-live

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

@@ -10,8 +10,11 @@ import {
   getFeedTradeButtonTestId,
   getFeedTradeCardTestId,
   getFeedTraderTestId,
-  getFeedTypeOptionTestId,
 } from './FeedView.testIds';
+import {
+  TypeFilterSelectorsIDs,
+  getTypeFilterOptionTestId,
+} from '../components/TypeFilter';
 import type { FeedItem, FeedSection, FeedTypeFilter } from './types';
 import type { UseTraderFeedResult } from './hooks/useTraderFeed';
 
@@ -152,12 +155,17 @@ jest.mock('../TraderPositionView/components/QuickBuy', () => {
 
 let handleTypeFilterChange: ((value: FeedTypeFilter) => void) | undefined;
 
-jest.mock('./components/FeedTypeSheet', () => {
+jest.mock('../components/TypeFilter', () => {
   const ReactActual = jest.requireActual('react');
-  const Actual = jest.requireActual('./components/FeedTypeSheet').default;
-  return (props: React.ComponentProps<typeof Actual>) => {
-    handleTypeFilterChange = props.onChange;
-    return ReactActual.createElement(Actual, props);
+  const Actual = jest.requireActual('../components/TypeFilter');
+  return {
+    ...Actual,
+    TypeFilterSheet: (
+      props: React.ComponentProps<typeof Actual.TypeFilterSheet>,
+    ) => {
+      handleTypeFilterChange = props.onChange;
+      return ReactActual.createElement(Actual.TypeFilterSheet, props);
+    },
   };
 });
 
@@ -173,7 +181,7 @@ describe('FeedView', () => {
     renderWithProvider(<FeedView />);
 
     expect(
-      screen.getByTestId(FeedViewSelectorsIDs.TYPE_SELECTOR),
+      screen.getByTestId(TypeFilterSelectorsIDs.SELECTOR),
     ).toBeOnTheScreen();
     expect(
       screen.getByTestId(FeedViewSelectorsIDs.AUDIENCE_TOGGLE),
@@ -288,8 +296,8 @@ describe('FeedView', () => {
   it('tracks type filter changes via Trader Feed Interaction', () => {
     renderWithProvider(<FeedView />);
 
-    fireEvent.press(screen.getByTestId(FeedViewSelectorsIDs.TYPE_SELECTOR));
-    fireEvent.press(screen.getByTestId(getFeedTypeOptionTestId('tokens')));
+    fireEvent.press(screen.getByTestId(TypeFilterSelectorsIDs.SELECTOR));
+    fireEvent.press(screen.getByTestId(getTypeFilterOptionTestId('tokens')));
 
     expect(mockTrack).toHaveBeenCalledWith(
       MetaMetricsEvents.SOCIAL_TRADER_FEED_INTERACTION,
@@ -434,8 +442,8 @@ describe('FeedView', () => {
 
     renderWithProvider(<FeedView />);
 
-    fireEvent.press(screen.getByTestId(FeedViewSelectorsIDs.TYPE_SELECTOR));
-    fireEvent.press(screen.getByTestId(getFeedTypeOptionTestId('tokens')));
+    fireEvent.press(screen.getByTestId(TypeFilterSelectorsIDs.SELECTOR));
+    fireEvent.press(screen.getByTestId(getTypeFilterOptionTestId('tokens')));
 
     expect(
       screen.getByTestId(FeedViewSelectorsIDs.TYPE_EMPTY_STATE),
@@ -459,8 +467,8 @@ describe('FeedView', () => {
 
     renderWithProvider(<FeedView />);
 
-    fireEvent.press(screen.getByTestId(FeedViewSelectorsIDs.TYPE_SELECTOR));
-    fireEvent.press(screen.getByTestId(getFeedTypeOptionTestId('perps')));
+    fireEvent.press(screen.getByTestId(TypeFilterSelectorsIDs.SELECTOR));
+    fireEvent.press(screen.getByTestId(getTypeFilterOptionTestId('perps')));
 
     expect(
       screen.getByTestId(FeedViewSelectorsIDs.TYPE_EMPTY_STATE),
@@ -480,8 +488,8 @@ describe('FeedView', () => {
 
     renderWithProvider(<FeedView />);
 
-    fireEvent.press(screen.getByTestId(FeedViewSelectorsIDs.TYPE_SELECTOR));
-    fireEvent.press(screen.getByTestId(getFeedTypeOptionTestId('perps')));
+    fireEvent.press(screen.getByTestId(TypeFilterSelectorsIDs.SELECTOR));
+    fireEvent.press(screen.getByTestId(getTypeFilterOptionTestId('perps')));
 
     expect(
       screen.getByTestId(FeedViewSelectorsIDs.TYPE_EMPTY_STATE),

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

@@ -9,9 +9,6 @@ export const FeedViewSelectorsIDs = {
   ERROR_STATE: 'feed-view-error-state',
   RETRY_BUTTON: 'feed-view-retry-button',
   AUDIENCE_TOGGLE: 'feed-view-audience-toggle',
-  TYPE_SELECTOR: 'feed-view-type-selector',
-  TYPE_SELECTOR_SHEET: 'feed-view-type-selector-sheet',
-  TYPE_SELECTOR_BACKDROP: 'feed-view-type-selector-backdrop',
   TRADE_BUTTON: 'feed-view-trade-button',
   TRADE_CARD: 'feed-view-trade-card',
 } as const;
@@ -24,5 +21,3 @@ export const getFeedTradeCardTestId = (id: string) =>
 export const getFeedTraderTestId = (id: string) => `feed-item-trader-${id}`;
 export const getFeedAudienceOptionTestId = (audience: string) =>
   `${FeedViewSelectorsIDs.AUDIENCE_TOGGLE}-${audience}`;
-export const getFeedTypeOptionTestId = (type: string) =>
-  `feed-view-type-option-${type}`;

app/components/Views/SocialLeaderboard/FeedView/FeedView.tsx

@@ -48,8 +48,7 @@ import FeedAudienceToggle from './components/FeedAudienceToggle';
 import FeedItemRow from './components/FeedItemRow';
 import FeedItemRowSkeleton from './components/FeedItemRowSkeleton';
 import FeedTypeEmptyState from './components/FeedTypeEmptyState';
-import FeedTypeSelector from './components/FeedTypeSelector';
-import FeedTypeSheet from './components/FeedTypeSheet';
+import { TypeFilterSelector, TypeFilterSheet } from '../components/TypeFilter';
 import FollowingEmptyState from './components/FollowingEmptyState';
 import { useTraderFeed } from './hooks/useTraderFeed';
 import type {
@@ -446,7 +445,7 @@ const FeedView: React.FC<FeedViewProps> = ({ isActive = true }) => {
         twClassName="px-4 py-3"
         gap={3}
       >
-        <FeedTypeSelector
+        <TypeFilterSelector
           value={typeFilter}
           onPress={() => setIsTypeSheetOpen(true)}
         />
@@ -455,7 +454,7 @@ const FeedView: React.FC<FeedViewProps> = ({ isActive = true }) => {
 
       {content}
 
-      <FeedTypeSheet
+      <TypeFilterSheet
         isOpen={isTypeSheetOpen}
         value={typeFilter}
         onChange={handleTypeFilterChange}

app/components/Views/SocialLeaderboard/FeedView/components/FeedTypeSelector.test.tsx

@@ -8,10 +8,11 @@ import type { PositionTokenAvatarData } from '../components/PositionTokenAvatar'
 export type FeedAudience = 'all' | 'following';
 
 /**
- * Feed type filter. Mirrors the leaderboard chain filters: everything, spot
- * tokens, or perps. Applied client-side over the loaded feed pages.
+ * Feed type filter. Alias of the shared {@link SocialTypeFilter} used across the
+ * leaderboard and feed: everything, spot tokens, or perps. Applied client-side
+ * over the loaded feed pages.
  */
-export type FeedTypeFilter = 'all' | 'tokens' | 'perps';
+export type { SocialTypeFilter as FeedTypeFilter } from '../components/TypeFilter/types';
 
 /** Trade action verb, shown after the trader username. */
 export type FeedAction = 'bought' | 'sold' | 'opened' | 'closed';

app/components/Views/SocialLeaderboard/FeedView/components/feedTypeOptions.ts

@@ -170,6 +170,55 @@ describe('mapFeedItem', () => {
     expect(result?.action).toBe('sold');
   });
 
+  it('keeps a perp enter fill as "opened" even when the snapshot looks closed', () => {
+    const result = mapFeedItem(
+      mockPerpFeedItem({
+        // A closed-looking snapshot (Clicker reports currentValueUSD === 0) must
+        // not override the triggering trade's `enter` intent.
+        currentValueUSD: 0,
+        trades: [
+          {
+            direction: 'buy',
+            intent: 'enter',
+            tokenAmount: 5,
+            usdCost: 50600,
+            timestamp: 1_700_000_500,
+            transactionHash: '0xhash',
+            classification: 'perp',
+            perpPositionType: 'long',
+            perpLeverage: 8,
+          },
+        ],
+      }),
+    );
+
+    expect(result?.action).toBe('opened');
+  });
+
+  it('keeps a spot enter fill as "bought" even when the snapshot looks closed', () => {
+    const result = mapFeedItem(
+      mockSpotFeedItem({
+        // Closed-looking spot snapshot (fully sold out) must still defer to the
+        // triggering trade's `enter` intent.
+        positionAmount: 0,
+        soldUsd: 100_000,
+        trades: [
+          {
+            direction: 'buy',
+            intent: 'enter',
+            tokenAmount: 1000,
+            usdCost: 120000,
+            timestamp: 1_700_000_000,
+            transactionHash: '0xhash',
+            classification: 'spot',
+          },
+        ],
+      }),
+    );
+
+    expect(result?.action).toBe('bought');
+  });
+
   it('returns null for a spot trade on an unsupported chain', () => {
     const result = mapFeedItem(mockSpotFeedItem({ chain: 'fantom' }));
 
@@ -280,6 +329,40 @@ describe('mapFeedItem', () => {
     expect(result?.valueLabel).toContain('4,659');
   });
 
+  it('shows realized PnL for a closed perp exit when marginUsd is still non-zero', () => {
+    const result = mapFeedItem(
+      mockPerpFeedItem({
+        tokenSymbol: 'BTC',
+        currentValueUSD: undefined,
+        pnlValueUsd: undefined,
+        pnlPercent: undefined,
+        realizedPnl: 12_500,
+        marginUsd: 151_400,
+        positionAmount: 2.5,
+        perpPositionType: 'short',
+        perpLeverage: 9,
+        trades: [
+          {
+            direction: 'sell',
+            intent: 'exit',
+            tokenAmount: -2.5,
+            usdCost: -151_400,
+            timestamp: 1_700_000_500,
+            transactionHash: '0xhash',
+            classification: 'perp',
+            perpPositionType: 'short',
+            perpLeverage: 9,
+          },
+        ],
+      }),
+    );
+
+    expect(result?.action).toBe('closed');
+    expect(result?.hasValueData).toBe(true);
+    expect(result?.hasPnlData).toBe(true);
+    expect(result?.valueLabel).toContain('12,500');
+  });
+
   it('marks negative PnL as not positive', () => {
     const result = mapFeedItem(
       mockPerpFeedItem({ pnlValueUsd: -500, realizedPnl: -500 }),

app/components/Views/SocialLeaderboard/FeedView/types.ts

@@ -68,20 +68,32 @@ function findTriggeringTrade(
 }
 
 /**
- * Resolves the action verb for a feed row. Perp fills read as "opened"/"closed",
- * spot as "bought"/"sold" (mirrors `TradeRow`). When the position has no trade
- * to key off, falls back to the position's open/closed state.
+ * Feed rows are keyed off a triggering trade when one exists, and the trade's
+ * intent is authoritative in both directions: an `exit` fill reads as closed
+ * (even when {@link isClosedPosition} misclassifies a perp that still carries
+ * stale non-zero margin in the Clicker payload), and an `enter` fill reads as
+ * open (even when the position snapshot looks closed). We only fall back to the
+ * {@link isClosedPosition} snapshot heuristic when there is no triggering trade.
  */
-function resolveAction(
+function isFeedItemClosed(
+  coreItem: CoreFeedItem,
   trade: Trade | undefined,
-  isPerp: boolean,
-  isClosed: boolean,
-): FeedAction {
-  const isExit = trade ? trade.intent === 'exit' : isClosed;
+): boolean {
+  if (trade) {
+    return trade.intent === 'exit';
+  }
+  return isClosedPosition(coreItem);
+}
+
+/**
+ * Resolves the action verb for a feed row. Perp fills read as "opened"/"closed",
+ * spot as "bought"/"sold" (mirrors `TradeRow`).
+ */
+function resolveAction(isPerp: boolean, isClosed: boolean): FeedAction {
   if (isPerp) {
-    return isExit ? 'closed' : 'opened';
+    return isClosed ? 'closed' : 'opened';
   }
-  return isExit ? 'sold' : 'bought';
+  return isClosed ? 'sold' : 'bought';
 }
 
 /**
@@ -286,9 +298,9 @@ export function mapFeedItem(coreItem: CoreFeedItem): FeedItem | null {
 
   const timestampMs = toMs(timestamp);
   const isPerp = isPerpPosition(coreItem);
-  const isClosed = isClosedPosition(coreItem);
   const trade = findTriggeringTrade(trades ?? [], timestampMs);
-  const action = resolveAction(trade, isPerp, isClosed);
+  const isClosed = isFeedItemClosed(coreItem, trade);
+  const action = resolveAction(isPerp, isClosed);
   const subHeader = buildSubHeader(trade);
   const presentation = buildFeedItemPresentation(coreItem, isClosed);