@orderly.network/ui-tpsl 2.10.2 → 2.11.0

package/dist/index.mjs

@@ -1,7 +1,7 @@
-import { SDKError, PositionType, AlgoOrderRootType, OrderType, OrderSide, OrderStatus, AlgoOrderType } from '@orderly.network/types';
-import { Flex, Input, inputFormatter, cn, Slider, Text, registerSimpleSheet, registerSimpleDialog, useScreen, ScrollArea, DotStatus, Grid, Button, ThrottledButton, Divider, Box, toast, TokenIcon, modal, Tooltip, ExclamationFillIcon, Select, ChevronDownIcon, Badge, textVariants, Checkbox, SimpleDropdownMenu, CaretDownIcon, useModal } from '@orderly.network/ui';
+import { SDKError, MarginMode, PositionType, AlgoOrderRootType, OrderType, OrderSide, OrderStatus, AlgoOrderType } from '@orderly.network/types';
+import { Flex, Input, inputFormatter, cn, Slider, Text, registerSimpleSheet, registerSimpleDialog, useScreen, ScrollArea, DotStatus, Grid, Button, ThrottledButton, Divider, Box, toast, TokenIcon, capitalizeFirstLetter, modal, Tooltip, ExclamationFillIcon, Select, ChevronDownIcon, Badge, textVariants, Checkbox, SimpleDropdownMenu, CaretDownIcon, useModal } from '@orderly.network/ui';
 import { memo, useRef, useState, useEffect, createContext, useMemo, useContext, Fragment as Fragment$1 } from 'react';
-import { utils, useSymbolsInfo, useAccount, useEventEmitter, useLocalStorage, usePositionStream, useEstLiqPriceBySymbol, useTPSLOrder, useTpslPriceChecker, ERROR_MSG_CODES, useMemoizedFn, useOrderEntry, useGetEstLiqPrice, useOrderStream, useSubAccountAlgoOrderStream, findPositionTPSLFromOrders, useMutation, useMarkPrice, useIndexPrice, useLeverageBySymbol, useMaxQty, findTPSLFromOrder, findTPSLOrderPriceFromOrder } from '@orderly.network/hooks';
+import { utils, useSymbolsInfo, useAccount, useEventEmitter, useLocalStorage, useMarginModeBySymbol, usePositionStream, useEstLiqPriceBySymbol, useTPSLOrder, useTpslPriceChecker, ERROR_MSG_CODES, useMemoizedFn, useOrderEntry, useGetEstLiqPrice, useOrderStream, useSubAccountAlgoOrderStream, findPositionTPSLFromOrders, useMutation, useMarkPrice, useIndexPrice, useLeverageBySymbol, useMaxQty, findTPSLFromOrder, findTPSLOrderPriceFromOrder } from '@orderly.network/hooks';
 import { useTranslation, i18n, Trans } from '@orderly.network/i18n';
 import { useOrderEntryFormErrorMsg } from '@orderly.network/react-app';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
@@ -16,7 +16,10 @@ var OrderInfo = (props) => {
   const { symbol } = order2;
   const markPrice = useMarkPrice(symbol);
   const indexPrice = useIndexPrice(symbol);
-  const leverage = useLeverageBySymbol(symbolLeverage ? void 0 : symbol);
+  const leverage = useLeverageBySymbol(
+    symbolLeverage ? void 0 : symbol,
+    props.marginMode
+  );
   const currentLeverage = symbolLeverage || leverage;
   return /* @__PURE__ */ jsxs(
     Flex,
@@ -49,6 +52,14 @@ var OrderInfo = (props) => {
                   }
                 )
               ] }),
+              props.marginMode && /* @__PURE__ */ jsx(
+                Text,
+                {
+                  size: "2xs",
+                  className: "oui-h-[18px] oui-rounded oui-bg-base-7 oui-px-2 oui-font-semibold oui-text-base-contrast-36",
+                  children: capitalizeFirstLetter(props.marginMode)
+                }
+              ),
               /* @__PURE__ */ jsxs(
                 Text,
                 {
@@ -215,7 +226,8 @@ var PnlInfo = (props) => {
 var useTPSLInputRowScript = (props) => {
   const { values, side, type, rootOrderPrice } = props;
   const symbolLeverage = useLeverageBySymbol(
-    props.symbolLeverage ? void 0 : props.symbol
+    props.symbolLeverage ? void 0 : props.symbol,
+    props.marginMode
   );
   const leverage = props.symbolLeverage || symbolLeverage;
   const roi = useMemo(() => {
@@ -946,6 +958,7 @@ var TPSL = (props) => {
             order_quantity: position.position_qty.toString(),
             order_price: position.average_open_price.toString()
           },
+          marginMode: position.margin_mode ?? MarginMode.CROSS,
           symbolLeverage: position.leverage
         }
       ),
@@ -1326,11 +1339,17 @@ var useTPSLBuilder = (options) => {
   const { state } = useAccount();
   const ee = useEventEmitter();
   const [needConfirm] = useLocalStorage("orderly_order_confirm", true);
+  const { marginMode: symbolMarginMode } = useMarginModeBySymbol(symbol);
   const [{ rows: positions }] = usePositionStream();
-  const mainAccountPosition = positions.find((item) => item.symbol === symbol);
+  const mainAccountPosition = positions.find(
+    (item) => item.symbol === symbol && item.margin_mode === (options.position?.margin_mode ?? symbolMarginMode)
+  );
   const isSubAccount = options.position?.account_id && options.position?.account_id !== state.mainAccountId;
   const position = isSubAccount ? options.position : mainAccountPosition;
-  const estLiqPrice = useEstLiqPriceBySymbol(symbol);
+  const estLiqPrice = useEstLiqPriceBySymbol(
+    symbol,
+    position?.margin_mode ?? options.position?.margin_mode ?? MarginMode.CROSS
+  );
   useEffect(() => {
     if (!position) {
       options.close?.();
@@ -1353,7 +1372,9 @@ var useTPSLBuilder = (options) => {
     {
       symbol,
       position_qty: position?.position_qty ?? 0,
-      average_open_price: position?.average_open_price ?? 0
+      average_open_price: position?.average_open_price ?? 0,
+      // Prefer options.position?.margin_mode: mainAccountPosition (from stream) often has wrong default CROSS
+      margin_mode: options.position?.margin_mode ?? position?.margin_mode
     },
     {
       defaultOrder: order2,
@@ -1916,7 +1937,8 @@ var useTPSLAdvanced = (props) => {
       sl_offset_percentage: order2.sl_offset_percentage,
       tp_pnl: order2.tp_pnl,
       tp_offset: order2.tp_offset,
-      tp_offset_percentage: order2.tp_offset_percentage
+      tp_offset_percentage: order2.tp_offset_percentage,
+      margin_mode: order2.margin_mode
     }
   });
   const slPriceError = useTpslPriceChecker({
@@ -1967,6 +1989,7 @@ registerSimpleDialog(TPSLAdvancedDialogId, TPSLAdvancedWidget, {
 var useTPSLDetail = (props) => {
   const { position } = props;
   const symbol = position.symbol;
+  const marginMode = position.margin_mode;
   const symbolInfo = useSymbolsInfo()[symbol];
   const ee = useEventEmitter();
   const { state } = useAccount();
@@ -2054,11 +2077,11 @@ var useTPSLDetail = (props) => {
   };
   useEffect(() => {
     if (tpslOrders) {
-      const { fullPositionOrder, partialPositionOrders: partialPositionOrders2 } = findPositionTPSLFromOrders(tpslOrders, symbol);
+      const { fullPositionOrder, partialPositionOrders: partialPositionOrders2 } = findPositionTPSLFromOrders(tpslOrders, symbol, marginMode);
       setFullPositionOrders(fullPositionOrder ? [fullPositionOrder] : []);
       setPartialPositionOrders(partialPositionOrders2 ?? []);
     }
-  }, [tpslOrders, symbol]);
+  }, [tpslOrders, symbol, marginMode]);
   return {
     symbolInfo,
     position,
@@ -2075,7 +2098,10 @@ var useTPSLDetail = (props) => {
 var TPSLDetailContext = createContext({});
 var TPSLDetailProvider = (props) => {
   const symbolInfo = useSymbolsInfo()[props.symbol];
-  const estLiqPrice = useEstLiqPriceBySymbol(props.symbol);
+  const estLiqPrice = useEstLiqPriceBySymbol(
+    props.symbol,
+    props.position.margin_mode ?? MarginMode.CROSS
+  );
   return /* @__PURE__ */ jsx(
     TPSLDetailContext.Provider,
     {
@@ -2594,6 +2620,7 @@ var TPSLDetailUI = (props) => {
     /* @__PURE__ */ jsx(
       OrderInfo,
       {
+        marginMode: position.margin_mode ?? MarginMode.CROSS,
         order: {
           symbol: position.symbol,
           order_quantity: position.position_qty.toString(),
@@ -2885,8 +2912,9 @@ registerSimpleSheet(TPSLDetailSheetId, TPSLDetailWidget, {
 var useTPSLSimpleDialog = (options) => {
   const { type, triggerPrice, symbol } = options;
   const symbolInfo = useSymbolsInfo();
+  const { marginMode } = useMarginModeBySymbol(symbol ?? "");
   const [{ rows: positions }, positionsInfo] = usePositionStream(symbol);
-  const position = positions?.[0];
+  const position = positions?.find((item) => item.margin_mode === marginMode);
   useRef(AlgoOrderRootType.TP_SL);
   const [needConfirm] = useLocalStorage("orderly_order_confirm", true);
   const { t } = useTranslation();
@@ -2905,8 +2933,9 @@ var useTPSLSimpleDialog = (options) => {
   ] = useTPSLOrder(
     {
       symbol,
-      position_qty: position?.position_qty,
-      average_open_price: position?.average_open_price
+      position_qty: position?.position_qty ?? 0,
+      average_open_price: position?.average_open_price ?? 0,
+      margin_mode: position?.margin_mode
     },
     {
       defaultOrder: void 0,
@@ -2925,8 +2954,8 @@ var useTPSLSimpleDialog = (options) => {
     setValue(type2, value);
   };
   const maxQty = useMemo(
-    () => Math.abs(Number(position.position_qty)),
-    [position.position_qty]
+    () => Math.abs(Number(position?.position_qty ?? 0)),
+    [position?.position_qty]
   );
   useEffect(() => {
     if (!maxQty) {
@@ -2940,6 +2969,9 @@ var useTPSLSimpleDialog = (options) => {
     }
   }, [type, triggerPrice, maxQty]);
   const onSubmit = async () => {
+    if (!position) {
+      return Promise.reject(new Error("Position is required"));
+    }
     try {
       const validOrder = await validate();
       if (validOrder) {
@@ -3390,7 +3422,10 @@ var useEditBracketOrder = (props) => {
 };
 function useEditOrderMaxQty(order2, positionQty) {
   const { reduce_only } = order2;
-  const maxQty = useMaxQty(order2.symbol, order2.side, reduce_only);
+  const maxQty = useMaxQty(order2.symbol, order2.side, {
+    reduceOnly: reduce_only,
+    marginMode: order2.margin_mode ?? MarginMode.CROSS
+  });
   return useMemo(() => {
     if (reduce_only) {
       return Math.abs(positionQty ?? 0);
@@ -3531,7 +3566,8 @@ var EditBracketOrderUI = (props) => {
                   onChange: (key, value) => {
                     setOrderValue(key, value);
                   },
-                  positionType: formattedOrder.position_type ?? PositionType.PARTIAL
+                  positionType: formattedOrder.position_type ?? PositionType.PARTIAL,
+                  marginMode: formattedOrder.margin_mode
                 }
               ),
               /* @__PURE__ */ jsx(Divider, { className: "oui-w-full" }),
@@ -3559,7 +3595,8 @@ var EditBracketOrderUI = (props) => {
                   positionType: formattedOrder.position_type ?? PositionType.PARTIAL,
                   onChange: (key, value) => {
                     setOrderValue(key, value);
-                  }
+                  },
+                  marginMode: formattedOrder.margin_mode
                 }
               )
             ] }),