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

package/dist/index.js

@@ -376,7 +376,7 @@ var init_bracketOrderPrice = __esm({
         }
         return hooks.utils.findTPSLFromOrder(props.order.child_orders[0]);
       }, [props.order]);
-      const { pnl, roi } = calcBracketRoiAndPnL(order);
+      const { pnl } = calcBracketRoiAndPnL(order);
       if (!tp_trigger_price && !sl_trigger_price) {
         return "--";
       }
@@ -2136,6 +2136,12 @@ var init_tpslTriggerPrice = __esm({
     init_tpslOrderRowContext();
     OrderTriggerPrice = () => {
       const { sl_trigger_price, tp_trigger_price, order, position } = useTPSLOrderRowContext();
+      const positionSide = position?.position_qty && position.position_qty > 0 ? types.OrderSide.BUY : types.OrderSide.SELL;
+      const slPriceError = hooks.useTpslPriceChecker({
+        slPrice: sl_trigger_price?.toString() ?? void 0,
+        liqPrice: position?.est_liq_price ?? null,
+        side: positionSide
+      });
       return /* @__PURE__ */ jsxRuntime.jsx(
         TPSLTriggerPrice,
         {
@@ -2144,6 +2150,7 @@ var init_tpslTriggerPrice = __esm({
           direction: "column",
           order,
           position,
+          slPriceError,
           tooltip: true
         }
       );
@@ -2233,15 +2240,24 @@ var init_tpslTriggerPrice = __esm({
               ui.Text.numeral,
               {
                 className: ui.cn(
-                  "oui-text-trade-loss oui-gap-0 oui-decoration-white/20 oui-border-b oui-border-dashed oui-border-base-contrast-12"
+                  "oui-text-trade-loss oui-gap-0 oui-decoration-white/20 oui-border-b oui-border-dashed oui-border-base-contrast-12",
+                  "oui-flex oui-items-center"
                 ),
+                as: "div",
                 rule: "price",
                 dp: symbolInfo[order.symbol]("quote_dp", 2),
                 children: props.stopLossPrice,
                 prefix: !props.takeProfitPrice || direction === "column" ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "oui-text-base-contrast-54", children: [
                   `${t("tpsl.sl")} -`,
                   "\xA0"
-                ] }) : ""
+                ] }) : "",
+                suffix: /* @__PURE__ */ jsxRuntime.jsx(
+                  uiTpsl.CloseToLiqPriceIcon,
+                  {
+                    slPriceError: props.slPriceError,
+                    className: "oui-ml-1"
+                  }
+                )
               },
               "sl"
             )
@@ -2253,7 +2269,13 @@ var init_tpslTriggerPrice = __esm({
           children.splice(1, 0, /* @__PURE__ */ jsxRuntime.jsx("span", { children: "/" }, "split"));
         }
         return children;
-      }, [props.takeProfitPrice, props.stopLossPrice, order?.symbol, t]);
+      }, [
+        props.takeProfitPrice,
+        props.stopLossPrice,
+        order?.symbol,
+        t,
+        props.slPriceError
+      ]);
       const content = /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
@@ -3420,8 +3442,14 @@ var init_items = __esm({
       );
     };
     SLTrigger = (props) => {
-      const { sl_trigger_price, slPnL } = useTPSLOrderRowContext();
+      const { sl_trigger_price, slPnL, position: item } = useTPSLOrderRowContext();
       const { t } = i18n.useTranslation();
+      const side2 = (item?.position_qty ?? 0) > 0 ? types.OrderSide.BUY : types.OrderSide.SELL;
+      const slPriceError = hooks.useTpslPriceChecker({
+        slPrice: sl_trigger_price?.toString() ?? void 0,
+        liqPrice: item?.est_liq_price ?? null,
+        side: side2
+      });
       return /* @__PURE__ */ jsxRuntime.jsx(
         ui.Statistic,
         {
@@ -3454,10 +3482,15 @@ var init_items = __esm({
                 ui.Text.numeral,
                 {
                   dp: props.quote_dp,
+                  as: "div",
                   rm: utils.Decimal.ROUND_DOWN,
                   color: "sell",
                   padding: false,
-                  className: sl_trigger_price ? "oui-border-b oui-border-dashed oui-border-base-contrast-12" : void 0,
+                  suffix: /* @__PURE__ */ jsxRuntime.jsx(uiTpsl.CloseToLiqPriceIcon, { slPriceError }),
+                  className: ui.cn(
+                    sl_trigger_price ? "oui-border-b oui-border-dashed oui-border-base-contrast-12" : void 0,
+                    "oui-flex oui-items-center"
+                  ),
                   children: sl_trigger_price ?? "--"
                 }
               )
@@ -4546,7 +4579,7 @@ var init_editSheet_ui = __esm({
       const { t } = i18n.useTranslation();
       const { getErrorMsg } = reactApp.useOrderEntryFormErrorMsg(errors);
       const disabled = !props.isChanged || Object.keys(errors).length > 0 || // when activated price is not empty, the activated price input should not be empty
-      item.activated_price && !formattedOrder.activated_price;
+      !!item.activated_price && !formattedOrder.activated_price;
       const header = /* @__PURE__ */ jsxRuntime.jsx(EditSheetHeader, { item });
       const lastPrice = /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { width: "100%", justify: "between", children: [
         /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: t("common.lastPrice") }),