feat: closed pnl

src/pages/portfolio/Overview.tsx

@@ -99,6 +99,7 @@ export const Overview = () => {
                   PositionsTableColumnKey.Size,
                   PositionsTableColumnKey.Value,
                   PositionsTableColumnKey.PnL,
+                  PositionsTableColumnKey.RealizedPnL,
                   PositionsTableColumnKey.Margin,
                   PositionsTableColumnKey.AverageOpen,
                   PositionsTableColumnKey.Oracle,

src/pages/portfolio/Portfolio.tsx

@@ -131,6 +131,7 @@ const PortfolioPage = () => {
                         FillsTableColumnKey.Price,
                         FillsTableColumnKey.Total,
                         FillsTableColumnKey.Fee,
+                        FillsTableColumnKey.ClosedPnl,
                         FillsTableColumnKey.Liquidity,
                       ]
                 }

src/pages/portfolio/Positions.tsx

@@ -69,6 +69,7 @@ export const Positions = () => {
                   PositionsTableColumnKey.Size,
                   PositionsTableColumnKey.Value,
                   PositionsTableColumnKey.PnL,
+                  PositionsTableColumnKey.RealizedPnL,
                   PositionsTableColumnKey.Margin,
                   PositionsTableColumnKey.AverageOpen,
                   PositionsTableColumnKey.Oracle,

src/pages/trade/HorizontalPanel.tsx

@@ -150,6 +150,7 @@ export const HorizontalPanel = ({ isOpen = true, setIsOpen, handleStartResize }:
             PositionsTableColumnKey.Size,
             PositionsTableColumnKey.Value,
             PositionsTableColumnKey.PnL,
+            PositionsTableColumnKey.RealizedPnL,
             PositionsTableColumnKey.Margin,
             PositionsTableColumnKey.AverageOpen,
             PositionsTableColumnKey.Oracle,
@@ -326,6 +327,7 @@ export const HorizontalPanel = ({ isOpen = true, setIsOpen, handleStartResize }:
                   FillsTableColumnKey.Price,
                   FillsTableColumnKey.Total,
                   FillsTableColumnKey.Fee,
+                  FillsTableColumnKey.ClosedPnl,
                   FillsTableColumnKey.Liquidity,
                 ].filter(isTruthy)
           }

src/types/indexer/indexerManual.ts

@@ -19,6 +19,7 @@ import {
   IndexerPerpetualMarketStatus,
   IndexerPerpetualMarketType,
   IndexerPerpetualPositionResponseObject,
+  IndexerPositionSide,
   IndexerTradeResponseObject,
   IndexerTransferResponseObject,
 } from './indexerApiGen';
@@ -156,6 +157,9 @@ export interface IndexerCompositeFillObject {
   clientMetadata?: string | null;
   subaccountNumber?: number;
   market?: string;
+  positionSideBefore?: IndexerPositionSide;
+  positionSizeBefore?: number;
+  entryPriceBefore?: number;
 }
 
 export interface IndexerWsParentSubaccountSubscribedResponse {

src/views/tables/FillsTable.tsx

@@ -55,12 +55,53 @@ export enum FillsTableColumnKey {
   AmountTag = 'Amount-Tag',
   Total = 'Total',
   Fee = 'Fee',
+  ClosedPnl = 'ClosedPnl',
 
   // Tablet Only
   TypeAmount = 'Type-Amount',
   PriceFee = 'Price-Fee',
 }
 
+const calculateClosedPnl = (fill: FillTableRow) => {
+  const fee = parseFloat(fill.fee ?? '0');
+
+  // Old fills are not supported so we show -- instead of 0
+  if (fill.positionSizeBefore === undefined) {
+    return '--';
+  }
+
+  // No position before = opening trade, only fees realize
+  if (fill.positionSizeBefore === 0) {
+    return -fee;
+  }
+
+  // Check if position is reducing (opposite side)
+  const isReducing =
+    (fill.positionSideBefore === 'LONG' && fill.side === 'SELL') ||
+    (fill.positionSideBefore === 'SHORT' && fill.side === 'BUY');
+
+  if (!isReducing) {
+    // Position increasing (same side), only fees realize
+    return -fee;
+  }
+
+  const size = parseFloat(fill.size ?? '0');
+  const price = parseFloat(fill.price ?? '0');
+
+  // Position reducing - cap closing amount to actual position size
+  const closingAmount = Math.min(size, fill.positionSizeBefore);
+
+  // Calculate P&L only on the closing portion
+  let closingPnl: number;
+  if (fill.positionSideBefore === 'LONG') {
+    closingPnl = (price - fill.entryPriceBefore!) * closingAmount;
+  } else {
+    closingPnl = (fill.entryPriceBefore! - price) * closingAmount;
+  }
+
+  return closingPnl - fee;
+};
+
 export type FillTableRow = {
   marketSummary: Nullable<PerpetualMarketSummary>;
   stepSizeDecimals: number;
@@ -215,6 +256,22 @@ const getFillsTableColumnDef = ({
           </TableCell>
         ),
       },
+      [FillsTableColumnKey.ClosedPnl]: {
+        columnKey: 'closedPnl',
+        getCellValue: (row) => calculateClosedPnl(row),
+        label: stringGetter({ key: STRING_KEYS.CLOSED_PNL }),
+        renderCell: (row) => {
+          const closedPnl = calculateClosedPnl(row);
+          return (
+            <TableCell>
+              <Output
+                type={closedPnl === '--' ? OutputType.Text : OutputType.Fiat}
+                value={closedPnl}
+              />
+            </TableCell>
+          );
+        },
+      },
       [FillsTableColumnKey.Type]: {
         columnKey: 'type',
         getCellValue: (row) => row.type,

src/views/tables/PositionsTable.tsx

@@ -61,6 +61,7 @@ export enum PositionsTableColumnKey {
   Size = 'Size',
   Value = 'Value',
   PnL = 'PnL',
+  RealizedPnL = 'RealizedPnL',
   Margin = 'Margin',
   AverageOpen = 'AverageOpen',
   Oracle = 'Oracle',
@@ -210,6 +211,32 @@ const getPositionsTableColumnDef = ({
           );
         },
       },
+      [PositionsTableColumnKey.RealizedPnL]: {
+        columnKey: 'realizedPnl',
+        getCellValue: (row) => row.realizedPnl.toNumber(),
+        label: stringGetter({ key: STRING_KEYS.REALIZED_PNL }),
+        renderCell: ({ realizedPnl }) => {
+          return !isTablet ? (
+            <TableCell>
+              <$OutputSigned
+                sign={getNumberSign(realizedPnl)}
+                type={OutputType.Fiat}
+                value={realizedPnl}
+                showSign={ShowSign.Negative}
+              />
+            </TableCell>
+          ) : (
+            <TableCell stacked>
+              <$HighlightOutput
+                isNegative={MustBigNumber(realizedPnl).isNegative()}
+                type={OutputType.Fiat}
+                value={realizedPnl}
+                showSign={ShowSign.Both}
+              />
+            </TableCell>
+          );
+        },
+      },
       [PositionsTableColumnKey.Market]: {
         columnKey: 'market',
         getCellValue: (row) => row.marketSummary?.displayableTicker,