@orderly.network/ui-positions 2.8.5 → 2.8.6-alpha.0

package/dist/index.mjs

@@ -1,17 +1,17 @@
-import { registerSimpleDialog, Flex, Text, CloseIcon, Button, ThrottledButton, useScreen, Grid, Statistic, ExclamationFillIcon, modal, Tooltip, DataTable, cn, ListView, SimpleSheet, SimpleDialog, usePagination, DataFilter, toast, Badge, formatAddress, Box, HoverCard, Divider, capitalizeFirstLetter, ShareIcon, EditIcon, Input, inputFormatter, Select, PopoverRoot, PopoverTrigger, PopoverContent, Slider } from '@orderly.network/ui';
-import React, { createContext, useContext, useCallback, useMemo, useState, useEffect, useRef } from 'react';
-import { useTranslation, i18n } from '@orderly.network/i18n';
-import { EMPTY_LIST, AccountStatusEnum, OrderSide, OrderType, TrackerEventName, PositionType, AlgoOrderType } from '@orderly.network/types';
+import { registerSimpleDialog, useModal, SimpleDialog, Flex, Text, toast, Badge, Divider, CloseIcon, Button, ThrottledButton, useScreen, ArrowDownShortIcon, ArrowUpShortIcon, Grid, Statistic, ExclamationFillIcon, modal, Tooltip, DataTable, cn, ListView, SimpleSheet, usePagination, DataFilter, formatAddress, Box, HoverCard, ArrowLeftRightIcon, capitalizeFirstLetter, ShareIcon, EditIcon, Input, inputFormatter, Select, PopoverRoot, PopoverTrigger, PopoverContent, Slider } from '@orderly.network/ui';
+import React2, { createContext, useMemo, useCallback, useContext, useState, useEffect, useRef } from 'react';
+import { i18n, useTranslation } from '@orderly.network/i18n';
+import { OrderSide, OrderType, EMPTY_LIST, AccountStatusEnum, TrackerEventName, PositionType, AlgoOrderType } from '@orderly.network/types';
 import { commifyOptional, Decimal, formatNum, getTimestamp, commify } from '@orderly.network/utils';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { usePrivateInfiniteQuery, useBoolean, useSessionStorage, useAccount, usePrivateQuery, useTrack, usePositionStream, useSubAccountMutation, useSymbolsInfo, usePositionClose, useSWR, fetcher, useGetRwaSymbolOpenStatus, useLocalStorage, useConfig, useReferralInfo, useAccountInfo, useLeverageBySymbol, utils, useMaxLeverage } from '@orderly.network/hooks';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useSymbolsInfo, useMarkPrice, useMaxQty, useSubAccountMutation, useLocalStorage, usePrivateInfiniteQuery, useBoolean, useSessionStorage, useAccount, usePrivateQuery, useTrack, usePositionStream, usePositionClose, useSWR, fetcher, useGetRwaSymbolOpenStatus, useTpslPriceChecker, useConfig, useReferralInfo, useAccountInfo, useLeverageBySymbol, utils, useMaxLeverage } from '@orderly.network/hooks';
 import { produce } from 'immer';
 import { positions, account } from '@orderly.network/perp';
 import { useDataTap, useOrderEntryFormErrorMsg } from '@orderly.network/react-app';
 import { AuthGuardDataTable } from '@orderly.network/ui-connector';
 import { SymbolLeverageDialogId, SymbolLeverageSheetId } from '@orderly.network/ui-leverage';
 import { SharePnLDialogId, SharePnLBottomSheetId } from '@orderly.network/ui-share';
-import { TPSLSheetId, TPSLDialogId, TPSLDetailSheetId, TPSLDetailDialogId } from '@orderly.network/ui-tpsl';
+import { CloseToLiqPriceIcon, TPSLSheetId, TPSLDialogId, TPSLDetailSheetId, TPSLDetailDialogId } from '@orderly.network/ui-tpsl';
 import { subDays, differenceInDays } from 'date-fns';
 
 // src/index.ts
@@ -870,6 +870,404 @@ function useSort(initialSort, onSortChange) {
     getSortedList
   };
 }
+var OrderInfoCard = ({
+  title,
+  side,
+  leverage,
+  qty,
+  baseDp,
+  estLiqPrice,
+  className
+}) => {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      direction: "column",
+      gap: 3,
+      itemAlign: "start",
+      className: `oui-bg-base-6 oui-rounded-lg oui-p-3 oui-w-full oui-font-weight-semibold ${className || ""}`,
+      children: [
+        /* @__PURE__ */ jsxs(Flex, { justify: "between", itemAlign: "center", gap: 2, children: [
+          /* @__PURE__ */ jsx(Text, { size: "sm", weight: "semibold", intensity: 98, children: title }),
+          /* @__PURE__ */ jsxs(Flex, { itemAlign: "center", gap: 1, children: [
+            /* @__PURE__ */ jsx(Badge, { color: side === OrderSide.SELL ? "sell" : "buy", size: "xs", children: side === OrderSide.SELL ? t("common.sell") : t("common.buy") }),
+            /* @__PURE__ */ jsxs(Badge, { color: "neutral", size: "xs", children: [
+              leverage,
+              "X"
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          Flex,
+          {
+            direction: "column",
+            justify: "between",
+            itemAlign: "center",
+            width: "100%",
+            children: [
+              /* @__PURE__ */ jsxs(
+                Flex,
+                {
+                  direction: "row",
+                  justify: "between",
+                  itemAlign: "center",
+                  width: "100%",
+                  gap: 1,
+                  children: [
+                    /* @__PURE__ */ jsx(Text, { size: "sm", intensity: 54, children: t("common.qty") }),
+                    /* @__PURE__ */ jsx(Text.numeral, { dp: baseDp, size: "sm", color: "danger", padding: false, children: qty })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                Flex,
+                {
+                  direction: "row",
+                  justify: "between",
+                  itemAlign: "center",
+                  width: "100%",
+                  gap: 1,
+                  children: [
+                    /* @__PURE__ */ jsx(Text, { size: "sm", intensity: 54, children: t("common.price") }),
+                    /* @__PURE__ */ jsx(Text, { size: "sm", weight: "semibold", children: t("common.market") })
+                  ]
+                }
+              ),
+              estLiqPrice && /* @__PURE__ */ jsxs(
+                Flex,
+                {
+                  direction: "row",
+                  justify: "between",
+                  itemAlign: "center",
+                  width: "100%",
+                  gap: 1,
+                  children: [
+                    /* @__PURE__ */ jsx(Text, { size: "sm", intensity: 54, children: t("orderEntry.estLiqPrice") }),
+                    /* @__PURE__ */ jsx(Text, { size: "sm", weight: "semibold", children: estLiqPrice })
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+var ReversePosition = (props) => {
+  const { displayInfo, className, style, onConfirm, onCancel } = props;
+  const { t } = useTranslation();
+  if (!displayInfo) {
+    return null;
+  }
+  const {
+    symbol,
+    base,
+    quote,
+    baseDp,
+    quoteDp,
+    positionQty,
+    reverseQty,
+    markPrice,
+    leverage,
+    isLong
+  } = displayInfo;
+  const closeSide = !isLong ? OrderSide.SELL : OrderSide.BUY;
+  const openSide = isLong ? OrderSide.SELL : OrderSide.BUY;
+  const closeAction = isLong ? t("positions.reverse.marketCloseLong") : t("positions.reverse.marketCloseShort");
+  const openAction = openSide === OrderSide.BUY ? t("positions.reverse.marketOpenLong") : t("positions.reverse.marketOpenShort");
+  const reverseTo = isLong ? t("positions.reverse.reverseToShort") : t("positions.reverse.reverseToLong");
+  const reverseToIcon = isLong ? /* @__PURE__ */ jsx(ArrowDownShortIcon, { size: 16, color: "danger", opacity: 1 }) : /* @__PURE__ */ jsx(ArrowUpShortIcon, { size: 16, color: "success", opacity: 1 });
+  const priceLabel = /* @__PURE__ */ jsxs(Flex, { itemAlign: "center", gap: 1, children: [
+    /* @__PURE__ */ jsx(Text.numeral, { dp: quoteDp, size: "sm", intensity: 80, children: markPrice }),
+    /* @__PURE__ */ jsx(Text, { size: "sm", intensity: 36, children: quote })
+  ] });
+  return /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      direction: "column",
+      className,
+      style,
+      gap: 4,
+      width: "100%",
+      children: [
+        /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 2, width: "100%", children: [
+          /* @__PURE__ */ jsxs(Flex, { justify: "between", itemAlign: "center", width: "100%", children: [
+            /* @__PURE__ */ jsx(
+              Text.formatted,
+              {
+                size: "base",
+                weight: "semibold",
+                rule: "symbol",
+                formatString: "base-type",
+                intensity: 98,
+                showIcon: true,
+                children: symbol
+              }
+            ),
+            /* @__PURE__ */ jsx(Badge, { color: isLong ? "sell" : "buy", size: "xs", children: reverseTo })
+          ] }),
+          /* @__PURE__ */ jsxs(Flex, { justify: "between", itemAlign: "center", width: "100%", children: [
+            /* @__PURE__ */ jsx(Text, { size: "sm", intensity: 54, children: t("common.markPrice") }),
+            priceLabel
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(Divider, { intensity: 4, className: "oui-w-full" }),
+        /* @__PURE__ */ jsx(
+          OrderInfoCard,
+          {
+            title: closeAction,
+            side: closeSide,
+            leverage,
+            qty: positionQty,
+            baseDp
+          }
+        ),
+        /* @__PURE__ */ jsxs(Flex, { direction: "row", itemAlign: "center", width: "100%", children: [
+          /* @__PURE__ */ jsx(Divider, { intensity: 8, className: "oui-w-full" }),
+          /* @__PURE__ */ jsxs(Flex, { className: "oui-px-4 oui-py-[3px] oui-border oui-border-base-contrast-12 oui-rounded-full oui-shrink-0", children: [
+            reverseToIcon,
+            /* @__PURE__ */ jsx(Text, { size: "2xs", color: isLong ? "danger" : "success", children: reverseTo })
+          ] }),
+          /* @__PURE__ */ jsx(Divider, { intensity: 8, className: "oui-w-full" })
+        ] }),
+        /* @__PURE__ */ jsx(
+          OrderInfoCard,
+          {
+            title: openAction,
+            side: openSide,
+            leverage,
+            qty: reverseQty,
+            baseDp
+          }
+        ),
+        /* @__PURE__ */ jsx(Text, { size: "2xs", color: "warning", weight: "semibold", children: t("positions.reverse.description") })
+      ]
+    }
+  );
+};
+var useReversePositionEnabled = () => {
+  const { isMobile, isDesktop } = useScreen();
+  const [desktopEnabled, setDesktopEnabled] = useLocalStorage(
+    "orderly_reverse_position_enabled_desktop",
+    true
+  );
+  const [mobileEnabled, setMobileEnabled] = useLocalStorage(
+    "orderly_reverse_position_enabled_mobile",
+    false
+  );
+  const isEnabled = useMemo(() => {
+    if (isMobile) {
+      return mobileEnabled;
+    }
+    if (isDesktop) {
+      return desktopEnabled;
+    }
+    return false;
+  }, [isMobile, isDesktop, desktopEnabled, mobileEnabled]);
+  const setEnabled = useCallback(
+    (enabled) => {
+      if (isMobile) {
+        setMobileEnabled(enabled);
+      } else if (isDesktop) {
+        setDesktopEnabled(enabled);
+      }
+    },
+    [isMobile, isDesktop, setMobileEnabled, setDesktopEnabled]
+  );
+  return {
+    isEnabled,
+    setEnabled
+  };
+};
+var useReversePositionScript = (options) => {
+  const { position, onSuccess, onError } = options || {};
+  const { t } = useTranslation();
+  const { isEnabled, setEnabled } = useReversePositionEnabled();
+  const symbolsInfo = useSymbolsInfo();
+  const symbol = position?.symbol || "";
+  const { data: symbolMarketPrice } = useMarkPrice(symbol);
+  const symbolInfo = symbolsInfo?.[symbol];
+  const positionQty = useMemo(() => {
+    if (!position)
+      return 0;
+    return Math.abs(position.position_qty);
+  }, [position]);
+  const isLong = useMemo(() => {
+    if (!position)
+      return false;
+    return position.position_qty > 0;
+  }, [position]);
+  const oppositeSide = useMemo(() => {
+    return isLong ? OrderSide.SELL : OrderSide.BUY;
+  }, [isLong]);
+  const maxOpenQty = useMaxQty(symbol, oppositeSide, false);
+  const reverseQty = useMemo(() => {
+    if (!position)
+      return 0;
+    const desiredQty = positionQty;
+    if (desiredQty > maxOpenQty && maxOpenQty > 0) {
+      return maxOpenQty;
+    }
+    return desiredQty;
+  }, [positionQty, maxOpenQty]);
+  const [doCreateOrder, { isMutating }] = useSubAccountMutation(
+    "/v1/order",
+    "POST",
+    {
+      accountId: position?.account_id
+    }
+  );
+  const reversePosition = useCallback(async () => {
+    if (!position || positionQty === 0) {
+      toast.error("No position to reverse");
+      return false;
+    }
+    try {
+      const closeSide = isLong ? OrderSide.SELL : OrderSide.BUY;
+      const closeOrder = await doCreateOrder({
+        symbol: position.symbol,
+        order_type: OrderType.MARKET,
+        side: closeSide,
+        order_quantity: new Decimal(positionQty).toString(),
+        reduce_only: true
+      });
+      const openSide = isLong ? OrderSide.SELL : OrderSide.BUY;
+      const openOrder = await doCreateOrder({
+        symbol: position.symbol,
+        order_type: OrderType.MARKET,
+        side: openSide,
+        order_quantity: new Decimal(reverseQty).toString(),
+        reduce_only: false
+      });
+      if (!openOrder.success) {
+        throw new Error(
+          openOrder.message || "Failed to open opposite position"
+        );
+      }
+      onSuccess?.();
+      return true;
+    } catch (error) {
+      onError?.(error);
+      return false;
+    }
+  }, [position, positionQty, reverseQty, isLong, doCreateOrder, t, onSuccess]);
+  const displayInfo = useMemo(() => {
+    if (!position || !symbolInfo) {
+      return null;
+    }
+    const base = symbolInfo("base");
+    const quote = symbolInfo("quote");
+    const baseDp = symbolInfo("base_dp");
+    const quoteDp = symbolInfo("quote_dp");
+    const leverage = position.leverage || 1;
+    return {
+      symbol: position.symbol,
+      base,
+      quote,
+      baseDp,
+      quoteDp,
+      positionQty: new Decimal(positionQty).todp(baseDp).toString(),
+      reverseQty: new Decimal(reverseQty).todp(baseDp).toString(),
+      markPrice: symbolMarketPrice ? new Decimal(symbolMarketPrice).todp(quoteDp).toString() : "--",
+      leverage,
+      isLong
+    };
+  }, [
+    position,
+    symbolMarketPrice,
+    symbolInfo,
+    positionQty,
+    reverseQty,
+    isLong
+  ]);
+  return {
+    isEnabled,
+    setEnabled,
+    reversePosition,
+    isReversing: isMutating,
+    displayInfo,
+    positionQty,
+    reverseQty,
+    isLong
+  };
+};
+var ReversePositionWidget = (props) => {
+  const { position, close, resolve, reject } = props;
+  const { t } = useTranslation();
+  const { visible, hide, onOpenChange } = useModal();
+  const state = useReversePositionScript({
+    position,
+    onSuccess: () => {
+      resolve?.(true);
+      hide();
+    },
+    onError: (error) => {
+      reject?.(error);
+      hide();
+    }
+  });
+  const actions = useMemo(() => {
+    return {
+      primary: {
+        label: t("common.confirm"),
+        onClick: async () => {
+          try {
+            const result = await state.reversePosition();
+            if (result) {
+              resolve?.(true);
+              hide();
+              return true;
+            } else {
+              reject?.(false);
+              return false;
+            }
+          } catch (error) {
+            reject?.(error);
+            throw error;
+          }
+        },
+        loading: state.isReversing,
+        disabled: state.isReversing || !state.displayInfo
+      },
+      secondary: {
+        label: t("common.cancel"),
+        onClick: async () => {
+          reject?.("cancel");
+          hide();
+          return false;
+        }
+      }
+    };
+  }, [state, t, resolve, reject, hide]);
+  return /* @__PURE__ */ jsx(
+    SimpleDialog,
+    {
+      open: visible,
+      onOpenChange,
+      size: "sm",
+      title: i18n.t("positions.reverse.title"),
+      classNames: {
+        content: "oui-border oui-border-line-6"
+      },
+      actions,
+      children: /* @__PURE__ */ jsx(ReversePosition, { ...state })
+    }
+  );
+};
+var ReversePositionDialogId = "ReversePositionDialogId";
+registerSimpleDialog(
+  ReversePositionDialogId,
+  ReversePositionWidget,
+  {
+    size: "sm",
+    classNames: {
+      content: "oui-border oui-border-line-6"
+    },
+    title: () => i18n.t("positions.reverse.title")
+  }
+);
 var PositionsTabName = /* @__PURE__ */ ((PositionsTabName2) => {
   PositionsTabName2["Positions"] = "positions";
   PositionsTabName2["PositionHistory"] = "positionHistory";
@@ -911,6 +1309,7 @@ var usePositionsScript = (props) => {
     // Default to true for backward compatibility
   } = props;
   const { pagination, setPage } = usePagination({ pageSize: 50 });
+  const { isEnabled: positionReverse } = useReversePositionEnabled();
   const { tabSort, onTabSort } = useTabSort({
     storageKey: TRADING_POSITIONS_SORT_STORAGE_KEY
   });
@@ -918,7 +1317,7 @@ var usePositionsScript = (props) => {
     enableSortingStorage ? tabSort?.["positions" /* Positions */] : void 0,
     enableSortingStorage ? onTabSort("positions" /* Positions */) : void 0
   );
-  React.useEffect(() => {
+  React2.useEffect(() => {
     setPage(1);
   }, [symbol]);
   const [data, , { isLoading }] = usePositionStream(symbol, {
@@ -937,6 +1336,7 @@ var usePositionsScript = (props) => {
     onSymbolChange,
     pagination,
     onSort,
+    positionReverse,
     initialSort: enableSortingStorage ? tabSort?.["positions" /* Positions */] : void 0
   };
 };
@@ -1693,9 +2093,20 @@ var PartialTPSL = (props) => {
     slTriggerPrice,
     direction = "column"
   } = props;
-  const { partialTPSLOrder: order, quoteDp, baseDp } = usePositionsRowContext();
+  const {
+    partialTPSLOrder: order,
+    quoteDp,
+    baseDp,
+    position
+  } = usePositionsRowContext();
   const symbolInfo = useSymbolsInfo();
   const { t } = useTranslation();
+  const side = position.position_qty > 0 ? OrderSide.BUY : OrderSide.SELL;
+  const slPriceError = useTpslPriceChecker({
+    slPrice: slTriggerPrice?.toString() ?? void 0,
+    liqPrice: position.est_liq_price ?? null,
+    side
+  });
   const child = useMemo(() => {
     const children = [];
     if (!order?.symbol)
@@ -1728,6 +2139,7 @@ var PartialTPSL = (props) => {
             rule: "price",
             dp: symbolInfo[order.symbol]("quote_dp", 2),
             prefix: /* @__PURE__ */ jsx(Text, { intensity: 54, children: `${t("tpsl.sl")} - ` }),
+            suffix: /* @__PURE__ */ jsx(CloseToLiqPriceIcon, { slPriceError }),
             children: slTriggerPrice
           },
           "sl"
@@ -1740,7 +2152,7 @@ var PartialTPSL = (props) => {
       children.splice(1, 0, /* @__PURE__ */ jsx(Text, { children: "/" }, "split"));
     }
     return children;
-  }, [tpTriggerPrice, slTriggerPrice, order?.symbol, t]);
+  }, [tpTriggerPrice, slTriggerPrice, order?.symbol, t, slPriceError]);
   const hasTPSL = Array.isArray(child) ? !!child.length : !child;
   return /* @__PURE__ */ jsxs(Flex, { className: "oui-gap-[6px]", children: [
     /* @__PURE__ */ jsx(
@@ -1763,6 +2175,29 @@ var PartialTPSL = (props) => {
     ] })
   ] });
 };
+var ReversePositionButton = (props) => {
+  const { position } = props;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "",
+      style: { transform: "rotate(90deg)" },
+      onClick: () => {
+        modal.show(ReversePositionDialogId, {
+          position
+        });
+      },
+      children: /* @__PURE__ */ jsx(
+        ArrowLeftRightIcon,
+        {
+          size: 15,
+          opacity: 1,
+          className: "oui-cursor-pointer oui-text-base-contrast-54 hover:oui-text-base-contrast-80"
+        }
+      )
+    }
+  );
+};
 var ShareButton = (props) => {
   if (!props.sharePnLConfig) {
     return null;
@@ -1863,6 +2298,12 @@ var ShareButtonWidget = (props) => {
 var TriggerPrice = (props) => {
   const { stopLossPrice, takeProfitPrice } = props;
   const { tpslOrder, position } = usePositionsRowContext();
+  const side = position.position_qty > 0 ? OrderSide.BUY : OrderSide.SELL;
+  const slPriceError = useTpslPriceChecker({
+    slPrice: stopLossPrice?.toString() ?? void 0,
+    liqPrice: position.est_liq_price ?? null,
+    side
+  });
   return /* @__PURE__ */ jsx(
     TPSLTriggerPrice,
     {
@@ -1871,6 +2312,7 @@ var TriggerPrice = (props) => {
       direction: "column",
       order: tpslOrder,
       position,
+      slPriceError,
       tooltip: true
     }
   );
@@ -1993,7 +2435,8 @@ var TPSLTriggerPrice = (props) => {
             rule: "price",
             dp: symbolInfo[order.symbol]("quote_dp", 2),
             children: props.stopLossPrice,
-            prefix: !props.takeProfitPrice || direction === "column" ? /* @__PURE__ */ jsx(Text, { intensity: 54, children: `${t("tpsl.sl")} - ` }) : ""
+            prefix: !props.takeProfitPrice || direction === "column" ? /* @__PURE__ */ jsx(Text, { intensity: 54, children: `${t("tpsl.sl")} - ` }) : "",
+            suffix: /* @__PURE__ */ jsx(CloseToLiqPriceIcon, { slPriceError: props.slPriceError })
           },
           "sl"
         )
@@ -2005,7 +2448,13 @@ var TPSLTriggerPrice = (props) => {
       children.splice(1, 0, /* @__PURE__ */ jsx(Text, { children: "/" }, "split"));
     }
     return children;
-  }, [props.takeProfitPrice, props.stopLossPrice, order?.symbol, t]);
+  }, [
+    props.takeProfitPrice,
+    props.stopLossPrice,
+    order?.symbol,
+    t,
+    props.slPriceError
+  ]);
   const content = /* @__PURE__ */ jsx(
     "div",
     {
@@ -2140,7 +2589,12 @@ var UnselIcon = () => {
   );
 };
 var useColumn = (config) => {
-  const { pnlNotionalDecimalPrecision, sharePnLConfig, onSymbolChange } = config;
+  const {
+    pnlNotionalDecimalPrecision,
+    sharePnLConfig,
+    onSymbolChange,
+    positionReverse
+  } = config;
   const { t } = useTranslation();
   useRef(Date.now().toString());
   const column = useMemo(
@@ -2411,14 +2865,17 @@ var useColumn = (config) => {
         title: null,
         dataIndex: "close_position",
         align: "right",
-        width: 70,
+        width: positionReverse ? 100 : 70,
         fixed: "right",
-        render() {
-          return /* @__PURE__ */ jsx(Flex, { gapX: 2, justify: "end", children: /* @__PURE__ */ jsx(ClosePositionWidget, {}) });
+        render(_, record) {
+          return /* @__PURE__ */ jsxs(Flex, { gapX: 2, justify: "end", children: [
+            /* @__PURE__ */ jsx(ClosePositionWidget, {}),
+            positionReverse && /* @__PURE__ */ jsx(ReversePositionButton, { position: record })
+          ] });
         }
       }
     ],
-    [pnlNotionalDecimalPrecision, sharePnLConfig, t]
+    [pnlNotionalDecimalPrecision, sharePnLConfig, t, positionReverse]
   );
   return column;
 };
@@ -2598,13 +3055,32 @@ var LiqPrice = (props) => {
 var TPSLPrice = (props) => {
   const { item } = props;
   const { t } = useTranslation();
+  const slPriceError = useTpslPriceChecker({
+    slPrice: item.full_tp_sl?.sl_trigger_price?.toString() ?? void 0,
+    liqPrice: item.est_liq_price ?? null,
+    side: item.position_qty > 0 ? OrderSide.BUY : OrderSide.SELL
+  });
+  const partialSlPriceError = useTpslPriceChecker({
+    slPrice: item.partial_tp_sl?.sl_trigger_price?.toString() ?? void 0,
+    liqPrice: item.est_liq_price ?? null,
+    side: item.position_qty > 0 ? OrderSide.BUY : OrderSide.SELL
+  });
   const fullTPSL = useMemo(() => {
     if (item.full_tp_sl?.tp_trigger_price == null && item.full_tp_sl?.sl_trigger_price == null)
       return /* @__PURE__ */ jsx(AddIcon, { positionType: PositionType.FULL });
     return /* @__PURE__ */ jsxs(Flex, { className: "oui-gap-[2px]", children: [
       item.full_tp_sl?.tp_trigger_price && /* @__PURE__ */ jsx(Text.numeral, { color: "buy", children: item.full_tp_sl.tp_trigger_price }),
       item.full_tp_sl?.sl_trigger_price && "/",
-      item.full_tp_sl?.sl_trigger_price && /* @__PURE__ */ jsx(Text.numeral, { color: "sell", children: item.full_tp_sl.sl_trigger_price }),
+      item.full_tp_sl?.sl_trigger_price && /* @__PURE__ */ jsx(
+        Text.numeral,
+        {
+          as: "div",
+          color: "sell",
+          suffix: /* @__PURE__ */ jsx(CloseToLiqPriceIcon, { slPriceError }),
+          className: "oui-flex oui-items-center",
+          children: item.full_tp_sl.sl_trigger_price
+        }
+      ),
       /* @__PURE__ */ jsx(TPSLEditIcon, {})
     ] });
   }, [item.full_tp_sl]);
@@ -2614,7 +3090,16 @@ var TPSLPrice = (props) => {
     return /* @__PURE__ */ jsxs(Flex, { className: "oui-gap-[2px]", itemAlign: "center", children: [
       item.partial_tp_sl?.tp_trigger_price && /* @__PURE__ */ jsx(Text.numeral, { color: "buy", children: item.partial_tp_sl.tp_trigger_price }),
       item.partial_tp_sl?.sl_trigger_price && "/",
-      item.partial_tp_sl?.sl_trigger_price && /* @__PURE__ */ jsx(Text.numeral, { color: "sell", children: item.partial_tp_sl.sl_trigger_price }),
+      item.partial_tp_sl?.sl_trigger_price && /* @__PURE__ */ jsx(
+        Text.numeral,
+        {
+          as: "div",
+          color: "sell",
+          suffix: /* @__PURE__ */ jsx(CloseToLiqPriceIcon, { slPriceError: partialSlPriceError }),
+          className: "oui-flex oui-items-center",
+          children: item.partial_tp_sl.sl_trigger_price
+        }
+      ),
       /* @__PURE__ */ jsx(Text, { children: `(${item.partial_tp_sl?.order_num})` }),
       /* @__PURE__ */ jsx(TPSLEditIcon, {})
     ] });
@@ -2685,7 +3170,10 @@ var PositionCell = (props) => {
         /* @__PURE__ */ jsx(Divider, { intensity: 6, className: "oui-w-full" }),
         body,
         /* @__PURE__ */ jsx(TPSLPrice, { ...rest }),
-        buttons
+        /* @__PURE__ */ jsxs(Flex, { justify: "between", width: "100%", gap: 2, children: [
+          buttons,
+          props.positionReverse && /* @__PURE__ */ jsx(ReversePositionButton, { position: props.item })
+        ] })
       ]
     }
   );
@@ -2852,12 +3340,14 @@ var Positions = (props) => {
     pagination,
     isLoading,
     dataSource,
-    onSymbolChange
+    onSymbolChange,
+    positionReverse
   } = props;
   const columns = useColumn({
     pnlNotionalDecimalPrecision,
     sharePnLConfig,
-    onSymbolChange
+    onSymbolChange,
+    positionReverse
   });
   return /* @__PURE__ */ jsx(
     AuthGuardDataTable,
@@ -2890,7 +3380,8 @@ var MobilePositions = (props) => {
     pnlNotionalDecimalPrecision,
     sharePnLConfig,
     dataSource,
-    onSymbolChange
+    onSymbolChange,
+    positionReverse
   } = props;
   return /* @__PURE__ */ jsx(
     ListView,
@@ -2905,7 +3396,8 @@ var MobilePositions = (props) => {
           index,
           pnlNotionalDecimalPrecision,
           sharePnLConfig,
-          onSymbolChange
+          onSymbolChange,
+          positionReverse
         }
       ) }) })
     }
@@ -4833,6 +5325,6 @@ registerSimpleDialog(MarketCloseConfirmID, MarketCloseConfirm, {
   closable: false
 });
 
-export { CloseAllPositions, CloseAllPositionsWidget, CombinePositionsWidget, FundingFeeButton, FundingFeeHistoryUI, Liquidation, LiquidationWidget, MarketCloseConfirmID, MobileLiquidation, MobileLiquidationWidget, MobilePositionHistory, MobilePositionHistoryWidget, MobilePositionsWidget, PositionHistory, PositionHistoryWidget, PositionsTabName, PositionsWidget, sortList, useCloseAllPositionsScript, useLiquidationScript, usePositionHistoryScript, usePositionsRowContext, useSort, useTabSort };
+export { CloseAllPositions, CloseAllPositionsWidget, CombinePositionsWidget, FundingFeeButton, FundingFeeHistoryUI, Liquidation, LiquidationWidget, MarketCloseConfirmID, MobileLiquidation, MobileLiquidationWidget, MobilePositionHistory, MobilePositionHistoryWidget, MobilePositionsWidget, OrderInfoCard, PositionHistory, PositionHistoryWidget, PositionsTabName, PositionsWidget, ReversePosition, ReversePositionDialogId, ReversePositionWidget, sortList, useCloseAllPositionsScript, useLiquidationScript, usePositionHistoryScript, usePositionsRowContext, useReversePositionEnabled, useReversePositionScript, useSort, useTabSort };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.mjs.map