@orderly.network/ui-order-entry 3.0.0-beta.3 → 3.0.0-beta.4

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({
@@ -4866,10 +4866,19 @@ var usePnlInputContext = () => {
 };
 
 // src/components/pnlInput/useBuilder.script.ts
+function normalizeSlPnlForStore(raw) {
+  const v = `${raw}`.replace(/,/g, "").trim();
+  if (v === "" || v === "-") return v;
+  const withoutTrailingDot = v.replace(/\.$/, "");
+  const num = Number(withoutTrailingDot);
+  if (!isNaN(num) && num === 0) return "0";
+  if (v.startsWith("-")) return v;
+  return `-${v}`;
+}
 var usePNLInputBuilder = (props) => {
   const { type, values, quote_dp } = props;
   const { t } = i18n.useTranslation();
-  const [focus, setFocus] = React3.useState(true);
+  const [, setFocus] = React3.useState(true);
   const { mode, setMode, tipsEle } = usePnlInputContext();
   const [tipVisible, setTipVisible] = React3.useState(false);
   const [isFocused, setIsFocused] = React3.useState(false);
@@ -4879,10 +4888,14 @@ 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`;
     }
-  }, [mode]);
+  }, [mode, type]);
   const [innerValue, setInnerValue] = React3.useState(
     values[mode]
   );
@@ -4905,23 +4918,39 @@ 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("");
   const onValueChange = (value) => {
     setInnerValue(value);
-    props.onChange(key, value);
+    const outgoing = key === "sl_pnl" ? normalizeSlPnlForStore(value) : value;
+    props.onChange(key, outgoing);
   };
   const onFocus = () => {
     setTipVisible(true);
@@ -4930,20 +4959,19 @@ var usePNLInputBuilder = (props) => {
   const onBlur = () => {
     setTipVisible(false);
     setIsFocused(false);
-    props.onChange(key, innerValue);
+    const outgoing = key === "sl_pnl" ? normalizeSlPnlForStore(innerValue) : innerValue;
+    props.onChange(key, outgoing);
   };
   const formatter = (options2) => {
     const { dp = 2 } = options2;
     return {
       onRenderBefore: (value, options3) => {
         value = `${value}`;
-        if (focus) {
-          if (type === "SL" && mode === "PnL" /* PnL */) {
-            value = value.startsWith("-") ? value : "-" + value;
-          }
+        if (type === "SL" && mode === "PnL" /* PnL */) {
+          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(".", "\\.") + "$"),
             ""
@@ -4953,7 +4981,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}`;
@@ -4962,7 +4990,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}$/);
@@ -4977,7 +5005,7 @@ var usePNLInputBuilder = (props) => {
             value = new utils.Decimal(value).div(100).toString();
             value = `${value}${percentageSuffix.current}`;
           }
-        } else if (mode === "PnL" /* PnL */ && type === "SL" && focus) {
+        } else if (mode === "PnL" /* PnL */ && type === "SL") {
           value = value.startsWith("-") ? value : "-" + value;
         } else {
           value = utils.todpIfNeed(value, dp);
@@ -5021,21 +5049,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,
@@ -5072,11 +5107,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,
           {
@@ -5496,6 +5531,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
         }
       }
@@ -5715,6 +5752,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,
@@ -5724,6 +5763,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);
@@ -5740,6 +5781,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
     });
   };
@@ -5908,6 +5957,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: {
@@ -5915,6 +5966,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 ?? ""
                     }
                   },
@@ -6431,10 +6484,24 @@ 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,
     orderQuantity: Number(formattedOrder.order_quantity)
   });
@@ -6449,12 +6516,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;
@@ -6463,7 +6525,7 @@ var useOrderEntryScript = (inputs) => {
       estLiqPrice,
       isUserActive
     });
-  }, [ee, symbol, state.estLiqPrice, state.markPrice, formattedOrder.side]);
+  }, [ee, symbol, effectiveEstLiqPriceForSlCheck]);
   React3.useEffect(() => {
     setOrderValue("margin_mode", marginMode);
   }, [marginMode]);