@orderly.network/ui-tpsl 2.10.2-alpha.0 → 2.11.0-alpha.0

package/dist/index.d.mts

@@ -72,6 +72,7 @@ declare const useTPSLBuilder: (options: TPSLBuilderOptions$1 & PropsWithTriggerP
         validated: boolean;
         errors: {
             symbol?: _orderly_network_hooks.OrderValidationItem | undefined;
+            margin_mode?: _orderly_network_hooks.OrderValidationItem | undefined;
             order_type_ext?: _orderly_network_hooks.OrderValidationItem | undefined;
             order_price?: _orderly_network_hooks.OrderValidationItem | undefined;
             order_quantity?: _orderly_network_hooks.OrderValidationItem | undefined;
@@ -121,6 +122,7 @@ declare const useTPSLBuilder: (options: TPSLBuilderOptions$1 & PropsWithTriggerP
     };
     readonly errors: {
         symbol?: _orderly_network_hooks.OrderValidationItem | undefined;
+        margin_mode?: _orderly_network_hooks.OrderValidationItem | undefined;
         order_type_ext?: _orderly_network_hooks.OrderValidationItem | undefined;
         order_price?: _orderly_network_hooks.OrderValidationItem | undefined;
         order_quantity?: _orderly_network_hooks.OrderValidationItem | undefined;
@@ -236,7 +238,7 @@ declare const useTPSLAdvanced: (props: Props$3) => {
     slPriceError: OrderValidationResult | null;
     estLiqPrice: number | null;
     estLiqPriceDistance: number | null;
-    setValue: (key: "symbol" | "type" | "order_type" | "order_type_ext" | "order_price" | "order_quantity" | "order_amount" | "visible_quantity" | "side" | "reduce_only" | "slippage" | "order_tag" | "level" | "post_only_adjust" | "client_order_id" | "total" | "start_price" | "end_price" | "total_orders" | "distribution_type" | "skew" | "activated_price" | "callback_value" | "callback_rate" | "quantity" | "price" | "algo_type" | "trigger_price_type" | "trigger_price" | "child_orders" | "position_type" | "tp_pnl" | "tp_offset" | "tp_offset_percentage" | "tp_ROI" | "tp_trigger_price" | "tp_order_price" | "tp_order_type" | "sl_pnl" | "sl_offset" | "sl_offset_percentage" | "sl_ROI" | "sl_trigger_price" | "sl_order_price" | "sl_order_type", value: any, options?: {
+    setValue: (key: "symbol" | "type" | "order_type" | "margin_mode" | "order_type_ext" | "order_price" | "order_quantity" | "order_amount" | "visible_quantity" | "side" | "reduce_only" | "slippage" | "order_tag" | "level" | "post_only_adjust" | "client_order_id" | "total" | "start_price" | "end_price" | "total_orders" | "distribution_type" | "skew" | "activated_price" | "callback_value" | "callback_rate" | "quantity" | "price" | "algo_type" | "trigger_price_type" | "trigger_price" | "child_orders" | "position_type" | "tp_pnl" | "tp_offset" | "tp_offset_percentage" | "tp_ROI" | "tp_trigger_price" | "tp_order_price" | "tp_order_type" | "sl_pnl" | "sl_offset" | "sl_offset_percentage" | "sl_ROI" | "sl_trigger_price" | "sl_order_price" | "sl_order_type", value: any, options?: {
         shouldUpdateLastChangedField?: boolean;
     }) => void;
     setValues: (values: Partial<OrderlyOrder>) => void;
@@ -312,6 +314,7 @@ declare const useTPSLSimpleDialog: (options: TPSLBuilderOptions) => {
     readonly onSubmit: () => Promise<boolean | undefined>;
     readonly errors: {
         symbol?: _orderly_network_hooks.OrderValidationItem | undefined;
+        margin_mode?: _orderly_network_hooks.OrderValidationItem | undefined;
         order_type_ext?: _orderly_network_hooks.OrderValidationItem | undefined;
         order_price?: _orderly_network_hooks.OrderValidationItem | undefined;
         order_quantity?: _orderly_network_hooks.OrderValidationItem | undefined;
@@ -362,7 +365,7 @@ declare const useTPSLSimpleDialog: (options: TPSLBuilderOptions) => {
         readonly isCreateMutating: boolean;
         readonly isUpdateMutating: boolean;
     };
-    readonly position: API.PositionTPSLExt;
+    readonly position: API.PositionTPSLExt | undefined;
     readonly setValues: (values: Partial<ComputedAlgoOrder>) => void;
     readonly type: "tp" | "sl";
     readonly triggerPrice: number | undefined;

package/dist/index.d.ts

@@ -72,6 +72,7 @@ declare const useTPSLBuilder: (options: TPSLBuilderOptions$1 & PropsWithTriggerP
         validated: boolean;
         errors: {
             symbol?: _orderly_network_hooks.OrderValidationItem | undefined;
+            margin_mode?: _orderly_network_hooks.OrderValidationItem | undefined;
             order_type_ext?: _orderly_network_hooks.OrderValidationItem | undefined;
             order_price?: _orderly_network_hooks.OrderValidationItem | undefined;
             order_quantity?: _orderly_network_hooks.OrderValidationItem | undefined;
@@ -121,6 +122,7 @@ declare const useTPSLBuilder: (options: TPSLBuilderOptions$1 & PropsWithTriggerP
     };
     readonly errors: {
         symbol?: _orderly_network_hooks.OrderValidationItem | undefined;
+        margin_mode?: _orderly_network_hooks.OrderValidationItem | undefined;
         order_type_ext?: _orderly_network_hooks.OrderValidationItem | undefined;
         order_price?: _orderly_network_hooks.OrderValidationItem | undefined;
         order_quantity?: _orderly_network_hooks.OrderValidationItem | undefined;
@@ -236,7 +238,7 @@ declare const useTPSLAdvanced: (props: Props$3) => {
     slPriceError: OrderValidationResult | null;
     estLiqPrice: number | null;
     estLiqPriceDistance: number | null;
-    setValue: (key: "symbol" | "type" | "order_type" | "order_type_ext" | "order_price" | "order_quantity" | "order_amount" | "visible_quantity" | "side" | "reduce_only" | "slippage" | "order_tag" | "level" | "post_only_adjust" | "client_order_id" | "total" | "start_price" | "end_price" | "total_orders" | "distribution_type" | "skew" | "activated_price" | "callback_value" | "callback_rate" | "quantity" | "price" | "algo_type" | "trigger_price_type" | "trigger_price" | "child_orders" | "position_type" | "tp_pnl" | "tp_offset" | "tp_offset_percentage" | "tp_ROI" | "tp_trigger_price" | "tp_order_price" | "tp_order_type" | "sl_pnl" | "sl_offset" | "sl_offset_percentage" | "sl_ROI" | "sl_trigger_price" | "sl_order_price" | "sl_order_type", value: any, options?: {
+    setValue: (key: "symbol" | "type" | "order_type" | "margin_mode" | "order_type_ext" | "order_price" | "order_quantity" | "order_amount" | "visible_quantity" | "side" | "reduce_only" | "slippage" | "order_tag" | "level" | "post_only_adjust" | "client_order_id" | "total" | "start_price" | "end_price" | "total_orders" | "distribution_type" | "skew" | "activated_price" | "callback_value" | "callback_rate" | "quantity" | "price" | "algo_type" | "trigger_price_type" | "trigger_price" | "child_orders" | "position_type" | "tp_pnl" | "tp_offset" | "tp_offset_percentage" | "tp_ROI" | "tp_trigger_price" | "tp_order_price" | "tp_order_type" | "sl_pnl" | "sl_offset" | "sl_offset_percentage" | "sl_ROI" | "sl_trigger_price" | "sl_order_price" | "sl_order_type", value: any, options?: {
         shouldUpdateLastChangedField?: boolean;
     }) => void;
     setValues: (values: Partial<OrderlyOrder>) => void;
@@ -312,6 +314,7 @@ declare const useTPSLSimpleDialog: (options: TPSLBuilderOptions) => {
     readonly onSubmit: () => Promise<boolean | undefined>;
     readonly errors: {
         symbol?: _orderly_network_hooks.OrderValidationItem | undefined;
+        margin_mode?: _orderly_network_hooks.OrderValidationItem | undefined;
         order_type_ext?: _orderly_network_hooks.OrderValidationItem | undefined;
         order_price?: _orderly_network_hooks.OrderValidationItem | undefined;
         order_quantity?: _orderly_network_hooks.OrderValidationItem | undefined;
@@ -362,7 +365,7 @@ declare const useTPSLSimpleDialog: (options: TPSLBuilderOptions) => {
         readonly isCreateMutating: boolean;
         readonly isUpdateMutating: boolean;
     };
-    readonly position: API.PositionTPSLExt;
+    readonly position: API.PositionTPSLExt | undefined;
     readonly setValues: (values: Partial<ComputedAlgoOrder>) => void;
     readonly type: "tp" | "sl";
     readonly triggerPrice: number | undefined;

package/dist/index.js

@@ -18,7 +18,10 @@ var OrderInfo = (props) => {
   const { symbol } = order2;
   const markPrice = hooks.useMarkPrice(symbol);
   const indexPrice = hooks.useIndexPrice(symbol);
-  const leverage = hooks.useLeverageBySymbol(symbolLeverage ? void 0 : symbol);
+  const leverage = hooks.useLeverageBySymbol(
+    symbolLeverage ? void 0 : symbol,
+    props.marginMode
+  );
   const currentLeverage = symbolLeverage || leverage;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     ui.Flex,
@@ -51,6 +54,14 @@ var OrderInfo = (props) => {
                   }
                 )
               ] }),
+              props.marginMode && /* @__PURE__ */ jsxRuntime.jsx(
+                ui.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: ui.capitalizeFirstLetter(props.marginMode)
+                }
+              ),
               /* @__PURE__ */ jsxRuntime.jsxs(
                 ui.Text,
                 {
@@ -217,7 +228,8 @@ var PnlInfo = (props) => {
 var useTPSLInputRowScript = (props) => {
   const { values, side, type, rootOrderPrice } = props;
   const symbolLeverage = hooks.useLeverageBySymbol(
-    props.symbolLeverage ? void 0 : props.symbol
+    props.symbolLeverage ? void 0 : props.symbol,
+    props.marginMode
   );
   const leverage = props.symbolLeverage || symbolLeverage;
   const roi = react.useMemo(() => {
@@ -948,6 +960,7 @@ var TPSL = (props) => {
             order_quantity: position.position_qty.toString(),
             order_price: position.average_open_price.toString()
           },
+          marginMode: position.margin_mode ?? types.MarginMode.CROSS,
           symbolLeverage: position.leverage
         }
       ),
@@ -1328,11 +1341,17 @@ var useTPSLBuilder = (options) => {
   const { state } = hooks.useAccount();
   const ee = hooks.useEventEmitter();
   const [needConfirm] = hooks.useLocalStorage("orderly_order_confirm", true);
+  const { marginMode: symbolMarginMode } = hooks.useMarginModeBySymbol(symbol);
   const [{ rows: positions }] = hooks.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 = hooks.useEstLiqPriceBySymbol(symbol);
+  const estLiqPrice = hooks.useEstLiqPriceBySymbol(
+    symbol,
+    position?.margin_mode ?? options.position?.margin_mode ?? types.MarginMode.CROSS
+  );
   react.useEffect(() => {
     if (!position) {
       options.close?.();
@@ -1355,7 +1374,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,
@@ -1918,7 +1939,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 = hooks.useTpslPriceChecker({
@@ -1969,6 +1991,7 @@ ui.registerSimpleDialog(TPSLAdvancedDialogId, TPSLAdvancedWidget, {
 var useTPSLDetail = (props) => {
   const { position } = props;
   const symbol = position.symbol;
+  const marginMode = position.margin_mode;
   const symbolInfo = hooks.useSymbolsInfo()[symbol];
   const ee = hooks.useEventEmitter();
   const { state } = hooks.useAccount();
@@ -2056,11 +2079,11 @@ var useTPSLDetail = (props) => {
   };
   react.useEffect(() => {
     if (tpslOrders) {
-      const { fullPositionOrder, partialPositionOrders: partialPositionOrders2 } = hooks.findPositionTPSLFromOrders(tpslOrders, symbol);
+      const { fullPositionOrder, partialPositionOrders: partialPositionOrders2 } = hooks.findPositionTPSLFromOrders(tpslOrders, symbol, marginMode);
       setFullPositionOrders(fullPositionOrder ? [fullPositionOrder] : []);
       setPartialPositionOrders(partialPositionOrders2 ?? []);
     }
-  }, [tpslOrders, symbol]);
+  }, [tpslOrders, symbol, marginMode]);
   return {
     symbolInfo,
     position,
@@ -2077,7 +2100,10 @@ var useTPSLDetail = (props) => {
 var TPSLDetailContext = react.createContext({});
 var TPSLDetailProvider = (props) => {
   const symbolInfo = hooks.useSymbolsInfo()[props.symbol];
-  const estLiqPrice = hooks.useEstLiqPriceBySymbol(props.symbol);
+  const estLiqPrice = hooks.useEstLiqPriceBySymbol(
+    props.symbol,
+    props.position.margin_mode ?? types.MarginMode.CROSS
+  );
   return /* @__PURE__ */ jsxRuntime.jsx(
     TPSLDetailContext.Provider,
     {
@@ -2596,6 +2622,7 @@ var TPSLDetailUI = (props) => {
     /* @__PURE__ */ jsxRuntime.jsx(
       OrderInfo,
       {
+        marginMode: position.margin_mode ?? types.MarginMode.CROSS,
         order: {
           symbol: position.symbol,
           order_quantity: position.position_qty.toString(),
@@ -2887,8 +2914,9 @@ ui.registerSimpleSheet(TPSLDetailSheetId, TPSLDetailWidget, {
 var useTPSLSimpleDialog = (options) => {
   const { type, triggerPrice, symbol } = options;
   const symbolInfo = hooks.useSymbolsInfo();
+  const { marginMode } = hooks.useMarginModeBySymbol(symbol ?? "");
   const [{ rows: positions }, positionsInfo] = hooks.usePositionStream(symbol);
-  const position = positions?.[0];
+  const position = positions?.find((item) => item.margin_mode === marginMode);
   react.useRef(types.AlgoOrderRootType.TP_SL);
   const [needConfirm] = hooks.useLocalStorage("orderly_order_confirm", true);
   const { t } = i18n.useTranslation();
@@ -2907,8 +2935,9 @@ var useTPSLSimpleDialog = (options) => {
   ] = hooks.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,
@@ -2927,8 +2956,8 @@ var useTPSLSimpleDialog = (options) => {
     setValue(type2, value);
   };
   const maxQty = react.useMemo(
-    () => Math.abs(Number(position.position_qty)),
-    [position.position_qty]
+    () => Math.abs(Number(position?.position_qty ?? 0)),
+    [position?.position_qty]
   );
   react.useEffect(() => {
     if (!maxQty) {
@@ -2942,6 +2971,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) {
@@ -3392,7 +3424,10 @@ var useEditBracketOrder = (props) => {
 };
 function useEditOrderMaxQty(order2, positionQty) {
   const { reduce_only } = order2;
-  const maxQty = hooks.useMaxQty(order2.symbol, order2.side, reduce_only);
+  const maxQty = hooks.useMaxQty(order2.symbol, order2.side, {
+    reduceOnly: reduce_only,
+    marginMode: order2.margin_mode ?? types.MarginMode.CROSS
+  });
   return react.useMemo(() => {
     if (reduce_only) {
       return Math.abs(positionQty ?? 0);
@@ -3533,7 +3568,8 @@ var EditBracketOrderUI = (props) => {
                   onChange: (key, value) => {
                     setOrderValue(key, value);
                   },
-                  positionType: formattedOrder.position_type ?? types.PositionType.PARTIAL
+                  positionType: formattedOrder.position_type ?? types.PositionType.PARTIAL,
+                  marginMode: formattedOrder.margin_mode
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { className: "oui-w-full" }),
@@ -3561,7 +3597,8 @@ var EditBracketOrderUI = (props) => {
                   positionType: formattedOrder.position_type ?? types.PositionType.PARTIAL,
                   onChange: (key, value) => {
                     setOrderValue(key, value);
-                  }
+                  },
+                  marginMode: formattedOrder.margin_mode
                 }
               )
             ] }),