@orderly.network/ui-tpsl 3.0.0-beta.1 → 3.0.0-beta.10

package/dist/index.mjs

@@ -1,26 +1,37 @@
 import { SDKError, MarginMode, PositionType, AlgoOrderRootType, OrderType, OrderSide, OrderStatus, AlgoOrderType } from '@orderly.network/types';
-import { Flex, Input, inputFormatter, cn, Slider, Text, registerSimpleSheet, registerSimpleDialog, useScreen, ScrollArea, DotStatus, Grid, Button, ThrottledButton, Divider, Box, toast, TokenIcon, capitalizeFirstLetter, modal, Tooltip, ExclamationFillIcon, Select, ChevronDownIcon, Badge, textVariants, Checkbox, SimpleDropdownMenu, CaretDownIcon, useModal } from '@orderly.network/ui';
+import { Flex, Input, inputFormatter, cn, Slider, Text, registerSimpleSheet, registerSimpleDialog, useScreen, ScrollArea, DotStatus, Grid, Button, ThrottledButton, Divider, Box, toast, TokenIcon, modal, SymbolBadge as SymbolBadge$1, Tooltip, ExclamationFillIcon, Select, ChevronDownIcon, Badge, textVariants, Checkbox, SimpleDropdownMenu, CaretDownIcon, useModal } from '@orderly.network/ui';
 import { memo, useRef, useState, useEffect, createContext, useMemo, useContext, Fragment as Fragment$1 } from 'react';
-import { utils, useSymbolsInfo, useAccount, useEventEmitter, useLocalStorage, useMarginModeBySymbol, usePositionStream, useEstLiqPriceBySymbol, useTPSLOrder, useTpslPriceChecker, ERROR_MSG_CODES, useMemoizedFn, useOrderEntry, useGetEstLiqPrice, useOrderStream, useSubAccountAlgoOrderStream, findPositionTPSLFromOrders, useMutation, useMarkPrice, useIndexPrice, useLeverageBySymbol, useMaxQty, findTPSLFromOrder, findTPSLOrderPriceFromOrder } from '@orderly.network/hooks';
+import { utils, useSymbolsInfo, useAccount, useEventEmitter, useLocalStorage, useMarginModeBySymbol, usePositionStream, useEstLiqPriceBySymbol, useTPSLOrder, useTpslPriceChecker, ERROR_MSG_CODES, useMemoizedFn, useOrderEntry, useGetEstLiqPrice, useOrderStream, useSubAccountAlgoOrderStream, findPositionTPSLFromOrders, useMutation, useMarkPrice, useIndexPrice, useLeverageBySymbol, useMaxQty, useBadgeBySymbol, useSymbolWithBroker, findTPSLFromOrder, findTPSLOrderPriceFromOrder } from '@orderly.network/hooks';
 import { useTranslation, i18n, Trans } from '@orderly.network/i18n';
 import { useOrderEntryFormErrorMsg } from '@orderly.network/react-app';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { Decimal, checkIsNaN, transSymbolformString, getTPSLDirection, formatNum, todpIfNeed } from '@orderly.network/utils';
+import { Decimal, checkIsNaN, getTPSLDirection, formatNum, todpIfNeed } from '@orderly.network/utils';
 import { order, positions } from '@orderly.network/perp';
 import { AuthGuardDataTable } from '@orderly.network/ui-connector';
 
 // src/editorPopover.tsx
+var SymbolBadge = (props) => {
+  const { brokerId, brokerName, brokerNameRaw } = useBadgeBySymbol(
+    props.symbol
+  );
+  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;
   const { symbol } = order2;
   const markPrice = useMarkPrice(symbol);
   const indexPrice = useIndexPrice(symbol);
+  const marginModeLabel = props.marginMode === MarginMode.ISOLATED ? t("marginMode.isolated") : props.marginMode === MarginMode.CROSS ? t("marginMode.cross") : void 0;
   const leverage = useLeverageBySymbol(
     symbolLeverage ? void 0 : symbol,
     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,
     {
@@ -44,20 +55,21 @@ var OrderInfo = (props) => {
                   {
                     className: "oui-whitespace-nowrap oui-break-normal",
                     rule: "symbol",
-                    formatString: "base-type",
+                    formatString: "base",
                     size: "sm",
                     weight: "semibold",
                     intensity: 98,
+                    suffix: /* @__PURE__ */ jsx(SymbolBadge, { symbol: symbol ?? "" }),
                     children: symbol
                   }
                 )
               ] }),
-              props.marginMode && /* @__PURE__ */ jsx(
+              marginModeLabel && /* @__PURE__ */ jsx(
                 Text,
                 {
                   size: "2xs",
                   className: "oui-h-[18px] oui-rounded oui-bg-base-7 oui-px-2 oui-font-semibold oui-text-base-contrast-36",
-                  children: capitalizeFirstLetter(props.marginMode)
+                  children: marginModeLabel
                 }
               ),
               /* @__PURE__ */ jsxs(
@@ -143,7 +155,7 @@ var OrderInfo = (props) => {
                     className: "oui-text-warning",
                     size: "2xs",
                     dp: props.quoteDP ?? 2,
-                    children: props.estLiqPrice ?? "--"
+                    children: estLiqPrice
                   }
                 )
               ] })
@@ -253,6 +265,7 @@ var useTPSLInputRowScript = (props) => {
       });
       return roi2 * 100;
     } catch (error) {
+      console.error("error", error);
       return null;
     }
   }, [values, leverage, rootOrderPrice, type, side]);
@@ -275,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`;
     }
@@ -292,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);
@@ -311,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(
@@ -322,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}`;
@@ -331,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}$/);
@@ -360,6 +396,7 @@ var usePNLInputBuilder = (props) => {
   return {
     mode,
     modes,
+    modeLabelMap,
     type: props.type,
     formatter,
     onModeChange: (mode2) => {
@@ -376,6 +413,7 @@ var PNLInput = (props) => {
   const {
     mode,
     modes,
+    modeLabelMap,
     onModeChange,
     onValueChange,
     quote,
@@ -383,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"
@@ -425,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",
@@ -462,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" }) })
     }
@@ -829,10 +860,10 @@ var TPSLQuantity = memo((props) => {
         tooltip: errorMsg,
         color: errorMsg ? "danger" : void 0,
         formatters: [
+          inputFormatter.decimalPointFormatter,
           inputFormatter.dpFormatter(props.base_dp),
           inputFormatter.numberFormatter,
-          inputFormatter.currencyFormatter,
-          inputFormatter.decimalPointFormatter
+          inputFormatter.currencyFormatter
         ],
         onValueChange: (value) => {
           props.onQuantityChange?.(value);
@@ -1015,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
                 },
@@ -1052,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
                 },
@@ -1104,6 +1139,7 @@ var TPSL = (props) => {
               props.close?.();
               onComplete?.();
             }).catch((err) => {
+              console.log("--->>>cancel order", err);
             });
           },
           children: t("common.confirm")
@@ -1182,21 +1218,25 @@ var PositionTPSLConfirm = (props) => {
     );
   };
   const isPositionTPSL = _isPositionTPSL;
+  const displaySymbol = useSymbolWithBroker(symbol);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    isEditing && /* @__PURE__ */ jsx(Text, { as: "div", size: "2xs", intensity: 80, className: "oui-mb-3", children: t("tpsl.agreement", { symbol: transSymbolformString(symbol) }) }),
+    isEditing && /* @__PURE__ */ jsx(Text, { as: "div", size: "2xs", intensity: 80, className: "oui-mb-3", children: t("tpsl.agreement", { symbol: displaySymbol }) }),
     /* @__PURE__ */ jsxs(Flex, { pb: 4, children: [
-      /* @__PURE__ */ jsx(Box, { grow: true, children: /* @__PURE__ */ jsx(
-        Text.formatted,
-        {
-          rule: "symbol",
-          formatString: "base-type",
-          size: "base",
-          showIcon: true,
-          as: "div",
-          intensity: 80,
-          children: symbol
-        }
-      ) }),
+      /* @__PURE__ */ jsxs(Flex, { direction: "column", itemAlign: "start", gap: 1, grow: true, children: [
+        /* @__PURE__ */ jsx(Box, { grow: true, children: /* @__PURE__ */ jsx(
+          Text.formatted,
+          {
+            rule: "symbol",
+            formatString: "base",
+            size: "base",
+            showIcon: true,
+            as: "div",
+            intensity: 80,
+            children: symbol
+          }
+        ) }),
+        /* @__PURE__ */ jsx(SymbolBadge, { symbol })
+      ] }),
       /* @__PURE__ */ jsxs(Flex, { gap: 1, children: [
         isPositionTPSL && /* @__PURE__ */ jsx(Badge, { size: "xs", color: "primary", children: t("common.position") }),
         /* @__PURE__ */ jsx(TPSLOrderType, { tpPrice, slPrice }),
@@ -1341,9 +1381,10 @@ var useTPSLBuilder = (options) => {
   const [needConfirm] = useLocalStorage("orderly_order_confirm", true);
   const { marginMode: symbolMarginMode } = useMarginModeBySymbol(symbol);
   const [{ rows: positions }] = usePositionStream();
-  const mainAccountPosition = positions.find(
-    (item) => item.symbol === symbol && item.margin_mode === (options.position?.margin_mode ?? symbolMarginMode)
-  );
+  const mainAccountPosition = positions.find((item) => {
+    const marginMode = options.position?.margin_mode ?? symbolMarginMode;
+    return item.symbol === symbol && item.margin_mode === marginMode;
+  });
   const isSubAccount = options.position?.account_id && options.position?.account_id !== state.mainAccountId;
   const position = isSubAccount ? options.position : mainAccountPosition;
   const estLiqPrice = useEstLiqPriceBySymbol(
@@ -1670,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({
@@ -1680,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(() => {
@@ -1692,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]);
@@ -1705,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]);
@@ -1935,22 +1984,31 @@ 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;
     helper.validate(isSlPriceError ? slPriceError : void 0).then(() => {
       props.onSubmit(formattedOrder);
     }).catch((err) => {
+      console.log("metaState", metaState);
+      console.log("err", err);
     });
   };
   return {
@@ -2910,9 +2968,8 @@ registerSimpleSheet(TPSLDetailSheetId, TPSLDetailWidget, {
   }
 });
 var useTPSLSimpleDialog = (options) => {
-  const { type, triggerPrice, symbol } = options;
+  const { type, triggerPrice, symbol, marginMode } = options;
   const symbolInfo = useSymbolsInfo();
-  const { marginMode } = useMarginModeBySymbol(symbol ?? "");
   const [{ rows: positions }, positionsInfo] = usePositionStream(symbol);
   const position = positions?.find((item) => item.margin_mode === marginMode);
   useRef(AlgoOrderRootType.TP_SL);
@@ -3162,7 +3219,7 @@ var TPSLSimpleDialogUI = (props) => {
       TPSLQuantity,
       {
         maxQty: props.maxQty,
-        quantity: Number(props.orderQuantity ?? props.maxQty),
+        quantity: props.orderQuantity ?? props.maxQty,
         baseTick: props.symbolInfo("base_tick"),
         base_dp: props.symbolInfo("base_dp"),
         base: props.symbolInfo("base"),
@@ -3455,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({
@@ -3465,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(() => {
@@ -3477,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]);
@@ -3490,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]);
@@ -3631,6 +3696,7 @@ var EditBracketOrderUI = (props) => {
               props.onSubmit().then(() => {
                 props.onClose?.();
               }).catch((err) => {
+                console.log("--->>>cancel order", err);
               });
             },
             children: t("common.confirm")