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

package/dist/index.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var ui = require('@orderly.network/ui');
-var React = require('react');
+var React2 = require('react');
 var i18n = require('@orderly.network/i18n');
 var types = require('@orderly.network/types');
 var utils = require('@orderly.network/utils');
@@ -18,7 +18,7 @@ var dateFns = require('date-fns');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React__default = /*#__PURE__*/_interopDefault(React);
+var React2__default = /*#__PURE__*/_interopDefault(React2);
 
 // src/index.ts
 var ConfirmHeader = (props) => {
@@ -75,7 +75,7 @@ var ConfirmFooter = (props) => {
 var OrderDetail = (props) => {
   const { quantity, price, quoteDp, side } = props;
   const { t } = i18n.useTranslation();
-  const total = React.useMemo(() => {
+  const total = React2.useMemo(() => {
     if (price && quantity) {
       return new utils.Decimal(price).mul(quantity).toFixed(quoteDp, utils.Decimal.ROUND_DOWN);
     }
@@ -216,17 +216,17 @@ var LimitConfirmDialog = (props) => {
     )
   ] });
 };
-var PositionsRowContext = React.createContext(
+var PositionsRowContext = React2.createContext(
   {}
 );
 var usePositionsRowContext = () => {
-  return React.useContext(PositionsRowContext);
+  return React2.useContext(PositionsRowContext);
 };
 function useEndReached(sentinelRef, onEndReached) {
-  const observer = React.useRef();
-  const cb = React.useRef(onEndReached);
+  const observer = React2.useRef();
+  const cb = React2.useRef(onEndReached);
   cb.current = onEndReached;
-  React.useEffect(() => {
+  React2.useEffect(() => {
     const options = {
       root: null,
       rootMargin: "0px",
@@ -244,12 +244,12 @@ function useEndReached(sentinelRef, onEndReached) {
       observer.current?.disconnect();
     };
   }, []);
-  React.useEffect(() => {
+  React2.useEffect(() => {
     observer.current?.observe(sentinelRef.current);
   }, []);
 }
 var EndReachedBox = (props) => {
-  const sentinelRef = React.useRef(null);
+  const sentinelRef = React2.useRef(null);
   const { onEndReached } = props;
   useEndReached(sentinelRef, () => {
     onEndReached?.();
@@ -279,12 +279,12 @@ var FundingFeeHistoryUI = ({ total, symbol, start_t, end_t }) => {
       revalidateFirstPage: false
     }
   );
-  const loadMore = React.useCallback(() => {
+  const loadMore = React2.useCallback(() => {
     setSize((prev) => {
       return prev + 1;
     });
   }, [setSize]);
-  const flattenData = React.useMemo(() => {
+  const flattenData = React2.useMemo(() => {
     if (!Array.isArray(data))
       return [];
     return data.flat().map((item) => {
@@ -294,7 +294,7 @@ var FundingFeeHistoryUI = ({ total, symbol, start_t, end_t }) => {
       };
     });
   }, [data]);
-  const listView = React.useMemo(() => {
+  const listView = React2.useMemo(() => {
     if (isMobile) {
       return /* @__PURE__ */ jsxRuntime.jsx(
         HistoryDataListViewSimple,
@@ -409,7 +409,7 @@ var FundingFeeLabel = ({
 };
 var HistoryDataListView = ({ isLoading, data, loadMore }) => {
   const { t } = i18n.useTranslation();
-  const columns = React.useMemo(() => {
+  const columns = React2.useMemo(() => {
     return [
       {
         title: t("common.time"),
@@ -468,7 +468,7 @@ var HistoryDataListViewSimple = ({
   isLoading,
   loadMore
 }) => {
-  const renderItem = React.useCallback((item) => {
+  const renderItem = React2.useCallback((item) => {
     return /* @__PURE__ */ jsxRuntime.jsx(FundingFeeItem, { item });
   }, []);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-h-[calc(80vh_-_104px)] oui-overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -661,7 +661,7 @@ var useCombinePositionsScript = (props) => {
     selectedAccount
   } = props;
   const { pagination, setPage } = ui.usePagination({ pageSize: 50 });
-  React.useEffect(() => {
+  React2.useEffect(() => {
     setPage(1);
   }, [symbol]);
   const symbolsInfo = hooks.useSymbolsInfo();
@@ -759,7 +759,7 @@ var useCombinePositionsScript = (props) => {
       (acc) => acc.position_qty !== 0
     )
   ) ?? [];
-  const filtered = React.useMemo(() => {
+  const filtered = React2.useMemo(() => {
     if (!selectedAccount || selectedAccount === "All accounts" /* ALL */) {
       return dataSource;
     }
@@ -771,13 +771,13 @@ var useCombinePositionsScript = (props) => {
       }
     });
   }, [dataSource, selectedAccount, state.mainAccountId]);
-  const groupDataSource = React.useMemo(() => {
+  const groupDataSource = React2.useMemo(() => {
     return groupDataByAccount(filtered, {
       mainAccountId: state.mainAccountId,
       subAccounts: state.subAccounts
     });
   }, [filtered, state.mainAccountId, state.subAccounts]);
-  const mergedLoading = React.useMemo(() => {
+  const mergedLoading = React2.useMemo(() => {
     return isLoading || isPositionLoading || isAccountInfoLoading;
   }, [isLoading, isPositionLoading, isAccountInfoLoading]);
   return {
@@ -857,8 +857,8 @@ function sortList(list, sort) {
   return sortedList;
 }
 function useSort(initialSort, onSortChange) {
-  const [sort, setSort] = React.useState(initialSort);
-  const onSort = React.useCallback((options) => {
+  const [sort, setSort] = React2.useState(initialSort);
+  const onSort = React2.useCallback((options) => {
     const nextSort = options ? {
       sortKey: options.sortKey,
       sortOrder: options.sort
@@ -866,7 +866,7 @@ function useSort(initialSort, onSortChange) {
     setSort(nextSort);
     onSortChange?.(nextSort);
   }, []);
-  const getSortedList = React.useCallback(
+  const getSortedList = React2.useCallback(
     (list) => sortList(list, sort),
     [sort]
   );
@@ -876,6 +876,404 @@ function useSort(initialSort, onSortChange) {
     getSortedList
   };
 }
+var OrderInfoCard = ({
+  title,
+  side,
+  leverage,
+  qty,
+  baseDp,
+  estLiqPrice,
+  className
+}) => {
+  const { t } = i18n.useTranslation();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    ui.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__ */ jsxRuntime.jsxs(ui.Flex, { justify: "between", itemAlign: "center", gap: 2, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "sm", weight: "semibold", intensity: 98, children: title }),
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { itemAlign: "center", gap: 1, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { color: side === types.OrderSide.SELL ? "sell" : "buy", size: "xs", children: side === types.OrderSide.SELL ? t("common.sell") : t("common.buy") }),
+            /* @__PURE__ */ jsxRuntime.jsxs(ui.Badge, { color: "neutral", size: "xs", children: [
+              leverage,
+              "X"
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          ui.Flex,
+          {
+            direction: "column",
+            justify: "between",
+            itemAlign: "center",
+            width: "100%",
+            children: [
+              /* @__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("common.qty") }),
+                    /* @__PURE__ */ jsxRuntime.jsx(ui.Text.numeral, { dp: baseDp, size: "sm", color: "danger", padding: false, children: qty })
+                  ]
+                }
+              ),
+              /* @__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("common.price") }),
+                    /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "sm", weight: "semibold", children: t("common.market") })
+                  ]
+                }
+              ),
+              estLiqPrice && /* @__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.estLiqPrice") }),
+                    /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "sm", weight: "semibold", children: estLiqPrice })
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+var ReversePosition = (props) => {
+  const { displayInfo, className, style, onConfirm, onCancel } = props;
+  const { t } = i18n.useTranslation();
+  if (!displayInfo) {
+    return null;
+  }
+  const {
+    symbol,
+    base,
+    quote,
+    baseDp,
+    quoteDp,
+    positionQty,
+    reverseQty,
+    markPrice,
+    leverage,
+    isLong
+  } = displayInfo;
+  const closeSide = !isLong ? types.OrderSide.SELL : types.OrderSide.BUY;
+  const openSide = isLong ? types.OrderSide.SELL : types.OrderSide.BUY;
+  const closeAction = isLong ? t("positions.reverse.marketCloseLong") : t("positions.reverse.marketCloseShort");
+  const openAction = openSide === types.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__ */ jsxRuntime.jsx(ui.ArrowDownShortIcon, { size: 16, color: "danger", opacity: 1 }) : /* @__PURE__ */ jsxRuntime.jsx(ui.ArrowUpShortIcon, { size: 16, color: "success", opacity: 1 });
+  const priceLabel = /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { itemAlign: "center", gap: 1, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Text.numeral, { dp: quoteDp, size: "sm", intensity: 80, children: markPrice }),
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "sm", intensity: 36, children: quote })
+  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    ui.Flex,
+    {
+      direction: "column",
+      className,
+      style,
+      gap: 4,
+      width: "100%",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", gap: 2, width: "100%", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "between", itemAlign: "center", width: "100%", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ui.Text.formatted,
+              {
+                size: "base",
+                weight: "semibold",
+                rule: "symbol",
+                formatString: "base-type",
+                intensity: 98,
+                showIcon: true,
+                children: symbol
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { color: isLong ? "sell" : "buy", size: "xs", children: reverseTo })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "between", itemAlign: "center", width: "100%", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "sm", intensity: 54, children: t("common.markPrice") }),
+            priceLabel
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { intensity: 4, className: "oui-w-full" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          OrderInfoCard,
+          {
+            title: closeAction,
+            side: closeSide,
+            leverage,
+            qty: positionQty,
+            baseDp
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "row", itemAlign: "center", width: "100%", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { intensity: 8, className: "oui-w-full" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { className: "oui-px-4 oui-py-[3px] oui-border oui-border-base-contrast-12 oui-rounded-full oui-shrink-0", children: [
+            reverseToIcon,
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", color: isLong ? "danger" : "success", children: reverseTo })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { intensity: 8, className: "oui-w-full" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          OrderInfoCard,
+          {
+            title: openAction,
+            side: openSide,
+            leverage,
+            qty: reverseQty,
+            baseDp
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", color: "warning", weight: "semibold", children: t("positions.reverse.description") })
+      ]
+    }
+  );
+};
+var useReversePositionEnabled = () => {
+  const { isMobile, isDesktop } = ui.useScreen();
+  const [desktopEnabled, setDesktopEnabled] = hooks.useLocalStorage(
+    "orderly_reverse_position_enabled_desktop",
+    true
+  );
+  const [mobileEnabled, setMobileEnabled] = hooks.useLocalStorage(
+    "orderly_reverse_position_enabled_mobile",
+    false
+  );
+  const isEnabled = React2.useMemo(() => {
+    if (isMobile) {
+      return mobileEnabled;
+    }
+    if (isDesktop) {
+      return desktopEnabled;
+    }
+    return false;
+  }, [isMobile, isDesktop, desktopEnabled, mobileEnabled]);
+  const setEnabled = React2.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 } = i18n.useTranslation();
+  const { isEnabled, setEnabled } = useReversePositionEnabled();
+  const symbolsInfo = hooks.useSymbolsInfo();
+  const symbol = position?.symbol || "";
+  const { data: symbolMarketPrice } = hooks.useMarkPrice(symbol);
+  const symbolInfo = symbolsInfo?.[symbol];
+  const positionQty = React2.useMemo(() => {
+    if (!position)
+      return 0;
+    return Math.abs(position.position_qty);
+  }, [position]);
+  const isLong = React2.useMemo(() => {
+    if (!position)
+      return false;
+    return position.position_qty > 0;
+  }, [position]);
+  const oppositeSide = React2.useMemo(() => {
+    return isLong ? types.OrderSide.SELL : types.OrderSide.BUY;
+  }, [isLong]);
+  const maxOpenQty = hooks.useMaxQty(symbol, oppositeSide, false);
+  const reverseQty = React2.useMemo(() => {
+    if (!position)
+      return 0;
+    const desiredQty = positionQty;
+    if (desiredQty > maxOpenQty && maxOpenQty > 0) {
+      return maxOpenQty;
+    }
+    return desiredQty;
+  }, [positionQty, maxOpenQty]);
+  const [doCreateOrder, { isMutating }] = hooks.useSubAccountMutation(
+    "/v1/order",
+    "POST",
+    {
+      accountId: position?.account_id
+    }
+  );
+  const reversePosition = React2.useCallback(async () => {
+    if (!position || positionQty === 0) {
+      ui.toast.error("No position to reverse");
+      return false;
+    }
+    try {
+      const closeSide = isLong ? types.OrderSide.SELL : types.OrderSide.BUY;
+      const closeOrder = await doCreateOrder({
+        symbol: position.symbol,
+        order_type: types.OrderType.MARKET,
+        side: closeSide,
+        order_quantity: new utils.Decimal(positionQty).toString(),
+        reduce_only: true
+      });
+      const openSide = isLong ? types.OrderSide.SELL : types.OrderSide.BUY;
+      const openOrder = await doCreateOrder({
+        symbol: position.symbol,
+        order_type: types.OrderType.MARKET,
+        side: openSide,
+        order_quantity: new utils.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 = React2.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 utils.Decimal(positionQty).todp(baseDp).toString(),
+      reverseQty: new utils.Decimal(reverseQty).todp(baseDp).toString(),
+      markPrice: symbolMarketPrice ? new utils.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 } = i18n.useTranslation();
+  const { visible, hide, onOpenChange } = ui.useModal();
+  const state = useReversePositionScript({
+    position,
+    onSuccess: () => {
+      resolve?.(true);
+      hide();
+    },
+    onError: (error) => {
+      reject?.(error);
+      hide();
+    }
+  });
+  const actions = React2.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__ */ jsxRuntime.jsx(
+    ui.SimpleDialog,
+    {
+      open: visible,
+      onOpenChange,
+      size: "sm",
+      title: i18n.i18n.t("positions.reverse.title"),
+      classNames: {
+        content: "oui-border oui-border-line-6"
+      },
+      actions,
+      children: /* @__PURE__ */ jsxRuntime.jsx(ReversePosition, { ...state })
+    }
+  );
+};
+var ReversePositionDialogId = "ReversePositionDialogId";
+ui.registerSimpleDialog(
+  ReversePositionDialogId,
+  ReversePositionWidget,
+  {
+    size: "sm",
+    classNames: {
+      content: "oui-border oui-border-line-6"
+    },
+    title: () => i18n.i18n.t("positions.reverse.title")
+  }
+);
 var PositionsTabName = /* @__PURE__ */ ((PositionsTabName2) => {
   PositionsTabName2["Positions"] = "positions";
   PositionsTabName2["PositionHistory"] = "positionHistory";
@@ -892,7 +1290,7 @@ function useTabSort(options) {
       sortOrder: "desc"
     }
   });
-  const onTabSort = React.useCallback(
+  const onTabSort = React2.useCallback(
     (type) => (sort) => {
       setTabSort({ ...tabSort, [type]: sort });
     },
@@ -917,6 +1315,7 @@ var usePositionsScript = (props) => {
     // Default to true for backward compatibility
   } = props;
   const { pagination, setPage } = ui.usePagination({ pageSize: 50 });
+  const { isEnabled: positionReverse } = useReversePositionEnabled();
   const { tabSort, onTabSort } = useTabSort({
     storageKey: TRADING_POSITIONS_SORT_STORAGE_KEY
   });
@@ -924,7 +1323,7 @@ var usePositionsScript = (props) => {
     enableSortingStorage ? tabSort?.["positions" /* Positions */] : void 0,
     enableSortingStorage ? onTabSort("positions" /* Positions */) : void 0
   );
-  React__default.default.useEffect(() => {
+  React2__default.default.useEffect(() => {
     setPage(1);
   }, [symbol]);
   const [data, , { isLoading }] = hooks.usePositionStream(symbol, {
@@ -943,19 +1342,20 @@ var usePositionsScript = (props) => {
     onSymbolChange,
     pagination,
     onSort,
+    positionReverse,
     initialSort: enableSortingStorage ? tabSort?.["positions" /* Positions */] : void 0
   };
 };
-var SymbolContext = React.createContext(
+var SymbolContext = React2.createContext(
   {}
 );
 var useSymbolContext = () => {
-  return React.useContext(SymbolContext);
+  return React2.useContext(SymbolContext);
 };
 var SymbolProvider = (props) => {
   const { symbol, children } = props;
   const symbolInfo = hooks.useSymbolsInfo()[symbol];
-  const memoizedValue = React.useMemo(() => {
+  const memoizedValue = React2.useMemo(() => {
     return {
       symbol,
       base_dp: symbolInfo("base_dp"),
@@ -993,8 +1393,8 @@ var RwaStatusTag = ({ symbol }) => {
 };
 var QuantitySlider = (props) => {
   const { t } = i18n.useTranslation();
-  const [sliderValue, setSliderValue] = React.useState(props.value);
-  React.useEffect(() => {
+  const [sliderValue, setSliderValue] = React2.useState(props.value);
+  React2.useEffect(() => {
     setSliderValue(props.value);
   }, [props.value]);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -1445,11 +1845,11 @@ var DesktopClosePosition = (props) => {
   ] });
 };
 var useClosePositionScript = (props) => {
-  const [sheetOpen, setSheetOpen] = React.useState(false);
-  const [dialogOpen, setDialogOpen] = React.useState(false);
-  const [popoverOpen, setPopoverOpen] = React.useState(false);
-  const [sliderValue, setSliderValue] = React.useState(100);
-  const quantityInputRef = React.useRef(null);
+  const [sheetOpen, setSheetOpen] = React2.useState(false);
+  const [dialogOpen, setDialogOpen] = React2.useState(false);
+  const [popoverOpen, setPopoverOpen] = React2.useState(false);
+  const [sliderValue, setSliderValue] = React2.useState(100);
+  const quantityInputRef = React2.useRef(null);
   const [orderConfirm] = hooks.useLocalStorage("orderly_order_confirm", true);
   const {
     position,
@@ -1472,19 +1872,19 @@ var useClosePositionScript = (props) => {
   const closeType = props.type || type;
   const isMarketClose = closeType === types.OrderType.MARKET;
   const isEntirePosition = maxQty?.toString() === quantity.toString();
-  React.useEffect(() => {
+  React2.useEffect(() => {
     if (sheetOpen) {
       updateOrderType(props.type);
     }
   }, [props.type, sheetOpen]);
-  const { priceErrorMsg, quantityErrorMsg } = React.useMemo(() => {
+  const { priceErrorMsg, quantityErrorMsg } = React2.useMemo(() => {
     return {
       priceErrorMsg: getErrorMsg("order_price"),
       quantityErrorMsg: getErrorMsg("order_quantity")
     };
   }, [errors]);
   const disabled = !!(priceErrorMsg || quantityErrorMsg);
-  const formatQuantityToBaseTick = React.useCallback(
+  const formatQuantityToBaseTick = React2.useCallback(
     (value) => {
       if (baseTick && baseTick > 0) {
         const formatQty = hooks.utils.formatNumber(value, baseTick) ?? value;
@@ -1493,7 +1893,7 @@ var useClosePositionScript = (props) => {
     },
     [baseTick, updateQuantity]
   );
-  const onSliderValueChange = React.useCallback(
+  const onSliderValueChange = React2.useCallback(
     (value) => {
       setSliderValue(value);
       const qty = new utils.Decimal(value).div(100).mul(maxQty).toFixed(base_dp, utils.Decimal.ROUND_DOWN);
@@ -1501,38 +1901,38 @@ var useClosePositionScript = (props) => {
     },
     [maxQty, base_dp, formatQuantityToBaseTick]
   );
-  React.useEffect(() => {
+  React2.useEffect(() => {
     const qty = Math.min(Number(quantity || 0), maxQty);
     const slider = new utils.Decimal(qty).div(maxQty).mul(100).toDecimalPlaces(2, utils.Decimal.ROUND_DOWN).toNumber();
     setSliderValue(slider);
   }, [quantity]);
-  const onMax = React.useCallback(() => {
+  const onMax = React2.useCallback(() => {
     updateQuantity(maxQty?.toString());
   }, [maxQty, updateQuantity]);
-  const onConfirm = React.useCallback(() => {
+  const onConfirm = React2.useCallback(() => {
     return onSubmit().then((res) => {
       setSheetOpen(false);
       setDialogOpen(false);
       setPopoverOpen(false);
     });
   }, [onSubmit]);
-  const onDoubleConfirm = React.useCallback(() => {
+  const onDoubleConfirm = React2.useCallback(() => {
     if (!orderConfirm) {
       return onConfirm();
     }
     setDialogOpen(true);
     return Promise.resolve();
   }, [onConfirm, orderConfirm]);
-  const onCloseSheet = React.useCallback(() => {
+  const onCloseSheet = React2.useCallback(() => {
     setSheetOpen(false);
   }, []);
-  const onCloseDialog = React.useCallback(() => {
+  const onCloseDialog = React2.useCallback(() => {
     setDialogOpen(false);
   }, []);
-  const onClosePopover = React.useCallback(() => {
+  const onClosePopover = React2.useCallback(() => {
     setPopoverOpen(false);
   }, []);
-  const onEntirePosition = React.useCallback(() => {
+  const onEntirePosition = React2.useCallback(() => {
     updateQuantity("0");
     quantityInputRef.current?.focus();
     setTimeout(() => {
@@ -1699,10 +2099,21 @@ var PartialTPSL = (props) => {
     slTriggerPrice,
     direction = "column"
   } = props;
-  const { partialTPSLOrder: order, quoteDp, baseDp } = usePositionsRowContext();
+  const {
+    partialTPSLOrder: order,
+    quoteDp,
+    baseDp,
+    position
+  } = usePositionsRowContext();
   const symbolInfo = hooks.useSymbolsInfo();
   const { t } = i18n.useTranslation();
-  const child = React.useMemo(() => {
+  const side = position.position_qty > 0 ? types.OrderSide.BUY : types.OrderSide.SELL;
+  const slPriceError = hooks.useTpslPriceChecker({
+    slPrice: slTriggerPrice?.toString() ?? void 0,
+    liqPrice: position.est_liq_price ?? null,
+    side
+  });
+  const child = React2.useMemo(() => {
     const children = [];
     if (!order?.symbol)
       return /* @__PURE__ */ jsxRuntime.jsx(AddIcon, { positionType: types.PositionType.PARTIAL });
@@ -1734,6 +2145,7 @@ var PartialTPSL = (props) => {
             rule: "price",
             dp: symbolInfo[order.symbol]("quote_dp", 2),
             prefix: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { intensity: 54, children: `${t("tpsl.sl")} - ` }),
+            suffix: /* @__PURE__ */ jsxRuntime.jsx(uiTpsl.CloseToLiqPriceIcon, { slPriceError }),
             children: slTriggerPrice
           },
           "sl"
@@ -1746,7 +2158,7 @@ var PartialTPSL = (props) => {
       children.splice(1, 0, /* @__PURE__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsxs(ui.Flex, { className: "oui-gap-[6px]", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -1769,6 +2181,29 @@ var PartialTPSL = (props) => {
     ] })
   ] });
 };
+var ReversePositionButton = (props) => {
+  const { position } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "",
+      style: { transform: "rotate(90deg)" },
+      onClick: () => {
+        ui.modal.show(ReversePositionDialogId, {
+          position
+        });
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        ui.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;
@@ -1790,7 +2225,7 @@ var useShareButtonScript = (props) => {
   const { getFirstRefCode } = hooks.useReferralInfo();
   const symbolsInfo = hooks.useSymbolsInfo();
   const { data: accountInfo } = hooks.useAccountInfo();
-  const refCode = React.useMemo(() => {
+  const refCode = React2.useMemo(() => {
     return getFirstRefCode()?.code;
   }, [getFirstRefCode]);
   const symbolLeverage = hooks.useLeverageBySymbol(position.symbol);
@@ -1869,6 +2304,12 @@ var ShareButtonWidget = (props) => {
 var TriggerPrice = (props) => {
   const { stopLossPrice, takeProfitPrice } = props;
   const { tpslOrder, position } = usePositionsRowContext();
+  const side = position.position_qty > 0 ? types.OrderSide.BUY : types.OrderSide.SELL;
+  const slPriceError = hooks.useTpslPriceChecker({
+    slPrice: stopLossPrice?.toString() ?? void 0,
+    liqPrice: position.est_liq_price ?? null,
+    side
+  });
   return /* @__PURE__ */ jsxRuntime.jsx(
     TPSLTriggerPrice,
     {
@@ -1877,6 +2318,7 @@ var TriggerPrice = (props) => {
       direction: "column",
       order: tpslOrder,
       position,
+      slPriceError,
       tooltip: true
     }
   );
@@ -1916,7 +2358,7 @@ var TPSLTriggerPrice = (props) => {
   const { direction = "row", order, position } = props;
   const symbolInfo = hooks.useSymbolsInfo();
   const { t } = i18n.useTranslation();
-  const pnl = React.useMemo(() => {
+  const pnl = React2.useMemo(() => {
     const msgs = [];
     if (!props.tooltip || !order || !position)
       return;
@@ -1967,7 +2409,7 @@ var TPSLTriggerPrice = (props) => {
     order?.quantity,
     order?.algo_type
   ]);
-  const child = React.useMemo(() => {
+  const child = React2.useMemo(() => {
     const children = [];
     if (!order?.symbol)
       return /* @__PURE__ */ jsxRuntime.jsx(AddIcon, { positionType: types.PositionType.FULL });
@@ -1999,7 +2441,8 @@ var TPSLTriggerPrice = (props) => {
             rule: "price",
             dp: symbolInfo[order.symbol]("quote_dp", 2),
             children: props.stopLossPrice,
-            prefix: !props.takeProfitPrice || direction === "column" ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { intensity: 54, children: `${t("tpsl.sl")} - ` }) : ""
+            prefix: !props.takeProfitPrice || direction === "column" ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { intensity: 54, children: `${t("tpsl.sl")} - ` }) : "",
+            suffix: /* @__PURE__ */ jsxRuntime.jsx(uiTpsl.CloseToLiqPriceIcon, { slPriceError: props.slPriceError })
           },
           "sl"
         )
@@ -2011,7 +2454,13 @@ var TPSLTriggerPrice = (props) => {
       children.splice(1, 0, /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: "/" }, "split"));
     }
     return children;
-  }, [props.takeProfitPrice, props.stopLossPrice, order?.symbol, t]);
+  }, [
+    props.takeProfitPrice,
+    props.stopLossPrice,
+    order?.symbol,
+    t,
+    props.slPriceError
+  ]);
   const content = /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -2146,10 +2595,15 @@ var UnselIcon = () => {
   );
 };
 var useColumn = (config) => {
-  const { pnlNotionalDecimalPrecision, sharePnLConfig, onSymbolChange } = config;
+  const {
+    pnlNotionalDecimalPrecision,
+    sharePnLConfig,
+    onSymbolChange,
+    positionReverse
+  } = config;
   const { t } = i18n.useTranslation();
-  React.useRef(Date.now().toString());
-  const column = React.useMemo(
+  React2.useRef(Date.now().toString());
+  const column = React2.useMemo(
     () => [
       {
         title: t("common.symbol"),
@@ -2417,14 +2871,17 @@ var useColumn = (config) => {
         title: null,
         dataIndex: "close_position",
         align: "right",
-        width: 70,
+        width: positionReverse ? 100 : 70,
         fixed: "right",
-        render() {
-          return /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { gapX: 2, justify: "end", children: /* @__PURE__ */ jsxRuntime.jsx(ClosePositionWidget, {}) });
+        render(_, record) {
+          return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gapX: 2, justify: "end", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ClosePositionWidget, {}),
+            positionReverse && /* @__PURE__ */ jsxRuntime.jsx(ReversePositionButton, { position: record })
+          ] });
         }
       }
     ],
-    [pnlNotionalDecimalPrecision, sharePnLConfig, t]
+    [pnlNotionalDecimalPrecision, sharePnLConfig, t, positionReverse]
   );
   return column;
 };
@@ -2604,23 +3061,51 @@ var LiqPrice = (props) => {
 var TPSLPrice = (props) => {
   const { item } = props;
   const { t } = i18n.useTranslation();
-  const fullTPSL = React.useMemo(() => {
+  const slPriceError = hooks.useTpslPriceChecker({
+    slPrice: item.full_tp_sl?.sl_trigger_price?.toString() ?? void 0,
+    liqPrice: item.est_liq_price ?? null,
+    side: item.position_qty > 0 ? types.OrderSide.BUY : types.OrderSide.SELL
+  });
+  const partialSlPriceError = hooks.useTpslPriceChecker({
+    slPrice: item.partial_tp_sl?.sl_trigger_price?.toString() ?? void 0,
+    liqPrice: item.est_liq_price ?? null,
+    side: item.position_qty > 0 ? types.OrderSide.BUY : types.OrderSide.SELL
+  });
+  const fullTPSL = React2.useMemo(() => {
     if (item.full_tp_sl?.tp_trigger_price == null && item.full_tp_sl?.sl_trigger_price == null)
       return /* @__PURE__ */ jsxRuntime.jsx(AddIcon, { positionType: types.PositionType.FULL });
     return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { className: "oui-gap-[2px]", children: [
       item.full_tp_sl?.tp_trigger_price && /* @__PURE__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsx(ui.Text.numeral, { color: "sell", children: item.full_tp_sl.sl_trigger_price }),
+      item.full_tp_sl?.sl_trigger_price && /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Text.numeral,
+        {
+          as: "div",
+          color: "sell",
+          suffix: /* @__PURE__ */ jsxRuntime.jsx(uiTpsl.CloseToLiqPriceIcon, { slPriceError }),
+          className: "oui-flex oui-items-center",
+          children: item.full_tp_sl.sl_trigger_price
+        }
+      ),
       /* @__PURE__ */ jsxRuntime.jsx(TPSLEditIcon, {})
     ] });
   }, [item.full_tp_sl]);
-  const partialTPSL = React.useMemo(() => {
+  const partialTPSL = React2.useMemo(() => {
     if (item.partial_tp_sl?.tp_trigger_price == null && item.partial_tp_sl?.sl_trigger_price == null)
       return /* @__PURE__ */ jsxRuntime.jsx(AddIcon, { positionType: types.PositionType.PARTIAL });
     return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { className: "oui-gap-[2px]", itemAlign: "center", children: [
       item.partial_tp_sl?.tp_trigger_price && /* @__PURE__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsx(ui.Text.numeral, { color: "sell", children: item.partial_tp_sl.sl_trigger_price }),
+      item.partial_tp_sl?.sl_trigger_price && /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Text.numeral,
+        {
+          as: "div",
+          color: "sell",
+          suffix: /* @__PURE__ */ jsxRuntime.jsx(uiTpsl.CloseToLiqPriceIcon, { slPriceError: partialSlPriceError }),
+          className: "oui-flex oui-items-center",
+          children: item.partial_tp_sl.sl_trigger_price
+        }
+      ),
       /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: `(${item.partial_tp_sl?.order_num})` }),
       /* @__PURE__ */ jsxRuntime.jsx(TPSLEditIcon, {})
     ] });
@@ -2691,7 +3176,10 @@ var PositionCell = (props) => {
         /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { intensity: 6, className: "oui-w-full" }),
         body,
         /* @__PURE__ */ jsxRuntime.jsx(TPSLPrice, { ...rest }),
-        buttons
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "between", width: "100%", gap: 2, children: [
+          buttons,
+          props.positionReverse && /* @__PURE__ */ jsxRuntime.jsx(ReversePositionButton, { position: props.item })
+        ] })
       ]
     }
   );
@@ -2712,12 +3200,12 @@ var PositionCellWidget = (props) => {
 var PositionsRowProvider = (props) => {
   const { position, children, mutatePositions } = props;
   const { t } = i18n.useTranslation();
-  const [quantity, setQuantity] = React.useState(
+  const [quantity, setQuantity] = React2.useState(
     Math.abs(position.position_qty).toString()
   );
-  const [price, setPrice] = React.useState("");
-  const [type, setType] = React.useState(types.OrderType.MARKET);
-  React.useEffect(() => {
+  const [price, setPrice] = React2.useState("");
+  const [type, setType] = React2.useState(types.OrderType.MARKET);
+  React2.useEffect(() => {
     setQuantity(Math.abs(position.position_qty).toString());
   }, [position.position_qty]);
   const symbol = position.symbol;
@@ -2741,7 +3229,7 @@ var PositionsRowProvider = (props) => {
       price
     }
   });
-  const updateQuantity = React.useCallback(
+  const updateQuantity = React2.useCallback(
     (value) => {
       const newValues = calculate(
         {},
@@ -2754,7 +3242,7 @@ var PositionsRowProvider = (props) => {
     },
     [calculate, symbolsInfo, position.mark_price]
   );
-  const updatePriceChange = React.useCallback(
+  const updatePriceChange = React2.useCallback(
     (value) => {
       const newValues = calculate(
         {},
@@ -2767,14 +3255,14 @@ var PositionsRowProvider = (props) => {
     },
     [calculate, symbolsInfo, position.mark_price]
   );
-  const updateOrderType = React.useCallback(
+  const updateOrderType = React2.useCallback(
     (type2) => {
       setType(type2);
       setPrice(type2 === types.OrderType.LIMIT ? position.mark_price?.toString() : "");
     },
     [position.mark_price]
   );
-  const onSubmit = React.useCallback(async () => {
+  const onSubmit = React2.useCallback(async () => {
     if (Number(quantity) > symbolInfo("base_max")) {
       ui.toast.error(
         /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
@@ -2805,7 +3293,7 @@ var PositionsRowProvider = (props) => {
       return false;
     });
   }, [submit]);
-  const memoizedValue = React.useMemo(() => {
+  const memoizedValue = React2.useMemo(() => {
     return {
       quantity,
       price,
@@ -2858,12 +3346,14 @@ var Positions = (props) => {
     pagination,
     isLoading,
     dataSource,
-    onSymbolChange
+    onSymbolChange,
+    positionReverse
   } = props;
   const columns = useColumn({
     pnlNotionalDecimalPrecision,
     sharePnLConfig,
-    onSymbolChange
+    onSymbolChange,
+    positionReverse
   });
   return /* @__PURE__ */ jsxRuntime.jsx(
     uiConnector.AuthGuardDataTable,
@@ -2896,7 +3386,8 @@ var MobilePositions = (props) => {
     pnlNotionalDecimalPrecision,
     sharePnLConfig,
     dataSource,
-    onSymbolChange
+    onSymbolChange,
+    positionReverse
   } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(
     ui.ListView,
@@ -2911,7 +3402,8 @@ var MobilePositions = (props) => {
           index,
           pnlNotionalDecimalPrecision,
           sharePnLConfig,
-          onSymbolChange
+          onSymbolChange,
+          positionReverse
         }
       ) }) })
     }
@@ -2988,7 +3480,7 @@ var CombinePositionsWidget = (props) => {
 var usePositionHistoryColumn = (props) => {
   const { onSymbolChange, pnlNotionalDecimalPrecision } = props;
   const { t } = i18n.useTranslation();
-  const column = React.useMemo(
+  const column = React2.useMemo(
     () => [
       // instrument
       {
@@ -3118,7 +3610,7 @@ var usePositionHistoryColumn = (props) => {
 var SymbolInfo = (props) => {
   const { record, onSymbolChange } = props;
   const { t } = i18n.useTranslation();
-  const tags = React.useMemo(() => {
+  const tags = React2.useMemo(() => {
     const list = [];
     const status = record.position_status;
     const renderStatus = () => {
@@ -3387,10 +3879,10 @@ var usePositionHistoryScript = (props) => {
     filterItems,
     onFilter
   } = useFilter();
-  React.useEffect(() => {
+  React2.useEffect(() => {
     setPage(1);
   }, [status, side, dateRange, filterDays, symbol]);
-  const filterData = React.useMemo(() => {
+  const filterData = React2.useMemo(() => {
     if (data == null)
       return data;
     return data.filter((item) => {
@@ -3424,18 +3916,18 @@ var usePositionHistoryScript = (props) => {
 };
 var useFilter = () => {
   const { t } = i18n.useTranslation();
-  const [status, setStatus] = React.useState(
+  const [status, setStatus] = React2.useState(
     "all" /* all */
   );
-  const [side, setSide] = React.useState(
+  const [side, setSide] = React2.useState(
     "all" /* all */
   );
   const defaultRange = formatDatePickerRange({
     to: offsetEndOfDay(/* @__PURE__ */ new Date()),
     from: offsetStartOfDay(dateFns.subDays(/* @__PURE__ */ new Date(), 89))
   });
-  const [filterDays, setFilterDays] = React.useState(90);
-  const [dateRange, setDateRange] = React.useState(defaultRange);
+  const [filterDays, setFilterDays] = React2.useState(90);
+  const [dateRange, setDateRange] = React2.useState(defaultRange);
   const updateFilterDays = (days) => {
     setFilterDays(days);
     setDateRange({
@@ -3483,7 +3975,7 @@ var useFilter = () => {
     }
   };
   const { isMobile } = ui.useScreen();
-  const filterItems = React.useMemo(() => {
+  const filterItems = React2.useMemo(() => {
     const sideFilter = {
       type: "select",
       name: "side",
@@ -3600,7 +4092,7 @@ var PositionHistoryType = (props) => {
       )
     });
   };
-  const tags = React.useMemo(() => {
+  const tags = React2.useMemo(() => {
     const list = [];
     const status = record.position_status;
     const renderStatus = () => {
@@ -3920,7 +4412,7 @@ var PositionHistory = (props) => {
     sharePnLConfig: props.sharePnLConfig
   });
   const { t } = i18n.useTranslation();
-  const dayLabel = React.useMemo(() => {
+  const dayLabel = React2.useMemo(() => {
     return {
       1: t("common.select.1d"),
       7: t("common.select.7d"),
@@ -4076,7 +4568,7 @@ var TooltipButton = (props) => {
 };
 var useLiquidationColumn = (props) => {
   const { t } = i18n.useTranslation();
-  const column = React.useMemo(
+  const column = React2.useMemo(
     () => [
       // Time
       {
@@ -4292,7 +4784,7 @@ var Header2 = (props) => {
 var Body2 = (props) => {
   const position = props.item.positions_by_perp?.[0];
   const { t } = i18n.useTranslation();
-  const mr = React.useMemo(() => {
+  const mr = React2.useMemo(() => {
     if (isNaN(props.item?.margin_ratio))
       return "--";
     return `${new utils.Decimal(props.item.margin_ratio).mul(100).todp(2, utils.Decimal.ROUND_DOWN).toNumber()}%`;
@@ -4395,7 +4887,7 @@ var LiquidationCellWidget = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsx(LiquidationCell, { classNames, ...state });
 };
 var Liquidation = (props) => {
-  const [expanded, setExpanded] = React.useState({});
+  const [expanded, setExpanded] = React2.useState({});
   const column = useLiquidationColumn();
   return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", width: "100%", height: "100%", itemAlign: "start", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 3, children: [
@@ -4571,7 +5063,7 @@ var useLiquidationScript = (props) => {
     pageSize: 10
   });
   const { dateRange, filterDays, updateFilterDays, filterItems, onFilter } = useFilter2();
-  React.useEffect(() => {
+  React2.useEffect(() => {
     setPage(1);
   }, [symbol, dateRange, filterDays]);
   const [data, { meta, isLoading, loadMore }] = useLiquidation({
@@ -4603,10 +5095,10 @@ var useLiquidation = (props) => {
     formatter: (data2) => data2,
     revalidateOnFocus: true
   });
-  const meta = React.useMemo(() => {
+  const meta = React2.useMemo(() => {
     return ordersResponse.data?.[0]?.meta;
   }, [ordersResponse.data?.[0]]);
-  const data = React.useMemo(() => {
+  const data = React2.useMemo(() => {
     return ordersResponse.data?.map(
       (item) => (
         // @ts-ignore
@@ -4636,8 +5128,8 @@ var useFilter2 = () => {
     to: offsetEndOfDay(/* @__PURE__ */ new Date()),
     from: offsetStartOfDay(dateFns.subDays(/* @__PURE__ */ new Date(), 89))
   });
-  const [filterDays, setFilterDays] = React.useState(90);
-  const [dateRange, setDateRange] = React.useState(defaultRange);
+  const [filterDays, setFilterDays] = React2.useState(90);
+  const [dateRange, setDateRange] = React2.useState(defaultRange);
   const updateFilterDays = (days) => {
     setFilterDays(days);
     setDateRange({
@@ -4679,7 +5171,7 @@ var useFilter2 = () => {
     }
   };
   const { isMobile } = ui.useScreen();
-  const filterItems = React.useMemo(() => {
+  const filterItems = React2.useMemo(() => {
     const dateRangeFilter = {
       type: "range",
       name: "dateRange",
@@ -4757,21 +5249,21 @@ var useCloseAllPositionsScript = (options) => {
   const { t } = i18n.useTranslation();
   const { tracking } = hooks.useTrack();
   const [positionsData] = hooks.usePositionStream(symbol);
-  const openPositions = React.useMemo(() => {
+  const openPositions = React2.useMemo(() => {
     if (!positionsData?.rows)
       return [];
     return positionsData.rows.filter(
       (position) => position.position_qty !== 0 && position.position_qty !== void 0
     );
   }, [positionsData]);
-  const hasOpenPositions = React.useMemo(() => {
+  const hasOpenPositions = React2.useMemo(() => {
     return openPositions.length > 0;
   }, [openPositions]);
   const [doCreateOrder, { isMutating }] = hooks.useSubAccountMutation(
     "/v1/order",
     "POST"
   );
-  const closeAllPositions = React.useCallback(async () => {
+  const closeAllPositions = React2.useCallback(async () => {
     if (!hasOpenPositions)
       return;
     try {
@@ -4799,7 +5291,7 @@ var useCloseAllPositionsScript = (options) => {
       return false;
     }
   }, [openPositions, hasOpenPositions, doCreateOrder, t, onSuccess]);
-  const onCloseAll = React.useCallback(() => {
+  const onCloseAll = React2.useCallback(() => {
     ui.modal.confirm({
       title: t("positions.closeAll"),
       content: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "sm", children: t("positions.closeAll.description") }),
@@ -4852,15 +5344,21 @@ exports.MobileLiquidationWidget = MobileLiquidationWidget;
 exports.MobilePositionHistory = MobilePositionHistory;
 exports.MobilePositionHistoryWidget = MobilePositionHistoryWidget;
 exports.MobilePositionsWidget = MobilePositionsWidget;
+exports.OrderInfoCard = OrderInfoCard;
 exports.PositionHistory = PositionHistory;
 exports.PositionHistoryWidget = PositionHistoryWidget;
 exports.PositionsTabName = PositionsTabName;
 exports.PositionsWidget = PositionsWidget;
+exports.ReversePosition = ReversePosition;
+exports.ReversePositionDialogId = ReversePositionDialogId;
+exports.ReversePositionWidget = ReversePositionWidget;
 exports.sortList = sortList;
 exports.useCloseAllPositionsScript = useCloseAllPositionsScript;
 exports.useLiquidationScript = useLiquidationScript;
 exports.usePositionHistoryScript = usePositionHistoryScript;
 exports.usePositionsRowContext = usePositionsRowContext;
+exports.useReversePositionEnabled = useReversePositionEnabled;
+exports.useReversePositionScript = useReversePositionScript;
 exports.useSort = useSort;
 exports.useTabSort = useTabSort;
 //# sourceMappingURL=out.js.map