@orderly.network/ui-positions 2.10.1 → 2.10.2

package/dist/index.d.mts

@@ -166,12 +166,17 @@ declare const MobileLiquidation: FC<LiquidationState & {
     };
 }>;
 
+declare enum CloseType {
+    ALL = "ALL",
+    PROFIT = "PROFIT",
+    LOSS = "LOSS"
+}
 interface UseCloseAllPositionsScriptOptions {
     symbol?: string;
     onSuccess?: () => void;
 }
 declare const useCloseAllPositionsScript: (options?: UseCloseAllPositionsScriptOptions) => {
-    onCloseAll: () => void;
+    confirmAndCloseAll: (closeType: CloseType) => Promise<boolean>;
     hasOpenPositions: boolean;
     isClosing: boolean;
     openPositionsCount: number;
@@ -287,4 +292,4 @@ declare const OrderInfoCard: FC<OrderInfoCardProps>;
 
 declare const MarketCloseConfirmID = "MarketCloseConfirmID";
 
-export { CloseAllPositions, type CloseAllPositionsProps, type CloseAllPositionsState, CloseAllPositionsWidget, CombinePositionsWidget, FundingFeeButton, FundingFeeHistoryUI, Liquidation, LiquidationWidget, MarketCloseConfirmID, MobileLiquidation, MobileLiquidationWidget, MobilePositionHistory, MobilePositionHistoryWidget, MobilePositionsWidget, OrderInfoCard, type OrderInfoCardProps, PositionHistory, PositionHistoryWidget, type PositionsProps, PositionsTabName, PositionsWidget, ReversePosition, ReversePositionDialogId, type ReversePositionProps, type ReversePositionState, ReversePositionWidget, type ReversePositionWidgetProps, type SortType, sortList, useCloseAllPositionsScript, useLiquidationScript, usePositionHistoryScript, usePositionsRowContext, useReversePositionEnabled, useReversePositionScript, useSort, useTabSort };
+export { CloseAllPositions, type CloseAllPositionsProps, type CloseAllPositionsState, CloseAllPositionsWidget, CloseType, CombinePositionsWidget, FundingFeeButton, FundingFeeHistoryUI, Liquidation, LiquidationWidget, MarketCloseConfirmID, MobileLiquidation, MobileLiquidationWidget, MobilePositionHistory, MobilePositionHistoryWidget, MobilePositionsWidget, OrderInfoCard, type OrderInfoCardProps, PositionHistory, PositionHistoryWidget, type PositionsProps, PositionsTabName, PositionsWidget, ReversePosition, ReversePositionDialogId, type ReversePositionProps, type ReversePositionState, ReversePositionWidget, type ReversePositionWidgetProps, type SortType, sortList, useCloseAllPositionsScript, useLiquidationScript, usePositionHistoryScript, usePositionsRowContext, useReversePositionEnabled, useReversePositionScript, useSort, useTabSort };

package/dist/index.d.ts

@@ -166,12 +166,17 @@ declare const MobileLiquidation: FC<LiquidationState & {
     };
 }>;
 
+declare enum CloseType {
+    ALL = "ALL",
+    PROFIT = "PROFIT",
+    LOSS = "LOSS"
+}
 interface UseCloseAllPositionsScriptOptions {
     symbol?: string;
     onSuccess?: () => void;
 }
 declare const useCloseAllPositionsScript: (options?: UseCloseAllPositionsScriptOptions) => {
-    onCloseAll: () => void;
+    confirmAndCloseAll: (closeType: CloseType) => Promise<boolean>;
     hasOpenPositions: boolean;
     isClosing: boolean;
     openPositionsCount: number;
@@ -287,4 +292,4 @@ declare const OrderInfoCard: FC<OrderInfoCardProps>;
 
 declare const MarketCloseConfirmID = "MarketCloseConfirmID";
 
-export { CloseAllPositions, type CloseAllPositionsProps, type CloseAllPositionsState, CloseAllPositionsWidget, CombinePositionsWidget, FundingFeeButton, FundingFeeHistoryUI, Liquidation, LiquidationWidget, MarketCloseConfirmID, MobileLiquidation, MobileLiquidationWidget, MobilePositionHistory, MobilePositionHistoryWidget, MobilePositionsWidget, OrderInfoCard, type OrderInfoCardProps, PositionHistory, PositionHistoryWidget, type PositionsProps, PositionsTabName, PositionsWidget, ReversePosition, ReversePositionDialogId, type ReversePositionProps, type ReversePositionState, ReversePositionWidget, type ReversePositionWidgetProps, type SortType, sortList, useCloseAllPositionsScript, useLiquidationScript, usePositionHistoryScript, usePositionsRowContext, useReversePositionEnabled, useReversePositionScript, useSort, useTabSort };
+export { CloseAllPositions, type CloseAllPositionsProps, type CloseAllPositionsState, CloseAllPositionsWidget, CloseType, CombinePositionsWidget, FundingFeeButton, FundingFeeHistoryUI, Liquidation, LiquidationWidget, MarketCloseConfirmID, MobileLiquidation, MobileLiquidationWidget, MobilePositionHistory, MobilePositionHistoryWidget, MobilePositionsWidget, OrderInfoCard, type OrderInfoCardProps, PositionHistory, PositionHistoryWidget, type PositionsProps, PositionsTabName, PositionsWidget, ReversePosition, ReversePositionDialogId, type ReversePositionProps, type ReversePositionState, ReversePositionWidget, type ReversePositionWidgetProps, type SortType, sortList, useCloseAllPositionsScript, useLiquidationScript, usePositionHistoryScript, usePositionsRowContext, useReversePositionEnabled, useReversePositionScript, useSort, useTabSort };

package/dist/index.js

@@ -2769,14 +2769,13 @@ var SelIcon = () => {
       viewBox: "0 0 16 16",
       fill: "currentColor",
       xmlns: "http://www.w3.org/2000/svg",
-      className: "oui-fill-white",
+      className: "oui-fill-base-contrast",
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "path",
           {
-            d: "M8.01 1.333a6.667 6.667 0 1 0 0 13.333 6.667 6.667 0 0 0 0-13.333m0 1.333a5.334 5.334 0 1 1-.001 10.667 5.334 5.334 0 0 1 0-10.667",
-            fill: "#fff",
-            fillOpacity: ".36"
+            className: "oui-fill-base-contrast-36",
+            d: "M8.01 1.333a6.667 6.667 0 1 0 0 13.333 6.667 6.667 0 0 0 0-13.333m0 1.333a5.334 5.334 0 1 1-.001 10.667 5.334 5.334 0 0 1 0-10.667"
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8", cy: "8", r: "3.333" })
@@ -2791,14 +2790,14 @@ var UnselIcon = () => {
       width: "16",
       height: "16",
       viewBox: "0 0 16 16",
-      fill: "none",
+      fill: "currentColor",
       xmlns: "http://www.w3.org/2000/svg",
+      className: "oui-fill-base-contrast-54",
       children: /* @__PURE__ */ jsxRuntime.jsx(
         "path",
         {
           d: "M8.01 1.333a6.667 6.667 0 1 0 0 13.333 6.667 6.667 0 0 0 0-13.333m0 1.333a5.334 5.334 0 1 1-.001 10.667 5.334 5.334 0 0 1 0-10.667",
-          fill: "#fff",
-          fillOpacity: ".54"
+          fill: "currentColor"
         }
       )
     }
@@ -4997,15 +4996,14 @@ var ArrowIcon = (props) => {
       width: "16",
       height: "16",
       viewBox: "0 0 16 16",
-      fill: "none",
+      fill: "currentColor",
       xmlns: "http://www.w3.org/2000/svg",
-      className: props.className,
+      className: ui.cn(props.className, "oui-fill-base-contrast-54"),
       children: /* @__PURE__ */ jsxRuntime.jsx(
         "path",
         {
           d: "M3.884 6.02a.67.67 0 0 0-.436.27.68.68 0 0 0 .187.933L7.63 9.88a.68.68 0 0 0 .749 0l3.994-2.657a.68.68 0 0 0 .187-.934.68.68 0 0 0-.936-.186L8.003 8.51l-3.62-2.407a.65.65 0 0 0-.499-.084",
-          fill: "#fff",
-          fillOpacity: ".54"
+          fill: "currentColor"
         }
       )
     }
@@ -5493,27 +5491,24 @@ var MobileLiquidationWidget = (props) => {
   const state = useLiquidationScript(rest);
   return /* @__PURE__ */ jsxRuntime.jsx(MobileLiquidation, { classNames, ...state });
 };
-var CloseAllPositions = (props) => {
-  const { onCloseAll, hasOpenPositions, isClosing, className, style, symbol } = props;
-  const { t } = i18n.useTranslation();
-  if (symbol !== void 0) {
-    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
+var MAX_BATCH_ORDER_SIZE2 = 10;
+var BATCH_RATE_LIMIT_MS = 1100;
+var CloseType = /* @__PURE__ */ ((CloseType2) => {
+  CloseType2["ALL"] = "ALL";
+  CloseType2["PROFIT"] = "PROFIT";
+  CloseType2["LOSS"] = "LOSS";
+  return CloseType2;
+})(CloseType || {});
+function getPositionsByCloseType(positions2, closeType) {
+  if (closeType === "ALL" /* ALL */) return positions2;
+  if (closeType === "PROFIT" /* PROFIT */) {
+    return positions2.filter((p) => (p.unrealized_pnl ?? 0) > 0);
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    ui.Button,
-    {
-      onClick: onCloseAll,
-      disabled: !hasOpenPositions || isClosing,
-      loading: isClosing,
-      variant: "outlined",
-      color: "secondary",
-      size: "xs",
-      className: ui.cn("disabled:oui-bg-transport", className),
-      style,
-      children: t("positions.closeAll")
-    }
-  );
-};
+  if (closeType === "LOSS" /* LOSS */) {
+    return positions2.filter((p) => (p.unrealized_pnl ?? 0) < 0);
+  }
+  return positions2;
+}
 var useCloseAllPositionsScript = (options) => {
   const { symbol, onSuccess } = options || {};
   const { t } = i18n.useTranslation();
@@ -5528,64 +5523,216 @@ var useCloseAllPositionsScript = (options) => {
   const hasOpenPositions = React2.useMemo(() => {
     return openPositions.length > 0;
   }, [openPositions]);
-  const [doCreateOrder, { isMutating }] = hooks.useSubAccountMutation(
-    "/v1/order",
+  const [doBatchCreateOrder, { isMutating }] = hooks.useSubAccountMutation(
+    "/v1/batch-order",
     "POST"
   );
-  const closeAllPositions = React2.useCallback(async () => {
-    if (!hasOpenPositions) return;
-    try {
-      const closePromises = openPositions.map(
-        (position) => {
-          const side = position.position_qty > 0 ? types.OrderSide.SELL : types.OrderSide.BUY;
-          const quantity = Math.abs(position.position_qty);
-          return doCreateOrder({
-            symbol: position.symbol,
-            order_type: types.OrderType.MARKET,
-            side,
-            order_quantity: quantity,
-            reduce_only: true
-          });
+  const buildOrdersFromPositions = React2.useCallback(
+    (positions2) => positions2.map((position) => {
+      const side = position.position_qty > 0 ? types.OrderSide.SELL : types.OrderSide.BUY;
+      const quantity = Math.abs(position.position_qty);
+      return {
+        symbol: position.symbol,
+        order_type: types.OrderType.MARKET,
+        side,
+        order_quantity: quantity,
+        reduce_only: true
+      };
+    }),
+    []
+  );
+  const closePositions = React2.useCallback(
+    async (positionsToClose) => {
+      if (positionsToClose.length === 0) return false;
+      try {
+        const orders = buildOrdersFromPositions(positionsToClose);
+        for (let i = 0; i < orders.length; i += MAX_BATCH_ORDER_SIZE2) {
+          const batch = orders.slice(i, i + MAX_BATCH_ORDER_SIZE2);
+          const result = await doBatchCreateOrder({ orders: batch });
+          if (result?.error) {
+            throw result.error;
+          }
+          if (i + MAX_BATCH_ORDER_SIZE2 < orders.length) {
+            await new Promise(
+              (resolve) => setTimeout(resolve, BATCH_RATE_LIMIT_MS)
+            );
+          }
         }
-      );
-      await Promise.all(closePromises);
-      ui.toast.success(t("positions.closeAll.success"));
-      onSuccess?.();
-      return true;
-    } catch (error) {
-      if (error?.message !== void 0) {
-        ui.toast.error(error.message);
+        ui.toast.success(t("positions.closeAll.success"));
+        onSuccess?.();
+        return true;
+      } catch (error) {
+        if (error?.message !== void 0) {
+          ui.toast.error(error.message);
+        }
+        return false;
       }
-      return false;
-    }
-  }, [openPositions, hasOpenPositions, doCreateOrder, t, onSuccess]);
-  const onCloseAll = React2.useCallback(() => {
-    ui.modal.confirm({
-      title: t("positions.closeAll"),
-      content: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "sm", children: t("positions.closeAll.description") }),
-      onCancel: async () => {
-      },
-      onOk: async () => {
-        try {
-          tracking(types.TrackerEventName.confirmCloseAllPositions, {
-            positions_count: openPositions.length
-          });
-          const result = await closeAllPositions();
-          return Promise.resolve(result);
-        } catch (error) {
-          return Promise.resolve(false);
+    },
+    [doBatchCreateOrder, buildOrdersFromPositions, t, onSuccess]
+  );
+  const confirmAndCloseAll = React2.useCallback(
+    async (closeType) => {
+      const positionsToClose = getPositionsByCloseType(
+        openPositions,
+        closeType
+      );
+      if (positionsToClose.length === 0) {
+        if (closeType === "PROFIT" /* PROFIT */ || closeType === "LOSS" /* LOSS */) {
+          const msg = closeType === "PROFIT" /* PROFIT */ ? t("positions.closeAll.noPositions.profit") : t("positions.closeAll.noPositions.loss");
+          ui.toast.error(msg);
+          onSuccess?.();
+          return true;
         }
+        return false;
       }
-    });
-  }, [t, tracking, openPositions, closeAllPositions]);
+      tracking(types.TrackerEventName.confirmCloseAllPositions, {
+        positions_count: positionsToClose.length
+      });
+      return closePositions(positionsToClose);
+    },
+    [openPositions, tracking, closePositions, t, onSuccess]
+  );
   return {
-    onCloseAll,
+    confirmAndCloseAll,
     hasOpenPositions,
     isClosing: isMutating,
     openPositionsCount: openPositions.length,
     symbol
   };
 };
+var CloseAllPositions = (props) => {
+  const {
+    confirmAndCloseAll,
+    hasOpenPositions,
+    isClosing,
+    className,
+    style,
+    symbol
+  } = props;
+  const { t } = i18n.useTranslation();
+  const { isMobile } = ui.useScreen();
+  const [open, setOpen] = React2.useState(false);
+  const [selectedCloseType, setSelectedCloseType] = React2.useState(
+    "ALL" /* ALL */
+  );
+  const radioRow = (label, value) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      ui.Flex,
+      {
+        justify: "start",
+        itemAlign: "center",
+        gap: 2,
+        className: "oui-w-full oui-cursor-pointer",
+        onClick: () => setSelectedCloseType(value),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Checkbox,
+            {
+              variant: "radio",
+              color: "white",
+              checked: selectedCloseType === value
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: isMobile ? "xs" : "2xs", weight: "semibold", className: "", children: label })
+        ]
+      }
+    );
+  };
+  if (symbol !== void 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
+  }
+  const handleConfirm = async () => {
+    const ok = await confirmAndCloseAll(selectedCloseType);
+    if (ok) setOpen(false);
+  };
+  const bodyContent = /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", gap: 2, className: "oui-w-full", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: isMobile ? "xs" : "2xs", intensity: 54, children: t("positions.closeAll.popover.desc") }),
+    /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", gap: 1, className: "oui-w-full", children: [
+      radioRow(t("positions.closeAll.optionAll"), "ALL" /* ALL */),
+      radioRow(t("positions.closeAll.optionProfit"), "PROFIT" /* PROFIT */),
+      radioRow(t("positions.closeAll.optionLoss"), "LOSS" /* LOSS */)
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 2, className: "oui-justify-end oui-mt-1 oui-w-full", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Button,
+        {
+          variant: "outlined",
+          color: "secondary",
+          size: isMobile ? "lg" : "md",
+          onClick: () => setOpen(false),
+          fullWidth: true,
+          children: t("common.cancel")
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Button,
+        {
+          variant: "contained",
+          color: "primary",
+          size: isMobile ? "lg" : "md",
+          loading: isClosing,
+          onClick: handleConfirm,
+          fullWidth: true,
+          children: t("common.confirm")
+        }
+      )
+    ] })
+  ] });
+  const triggerButton = /* @__PURE__ */ jsxRuntime.jsx(
+    ui.Button,
+    {
+      disabled: !hasOpenPositions || isClosing,
+      loading: isClosing,
+      variant: "outlined",
+      color: "secondary",
+      size: "xs",
+      className: ui.cn("disabled:oui-bg-transport", className),
+      style,
+      onClick: isMobile ? () => setOpen(true) : void 0,
+      children: t("positions.closeAll")
+    }
+  );
+  if (isMobile) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      triggerButton,
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ui.SimpleSheet,
+        {
+          open,
+          onOpenChange: setOpen,
+          title: t("positions.closeAll"),
+          children: bodyContent
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.PopoverRoot, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ui.PopoverTrigger, { asChild: true, children: triggerButton }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ui.PopoverContent,
+      {
+        align: "end",
+        sideOffset: 8,
+        className: "oui-w-[280px] oui-p-4",
+        onOpenAutoFocus: (e) => e.preventDefault(),
+        children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", gap: 2, className: "oui-w-full", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { itemAlign: "center", justify: "between", className: "oui-w-full", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "sm", weight: "semibold", children: t("positions.closeAll") }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: () => setOpen(false),
+                className: "oui-text-base-contrast-54 hover:oui-text-base-contrast transition-colors oui-cursor-pointer",
+                children: /* @__PURE__ */ jsxRuntime.jsx(ui.CloseIcon, { size: 16, color: "inherit", opacity: 1 })
+              }
+            )
+          ] }),
+          bodyContent
+        ] })
+      }
+    )
+  ] });
+};
 var CloseAllPositionsWidget = (props) => {
   const { className, style, symbol, onSuccess } = props;
   const state = useCloseAllPositionsScript({ symbol, onSuccess });
@@ -5601,6 +5748,7 @@ ui.registerSimpleDialog(MarketCloseConfirmID, MarketCloseConfirm, {
 
 exports.CloseAllPositions = CloseAllPositions;
 exports.CloseAllPositionsWidget = CloseAllPositionsWidget;
+exports.CloseType = CloseType;
 exports.CombinePositionsWidget = CombinePositionsWidget;
 exports.FundingFeeButton = FundingFeeButton;
 exports.FundingFeeHistoryUI = FundingFeeHistoryUI;