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

package/dist/index.mjs

@@ -17,6 +17,7 @@ var SymbolBadge = (props) => {
   const badge = brokerName ?? brokerId ?? void 0;
   return /* @__PURE__ */ jsx(SymbolBadge$1, { badge, fullName: brokerNameRaw });
 };
+var LIQ_DISTANCE_THRESHOLD = 10;
 var OrderInfo = (props) => {
   const { t } = useTranslation();
   const { order: order2, symbolLeverage } = props;
@@ -29,6 +30,8 @@ var OrderInfo = (props) => {
     props.marginMode
   );
   const currentLeverage = symbolLeverage || leverage;
+  const markPriceValue = markPrice?.data;
+  const estLiqPrice = props.estLiqPrice === 0 || !markPriceValue || markPriceValue === 0 || Math.abs((props.estLiqPrice ?? 0) - markPriceValue) / markPriceValue >= LIQ_DISTANCE_THRESHOLD ? "--" : props.estLiqPrice ?? "--";
   return /* @__PURE__ */ jsxs(
     Flex,
     {
@@ -152,7 +155,7 @@ var OrderInfo = (props) => {
                     className: "oui-text-warning",
                     size: "2xs",
                     dp: props.quoteDP ?? 2,
-                    children: props.estLiqPrice ?? "--"
+                    children: estLiqPrice
                   }
                 )
               ] })
@@ -285,6 +288,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`;
     }
@@ -302,15 +309,34 @@ var usePNLInputBuilder = (props) => {
       {
         label: t("tpsl.offset"),
         value: "Offset" /* OFFSET */,
-        testId: `${"Offset" /* OFFSET */}_mneu_item`
+        testId: `${"Offset" /* OFFSET */}_menu_item`
       },
       {
-        label: `${t("tpsl.offset")}%`,
+        label: t("tpsl.offsetPercent"),
         value: "Offset%" /* PERCENTAGE */,
         testId: `${"Offset%" /* PERCENTAGE */}_menu_item`
+      },
+      {
+        label: t("tpsl.offsetMark"),
+        value: "OffsetFromMark" /* OFFSET_FROM_MARK */,
+        testId: `${"OffsetFromMark" /* OFFSET_FROM_MARK */}_menu_item`
+      },
+      {
+        label: t("tpsl.offsetPercentMark"),
+        value: "PercentageFromMark" /* PERCENTAGE_FROM_MARK */,
+        testId: `${"PercentageFromMark" /* PERCENTAGE_FROM_MARK */}_menu_item`
       }
     ];
   }, [t]);
+  const modeLabelMap = useMemo(() => {
+    return {
+      ["PnL" /* PnL */]: t("tpsl.pnl"),
+      ["Offset" /* OFFSET */]: t("tpsl.offsetHolder"),
+      ["Offset%" /* PERCENTAGE */]: t("tpsl.offsetHolder"),
+      ["OffsetFromMark" /* OFFSET_FROM_MARK */]: t("tpsl.offsetHolder"),
+      ["PercentageFromMark" /* PERCENTAGE_FROM_MARK */]: t("tpsl.offsetHolder")
+    };
+  }, [t]);
   const percentageSuffix = useRef("");
   const onValueChange = (value2) => {
     props.onChange(key, value2);
@@ -321,7 +347,7 @@ var usePNLInputBuilder = (props) => {
       onRenderBefore: (value2, options2) => {
         value2 = `${value2}`;
         if (value2 === "" || value2 === "-") return "";
-        if (mode === "Offset%" /* PERCENTAGE */) {
+        if (mode === "Offset%" /* PERCENTAGE */ || mode === "PercentageFromMark" /* PERCENTAGE_FROM_MARK */) {
           try {
             return `${new Decimal(
               value2.replace(
@@ -332,7 +358,7 @@ var usePNLInputBuilder = (props) => {
           } catch {
             return "";
           }
-        } else if (mode === "Offset" /* OFFSET */) {
+        } else if (mode === "Offset" /* OFFSET */ || mode === "OffsetFromMark" /* OFFSET_FROM_MARK */) {
           value2 = todpIfNeed(value2, dp);
         } else ;
         return `${value2}`;
@@ -341,7 +367,7 @@ var usePNLInputBuilder = (props) => {
         if (/^\-?0{2,}$/.test(value2)) {
           return "0";
         }
-        if (mode === "Offset%" /* PERCENTAGE */) {
+        if (mode === "Offset%" /* PERCENTAGE */ || mode === "PercentageFromMark" /* PERCENTAGE_FROM_MARK */) {
           if (value2 !== "") {
             value2 = todpIfNeed(value2, 2);
             const endStr = value2.match(/\.0{0,2}$/);
@@ -370,6 +396,7 @@ var usePNLInputBuilder = (props) => {
   return {
     mode,
     modes,
+    modeLabelMap,
     type: props.type,
     formatter,
     onModeChange: (mode2) => {
@@ -386,6 +413,7 @@ var PNLInput = (props) => {
   const {
     mode,
     modes,
+    modeLabelMap,
     onModeChange,
     onValueChange,
     quote,
@@ -393,26 +421,19 @@ var PNLInput = (props) => {
     value,
     pnl
   } = props;
-  const { t } = useTranslation();
-  const [prefix, setPrefix] = useState(mode);
-  const [placeholder, setPlaceholder] = useState(
-    mode === "Offset%" /* PERCENTAGE */ ? "%" : quote
-  );
+  const [isInputFocused, setIsInputFocused] = useState(false);
   const color = useMemo(() => {
     const num = Number(pnl);
     if (isNaN(num) || num === 0) return "";
     if (num > 0) return "oui-text-trade-profit";
     if (num < 0) return "oui-text-trade-loss";
   }, [pnl]);
-  useEffect(() => {
-    const label = modes.find((item) => item.value === mode)?.label;
-    setPrefix(label);
-    setPlaceholder(mode === "Offset%" /* PERCENTAGE */ ? "%" : quote);
-  }, [mode, modes]);
+  const prefixLabel = String(modeLabelMap[mode] ?? mode ?? "");
+  const placeholder = isInputFocused ? "" : mode === "Offset%" /* PERCENTAGE */ || mode === "PercentageFromMark" /* PERCENTAGE_FROM_MARK */ ? "%" : quote;
   return /* @__PURE__ */ jsx(
     Input,
     {
-      prefix,
+      prefix: prefixLabel,
       size: {
         initial: "lg",
         lg: "md"
@@ -435,15 +456,15 @@ var PNLInput = (props) => {
         root: "oui-outline-line-12 focus-within:oui-outline-primary-light"
       },
       onFocus: () => {
-        setPlaceholder("");
+        setIsInputFocused(true);
         props.setFocus(true);
       },
       onBlur: () => {
-        setPlaceholder(mode === "Offset%" /* PERCENTAGE */ ? "%" : quote);
+        setIsInputFocused(false);
         props.setFocus(false);
       },
       suffix: /* @__PURE__ */ jsxs(Fragment, { children: [
-        mode === "Offset%" /* PERCENTAGE */ && !!value && /* @__PURE__ */ jsx(
+        (mode === "Offset%" /* PERCENTAGE */ || mode === "PercentageFromMark" /* PERCENTAGE_FROM_MARK */) && !!value && /* @__PURE__ */ jsx(
           Text,
           {
             size: "2xs",
@@ -472,7 +493,7 @@ var PNLMenus = (props) => {
       menu: props.modes,
       align: "end",
       size: "xs",
-      className: "oui-min-w-[80px]",
+      className: "oui-min-w-[120px]",
       onSelect: (item) => props.onModeChange(item),
       children: /* @__PURE__ */ jsx("button", { className: "oui-p-2", children: /* @__PURE__ */ jsx(CaretDownIcon, { size: 12, color: "white" }) })
     }
@@ -1025,6 +1046,8 @@ var TPSL = (props) => {
                   PnL: TPSL_OrderEntity.tp_pnl?.toString() ?? void 0,
                   Offset: TPSL_OrderEntity.tp_offset?.toString() ?? void 0,
                   "Offset%": TPSL_OrderEntity.tp_offset_percentage?.toString() ?? void 0,
+                  OffsetFromMark: TPSL_OrderEntity.tp_offset_from_mark?.toString() ?? void 0,
+                  PercentageFromMark: TPSL_OrderEntity.tp_offset_percentage_from_mark?.toString() ?? void 0,
                   order_price: TPSL_OrderEntity.tp_order_price?.toString() ?? void 0,
                   order_type: TPSL_OrderEntity.tp_order_type ?? OrderType.MARKET
                 },
@@ -1062,6 +1085,8 @@ var TPSL = (props) => {
                   PnL: TPSL_OrderEntity.sl_pnl?.toString() ?? void 0,
                   Offset: TPSL_OrderEntity.sl_offset?.toString() ?? void 0,
                   "Offset%": TPSL_OrderEntity.sl_offset_percentage?.toString() ?? void 0,
+                  OffsetFromMark: TPSL_OrderEntity.sl_offset_from_mark?.toString() ?? void 0,
+                  PercentageFromMark: TPSL_OrderEntity.sl_offset_percentage_from_mark?.toString() ?? void 0,
                   order_price: TPSL_OrderEntity.sl_order_price?.toString() ?? void 0,
                   order_type: TPSL_OrderEntity.sl_order_type ?? OrderType.MARKET
                 },
@@ -1686,6 +1711,8 @@ var TPSLAdvancedUI = (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 ?? ""
   });
   const [slValues, setSlValues] = useState({
@@ -1696,6 +1723,8 @@ var TPSLAdvancedUI = (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 ?? ""
   });
   useEffect(() => {
@@ -1708,6 +1737,8 @@ var TPSLAdvancedUI = (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 ?? ""
     }));
   }, [formattedOrder]);
@@ -1721,6 +1752,8 @@ var TPSLAdvancedUI = (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 ?? ""
     }));
   }, [formattedOrder]);
@@ -1951,16 +1984,23 @@ var useTPSLAdvanced = (props) => {
       sl_pnl: order2.sl_pnl,
       sl_offset: order2.sl_offset,
       sl_offset_percentage: order2.sl_offset_percentage,
+      sl_offset_from_mark: order2.sl_offset_from_mark,
+      sl_offset_percentage_from_mark: order2.sl_offset_percentage_from_mark,
       tp_pnl: order2.tp_pnl,
       tp_offset: order2.tp_offset,
       tp_offset_percentage: order2.tp_offset_percentage,
+      tp_offset_from_mark: order2.tp_offset_from_mark,
+      tp_offset_percentage_from_mark: order2.tp_offset_percentage_from_mark,
       margin_mode: order2.margin_mode
     }
   });
   const slPriceError = useTpslPriceChecker({
     slPrice: formattedOrder.sl_trigger_price,
     liqPrice: state.estLiqPrice,
-    side: formattedOrder.side
+    side: formattedOrder.side,
+    markPrice: state.markPrice,
+    currentPosition: state.currentPosition,
+    orderQuantity: Number(formattedOrder.order_quantity)
   });
   const onSubmit = () => {
     const isSlPriceError = slPriceError?.sl_trigger_price?.type === ERROR_MSG_CODES.SL_PRICE_ERROR;
@@ -2634,7 +2674,6 @@ var TPSLDetailUI = (props) => {
     symbolInfo
   } = props;
   const { estLiqPrice } = useTPSLDetailContext();
-  console.log("----- position", position);
   return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(ScrollArea, { className: cn(isMobile && "oui-h-[calc(100vh-100px)]"), children: [
     /* @__PURE__ */ jsx(
       OrderInfo,
@@ -3473,6 +3512,8 @@ var EditBracketOrderUI = (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 ?? ""
   });
   const [slValues, setSlValues] = useState({
@@ -3483,6 +3524,8 @@ var EditBracketOrderUI = (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 ?? ""
   });
   useEffect(() => {
@@ -3495,6 +3538,8 @@ var EditBracketOrderUI = (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 ?? ""
     }));
   }, [formattedOrder]);
@@ -3508,6 +3553,8 @@ var EditBracketOrderUI = (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 ?? ""
     }));
   }, [formattedOrder]);