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

package/dist/index.d.mts

@@ -64,6 +64,8 @@ declare const useTPSLBuilder: (options: TPSLBuilderOptions$1 & PropsWithTriggerP
     readonly setPnL: (type: string, value: number | string) => void;
     readonly setOrderPrice: (name: "tp_trigger_price" | "sl_trigger_price", value: number | string) => void;
     readonly onSubmit: () => Promise<boolean | undefined>;
+    readonly slPriceError: _orderly_network_hooks.OrderValidationResult | null;
+    readonly estLiqPrice: number | undefined;
     readonly metaState: {
         dirty: { [K in keyof _orderly_network_types.OrderlyOrder]?: boolean; };
         submitted: boolean;
@@ -231,6 +233,8 @@ declare const useTPSLAdvanced: (props: Props$3) => {
     order: OrderlyOrder;
     formattedOrder: Partial<OrderlyOrder>;
     symbolInfo: _orderly_network_types.API.SymbolExt;
+    slPriceError: OrderValidationResult | null;
+    estLiqPrice: 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?: {
         shouldUpdateLastChangedField?: boolean;
     }) => void;
@@ -379,4 +383,12 @@ declare const EditBracketOrderWidget: (props: {
 declare const EditBracketOrderSheetId = "EditBracketOrderSheetId";
 declare const EditBracketOrderDialogId = "EditBracketOrderDialogId";
 
-export { ArrowRightIcon, EditBracketOrderDialogId, EditBracketOrderSheetId, EditBracketOrderWidget, PositionTPSLConfirm, PositionTPSLPopover, PositionTPSLSheet, TPSL, TPSLAdvancedDialogId, TPSLAdvancedSheetId, TPSLAdvancedUI, TPSLAdvancedWidget, type TPSLBuilderOptions$1 as TPSLBuilderOptions, type TPSLBuilderState, TPSLDetailDialogId, type TPSLDetailProps, TPSLDetailSheetId, TPSLDetailWidget, TPSLDialogId, TPSLPositionTypeWidget, type TPSLProps, TPSLSheetId, TPSLSimpleDialogId, TPSLSimpleDialogUI, TPSLSimpleDialogWidget, TPSLSimpleSheetId, TPSLWidget, type TPSLWidgetProps, useTPSLAdvanced, useTPSLBuilder, useTPSLSimpleDialog };
+declare const CloseToLiqPriceIcon: {
+    ({ slPriceError, className, }: {
+        slPriceError: OrderValidationResult | null;
+        className?: string;
+    }): react_jsx_runtime.JSX.Element | null;
+    displayName: string;
+};
+
+export { ArrowRightIcon, CloseToLiqPriceIcon, EditBracketOrderDialogId, EditBracketOrderSheetId, EditBracketOrderWidget, PositionTPSLConfirm, PositionTPSLPopover, PositionTPSLSheet, TPSL, TPSLAdvancedDialogId, TPSLAdvancedSheetId, TPSLAdvancedUI, TPSLAdvancedWidget, type TPSLBuilderOptions$1 as TPSLBuilderOptions, type TPSLBuilderState, TPSLDetailDialogId, type TPSLDetailProps, TPSLDetailSheetId, TPSLDetailWidget, TPSLDialogId, TPSLPositionTypeWidget, type TPSLProps, TPSLSheetId, TPSLSimpleDialogId, TPSLSimpleDialogUI, TPSLSimpleDialogWidget, TPSLSimpleSheetId, TPSLWidget, type TPSLWidgetProps, useTPSLAdvanced, useTPSLBuilder, useTPSLSimpleDialog };

package/dist/index.d.ts

@@ -64,6 +64,8 @@ declare const useTPSLBuilder: (options: TPSLBuilderOptions$1 & PropsWithTriggerP
     readonly setPnL: (type: string, value: number | string) => void;
     readonly setOrderPrice: (name: "tp_trigger_price" | "sl_trigger_price", value: number | string) => void;
     readonly onSubmit: () => Promise<boolean | undefined>;
+    readonly slPriceError: _orderly_network_hooks.OrderValidationResult | null;
+    readonly estLiqPrice: number | undefined;
     readonly metaState: {
         dirty: { [K in keyof _orderly_network_types.OrderlyOrder]?: boolean; };
         submitted: boolean;
@@ -231,6 +233,8 @@ declare const useTPSLAdvanced: (props: Props$3) => {
     order: OrderlyOrder;
     formattedOrder: Partial<OrderlyOrder>;
     symbolInfo: _orderly_network_types.API.SymbolExt;
+    slPriceError: OrderValidationResult | null;
+    estLiqPrice: 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?: {
         shouldUpdateLastChangedField?: boolean;
     }) => void;
@@ -379,4 +383,12 @@ declare const EditBracketOrderWidget: (props: {
 declare const EditBracketOrderSheetId = "EditBracketOrderSheetId";
 declare const EditBracketOrderDialogId = "EditBracketOrderDialogId";
 
-export { ArrowRightIcon, EditBracketOrderDialogId, EditBracketOrderSheetId, EditBracketOrderWidget, PositionTPSLConfirm, PositionTPSLPopover, PositionTPSLSheet, TPSL, TPSLAdvancedDialogId, TPSLAdvancedSheetId, TPSLAdvancedUI, TPSLAdvancedWidget, type TPSLBuilderOptions$1 as TPSLBuilderOptions, type TPSLBuilderState, TPSLDetailDialogId, type TPSLDetailProps, TPSLDetailSheetId, TPSLDetailWidget, TPSLDialogId, TPSLPositionTypeWidget, type TPSLProps, TPSLSheetId, TPSLSimpleDialogId, TPSLSimpleDialogUI, TPSLSimpleDialogWidget, TPSLSimpleSheetId, TPSLWidget, type TPSLWidgetProps, useTPSLAdvanced, useTPSLBuilder, useTPSLSimpleDialog };
+declare const CloseToLiqPriceIcon: {
+    ({ slPriceError, className, }: {
+        slPriceError: OrderValidationResult | null;
+        className?: string;
+    }): react_jsx_runtime.JSX.Element | null;
+    displayName: string;
+};
+
+export { ArrowRightIcon, CloseToLiqPriceIcon, EditBracketOrderDialogId, EditBracketOrderSheetId, EditBracketOrderWidget, PositionTPSLConfirm, PositionTPSLPopover, PositionTPSLSheet, TPSL, TPSLAdvancedDialogId, TPSLAdvancedSheetId, TPSLAdvancedUI, TPSLAdvancedWidget, type TPSLBuilderOptions$1 as TPSLBuilderOptions, type TPSLBuilderState, TPSLDetailDialogId, type TPSLDetailProps, TPSLDetailSheetId, TPSLDetailWidget, TPSLDialogId, TPSLPositionTypeWidget, type TPSLProps, TPSLSheetId, TPSLSimpleDialogId, TPSLSimpleDialogUI, TPSLSimpleDialogWidget, TPSLSimpleSheetId, TPSLWidget, type TPSLWidgetProps, useTPSLAdvanced, useTPSLBuilder, useTPSLSimpleDialog };

package/dist/index.js

@@ -4,9 +4,9 @@ var hooks = require('@orderly.network/hooks');
 var i18n = require('@orderly.network/i18n');
 var types = require('@orderly.network/types');
 var ui = require('@orderly.network/ui');
+var react = require('react');
 var reactApp = require('@orderly.network/react-app');
 var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
 var utils = require('@orderly.network/utils');
 var perp = require('@orderly.network/perp');
 var uiConnector = require('@orderly.network/ui-connector');
@@ -124,6 +124,19 @@ var OrderInfo = (props) => {
                     children: markPrice?.data
                   }
                 )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "between", className: "oui-text-base-contrast-36", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", children: t("positions.column.liqPrice") }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  ui.Text.numeral,
+                  {
+                    rule: "price",
+                    className: "oui-text-warning",
+                    size: "2xs",
+                    dp: props.quoteDP ?? 2,
+                    children: props.estLiqPrice ?? "--"
+                  }
+                )
               ] })
             ]
           }
@@ -491,10 +504,15 @@ var PriceInput = (props) => {
       value: props.value,
       color: props.error ? "danger" : void 0,
       classNames: {
-        input: "oui-text-2xs placeholder:oui-text-2xs",
-        prefix: "oui-text-base-contrast-54 oui-text-2xs",
-        root: "oui-w-full"
-        // root: "oui-outline-line-12 focus-within:oui-outline-primary-light",
+        input: ui.cn(
+          "oui-text-2xs placeholder:oui-text-2xs",
+          props.classNames?.input
+        ),
+        prefix: ui.cn(
+          "oui-text-base-contrast-54 oui-text-2xs",
+          props.classNames?.prefix
+        ),
+        root: ui.cn("oui-w-full", props.classNames?.root)
       },
       onValueChange: props.onValueChange,
       onFocus: () => {
@@ -551,7 +569,10 @@ var TPSLInputRowUI = (props) => {
                           onValueChange: (value) => {
                             props.onChange(`${props.type}_trigger_price`, value);
                           },
-                          quote_dp: props.quote_dp
+                          quote_dp: props.quote_dp,
+                          classNames: {
+                            root: props.inputWarnNode ? "oui-outline-warning-darken focus-within:oui-outline-warning-darken" : void 0
+                          }
                         }
                       ),
                       /* @__PURE__ */ jsxRuntime.jsx(
@@ -570,6 +591,7 @@ var TPSLInputRowUI = (props) => {
                   ]
                 }
               ),
+              props.inputWarnNode,
               /* @__PURE__ */ jsxRuntime.jsxs(
                 ui.Flex,
                 {
@@ -868,7 +890,23 @@ var TPSL = (props) => {
   const { errors, validated } = props.metaState;
   const { t } = i18n.useTranslation();
   const { isMobile } = ui.useScreen();
+  const tpErrors = react.useMemo(() => {
+    if (!errors)
+      return null;
+    const { sl_trigger_price, ...rest } = errors;
+    return rest;
+  }, [errors]);
+  const slErrors = react.useMemo(() => {
+    if (!errors)
+      return null;
+    const { tp_trigger_price, ...rest } = errors;
+    return rest;
+  }, [errors]);
   const { getErrorMsg } = reactApp.useOrderEntryFormErrorMsg(errors);
+  const { getErrorMsg: getSlPriceErrorMsg } = reactApp.useOrderEntryFormErrorMsg(
+    props.slPriceError
+  );
+  const isSlPriceWarning = props.slPriceError?.sl_trigger_price?.type === hooks.ERROR_MSG_CODES.SL_PRICE_WARNING;
   if (!position) {
     return null;
   }
@@ -898,6 +936,7 @@ var TPSL = (props) => {
         {
           baseDP: symbolInfo("base_dp"),
           quoteDP: symbolInfo("quote_dp"),
+          estLiqPrice: props.estLiqPrice,
           classNames: {
             root: "oui-mb-3",
             container: "oui-gap-x-[30px]"
@@ -929,7 +968,14 @@ var TPSL = (props) => {
                 }
               }
             ),
-            TPSL_OrderEntity.position_type === types.PositionType.FULL && /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-text-2xs oui-text-warning", children: t("tpsl.positionType.full.tips.market") })
+            TPSL_OrderEntity.position_type === types.PositionType.FULL && /* @__PURE__ */ jsxRuntime.jsx(
+              ui.DotStatus,
+              {
+                color: "warning",
+                size: "xs",
+                label: t("tpsl.positionType.full.tips.market")
+              }
+            )
           ]
         }
       ),
@@ -960,7 +1006,7 @@ var TPSL = (props) => {
                   order_type: TPSL_OrderEntity.tp_order_type ?? types.OrderType.MARKET
                 },
                 hideOrderPrice: TPSL_OrderEntity.position_type === types.PositionType.FULL,
-                errors: validated ? errors : null,
+                errors: validated ? tpErrors : null,
                 disableOrderTypeSelector: isEditing,
                 quote_dp: symbolInfo("quote_dp"),
                 positionType: TPSL_OrderEntity.position_type ?? types.PositionType.PARTIAL,
@@ -973,6 +1019,16 @@ var TPSL = (props) => {
             /* @__PURE__ */ jsxRuntime.jsx(
               TPSLInputRowWidget,
               {
+                inputWarnNode: isSlPriceWarning && /* @__PURE__ */ jsxRuntime.jsx(
+                  ui.DotStatus,
+                  {
+                    color: "warning",
+                    label: getSlPriceErrorMsg("sl_trigger_price"),
+                    classNames: {
+                      root: "oui-mt-1"
+                    }
+                  }
+                ),
                 symbol: position.symbol,
                 rootOrderPrice: position.average_open_price.toString(),
                 type: "sl",
@@ -987,7 +1043,7 @@ var TPSL = (props) => {
                   order_type: TPSL_OrderEntity.sl_order_type ?? types.OrderType.MARKET
                 },
                 hideOrderPrice: TPSL_OrderEntity.position_type === types.PositionType.FULL,
-                errors: validated ? errors : null,
+                errors: validated ? slErrors : null,
                 quote_dp: symbolInfo("quote_dp"),
                 positionType: TPSL_OrderEntity.position_type ?? types.PositionType.PARTIAL,
                 disableOrderTypeSelector: isEditing,
@@ -1271,6 +1327,7 @@ var useTPSLBuilder = (options) => {
   const [{ rows: positions }] = hooks.usePositionStream();
   const [needConfirm] = hooks.useLocalStorage("orderly_order_confirm", true);
   const position = positions.find((item) => item.symbol === symbol);
+  const estLiqPrice = hooks.useEstLiqPriceBySymbol(symbol);
   react.useEffect(() => {
     if (!position) {
       options.close?.();
@@ -1305,6 +1362,12 @@ var useTPSLBuilder = (options) => {
       isEditing
     }
   );
+  const slPriceError = hooks.useTpslPriceChecker({
+    slPrice: tpslOrder.sl_trigger_price?.toString() ?? void 0,
+    liqPrice: estLiqPrice ?? null,
+    side: tpslOrder.side
+  });
+  const isSlPriceWarning = slPriceError?.sl_trigger_price?.type === hooks.ERROR_MSG_CODES.SL_PRICE_WARNING;
   const setQuantity = (value) => {
     setValue("quantity", value);
   };
@@ -1450,7 +1513,9 @@ var useTPSLBuilder = (options) => {
   };
   const onSubmit = async () => {
     try {
-      const validOrder = await validate();
+      const validOrder = await validate(
+        isSlPriceWarning ? void 0 : slPriceError
+      );
       if (validOrder) {
         if (!needConfirm) {
           return submit({ accountId: position?.account_id }).then(() => true).catch((err) => {
@@ -1483,6 +1548,8 @@ var useTPSLBuilder = (options) => {
     setOrderPrice,
     // needConfirm,
     onSubmit,
+    slPriceError,
+    estLiqPrice,
     metaState,
     errors,
     status: {
@@ -1556,6 +1623,8 @@ var PositionTPSLSheet = (props) => {
 var TPSLAdvancedUI = (props) => {
   const { t } = i18n.useTranslation();
   const { errors, validated } = props.metaState;
+  const { getErrorMsg } = reactApp.useOrderEntryFormErrorMsg(props.slPriceError);
+  const isSlPriceWarning = props.slPriceError?.sl_trigger_price?.type === hooks.ERROR_MSG_CODES.SL_PRICE_WARNING;
   const {
     formattedOrder,
     setValue: setOrderValue,
@@ -1630,6 +1699,7 @@ var TPSLAdvancedUI = (props) => {
           order: formattedOrder,
           baseDP: symbolInfo.base_dp,
           quoteDP: symbolInfo.quote_dp,
+          estLiqPrice: props.estLiqPrice ?? void 0,
           symbolLeverage: props.symbolLeverage
         }
       ) }),
@@ -1732,6 +1802,14 @@ var TPSLAdvancedUI = (props) => {
               values: slValues,
               hideOrderPrice: formattedOrder.position_type === types.PositionType.FULL,
               errors: validated ? errors : null,
+              inputWarnNode: isSlPriceWarning && /* @__PURE__ */ jsxRuntime.jsx(
+                ui.DotStatus,
+                {
+                  color: "warning",
+                  size: "xs",
+                  label: getErrorMsg("sl_trigger_price")
+                }
+              ),
               quote_dp: symbolInfo.quote_dp,
               positionType: formattedOrder.position_type ?? types.PositionType.PARTIAL,
               onChange: (key, value) => {
@@ -1831,8 +1909,14 @@ var useTPSLAdvanced = (props) => {
       tp_offset_percentage: order2.tp_offset_percentage
     }
   });
+  const slPriceError = hooks.useTpslPriceChecker({
+    slPrice: formattedOrder.sl_trigger_price,
+    liqPrice: state.estLiqPrice,
+    side: formattedOrder.side
+  });
   const onSubmit = () => {
-    helper.validate().then(() => {
+    const isSlPriceError = slPriceError?.sl_trigger_price?.type === hooks.ERROR_MSG_CODES.SL_PRICE_ERROR;
+    helper.validate(isSlPriceError ? slPriceError : void 0).then(() => {
       props.onSubmit(formattedOrder);
     }).catch((err) => {
     });
@@ -1841,6 +1925,8 @@ var useTPSLAdvanced = (props) => {
     order: order2,
     formattedOrder,
     symbolInfo,
+    slPriceError,
+    estLiqPrice: state.estLiqPrice,
     setValue,
     setValues,
     onSubmit,
@@ -1936,13 +2022,16 @@ var useTPSLDetail = (props) => {
 var TPSLDetailContext = react.createContext({});
 var TPSLDetailProvider = (props) => {
   const symbolInfo = hooks.useSymbolsInfo()[props.symbol];
+  const estLiqPrice = hooks.useEstLiqPriceBySymbol(props.symbol);
   return /* @__PURE__ */ jsxRuntime.jsx(
     TPSLDetailContext.Provider,
     {
       value: {
         base_dp: symbolInfo("base_dp"),
         quote_dp: symbolInfo("quote_dp"),
-        position: props.position
+        side: props.position.position_qty > 0 ? types.OrderSide.BUY : types.OrderSide.SELL,
+        position: props.position,
+        estLiqPrice
       },
       children: props.children
     }
@@ -1958,7 +2047,7 @@ var FlexCell = (props) => {
       direction: "column",
       justify: "center",
       itemAlign: "start",
-      className: "oui-text-2xs oui-h-[36px]",
+      className: ui.cn("oui-text-2xs oui-h-[36px]", props.className),
       children: props.children
     }
   );
@@ -2085,9 +2174,65 @@ var TriggerPrice = ({ order: order2 }) => {
     }
   );
 };
+var CloseToLiqPriceIcon = ({
+  slPriceError,
+  className
+}) => {
+  const { t } = i18n.useTranslation();
+  const { isMobile } = ui.useScreen();
+  const { getErrorMsg } = reactApp.useOrderEntryFormErrorMsg(slPriceError);
+  const isSlPriceWarning = slPriceError?.sl_trigger_price?.type === hooks.ERROR_MSG_CODES.SL_PRICE_WARNING;
+  const icon = /* @__PURE__ */ jsxRuntime.jsx(
+    ui.ExclamationFillIcon,
+    {
+      onMouseEnter: (e) => e.stopPropagation(),
+      onMouseLeave: (e) => e.stopPropagation(),
+      onPointerEnter: (e) => e.stopPropagation(),
+      onPointerLeave: (e) => e.stopPropagation(),
+      size: 14,
+      className: ui.cn(
+        "oui-text-warning-darken hover:oui-cursor-pointer",
+        className
+      )
+    }
+  );
+  if (!isSlPriceWarning || !slPriceError)
+    return null;
+  if (isMobile) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: (e) => {
+          ui.modal.alert({
+            title: t("common.tips"),
+            message: getErrorMsg("sl_trigger_price")
+          });
+        },
+        className: "oui-px-1",
+        children: icon
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ui.Tooltip,
+    {
+      content: getErrorMsg("sl_trigger_price"),
+      className: "oui-max-w-[240px] oui-text-base-contrast-80",
+      children: icon
+    }
+  );
+};
+CloseToLiqPriceIcon.displayName = "CloseToLiqPriceIcon";
 var TypeRender = ({ order: order2 }) => {
+  const { side, estLiqPrice } = useTPSLDetailContext();
   const { tp_trigger_price, sl_trigger_price } = hooks.findTPSLFromOrder(order2);
   const { t } = i18n.useTranslation();
+  const slPriceError = hooks.useTpslPriceChecker({
+    slPrice: sl_trigger_price?.toString() ?? void 0,
+    liqPrice: estLiqPrice ?? null,
+    side
+  });
+  const isSlPriceWarning = slPriceError?.sl_trigger_price?.type === hooks.ERROR_MSG_CODES.SL_PRICE_WARNING;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     ui.Flex,
     {
@@ -2097,7 +2242,10 @@ var TypeRender = ({ order: order2 }) => {
       className: "oui-text-2xs",
       children: [
         tp_trigger_price && /* @__PURE__ */ jsxRuntime.jsx(FlexCell, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-text-trade-profit", children: t("tpsl.tp") }) }),
-        sl_trigger_price && /* @__PURE__ */ jsxRuntime.jsx(FlexCell, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-text-trade-loss", children: t("tpsl.sl") }) })
+        sl_trigger_price && /* @__PURE__ */ jsxRuntime.jsxs(FlexCell, { className: "oui-flex-row oui-items-center oui-gap-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-text-trade-loss", children: t("tpsl.sl") }),
+          isSlPriceWarning && /* @__PURE__ */ jsxRuntime.jsx(CloseToLiqPriceIcon, { slPriceError })
+        ] })
       ]
     }
   );
@@ -2389,6 +2537,7 @@ var TPSLDetailUI = (props) => {
     addTPSLOrder,
     symbolInfo
   } = props;
+  const { estLiqPrice } = useTPSLDetailContext();
   return /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { children: /* @__PURE__ */ jsxRuntime.jsxs(ui.ScrollArea, { className: ui.cn(isMobile && "oui-h-[calc(100vh-100px)]"), children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       OrderInfo,
@@ -2398,6 +2547,7 @@ var TPSLDetailUI = (props) => {
           order_quantity: position.position_qty.toString(),
           order_price: position.average_open_price.toString()
         },
+        estLiqPrice,
         symbolLeverage: position.leverage,
         baseDP: symbolInfo("base_dp"),
         quoteDP: symbolInfo("quote_dp"),
@@ -3073,8 +3223,19 @@ var useEditBracketOrder = (props) => {
     props.order
   );
   const [doUpdateOrder, { isMutating }] = hooks.useMutation("/v1/algo/order", "PUT");
-  const { formattedOrder, setValue, setValues, metaState, symbolInfo, helper } = hooks.useOrderEntry(props.order.symbol, {
-    initialOrder: baseInfo
+  const maxQty = useEditOrderMaxQty(props.order, props.order.quantity);
+  const {
+    formattedOrder,
+    setValue,
+    setValues,
+    estLiqPrice,
+    metaState,
+    symbolInfo,
+    helper,
+    ...state
+  } = hooks.useOrderEntry(props.order.symbol, {
+    initialOrder: baseInfo,
+    maxQty
   });
   const symbol = props.order.symbol;
   const isPriceChanged = react.useMemo(() => {
@@ -3116,8 +3277,14 @@ var useEditBracketOrder = (props) => {
       ...tpslPriceInfo
     });
   }, [props.order, setValues]);
+  const slPriceError = hooks.useTpslPriceChecker({
+    slPrice: formattedOrder.sl_trigger_price,
+    liqPrice: estLiqPrice,
+    side: formattedOrder.side
+  });
+  const isSlPriceError = slPriceError?.sl_trigger_price?.type === hooks.ERROR_MSG_CODES.SL_PRICE_ERROR;
   const onSubmit = async () => {
-    return helper.validate().then(() => {
+    return helper.validate(isSlPriceError ? slPriceError : void 0).then(() => {
       const tpOrder = {
         order_id: tpInfo.orderId,
         algo_type: types.AlgoOrderType.TAKE_PROFIT,
@@ -3157,6 +3324,9 @@ var useEditBracketOrder = (props) => {
   return {
     symbol,
     symbolInfo,
+    slPriceError,
+    estLiqPrice,
+    side: formattedOrder.side,
     formattedOrder,
     setValue,
     setValues,
@@ -3166,10 +3336,22 @@ var useEditBracketOrder = (props) => {
     isPriceChanged
   };
 };
+function useEditOrderMaxQty(order2, positionQty) {
+  const { reduce_only } = order2;
+  const maxQty = hooks.useMaxQty(order2.symbol, order2.side, reduce_only);
+  return react.useMemo(() => {
+    if (reduce_only) {
+      return Math.abs(positionQty ?? 0);
+    }
+    return order2.quantity + Math.abs(maxQty);
+  }, [order2.quantity, maxQty, reduce_only, positionQty]);
+}
 var EditBracketOrderUI = (props) => {
   const { t } = i18n.useTranslation();
   const { errors, validated } = props.metaState;
   const { isMobile } = ui.useScreen();
+  const isSlPriceWarning = props.slPriceError?.sl_trigger_price?.type === hooks.ERROR_MSG_CODES.SL_PRICE_WARNING;
+  const { getErrorMsg } = reactApp.useOrderEntryFormErrorMsg(props.slPriceError);
   const {
     formattedOrder,
     setValue: setOrderValue,
@@ -3237,6 +3419,7 @@ var EditBracketOrderUI = (props) => {
                 order_quantity: formattedOrder.order_quantity,
                 order_price: formattedOrder.order_price
               },
+              estLiqPrice: props.estLiqPrice ?? void 0,
               baseDP: symbolInfo.base_dp,
               quoteDP: symbolInfo.quote_dp
             }
@@ -3310,6 +3493,14 @@ var EditBracketOrderUI = (props) => {
                   side: formattedOrder.side,
                   values: slValues,
                   hideOrderPrice: formattedOrder.position_type === types.PositionType.FULL,
+                  inputWarnNode: isSlPriceWarning && /* @__PURE__ */ jsxRuntime.jsx(
+                    ui.DotStatus,
+                    {
+                      color: "warning",
+                      size: "xs",
+                      label: getErrorMsg("sl_trigger_price")
+                    }
+                  ),
                   errors: validated ? errors : null,
                   quote_dp: symbolInfo.quote_dp,
                   positionType: formattedOrder.position_type ?? types.PositionType.PARTIAL,
@@ -3373,6 +3564,7 @@ ui.registerSimpleDialog(EditBracketOrderDialogId, EditBracketOrderWidget, {
 });
 
 exports.ArrowRightIcon = ArrowRightIcon;
+exports.CloseToLiqPriceIcon = CloseToLiqPriceIcon;
 exports.EditBracketOrderDialogId = EditBracketOrderDialogId;
 exports.EditBracketOrderSheetId = EditBracketOrderSheetId;
 exports.EditBracketOrderWidget = EditBracketOrderWidget;