Merge pull request #85 from berachain/bartio-fix/berps-total-pnl

bartio-fix(perp): calculate total unrealized pnl correctly

apps/perp/src/app/berpetuals/components/asset-cards/getAssetCards.tsx

@@ -4,7 +4,7 @@ import type {
   IClosedTrade,
   ILimitOrder,
   IMarketOrder,
-  IOpenTradeCalculated,
+  IOpenTrade,
 } from "~/types/order-history";
 import { getHistoryListItems } from "./history";
 import { getLimitListItems } from "./orders";
@@ -18,7 +18,7 @@ export const getAssetCardList = ({
   markets,
   closedTradesItems,
 }: {
-  openPositionsItems: IOpenTradeCalculated[];
+  openPositionsItems: IOpenTrade[];
   openOrderItems: ILimitOrder[];
   closedTradesItems: IClosedTrade[];
   markets: IMarket[];

apps/perp/src/app/berpetuals/components/asset-cards/positions.tsx

@@ -9,10 +9,10 @@ import { PositionLiquidationPrice } from "~/app/components/table-columns/positio
 import { MarketTradePNL } from "~/app/components/market-trade-pnl";
 import { UpdatePositionModal } from "~/app/components/update-position-modal";
 import { type IMarket } from "~/types/market";
-import type { ICards, IOpenTradeCalculated } from "~/types/order-history";
+import type { ICards, IOpenTrade } from "~/types/order-history";
 
 export const getMarketListItems = (
-  marketOrderItems: IOpenTradeCalculated[],
+  marketOrderItems: IOpenTrade[],
   markets: IMarket[],
 ): ICards[] => {
   const cards = marketOrderItems.map((item) => {

apps/perp/src/app/berpetuals/components/order-chart.tsx

@@ -14,7 +14,7 @@ import {
   type ResolutionString,
 } from "~/types/charting-library";
 import { type IMarket } from "~/types/market";
-import { ILimitOrder, IOpenTradeCalculated } from "~/types/order-history";
+import { ILimitOrder, IOpenTrade } from "~/types/order-history";
 import { type TableStateProps } from "~/types/table";
 import { ClosePositionModal } from "../../components/close-position-modal";
 import type { ChartProps } from "./TVChartContainer";
@@ -65,24 +65,16 @@ export function OrderChart({
   );
 
   const openPositions = useMemo(() => {
+    if (!openPositionData) {
+      return [];
+    }
+
     const positions = generateMarketOrders(openPositionData, markets);
     return positions.map((position, index) => {
       return {
         ...position,
-        borrowing_fee:
-          Array.isArray(openPositionsLiqFeesData) &&
-          openPositionsLiqFeesData[1] &&
-          openPositionsLiqFeesData[1][index] !== undefined
-            ? openPositionsLiqFeesData[1][index].toString()
-            : "0",
-        liq_price:
-          Array.isArray(openPositionsLiqFeesData) &&
-          openPositionsLiqFeesData[0] &&
-          openPositionsLiqFeesData[0][index] !== undefined
-            ? openPositionsLiqFeesData[0][index].toString()
-            : "0",
       };
-    }) as IOpenTradeCalculated[];
+    }) as IOpenTrade[];
   }, [openPositionData, markets, openPositionsLiqFeesData]);
 
   const openOrders = useMemo(() => {
@@ -91,7 +83,7 @@ export function OrderChart({
 
   const [positionOpenState, setPositionOpenState] = useState(false);
   const [orderOpenState, setOrderOpenState] = useState(false);
-  const [position, setPosition] = useState<IOpenTradeCalculated>();
+  const [position, setPosition] = useState<IOpenTrade>();
   const [order, setOrder] = useState<ILimitOrder>();
 
   const defaultWidgetProps: Partial<ChartingLibraryWidgetOptions> = {

apps/perp/src/app/berpetuals/components/order-history-header.tsx

@@ -21,7 +21,10 @@ export function OrderHistoryHeader({ markets }: { markets: IMarket[] }) {
   } = usePollOpenPositions(tableState);
 
   const openPositions = useMemo(
-    () => generateMarketOrders(openPositionsData, markets) as IOpenTrade[],
+    () =>
+      openPositionsData
+        ? (generateMarketOrders(openPositionsData, markets) as IOpenTrade[])
+        : [],
     [openPositionsData, markets],
   );
 

apps/perp/src/app/berpetuals/components/order-history.tsx

@@ -27,7 +27,7 @@ import type {
   IClosedTrade,
   ILimitOrder,
   IMarketOrder,
-  IOpenTradeCalculated,
+  IOpenTrade,
 } from "~/types/order-history";
 import { TotalAmount } from "../../components/total-amount";
 import { getAssetCardList } from "./asset-cards/getAssetCards";
@@ -41,12 +41,8 @@ export function OrderHistory({
   markets: IMarket[];
   size: "sm" | "md" | "lg";
 }) {
-  const [updateOpen, setUpdateOpen] = useState<boolean | IOpenTradeCalculated>(
-    false,
-  );
-  const [deleteOpen, setDeleteOpen] = useState<boolean | IOpenTradeCalculated>(
-    false,
-  );
+  const [updateOpen, setUpdateOpen] = useState<boolean | IOpenTrade>(false);
+  const [deleteOpen, setDeleteOpen] = useState<boolean | IOpenTrade>(false);
 
   const { tableState, setTableState } = useContext(TableContext);
   const { isConnected } = useBeraJs();
@@ -97,7 +93,10 @@ export function OrderHistory({
   );
 
   const openMarketPositions = useMemo(
-    () => generateMarketOrders(openPositionData, markets) ?? [],
+    () =>
+      openPositionData
+        ? (generateMarketOrders(openPositionData, markets) as IOpenTrade[])
+        : [],
     [markets, openPositionData],
   );
   const openMarketOrders = useMemo(
@@ -114,11 +113,11 @@ export function OrderHistory({
   );
 
   // edge case for selection when new orders are opened or closed
-  const prevPositionLength = usePrevious(openPositionData?.length ?? 0);
+  const prevPositionLength = usePrevious(openPositionData?.result?.length ?? 0);
   useEffect(() => {
     if (
       tableState.tabType === "positions" &&
-      (openPositionData?.length ?? 0) !== prevPositionLength
+      (openPositionData?.result?.length ?? 0) !== prevPositionLength
     ) {
       setTableState((prev) => ({ ...prev, selection: {} }));
     }
@@ -135,14 +134,9 @@ export function OrderHistory({
 
   // props generation
   const tableProps = useMemo(() => {
-    let data: (
-      | IOpenTradeCalculated
-      | ILimitOrder
-      | IMarketOrder
-      | IClosedTrade
-    )[] = [];
+    let data: (IOpenTrade | ILimitOrder | IMarketOrder | IClosedTrade)[] = [];
     let columns:
-      | ColumnDef<IOpenTradeCalculated>[]
+      | ColumnDef<IOpenTrade>[]
       | ColumnDef<ILimitOrder>[]
       | ColumnDef<IMarketOrder>[]
       | ColumnDef<IClosedTrade>[] = [];
@@ -153,23 +147,7 @@ export function OrderHistory({
 
     switch (tableState.tabType) {
       case "positions":
-        data = openMarketPositions.map((position, index) => {
-          return {
-            ...position,
-            borrowing_fee:
-              Array.isArray(openPositionsLiqFeesData) &&
-              openPositionsLiqFeesData[1] &&
-              openPositionsLiqFeesData[1][index] !== undefined
-                ? openPositionsLiqFeesData[1][index].toString()
-                : "0",
-            liq_price:
-              Array.isArray(openPositionsLiqFeesData) &&
-              openPositionsLiqFeesData[0] &&
-              openPositionsLiqFeesData[0][index] !== undefined
-                ? openPositionsLiqFeesData[0][index].toString()
-                : "0",
-          };
-        });
+        data = openMarketPositions as IOpenTrade[];
         columns = markets
           ? generatePositionColumns(markets, setUpdateOpen, setDeleteOpen)
           : [];
@@ -253,7 +231,7 @@ export function OrderHistory({
 
   const assetCardItems = useMemo(() => {
     return getAssetCardList({
-      openPositionsItems: openMarketPositions as IOpenTradeCalculated[],
+      openPositionsItems: openMarketPositions as IOpenTrade[],
       openOrderItems: openMarketOrders as ILimitOrder[],
       marketOrdersItems: marketOrders as IMarketOrder[],
       closedTradesItems: closedMarketTrades as IClosedTrade[],
@@ -276,12 +254,12 @@ export function OrderHistory({
         tabType={tableState.tabType ?? "positions"}
       />
       <UpdatePositionModal
-        openPosition={updateOpen as IOpenTradeCalculated}
+        openPosition={updateOpen as IOpenTrade}
         controlledOpen={!!updateOpen}
         onOpenChange={setUpdateOpen}
       />
       <ClosePositionModal
-        openPosition={deleteOpen as IOpenTradeCalculated}
+        openPosition={deleteOpen as IOpenTrade}
         controlledOpen={!!deleteOpen}
         onOpenChange={setDeleteOpen}
       />

apps/perp/src/app/components/close-position-modal.tsx

@@ -22,7 +22,7 @@ import { TableContext } from "~/context/table-context";
 import { usePollMarketOrders } from "~/hooks/usePollMarketOrders";
 import { usePollOpenPositions } from "~/hooks/usePollOpenPositions";
 import { usePollPrices } from "~/hooks/usePollPrices";
-import type { IOpenTradeCalculated } from "~/types/order-history";
+import type { IOpenTrade } from "~/types/order-history";
 import { MarketTradePNL } from "./market-trade-pnl";
 
 export function ClosePositionModal({
@@ -35,7 +35,7 @@ export function ClosePositionModal({
 }: {
   trigger?: any;
   disabled?: boolean;
-  openPosition: IOpenTradeCalculated;
+  openPosition: IOpenTrade;
   className?: string;
   controlledOpen?: boolean;
   onOpenChange?: (state: boolean) => void;

apps/perp/src/app/components/table-columns/positions.tsx

@@ -11,10 +11,10 @@ import { PositionTitle } from "~/app/components/position-title";
 import { useCalculateLiqPrice } from "~/hooks/useCalculateLiqPrice";
 import { usePollPrices } from "~/hooks/usePollPrices";
 import type { IMarket } from "~/types/market";
-import type { IOpenTradeCalculated } from "~/types/order-history";
+import type { IOpenTrade } from "~/types/order-history";
 import { MarketTradePNL } from "../market-trade-pnl";
 
-const MarkPrice = ({ position }: { position: IOpenTradeCalculated }) => {
+const MarkPrice = ({ position }: { position: IOpenTrade }) => {
   const { marketPrices } = usePollPrices();
   const price = marketPrices[position?.market?.pair_index ?? ""] ?? "0";
 
@@ -33,7 +33,7 @@ export const PositionLiquidationPrice = ({
   position,
   className,
 }: {
-  position: IOpenTradeCalculated;
+  position: IOpenTrade;
   className?: string;
 }) => {
   const formattedPrice = formatFromBaseUnit(
@@ -62,10 +62,10 @@ export const PositionLiquidationPrice = ({
 
 export const generatePositionColumns = (
   markets: IMarket[],
-  setUpdateOpen: (state: boolean | IOpenTradeCalculated) => void,
-  setDeleteOpen: (state: boolean | IOpenTradeCalculated) => void,
+  setUpdateOpen: (state: boolean | IOpenTrade) => void,
+  setDeleteOpen: (state: boolean | IOpenTrade) => void,
 ) => {
-  const positionsColumns: ColumnDef<IOpenTradeCalculated>[] = [
+  const positionsColumns: ColumnDef<IOpenTrade>[] = [
     {
       header: "Market / Action",
       cell: ({ row }) => (

apps/perp/src/app/components/total-amount.tsx

@@ -31,12 +31,15 @@ export function TotalAmount({
   const { data: openPositions } = usePollOpenPositions(tableState);
   const { marketPrices } = usePollPrices();
   const unrealizedPnl = useMemo(() => {
+    if (!openPositions) {
+      return BigNumber(totalUnrealizedPnl);
+    }
     const pnl = calculateUnrealizedPnl(openPositions, marketPrices);
-    return pnl ? BigNumber(pnl) : formatFromBaseUnit(totalUnrealizedPnl, 18);
+    return BigNumber(pnl ?? totalUnrealizedPnl);
   }, [openPositions, marketPrices, totalUnrealizedPnl]);
   const { useAccountTradingSummary } = usePollAccountTradingSummary();
-  const { data } = useAccountTradingSummary();
-  const realizedPnl = data?.pnl ?? "0";
+  const { data: accountTradingSummary } = useAccountTradingSummary();
+  const realizedPnl = accountTradingSummary?.pnl ?? "0";
   const totalPnlBN = unrealizedPnl.plus(realizedPnl);
 
   const totalRelativePnL = () => {

apps/perp/src/app/components/update-position-modal.tsx

@@ -21,7 +21,7 @@ import { usePriceData } from "~/context/price-context";
 import { TableContext } from "~/context/table-context";
 import { usePollOpenPositions } from "~/hooks/usePollOpenPositions";
 import { usePollPrices } from "~/hooks/usePollPrices";
-import type { IOpenTradeCalculated } from "~/types/order-history";
+import type { IOpenTrade } from "~/types/order-history";
 import { TPSL } from "../berpetuals/components/tpsl";
 import { MarketTradePNL } from "./market-trade-pnl";
 
@@ -34,7 +34,7 @@ export function UpdatePositionModal({
 }: {
   trigger?: any;
   disabled?: boolean;
-  openPosition: IOpenTradeCalculated;
+  openPosition: IOpenTrade;
   className?: string;
   controlledOpen?: boolean;
   onOpenChange?: (state: boolean) => void;

apps/perp/src/app/portfolio/components/stats.tsx

@@ -75,12 +75,13 @@ export default function Stats({ markets }: { markets: IMarket[] }) {
               onValueChange={(value) => setTabType(value as "Volume" | "PnL")}
               className="h-full w-full sm:w-fit"
             >
-              <TabsList className="h-full w-full border border-border sm:w-fit">
+              <TabsList className="h-full w-full border border-border sm:w-fit px-1">
                 {["Volume", "PnL"].map((status) => (
                   <TabsTrigger
                     value={status}
                     key={status}
-                    className="variant w-full flex-1 capitalize data-[state=active]:bg-secondary data-[state=active]:text-foreground sm:w-fit"
+                    variant="compact"
+                    className="variant  w-full flex-1 capitalize data-[state=active]:bg-secondary data-[state=active]:text-foreground sm:w-fit"
                     onClick={() => setTabType(status as "Volume" | "PnL")}
                   >
                     {status}{" "}