@orderly.network/ui-positions 2.8.9-alpha.0 → 2.8.10-alpha.0

package/dist/index.d.mts

@@ -195,6 +195,7 @@ interface UseReversePositionScriptOptions {
     position: API.PositionExt | API.PositionTPSLExt;
     onSuccess?: () => void;
     onError?: (error: any) => void;
+    calcMode?: "markPrice" | "lastPrice";
 }
 type ReversePositionValidationError = "belowMin" | null;
 /**
@@ -221,6 +222,8 @@ declare const useReversePositionScript: (options?: UseReversePositionScriptOptio
         markPrice: string;
         leverage: number;
         isLong: boolean;
+        unrealizedPnL: number | undefined;
+        pnlNotionalDecimalPrecision: any;
     } | null;
     positionQty: number;
     reverseQty: number;
@@ -269,6 +272,10 @@ interface OrderInfoCardProps {
     baseDp: number;
     /** Price label, defaults to "Market" */
     estLiqPrice?: React.ReactNode;
+    /** Estimated PnL value */
+    estPnL?: string;
+    /** PnL decimal precision */
+    pnlNotionalDecimalPrecision?: number;
     /** Custom class name */
     className?: string;
 }

package/dist/index.d.ts

@@ -195,6 +195,7 @@ interface UseReversePositionScriptOptions {
     position: API.PositionExt | API.PositionTPSLExt;
     onSuccess?: () => void;
     onError?: (error: any) => void;
+    calcMode?: "markPrice" | "lastPrice";
 }
 type ReversePositionValidationError = "belowMin" | null;
 /**
@@ -221,6 +222,8 @@ declare const useReversePositionScript: (options?: UseReversePositionScriptOptio
         markPrice: string;
         leverage: number;
         isLong: boolean;
+        unrealizedPnL: number | undefined;
+        pnlNotionalDecimalPrecision: any;
     } | null;
     positionQty: number;
     reverseQty: number;
@@ -269,6 +272,10 @@ interface OrderInfoCardProps {
     baseDp: number;
     /** Price label, defaults to "Market" */
     estLiqPrice?: React.ReactNode;
+    /** Estimated PnL value */
+    estPnL?: string;
+    /** PnL decimal precision */
+    pnlNotionalDecimalPrecision?: number;
     /** Custom class name */
     className?: string;
 }

package/dist/index.js

@@ -901,6 +901,7 @@ var groupDataByAccount = (data, options) => {
 
 // src/constants.ts
 var TRADING_POSITIONS_SORT_STORAGE_KEY = "orderly_trading_positions_sort";
+var LIQ_DISTANCE_THRESHOLD = 10;
 var compareValues = (aValue, bValue) => {
   if (aValue == null && bValue == null)
     return 0;
@@ -969,6 +970,8 @@ var OrderInfoCard = ({
   qty,
   baseDp,
   estLiqPrice,
+  estPnL,
+  pnlNotionalDecimalPrecision = 2,
   className
 }) => {
   const { t } = i18n.useTranslation();
@@ -997,6 +1000,7 @@ var OrderInfoCard = ({
             justify: "between",
             itemAlign: "center",
             width: "100%",
+            gap: 1,
             children: [
               /* @__PURE__ */ jsxRuntime.jsxs(
                 ui.Flex,
@@ -1026,6 +1030,29 @@ var OrderInfoCard = ({
                   ]
                 }
               ),
+              estPnL && /* @__PURE__ */ jsxRuntime.jsxs(
+                ui.Flex,
+                {
+                  direction: "row",
+                  justify: "between",
+                  itemAlign: "center",
+                  width: "100%",
+                  gap: 1,
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "sm", intensity: 54, children: t("orderEntry.estPnL") }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      ui.Text.pnl,
+                      {
+                        dp: pnlNotionalDecimalPrecision,
+                        coloring: true,
+                        size: "sm",
+                        weight: "semibold",
+                        children: estPnL
+                      }
+                    )
+                  ]
+                }
+              ),
               estLiqPrice && /* @__PURE__ */ jsxRuntime.jsxs(
                 ui.Flex,
                 {
@@ -1070,7 +1097,9 @@ var ReversePosition = (props) => {
     reverseQty,
     markPrice,
     leverage,
-    isLong
+    isLong,
+    unrealizedPnL,
+    pnlNotionalDecimalPrecision
   } = displayInfo;
   const closeSide = !isLong ? types.OrderSide.SELL : types.OrderSide.BUY;
   const openSide = isLong ? types.OrderSide.SELL : types.OrderSide.BUY;
@@ -1121,7 +1150,9 @@ var ReversePosition = (props) => {
             side: closeSide,
             leverage,
             qty: positionQty,
-            baseDp
+            baseDp,
+            estPnL: unrealizedPnL?.toString(),
+            pnlNotionalDecimalPrecision
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "row", itemAlign: "center", width: "100%", children: [
@@ -1185,10 +1216,28 @@ var useReversePositionEnabled = () => {
 var useReversePositionScript = (options) => {
   const { position, onSuccess, onError } = options || {};
   const { isEnabled, setEnabled } = useReversePositionEnabled();
+  const [pnlNotionalDecimalPrecision] = hooks.useLocalStorage(
+    "pnlNotionalDecimalPrecision",
+    2
+  );
   const symbolsInfo = hooks.useSymbolsInfo();
   const symbol = position?.symbol || "";
   const { data: symbolMarketPrice } = hooks.useMarkPrice(symbol);
   const symbolInfo = symbolsInfo?.[symbol];
+  const calcMode = options?.calcMode || "markPrice";
+  const [positionData] = hooks.usePositionStream(symbol, {
+    calcMode,
+    includedPendingOrder: false
+  });
+  const rawPositionRows = reactApp.useDataTap(positionData?.rows, { fallbackData: [] });
+  const unrealizedPnL = React2.useMemo(() => {
+    if (!rawPositionRows || !symbol)
+      return position?.unrealized_pnl;
+    const currentPosition = rawPositionRows.find(
+      (p) => p.symbol === symbol && p.position_qty !== 0
+    );
+    return currentPosition?.unrealized_pnl ?? position?.unrealized_pnl;
+  }, [rawPositionRows, symbol]);
   const baseMin = React2.useMemo(() => {
     if (!symbolInfo)
       return 0;
@@ -1347,7 +1396,9 @@ var useReversePositionScript = (options) => {
       reverseQty: new utils.Decimal(reverseQty).todp(baseDp2).toString(),
       markPrice: symbolMarketPrice ? new utils.Decimal(symbolMarketPrice).todp(quoteDp).toString() : "--",
       leverage,
-      isLong
+      isLong,
+      unrealizedPnL,
+      pnlNotionalDecimalPrecision
     };
   }, [
     position,
@@ -1355,7 +1406,9 @@ var useReversePositionScript = (options) => {
     symbolInfo,
     positionQty,
     reverseQty,
-    isLong
+    isLong,
+    unrealizedPnL,
+    pnlNotionalDecimalPrecision
   ]);
   return {
     isEnabled,
@@ -2884,12 +2937,17 @@ var useColumn = (config) => {
         width: 100,
         onSort: true,
         dataIndex: "est_liq_price",
-        render: (value) => {
-          return Number(value) === 0 ? "--" : /* @__PURE__ */ jsxRuntime.jsx(
+        render: (value, record) => {
+          const liqPrice = Number(value);
+          const markPrice = record.mark_price;
+          if (liqPrice === 0 || !markPrice || markPrice === 0 || Math.abs(liqPrice - markPrice) / markPrice >= LIQ_DISTANCE_THRESHOLD) {
+            return "--";
+          }
+          return /* @__PURE__ */ jsxRuntime.jsx(
             NumeralWithCtx,
             {
               rm: utils.Decimal.ROUND_DOWN,
-              className: Number(value) > 0 ? "oui-text-warning-light" : "",
+              className: liqPrice > 0 ? "oui-text-warning-light" : "",
               children: value ?? "--"
             }
           );
@@ -3218,7 +3276,18 @@ var MarkPrice = (props) => {
 var LiqPrice = (props) => {
   const { item } = props;
   const { t } = i18n.useTranslation();
-  const liqPrice = item.est_liq_price && item.est_liq_price > 0 ? item.est_liq_price : "-";
+  const liqPrice = React2.useMemo(() => {
+    const estLiqPrice = item.est_liq_price;
+    const markPrice = item.mark_price;
+    if (!estLiqPrice || estLiqPrice <= 0)
+      return "-";
+    if (!markPrice || markPrice === 0)
+      return "-";
+    if (Math.abs(estLiqPrice - markPrice) / markPrice >= LIQ_DISTANCE_THRESHOLD) {
+      return "-";
+    }
+    return estLiqPrice;
+  }, [item.est_liq_price, item.mark_price]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     ui.Statistic,
     {