@orderly.network/ui-positions 2.10.1 → 2.10.2

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { registerSimpleDialog, useModal, SimpleDialog, Flex, Text, Badge, Divider, CloseIcon, Button, ThrottledButton, useScreen, ArrowDownShortIcon, ArrowUpShortIcon, Grid, Statistic, ExclamationFillIcon, modal, Tooltip, DataTable, cn, ListView, SimpleSheet, usePagination, DataFilter, toast, formatAddress, Box, HoverCard, ArrowLeftRightIcon, capitalizeFirstLetter, ShareIcon, EditIcon, Input, inputFormatter, Select, PopoverRoot, PopoverTrigger, PopoverContent, Tips, Slider } from '@orderly.network/ui';
+import { registerSimpleDialog, useModal, SimpleDialog, Flex, Text, Badge, Divider, CloseIcon, Button, ThrottledButton, useScreen, ArrowDownShortIcon, ArrowUpShortIcon, Grid, Statistic, ExclamationFillIcon, modal, Tooltip, DataTable, cn, ListView, SimpleSheet, usePagination, DataFilter, toast, PopoverRoot, PopoverTrigger, PopoverContent, Checkbox, formatAddress, Box, HoverCard, ArrowLeftRightIcon, capitalizeFirstLetter, ShareIcon, EditIcon, Input, inputFormatter, Select, Tips, Slider } from '@orderly.network/ui';
 import React2, { createContext, useMemo, useState, useCallback, useContext, useEffect, useRef } from 'react';
 import { i18n, useTranslation } from '@orderly.network/i18n';
 import { OrderSide, OrderType, EMPTY_LIST, AccountStatusEnum, TrackerEventName, OrderStatus, AlgoOrderRootType, PositionType, AlgoOrderType } from '@orderly.network/types';
@@ -2763,14 +2763,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__ */ 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__ */ jsx("circle", { cx: "8", cy: "8", r: "3.333" })
@@ -2785,14 +2784,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__ */ 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"
         }
       )
     }
@@ -4991,15 +4990,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: cn(props.className, "oui-fill-base-contrast-54"),
       children: /* @__PURE__ */ 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"
         }
       )
     }
@@ -5487,27 +5485,24 @@ var MobileLiquidationWidget = (props) => {
   const state = useLiquidationScript(rest);
   return /* @__PURE__ */ jsx(MobileLiquidation, { classNames, ...state });
 };
-var CloseAllPositions = (props) => {
-  const { onCloseAll, hasOpenPositions, isClosing, className, style, symbol } = props;
-  const { t } = useTranslation();
-  if (symbol !== void 0) {
-    return /* @__PURE__ */ jsx(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__ */ jsx(
-    Button,
-    {
-      onClick: onCloseAll,
-      disabled: !hasOpenPositions || isClosing,
-      loading: isClosing,
-      variant: "outlined",
-      color: "secondary",
-      size: "xs",
-      className: 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 } = useTranslation();
@@ -5522,64 +5517,216 @@ var useCloseAllPositionsScript = (options) => {
   const hasOpenPositions = useMemo(() => {
     return openPositions.length > 0;
   }, [openPositions]);
-  const [doCreateOrder, { isMutating }] = useSubAccountMutation(
-    "/v1/order",
+  const [doBatchCreateOrder, { isMutating }] = useSubAccountMutation(
+    "/v1/batch-order",
     "POST"
   );
-  const closeAllPositions = useCallback(async () => {
-    if (!hasOpenPositions) return;
-    try {
-      const closePromises = openPositions.map(
-        (position) => {
-          const side = position.position_qty > 0 ? OrderSide.SELL : OrderSide.BUY;
-          const quantity = Math.abs(position.position_qty);
-          return doCreateOrder({
-            symbol: position.symbol,
-            order_type: OrderType.MARKET,
-            side,
-            order_quantity: quantity,
-            reduce_only: true
-          });
+  const buildOrdersFromPositions = useCallback(
+    (positions2) => positions2.map((position) => {
+      const side = position.position_qty > 0 ? OrderSide.SELL : OrderSide.BUY;
+      const quantity = Math.abs(position.position_qty);
+      return {
+        symbol: position.symbol,
+        order_type: OrderType.MARKET,
+        side,
+        order_quantity: quantity,
+        reduce_only: true
+      };
+    }),
+    []
+  );
+  const closePositions = 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);
-      toast.success(t("positions.closeAll.success"));
-      onSuccess?.();
-      return true;
-    } catch (error) {
-      if (error?.message !== void 0) {
-        toast.error(error.message);
+        toast.success(t("positions.closeAll.success"));
+        onSuccess?.();
+        return true;
+      } catch (error) {
+        if (error?.message !== void 0) {
+          toast.error(error.message);
+        }
+        return false;
       }
-      return false;
-    }
-  }, [openPositions, hasOpenPositions, doCreateOrder, t, onSuccess]);
-  const onCloseAll = useCallback(() => {
-    modal.confirm({
-      title: t("positions.closeAll"),
-      content: /* @__PURE__ */ jsx(Text, { size: "sm", children: t("positions.closeAll.description") }),
-      onCancel: async () => {
-      },
-      onOk: async () => {
-        try {
-          tracking(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 = 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");
+          toast.error(msg);
+          onSuccess?.();
+          return true;
         }
+        return false;
       }
-    });
-  }, [t, tracking, openPositions, closeAllPositions]);
+      tracking(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 } = useTranslation();
+  const { isMobile } = useScreen();
+  const [open, setOpen] = useState(false);
+  const [selectedCloseType, setSelectedCloseType] = useState(
+    "ALL" /* ALL */
+  );
+  const radioRow = (label, value) => {
+    return /* @__PURE__ */ jsxs(
+      Flex,
+      {
+        justify: "start",
+        itemAlign: "center",
+        gap: 2,
+        className: "oui-w-full oui-cursor-pointer",
+        onClick: () => setSelectedCloseType(value),
+        children: [
+          /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              variant: "radio",
+              color: "white",
+              checked: selectedCloseType === value
+            }
+          ),
+          /* @__PURE__ */ jsx(Text, { size: isMobile ? "xs" : "2xs", weight: "semibold", className: "", children: label })
+        ]
+      }
+    );
+  };
+  if (symbol !== void 0) {
+    return /* @__PURE__ */ jsx(Fragment, {});
+  }
+  const handleConfirm = async () => {
+    const ok = await confirmAndCloseAll(selectedCloseType);
+    if (ok) setOpen(false);
+  };
+  const bodyContent = /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 2, className: "oui-w-full", children: [
+    /* @__PURE__ */ jsx(Text, { size: isMobile ? "xs" : "2xs", intensity: 54, children: t("positions.closeAll.popover.desc") }),
+    /* @__PURE__ */ jsxs(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__ */ jsxs(Flex, { gap: 2, className: "oui-justify-end oui-mt-1 oui-w-full", children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "outlined",
+          color: "secondary",
+          size: isMobile ? "lg" : "md",
+          onClick: () => setOpen(false),
+          fullWidth: true,
+          children: t("common.cancel")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "contained",
+          color: "primary",
+          size: isMobile ? "lg" : "md",
+          loading: isClosing,
+          onClick: handleConfirm,
+          fullWidth: true,
+          children: t("common.confirm")
+        }
+      )
+    ] })
+  ] });
+  const triggerButton = /* @__PURE__ */ jsx(
+    Button,
+    {
+      disabled: !hasOpenPositions || isClosing,
+      loading: isClosing,
+      variant: "outlined",
+      color: "secondary",
+      size: "xs",
+      className: cn("disabled:oui-bg-transport", className),
+      style,
+      onClick: isMobile ? () => setOpen(true) : void 0,
+      children: t("positions.closeAll")
+    }
+  );
+  if (isMobile) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      triggerButton,
+      /* @__PURE__ */ jsx(
+        SimpleSheet,
+        {
+          open,
+          onOpenChange: setOpen,
+          title: t("positions.closeAll"),
+          children: bodyContent
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(PopoverRoot, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: triggerButton }),
+    /* @__PURE__ */ jsx(
+      PopoverContent,
+      {
+        align: "end",
+        sideOffset: 8,
+        className: "oui-w-[280px] oui-p-4",
+        onOpenAutoFocus: (e) => e.preventDefault(),
+        children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 2, className: "oui-w-full", children: [
+          /* @__PURE__ */ jsxs(Flex, { itemAlign: "center", justify: "between", className: "oui-w-full", children: [
+            /* @__PURE__ */ jsx(Text, { size: "sm", weight: "semibold", children: t("positions.closeAll") }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => setOpen(false),
+                className: "oui-text-base-contrast-54 hover:oui-text-base-contrast transition-colors oui-cursor-pointer",
+                children: /* @__PURE__ */ jsx(CloseIcon, { size: 16, color: "inherit", opacity: 1 })
+              }
+            )
+          ] }),
+          bodyContent
+        ] })
+      }
+    )
+  ] });
+};
 var CloseAllPositionsWidget = (props) => {
   const { className, style, symbol, onSuccess } = props;
   const state = useCloseAllPositionsScript({ symbol, onSuccess });
@@ -5593,6 +5740,6 @@ registerSimpleDialog(MarketCloseConfirmID, MarketCloseConfirm, {
   closable: false
 });
 
-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 };
+export { CloseAllPositions, CloseAllPositionsWidget, CloseType, 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=index.mjs.map
 //# sourceMappingURL=index.mjs.map