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

package/dist/index.mjs

@@ -4,7 +4,7 @@ import { i18n, useTranslation } from '@orderly.network/i18n';
 import { OrderSide, OrderType, EMPTY_LIST, AccountStatusEnum, TrackerEventName, OrderStatus, AlgoOrderRootType, PositionType, AlgoOrderType } from '@orderly.network/types';
 import { commifyOptional, Decimal, formatNum, getTimestamp, commify } from '@orderly.network/utils';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useSymbolsInfo, useMarkPrice, useSubAccountMutation, useLocalStorage, usePrivateInfiniteQuery, useBoolean, useSessionStorage, useAccount, usePrivateQuery, useTrack, usePositionStream, usePositionClose, useSWR, fetcher, useEventEmitter, useDebouncedCallback, useGetRwaSymbolOpenStatus, useTpslPriceChecker, useConfig, findPositionTPSLFromOrders, findTPSLFromOrder, useReferralInfo, useAccountInfo, useLeverageBySymbol, utils, useMaxLeverage } from '@orderly.network/hooks';
+import { useLocalStorage, useSymbolsInfo, useMarkPrice, usePositionStream, useSubAccountMutation, usePrivateInfiniteQuery, useBoolean, useSessionStorage, useAccount, usePrivateQuery, useTrack, usePositionClose, useSWR, fetcher, useEventEmitter, useDebouncedCallback, useGetRwaSymbolOpenStatus, useTpslPriceChecker, useConfig, findPositionTPSLFromOrders, findTPSLFromOrder, useReferralInfo, useAccountInfo, useLeverageBySymbol, utils, useMaxLeverage } from '@orderly.network/hooks';
 import { useDataTap, useOrderEntryFormErrorMsg } from '@orderly.network/react-app';
 import { positions, account } from '@orderly.network/perp';
 import { AuthGuardDataTable } from '@orderly.network/ui-connector';
@@ -895,6 +895,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;
@@ -963,6 +964,8 @@ var OrderInfoCard = ({
   qty,
   baseDp,
   estLiqPrice,
+  estPnL,
+  pnlNotionalDecimalPrecision = 2,
   className
 }) => {
   const { t } = useTranslation();
@@ -991,6 +994,7 @@ var OrderInfoCard = ({
             justify: "between",
             itemAlign: "center",
             width: "100%",
+            gap: 1,
             children: [
               /* @__PURE__ */ jsxs(
                 Flex,
@@ -1020,6 +1024,29 @@ var OrderInfoCard = ({
                   ]
                 }
               ),
+              estPnL && /* @__PURE__ */ jsxs(
+                Flex,
+                {
+                  direction: "row",
+                  justify: "between",
+                  itemAlign: "center",
+                  width: "100%",
+                  gap: 1,
+                  children: [
+                    /* @__PURE__ */ jsx(Text, { size: "sm", intensity: 54, children: t("orderEntry.estPnL") }),
+                    /* @__PURE__ */ jsx(
+                      Text.pnl,
+                      {
+                        dp: pnlNotionalDecimalPrecision,
+                        coloring: true,
+                        size: "sm",
+                        weight: "semibold",
+                        children: estPnL
+                      }
+                    )
+                  ]
+                }
+              ),
               estLiqPrice && /* @__PURE__ */ jsxs(
                 Flex,
                 {
@@ -1064,7 +1091,9 @@ var ReversePosition = (props) => {
     reverseQty,
     markPrice,
     leverage,
-    isLong
+    isLong,
+    unrealizedPnL,
+    pnlNotionalDecimalPrecision
   } = displayInfo;
   const closeSide = !isLong ? OrderSide.SELL : OrderSide.BUY;
   const openSide = isLong ? OrderSide.SELL : OrderSide.BUY;
@@ -1115,7 +1144,9 @@ var ReversePosition = (props) => {
             side: closeSide,
             leverage,
             qty: positionQty,
-            baseDp
+            baseDp,
+            estPnL: unrealizedPnL?.toString(),
+            pnlNotionalDecimalPrecision
           }
         ),
         /* @__PURE__ */ jsxs(Flex, { direction: "row", itemAlign: "center", width: "100%", children: [
@@ -1179,10 +1210,28 @@ var useReversePositionEnabled = () => {
 var useReversePositionScript = (options) => {
   const { position, onSuccess, onError } = options || {};
   const { isEnabled, setEnabled } = useReversePositionEnabled();
+  const [pnlNotionalDecimalPrecision] = useLocalStorage(
+    "pnlNotionalDecimalPrecision",
+    2
+  );
   const symbolsInfo = useSymbolsInfo();
   const symbol = position?.symbol || "";
   const { data: symbolMarketPrice } = useMarkPrice(symbol);
   const symbolInfo = symbolsInfo?.[symbol];
+  const calcMode = options?.calcMode || "markPrice";
+  const [positionData] = usePositionStream(symbol, {
+    calcMode,
+    includedPendingOrder: false
+  });
+  const rawPositionRows = useDataTap(positionData?.rows, { fallbackData: [] });
+  const unrealizedPnL = 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 = useMemo(() => {
     if (!symbolInfo)
       return 0;
@@ -1341,7 +1390,9 @@ var useReversePositionScript = (options) => {
       reverseQty: new Decimal(reverseQty).todp(baseDp2).toString(),
       markPrice: symbolMarketPrice ? new Decimal(symbolMarketPrice).todp(quoteDp).toString() : "--",
       leverage,
-      isLong
+      isLong,
+      unrealizedPnL,
+      pnlNotionalDecimalPrecision
     };
   }, [
     position,
@@ -1349,7 +1400,9 @@ var useReversePositionScript = (options) => {
     symbolInfo,
     positionQty,
     reverseQty,
-    isLong
+    isLong,
+    unrealizedPnL,
+    pnlNotionalDecimalPrecision
   ]);
   return {
     isEnabled,
@@ -2878,12 +2931,17 @@ var useColumn = (config) => {
         width: 100,
         onSort: true,
         dataIndex: "est_liq_price",
-        render: (value) => {
-          return Number(value) === 0 ? "--" : /* @__PURE__ */ 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__ */ jsx(
             NumeralWithCtx,
             {
               rm: Decimal.ROUND_DOWN,
-              className: Number(value) > 0 ? "oui-text-warning-light" : "",
+              className: liqPrice > 0 ? "oui-text-warning-light" : "",
               children: value ?? "--"
             }
           );
@@ -3212,7 +3270,18 @@ var MarkPrice = (props) => {
 var LiqPrice = (props) => {
   const { item } = props;
   const { t } = useTranslation();
-  const liqPrice = item.est_liq_price && item.est_liq_price > 0 ? item.est_liq_price : "-";
+  const liqPrice = 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__ */ jsx(
     Statistic,
     {