@orderly.network/ui-order-entry 2.12.2 → 2.12.3-alpha.0

package/dist/index.js

@@ -2048,6 +2048,7 @@ var OrderTypeSelect = (props) => {
       [types.OrderType.TRAILING_STOP]: t("orderEntry.orderType.trailingStop")
     };
   }, [t]);
+  const mobileOptions = React3.useMemo(() => allOptions, [allOptions]);
   if (!isMobile) {
     const baseButtonClassName = "oui-flex oui-flex-1 oui-items-center oui-justify-center oui-gap-x-1 oui-rounded oui-px-3 oui-py-0.5 oui-text-xs oui-font-semibold oui-h-8";
     const selectedButtonClassName = ui.cn(
@@ -2146,7 +2147,6 @@ var OrderTypeSelect = (props) => {
       }
     );
   }
-  const mobileOptions = React3.useMemo(() => allOptions, [allOptions]);
   const handleMobileValueChange = (value) => {
     if (marketOrderDisabled && value === types.OrderType.MARKET && marketOrderDisabledTooltip) {
       ui.modal.alert({
@@ -4786,6 +4786,10 @@ var usePNLInputBuilder = (props) => {
         return `${type.toLowerCase()}_offset`;
       case "Offset%" /* PERCENTAGE */:
         return `${type.toLowerCase()}_offset_percentage`;
+      case "OffsetFromMark" /* OFFSET_FROM_MARK */:
+        return `${type.toLowerCase()}_offset_from_mark`;
+      case "PercentageFromMark" /* PERCENTAGE_FROM_MARK */:
+        return `${type.toLowerCase()}_offset_percentage_from_mark`;
       default:
         return `${type.toLowerCase()}_pnl`;
     }
@@ -4812,17 +4816,32 @@ var usePNLInputBuilder = (props) => {
         testId: `${"Offset" /* OFFSET */}_mneu_item`
       },
       {
-        label: `${t("tpsl.offset")}%`,
+        label: t("tpsl.offsetPercent"),
         value: "Offset%" /* PERCENTAGE */,
         testId: `${"Offset%" /* PERCENTAGE */}_menu_item`
+      },
+      {
+        // @ts-ignore
+        label: t("tpsl.offsetMark"),
+        value: "OffsetFromMark" /* OFFSET_FROM_MARK */,
+        testId: `${"OffsetFromMark" /* OFFSET_FROM_MARK */}_menu_item`
+      },
+      {
+        // @ts-ignore
+        label: t("tpsl.offsetPercentMark"),
+        value: "PercentageFromMark" /* PERCENTAGE_FROM_MARK */,
+        testId: `${"PercentageFromMark" /* PERCENTAGE_FROM_MARK */}_menu_item`
       }
     ];
   }, [t]);
   const modeLabelMap = React3.useMemo(() => {
     return {
       ["PnL" /* PnL */]: t("tpsl.pnl"),
-      ["Offset" /* OFFSET */]: t("tpsl.offset"),
-      ["Offset%" /* PERCENTAGE */]: `${t("tpsl.offset")}%`
+      ["Offset" /* OFFSET */]: t("tpsl.offsetHolder"),
+      ["Offset%" /* PERCENTAGE */]: `${t("tpsl.offsetHolder")}`,
+      // Extend locale keys; not yet in LocaleMessages typings
+      ["OffsetFromMark" /* OFFSET_FROM_MARK */]: t("tpsl.offsetHolder"),
+      ["PercentageFromMark" /* PERCENTAGE_FROM_MARK */]: t("tpsl.offsetHolder")
     };
   }, [t]);
   const percentageSuffix = React3.useRef("");
@@ -4850,7 +4869,7 @@ var usePNLInputBuilder = (props) => {
           value = value.startsWith("-") ? value : "-" + value;
         }
         if (value === "" || value === "-") return "";
-        if (mode === "Offset%" /* PERCENTAGE */) {
+        if (mode === "Offset%" /* PERCENTAGE */ || mode === "PercentageFromMark" /* PERCENTAGE_FROM_MARK */) {
           let normalized = value.replace(
             new RegExp(percentageSuffix.current.replace(".", "\\.") + "$"),
             ""
@@ -4860,7 +4879,7 @@ var usePNLInputBuilder = (props) => {
             return value;
           }
           return `${new utils.Decimal(normalized).mul(100).todp(2, 4).toString()}${percentageSuffix.current}`;
-        } else if (mode === "Offset" /* OFFSET */) {
+        } else if (mode === "Offset" /* OFFSET */ || mode === "OffsetFromMark" /* OFFSET_FROM_MARK */) {
           value = utils.todpIfNeed(value, dp);
         } else ;
         return `${value}`;
@@ -4869,7 +4888,7 @@ var usePNLInputBuilder = (props) => {
         if (/^\-?0{2,}$/.test(value)) {
           return "0";
         }
-        if (mode === "Offset%" /* PERCENTAGE */) {
+        if (mode === "Offset%" /* PERCENTAGE */ || mode === "PercentageFromMark" /* PERCENTAGE_FROM_MARK */) {
           if (value !== "") {
             value = utils.todpIfNeed(value, 2);
             const endStr = value.match(/\.0{0,2}$/);
@@ -4928,21 +4947,28 @@ var PNLInput = (props) => {
     setFocus
   } = props;
   const [prefix, setPrefix] = React3.useState(mode);
+  const isPercentageMode = mode === "Offset%" /* PERCENTAGE */ || mode === "PercentageFromMark" /* PERCENTAGE_FROM_MARK */;
   const [placeholder, setPlaceholder] = React3.useState(
-    mode === "Offset%" /* PERCENTAGE */ ? "%" : quote
+    isPercentageMode ? "%" : quote
   );
   React3.useEffect(() => {
     setPrefix(mode);
-    setPlaceholder(mode === "Offset%" /* PERCENTAGE */ ? "%" : quote);
-  }, [mode]);
+    setPlaceholder(isPercentageMode ? "%" : quote);
+  }, [mode, isPercentageMode, quote]);
   React3.useEffect(() => {
     setPrefix(!!value ? "" : mode);
   }, [value]);
-  const id = React3.useMemo(() => `${type.toLowerCase()}_${mode.toLowerCase()}`, []);
+  const id = React3.useMemo(
+    () => `${type.toLowerCase()}_${mode.toLowerCase()}`,
+    [type, mode]
+  );
+  const prefixLabel = prefix === "" ? "" : String(
+    modeLabelMap[prefix] ?? prefix ?? ""
+  );
   return /* @__PURE__ */ jsxRuntime.jsx(
     ui.Input.tooltip,
     {
-      prefix: modeLabelMap[prefix] || prefix,
+      prefix: prefixLabel,
       size: "md",
       placeholder,
       id,
@@ -4979,11 +5005,11 @@ var PNLInput = (props) => {
       },
       onBlur: () => {
         setPrefix(!!value ? "" : mode);
-        setPlaceholder(mode === "Offset%" /* PERCENTAGE */ ? "%" : quote);
+        setPlaceholder(isPercentageMode ? "%" : quote);
         onBlur();
       },
       suffix: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        mode === "Offset%" /* PERCENTAGE */ && !!value && /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", color: "inherit", className: "oui-ml-[2px]", children: "%" }),
+        isPercentageMode && !!value && /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", color: "inherit", className: "oui-ml-[2px]", children: "%" }),
         /* @__PURE__ */ jsxRuntime.jsx(
           PNLMenus,
           {
@@ -5403,6 +5429,8 @@ var TPSLInputRow = (props) => {
           PnL: props.values.PnL,
           Offset: props.values.Offset,
           "Offset%": props.values["Offset%"],
+          OffsetFromMark: props.values.OffsetFromMark,
+          PercentageFromMark: props.values.PercentageFromMark,
           ROI: props.values.ROI
         }
       }
@@ -5622,6 +5650,8 @@ var OrderEntry = (props) => {
       tp_pnl: order.tp_pnl,
       tp_offset: order.tp_offset,
       tp_offset_percentage: order.tp_offset_percentage,
+      tp_offset_from_mark: order.tp_offset_from_mark,
+      tp_offset_percentage_from_mark: order.tp_offset_percentage_from_mark,
       tp_ROI: order.tp_ROI,
       tp_trigger_price: order.tp_trigger_price,
       tp_order_price: order.tp_order_price,
@@ -5631,6 +5661,8 @@ var OrderEntry = (props) => {
       sl_pnl: order.sl_pnl,
       sl_offset: order.sl_offset,
       sl_offset_percentage: order.sl_offset_percentage,
+      sl_offset_from_mark: order.sl_offset_from_mark,
+      sl_offset_percentage_from_mark: order.sl_offset_percentage_from_mark,
       sl_ROI: order.sl_ROI
     });
     setShowTPSLAdvanced(false);
@@ -5647,6 +5679,14 @@ var OrderEntry = (props) => {
       sl_order_type: types.OrderType.MARKET,
       tp_pnl: void 0,
       sl_pnl: void 0,
+      tp_offset: void 0,
+      tp_offset_percentage: void 0,
+      tp_offset_from_mark: void 0,
+      tp_offset_percentage_from_mark: void 0,
+      sl_offset: void 0,
+      sl_offset_percentage: void 0,
+      sl_offset_from_mark: void 0,
+      sl_offset_percentage_from_mark: void 0,
       position_type: types.PositionType.FULL
     });
   };
@@ -5824,6 +5864,8 @@ var OrderEntry = (props) => {
                       PnL: formattedOrder.tp_pnl ?? "",
                       Offset: formattedOrder.tp_offset ?? "",
                       "Offset%": formattedOrder.tp_offset_percentage ?? "",
+                      OffsetFromMark: formattedOrder.tp_offset_from_mark ?? "",
+                      PercentageFromMark: formattedOrder.tp_offset_percentage_from_mark ?? "",
                       ROI: formattedOrder.tp_ROI ?? ""
                     },
                     sl: {
@@ -5831,6 +5873,8 @@ var OrderEntry = (props) => {
                       PnL: formattedOrder.sl_pnl ?? "",
                       Offset: formattedOrder.sl_offset ?? "",
                       "Offset%": formattedOrder.sl_offset_percentage ?? "",
+                      OffsetFromMark: formattedOrder.sl_offset_from_mark ?? "",
+                      PercentageFromMark: formattedOrder.sl_offset_percentage_from_mark ?? "",
                       ROI: formattedOrder.sl_ROI ?? ""
                     }
                   },
@@ -6347,9 +6391,22 @@ var useOrderEntryScript = (inputs) => {
   const { priceInputContainerRef, priceInputContainerWidth } = usePriceInputContainer({
     order_type_ext: formattedOrder.order_type_ext
   });
+  const effectiveEstLiqPriceForSlCheck = React3.useMemo(() => {
+    const estLiqPrice = state.estLiqPrice;
+    if (estLiqPrice == null || formattedOrder.side == null || state.markPrice == null) {
+      return null;
+    }
+    if (formattedOrder.side === types.OrderSide.BUY && estLiqPrice > state.markPrice || formattedOrder.side === types.OrderSide.SELL && estLiqPrice < state.markPrice) {
+      return null;
+    }
+    if (!Number.isFinite(estLiqPrice) || estLiqPrice <= 0) {
+      return null;
+    }
+    return estLiqPrice;
+  }, [state.estLiqPrice, state.markPrice, formattedOrder.side]);
   const slPriceError = hooks.useTpslPriceChecker({
     slPrice: formattedOrder.sl_trigger_price,
-    liqPrice: state.estLiqPrice,
+    liqPrice: effectiveEstLiqPriceForSlCheck,
     side: formattedOrder.side,
     markPrice: state.markPrice,
     currentPosition: state.currentPosition,
@@ -6366,12 +6423,7 @@ var useOrderEntryScript = (inputs) => {
     }
   }, [tpslSwitch]);
   React3.useEffect(() => {
-    let estLiqPrice = state.estLiqPrice;
-    if (estLiqPrice == null || formattedOrder.side == null || state.markPrice == null) {
-      estLiqPrice = null;
-    } else if (formattedOrder.side === types.OrderSide.BUY && estLiqPrice > state.markPrice || formattedOrder.side === types.OrderSide.SELL && estLiqPrice < state.markPrice) {
-      estLiqPrice = null;
-    }
+    const estLiqPrice = effectiveEstLiqPriceForSlCheck;
     const lastActive = lastUserActiveTimeRef.current;
     const now = Date.now();
     const isUserActive = now - lastActive <= ORDER_ENTRY_EST_LIQ_ACTIVE_WINDOW_MS;
@@ -6380,7 +6432,7 @@ var useOrderEntryScript = (inputs) => {
       estLiqPrice,
       isUserActive
     });
-  }, [ee, symbol, state.estLiqPrice, state.markPrice, formattedOrder.side]);
+  }, [ee, symbol, effectiveEstLiqPriceForSlCheck]);
   React3.useEffect(() => {
     setOrderValue("margin_mode", marginMode);
   }, [marginMode]);