@kodiak-finance/orderly-ui-tpsl 2.8.18 → 2.8.19-rc.0

package/dist/index.js

@@ -4,40 +4,3595 @@ var orderlyHooks = require('@kodiak-finance/orderly-hooks');
 var orderlyI18n = require('@kodiak-finance/orderly-i18n');
 var orderlyTypes = require('@kodiak-finance/orderly-types');
 var orderlyUi = require('@kodiak-finance/orderly-ui');
+var react = require('react');
 var orderlyReactApp = require('@kodiak-finance/orderly-react-app');
 var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
 var orderlyUtils = require('@kodiak-finance/orderly-utils');
-var orderlyUiConnector = require('@kodiak-finance/orderly-ui-connector');
 var orderlyPerp = require('@kodiak-finance/orderly-perp');
+var orderlyUiConnector = require('@kodiak-finance/orderly-ui-connector');
+
+// src/editorPopover.tsx
+var OrderInfo = (props) => {
+  const { t } = orderlyI18n.useTranslation();
+  const { order: order2, symbolLeverage } = props;
+  const { symbol } = order2;
+  const markPrice = orderlyHooks.useMarkPrice(symbol);
+  const indexPrice = orderlyHooks.useIndexPrice(symbol);
+  const leverage = orderlyHooks.useLeverageBySymbol(symbolLeverage ? void 0 : symbol);
+  const currentLeverage = symbolLeverage || leverage;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    orderlyUi.Flex,
+    {
+      direction: "column",
+      itemAlign: "start",
+      className: orderlyUi.cn(
+        "oui-w-full oui-gap-3 oui-font-semibold ",
+        props.classNames?.root
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          orderlyUi.Flex,
+          {
+            itemAlign: "center",
+            className: orderlyUi.cn("oui-gap-2 ", props.classNames?.symbol),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { gap: 1, itemAlign: "center", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.TokenIcon, { symbol, className: "oui-size-5" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  orderlyUi.Text.formatted,
+                  {
+                    className: "oui-whitespace-nowrap oui-break-normal",
+                    rule: "symbol",
+                    formatString: "base-type",
+                    size: "sm",
+                    weight: "semibold",
+                    intensity: 98,
+                    children: symbol
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                orderlyUi.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: [
+                    currentLeverage,
+                    "x"
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          orderlyUi.Grid,
+          {
+            cols: 2,
+            gapX: 2,
+            gapY: 1,
+            className: orderlyUi.cn("oui-w-full oui-gap-x-2 ", props.classNames?.container),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { justify: "between", className: " oui-text-base-contrast-36", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { size: "2xs", children: t("common.quantity") }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  orderlyUi.Text.numeral,
+                  {
+                    rule: "price",
+                    className: "oui-text-base-contrast-80",
+                    size: "2xs",
+                    dp: props.baseDP ?? 2,
+                    children: Number(order2.order_quantity)
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { justify: "between", className: "oui-text-base-contrast-36", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { size: "2xs", children: t("common.lastPrice") }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  orderlyUi.Text.numeral,
+                  {
+                    rule: "price",
+                    className: "oui-text-base-contrast-80",
+                    size: "2xs",
+                    dp: props.quoteDP ?? 2,
+                    children: indexPrice?.data
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { justify: "between", className: "oui-text-base-contrast-36", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { size: "2xs", children: t("common.orderPrice") }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  orderlyUi.Text.numeral,
+                  {
+                    rule: "price",
+                    className: "oui-text-base-contrast-80",
+                    size: "2xs",
+                    dp: props.quoteDP ?? 2,
+                    children: Number(order2.order_price)
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { justify: "between", className: "oui-text-base-contrast-36", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { size: "2xs", children: t("common.markPrice") }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  orderlyUi.Text.numeral,
+                  {
+                    rule: "price",
+                    className: "oui-text-base-contrast-80",
+                    size: "2xs",
+                    dp: props.quoteDP ?? 2,
+                    children: markPrice?.data
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { justify: "between", className: "oui-text-base-contrast-36", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { size: "2xs", children: t("positions.column.liqPrice") }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  orderlyUi.Text.numeral,
+                  {
+                    rule: "price",
+                    className: "oui-text-warning",
+                    size: "2xs",
+                    dp: props.quoteDP ?? 2,
+                    children: props.estLiqPrice ?? "--"
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+var PnlInfo = (props) => {
+  const { t } = orderlyI18n.useTranslation();
+  const { tp_pnl, sl_pnl } = props;
+  const riskRatio = react.useMemo(() => {
+    const defaultNode = /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { className: "oui-text-base-contrast-36", children: "-- x" });
+    if (tp_pnl === void 0 || sl_pnl === void 0) {
+      return defaultNode;
+    }
+    if (orderlyUtils.checkIsNaN(tp_pnl) || orderlyUtils.checkIsNaN(sl_pnl)) {
+      return defaultNode;
+    }
+    const tpDecimal = new orderlyUtils.Decimal(tp_pnl);
+    const slDecimal = new orderlyUtils.Decimal(sl_pnl);
+    if (slDecimal.isZero() || tpDecimal.isZero()) {
+      return defaultNode;
+    }
+    const ratio = tpDecimal.div(slDecimal).abs().toNumber().toFixed(2);
+    return /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { gap: 1, itemAlign: "center", className: "oui-text-base-contrast-80", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { children: ratio }),
+      /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { className: "oui-text-base-contrast-36", children: "x" })
+    ] });
+  }, [tp_pnl, sl_pnl]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    orderlyUi.Flex,
+    {
+      direction: "column",
+      itemAlign: "start",
+      className: orderlyUi.cn(
+        "oui-w-full oui-gap-1 oui-text-2xs oui-text-base-contrast-36",
+        props.className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { justify: "between", className: "oui-w-full", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { size: "2xs", children: t("tpsl.totalEstTpPnl") }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            orderlyUi.Text.numeral,
+            {
+              suffix: /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { className: "oui-text-base-contrast-36 oui-ml-1", children: "USDC" }),
+              rule: "price",
+              coloring: true,
+              visible: true,
+              size: "2xs",
+              dp: 2,
+              children: tp_pnl ? Number(tp_pnl) : "--"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { justify: "between", className: "oui-w-full", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { size: "2xs", children: t("tpsl.totalEstSlPnl") }),
+          sl_pnl ? /* @__PURE__ */ jsxRuntime.jsx(
+            orderlyUi.Text.numeral,
+            {
+              suffix: /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { className: "oui-text-base-contrast-36 oui-ml-1", children: "USDC" }),
+              coloring: true,
+              visible: true,
+              size: "2xs",
+              dp: 2,
+              children: Number(sl_pnl)
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { size: "2xs", children: "-- USDC" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { justify: "between", className: "oui-w-full", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { size: "2xs", children: t("tpsl.riskRewardRatio") }),
+          /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { className: "oui-text-base-contrast-80", size: "2xs", children: riskRatio })
+        ] })
+      ]
+    }
+  );
+};
+var useTPSLInputRowScript = (props) => {
+  const { values, side, type, rootOrderPrice } = props;
+  const symbolLeverage = orderlyHooks.useLeverageBySymbol(
+    props.symbolLeverage ? void 0 : props.symbol
+  );
+  const leverage = props.symbolLeverage || symbolLeverage;
+  const roi = react.useMemo(() => {
+    if (!leverage || !rootOrderPrice || Number(rootOrderPrice) === 0) {
+      return null;
+    }
+    let closePrice;
+    if (values.order_type === orderlyTypes.OrderType.MARKET) {
+      closePrice = values.trigger_price;
+    } else if (values.order_type === orderlyTypes.OrderType.LIMIT) {
+      closePrice = values.order_price;
+    }
+    if (!closePrice) {
+      return null;
+    }
+    try {
+      const roi2 = orderlyPerp.order.tpslROI({
+        side,
+        type,
+        closePrice: Number(closePrice),
+        orderPrice: Number(rootOrderPrice),
+        leverage
+      });
+      return roi2 * 100;
+    } catch (error) {
+      return null;
+    }
+  }, [values, leverage, rootOrderPrice, type, side]);
+  return {
+    ...props,
+    roi
+  };
+};
+var usePNLInputBuilder = (props) => {
+  const { type, values } = props;
+  const [mode, setMode] = orderlyHooks.useLocalStorage(
+    "TP/SL_Mode",
+    "Offset%" /* PERCENTAGE */
+  );
+  const [focus, setFocus] = react.useState(true);
+  const { t } = orderlyI18n.useTranslation();
+  const key = react.useMemo(() => {
+    switch (mode) {
+      case "Offset" /* OFFSET */:
+        return `${type.toLowerCase()}_offset`;
+      case "Offset%" /* PERCENTAGE */:
+        return `${type.toLowerCase()}_offset_percentage`;
+      default:
+        return `${type.toLowerCase()}_pnl`;
+    }
+  }, [mode]);
+  const value = react.useMemo(() => {
+    return values[mode];
+  }, [values, mode]);
+  const modes = react.useMemo(() => {
+    return [
+      {
+        label: t("tpsl.pnl"),
+        value: "PnL" /* PnL */,
+        testId: `${"PnL" /* PnL */}_menu_item`
+      },
+      {
+        label: t("tpsl.offset"),
+        value: "Offset" /* OFFSET */,
+        testId: `${"Offset" /* OFFSET */}_mneu_item`
+      },
+      {
+        label: `${t("tpsl.offset")}%`,
+        value: "Offset%" /* PERCENTAGE */,
+        testId: `${"Offset%" /* PERCENTAGE */}_menu_item`
+      }
+    ];
+  }, [t]);
+  const percentageSuffix = react.useRef("");
+  const onValueChange = (value2) => {
+    props.onChange(key, value2);
+  };
+  const formatter = (options) => {
+    const { dp = 2 } = options;
+    return {
+      onRenderBefore: (value2, options2) => {
+        value2 = `${value2}`;
+        if (value2 === "" || value2 === "-")
+          return "";
+        if (mode === "Offset%" /* PERCENTAGE */) {
+          return `${new orderlyUtils.Decimal(
+            value2.replace(
+              new RegExp(percentageSuffix.current.replace(".", "\\.") + "$"),
+              ""
+            )
+          ).mul(100).todp(2, 4).toString()}${percentageSuffix.current}`;
+        } else if (mode === "Offset" /* OFFSET */) {
+          value2 = orderlyUtils.todpIfNeed(value2, dp);
+        } else ;
+        return `${value2}`;
+      },
+      onSendBefore: (value2) => {
+        if (/^\-?0{2,}$/.test(value2)) {
+          return "0";
+        }
+        if (mode === "Offset%" /* PERCENTAGE */) {
+          if (value2 !== "") {
+            value2 = orderlyUtils.todpIfNeed(value2, 2);
+            const endStr = value2.match(/\.0{0,2}$/);
+            if (!!endStr) {
+              percentageSuffix.current = endStr[0];
+            } else {
+              percentageSuffix.current = "";
+            }
+            value2 = new orderlyUtils.Decimal(value2).div(100).toString();
+            value2 = `${value2}${percentageSuffix.current}`;
+          }
+        } else if (mode === "PnL" /* PnL */ && type === "SL" && focus) {
+          value2 = value2.startsWith("-") ? value2 : "-" + value2;
+        } else {
+          value2 = orderlyUtils.todpIfNeed(value2, dp);
+        }
+        if (value2 === "" || value2 === "-")
+          return "";
+        return value2;
+      }
+    };
+  };
+  return {
+    mode,
+    modes,
+    type: props.type,
+    formatter,
+    onModeChange: (mode2) => {
+      setMode(mode2);
+    },
+    value,
+    pnl: values["PnL" /* PnL */],
+    onValueChange,
+    quote_dp: props.quote_dp,
+    setFocus
+  };
+};
+var PNLInput = (props) => {
+  const {
+    mode,
+    modes,
+    onModeChange,
+    onValueChange,
+    quote,
+    quote_dp,
+    value,
+    pnl
+  } = props;
+  const { t } = orderlyI18n.useTranslation();
+  const [prefix, setPrefix] = react.useState(mode);
+  const [placeholder, setPlaceholder] = react.useState(
+    mode === "Offset%" /* PERCENTAGE */ ? "%" : quote
+  );
+  const color = react.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]);
+  react.useEffect(() => {
+    const label = modes.find((item) => item.value === mode)?.label;
+    setPrefix(label);
+    setPlaceholder(mode === "Offset%" /* PERCENTAGE */ ? "%" : quote);
+  }, [mode, modes]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    orderlyUi.Input,
+    {
+      prefix,
+      size: {
+        initial: "lg",
+        lg: "md"
+      },
+      placeholder,
+      align: "right",
+      value,
+      "data-testid": props.testId,
+      autoComplete: "off",
+      onValueChange,
+      formatters: [
+        // inputFormatter.numberFormatter,
+        props.formatter({ dp: quote_dp, mode }),
+        orderlyUi.inputFormatter.currencyFormatter,
+        orderlyUi.inputFormatter.decimalPointFormatter
+      ],
+      classNames: {
+        input: orderlyUi.cn("oui-text-2xs", color),
+        prefix: "oui-text-base-contrast-54 oui-text-2xs",
+        root: "oui-outline-line-12 focus-within:oui-outline-primary-light"
+      },
+      onFocus: () => {
+        setPlaceholder("");
+        props.setFocus(true);
+      },
+      onBlur: () => {
+        setPlaceholder(mode === "Offset%" /* PERCENTAGE */ ? "%" : quote);
+        props.setFocus(false);
+      },
+      suffix: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        mode === "Offset%" /* PERCENTAGE */ && !!value && /* @__PURE__ */ jsxRuntime.jsx(
+          orderlyUi.Text,
+          {
+            size: "2xs",
+            color: "inherit",
+            className: orderlyUi.cn("oui-ml-[2px]", color),
+            children: "%"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          PNLMenus,
+          {
+            mode,
+            modes,
+            onModeChange: (item) => onModeChange(item.value)
+          }
+        )
+      ] })
+    }
+  );
+};
+var PNLMenus = (props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    orderlyUi.SimpleDropdownMenu,
+    {
+      currentValue: props.mode,
+      menu: props.modes,
+      align: "end",
+      size: "xs",
+      className: "oui-min-w-[80px]",
+      onSelect: (item) => props.onModeChange(item),
+      children: /* @__PURE__ */ jsxRuntime.jsx("button", { className: "oui-p-2", children: /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.CaretDownIcon, { size: 12, color: "white" }) })
+    }
+  );
+};
+var PnlInputWidget = (props) => {
+  const { testId, quote, ...rest } = props;
+  const state = usePNLInputBuilder(rest);
+  return /* @__PURE__ */ jsxRuntime.jsx(PNLInput, { ...state, testId, quote });
+};
+var OrderPriceType = (props) => {
+  const { t } = orderlyI18n.useTranslation();
+  const options = [
+    { label: t("orderEntry.orderType.limitOrder"), value: orderlyTypes.OrderType.LIMIT },
+    { label: t("orderEntry.orderType.marketOrder"), value: orderlyTypes.OrderType.MARKET }
+  ];
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    orderlyUi.Select.options,
+    {
+      value: props.type,
+      options,
+      disabled: props.disabled,
+      onValueChange: props.onChange,
+      size: "xs",
+      classNames: {
+        trigger: "oui-bg-transparent  oui-w-auto oui-outline-line-1 oui-input-root oui-bg-base-6 oui-h-10 lg:oui-h-8 oui-outline-line-12 "
+      },
+      valueFormatter: (value, option) => {
+        const displayLabel = {
+          [orderlyTypes.OrderType.LIMIT]: t("orderEntry.orderType.limit"),
+          [orderlyTypes.OrderType.MARKET]: t("common.marketPrice")
+        }[value];
+        return /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { size: "2xs", children: displayLabel });
+      }
+    }
+  );
+};
+var PriceInput = (props) => {
+  const [placeholder, setPlaceholder] = react.useState("USDC");
+  const { t } = orderlyI18n.useTranslation();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    orderlyUi.Input.tooltip,
+    {
+      "data-testid": `oui-testid-tpsl-popUp-${props.type.toLowerCase()}-input`,
+      prefix: props.label ?? t("common.markPrice"),
+      size: { initial: "lg", lg: "md" },
+      tooltip: props.error,
+      placeholder,
+      disabled: props.disabled,
+      align: "right",
+      autoComplete: "off",
+      inputMode: "decimal",
+      value: props.value,
+      color: props.error ? "danger" : void 0,
+      classNames: {
+        input: orderlyUi.cn(
+          "oui-text-2xs placeholder:oui-text-2xs",
+          props.classNames?.input
+        ),
+        prefix: orderlyUi.cn(
+          "oui-text-base-contrast-54 oui-text-2xs",
+          props.classNames?.prefix
+        ),
+        root: orderlyUi.cn("oui-w-full", props.classNames?.root)
+      },
+      onValueChange: props.onValueChange,
+      onFocus: () => {
+        setPlaceholder("");
+      },
+      onBlur: () => {
+        setPlaceholder("USDC");
+      },
+      formatters: [
+        orderlyUi.inputFormatter.numberFormatter,
+        orderlyUi.inputFormatter.dpFormatter(props.quote_dp),
+        orderlyUi.inputFormatter.currencyFormatter,
+        orderlyUi.inputFormatter.decimalPointFormatter
+      ]
+    }
+  );
+};
+var TPSLInputRowUI = (props) => {
+  const { t } = orderlyI18n.useTranslation();
+  const { getErrorMsg } = orderlyReactApp.useOrderEntryFormErrorMsg(props.errors);
+  const { values, positionType } = props;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    orderlyUi.Flex,
+    {
+      direction: "column",
+      itemAlign: "start",
+      justify: "start",
+      className: "oui-w-full",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { size: "sm", intensity: 98, children: props.type === "tp" ? t("tpsl.takeProfit") : t("tpsl.stopLoss") }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          orderlyUi.Flex,
+          {
+            direction: "column",
+            gap: 2,
+            itemAlign: "start",
+            className: "oui-w-full oui-pt-2",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                orderlyUi.Flex,
+                {
+                  direction: "column",
+                  itemAlign: "start",
+                  className: "oui-w-full oui-gap-0.5",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { className: "oui-text-2xs oui-text-base-contrast-54", children: t("common.triggerPrice") }),
+                    /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Grid, { cols: 2, gap: 2, className: "oui-w-full oui-px-0.5", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        PriceInput,
+                        {
+                          type: `${props.type} price`,
+                          value: values.trigger_price,
+                          error: getErrorMsg(`${props.type}_trigger_price`),
+                          onValueChange: (value) => {
+                            props.onChange(`${props.type}_trigger_price`, value);
+                          },
+                          quote_dp: props.quote_dp,
+                          classNames: {
+                            root: props.inputWarnNode ? "oui-outline-warning-darken focus-within:oui-outline-warning-darken" : void 0
+                          }
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        PnlInputWidget,
+                        {
+                          type: props.type === "tp" ? "TP" : "SL",
+                          onChange: (key, value) => {
+                            props.onChange(key, value);
+                          },
+                          quote: "USDC",
+                          quote_dp: 2,
+                          values
+                        }
+                      )
+                    ] })
+                  ]
+                }
+              ),
+              props.inputWarnNode,
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                orderlyUi.Flex,
+                {
+                  direction: "column",
+                  className: orderlyUi.cn(
+                    "oui-w-full oui-gap-0.5",
+                    props.hideOrderPrice ? "oui-hidden" : ""
+                  ),
+                  itemAlign: "start",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { className: "oui-text-2xs oui-text-base-contrast-54", children: t("common.orderPrice") }),
+                    /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Grid, { cols: 2, gap: 2, className: "oui-w-full oui-px-0.5", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        PriceInput,
+                        {
+                          disabled: positionType === orderlyTypes.PositionType.FULL || values.order_type === orderlyTypes.OrderType.MARKET,
+                          type: "order price",
+                          label: values.order_type === orderlyTypes.OrderType.LIMIT ? t("common.limit") : t("common.market"),
+                          value: values.order_price,
+                          error: getErrorMsg(`${props.type}_order_price`),
+                          onValueChange: (value) => {
+                            props.onChange(`${props.type}_order_price`, value);
+                          },
+                          quote_dp: props.quote_dp
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        OrderPriceType,
+                        {
+                          disabled: positionType === orderlyTypes.PositionType.FULL || props.disableOrderTypeSelector,
+                          type: values.order_type,
+                          onChange: (value) => {
+                            props.onChange(`${props.type}_order_type`, value);
+                          }
+                        }
+                      )
+                    ] })
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          RenderROI,
+          {
+            price: values.order_type === orderlyTypes.OrderType.MARKET ? values.trigger_price : values.order_price,
+            orderType: values.order_type,
+            pnl: values.PnL,
+            roi: props.roi,
+            dp: props.quote_dp,
+            className: "oui-mt-1"
+          }
+        )
+      ]
+    }
+  );
+};
+var RenderROI = (props) => {
+  const { t } = orderlyI18n.useTranslation();
+  const { price, pnl, roi, dp, className, orderType } = props;
+  if (!roi || !price || !pnl) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { className: orderlyUi.cn("oui-text-2xs oui-text-base-contrast-36", className), children: /* @__PURE__ */ jsxRuntime.jsx(
+    orderlyI18n.Trans,
+    {
+      i18nKey: "tpsl.advanced.ROI",
+      components: [
+        /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
+          orderlyUi.Text.numeral,
+          {
+            className: "oui-px-1 oui-text-base-contrast",
+            dp,
+            suffix: /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { className: "oui-pl-0.5", children: "USDC" }),
+            children: price
+          }
+        ) }, "price"),
+        /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { className: "oui-px-1 oui-text-base-contrast", children: orderType === orderlyTypes.OrderType.MARKET ? t("common.market") : t("common.limit") }) }, "orderType"),
+        /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
+          orderlyUi.Text.numeral,
+          {
+            coloring: true,
+            className: "oui-whitespace-nowrap oui-px-1",
+            dp: 2,
+            suffix: /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { className: "oui-pl-0.5", children: "USDC" }),
+            children: pnl
+          }
+        ) }, "pnl"),
+        /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
+          orderlyUi.Text.numeral,
+          {
+            coloring: true,
+            className: "oui-whitespace-nowrap oui-px-1",
+            dp: 2,
+            suffix: "%",
+            children: roi
+          }
+        ) }, "roi")
+      ]
+    }
+  ) });
+};
+var TPSLInputRowWidget = (props) => {
+  const state = useTPSLInputRowScript(props);
+  return /* @__PURE__ */ jsxRuntime.jsx(TPSLInputRowUI, { ...state });
+};
 
-var H=e=>{let{t}=orderlyI18n.useTranslation(),{order:o,symbolLeverage:r}=e,{symbol:s}=o,i=orderlyHooks.useMarkPrice(s),n=orderlyHooks.useIndexPrice(s),a=orderlyHooks.useLeverageBySymbol(r?void 0:s),l=r||a;return jsxRuntime.jsxs(orderlyUi.Flex,{direction:"column",itemAlign:"start",className:orderlyUi.cn("oui-w-full oui-gap-3 oui-font-semibold ",e.classNames?.root),children:[jsxRuntime.jsxs(orderlyUi.Flex,{itemAlign:"center",className:orderlyUi.cn("oui-gap-2 ",e.classNames?.symbol),children:[jsxRuntime.jsxs(orderlyUi.Flex,{gap:1,itemAlign:"center",children:[jsxRuntime.jsx(orderlyUi.TokenIcon,{symbol:s,className:"oui-size-5"}),jsxRuntime.jsx(orderlyUi.Text.formatted,{className:"oui-whitespace-nowrap oui-break-normal",rule:"symbol",formatString:"base-type",size:"sm",weight:"semibold",intensity:98,children:s})]}),jsxRuntime.jsxs(orderlyUi.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:[l,"x"]})]}),jsxRuntime.jsxs(orderlyUi.Grid,{cols:2,gapX:2,gapY:1,className:orderlyUi.cn("oui-w-full oui-gap-x-2 ",e.classNames?.container),children:[jsxRuntime.jsxs(orderlyUi.Flex,{justify:"between",className:" oui-text-base-contrast-36",children:[jsxRuntime.jsx(orderlyUi.Text,{size:"2xs",children:t("tpsl.advanced.quantity")}),jsxRuntime.jsx(orderlyUi.Text.numeral,{rule:"price",className:"oui-text-base-contrast-80",size:"2xs",dp:e.baseDP??2,children:Number(o.order_quantity)})]}),jsxRuntime.jsxs(orderlyUi.Flex,{justify:"between",className:"oui-text-base-contrast-36",children:[jsxRuntime.jsx(orderlyUi.Text,{size:"2xs",children:t("tpsl.advanced.lastPrice")}),jsxRuntime.jsx(orderlyUi.Text.numeral,{rule:"price",className:"oui-text-base-contrast-80",size:"2xs",dp:e.quoteDP??2,children:n?.data})]}),jsxRuntime.jsxs(orderlyUi.Flex,{justify:"between",className:"oui-text-base-contrast-36",children:[jsxRuntime.jsx(orderlyUi.Text,{size:"2xs",children:t("tpsl.advanced.orderPrice")}),jsxRuntime.jsx(orderlyUi.Text.numeral,{rule:"price",className:"oui-text-base-contrast-80",size:"2xs",dp:e.quoteDP??2,children:Number(o.order_price)})]}),jsxRuntime.jsxs(orderlyUi.Flex,{justify:"between",className:"oui-text-base-contrast-36",children:[jsxRuntime.jsx(orderlyUi.Text,{size:"2xs",children:t("common.markPrice")}),jsxRuntime.jsx(orderlyUi.Text.numeral,{rule:"price",className:"oui-text-base-contrast-80",size:"2xs",dp:e.quoteDP??2,children:i?.data})]})]})]})};var pe=e=>{let{t}=orderlyI18n.useTranslation(),{tp_pnl:o,sl_pnl:r}=e,s=react.useMemo(()=>{let i=jsxRuntime.jsx(orderlyUi.Text,{className:"oui-text-base-contrast-36",children:"-- x"});if(o===void 0||r===void 0||orderlyUtils.checkIsNaN(o)||orderlyUtils.checkIsNaN(r))return i;let n=new orderlyUtils.Decimal(o),a=new orderlyUtils.Decimal(r);if(a.isZero()||n.isZero())return i;let l=n.div(a).abs().toNumber().toFixed(2);return jsxRuntime.jsxs(orderlyUi.Flex,{gap:1,itemAlign:"center",className:"oui-text-base-contrast-80",children:[jsxRuntime.jsx(orderlyUi.Text,{children:l}),jsxRuntime.jsx(orderlyUi.Text,{className:"oui-text-base-contrast-36",children:"x"})]})},[o,r]);return jsxRuntime.jsxs(orderlyUi.Flex,{direction:"column",itemAlign:"start",className:orderlyUi.cn("oui-w-full oui-gap-1 oui-text-2xs oui-text-base-contrast-36",e.className),children:[jsxRuntime.jsxs(orderlyUi.Flex,{justify:"between",className:"oui-w-full",children:[jsxRuntime.jsx(orderlyUi.Text,{size:"2xs",children:t("tpsl.totalEstTpPnl")}),jsxRuntime.jsx(orderlyUi.Text.numeral,{suffix:jsxRuntime.jsx(orderlyUi.Text,{className:"oui-text-base-contrast-36 oui-ml-1",children:"USDC"}),rule:"price",coloring:true,visible:true,size:"2xs",dp:2,children:o?Number(o):"--"})]}),jsxRuntime.jsxs(orderlyUi.Flex,{justify:"between",className:"oui-w-full",children:[jsxRuntime.jsx(orderlyUi.Text,{size:"2xs",children:t("tpsl.totalEstSlPnl")}),r?jsxRuntime.jsx(orderlyUi.Text.numeral,{suffix:jsxRuntime.jsx(orderlyUi.Text,{className:"oui-text-base-contrast-36 oui-ml-1",children:"USDC"}),coloring:true,visible:true,size:"2xs",dp:2,children:Number(r)}):jsxRuntime.jsx(orderlyUi.Text,{size:"2xs",children:"-- USDC"})]}),jsxRuntime.jsxs(orderlyUi.Flex,{justify:"between",className:"oui-w-full",children:[jsxRuntime.jsx(orderlyUi.Text,{size:"2xs",children:t("tpsl.riskRewardRatio")}),jsxRuntime.jsx(orderlyUi.Text,{className:"oui-text-base-contrast-80",size:"2xs",children:s})]})]})};var it=e=>({disableOrderTypeSelector:e.disableOrderTypeSelector,values:e.values,onChange:e.onChange,type:e.type,quote_dp:e.quote_dp,positionType:e.positionType,errors:e.errors,hideOrderPrice:e.hideOrderPrice,rootOrderPrice:e.rootOrderPrice,symbol:e.symbol,disableEnableCheckbox:e.disableEnableCheckbox,symbolLeverage:e.symbolLeverage,side:e.side});var kt=e=>{let{type:t,values:o}=e,[r,s]=orderlyHooks.useLocalStorage("TP/SL_Mode","Offset%"),[i,n]=react.useState(true),{t:a}=orderlyI18n.useTranslation(),l=react.useMemo(()=>{switch(r){case "Offset":return `${t.toLowerCase()}_offset`;case "Offset%":return `${t.toLowerCase()}_offset_percentage`;default:return `${t.toLowerCase()}_pnl`}},[r]),m=react.useMemo(()=>o[r],[o,r]),f=react.useMemo(()=>[{label:a("tpsl.pnl"),value:"PnL",testId:"PnL_menu_item"},{label:a("tpsl.offset"),value:"Offset",testId:"Offset_mneu_item"},{label:`${a("tpsl.offset")}%`,value:"Offset%",testId:"Offset%_menu_item"}],[a]),u=react.useRef(""),d=p=>{e.onChange(l,p);},g=p=>{let{dp:y=2}=p;return {onRenderBefore:(c,P)=>(c=`${c}`,c===""||c==="-"?"":r==="Offset%"?`${new orderlyUtils.Decimal(c.replace(new RegExp(u.current.replace(".","\\.")+"$"),"")).mul(100).todp(2,4).toString()}${u.current}`:(r==="Offset"&&(c=orderlyUtils.todpIfNeed(c,y)),`${c}`)),onSendBefore:c=>{if(/^\-?0{2,}$/.test(c))return "0";if(r==="Offset%"){if(c!==""){c=orderlyUtils.todpIfNeed(c,2);let P=c.match(/\.0{0,2}$/);P?u.current=P[0]:u.current="",c=new orderlyUtils.Decimal(c).div(100).toString(),c=`${c}${u.current}`;}}else r==="PnL"&&t==="SL"&&i||(c=orderlyUtils.todpIfNeed(c,y));return c===""||c==="-"?"":c}}};return {mode:r,modes:f,type:e.type,formatter:g,onModeChange:p=>{s(p);},value:m,pnl:o.PnL,onValueChange:d,quote_dp:e.quote_dp,setFocus:n}};var zt=e=>{let{mode:t,modes:o,onModeChange:r,onValueChange:s,quote:i,quote_dp:n,value:a,pnl:l}=e,{t:m}=orderlyI18n.useTranslation(),[f,u]=react.useState(t),[d,g]=react.useState(t==="Offset%"?"%":i),p=react.useMemo(()=>{let y=Number(l);if(isNaN(y)||y===0)return "";if(y>0)return "oui-text-trade-profit";if(y<0)return "oui-text-trade-loss"},[l]);return react.useEffect(()=>{let y=o.find(c=>c.value===t)?.label;u(y),g(t==="Offset%"?"%":i);},[t,o]),jsxRuntime.jsx(orderlyUi.Input,{prefix:f,size:{initial:"lg",lg:"md"},placeholder:d,align:"right",value:a,"data-testid":e.testId,autoComplete:"off",onValueChange:s,formatters:[e.formatter({dp:n,mode:t}),orderlyUi.inputFormatter.currencyFormatter,orderlyUi.inputFormatter.decimalPointFormatter],classNames:{input:orderlyUi.cn("oui-text-2xs",p),prefix:"oui-text-base-contrast-54 oui-text-2xs",root:"oui-outline-line-12 focus-within:oui-outline-primary-light"},onFocus:()=>{g(""),e.setFocus(true);},onBlur:()=>{g(t==="Offset%"?"%":i),e.setFocus(false);},suffix:jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[t==="Offset%"&&!!a&&jsxRuntime.jsx(orderlyUi.Text,{size:"2xs",color:"inherit",className:orderlyUi.cn("oui-ml-[2px]",p),children:"%"}),jsxRuntime.jsx(Fo,{mode:t,modes:o,onModeChange:y=>r(y.value)})]})})},Fo=e=>jsxRuntime.jsx(orderlyUi.SimpleDropdownMenu,{currentValue:e.mode,menu:e.modes,align:"end",size:"xs",className:"oui-min-w-[80px]",onSelect:t=>e.onModeChange(t),children:jsxRuntime.jsx("button",{className:"oui-p-2",children:jsxRuntime.jsx(orderlyUi.CaretDownIcon,{size:12,color:"white"})})});var Qt=e=>{let{testId:t,quote:o,...r}=e,s=kt(r);return jsxRuntime.jsx(zt,{...s,testId:t,quote:o})};var Kt=e=>{let{t}=orderlyI18n.useTranslation(),o=[{label:t("orderEntry.orderType.limitOrder"),value:orderlyTypes.OrderType.LIMIT},{label:t("orderEntry.orderType.marketOrder"),value:orderlyTypes.OrderType.MARKET}];return jsxRuntime.jsx(orderlyUi.Select.options,{value:e.type,options:o,disabled:e.disabled,onValueChange:e.onChange,size:"xs",classNames:{trigger:"oui-bg-transparent  oui-w-auto oui-outline-line-1 oui-input-root oui-bg-base-6 oui-h-10 lg:oui-h-8 oui-outline-line-12 "},valueFormatter:(r,s)=>{let i={[orderlyTypes.OrderType.LIMIT]:t("orderEntry.orderType.limit"),[orderlyTypes.OrderType.MARKET]:t("common.marketPrice")}[r];return jsxRuntime.jsx(orderlyUi.Text,{size:"2xs",children:i})}})};var lt=e=>{let[t,o]=react.useState("USDC"),{t:r}=orderlyI18n.useTranslation();return jsxRuntime.jsx(orderlyUi.Input.tooltip,{"data-testid":`oui-testid-tpsl-popUp-${e.type.toLowerCase()}-input`,prefix:e.label??r("common.markPrice"),size:{initial:"lg",lg:"md"},tooltip:e.error,placeholder:t,disabled:e.disabled,align:"right",autoComplete:"off",inputMode:"decimal",value:e.value,color:e.error?"danger":void 0,classNames:{input:"oui-text-2xs placeholder:oui-text-2xs",prefix:"oui-text-base-contrast-54 oui-text-2xs",root:"oui-w-full"},onValueChange:e.onValueChange,onFocus:()=>{o("");},onBlur:()=>{o("USDC");},formatters:[orderlyUi.inputFormatter.numberFormatter,orderlyUi.inputFormatter.dpFormatter(e.quote_dp),orderlyUi.inputFormatter.currencyFormatter,orderlyUi.inputFormatter.decimalPointFormatter]})};var at=e=>{let{t}=orderlyI18n.useTranslation(),{getErrorMsg:o}=orderlyReactApp.useOrderEntryFormErrorMsg(e.errors),{values:r,positionType:s}=e,i=orderlyHooks.useLeverageBySymbol(e.symbolLeverage?void 0:e.symbol),n=e.symbolLeverage||i,a=react.useMemo(()=>{if(!n||isNaN(Number(n)))return null;let l=null;if(!e.rootOrderPrice||!r.trigger_price&&!r.order_price)return null;let m=new orderlyUtils.Decimal(0);if(r.order_type===orderlyTypes.OrderType.MARKET){if(!r.trigger_price)return null;m=new orderlyUtils.Decimal(r.trigger_price);}else if(r.order_type===orderlyTypes.OrderType.LIMIT){if(!r.order_price)return null;m=new orderlyUtils.Decimal(r.order_price);}let f=new orderlyUtils.Decimal(e.rootOrderPrice),u=orderlyUtils.getTPSLDirection({side:e.side,type:e.type,closePrice:m.toNumber(),orderPrice:f.toNumber()});return l=m.minus(f).div(f).mul(n).abs().mul(100).mul(u).toNumber(),l},[r,e.rootOrderPrice,i,e.type,e.side]);return jsxRuntime.jsxs(orderlyUi.Flex,{direction:"column",itemAlign:"start",justify:"start",className:"oui-w-full",children:[jsxRuntime.jsxs(orderlyUi.Flex,{className:"oui-w-full",itemAlign:"center",justify:"start",children:[!e.disableEnableCheckbox&&jsxRuntime.jsx(orderlyUi.Checkbox,{"data-testid":`oui-testid-orderEntry-${e.type}-enable-checkBox`,id:`enable_${e.type}`,color:"white",checked:r.enable,onCheckedChange:l=>{e.onChange(`${e.type}_enable`,!!l);}}),jsxRuntime.jsx("label",{htmlFor:`enable_${e.type}`,className:orderlyUi.cn("oui-cursor-pointer oui-text-sm",e.disableEnableCheckbox?"oui-ml-0 oui-text-base-contrast":"oui-ml-1  oui-text-base-contrast-36"),children:e.type==="tp"?t("tpsl.advanced.TP.label"):t("tpsl.advanced.SL.label")})]}),jsxRuntime.jsxs(orderlyUi.Flex,{direction:"column",gap:2,itemAlign:"start",className:orderlyUi.cn("oui-w-full oui-pt-2",r.enable?"":"oui-hidden"),children:[jsxRuntime.jsxs(orderlyUi.Flex,{direction:"column",itemAlign:"start",className:"oui-w-full oui-gap-0.5",children:[jsxRuntime.jsx(orderlyUi.Text,{className:"oui-text-2xs oui-text-base-contrast-54",children:t("tpsl.advanced.triggerPrice")}),jsxRuntime.jsxs(orderlyUi.Grid,{cols:2,gap:2,className:"oui-w-full oui-px-0.5",children:[jsxRuntime.jsx(lt,{type:`${e.type} price`,value:r.trigger_price,error:o(`${e.type}_trigger_price`),onValueChange:l=>{e.onChange(`${e.type}_trigger_price`,l);},quote_dp:e.quote_dp}),jsxRuntime.jsx(Qt,{type:e.type==="tp"?"TP":"SL",onChange:(l,m)=>{e.onChange(l,m);},quote:"USDC",quote_dp:2,values:r})]})]}),jsxRuntime.jsxs(orderlyUi.Flex,{direction:"column",className:orderlyUi.cn("oui-w-full oui-gap-0.5",e.hideOrderPrice?"oui-hidden":""),itemAlign:"start",children:[jsxRuntime.jsx(orderlyUi.Text,{className:"oui-text-2xs oui-text-base-contrast-54",children:t("tpsl.advanced.orderPrice")}),jsxRuntime.jsxs(orderlyUi.Grid,{cols:2,gap:2,className:"oui-w-full oui-px-0.5",children:[jsxRuntime.jsx(lt,{disabled:s===orderlyTypes.PositionType.FULL||r.order_type===orderlyTypes.OrderType.MARKET,type:"order price",label:r.order_type===orderlyTypes.OrderType.LIMIT?t("tpsl.advanced.limit"):t("tpsl.advanced.market"),value:r.order_price,error:o(`${e.type}_order_price`),onValueChange:l=>{e.onChange(`${e.type}_order_price`,l);},quote_dp:e.quote_dp}),jsxRuntime.jsx(Kt,{disabled:s===orderlyTypes.PositionType.FULL||e.disableOrderTypeSelector,type:r.order_type,onChange:l=>{e.onChange(`${e.type}_order_type`,l);}})]})]})]}),jsxRuntime.jsx(jo,{price:r.order_type===orderlyTypes.OrderType.MARKET?r.trigger_price:r.order_price,orderType:r.order_type,pnl:r.PnL,roi:a,dp:e.quote_dp,className:"oui-mt-1"})]})},jo=e=>{let{t}=orderlyI18n.useTranslation(),{price:o,pnl:r,roi:s,dp:i,className:n,orderType:a}=e;return !s||!o||!r?null:jsxRuntime.jsx(orderlyUi.Text,{className:orderlyUi.cn("oui-text-2xs oui-text-base-contrast-36",n),children:jsxRuntime.jsx(orderlyI18n.Trans,{i18nKey:"tpsl.advanced.ROI",components:[jsxRuntime.jsx(react.Fragment,{children:jsxRuntime.jsx(orderlyUi.Text.numeral,{className:"oui-px-1 oui-text-base-contrast",dp:i,suffix:jsxRuntime.jsx(orderlyUi.Text,{className:"oui-pl-0.5",children:"USDC"}),children:o})},"price"),jsxRuntime.jsx(react.Fragment,{children:jsxRuntime.jsx(orderlyUi.Text,{className:"oui-px-1 oui-text-base-contrast",children:a===orderlyTypes.OrderType.MARKET?t("common.market"):t("common.limit")})},"orderType"),jsxRuntime.jsx(react.Fragment,{children:jsxRuntime.jsx(orderlyUi.Text.numeral,{coloring:true,className:"oui-whitespace-nowrap oui-px-1",dp:2,suffix:jsxRuntime.jsx(orderlyUi.Text,{className:"oui-pl-0.5",children:"USDC"}),children:r})},"pnl"),jsxRuntime.jsx(react.Fragment,{children:jsxRuntime.jsx(orderlyUi.Text.numeral,{coloring:true,className:"oui-whitespace-nowrap oui-px-1",dp:2,suffix:"%",children:s})},"roi")]})})};var $=e=>{let t=it(e);return jsxRuntime.jsx(at,{...t})};var Ht=e=>({value:e.value,onChange:e.onChange,disableSelector:e.disableSelector});var ti="position_type",Zt=e=>{let{t}=orderlyI18n.useTranslation(),o=[{label:t("tpsl.positionType.partial"),value:orderlyTypes.PositionType.PARTIAL},{label:t("tpsl.positionType.full"),value:orderlyTypes.PositionType.FULL}];return jsxRuntime.jsxs(orderlyUi.Flex,{gap:1,itemAlign:"center",justify:"start",children:[jsxRuntime.jsx(orderlyUi.Tooltip,{className:"oui-w-[280px] oui-p-3",content:e.value===orderlyTypes.PositionType.FULL?t("tpsl.positionType.full.tips"):t("tpsl.positionType.partial.tips"),children:jsxRuntime.jsx(orderlyUi.ExclamationFillIcon,{className:"oui-cursor-pointer oui-text-base-contrast-54",size:12})}),e.disableSelector?e.value===orderlyTypes.PositionType.FULL?jsxRuntime.jsx(orderlyUi.Text,{className:"oui-text-2xs oui-font-semibold oui-text-base-contrast-54",children:t("tpsl.positionType.full")}):jsxRuntime.jsx(orderlyUi.Text,{className:"oui-text-2xs oui-font-semibold oui-text-base-contrast-54",children:t("tpsl.positionType.partial")}):jsxRuntime.jsx(orderlyUi.Select.options,{value:e.value,options:o,onValueChange:r=>{e.onChange(ti,r);},size:"xs",classNames:{trigger:" oui-bg-transparent oui-border-0 oui-w-auto oui-px-0"},contentProps:{className:" oui-bg-base-8 oui-border-0"}})]})};var Y=e=>{let t=Ht(e);return jsxRuntime.jsx(Zt,{...t})};var Ue=react.memo(e=>{let{maxQty:t,base_dp:o,baseTick:r,quantity:s}=e,i=react.useRef(null),{t:n}=orderlyI18n.useTranslation(),[a,l]=react.useState(0),m=d=>{let g=d;Number(d)>t&&(g=t.toString()),r>0&&e.onQuantityChange?.(orderlyHooks.utils.formatNumber(g,r)??d);},f=d=>{l(d);let g=new orderlyUtils.Decimal(d).div(100).mul(t).toFixed(o,orderlyUtils.Decimal.ROUND_DOWN);m(g);};react.useEffect(()=>{let d=Math.min(Number(s||0),t),g=new orderlyUtils.Decimal(d).div(t).mul(100).toDecimalPlaces(2,orderlyUtils.Decimal.ROUND_DOWN).toNumber();l(g);},[s,t]);let u=e.quantity.toString().length>0?e.errorMsg:void 0;return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(orderlyUi.Flex,{gap:2,children:jsxRuntime.jsx("div",{className:"oui-flex-1",children:jsxRuntime.jsx(orderlyUi.Input.tooltip,{"data-testid":"oui-testid-tpsl-popUp-quantity-input",ref:i,prefix:n("common.quantity"),size:{initial:"md",lg:"sm"},align:"right",value:e.quantity,autoComplete:"off",inputMode:"decimal",classNames:{prefix:"oui-text-base-contrast-54",root:orderlyUi.cn("oui-bg-base-5 oui-outline-line-12",u&&"oui-outline-danger")},tooltipProps:{content:{className:"oui-bg-base-6 oui-text-base-contrast-80"},arrow:{className:"oui-fill-base-6"}},tooltip:u,color:u?"danger":void 0,formatters:[orderlyUi.inputFormatter.dpFormatter(e.base_dp),orderlyUi.inputFormatter.numberFormatter,orderlyUi.inputFormatter.currencyFormatter,orderlyUi.inputFormatter.decimalPointFormatter],onValueChange:d=>{e.onQuantityChange?.(d);let g=Number(d);if(g&&g>e.maxQty){let p=e.maxQty;e.onQuantityChange?.(p),i.current?.blur();}},onBlur:d=>m(d.target.value),suffix:jsxRuntime.jsx("span",{className:"oui-px-3 oui-text-2xs oui-text-base-contrast-54",children:e.base})})})}),jsxRuntime.jsx(orderlyUi.Flex,{mt:2,itemAlign:"center",height:"15px",children:jsxRuntime.jsx(orderlyUi.Slider,{min:0,max:100,markCount:5,showTip:true,value:[a],color:"primary",onValueChange:d=>{f(d[0]);}})}),jsxRuntime.jsxs(orderlyUi.Flex,{justify:"between",children:[jsxRuntime.jsx(orderlyUi.Text.numeral,{color:"primary",size:"2xs",suffix:"%",children:a}),jsxRuntime.jsxs(orderlyUi.Flex,{itemAlign:"center",gap:1,children:[jsxRuntime.jsx("button",{className:"oui-leading-none",style:{lineHeight:0},onClick:()=>{e.onQuantityChange?.(e.maxQty);},children:jsxRuntime.jsx(orderlyUi.Text,{color:"primary",size:"2xs",children:n("common.max")})}),jsxRuntime.jsx(orderlyUi.Text.numeral,{rule:"price",size:"2xs",intensity:54,tick:e.baseTick,children:e.maxQty})]})]})]})});var er=e=>{let{TPSL_OrderEntity:t,symbolInfo:o,onCancel:r,onComplete:s,status:i,position:n,setValues:a,onClose:l,isEditing:m}=e,{errors:f,validated:u}=e.metaState,{t:d}=orderlyI18n.useTranslation(),{isMobile:g}=orderlyUi.useScreen(),{getErrorMsg:p}=orderlyReactApp.useOrderEntryFormErrorMsg(f);if(!n)return null;let y=()=>t.position_type===orderlyTypes.PositionType.FULL?null:jsxRuntime.jsx(orderlyUi.Box,{className:"oui-px-0.5",children:jsxRuntime.jsx(Ue,{maxQty:e.maxQty,quantity:e.orderQuantity??e.maxQty,baseTick:o("base_tick"),base_dp:o("base_dp"),onQuantityChange:e.setQuantity,base:o("base"),isEditing:e.isEditing,errorMsg:u?p("quantity"):void 0})});return jsxRuntime.jsxs("div",{id:"orderly-tp_sl-order-edit-content",children:[jsxRuntime.jsx(orderlyUi.ScrollArea,{className:orderlyUi.cn(g&&"oui-h-[calc(100vh-200px)]"),children:jsxRuntime.jsxs("div",{className:"oui-px-2",children:[jsxRuntime.jsx(H,{baseDP:o("base_dp"),quoteDP:o("quote_dp"),classNames:{root:"oui-mb-3",container:"oui-gap-x-[30px]"},order:{symbol:n.symbol,order_quantity:n.position_qty.toString(),order_price:n.average_open_price.toString()},symbolLeverage:n.leverage}),jsxRuntime.jsxs(orderlyUi.Flex,{direction:"column",justify:"start",itemAlign:"start",gap:3,className:"oui-mb-3 oui-w-full",children:[!m&&jsxRuntime.jsx(Y,{disableSelector:true,value:t.position_type??orderlyTypes.PositionType.PARTIAL,onChange:(c,P)=>{e.setOrderValue(c,P);}}),t.position_type===orderlyTypes.PositionType.FULL&&jsxRuntime.jsx(orderlyUi.Text,{className:"oui-text-2xs oui-text-warning",children:d("tpsl.positionType.full.tips.market")})]}),y(),jsxRuntime.jsxs(orderlyUi.Flex,{direction:"column",itemAlign:"start",justify:"start",gap:6,className:"oui-mt-3 oui-w-full",children:[jsxRuntime.jsx($,{symbol:n.symbol,rootOrderPrice:n.average_open_price.toString(),type:"tp",side:n.position_qty>0?orderlyTypes.OrderSide.BUY:orderlyTypes.OrderSide.SELL,values:{enable:t.tp_enable??true,trigger_price:t.tp_trigger_price?.toString()??void 0,PnL:t.tp_pnl?.toString()??void 0,Offset:t.tp_offset?.toString()??void 0,"Offset%":t.tp_offset_percentage?.toString()??void 0,order_price:t.tp_order_price?.toString()??void 0,order_type:t.tp_order_type??orderlyTypes.OrderType.MARKET},hideOrderPrice:t.position_type===orderlyTypes.PositionType.FULL,errors:u?f:null,disableOrderTypeSelector:m,quote_dp:o("quote_dp"),positionType:t.position_type??orderlyTypes.PositionType.PARTIAL,onChange:(c,P)=>{e.setOrderValue(c,P);},symbolLeverage:n.leverage}),jsxRuntime.jsx($,{symbol:n.symbol,rootOrderPrice:n.average_open_price.toString(),type:"sl",side:n.position_qty>0?orderlyTypes.OrderSide.BUY:orderlyTypes.OrderSide.SELL,values:{enable:t.sl_enable??true,trigger_price:t.sl_trigger_price?.toString()??void 0,PnL:t.sl_pnl?.toString()??void 0,Offset:t.sl_offset?.toString()??void 0,"Offset%":t.sl_offset_percentage?.toString()??void 0,order_price:t.sl_order_price?.toString()??void 0,order_type:t.sl_order_type??orderlyTypes.OrderType.MARKET},hideOrderPrice:t.position_type===orderlyTypes.PositionType.FULL,errors:u?f:null,quote_dp:o("quote_dp"),positionType:t.position_type??orderlyTypes.PositionType.PARTIAL,disableOrderTypeSelector:m,onChange:(c,P)=>{e.setOrderValue(c,P);},symbolLeverage:n.leverage})]}),jsxRuntime.jsx(pe,{tp_pnl:t.tp_pnl,sl_pnl:t.sl_pnl,className:"oui-my-3"})]})}),jsxRuntime.jsxs(orderlyUi.Grid,{px:2,cols:2,gap:3,mt:4,children:[jsxRuntime.jsx(orderlyUi.Button,{size:"md",color:"secondary","data-testid":"tpsl-cancel",onClick:()=>{e.close?.();},children:d("common.cancel")}),jsxRuntime.jsx(orderlyUi.ThrottledButton,{size:"md","data-testid":"tpsl-confirm",disabled:i.isCreateMutating,loading:i.isCreateMutating||i.isUpdateMutating,onClick:()=>{e.onSubmit().then(()=>{e.close?.(),s?.();}).catch(c=>{});},children:d("common.confirm")})]})]})};var vi=e=>{let{tpPrice:t,slPrice:o}=e,{t:r}=orderlyI18n.useTranslation();return t&&o?jsxRuntime.jsx(orderlyUi.Badge,{size:"xs",color:"neutral",children:r("common.tpsl")}):t?jsxRuntime.jsx(orderlyUi.Badge,{size:"xs",color:"neutral",children:r("tpsl.tp")}):o?jsxRuntime.jsx(orderlyUi.Badge,{size:"xs",color:"neutral",children:r("tpsl.sl")}):null},Ne=e=>{let{symbol:t,tpPrice:o,slPrice:r,qty:s,maxQty:i,side:n,quoteDP:a,baseDP:l,isEditing:m,isPositionTPSL:f,orderInfo:u}=e,{t:d}=orderlyI18n.useTranslation(),[g,p]=orderlyHooks.useLocalStorage("orderly_order_confirm",true),y=()=>u.position_type===orderlyTypes.PositionType.FULL?jsxRuntime.jsx(orderlyUi.Text,{children:d("tpsl.positionType.full")}):jsxRuntime.jsx(orderlyUi.Text,{children:d("tpsl.positionType.partial")}),c=({price:N,isOrderPrice:O,isEnable:w,colorType:oe})=>w?!N&&O?jsxRuntime.jsx(orderlyUi.Text,{className:"oui-text-base-contrast-36",children:d("common.market")}):jsxRuntime.jsx(orderlyUi.Text.numeral,{unit:"USDC",rule:"price",className:orderlyUi.cn("oui-text-base-contrast",oe==="TP"?"oui-text-trade-profit":"oui-text-trade-loss"),unitClassName:"oui-text-base-contrast-36 oui-ml-1",dp:a,padding:false,children:N}):jsxRuntime.jsx(orderlyUi.Text,{className:"oui-text-base-contrast-36",children:"-- USDC"}),P=f;return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[m&&jsxRuntime.jsx(orderlyUi.Text,{as:"div",size:"2xs",intensity:80,className:"oui-mb-3",children:d("tpsl.agreement",{symbol:orderlyUtils.transSymbolformString(t)})}),jsxRuntime.jsxs(orderlyUi.Flex,{pb:4,children:[jsxRuntime.jsx(orderlyUi.Box,{grow:true,children:jsxRuntime.jsx(orderlyUi.Text.formatted,{rule:"symbol",formatString:"base-type",size:"base",showIcon:true,as:"div",intensity:80,children:t})}),jsxRuntime.jsxs(orderlyUi.Flex,{gap:1,children:[P&&jsxRuntime.jsx(orderlyUi.Badge,{size:"xs",color:"primary",children:d("common.position")}),jsxRuntime.jsx(vi,{tpPrice:o,slPrice:r}),n===orderlyTypes.OrderSide.SELL?jsxRuntime.jsx(orderlyUi.Badge,{size:"xs",color:"success",children:d("common.buy")}):jsxRuntime.jsx(orderlyUi.Badge,{size:"xs",color:"danger",children:d("common.sell")})]})]}),jsxRuntime.jsx(orderlyUi.Divider,{}),u.tp_trigger_price||u.sl_trigger_price?jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(orderlyUi.Divider,{className:"oui-my-4"}),jsxRuntime.jsxs("div",{className:orderlyUi.textVariants({size:"sm",intensity:54,className:"oui-space-y-1 oui-w-full oui-flex oui-flex-col oui-gap-3"}),children:[jsxRuntime.jsx(orderlyUi.Text,{className:"oui-text-base-contrast",children:y()}),jsxRuntime.jsxs(orderlyUi.Flex,{justify:"between",children:[jsxRuntime.jsx(orderlyUi.Text,{children:d("common.orderQty")}),jsxRuntime.jsx(orderlyUi.Text.numeral,{rule:"price",dp:l,padding:false,className:"oui-text-base-contrast",children:u.quantity??"-"})]}),jsxRuntime.jsxs(orderlyUi.Flex,{direction:"column",justify:"between",itemAlign:"start",gap:1,className:"oui-w-full",children:[jsxRuntime.jsxs(orderlyUi.Flex,{justify:"between",className:"oui-w-full",children:[jsxRuntime.jsx(orderlyUi.Text,{children:d("tpsl.tpTriggerPrice")})," ",c({price:u.tp_trigger_price??"",isOrderPrice:false,isEnable:!!u.tp_trigger_price,colorType:"TP"})]}),jsxRuntime.jsxs(orderlyUi.Flex,{justify:"between",className:"oui-w-full",children:[jsxRuntime.jsx(orderlyUi.Text,{children:d("tpsl.tpOrderPrice")}),c({price:u.tp_order_price??"",isOrderPrice:true,isEnable:!!u.tp_trigger_price,colorType:"TP"})]})]}),jsxRuntime.jsxs(orderlyUi.Flex,{direction:"column",justify:"between",itemAlign:"start",gap:1,className:"oui-w-full",children:[jsxRuntime.jsxs(orderlyUi.Flex,{justify:"between",className:"oui-w-full",children:[jsxRuntime.jsx(orderlyUi.Text,{children:d("tpsl.slTriggerPrice")}),c({price:u.sl_trigger_price??"",isOrderPrice:false,isEnable:!!u.sl_trigger_price,colorType:"SL"})]}),jsxRuntime.jsxs(orderlyUi.Flex,{justify:"between",className:"oui-w-full",children:[jsxRuntime.jsx(orderlyUi.Text,{children:d("tpsl.slOrderPrice")}),c({price:u.sl_order_price??"",isOrderPrice:true,isEnable:!!u.sl_trigger_price,colorType:"SL"})]})]})]})]}):null,jsxRuntime.jsx(orderlyUi.Box,{pt:2,children:jsxRuntime.jsxs(orderlyUi.Flex,{gap:1,children:[jsxRuntime.jsx(orderlyUi.Checkbox,{id:"disabledConfirm",color:"white",checked:!g,onCheckedChange:N=>{p(!N);}}),jsxRuntime.jsx("label",{htmlFor:"disabledConfirm",className:orderlyUi.textVariants({size:"xs",intensity:54,className:"oui-ml-1"}),children:d("orderEntry.disableOrderConfirm")})]})})]})};var mr=e=>{let{symbol:t,order:o,isEditing:r,positionType:s,triggerPrice:i,type:n,withTriggerPrice:a}=e,{t:l}=orderlyI18n.useTranslation();if(r&&!o)throw new orderlyTypes.SDKError("order is required when isEditing is true");let m=orderlyHooks.useSymbolsInfo();react.useRef(orderlyTypes.AlgoOrderRootType.TP_SL);let [{rows:u}]=orderlyHooks.usePositionStream(),[d]=orderlyHooks.useLocalStorage("orderly_order_confirm",true),g=u.find(x=>x.symbol===t);react.useEffect(()=>{g||e.close?.();},[g]);let [p,{submit:y,deleteOrder:c,setValue:P,setValues:N,validate:O,metaState:w,errors:oe,isCreateMutating:be,isUpdateMutating:ie}]=orderlyHooks.useTPSLOrder({symbol:t,position_qty:g?.position_qty??0,average_open_price:g?.average_open_price??0},{defaultOrder:o,positionType:i?orderlyTypes.PositionType.PARTIAL:s,tpslEnable:{tp_enable:a?n==="tp":true,sl_enable:a?n==="sl":true},isEditing:r}),tt=x=>{P("quantity",x);},k=(x,L)=>{P(x,L);},h=(x,L)=>{P(x,L);},wt=react.useMemo(()=>Math.abs(Number(g?.position_qty)),[g?.position_qty]);react.useMemo(()=>{let x=o?.algo_type===orderlyTypes.AlgoOrderRootType.POSITIONAL_TP_SL?wt:o?.quantity,L=0;if((Number(p.quantity)!==x||!r&&p.quantity)&&(L=1),o&&r){let{tp_trigger_price:rt,sl_trigger_price:W}=orderlyHooks.utils.findTPSLFromOrder(o),{tp_order_price:Dt,sl_order_price:Et}=orderlyHooks.utils.findTPSLOrderPriceFromOrder(o);rt!==Number(p.tp_trigger_price)&&typeof typeof p.tp_trigger_price<"u"&&(L=2),W!==Number(p.sl_trigger_price)&&typeof p.sl_trigger_price<"u"&&(L=3),typeof p.tp_order_price<"u"&&Dt!==orderlyTypes.OrderType.MARKET&&Dt!==Number(p.tp_order_price)&&(L=4),typeof p.sl_order_price<"u"&&Et!==orderlyTypes.OrderType.MARKET&&Et!==Number(p.sl_order_price)&&(L=5);}return L===1&&!p.tp_trigger_price&&!p.sl_trigger_price&&(L=-1),L},[p.tp_trigger_price,p.tp_order_price,p.sl_trigger_price,p.sl_order_price,p.quantity,o,r]);react.useEffect(()=>{a&&i&&(P(n==="tp"?"tp_trigger_price":"sl_trigger_price",i),e.qty&&P("quantity",e.qty));},[n,i,e.qty]);let lo=()=>o?.algo_order_id&&o?.symbol?c(o?.algo_order_id,o?.symbol):Promise.reject("order id or symbol is invalid"),ao=(x,L)=>{if(!d)return Promise.resolve(true);let rt=Math.abs(Number(g?.position_qty));return `${x.tp_trigger_price??""}`.length===0&&`${x.sl_trigger_price??""}`.length===0?orderlyUi.modal.confirm({title:l("orders.cancelOrder"),content:l("tpsl.cancelOrder.description"),onOk:()=>L.cancel()}).then(()=>true,()=>Promise.reject(false)):orderlyUi.modal.confirm({title:l("tpsl.confirmOrder"),onOk:async()=>{try{let W=await L.submit({accountId:g?.account_id});return W.success?W:(W.message&&orderlyUi.toast.error(W.message),!1)}catch(W){return W?.message&&orderlyUi.toast.error(W.message),false}},classNames:{body:"!oui-pb-0"},content:jsxRuntime.jsx(Ne,{isPositionTPSL:s===orderlyTypes.PositionType.FULL,isEditing:r,symbol:x.symbol,qty:Number(x.quantity),maxQty:rt,tpPrice:Number(x.tp_trigger_price),slPrice:Number(x.sl_trigger_price),side:x.side,orderInfo:x,quoteDP:m[t]("quote_dp")??2,baseDP:m[t]("base_dp")??2})}).then(()=>true,()=>Promise.reject(false))},uo=async()=>{try{if(await O())return d?ao(p,{position:g,submit:y,cancel:lo}):y({accountId:g?.account_id}).then(()=>!0).catch(L=>{throw L?.message&&orderlyUi.toast.error(L.message),!1})}catch(x){return Promise.reject(x)}};return {isEditing:r,symbolInfo:m[t],maxQty:wt,setQuantity:orderlyHooks.useMemoizedFn(tt),orderQuantity:p.quantity,TPSL_OrderEntity:p,setOrderValue:P,setPnL:h,setOrderPrice:k,onSubmit:uo,metaState:w,errors:oe,status:{isCreateMutating:be,isUpdateMutating:ie},position:g,setValues:N}};var he=e=>{let{onCancel:t,onComplete:o,...r}=e,s=mr(r);return jsxRuntime.jsx(er,{...s,onCancel:t,onComplete:o,close:r.close})},ze="TPSLSheetId",fe="TPSLDialogId";orderlyUi.registerSimpleSheet(ze,he);orderlyUi.registerSimpleDialog(fe,he,{classNames:{content:"oui-w-[420px]"}});var Hi=e=>{let{position:t,order:o,baseDP:r,quoteDP:s,buttonProps:i,isEditing:n}=e,[a]=orderlyHooks.useLocalStorage("orderly_order_confirm",true),{t:l}=orderlyI18n.useTranslation(),m=n?o?.algo_type===orderlyTypes.AlgoOrderRootType.POSITIONAL_TP_SL:void 0;return jsxRuntime.jsx(orderlyUi.Box,{onClick:()=>{orderlyUi.modal.show(fe,{order:o,symbol:t.symbol,baseDP:r,quoteDP:s,positionType:m?orderlyTypes.PositionType.FULL:orderlyTypes.PositionType.PARTIAL,isEditing:n});},className:"oui-cursor-pointer",children:e.children||jsxRuntime.jsx(orderlyUi.Button,{variant:"outlined",size:"sm",color:"secondary",...i,children:e.label})})};var Xi=e=>{let{position:t,order:o,symbolInfo:r,isEditing:s}=e,{resolve:i,hide:n,updateArgs:a}=orderlyUi.useModal(),l=s?o?.algo_type===orderlyTypes.AlgoOrderRootType.POSITIONAL_TP_SL:void 0;return jsxRuntime.jsx(jsxRuntime.Fragment,{children:jsxRuntime.jsx(he,{...e,positionType:e.positionType??(l?orderlyTypes.PositionType.FULL:orderlyTypes.PositionType.PARTIAL),onCancel:()=>{n();}})})};var br=e=>{let{t}=orderlyI18n.useTranslation(),{errors:o,validated:r}=e.metaState,{formattedOrder:s,setValue:i,symbolInfo:n,setValues:a}=e,[l,m]=react.useState({enable:true,order_type:s.tp_order_type??orderlyTypes.OrderType.MARKET,order_price:s.tp_order_price??"",trigger_price:s.tp_trigger_price??"",PnL:s.tp_pnl??"",Offset:s.tp_offset??"","Offset%":s.tp_offset_percentage??"",ROI:s.tp_ROI??""}),[f,u]=react.useState({enable:true,order_type:s.sl_order_type??orderlyTypes.OrderType.MARKET,order_price:s.sl_order_price??"",trigger_price:s.sl_trigger_price??"",PnL:s.sl_pnl??"",Offset:s.sl_offset??"","Offset%":s.sl_offset_percentage??"",ROI:s.sl_ROI??""});return react.useEffect(()=>{m(d=>({...d,enable:s.tp_enable??true,order_type:s.tp_order_type??orderlyTypes.OrderType.MARKET,order_price:s.tp_order_price??"",trigger_price:s.tp_trigger_price??"",PnL:s.tp_pnl??"",Offset:s.tp_offset??"","Offset%":s.tp_offset_percentage??"",ROI:s.tp_ROI??""}));},[s]),react.useEffect(()=>{u(d=>({...d,enable:s.sl_enable??true,order_type:s.sl_order_type??orderlyTypes.OrderType.MARKET,order_price:s.sl_order_price??"",trigger_price:s.sl_trigger_price??"",PnL:s.sl_pnl??"",Offset:s.sl_offset??"","Offset%":s.sl_offset_percentage??"",ROI:s.sl_ROI??""}));},[s]),jsxRuntime.jsxs("div",{className:"oui-rounded-[16px] oui-py-3 oui-flex oui-flex-col oui-justify-between oui-h-full",children:[jsxRuntime.jsx("div",{className:"oui-px-3",children:jsxRuntime.jsxs(orderlyUi.Flex,{className:"oui-mb-5 oui-cursor-pointer  oui-text-base oui-text-base-contrast-80",gap:1,itemAlign:"center",onClick:e.onClose,children:[jsxRuntime.jsx(os,{className:" oui-text-base-contrast-80"}),jsxRuntime.jsx(orderlyUi.Text,{children:t("tpsl.advanced.title")})]})}),jsxRuntime.jsxs(orderlyUi.ScrollArea,{className:"oui-flex-1",children:[jsxRuntime.jsx("div",{className:"oui-px-3",children:jsxRuntime.jsx(H,{order:s,baseDP:n.base_dp,quoteDP:n.quote_dp,symbolLeverage:e.symbolLeverage})}),jsxRuntime.jsx(orderlyUi.Divider,{className:"oui-my-3"}),jsxRuntime.jsxs("div",{className:"oui-px-3",children:[jsxRuntime.jsxs(orderlyUi.Flex,{className:"oui-gap-[6px]",children:[jsxRuntime.jsx(orderlyUi.Button,{onClick:()=>{i("side",orderlyTypes.OrderSide.BUY);},size:"sm",fullWidth:true,"data-type":orderlyTypes.OrderSide.BUY,className:orderlyUi.cn(s.side===orderlyTypes.OrderSide.BUY?"oui-bg-success-darken hover:oui-bg-success-darken/80 active:oui-bg-success-darken/80":"oui-bg-base-7 oui-text-base-contrast-36 hover:oui-bg-base-6 active:oui-bg-base-6"),"data-testid":"oui-testid-orderEntry-side-buy-button",children:t("common.buy")}),jsxRuntime.jsx(orderlyUi.Button,{onClick:()=>{i("side",orderlyTypes.OrderSide.SELL);},"data-type":orderlyTypes.OrderSide.SELL,fullWidth:true,size:"sm",className:orderlyUi.cn(s.side===orderlyTypes.OrderSide.SELL?"oui-bg-danger-darken hover:oui-bg-danger-darken/80 active:oui-bg-danger-darken/80":"oui-bg-base-7 oui-text-base-contrast-36 hover:oui-bg-base-6 active:oui-bg-base-6"),"data-testid":"oui-testid-orderEntry-side-sell-button",children:t("common.sell")})]}),jsxRuntime.jsxs("div",{className:"oui-py-3",children:[jsxRuntime.jsx(Y,{value:s.position_type??orderlyTypes.PositionType.PARTIAL,onChange:(d,g)=>{if(g===orderlyTypes.PositionType.FULL){a({position_type:orderlyTypes.PositionType.FULL,tp_order_type:orderlyTypes.OrderType.MARKET,tp_order_price:void 0,sl_order_type:orderlyTypes.OrderType.MARKET,sl_order_price:void 0});return}i("position_type",g);}}),s.position_type===orderlyTypes.PositionType.FULL&&jsxRuntime.jsxs(orderlyUi.Flex,{justify:"start",itemAlign:"start",gap:2,className:"oui-mt-3 oui-w-full",children:[jsxRuntime.jsx("div",{className:"oui-relative oui-top-[7px] oui-size-1 oui-rounded-full oui-bg-[#D25f00]"}),jsxRuntime.jsx(orderlyUi.Text,{className:"oui-text-2xs oui-text-[#D25f00]",children:t("tpsl.positionType.full.tips.market")})]})]}),jsxRuntime.jsxs(orderlyUi.Flex,{direction:"column",gap:6,children:[jsxRuntime.jsx($,{rootOrderPrice:s.order_price,symbol:n.symbol,type:"tp",side:s.side,values:l,errors:r?o:null,quote_dp:n.quote_dp,hideOrderPrice:s.position_type===orderlyTypes.PositionType.FULL,onChange:(d,g)=>{i(d,g);},positionType:s.position_type??orderlyTypes.PositionType.PARTIAL,symbolLeverage:e.symbolLeverage}),jsxRuntime.jsx($,{rootOrderPrice:s.order_price,symbol:n.symbol,type:"sl",side:s.side,values:f,hideOrderPrice:s.position_type===orderlyTypes.PositionType.FULL,errors:r?o:null,quote_dp:n.quote_dp,positionType:s.position_type??orderlyTypes.PositionType.PARTIAL,onChange:(d,g)=>{i(d,g);},symbolLeverage:e.symbolLeverage})]}),jsxRuntime.jsx(pe,{tp_pnl:s.tp_pnl,sl_pnl:s.sl_pnl,className:"oui-mt-6"})]})]}),jsxRuntime.jsxs(orderlyUi.Flex,{className:"oui-mt-6 oui-px-3",gap:2,children:[jsxRuntime.jsx(orderlyUi.Button,{size:"md",fullWidth:true,color:"gray",variant:"outlined",className:"oui-text-base-contrast-36",onClick:e.onClose,children:t("common.cancel")}),jsxRuntime.jsx(orderlyUi.Button,{size:"md",fullWidth:true,color:"success",className:orderlyUi.cn(s.side===orderlyTypes.OrderSide.SELL?"oui-bg-danger-darken hover:oui-bg-danger-darken/80 active:oui-bg-danger-darken/80":"oui-bg-success-darken hover:oui-bg-success-darken/80 active:oui-bg-success-darken/80"),onClick:e.onSubmit,children:t("tpsl.advanced.submit")})]})]})},os=e=>jsxRuntime.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"14",viewBox:"0 0 14 14",fill:"currentColor",...e,children:jsxRuntime.jsx("path",{d:"M8.03752 2.9294C7.89169 2.95857 7.74527 3.03207 7.65661 3.16624L5.33145 6.66624C5.20137 6.86224 5.20137 7.12648 5.33145 7.32248L7.65661 10.8225C7.83452 11.0902 8.20669 11.1655 8.47385 10.9864C8.74044 10.8079 8.8151 10.434 8.63719 10.1662L6.53019 6.99408L8.63719 3.82249C8.8151 3.55416 8.74044 3.18082 8.47385 3.00232C8.34027 2.91249 8.18335 2.89965 8.03752 2.9294Z"})});var Sr=(e,t)=>{if(e.tp_trigger_price||e.sl_trigger_price){if(t==="tp")return !!e.tp_trigger_price;if(t==="sl")return !!e.sl_trigger_price}return  true},Or=e=>{let{order:t,setOrderValue:o,onClose:r}=e,[s,i]=react.useState(null),{formattedOrder:n,setValue:a,setValues:l,helper:m,symbolInfo:f,metaState:u,...d}=orderlyHooks.useOrderEntry(t.symbol,{initialOrder:{symbol:t.symbol,order_type:t.order_type,side:t.side,order_price:t.order_price,order_quantity:t.order_quantity,position_type:t.position_type??orderlyTypes.PositionType.PARTIAL,trigger_price:t.trigger_price,tp_enable:Sr(t,"tp"),sl_enable:Sr(t,"sl"),tp_trigger_price:t.tp_trigger_price,sl_trigger_price:t.sl_trigger_price,tp_order_price:t.tp_order_price,sl_order_price:t.sl_order_price,tp_order_type:t.tp_order_type,sl_order_type:t.sl_order_type,sl_pnl:t.sl_pnl,sl_offset:t.sl_offset,sl_offset_percentage:t.sl_offset_percentage,tp_pnl:t.tp_pnl,tp_offset:t.tp_offset,tp_offset_percentage:t.tp_offset_percentage}});return {order:t,formattedOrder:n,symbolInfo:f,setValue:a,setValues:l,onSubmit:()=>{m.validate().then(()=>{e.onSubmit(n);}).catch(p=>{});},onClose:r,metaState:u,symbolLeverage:e.symbolLeverage}};var Ir=e=>{let t=Or({order:e.order,setOrderValue:e.setOrderValue,onSubmit:e.onSubmit,onClose:e.onClose,symbolLeverage:e.symbolLeverage});return jsxRuntime.jsx(br,{...t})},ds="TPSLAdvancedSheetId",us="TPSLAdvancedDialogId";orderlyUi.registerSimpleSheet(ds,Ir,{title:()=>orderlyI18n.i18n.t("common.settings")});orderlyUi.registerSimpleDialog(us,Ir,{title:()=>orderlyI18n.i18n.t("common.settings")});var Nr=e=>{let{position:t}=e,o=t.symbol,r=orderlyHooks.useSymbolsInfo()[o],{isMobile:s}=orderlyUi.useScreen(),{t:i}=orderlyI18n.useTranslation(),[n,a]=react.useState([]),[l,m]=react.useState([]),[f,{cancelAlgoOrder:u,cancelPostionOrdersByTypes:d,refresh:g}]=orderlyHooks.useOrderStream({symbol:t.symbol,status:orderlyTypes.OrderStatus.INCOMPLETE,includes:[orderlyTypes.AlgoOrderRootType.POSITIONAL_TP_SL,orderlyTypes.AlgoOrderRootType.TP_SL],size:500},{keeplive:true}),p=async O=>await u(O.algo_order_id,O.symbol),y=async()=>await d(o,[orderlyTypes.AlgoOrderRootType.TP_SL]),c=({order:O,positionType:w,isEditing:oe})=>{let be=s?ze:fe;orderlyUi.modal.show(be,{order:O,symbol:t.symbol,positionType:w,isEditing:oe});},P=(O,w)=>{c({order:O,positionType:w,isEditing:true});},N=O=>{c({positionType:O,isEditing:false});};return react.useEffect(()=>{if(f){let{fullPositionOrder:O,partialPositionOrders:w}=orderlyHooks.findPositionTPSLFromOrders(f,o);a(O?[O]:[]),m(w??[]);}},[f,o]),{symbolInfo:r,position:t,symbol:o,fullPositionOrders:n,partialPositionOrders:l,cancelPostionOrdersByTypes:d,onCancelOrder:p,onCancelAllTPSLOrders:y,editTPSLOrder:P,addTPSLOrder:N}};var hr=react.createContext({}),Cr=e=>{let t=orderlyHooks.useSymbolsInfo()[e.symbol];return jsxRuntime.jsx(hr.Provider,{value:{base_dp:t("base_dp"),quote_dp:t("quote_dp"),position:e.position},children:e.children})},X=()=>react.useContext(hr);var C=e=>jsxRuntime.jsx(orderlyUi.Flex,{direction:"column",justify:"center",itemAlign:"start",className:"oui-text-2xs oui-h-[36px]",children:e.children});var gt=({order:e})=>{let{position:t,base_dp:o,quote_dp:r}=X(),{tp_trigger_price:s,sl_trigger_price:i}=orderlyHooks.findTPSLFromOrder(e),n,a,l=new orderlyUtils.Decimal(e.quantity).eq(0)?t.position_qty:e.quantity,m=t.position_qty>0?orderlyTypes.OrderSide.BUY:orderlyTypes.OrderSide.SELL,f=t?.average_open_price;if(s){let u=orderlyUtils.getTPSLDirection({side:m,type:"tp",closePrice:s,orderPrice:f});n=new orderlyUtils.Decimal(orderlyPerp.positions.unrealizedPnL({qty:l,openPrice:f,markPrice:s})).abs().mul(u).toNumber();}if(i){let u=orderlyUtils.getTPSLDirection({side:m,type:"sl",closePrice:i,orderPrice:f});a=new orderlyUtils.Decimal(orderlyPerp.positions.unrealizedPnL({qty:l,openPrice:f,markPrice:i})).abs().mul(u).toNumber();}return jsxRuntime.jsxs(orderlyUi.Flex,{gap:2,direction:"column",justify:"between",itemAlign:"start",className:"oui-text-2xs",children:[n&&jsxRuntime.jsx(C,{children:jsxRuntime.jsx(orderlyUi.Text.numeral,{dp:2,rm:orderlyUtils.Decimal.ROUND_DOWN,coloring:true,padding:false,children:n})}),a&&jsxRuntime.jsx(C,{children:jsxRuntime.jsx(orderlyUi.Text.numeral,{dp:2,rm:orderlyUtils.Decimal.ROUND_DOWN,coloring:true,padding:false,children:a})})]})};var ft=({order:e})=>{let{quote_dp:t}=X(),{tp_order_price:o,sl_order_price:r}=orderlyHooks.findTPSLOrderPriceFromOrder(e),{t:s}=orderlyI18n.useTranslation();return jsxRuntime.jsxs(orderlyUi.Flex,{gap:2,direction:"column",justify:"between",itemAlign:"start",className:"oui-text-2xs",children:[o&&jsxRuntime.jsx(C,{children:o===orderlyTypes.OrderType.MARKET?jsxRuntime.jsx(orderlyUi.Text,{children:s("common.market")}):jsxRuntime.jsx(orderlyUi.Text.numeral,{dp:t,rm:orderlyUtils.Decimal.ROUND_DOWN,padding:false,children:o})}),r&&jsxRuntime.jsx(C,{children:r===orderlyTypes.OrderType.MARKET?jsxRuntime.jsx(orderlyUi.Text,{children:s("common.market")}):jsxRuntime.jsx(orderlyUi.Text.numeral,{dp:t,rm:orderlyUtils.Decimal.ROUND_DOWN,padding:false,children:r})})]})};var yt=({order:e})=>{let{position:t,base_dp:o}=X(),{tp_trigger_price:r,sl_trigger_price:s}=orderlyHooks.findTPSLFromOrder(e),i=react.useMemo(()=>e.quantity===0?-t.position_qty:t.position_qty>0?-e.quantity:e.quantity,[e.quantity,t.position_qty]);return jsxRuntime.jsxs(orderlyUi.Flex,{direction:"column",justify:"start",itemAlign:"start",className:"oui-h-full oui-text-2xs",children:[jsxRuntime.jsx(C,{children:jsxRuntime.jsx(orderlyUi.Text.numeral,{dp:o,rm:orderlyUtils.Decimal.ROUND_DOWN,padding:false,children:i})}),r&&s&&jsxRuntime.jsx(C,{children:jsxRuntime.jsx("div",{})})]})};var Tt=({order:e})=>{let{quote_dp:t}=X(),{tp_trigger_price:o,sl_trigger_price:r}=orderlyHooks.findTPSLFromOrder(e),{t:s}=orderlyI18n.useTranslation();return jsxRuntime.jsxs(orderlyUi.Flex,{gap:1,direction:"column",justify:"between",itemAlign:"start",className:"oui-text-2xs",children:[o&&jsxRuntime.jsx(C,{children:jsxRuntime.jsxs(orderlyUi.Flex,{direction:"column",justify:"start",itemAlign:"start",children:[jsxRuntime.jsx(orderlyUi.Text,{className:"oui-text-base-contrast-36",children:s("common.market")}),jsxRuntime.jsx(orderlyUi.Text.numeral,{dp:t,rm:orderlyUtils.Decimal.ROUND_DOWN,padding:false,children:o})]})}),r&&jsxRuntime.jsx(C,{children:jsxRuntime.jsxs(orderlyUi.Flex,{direction:"column",justify:"start",itemAlign:"start",children:[jsxRuntime.jsx(orderlyUi.Text,{className:"oui-text-base-contrast-36",children:s("common.market")}),jsxRuntime.jsx(orderlyUi.Text.numeral,{dp:t,rm:orderlyUtils.Decimal.ROUND_DOWN,padding:false,children:r})]})})]})};var xt=({order:e})=>{let{tp_trigger_price:t,sl_trigger_price:o}=orderlyHooks.findTPSLFromOrder(e),{t:r}=orderlyI18n.useTranslation();return jsxRuntime.jsxs(orderlyUi.Flex,{direction:"column",justify:"between",itemAlign:"start",className:"oui-text-2xs",children:[t&&jsxRuntime.jsx(C,{children:jsxRuntime.jsx(orderlyUi.Text,{className:"oui-text-trade-profit",children:r("tpsl.tp")})}),o&&jsxRuntime.jsx(C,{children:jsxRuntime.jsx(orderlyUi.Text,{className:"oui-text-trade-loss",children:r("tpsl.sl")})})]})};var He=e=>{let{t}=orderlyI18n.useTranslation(),{isMobile:o}=orderlyUi.useScreen(),{onCancelOrder:r}=e;return react.useMemo(()=>{let i=[{title:t("tpsl.tpslDetail.qty"),dataIndex:"quantity",width:70,className:"oui-py-2",render:(a,l)=>jsxRuntime.jsx(yt,{order:l})},{title:t("tpsl.tpslDetail.type"),dataIndex:"type",width:35,className:"oui-pl-1 oui-py-2",render:(a,l)=>jsxRuntime.jsx(xt,{order:l})},{title:t("tpsl.tpslDetail.trigger"),dataIndex:"trigger",width:70,className:"oui-pl-1 oui-py-2",render:(a,l)=>jsxRuntime.jsx(Tt,{order:l})},{title:t("tpsl.tpslDetail.price"),dataIndex:"price",width:70,className:"oui-py-2",render:(a,l)=>jsxRuntime.jsx(ft,{order:l})},{title:jsxRuntime.jsx(orderlyUi.Tooltip,{className:"oui-max-w-[280px] oui-bg-base-8 oui-p-3 oui-text-2xs oui-text-base-contrast",content:t("tpsl.tpslDetail.estPnl.tooltip"),children:jsxRuntime.jsx(orderlyUi.Text,{className:"oui-underline oui-decoration-dashed oui-underline-offset-2",children:t("tpsl.tpslDetail.estPnl")})}),dataIndex:"estpnl",width:70,className:"!oui-pr-0 oui-py-2",render:(a,l)=>jsxRuntime.jsx(gt,{order:l})}],n=[{title:t("tpsl.tpslDetail.qty"),dataIndex:"quantity",width:70,className:orderlyUi.cn(" oui-py-2 !oui-pl-5"),render:(a,l)=>jsxRuntime.jsx(yt,{order:l})},{title:t("tpsl.tpslDetail.type"),dataIndex:"type",width:35,className:"oui-pl-1 oui-py-2",render:(a,l)=>jsxRuntime.jsx(xt,{order:l})},{title:t("tpsl.tpslDetail.trigger"),dataIndex:"trigger",width:70,className:"oui-pl-1 oui-py-2",render:(a,l)=>jsxRuntime.jsx(Tt,{order:l})},{title:t("tpsl.tpslDetail.price"),dataIndex:"price",width:70,className:"oui-pl-1 oui-py-2",render:(a,l)=>jsxRuntime.jsx(ft,{order:l})},{title:jsxRuntime.jsx(orderlyUi.Tooltip,{className:"oui-max-w-[280px] oui-bg-base-8 oui-p-3 oui-text-2xs oui-text-base-contrast",content:t("tpsl.tpslDetail.estPnl.tooltip"),children:jsxRuntime.jsx(orderlyUi.Text,{className:"oui-underline oui-decoration-dashed oui-underline-offset-2",children:t("tpsl.tpslDetail.estPnl")})}),dataIndex:"estpnl",width:70,className:"oui-pl-1 oui-py-2",render:(a,l)=>jsxRuntime.jsx(gt,{order:l})},{title:"",dataIndex:"delete",width:50,className:orderlyUi.cn("oui-py-2 !oui-pr-5"),render:(a,l)=>jsxRuntime.jsx(Xs,{order:l,onCancelOrder:r})}];return o?i:n},[t,o])};var Zs=e=>{let{size:t=18}=e;return jsxRuntime.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:t,height:t,viewBox:"0 0 18 18",fill:"currentColor",...e,children:jsxRuntime.jsx("path",{d:"M5.48081 15.375C5.10681 15.375 4.78731 15.2426 4.52231 14.9777C4.25744 14.7127 4.125 14.3932 4.125 14.0192V4.50004H3.375V3.37505H6.75V2.71167H11.25V3.37505H14.625V4.50004H13.875V14.0192C13.875 14.3981 13.7438 14.7188 13.4813 14.9813C13.2188 15.2438 12.8981 15.375 12.5192 15.375H5.48081ZM12.75 4.50004H5.25V14.0192C5.25 14.0866 5.27162 14.1419 5.31487 14.1852C5.35812 14.2284 5.41344 14.25 5.48081 14.25H12.5192C12.5769 14.25 12.6298 14.226 12.6778 14.1779C12.7259 14.1299 12.75 14.077 12.75 14.0192V4.50004ZM7.053 12.75H8.17781V6.00004H7.053V12.75ZM9.82219 12.75H10.947V6.00004H9.82219V12.75Z"})})},Xs=e=>{let[t,o]=react.useState(false);return jsxRuntime.jsx(orderlyUi.ThrottledButton,{size:"sm",loading:t,variant:"text",color:"gray",onClick:r=>{r.stopPropagation(),o(true),e.onCancelOrder?.(e.order).then(()=>{},s=>{orderlyUi.toast.error(s.message);}).finally(()=>{o(false);});},children:jsxRuntime.jsx(Zs,{className:"oui-text-base-contrast-54 hover:oui-text-base-contrast oui-cursor-pointer"})})};var St=e=>{let{orders:t}=e,o=He({onCancelOrder:e.onCancelOrder});return jsxRuntime.jsx(orderlyUiConnector.AuthGuardDataTable,{columns:o,dataSource:t,className:"oui-bg-transparent oui-text-2xs",bordered:true,classNames:{root:orderlyUi.cn(e.className),header:"!oui-bg-base-8",scroll:orderlyUi.cn(!t||t.length===0?"!oui-min-h-[170px]":"!oui-min-h-[100px]")},onRow:r=>({className:orderlyUi.cn("oui-h-[53px] oui-cursor-svg-edit !oui-border-none !oui-p-0"),onClick:()=>{e.editTPSLOrder(r);}})})};var Ot=e=>{let{t}=orderlyI18n.useTranslation(),{orders:o}=e,r=He({onCancelOrder:()=>Promise.resolve()}),s=react.useMemo(()=>o.reduce((i,n)=>(i[n.algo_order_id]=true,i),{}),[o]);return jsxRuntime.jsx(orderlyUiConnector.AuthGuardDataTable,{columns:r,dataSource:o,expanded:s,bordered:true,getRowCanExpand:()=>true,expandRowRender:i=>jsxRuntime.jsxs(orderlyUi.Flex,{gap:2,justify:"end",children:[jsxRuntime.jsx(orderlyUi.Button,{variant:"outlined",size:"sm",color:"gray",className:"oui-h-6 oui-text-2xs oui-text-base-contrast-54",onClick:()=>e.editTPSLOrder(i.original),children:t("common.edit")}),jsxRuntime.jsx(dn,{order:i.original,onCancelOrder:e.canCancelOrder})]}),className:"oui-bg-transparent oui-px-2 oui-text-2xs",classNames:{scroll:orderlyUi.cn(!o||o.length===0?"!oui-min-h-[170px]":"!oui-min-h-[100px]")},onRow:()=>({className:orderlyUi.cn("oui-h-[53px] oui-cursor-svg-edit !oui-border-none !oui-p-0")}),generatedRowKey:i=>i.algo_order_id})},dn=e=>{let[t,o]=react.useState(false),{t:r}=orderlyI18n.useTranslation();return jsxRuntime.jsx(orderlyUi.ThrottledButton,{className:"oui-h-6 oui-text-2xs oui-text-base-contrast-54",size:"sm",loading:t,variant:"outlined",color:"gray",onClick:s=>{s.stopPropagation(),o(true),e.onCancelOrder?.(e.order).then(()=>{},i=>{orderlyUi.toast.error(i.message);}).finally(()=>{o(false);});},children:r("common.delete")})};var Kr=e=>{let{isMobile:t}=orderlyUi.useScreen(),{position:o,fullPositionOrders:r,partialPositionOrders:s,onCancelOrder:i,onCancelAllTPSLOrders:n,editTPSLOrder:a,addTPSLOrder:l,symbolInfo:m}=e;return jsxRuntime.jsx(orderlyUi.Box,{children:jsxRuntime.jsxs(orderlyUi.ScrollArea,{className:orderlyUi.cn(t&&"oui-h-[calc(100vh-100px)]"),children:[jsxRuntime.jsx(H,{order:{symbol:o.symbol,order_quantity:o.position_qty.toString(),order_price:o.average_open_price.toString()},symbolLeverage:o.leverage,baseDP:m("base_dp"),quoteDP:m("quote_dp"),classNames:{root:orderlyUi.cn("oui-mb-6 oui-gap-3 oui-px-5"),container:"oui-gap-x-[30px]"}}),jsxRuntime.jsx(yn,{position:o,orders:r,onCancelOrder:i,onCancelAllTPSLOrders:n,editTPSLOrder:a,addTPSLOrder:l}),jsxRuntime.jsx(Pn,{position:o,orders:s,onCancelOrder:i,onCancelAllTPSLOrders:n,editTPSLOrder:a,addTPSLOrder:l})]})})},yn=e=>{let[t,o]=react.useState(true),{orders:r}=e,{isMobile:s}=orderlyUi.useScreen();return jsxRuntime.jsxs(orderlyUi.Box,{className:"oui-mt-6",children:[jsxRuntime.jsxs(orderlyUi.Box,{className:orderlyUi.cn("oui-flex oui-items-center oui-justify-between oui-px-5"),children:[jsxRuntime.jsx(Gr,{positionType:orderlyTypes.PositionType.FULL,open:t,onOpenChange:o}),r&&r.length===0&&jsxRuntime.jsx(orderlyUi.Flex,{gap:2,children:jsxRuntime.jsx($r,{positionType:orderlyTypes.PositionType.FULL,position:e.position,addTPSLOrder:e.addTPSLOrder})})]}),jsxRuntime.jsx(orderlyUi.Box,{className:orderlyUi.cn("oui-overflow-hidden oui-transition-[height] oui-duration-150",t?"oui-h-auto":"oui-h-0 oui-pb-4"),children:s?jsxRuntime.jsx(Ot,{orders:r,editTPSLOrder:i=>e.editTPSLOrder(i,orderlyTypes.PositionType.FULL),canCancelOrder:e.onCancelOrder}):jsxRuntime.jsx(St,{orders:r,editTPSLOrder:i=>{e.editTPSLOrder(i,orderlyTypes.PositionType.FULL);},onCancelOrder:e.onCancelOrder})})]})},Pn=e=>{let[t,o]=react.useState(true),{orders:r}=e,{isMobile:s}=orderlyUi.useScreen();return jsxRuntime.jsxs(orderlyUi.Box,{className:"oui-pt-6",children:[jsxRuntime.jsxs(orderlyUi.Box,{className:orderlyUi.cn("oui-flex oui-items-center oui-justify-between","oui-px-5",s?"oui-flex-col oui-items-start oui-justify-start oui-gap-[11px]":"oui-flex-row oui-items-center oui-justify-between"),children:[jsxRuntime.jsx(Gr,{positionType:orderlyTypes.PositionType.PARTIAL,open:t,onOpenChange:o}),jsxRuntime.jsxs(orderlyUi.Flex,{gap:2,children:[jsxRuntime.jsx($r,{positionType:orderlyTypes.PositionType.PARTIAL,position:e.position,addTPSLOrder:e.addTPSLOrder}),r&&r.length>0&&jsxRuntime.jsx(_n,{canCancelAll:r&&r.length>0,onCancelAllTPSLOrders:e.onCancelAllTPSLOrders})]})]}),jsxRuntime.jsx(orderlyUi.Box,{className:orderlyUi.cn("oui-overflow-hidden oui-transition-[height] oui-duration-150",t?"oui-h-auto":"oui-h-0 oui-pb-4"),children:s?jsxRuntime.jsx(Ot,{orders:r,editTPSLOrder:i=>e.editTPSLOrder(i,orderlyTypes.PositionType.PARTIAL),canCancelOrder:e.onCancelOrder}):jsxRuntime.jsx(St,{className:"oui-h-[300px]",orders:r,editTPSLOrder:i=>{e.editTPSLOrder(i,orderlyTypes.PositionType.PARTIAL);},onCancelOrder:e.onCancelOrder})})]})},Gr=e=>{let{t}=orderlyI18n.useTranslation();return jsxRuntime.jsxs(orderlyUi.Flex,{gap:1,itemAlign:"center",justify:"start",className:"oui-text-2xs",children:[jsxRuntime.jsxs(orderlyUi.Flex,{itemAlign:"center",justify:"start",gap:1,className:"oui-cursor-pointer",onClick:()=>e.onOpenChange(!e.open),children:[jsxRuntime.jsx(orderlyUi.ChevronDownIcon,{size:12,color:"white",className:orderlyUi.cn("oui-cursor-pointer oui-transition-transform",e.open&&"oui-rotate-180")}),e.positionType===orderlyTypes.PositionType.FULL?jsxRuntime.jsx(orderlyUi.Text,{children:t("tpsl.positionType.full")}):jsxRuntime.jsx(orderlyUi.Text,{children:t("tpsl.positionType.partial")})]}),jsxRuntime.jsx(orderlyUi.Tooltip,{className:"oui-w-[280px] oui-p-3",content:e.positionType===orderlyTypes.PositionType.FULL?t("tpsl.positionType.full.tips"):t("tpsl.positionType.partial.tips"),children:jsxRuntime.jsx(orderlyUi.ExclamationFillIcon,{className:"oui-cursor-pointer oui-text-base-contrast-54",size:12})})]})},$r=e=>{let{t}=orderlyI18n.useTranslation();return jsxRuntime.jsx(orderlyUi.ThrottledButton,{variant:"outlined",size:"sm",color:"gray",className:"oui-h-6 oui-w-[94px] oui-text-2xs",onClick:()=>{e.addTPSLOrder(e.positionType);},children:t("tpsl.add")})},_n=e=>{let[t,o]=react.useState(false),{t:r}=orderlyI18n.useTranslation();return jsxRuntime.jsx(orderlyUi.ThrottledButton,{loading:t,variant:"outlined",disabled:!e.canCancelAll,size:"sm",color:"gray",className:"oui-h-6  oui-w-[94px] oui-text-2xs disabled:oui-border-base-contrast-16 disabled:oui-bg-transparent disabled:oui-text-base-contrast-20",onClick:()=>{o(true),e.onCancelAllTPSLOrders().then(()=>{},s=>{orderlyUi.toast.error(s.message);}).finally(()=>{o(false);});},children:r("tpsl.cancelAll")})};var Hr=e=>{let t=Nr(e);return jsxRuntime.jsx(Cr,{symbol:e.position.symbol,position:e.position,children:jsxRuntime.jsx(Kr,{...t})})},bn="TPSLDetailDialogId ",Sn="TPSLDetailSheetId";orderlyUi.registerSimpleDialog(bn,Hr,{classNames:{content:"oui-w-[420px] lg:oui-pt-4 lg:oui-pb-2 !oui-px-0",body:"lg:oui-py-0"}});orderlyUi.registerSimpleSheet(Sn,Hr,{classNames:{content:"!oui-p-0"}});var ht=e=>{let {type:t,triggerPrice:o,symbol:r}=e,s=orderlyHooks.useSymbolsInfo(),[{rows:i},n]=orderlyHooks.usePositionStream(r),a=i?.[0];react.useRef(orderlyTypes.AlgoOrderRootType.TP_SL);let [m]=orderlyHooks.useLocalStorage("orderly_order_confirm",true),{t:f}=orderlyI18n.useTranslation(),[u,{submit:d,deleteOrder:g,setValue:p,setValues:y,validate:c,errors:P,isCreateMutating:N,isUpdateMutating:O}]=orderlyHooks.useTPSLOrder({symbol:r,position_qty:a?.position_qty,average_open_price:a?.average_open_price},{defaultOrder:void 0,positionType:orderlyTypes.PositionType.PARTIAL,tpslEnable:{tp_enable:t==="tp",sl_enable:t==="sl"},isEditing:false}),w=k=>{p("quantity",k);},oe=(k,h)=>{p(k,h);},be=(k,h)=>{p(k,h);},ie=react.useMemo(()=>Math.abs(Number(a.position_qty)),[a.position_qty]);react.useEffect(()=>{ie&&(p("quantity",ie),p(t==="tp"?"tp_trigger_price":"sl_trigger_price",o??""));},[t,o,ie]);let tt=async()=>{try{if(await c())return m?orderlyUi.modal.confirm({title:f("tpsl.confirmOrder"),onOk:async()=>{try{let h=await d({accountId:a.account_id});return h.success?h:(h.message&&orderlyUi.toast.error(h.message),!1)}catch(h){return h?.message&&orderlyUi.toast.error(h.message),!1}},classNames:{body:"!oui-pb-0"},content:jsxRuntime.jsx(Ne,{isPositionTPSL:!1,isEditing:!1,symbol:r,qty:Number(u.quantity),maxQty:ie,tpPrice:Number(u.tp_trigger_price),slPrice:Number(u.sl_trigger_price),side:u.side,orderInfo:u,quoteDP:s[r]("quote_dp"),baseDP:s[r]("base_dp")})}).then(()=>!0,()=>Promise.reject(!1)):d({accountId:a.account_id}).then(()=>!0).catch(h=>{throw h?.message&&orderlyUi.toast.error(h.message),!1})}catch(k){return Promise.reject(k)}};return {symbolInfo:s[r],maxQty:ie,setQuantity:orderlyHooks.useMemoizedFn(w),orderQuantity:u.quantity,isPosition:false,TPSL_OrderEntity:u,setOrderValue:p,setPnL:be,setOrderPrice:oe,onSubmit:tt,errors:P,status:{isCreateMutating:N,isUpdateMutating:O},position:a,setValues:y,type:t,triggerPrice:o}};var Ct=e=>{let{type:t,triggerPrice:o,errors:r,TPSL_OrderEntity:s}=e,{t:i}=orderlyI18n.useTranslation(),{getErrorMsg:n}=orderlyReactApp.useOrderEntryFormErrorMsg(r),a=jsxRuntime.jsxs(orderlyUi.Flex,{width:"100%",itemAlign:"center",gap:3,mt:4,children:[jsxRuntime.jsx(orderlyUi.Button,{color:"gray",onClick:()=>{e.onComplete?.(),e.close?.();},fullWidth:true,className:"oui-text-sm",size:"md",children:i("common.cancel")},"secondary"),jsxRuntime.jsx(orderlyUi.Button,{onClick:()=>{e.onSubmit().then(()=>{e.onComplete?.(),e.close?.();});},fullWidth:true,className:"oui-text-sm",size:"md",children:i("common.confirm")},"primary")]}),l=()=>{let f=n("tp_trigger_price"),u=n("sl_trigger_price"),d="";return f&&t==="tp"&&(d=f),u&&t==="sl"&&(d=u),d?jsxRuntime.jsxs(orderlyUi.Flex,{justify:"start",itemAlign:"start",gap:2,className:"oui-mt-2 oui-w-full",children:[jsxRuntime.jsx("div",{className:"oui-relative oui-top-[7px] oui-size-1 oui-rounded-full oui-bg-danger"}),jsxRuntime.jsx(orderlyUi.Text,{className:"oui-text-danger",children:d})]}):null},m=()=>{let{tp_pnl:f,sl_pnl:u}=s;return t==="sl"?jsxRuntime.jsxs(orderlyUi.Flex,{justify:"between",className:"oui-w-full",children:[jsxRuntime.jsx(orderlyUi.Text,{size:"2xs",children:i("tpsl.totalEstSlPnl")}),u?jsxRuntime.jsx(orderlyUi.Text.numeral,{suffix:jsxRuntime.jsx(orderlyUi.Text,{className:"oui-ml-1 oui-text-base-contrast-36",children:"USDC"}),coloring:true,visible:true,size:"2xs",dp:2,children:Number(u)}):jsxRuntime.jsx(orderlyUi.Text,{size:"2xs",children:"-- USDC"})]}):jsxRuntime.jsxs(orderlyUi.Flex,{justify:"between",className:"oui-w-full",children:[jsxRuntime.jsx(orderlyUi.Text,{size:"2xs",children:i("tpsl.totalEstTpPnl")}),jsxRuntime.jsx(orderlyUi.Text.numeral,{suffix:jsxRuntime.jsx(orderlyUi.Text,{className:"oui-text-base-contrast-36 oui-ml-1",children:"USDC"}),rule:"price",coloring:true,visible:true,size:"2xs",dp:2,children:f?Number(f):"--"})]})};return jsxRuntime.jsxs(orderlyUi.Box,{className:"oui-w-full oui-px-0.5",children:[jsxRuntime.jsx(Ue,{maxQty:e.maxQty,quantity:Number(e.orderQuantity??e.maxQty),baseTick:e.symbolInfo("base_tick"),base_dp:e.symbolInfo("base_dp"),base:e.symbolInfo("base"),isEditing:false,errorMsg:n("quantity"),onQuantityChange:e.setQuantity}),jsxRuntime.jsxs(orderlyUi.Flex,{direction:"column",itemAlign:"start",className:orderlyUi.cn("oui-mt-4 oui-w-full oui-gap-1 oui-text-xs oui-text-base-contrast-36"),children:[jsxRuntime.jsxs(orderlyUi.Flex,{justify:"between",className:"oui-w-full",children:[jsxRuntime.jsx(orderlyUi.Text,{size:"xs",children:i("tpsl.advanced.triggerPrice")}),jsxRuntime.jsx(orderlyUi.Text.numeral,{className:"oui-text-base-contrast",suffix:jsxRuntime.jsx(orderlyUi.Text,{className:"oui-ml-1 oui-text-xs oui-text-base-contrast-36",children:"USDC"}),rule:"price",size:"xs",dp:e.symbolInfo("quote_dp"),children:o?Number(o):"--"})]}),jsxRuntime.jsxs(orderlyUi.Flex,{justify:"between",className:"oui-w-full",children:[jsxRuntime.jsx(orderlyUi.Text,{size:"xs",children:i("tpsl.advanced.orderPrice")}),jsxRuntime.jsx(orderlyUi.Text,{className:"oui-text-base-contrast",size:"xs",children:i("tpsl.advanced.market")})]}),m()]}),l(),jsxRuntime.jsx(orderlyUi.Divider,{className:"oui-my-3 oui-w-full"}),jsxRuntime.jsx(orderlyUi.Flex,{itemAlign:"center",onClick:()=>{e.close?.(),e.showAdvancedTPSLDialog?.({qty:Number(s.quantity)});},className:"oui-pb-4",children:jsxRuntime.jsx(orderlyUi.Text,{color:"primary",className:"oui-cursor-pointer oui-text-sm",children:i("tpsl.advancedSetting")})}),a]})};var vt=e=>{let{close:t,onComplete:o,showAdvancedTPSLDialog:r}=e,s=ht(e);return jsxRuntime.jsx(Ct,{...s,close:t,onComplete:o,showAdvancedTPSLDialog:r})},Zr="TPSLSimpleSheetId",Xr="TPSLSimpleDialogId";orderlyUi.registerSimpleSheet(Zr,vt,{classNames:{}});orderlyUi.registerSimpleDialog(Xr,vt,{classNames:{content:"oui-w-[420px]"}});function Yn(e){let t=e.child_orders[0],o=t.algo_type===orderlyTypes.AlgoOrderRootType.TP_SL?orderlyTypes.PositionType.PARTIAL:orderlyTypes.PositionType.FULL,r=t.child_orders.find(n=>n.algo_type===orderlyTypes.AlgoOrderType.TAKE_PROFIT&&n.trigger_price),s=t.child_orders.find(n=>n.algo_type===orderlyTypes.AlgoOrderType.STOP_LOSS&&n.trigger_price),i={};return r&&(i.tp_trigger_price=r.trigger_price?.toString(),i.tp_order_type=typeof r.type=="string"?r.type.replace("_ORDER",""):void 0,i.tp_order_type===orderlyTypes.OrderType.LIMIT&&(i.tp_order_price=r.price?.toString())),s&&(i.sl_trigger_price=s.trigger_price?.toString(),i.sl_order_type=typeof s.type=="string"?s.type.replace("_ORDER",""):void 0,i.sl_order_type===orderlyTypes.OrderType.LIMIT&&(i.sl_order_price=s.price?.toString())),{baseInfo:{symbol:e.symbol,order_type:e.type,side:e.side,order_price:e.price,order_quantity:e.quantity,position_type:o,tp_enable:!!r?.trigger_price,sl_enable:!!s?.trigger_price},tpslPriceInfo:i,tpInfo:{orderId:r?.algo_order_id},slInfo:{orderId:s?.algo_order_id}}}function Xe(e,t){if(t==null)return  true;if(isNaN(Number(t)))return  false;let o=new orderlyUtils.Decimal(Number(e));return !new orderlyUtils.Decimal(Number(t)).eq(o)}var to=e=>{if(!e.order)throw new orderlyTypes.SDKError("order is required for editBracketOrder");let{baseInfo:t,tpslPriceInfo:o,tpInfo:r,slInfo:s}=Yn(e.order),[i,{isMutating:n}]=orderlyHooks.useMutation("/v1/algo/order","PUT"),{formattedOrder:a,setValue:l,setValues:m,metaState:f,symbolInfo:u,helper:d}=orderlyHooks.useOrderEntry(e.order.symbol,{initialOrder:t}),g=e.order.symbol,p=react.useMemo(()=>{let c=false,{tp_order_price:P,sl_order_price:N,tp_trigger_price:O,sl_trigger_price:w}=a;return o.tp_trigger_price&&(c=c||Xe(o.tp_trigger_price,O??0)),o.tp_order_price&&(c=c||Xe(o.tp_order_price,P??0)),o.sl_trigger_price&&(c=c||Xe(o.sl_trigger_price,w??0)),o.sl_order_price&&(c=c||Xe(o.sl_order_price,N??0)),c},[o,a.tp_order_price,a.sl_order_price,a.tp_trigger_price,a.sl_trigger_price]);return react.useEffect(()=>{m({...o});},[e.order,m]),{symbol:g,symbolInfo:u,formattedOrder:a,setValue:l,setValues:m,metaState:f,onSubmit:async()=>d.validate().then(()=>{let c={order_id:r.orderId,algo_type:orderlyTypes.AlgoOrderType.TAKE_PROFIT,trigger_price:a.tp_trigger_price,reduce_only:true};a.tp_order_type===orderlyTypes.OrderType.LIMIT&&(c.price=a.tp_order_price);let P={order_id:s.orderId,algo_type:orderlyTypes.AlgoOrderType.STOP_LOSS,trigger_price:a.sl_trigger_price,reduce_only:true};a.sl_order_type===orderlyTypes.OrderType.LIMIT&&(P.price=a.sl_order_price);let N=[];return r.orderId&&N.push(c),s.orderId&&N.push(P),i({order_id:e.order.algo_order_id,child_orders:[{order_id:e.order.child_orders[0].algo_order_id,child_orders:N}]})}),isMutating:n,isPriceChanged:p}};var so=e=>{let{t}=orderlyI18n.useTranslation(),{errors:o,validated:r}=e.metaState,{isMobile:s}=orderlyUi.useScreen(),{formattedOrder:i,setValue:n,symbol:a,symbolInfo:l,setValues:m}=e,[f,u]=react.useState({enable:true,order_type:i.tp_order_type??orderlyTypes.OrderType.MARKET,order_price:i.tp_order_price??"",trigger_price:i.tp_trigger_price??"",PnL:i.tp_pnl??"",Offset:i.tp_offset??"","Offset%":i.tp_offset_percentage??"",ROI:i.tp_ROI??""}),[d,g]=react.useState({enable:true,order_type:i.sl_order_type??orderlyTypes.OrderType.MARKET,order_price:i.sl_order_price??"",trigger_price:i.sl_trigger_price??"",PnL:i.sl_pnl??"",Offset:i.sl_offset??"","Offset%":i.sl_offset_percentage??"",ROI:i.sl_ROI??""});return react.useEffect(()=>{u(p=>({...p,enable:i.tp_enable??true,order_type:i.tp_order_type??orderlyTypes.OrderType.MARKET,order_price:i.tp_order_price??"",trigger_price:i.tp_trigger_price??"",PnL:i.tp_pnl??"",Offset:i.tp_offset??"","Offset%":i.tp_offset_percentage??"",ROI:i.tp_ROI??""}));},[i]),react.useEffect(()=>{g(p=>({...p,enable:i.sl_enable??true,order_type:i.sl_order_type??orderlyTypes.OrderType.MARKET,order_price:i.sl_order_price??"",trigger_price:i.sl_trigger_price??"",PnL:i.sl_pnl??"",Offset:i.sl_offset??"","Offset%":i.sl_offset_percentage??"",ROI:i.sl_ROI??""}));},[i]),jsxRuntime.jsxs("div",{children:[jsxRuntime.jsxs(orderlyUi.ScrollArea,{className:orderlyUi.cn("oui-flex-1",s&&"oui-h-[calc(100vh-200px)]"),children:[jsxRuntime.jsx("div",{className:"",children:jsxRuntime.jsx(H,{order:{symbol:a,order_quantity:i.order_quantity,order_price:i.order_price},baseDP:l.base_dp,quoteDP:l.quote_dp})}),jsxRuntime.jsx(orderlyUi.Divider,{className:"oui-my-3"}),jsxRuntime.jsxs("div",{className:"",children:[jsxRuntime.jsxs("div",{className:"oui-py-3",children:[jsxRuntime.jsx(Y,{value:i.position_type??orderlyTypes.PositionType.PARTIAL,disableSelector:true,onChange:(p,y)=>{if(y===orderlyTypes.PositionType.FULL){m({position_type:orderlyTypes.PositionType.FULL,tp_order_type:orderlyTypes.OrderType.MARKET,tp_order_price:void 0,sl_order_type:orderlyTypes.OrderType.MARKET,sl_order_price:void 0});return}n("position_type",y);}}),i.position_type===orderlyTypes.PositionType.FULL&&jsxRuntime.jsxs(orderlyUi.Flex,{justify:"start",itemAlign:"start",gap:2,className:"oui-mt-3 oui-w-full",children:[jsxRuntime.jsx("div",{className:"oui-relative oui-top-[7px] oui-size-1 oui-rounded-full oui-bg-[#D25f00]"}),jsxRuntime.jsx(orderlyUi.Text,{className:"oui-text-2xs oui-text-[#D25f00]",children:t("tpsl.positionType.full.tips.market")})]})]}),jsxRuntime.jsxs(orderlyUi.Flex,{direction:"column",gap:6,children:[i.tp_enable&&jsxRuntime.jsx($,{disableEnableCheckbox:true,disableOrderTypeSelector:true,rootOrderPrice:i.order_price,symbol:l.symbol,type:"tp",side:i.side,values:f,errors:r?o:null,quote_dp:l.quote_dp,hideOrderPrice:i.position_type===orderlyTypes.PositionType.FULL,onChange:(p,y)=>{n(p,y);},positionType:i.position_type??orderlyTypes.PositionType.PARTIAL}),i.sl_enable&&i.tp_enable&&jsxRuntime.jsx(orderlyUi.Divider,{className:"oui-w-full"}),i.sl_enable&&jsxRuntime.jsx($,{disableEnableCheckbox:true,disableOrderTypeSelector:true,rootOrderPrice:i.order_price,symbol:l.symbol,type:"sl",side:i.side,values:d,hideOrderPrice:i.position_type===orderlyTypes.PositionType.FULL,errors:r?o:null,quote_dp:l.quote_dp,positionType:i.position_type??orderlyTypes.PositionType.PARTIAL,onChange:(p,y)=>{n(p,y);}})]}),jsxRuntime.jsx(pe,{tp_pnl:i.tp_pnl,sl_pnl:i.sl_pnl,className:"oui-mt-6"})]})]}),jsxRuntime.jsx(orderlyUi.Flex,{itemAlign:"center",gap:3,mt:5,width:"100%",justify:"center",children:jsxRuntime.jsx(orderlyUi.ThrottledButton,{className:"oui-w-[184px]","data-testid":"tpsl-confirm",disabled:!e.isPriceChanged,loading:e.isMutating,onClick:()=>{e.onSubmit().then(()=>{e.onClose?.();}).catch(p=>{});},children:t("common.confirm")})})]})};var no=e=>{let t=to({order:e.order});return jsxRuntime.jsx(so,{...t,onClose:e.close})},sl="EditBracketOrderSheetId",nl="EditBracketOrderDialogId";orderlyUi.registerSimpleSheet(sl,no);orderlyUi.registerSimpleDialog(nl,no,{classNames:{content:"oui-w-[420px]"}});
+// src/components/tpslPostionType/tpslPositionType.script.tsx
+var useTPSLPositionTypeScript = (props) => {
+  return {
+    value: props.value,
+    onChange: props.onChange,
+    disableSelector: props.disableSelector
+  };
+};
+var positionTypeKey = "position_type";
+var TPSLPositionTypeUI = (props) => {
+  const { t } = orderlyI18n.useTranslation();
+  const options = [
+    {
+      label: t("tpsl.partialPosition"),
+      value: orderlyTypes.PositionType.PARTIAL
+    },
+    {
+      label: t("tpsl.fullPosition"),
+      value: orderlyTypes.PositionType.FULL
+    }
+  ];
+  return /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { gap: 1, itemAlign: "center", justify: "start", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      orderlyUi.Tooltip,
+      {
+        className: "oui-w-[280px] oui-p-3",
+        content: props.value === orderlyTypes.PositionType.FULL ? t("tpsl.positionType.full.tips") : t("tpsl.positionType.partial.tips"),
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          orderlyUi.ExclamationFillIcon,
+          {
+            className: "oui-cursor-pointer oui-text-base-contrast-54",
+            size: 12
+          }
+        )
+      }
+    ),
+    props.disableSelector ? props.value === orderlyTypes.PositionType.FULL ? /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { className: "oui-text-2xs oui-font-normal oui-text-base-contrast-54", children: t("tpsl.positionType.full") }) : /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { className: "oui-text-2xs oui-font-normal oui-text-base-contrast-54", children: t("tpsl.positionType.partial") }) : /* @__PURE__ */ jsxRuntime.jsx(
+      orderlyUi.Select.options,
+      {
+        value: props.value,
+        options,
+        onValueChange: (event) => {
+          props.onChange(positionTypeKey, event);
+        },
+        size: "xs",
+        classNames: {
+          trigger: " oui-bg-transparent oui-border-0 oui-w-auto oui-px-0 oui-font-normal"
+        },
+        contentProps: {
+          className: " oui-bg-base-8 oui-border-0"
+        }
+      }
+    )
+  ] });
+};
+var TPSLPositionTypeWidget = (props) => {
+  const state = useTPSLPositionTypeScript(props);
+  return /* @__PURE__ */ jsxRuntime.jsx(TPSLPositionTypeUI, { ...state });
+};
+var TPSLQuantity = react.memo((props) => {
+  const { maxQty, base_dp, baseTick, quantity } = props;
+  const inputRef = react.useRef(null);
+  const { t } = orderlyI18n.useTranslation();
+  const [sliderValue, setSliderValue] = react.useState(0);
+  const formatQuantity = (value) => {
+    let _qty = value;
+    if (Number(value) > maxQty) {
+      _qty = maxQty.toString();
+    }
+    if (baseTick > 0) {
+      props.onQuantityChange?.(orderlyHooks.utils.formatNumber(_qty, baseTick) ?? value);
+    }
+  };
+  const onSliderValueChange = (value) => {
+    setSliderValue(value);
+    const qty = new orderlyUtils.Decimal(value).div(100).mul(maxQty).toFixed(base_dp, orderlyUtils.Decimal.ROUND_DOWN);
+    formatQuantity(qty);
+  };
+  react.useEffect(() => {
+    const qty = Math.min(Number(quantity || 0), maxQty);
+    const slider = new orderlyUtils.Decimal(qty).div(maxQty).mul(100).toDecimalPlaces(2, orderlyUtils.Decimal.ROUND_DOWN).toNumber();
+    setSliderValue(slider);
+  }, [quantity, maxQty]);
+  const errorMsg = props.quantity.toString().length > 0 ? props.errorMsg : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Flex, { gap: 2, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(
+      orderlyUi.Input.tooltip,
+      {
+        "data-testid": "oui-testid-tpsl-popUp-quantity-input",
+        ref: inputRef,
+        prefix: t("common.quantity"),
+        size: {
+          initial: "md",
+          lg: "sm"
+        },
+        align: "right",
+        value: props.quantity,
+        autoComplete: "off",
+        inputMode: "decimal",
+        classNames: {
+          prefix: "oui-text-base-contrast-54",
+          root: orderlyUi.cn(
+            "oui-bg-base-5 oui-outline-line-12",
+            errorMsg && "oui-outline-danger"
+          )
+        },
+        tooltipProps: {
+          content: {
+            className: "oui-bg-base-6 oui-text-base-contrast-80"
+          },
+          arrow: {
+            className: "oui-fill-base-6"
+          }
+        },
+        tooltip: errorMsg,
+        color: errorMsg ? "danger" : void 0,
+        formatters: [
+          orderlyUi.inputFormatter.dpFormatter(props.base_dp),
+          orderlyUi.inputFormatter.numberFormatter,
+          orderlyUi.inputFormatter.currencyFormatter,
+          orderlyUi.inputFormatter.decimalPointFormatter
+        ],
+        onValueChange: (value) => {
+          props.onQuantityChange?.(value);
+          const qty = Number(value);
+          if (qty && qty > props.maxQty) {
+            const qty2 = props.maxQty;
+            props.onQuantityChange?.(qty2);
+            inputRef.current?.blur();
+          }
+        },
+        onBlur: (e) => formatQuantity(e.target.value),
+        suffix: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oui-px-3 oui-text-2xs oui-text-base-contrast-54", children: props.base })
+      }
+    ) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Flex, { mt: 2, itemAlign: "center", height: "15px", children: /* @__PURE__ */ jsxRuntime.jsx(
+      orderlyUi.Slider,
+      {
+        min: 0,
+        max: 100,
+        markCount: 5,
+        showTip: true,
+        value: [sliderValue],
+        color: "primary",
+        onValueChange: (value) => {
+          onSliderValueChange(value[0]);
+        }
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { justify: "between", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text.numeral, { color: "primary", size: "2xs", suffix: "%", children: sliderValue }),
+      /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { itemAlign: "center", gap: 1, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            className: "oui-leading-none",
+            style: { lineHeight: 0 },
+            onClick: () => {
+              props.onQuantityChange?.(props.maxQty);
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { color: "primary", size: "2xs", children: t("common.max") })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          orderlyUi.Text.numeral,
+          {
+            rule: "price",
+            size: "2xs",
+            intensity: 54,
+            tick: props.baseTick,
+            children: props.maxQty
+          }
+        )
+      ] })
+    ] })
+  ] });
+});
+var TPSL = (props) => {
+  const {
+    TPSL_OrderEntity,
+    symbolInfo,
+    onCancel,
+    onComplete,
+    status,
+    position,
+    setValues,
+    isEditing
+  } = props;
+  const { errors, validated } = props.metaState;
+  const { t } = orderlyI18n.useTranslation();
+  const { isMobile } = orderlyUi.useScreen();
+  const tpErrors = react.useMemo(() => {
+    if (!errors)
+      return null;
+    const { sl_trigger_price, ...rest } = errors;
+    return rest;
+  }, [errors]);
+  const slErrors = react.useMemo(() => {
+    if (!errors)
+      return null;
+    const { tp_trigger_price, ...rest } = errors;
+    return rest;
+  }, [errors]);
+  const { getErrorMsg } = orderlyReactApp.useOrderEntryFormErrorMsg(errors);
+  const { getErrorMsg: getSlPriceErrorMsg } = orderlyReactApp.useOrderEntryFormErrorMsg(
+    props.slPriceError
+  );
+  const isSlPriceWarning = props.slPriceError?.sl_trigger_price?.type === orderlyHooks.ERROR_MSG_CODES.SL_PRICE_WARNING;
+  if (!position) {
+    return null;
+  }
+  const tpslEnable = TPSL_OrderEntity.tp_trigger_price || TPSL_OrderEntity.sl_trigger_price;
+  const renderQtyInput = () => {
+    if (TPSL_OrderEntity.position_type === orderlyTypes.PositionType.FULL) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Box, { className: "oui-px-0.5", children: /* @__PURE__ */ jsxRuntime.jsx(
+      TPSLQuantity,
+      {
+        maxQty: props.maxQty,
+        quantity: props.orderQuantity ?? props.maxQty,
+        baseTick: symbolInfo("base_tick"),
+        base_dp: symbolInfo("base_dp"),
+        onQuantityChange: props.setQuantity,
+        base: symbolInfo("base"),
+        isEditing: props.isEditing,
+        errorMsg: validated ? getErrorMsg("quantity") : void 0
+      }
+    ) });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { id: "orderly-tp_sl-order-edit-content", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.ScrollArea, { className: orderlyUi.cn(isMobile && "oui-h-[calc(100vh-200px)]"), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-px-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        OrderInfo,
+        {
+          baseDP: symbolInfo("base_dp"),
+          quoteDP: symbolInfo("quote_dp"),
+          estLiqPrice: props.estLiqPrice,
+          classNames: {
+            root: "oui-mb-3",
+            container: "oui-gap-x-[30px]"
+          },
+          order: {
+            symbol: position.symbol,
+            order_quantity: position.position_qty.toString(),
+            order_price: position.average_open_price.toString()
+          },
+          symbolLeverage: position.leverage
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        orderlyUi.Flex,
+        {
+          direction: "column",
+          justify: "start",
+          itemAlign: "start",
+          gap: 3,
+          className: "oui-mb-3 oui-w-full",
+          children: [
+            !isEditing && /* @__PURE__ */ jsxRuntime.jsx(
+              TPSLPositionTypeWidget,
+              {
+                disableSelector: true,
+                value: TPSL_OrderEntity.position_type ?? orderlyTypes.PositionType.PARTIAL,
+                onChange: (key, value) => {
+                  props.setOrderValue(key, value);
+                }
+              }
+            ),
+            TPSL_OrderEntity.position_type === orderlyTypes.PositionType.FULL && /* @__PURE__ */ jsxRuntime.jsx(
+              orderlyUi.DotStatus,
+              {
+                color: "warning",
+                size: "xs",
+                label: t("tpsl.positionType.full.tips.market")
+              }
+            )
+          ]
+        }
+      ),
+      renderQtyInput(),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        orderlyUi.Flex,
+        {
+          direction: "column",
+          itemAlign: "start",
+          justify: "start",
+          gap: 6,
+          className: "oui-mt-3 oui-w-full",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              TPSLInputRowWidget,
+              {
+                symbol: position.symbol,
+                rootOrderPrice: position.average_open_price.toString(),
+                type: "tp",
+                side: position.position_qty > 0 ? orderlyTypes.OrderSide.BUY : orderlyTypes.OrderSide.SELL,
+                values: {
+                  // enable: TPSL_OrderEntity.tp_enable ?? false,
+                  trigger_price: TPSL_OrderEntity.tp_trigger_price?.toString() ?? void 0,
+                  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,
+                  order_price: TPSL_OrderEntity.tp_order_price?.toString() ?? void 0,
+                  order_type: TPSL_OrderEntity.tp_order_type ?? orderlyTypes.OrderType.MARKET
+                },
+                hideOrderPrice: TPSL_OrderEntity.position_type === orderlyTypes.PositionType.FULL,
+                errors: validated ? tpErrors : null,
+                disableOrderTypeSelector: isEditing,
+                quote_dp: symbolInfo("quote_dp"),
+                positionType: TPSL_OrderEntity.position_type ?? orderlyTypes.PositionType.PARTIAL,
+                onChange: (key, value) => {
+                  props.setOrderValue(key, value);
+                },
+                symbolLeverage: position.leverage
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              TPSLInputRowWidget,
+              {
+                inputWarnNode: isSlPriceWarning && /* @__PURE__ */ jsxRuntime.jsx(
+                  orderlyUi.DotStatus,
+                  {
+                    color: "warning",
+                    label: getSlPriceErrorMsg("sl_trigger_price"),
+                    classNames: {
+                      root: "oui-mt-1"
+                    }
+                  }
+                ),
+                symbol: position.symbol,
+                rootOrderPrice: position.average_open_price.toString(),
+                type: "sl",
+                side: position.position_qty > 0 ? orderlyTypes.OrderSide.BUY : orderlyTypes.OrderSide.SELL,
+                values: {
+                  // enable: TPSL_OrderEntity.sl_enable ?? false,
+                  trigger_price: TPSL_OrderEntity.sl_trigger_price?.toString() ?? void 0,
+                  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,
+                  order_price: TPSL_OrderEntity.sl_order_price?.toString() ?? void 0,
+                  order_type: TPSL_OrderEntity.sl_order_type ?? orderlyTypes.OrderType.MARKET
+                },
+                hideOrderPrice: TPSL_OrderEntity.position_type === orderlyTypes.PositionType.FULL,
+                errors: validated ? slErrors : null,
+                quote_dp: symbolInfo("quote_dp"),
+                positionType: TPSL_OrderEntity.position_type ?? orderlyTypes.PositionType.PARTIAL,
+                disableOrderTypeSelector: isEditing,
+                onChange: (key, value) => {
+                  props.setOrderValue(key, value);
+                },
+                symbolLeverage: position.leverage
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        PnlInfo,
+        {
+          tp_pnl: TPSL_OrderEntity.tp_pnl,
+          sl_pnl: TPSL_OrderEntity.sl_pnl,
+          className: "oui-my-3"
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Grid, { px: 2, cols: 2, gap: 3, mt: 4, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        orderlyUi.Button,
+        {
+          size: "md",
+          color: "secondary",
+          "data-testid": "tpsl-cancel",
+          onClick: () => {
+            props.close?.();
+            onCancel?.();
+          },
+          children: t("common.cancel")
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        orderlyUi.ThrottledButton,
+        {
+          size: "md",
+          "data-testid": "tpsl-confirm",
+          disabled: status.isCreateMutating || !tpslEnable,
+          loading: status.isCreateMutating || status.isUpdateMutating,
+          onClick: () => {
+            props.onSubmit().then(() => {
+              props.close?.();
+              onComplete?.();
+            }).catch((err) => {
+            });
+          },
+          children: t("common.confirm")
+        }
+      )
+    ] })
+  ] });
+};
+var TPSLOrderType = (props) => {
+  const { tpPrice, slPrice } = props;
+  const { t } = orderlyI18n.useTranslation();
+  if (!!tpPrice && !!slPrice) {
+    return /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Badge, { size: "xs", color: "neutral", children: t("common.tpsl") });
+  }
+  if (!!tpPrice) {
+    return /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Badge, { size: "xs", color: "neutral", children: t("tpsl.tp") });
+  }
+  if (!!slPrice) {
+    return /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Badge, { size: "xs", color: "neutral", children: t("tpsl.sl") });
+  }
+  return null;
+};
+var PositionTPSLConfirm = (props) => {
+  const {
+    symbol,
+    tpPrice,
+    slPrice,
+    qty,
+    maxQty,
+    side,
+    quoteDP,
+    baseDP,
+    isEditing,
+    isPositionTPSL: _isPositionTPSL,
+    orderInfo: order2
+  } = props;
+  const { t } = orderlyI18n.useTranslation();
+  const [needConfirm, setNeedConfirm] = orderlyHooks.useLocalStorage(
+    "orderly_order_confirm",
+    true
+  );
+  const renderPositionType = () => {
+    if (order2.position_type === orderlyTypes.PositionType.FULL) {
+      return /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { children: t("tpsl.positionType.full") });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { children: t("tpsl.positionType.partial") });
+  };
+  const renderTPSLPrice = ({
+    price,
+    isOrderPrice,
+    isEnable,
+    colorType
+  }) => {
+    if (!isEnable) {
+      return /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { className: "oui-text-base-contrast-36", children: "-- USDC" });
+    }
+    if (!price) {
+      if (isOrderPrice) {
+        return /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { className: "oui-text-base-contrast-36", children: t("common.market") });
+      }
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      orderlyUi.Text.numeral,
+      {
+        unit: "USDC",
+        rule: "price",
+        className: orderlyUi.cn(
+          "oui-text-base-contrast",
+          colorType === "TP" ? "oui-text-trade-profit" : "oui-text-trade-loss"
+        ),
+        unitClassName: "oui-text-base-contrast-36 oui-ml-1",
+        dp: quoteDP,
+        padding: false,
+        children: price
+      }
+    );
+  };
+  const isPositionTPSL = _isPositionTPSL;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    isEditing && /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { as: "div", size: "2xs", intensity: 80, className: "oui-mb-3", children: t("tpsl.agreement", { symbol: orderlyUtils.transSymbolformString(symbol) }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { pb: 4, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Box, { grow: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+        orderlyUi.Text.formatted,
+        {
+          rule: "symbol",
+          formatString: "base-type",
+          size: "base",
+          showIcon: true,
+          as: "div",
+          intensity: 80,
+          children: symbol
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { gap: 1, children: [
+        isPositionTPSL && /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Badge, { size: "xs", color: "primary", children: t("common.position") }),
+        /* @__PURE__ */ jsxRuntime.jsx(TPSLOrderType, { tpPrice, slPrice }),
+        side === orderlyTypes.OrderSide.SELL ? /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Badge, { size: "xs", color: "success", children: t("common.buy") }) : /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Badge, { size: "xs", color: "danger", children: t("common.sell") })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Divider, {}),
+    order2.tp_trigger_price || order2.sl_trigger_price ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Divider, { className: "oui-my-4" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: orderlyUi.textVariants({
+            size: "sm",
+            intensity: 54,
+            className: "oui-space-y-1 oui-w-full oui-flex oui-flex-col oui-gap-3"
+          }),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { className: "oui-text-base-contrast", children: renderPositionType() }),
+            /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { justify: "between", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { children: t("common.orderQty") }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                orderlyUi.Text.numeral,
+                {
+                  rule: "price",
+                  dp: baseDP,
+                  padding: false,
+                  className: "oui-text-base-contrast",
+                  children: order2.quantity ?? "-"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              orderlyUi.Flex,
+              {
+                direction: "column",
+                justify: "between",
+                itemAlign: "start",
+                gap: 1,
+                className: "oui-w-full",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { justify: "between", className: "oui-w-full", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { children: t("tpsl.tpTriggerPrice") }),
+                    " ",
+                    renderTPSLPrice({
+                      price: order2.tp_trigger_price ?? "",
+                      isOrderPrice: false,
+                      isEnable: !!order2.tp_trigger_price,
+                      colorType: "TP"
+                    })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { justify: "between", className: "oui-w-full", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { children: t("tpsl.tpOrderPrice") }),
+                    renderTPSLPrice({
+                      price: order2.tp_order_price ?? "",
+                      isOrderPrice: true,
+                      isEnable: !!order2.tp_trigger_price,
+                      colorType: "TP"
+                    })
+                  ] })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              orderlyUi.Flex,
+              {
+                direction: "column",
+                justify: "between",
+                itemAlign: "start",
+                gap: 1,
+                className: "oui-w-full",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { justify: "between", className: "oui-w-full", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { children: t("tpsl.slTriggerPrice") }),
+                    renderTPSLPrice({
+                      price: order2.sl_trigger_price ?? "",
+                      isOrderPrice: false,
+                      isEnable: !!order2.sl_trigger_price,
+                      colorType: "SL"
+                    })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { justify: "between", className: "oui-w-full", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { children: t("tpsl.slOrderPrice") }),
+                    renderTPSLPrice({
+                      price: order2.sl_order_price ?? "",
+                      isOrderPrice: true,
+                      isEnable: !!order2.sl_trigger_price,
+                      colorType: "SL"
+                    })
+                  ] })
+                ]
+              }
+            )
+          ]
+        }
+      )
+    ] }) : null,
+    /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Box, { pt: 2, children: /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { gap: 1, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        orderlyUi.Checkbox,
+        {
+          id: "disabledConfirm",
+          color: "white",
+          checked: !needConfirm,
+          onCheckedChange: (check) => {
+            setNeedConfirm(!check);
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "label",
+        {
+          htmlFor: "disabledConfirm",
+          className: orderlyUi.textVariants({
+            size: "xs",
+            intensity: 54,
+            className: "oui-ml-1"
+          }),
+          children: t("orderEntry.disableOrderConfirm")
+        }
+      )
+    ] }) })
+  ] });
+};
+var useTPSLBuilder = (options) => {
+  const {
+    symbol,
+    order: order2,
+    isEditing,
+    positionType,
+    triggerPrice,
+    type,
+    withTriggerPrice
+  } = options;
+  const { t } = orderlyI18n.useTranslation();
+  if (isEditing && !order2) {
+    throw new orderlyTypes.SDKError("order is required when isEditing is true");
+  }
+  const symbolInfo = orderlyHooks.useSymbolsInfo();
+  react.useRef(orderlyTypes.AlgoOrderRootType.TP_SL);
+  const [{ rows: positions }] = orderlyHooks.usePositionStream();
+  const [needConfirm] = orderlyHooks.useLocalStorage("orderly_order_confirm", true);
+  const position = positions.find((item) => item.symbol === symbol);
+  const estLiqPrice = orderlyHooks.useEstLiqPriceBySymbol(symbol);
+  react.useEffect(() => {
+    if (!position) {
+      options.close?.();
+    }
+  }, [position]);
+  const [
+    tpslOrder,
+    {
+      submit,
+      deleteOrder,
+      setValue,
+      setValues,
+      validate,
+      metaState,
+      errors,
+      isCreateMutating,
+      isUpdateMutating
+    }
+  ] = orderlyHooks.useTPSLOrder(
+    {
+      symbol,
+      position_qty: position?.position_qty ?? 0,
+      average_open_price: position?.average_open_price ?? 0
+    },
+    {
+      defaultOrder: order2,
+      positionType: triggerPrice ? orderlyTypes.PositionType.PARTIAL : positionType,
+      // tpslEnable: {
+      //   tp_enable: !withTriggerPrice ? true : type === "tp",
+      //   sl_enable: !withTriggerPrice ? true : type === "sl",
+      // },
+      isEditing
+    }
+  );
+  const slPriceError = orderlyHooks.useTpslPriceChecker({
+    slPrice: tpslOrder.sl_trigger_price?.toString() ?? void 0,
+    liqPrice: estLiqPrice ?? null,
+    side: tpslOrder.side
+  });
+  const isSlPriceWarning = slPriceError?.sl_trigger_price?.type === orderlyHooks.ERROR_MSG_CODES.SL_PRICE_WARNING;
+  const setQuantity = (value) => {
+    setValue("quantity", value);
+  };
+  const setOrderPrice = (name, value) => {
+    setValue(name, value);
+  };
+  const setPnL = (type2, value) => {
+    setValue(type2, value);
+  };
+  const maxQty = react.useMemo(
+    () => Math.abs(Number(position?.position_qty)),
+    [position?.position_qty]
+  );
+  react.useMemo(() => {
+    const quantity = order2?.algo_type === orderlyTypes.AlgoOrderRootType.POSITIONAL_TP_SL ? maxQty : order2?.quantity;
+    let diff = 0;
+    if (Number(tpslOrder.quantity) !== quantity) {
+      diff = 1;
+    } else if (!isEditing && !!tpslOrder.quantity) {
+      diff = 1;
+    }
+    if (order2 && isEditing) {
+      const { tp_trigger_price, sl_trigger_price } = orderlyHooks.utils.findTPSLFromOrder(order2);
+      const { tp_order_price, sl_order_price } = orderlyHooks.utils.findTPSLOrderPriceFromOrder(order2);
+      if (tp_trigger_price !== Number(tpslOrder.tp_trigger_price) && typeof typeof tpslOrder.tp_trigger_price !== "undefined") {
+        diff = 2;
+      }
+      if (sl_trigger_price !== Number(tpslOrder.sl_trigger_price) && typeof tpslOrder.sl_trigger_price !== "undefined") {
+        diff = 3;
+      }
+      if (typeof tpslOrder.tp_order_price !== "undefined" && tp_order_price !== orderlyTypes.OrderType.MARKET && tp_order_price !== Number(tpslOrder.tp_order_price)) {
+        diff = 4;
+      }
+      if (typeof tpslOrder.sl_order_price !== "undefined" && sl_order_price !== orderlyTypes.OrderType.MARKET && sl_order_price !== Number(tpslOrder.sl_order_price)) {
+        diff = 5;
+      }
+    }
+    if (diff === 1 && !tpslOrder.tp_trigger_price && !tpslOrder.sl_trigger_price) {
+      diff = -1;
+    }
+    return diff;
+  }, [
+    tpslOrder.tp_trigger_price,
+    tpslOrder.tp_order_price,
+    tpslOrder.sl_trigger_price,
+    tpslOrder.sl_order_price,
+    tpslOrder.quantity,
+    order2,
+    isEditing
+  ]);
+  react.useEffect(() => {
+    if (!withTriggerPrice) {
+      return;
+    }
+    if (!triggerPrice) {
+      return;
+    }
+    if (type === "tp") {
+      setValue("tp_trigger_price", triggerPrice);
+    } else {
+      setValue("sl_trigger_price", triggerPrice);
+    }
+    if (options.qty) {
+      setValue("quantity", options.qty);
+    }
+  }, [type, triggerPrice, options.qty]);
+  const cancel = () => {
+    if (order2?.algo_order_id && order2?.symbol) {
+      return deleteOrder(order2?.algo_order_id, order2?.symbol);
+    }
+    return Promise.reject("order id or symbol is invalid");
+  };
+  const onConfirm = (order3, options2) => {
+    if (!needConfirm) {
+      return Promise.resolve(true);
+    }
+    const maxQty2 = Math.abs(Number(position?.position_qty));
+    if (`${order3.tp_trigger_price ?? ""}`.length === 0 && `${order3.sl_trigger_price ?? ""}`.length === 0) {
+      return orderlyUi.modal.confirm({
+        title: t("orders.cancelOrder"),
+        content: t("tpsl.cancelOrder.description"),
+        onOk: () => {
+          return options2.cancel();
+        }
+      }).then(
+        () => {
+          return true;
+        },
+        () => {
+          return Promise.reject(false);
+        }
+      );
+    }
+    return orderlyUi.modal.confirm({
+      title: t("tpsl.confirmOrder"),
+      // bodyClassName: "lg:oui-py-0",
+      onOk: async () => {
+        try {
+          const res = await options2.submit({
+            accountId: position?.account_id
+          });
+          if (res.success) {
+            return res;
+          }
+          if (res.message) {
+            orderlyUi.toast.error(res.message);
+          }
+          return false;
+        } catch (err) {
+          if (err?.message) {
+            orderlyUi.toast.error(err.message);
+          }
+          return false;
+        }
+      },
+      classNames: {
+        body: "!oui-pb-0"
+      },
+      content: /* @__PURE__ */ jsxRuntime.jsx(
+        PositionTPSLConfirm,
+        {
+          isPositionTPSL: positionType === orderlyTypes.PositionType.FULL,
+          isEditing,
+          symbol: order3.symbol,
+          qty: Number(order3.quantity),
+          maxQty: maxQty2,
+          tpPrice: Number(order3.tp_trigger_price),
+          slPrice: Number(order3.sl_trigger_price),
+          side: order3.side,
+          orderInfo: order3,
+          quoteDP: symbolInfo[symbol]("quote_dp") ?? 2,
+          baseDP: symbolInfo[symbol]("base_dp") ?? 2
+        }
+      )
+    }).then(
+      () => {
+        return true;
+      },
+      () => {
+        return Promise.reject(false);
+      }
+    );
+  };
+  const onSubmit = async () => {
+    try {
+      const validOrder = await validate(
+        isSlPriceWarning ? void 0 : slPriceError
+      );
+      if (validOrder) {
+        if (!needConfirm) {
+          return submit({ accountId: position?.account_id }).then(() => true).catch((err) => {
+            if (err?.message) {
+              orderlyUi.toast.error(err.message);
+            }
+            throw false;
+          });
+        }
+        return onConfirm(tpslOrder, {
+          position,
+          submit,
+          cancel
+        });
+      }
+    } catch (error) {
+      return Promise.reject(error);
+    }
+  };
+  return {
+    isEditing,
+    symbolInfo: symbolInfo[symbol],
+    maxQty,
+    setQuantity: orderlyHooks.useMemoizedFn(setQuantity),
+    orderQuantity: tpslOrder.quantity,
+    // isPosition: isPositionTPSL,
+    TPSL_OrderEntity: tpslOrder,
+    setOrderValue: setValue,
+    setPnL,
+    setOrderPrice,
+    // needConfirm,
+    onSubmit,
+    slPriceError,
+    estLiqPrice,
+    metaState,
+    errors,
+    status: {
+      isCreateMutating,
+      isUpdateMutating
+    },
+    position,
+    setValues
+  };
+};
+var TPSLWidget = (props) => {
+  const { onCancel, onComplete, ...rest } = props;
+  const state = useTPSLBuilder(rest);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TPSL,
+    {
+      ...state,
+      onCancel,
+      onComplete,
+      close: rest.close
+    }
+  );
+};
+var TPSLSheetId = "TPSLSheetId";
+var TPSLDialogId = "TPSLDialogId";
+orderlyUi.registerSimpleSheet(TPSLSheetId, TPSLWidget);
+orderlyUi.registerSimpleDialog(TPSLDialogId, TPSLWidget, {
+  classNames: {
+    content: "oui-w-[420px]"
+  }
+});
+var PositionTPSLPopover = (props) => {
+  const { position, order: order2, baseDP, quoteDP, buttonProps, isEditing } = props;
+  const [needConfirm] = orderlyHooks.useLocalStorage("orderly_order_confirm", true);
+  const { t } = orderlyI18n.useTranslation();
+  const isPositionTPSL = isEditing ? order2?.algo_type === orderlyTypes.AlgoOrderRootType.POSITIONAL_TP_SL : void 0;
+  const onEdit = () => {
+    orderlyUi.modal.show(TPSLDialogId, {
+      order: order2,
+      symbol: position.symbol,
+      baseDP,
+      quoteDP,
+      positionType: isPositionTPSL ? orderlyTypes.PositionType.FULL : orderlyTypes.PositionType.PARTIAL,
+      isEditing
+    });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Box, { onClick: onEdit, className: "oui-cursor-pointer", children: props.children || /* @__PURE__ */ jsxRuntime.jsx(
+    orderlyUi.Button,
+    {
+      variant: "outlined",
+      size: "sm",
+      color: "secondary",
+      ...buttonProps,
+      children: props.label
+    }
+  ) });
+};
+var PositionTPSLSheet = (props) => {
+  const { position, order: order2, symbolInfo, isEditing } = props;
+  const { resolve, hide, updateArgs } = orderlyUi.useModal();
+  const isPositionTPSL = isEditing ? order2?.algo_type === orderlyTypes.AlgoOrderRootType.POSITIONAL_TP_SL : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    TPSLWidget,
+    {
+      ...props,
+      positionType: props.positionType ?? (isPositionTPSL ? orderlyTypes.PositionType.FULL : orderlyTypes.PositionType.PARTIAL),
+      onCancel: () => {
+        hide();
+      }
+    }
+  ) });
+};
+var TPSLAdvancedUI = (props) => {
+  const { t } = orderlyI18n.useTranslation();
+  const { errors, validated } = props.metaState;
+  const { getErrorMsg } = orderlyReactApp.useOrderEntryFormErrorMsg(props.slPriceError);
+  const isSlPriceWarning = props.slPriceError?.sl_trigger_price?.type === orderlyHooks.ERROR_MSG_CODES.SL_PRICE_WARNING;
+  const {
+    formattedOrder,
+    setValue: setOrderValue,
+    symbolInfo,
+    setValues
+  } = props;
+  const [tpValues, setTpValuse] = react.useState({
+    enable: false,
+    order_type: formattedOrder.tp_order_type ?? orderlyTypes.OrderType.MARKET,
+    order_price: formattedOrder.tp_order_price ?? "",
+    trigger_price: formattedOrder.tp_trigger_price ?? "",
+    PnL: formattedOrder.tp_pnl ?? "",
+    Offset: formattedOrder.tp_offset ?? "",
+    "Offset%": formattedOrder.tp_offset_percentage ?? "",
+    ROI: formattedOrder.tp_ROI ?? ""
+  });
+  const [slValues, setSlValues] = react.useState({
+    enable: false,
+    order_type: formattedOrder.sl_order_type ?? orderlyTypes.OrderType.MARKET,
+    order_price: formattedOrder.sl_order_price ?? "",
+    trigger_price: formattedOrder.sl_trigger_price ?? "",
+    PnL: formattedOrder.sl_pnl ?? "",
+    Offset: formattedOrder.sl_offset ?? "",
+    "Offset%": formattedOrder.sl_offset_percentage ?? "",
+    ROI: formattedOrder.sl_ROI ?? ""
+  });
+  react.useEffect(() => {
+    setTpValuse((prev) => ({
+      ...prev,
+      // enable: formattedOrder.tp_enable ?? false,
+      order_type: formattedOrder.tp_order_type ?? orderlyTypes.OrderType.MARKET,
+      order_price: formattedOrder.tp_order_price ?? "",
+      trigger_price: formattedOrder.tp_trigger_price ?? "",
+      PnL: formattedOrder.tp_pnl ?? "",
+      Offset: formattedOrder.tp_offset ?? "",
+      "Offset%": formattedOrder.tp_offset_percentage ?? "",
+      ROI: formattedOrder.tp_ROI ?? ""
+    }));
+  }, [formattedOrder]);
+  react.useEffect(() => {
+    setSlValues((prev) => ({
+      ...prev,
+      // enable: formattedOrder.sl_enable ?? false,
+      order_type: formattedOrder.sl_order_type ?? orderlyTypes.OrderType.MARKET,
+      order_price: formattedOrder.sl_order_price ?? "",
+      trigger_price: formattedOrder.sl_trigger_price ?? "",
+      PnL: formattedOrder.sl_pnl ?? "",
+      Offset: formattedOrder.sl_offset ?? "",
+      "Offset%": formattedOrder.sl_offset_percentage ?? "",
+      ROI: formattedOrder.sl_ROI ?? ""
+    }));
+  }, [formattedOrder]);
+  const tpslEnable = formattedOrder.tp_trigger_price || formattedOrder.sl_trigger_price;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-flex oui-h-full oui-flex-col oui-justify-between oui-rounded-[16px] oui-py-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-px-3", children: /* @__PURE__ */ jsxRuntime.jsxs(
+      orderlyUi.Flex,
+      {
+        className: "oui-mb-5 oui-cursor-pointer  oui-text-base oui-text-base-contrast-80",
+        gap: 1,
+        itemAlign: "center",
+        onClick: props.onClose,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ArrowRightIcon, { className: " oui-text-base-contrast-80" }),
+          /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { children: t("common.tpsl") })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.ScrollArea, { className: "oui-flex-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-px-3", children: /* @__PURE__ */ jsxRuntime.jsx(
+        OrderInfo,
+        {
+          order: formattedOrder,
+          baseDP: symbolInfo.base_dp,
+          quoteDP: symbolInfo.quote_dp,
+          estLiqPrice: props.estLiqPrice ?? void 0,
+          symbolLeverage: props.symbolLeverage
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Divider, { className: "oui-my-3" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-px-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { className: "oui-gap-[6px]", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            orderlyUi.Button,
+            {
+              onClick: () => {
+                setOrderValue("side", orderlyTypes.OrderSide.BUY);
+              },
+              size: "sm",
+              fullWidth: true,
+              "data-type": orderlyTypes.OrderSide.BUY,
+              className: orderlyUi.cn(
+                formattedOrder.side === orderlyTypes.OrderSide.BUY ? "oui-bg-success-darken hover:oui-bg-success-darken/80 active:oui-bg-success-darken/80" : "oui-bg-base-7 oui-text-base-contrast-36 hover:oui-bg-base-6 active:oui-bg-base-6"
+              ),
+              "data-testid": "oui-testid-orderEntry-side-buy-button",
+              children: t("common.buy")
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            orderlyUi.Button,
+            {
+              onClick: () => {
+                setOrderValue("side", orderlyTypes.OrderSide.SELL);
+              },
+              "data-type": orderlyTypes.OrderSide.SELL,
+              fullWidth: true,
+              size: "sm",
+              className: orderlyUi.cn(
+                formattedOrder.side === orderlyTypes.OrderSide.SELL ? "oui-bg-danger-darken hover:oui-bg-danger-darken/80 active:oui-bg-danger-darken/80" : "oui-bg-base-7 oui-text-base-contrast-36 hover:oui-bg-base-6 active:oui-bg-base-6"
+              ),
+              "data-testid": "oui-testid-orderEntry-side-sell-button",
+              children: t("common.sell")
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-py-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            TPSLPositionTypeWidget,
+            {
+              value: formattedOrder.position_type ?? orderlyTypes.PositionType.PARTIAL,
+              onChange: (key, value) => {
+                if (value === orderlyTypes.PositionType.FULL) {
+                  setValues({
+                    position_type: orderlyTypes.PositionType.FULL,
+                    tp_order_type: orderlyTypes.OrderType.MARKET,
+                    tp_order_price: void 0,
+                    sl_order_type: orderlyTypes.OrderType.MARKET,
+                    sl_order_price: void 0
+                  });
+                  return;
+                }
+                setOrderValue("position_type", value);
+              }
+            }
+          ),
+          formattedOrder.position_type === orderlyTypes.PositionType.FULL && /* @__PURE__ */ jsxRuntime.jsxs(
+            orderlyUi.Flex,
+            {
+              justify: "start",
+              itemAlign: "start",
+              gap: 2,
+              className: "oui-mt-3 oui-w-full",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-relative oui-top-[7px] oui-size-1 oui-rounded-full oui-bg-[#D25f00]" }),
+                /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { className: "oui-text-2xs oui-text-[#D25f00]", children: t("tpsl.positionType.full.tips.market") })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { direction: "column", gap: 6, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            TPSLInputRowWidget,
+            {
+              rootOrderPrice: formattedOrder.order_price,
+              symbol: symbolInfo.symbol,
+              type: "tp",
+              side: formattedOrder.side,
+              values: tpValues,
+              errors: validated ? errors : null,
+              quote_dp: symbolInfo.quote_dp,
+              hideOrderPrice: formattedOrder.position_type === orderlyTypes.PositionType.FULL,
+              onChange: (key, value) => {
+                setOrderValue(key, value);
+              },
+              positionType: formattedOrder.position_type ?? orderlyTypes.PositionType.PARTIAL,
+              symbolLeverage: props.symbolLeverage
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            TPSLInputRowWidget,
+            {
+              rootOrderPrice: formattedOrder.order_price,
+              symbol: symbolInfo.symbol,
+              type: "sl",
+              side: formattedOrder.side,
+              values: slValues,
+              hideOrderPrice: formattedOrder.position_type === orderlyTypes.PositionType.FULL,
+              errors: validated ? errors : null,
+              inputWarnNode: isSlPriceWarning && /* @__PURE__ */ jsxRuntime.jsx(
+                orderlyUi.DotStatus,
+                {
+                  color: "warning",
+                  size: "xs",
+                  label: getErrorMsg("sl_trigger_price")
+                }
+              ),
+              quote_dp: symbolInfo.quote_dp,
+              positionType: formattedOrder.position_type ?? orderlyTypes.PositionType.PARTIAL,
+              onChange: (key, value) => {
+                setOrderValue(key, value);
+              },
+              symbolLeverage: props.symbolLeverage
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          PnlInfo,
+          {
+            tp_pnl: formattedOrder.tp_pnl,
+            sl_pnl: formattedOrder.sl_pnl,
+            className: "oui-mt-6"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { className: "oui-mt-6 oui-px-3", gap: 2, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        orderlyUi.Button,
+        {
+          size: "md",
+          fullWidth: true,
+          color: "gray",
+          variant: "outlined",
+          className: "oui-text-base-contrast-36",
+          onClick: props.onClose,
+          children: t("common.cancel")
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        orderlyUi.Button,
+        {
+          size: "md",
+          fullWidth: true,
+          color: "success",
+          className: orderlyUi.cn(
+            formattedOrder.side === orderlyTypes.OrderSide.SELL ? "oui-bg-danger-darken hover:oui-bg-danger-darken/80 active:oui-bg-danger-darken/80" : "oui-bg-success-darken hover:oui-bg-success-darken/80 active:oui-bg-success-darken/80"
+          ),
+          onClick: props.onSubmit,
+          disabled: !tpslEnable,
+          children: t("tpsl.advanced.submit")
+        }
+      )
+    ] })
+  ] });
+};
+var ArrowRightIcon = (props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "14",
+      height: "14",
+      viewBox: "0 0 14 14",
+      fill: "currentColor",
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8.03752 2.9294C7.89169 2.95857 7.74527 3.03207 7.65661 3.16624L5.33145 6.66624C5.20137 6.86224 5.20137 7.12648 5.33145 7.32248L7.65661 10.8225C7.83452 11.0902 8.20669 11.1655 8.47385 10.9864C8.74044 10.8079 8.8151 10.434 8.63719 10.1662L6.53019 6.99408L8.63719 3.82249C8.8151 3.55416 8.74044 3.18082 8.47385 3.00232C8.34027 2.91249 8.18335 2.89965 8.03752 2.9294Z" })
+    }
+  );
+};
+var useTPSLAdvanced = (props) => {
+  const { order: order2, setOrderValue, onClose } = props;
+  const [innerMetaState, setInnerMetaState] = react.useState(null);
+  const {
+    formattedOrder,
+    setValue,
+    setValues,
+    helper,
+    symbolInfo,
+    metaState,
+    ...state
+  } = orderlyHooks.useOrderEntry(order2.symbol, {
+    initialOrder: {
+      symbol: order2.symbol,
+      order_type: order2.order_type,
+      side: order2.side,
+      order_price: order2.order_price,
+      order_quantity: order2.order_quantity,
+      position_type: order2.position_type ?? orderlyTypes.PositionType.PARTIAL,
+      trigger_price: order2.trigger_price,
+      // tp_enable: isTPSLEnable(order, "tp"),
+      // sl_enable: isTPSLEnable(order, "sl"),
+      tp_trigger_price: order2.tp_trigger_price,
+      sl_trigger_price: order2.sl_trigger_price,
+      tp_order_price: order2.tp_order_price,
+      sl_order_price: order2.sl_order_price,
+      tp_order_type: order2.tp_order_type,
+      sl_order_type: order2.sl_order_type,
+      sl_pnl: order2.sl_pnl,
+      sl_offset: order2.sl_offset,
+      sl_offset_percentage: order2.sl_offset_percentage,
+      tp_pnl: order2.tp_pnl,
+      tp_offset: order2.tp_offset,
+      tp_offset_percentage: order2.tp_offset_percentage
+    }
+  });
+  const slPriceError = orderlyHooks.useTpslPriceChecker({
+    slPrice: formattedOrder.sl_trigger_price,
+    liqPrice: state.estLiqPrice,
+    side: formattedOrder.side
+  });
+  const onSubmit = () => {
+    const isSlPriceError = slPriceError?.sl_trigger_price?.type === orderlyHooks.ERROR_MSG_CODES.SL_PRICE_ERROR;
+    helper.validate(isSlPriceError ? slPriceError : void 0).then(() => {
+      props.onSubmit(formattedOrder);
+    }).catch((err) => {
+    });
+  };
+  return {
+    order: order2,
+    formattedOrder,
+    symbolInfo,
+    slPriceError,
+    estLiqPrice: state.estLiqPrice,
+    setValue,
+    setValues,
+    onSubmit,
+    onClose,
+    metaState,
+    symbolLeverage: props.symbolLeverage
+  };
+};
+var TPSLAdvancedWidget = (props) => {
+  const state = useTPSLAdvanced({
+    order: props.order,
+    setOrderValue: props.setOrderValue,
+    onSubmit: props.onSubmit,
+    onClose: props.onClose,
+    symbolLeverage: props.symbolLeverage
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(TPSLAdvancedUI, { ...state });
+};
+var TPSLAdvancedSheetId = "TPSLAdvancedSheetId";
+var TPSLAdvancedDialogId = "TPSLAdvancedDialogId";
+orderlyUi.registerSimpleSheet(TPSLAdvancedSheetId, TPSLAdvancedWidget, {
+  title: () => orderlyI18n.i18n.t("common.settings")
+});
+orderlyUi.registerSimpleDialog(TPSLAdvancedDialogId, TPSLAdvancedWidget, {
+  title: () => orderlyI18n.i18n.t("common.settings")
+});
+var useTPSLDetail = (props) => {
+  const { position } = props;
+  const symbol = position.symbol;
+  const symbolInfo = orderlyHooks.useSymbolsInfo()[symbol];
+  const { isMobile } = orderlyUi.useScreen();
+  const { t } = orderlyI18n.useTranslation();
+  const [fullPositionOrders, setFullPositionOrders] = react.useState(
+    []
+  );
+  const [partialPositionOrders, setPartialPositionOrders] = react.useState([]);
+  const [tpslOrders, { cancelAlgoOrder, cancelPostionOrdersByTypes, refresh }] = orderlyHooks.useOrderStream(
+    {
+      symbol: position.symbol,
+      status: orderlyTypes.OrderStatus.INCOMPLETE,
+      includes: [orderlyTypes.AlgoOrderRootType.POSITIONAL_TP_SL, orderlyTypes.AlgoOrderRootType.TP_SL],
+      size: 500
+    },
+    {
+      keeplive: true
+    }
+  );
+  const onCancelOrder = async (order2) => {
+    return await cancelAlgoOrder(order2.algo_order_id, order2.symbol);
+  };
+  const onCancelAllTPSLOrders = async () => {
+    return await cancelPostionOrdersByTypes(symbol, [orderlyTypes.AlgoOrderRootType.TP_SL]);
+  };
+  const showTPSLDialog = ({
+    order: order2,
+    positionType,
+    isEditing
+  }) => {
+    const dialogId = isMobile ? TPSLSheetId : TPSLDialogId;
+    orderlyUi.modal.show(dialogId, {
+      order: order2,
+      symbol: position.symbol,
+      positionType,
+      isEditing
+    });
+  };
+  const editTPSLOrder = (order2, positionType) => {
+    showTPSLDialog({ order: order2, positionType, isEditing: true });
+  };
+  const addTPSLOrder = (positionType) => {
+    showTPSLDialog({ positionType, isEditing: false });
+  };
+  react.useEffect(() => {
+    if (tpslOrders) {
+      const { fullPositionOrder, partialPositionOrders: partialPositionOrders2 } = orderlyHooks.findPositionTPSLFromOrders(tpslOrders, symbol);
+      setFullPositionOrders(fullPositionOrder ? [fullPositionOrder] : []);
+      setPartialPositionOrders(partialPositionOrders2 ?? []);
+    }
+  }, [tpslOrders, symbol]);
+  return {
+    symbolInfo,
+    position,
+    symbol,
+    fullPositionOrders,
+    partialPositionOrders,
+    cancelPostionOrdersByTypes,
+    onCancelOrder,
+    onCancelAllTPSLOrders,
+    editTPSLOrder,
+    addTPSLOrder
+  };
+};
+var TPSLDetailContext = react.createContext({});
+var TPSLDetailProvider = (props) => {
+  const symbolInfo = orderlyHooks.useSymbolsInfo()[props.symbol];
+  const estLiqPrice = orderlyHooks.useEstLiqPriceBySymbol(props.symbol);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TPSLDetailContext.Provider,
+    {
+      value: {
+        base_dp: symbolInfo("base_dp"),
+        quote_dp: symbolInfo("quote_dp"),
+        side: props.position.position_qty > 0 ? orderlyTypes.OrderSide.BUY : orderlyTypes.OrderSide.SELL,
+        position: props.position,
+        estLiqPrice
+      },
+      children: props.children
+    }
+  );
+};
+var useTPSLDetailContext = () => {
+  return react.useContext(TPSLDetailContext);
+};
+var FlexCell = (props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    orderlyUi.Flex,
+    {
+      direction: "column",
+      justify: "center",
+      itemAlign: "start",
+      className: orderlyUi.cn("oui-text-2xs oui-h-[36px]", props.className),
+      children: props.children
+    }
+  );
+};
+var EstPnlRender = ({ order: order2 }) => {
+  const { position, base_dp, quote_dp } = useTPSLDetailContext();
+  const { tp_trigger_price, sl_trigger_price } = orderlyHooks.findTPSLFromOrder(order2);
+  let tp_unrealPnl = void 0;
+  let sl_unrealPnl = void 0;
+  const qty = new orderlyUtils.Decimal(order2.quantity).eq(0) ? position.position_qty : order2.quantity;
+  const side = position.position_qty > 0 ? orderlyTypes.OrderSide.BUY : orderlyTypes.OrderSide.SELL;
+  const openPrice = position?.average_open_price;
+  if (tp_trigger_price) {
+    const direction = orderlyUtils.getTPSLDirection({
+      side,
+      type: "tp",
+      closePrice: tp_trigger_price,
+      orderPrice: openPrice
+    });
+    tp_unrealPnl = orderlyUtils.formatNum.pnl(
+      orderlyPerp.positions.unrealizedPnL({
+        qty,
+        openPrice,
+        // markPrice: unRealizedPrice,
+        markPrice: tp_trigger_price
+      })
+    )?.abs().mul(direction).toNumber();
+  }
+  if (sl_trigger_price) {
+    const direction = orderlyUtils.getTPSLDirection({
+      side,
+      type: "sl",
+      closePrice: sl_trigger_price,
+      orderPrice: openPrice
+    });
+    sl_unrealPnl = orderlyUtils.formatNum.pnl(
+      orderlyPerp.positions.unrealizedPnL({
+        qty,
+        openPrice,
+        // markPrice: unRealizedPrice,
+        markPrice: sl_trigger_price
+      })
+    )?.abs().mul(direction).toNumber();
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    orderlyUi.Flex,
+    {
+      gap: 2,
+      direction: "column",
+      justify: "between",
+      itemAlign: "start",
+      className: "oui-text-2xs",
+      children: [
+        tp_unrealPnl && /* @__PURE__ */ jsxRuntime.jsx(FlexCell, { children: /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text.numeral, { dp: 2, rm: orderlyUtils.Decimal.ROUND_DOWN, coloring: true, padding: false, children: tp_unrealPnl }) }),
+        sl_unrealPnl && /* @__PURE__ */ jsxRuntime.jsx(FlexCell, { children: /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text.numeral, { dp: 2, rm: orderlyUtils.Decimal.ROUND_DOWN, coloring: true, padding: false, children: sl_unrealPnl }) })
+      ]
+    }
+  );
+};
+var OrderPriceRender = ({ order: order2 }) => {
+  const { quote_dp } = useTPSLDetailContext();
+  const { tp_order_price, sl_order_price } = orderlyHooks.findTPSLOrderPriceFromOrder(order2);
+  const { t } = orderlyI18n.useTranslation();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    orderlyUi.Flex,
+    {
+      gap: 2,
+      direction: "column",
+      justify: "between",
+      itemAlign: "start",
+      className: "oui-text-2xs",
+      children: [
+        tp_order_price && /* @__PURE__ */ jsxRuntime.jsx(FlexCell, { children: tp_order_price === orderlyTypes.OrderType.MARKET ? /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { children: t("common.market") }) : /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text.numeral, { dp: quote_dp, rm: orderlyUtils.Decimal.ROUND_DOWN, padding: false, children: tp_order_price }) }),
+        sl_order_price && /* @__PURE__ */ jsxRuntime.jsx(FlexCell, { children: sl_order_price === orderlyTypes.OrderType.MARKET ? /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { children: t("common.market") }) : /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text.numeral, { dp: quote_dp, rm: orderlyUtils.Decimal.ROUND_DOWN, padding: false, children: sl_order_price }) })
+      ]
+    }
+  );
+};
+var QtyRender = ({ order: order2 }) => {
+  const { position, base_dp } = useTPSLDetailContext();
+  const { tp_trigger_price, sl_trigger_price } = orderlyHooks.findTPSLFromOrder(order2);
+  const quantity = react.useMemo(() => {
+    if (order2.quantity === 0) {
+      return -position.position_qty;
+    }
+    return position.position_qty > 0 ? -order2.quantity : order2.quantity;
+  }, [order2.quantity, position.position_qty]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    orderlyUi.Flex,
+    {
+      direction: "column",
+      justify: "start",
+      itemAlign: "start",
+      className: "oui-h-full oui-text-2xs",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(FlexCell, { children: /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text.numeral, { dp: base_dp, rm: orderlyUtils.Decimal.ROUND_DOWN, padding: false, children: quantity }) }),
+        tp_trigger_price && sl_trigger_price && /* @__PURE__ */ jsxRuntime.jsx(FlexCell, { children: /* @__PURE__ */ jsxRuntime.jsx("div", {}) })
+      ]
+    }
+  );
+};
+var TriggerPrice = ({ order: order2 }) => {
+  const { quote_dp } = useTPSLDetailContext();
+  const { tp_trigger_price, sl_trigger_price } = orderlyHooks.findTPSLFromOrder(order2);
+  const { t } = orderlyI18n.useTranslation();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    orderlyUi.Flex,
+    {
+      gap: 1,
+      direction: "column",
+      justify: "between",
+      itemAlign: "start",
+      className: "oui-text-2xs",
+      children: [
+        tp_trigger_price && /* @__PURE__ */ jsxRuntime.jsx(FlexCell, { children: /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { direction: "column", justify: "start", itemAlign: "start", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { className: "oui-text-base-contrast-36", children: t("common.market") }),
+          /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text.numeral, { dp: quote_dp, rm: orderlyUtils.Decimal.ROUND_DOWN, padding: false, children: tp_trigger_price })
+        ] }) }),
+        sl_trigger_price && /* @__PURE__ */ jsxRuntime.jsx(FlexCell, { children: /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { direction: "column", justify: "start", itemAlign: "start", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { className: "oui-text-base-contrast-36", children: t("common.market") }),
+          /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text.numeral, { dp: quote_dp, rm: orderlyUtils.Decimal.ROUND_DOWN, padding: false, children: sl_trigger_price })
+        ] }) })
+      ]
+    }
+  );
+};
+var CloseToLiqPriceIcon = ({
+  slPriceError,
+  className
+}) => {
+  const { t } = orderlyI18n.useTranslation();
+  const { isMobile } = orderlyUi.useScreen();
+  const { getErrorMsg } = orderlyReactApp.useOrderEntryFormErrorMsg(slPriceError);
+  const isSlPriceWarning = slPriceError?.sl_trigger_price?.type === orderlyHooks.ERROR_MSG_CODES.SL_PRICE_WARNING;
+  const icon = /* @__PURE__ */ jsxRuntime.jsx(
+    orderlyUi.ExclamationFillIcon,
+    {
+      onMouseEnter: (e) => e.stopPropagation(),
+      onMouseLeave: (e) => e.stopPropagation(),
+      onPointerEnter: (e) => e.stopPropagation(),
+      onPointerLeave: (e) => e.stopPropagation(),
+      size: 14,
+      className: orderlyUi.cn(
+        "oui-text-warning-darken hover:oui-cursor-pointer",
+        className
+      )
+    }
+  );
+  if (!isSlPriceWarning || !slPriceError)
+    return null;
+  if (isMobile) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: (e) => {
+          orderlyUi.modal.alert({
+            title: t("common.tips"),
+            message: getErrorMsg("sl_trigger_price")
+          });
+        },
+        className: "oui-px-1",
+        children: icon
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    orderlyUi.Tooltip,
+    {
+      content: getErrorMsg("sl_trigger_price"),
+      className: "oui-max-w-[240px] oui-text-base-contrast-80",
+      children: icon
+    }
+  );
+};
+CloseToLiqPriceIcon.displayName = "CloseToLiqPriceIcon";
+var TypeRender = ({ order: order2 }) => {
+  const { side, estLiqPrice } = useTPSLDetailContext();
+  const { tp_trigger_price, sl_trigger_price } = orderlyHooks.findTPSLFromOrder(order2);
+  const { t } = orderlyI18n.useTranslation();
+  const slPriceError = orderlyHooks.useTpslPriceChecker({
+    slPrice: sl_trigger_price?.toString() ?? void 0,
+    liqPrice: estLiqPrice ?? null,
+    side
+  });
+  const isSlPriceWarning = slPriceError?.sl_trigger_price?.type === orderlyHooks.ERROR_MSG_CODES.SL_PRICE_WARNING;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    orderlyUi.Flex,
+    {
+      direction: "column",
+      justify: "between",
+      itemAlign: "start",
+      className: "oui-text-2xs",
+      children: [
+        tp_trigger_price && /* @__PURE__ */ jsxRuntime.jsx(FlexCell, { children: /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { className: "oui-text-trade-profit", children: t("tpsl.tp") }) }),
+        sl_trigger_price && /* @__PURE__ */ jsxRuntime.jsxs(FlexCell, { className: "oui-flex-row oui-items-center oui-gap-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { className: "oui-text-trade-loss", children: t("tpsl.sl") }),
+          isSlPriceWarning && /* @__PURE__ */ jsxRuntime.jsx(CloseToLiqPriceIcon, { slPriceError })
+        ] })
+      ]
+    }
+  );
+};
+var useColumn = (props) => {
+  const { t } = orderlyI18n.useTranslation();
+  const { isMobile } = orderlyUi.useScreen();
+  const { onCancelOrder } = props;
+  const columns = react.useMemo(() => {
+    const moblieColumns = [
+      {
+        title: t("tpsl.tpslDetail.qty"),
+        dataIndex: "quantity",
+        width: 70,
+        className: "oui-py-2",
+        render: (_, record) => /* @__PURE__ */ jsxRuntime.jsx(QtyRender, { order: record })
+      },
+      {
+        title: t("common.type"),
+        dataIndex: "type",
+        width: 35,
+        className: "oui-pl-1 oui-py-2",
+        render: (_, record) => /* @__PURE__ */ jsxRuntime.jsx(TypeRender, { order: record })
+      },
+      {
+        title: t("common.trigger"),
+        dataIndex: "trigger",
+        width: 70,
+        className: "oui-pl-1 oui-py-2",
+        render: (_, record) => {
+          return /* @__PURE__ */ jsxRuntime.jsx(TriggerPrice, { order: record });
+        }
+      },
+      {
+        title: t("common.price"),
+        dataIndex: "price",
+        width: 70,
+        className: "oui-py-2",
+        render: (_, record) => /* @__PURE__ */ jsxRuntime.jsx(OrderPriceRender, { order: record })
+      },
+      {
+        title: /* @__PURE__ */ jsxRuntime.jsx(
+          orderlyUi.Tooltip,
+          {
+            className: "oui-max-w-[280px] oui-bg-base-8 oui-p-3 oui-text-2xs oui-text-base-contrast",
+            content: t("tpsl.tpslDetail.estPnl.tooltip"),
+            children: /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { className: "oui-underline oui-decoration-dashed oui-underline-offset-2", children: t("tpsl.tpslDetail.estPnl") })
+          }
+        ),
+        dataIndex: "estpnl",
+        width: 70,
+        className: "!oui-pr-0 oui-py-2",
+        render: (_, record) => /* @__PURE__ */ jsxRuntime.jsx(EstPnlRender, { order: record })
+      }
+    ];
+    const desktopColums = [
+      {
+        title: t("tpsl.tpslDetail.qty"),
+        dataIndex: "quantity",
+        width: 70,
+        className: orderlyUi.cn(" oui-py-2 !oui-pl-5"),
+        render: (_, record) => /* @__PURE__ */ jsxRuntime.jsx(QtyRender, { order: record })
+      },
+      {
+        title: t("common.type"),
+        dataIndex: "type",
+        width: 35,
+        className: "oui-pl-1 oui-py-2",
+        render: (_, record) => /* @__PURE__ */ jsxRuntime.jsx(TypeRender, { order: record })
+      },
+      {
+        title: t("common.trigger"),
+        dataIndex: "trigger",
+        width: 70,
+        className: "oui-pl-1 oui-py-2",
+        render: (_, record) => {
+          return /* @__PURE__ */ jsxRuntime.jsx(TriggerPrice, { order: record });
+        }
+      },
+      {
+        title: t("common.price"),
+        dataIndex: "price",
+        width: 70,
+        className: "oui-pl-1 oui-py-2",
+        render: (_, record) => /* @__PURE__ */ jsxRuntime.jsx(OrderPriceRender, { order: record })
+      },
+      {
+        title: /* @__PURE__ */ jsxRuntime.jsx(
+          orderlyUi.Tooltip,
+          {
+            className: "oui-max-w-[280px] oui-bg-base-8 oui-p-3 oui-text-2xs oui-text-base-contrast",
+            content: t("tpsl.tpslDetail.estPnl.tooltip"),
+            children: /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { className: "oui-underline oui-decoration-dashed oui-underline-offset-2", children: t("tpsl.tpslDetail.estPnl") })
+          }
+        ),
+        dataIndex: "estpnl",
+        width: 70,
+        className: "oui-pl-1 oui-py-2",
+        render: (_, record) => /* @__PURE__ */ jsxRuntime.jsx(EstPnlRender, { order: record })
+      },
+      {
+        title: "",
+        dataIndex: "delete",
+        width: 50,
+        className: orderlyUi.cn("oui-py-2 !oui-pr-5"),
+        render: (_, record) => {
+          return /* @__PURE__ */ jsxRuntime.jsx(CancelAllBtn, { order: record, onCancelOrder });
+        }
+      }
+    ];
+    if (isMobile) {
+      return moblieColumns;
+    }
+    return desktopColums;
+  }, [t, isMobile]);
+  return columns;
+};
+var DeleteIcon = (props) => {
+  const { size = 18 } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 18 18",
+      fill: "currentColor",
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5.48081 15.375C5.10681 15.375 4.78731 15.2426 4.52231 14.9777C4.25744 14.7127 4.125 14.3932 4.125 14.0192V4.50004H3.375V3.37505H6.75V2.71167H11.25V3.37505H14.625V4.50004H13.875V14.0192C13.875 14.3981 13.7438 14.7188 13.4813 14.9813C13.2188 15.2438 12.8981 15.375 12.5192 15.375H5.48081ZM12.75 4.50004H5.25V14.0192C5.25 14.0866 5.27162 14.1419 5.31487 14.1852C5.35812 14.2284 5.41344 14.25 5.48081 14.25H12.5192C12.5769 14.25 12.6298 14.226 12.6778 14.1779C12.7259 14.1299 12.75 14.077 12.75 14.0192V4.50004ZM7.053 12.75H8.17781V6.00004H7.053V12.75ZM9.82219 12.75H10.947V6.00004H9.82219V12.75Z" })
+    }
+  );
+};
+var CancelAllBtn = (props) => {
+  const [loading, setLoading] = react.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    orderlyUi.ThrottledButton,
+    {
+      size: "sm",
+      loading,
+      variant: "text",
+      color: "gray",
+      onClick: (e) => {
+        e.stopPropagation();
+        setLoading(true);
+        props.onCancelOrder?.(props.order).then(
+          () => {
+          },
+          (error) => {
+            orderlyUi.toast.error(error.message);
+          }
+        ).finally(() => {
+          setLoading(false);
+        });
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(DeleteIcon, { className: "oui-text-base-contrast-54 hover:oui-text-base-contrast oui-cursor-pointer" })
+    }
+  );
+};
+var OrdersTable = (props) => {
+  const { orders } = props;
+  const columns = useColumn({ onCancelOrder: props.onCancelOrder });
+  return (
+    // <ScrollArea className={cn( props.className)}>
+    /* @__PURE__ */ jsxRuntime.jsx(
+      orderlyUiConnector.AuthGuardDataTable,
+      {
+        columns,
+        dataSource: orders,
+        className: "oui-bg-transparent oui-text-2xs",
+        bordered: true,
+        classNames: {
+          root: orderlyUi.cn(props.className),
+          header: "!oui-bg-base-8",
+          scroll: orderlyUi.cn(
+            !orders || orders.length === 0 ? "!oui-min-h-[170px]" : "!oui-min-h-[100px]"
+          )
+        },
+        onRow: (record) => {
+          return {
+            className: orderlyUi.cn(
+              "oui-h-[53px] oui-cursor-svg-edit !oui-border-none !oui-p-0"
+            ),
+            onClick: () => {
+              props.editTPSLOrder(record);
+            }
+          };
+        }
+      }
+    )
+  );
+};
+var OrdersTableMobile = (props) => {
+  const { t } = orderlyI18n.useTranslation();
+  const { orders } = props;
+  const columns = useColumn({ onCancelOrder: () => Promise.resolve() });
+  const orderIds = react.useMemo(() => {
+    return orders.reduce(
+      (acc, curr) => {
+        acc[curr.algo_order_id] = true;
+        return acc;
+      },
+      {}
+    );
+  }, [orders]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    orderlyUiConnector.AuthGuardDataTable,
+    {
+      columns,
+      dataSource: orders,
+      expanded: orderIds,
+      bordered: true,
+      getRowCanExpand: () => true,
+      expandRowRender: (row) => {
+        return /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { gap: 2, justify: "end", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            orderlyUi.Button,
+            {
+              variant: "outlined",
+              size: "sm",
+              color: "gray",
+              className: "oui-h-6 oui-text-2xs oui-text-base-contrast-54",
+              onClick: () => props.editTPSLOrder(row.original),
+              children: t("common.edit")
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            DeleteBtn,
+            {
+              order: row.original,
+              onCancelOrder: props.canCancelOrder
+            }
+          )
+        ] });
+      },
+      className: "oui-bg-transparent oui-px-2 oui-text-2xs",
+      classNames: {
+        scroll: orderlyUi.cn(
+          !orders || orders.length === 0 ? "!oui-min-h-[170px]" : "!oui-min-h-[100px]"
+        )
+      },
+      onRow: () => {
+        return {
+          className: orderlyUi.cn(
+            "oui-h-[53px] oui-cursor-svg-edit !oui-border-none !oui-p-0"
+          )
+        };
+      },
+      generatedRowKey: (record) => record.algo_order_id
+    }
+  );
+};
+var DeleteBtn = (props) => {
+  const [loading, setLoading] = react.useState(false);
+  const { t } = orderlyI18n.useTranslation();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    orderlyUi.ThrottledButton,
+    {
+      className: "oui-h-6 oui-text-2xs oui-text-base-contrast-54",
+      size: "sm",
+      loading,
+      variant: "outlined",
+      color: "gray",
+      onClick: (e) => {
+        e.stopPropagation();
+        setLoading(true);
+        props.onCancelOrder?.(props.order).then(
+          () => {
+          },
+          (error) => {
+            orderlyUi.toast.error(error.message);
+          }
+        ).finally(() => {
+          setLoading(false);
+        });
+      },
+      children: t("common.delete")
+    }
+  );
+};
+var TPSLDetailUI = (props) => {
+  const { isMobile } = orderlyUi.useScreen();
+  const {
+    position,
+    fullPositionOrders,
+    partialPositionOrders,
+    onCancelOrder,
+    onCancelAllTPSLOrders,
+    editTPSLOrder,
+    addTPSLOrder,
+    symbolInfo
+  } = props;
+  const { estLiqPrice } = useTPSLDetailContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Box, { children: /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.ScrollArea, { className: orderlyUi.cn(isMobile && "oui-h-[calc(100vh-100px)]"), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      OrderInfo,
+      {
+        order: {
+          symbol: position.symbol,
+          order_quantity: position.position_qty.toString(),
+          order_price: position.average_open_price.toString()
+        },
+        estLiqPrice,
+        symbolLeverage: position.leverage,
+        baseDP: symbolInfo("base_dp"),
+        quoteDP: symbolInfo("quote_dp"),
+        classNames: {
+          root: orderlyUi.cn("oui-mb-6 oui-gap-3 oui-px-5"),
+          container: "oui-gap-x-[30px]"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      FullPositionPart,
+      {
+        position,
+        orders: fullPositionOrders,
+        onCancelOrder,
+        onCancelAllTPSLOrders,
+        editTPSLOrder,
+        addTPSLOrder
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      PartialPositionPart,
+      {
+        position,
+        orders: partialPositionOrders,
+        onCancelOrder,
+        onCancelAllTPSLOrders,
+        editTPSLOrder,
+        addTPSLOrder
+      }
+    )
+  ] }) });
+};
+var FullPositionPart = (props) => {
+  const [open, setOpen] = react.useState(true);
+  const { orders } = props;
+  const { isMobile } = orderlyUi.useScreen();
+  return /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Box, { className: "oui-mt-6", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      orderlyUi.Box,
+      {
+        className: orderlyUi.cn("oui-flex oui-items-center oui-justify-between oui-px-5"),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            PositionTypeDescription,
+            {
+              positionType: orderlyTypes.PositionType.FULL,
+              open,
+              onOpenChange: setOpen
+            }
+          ),
+          orders && orders.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Flex, { gap: 2, children: /* @__PURE__ */ jsxRuntime.jsx(
+            AddButton,
+            {
+              positionType: orderlyTypes.PositionType.FULL,
+              position: props.position,
+              addTPSLOrder: props.addTPSLOrder
+            }
+          ) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      orderlyUi.Box,
+      {
+        className: orderlyUi.cn(
+          "oui-overflow-hidden oui-transition-[height] oui-duration-150",
+          open ? "oui-h-auto" : "oui-h-0 oui-pb-4"
+        ),
+        children: isMobile ? /* @__PURE__ */ jsxRuntime.jsx(
+          OrdersTableMobile,
+          {
+            orders,
+            editTPSLOrder: (order2) => props.editTPSLOrder(order2, orderlyTypes.PositionType.FULL),
+            canCancelOrder: props.onCancelOrder
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
+          OrdersTable,
+          {
+            orders,
+            editTPSLOrder: (order2) => {
+              props.editTPSLOrder(order2, orderlyTypes.PositionType.FULL);
+            },
+            onCancelOrder: props.onCancelOrder
+          }
+        )
+      }
+    )
+  ] });
+};
+var PartialPositionPart = (props) => {
+  const [open, setOpen] = react.useState(true);
+  const { orders } = props;
+  const { isMobile } = orderlyUi.useScreen();
+  return /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Box, { className: "oui-pt-6", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      orderlyUi.Box,
+      {
+        className: orderlyUi.cn(
+          "oui-flex oui-items-center oui-justify-between",
+          "oui-px-5",
+          isMobile ? "oui-flex-col oui-items-start oui-justify-start oui-gap-[11px]" : "oui-flex-row oui-items-center oui-justify-between"
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            PositionTypeDescription,
+            {
+              positionType: orderlyTypes.PositionType.PARTIAL,
+              open,
+              onOpenChange: setOpen
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { gap: 2, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              AddButton,
+              {
+                positionType: orderlyTypes.PositionType.PARTIAL,
+                position: props.position,
+                addTPSLOrder: props.addTPSLOrder
+              }
+            ),
+            orders && orders.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+              CancelAllBtn2,
+              {
+                canCancelAll: orders && orders.length > 0,
+                onCancelAllTPSLOrders: props.onCancelAllTPSLOrders
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      orderlyUi.Box,
+      {
+        className: orderlyUi.cn(
+          "oui-overflow-hidden oui-transition-[height] oui-duration-150",
+          open ? "oui-h-auto" : "oui-h-0 oui-pb-4"
+        ),
+        children: isMobile ? /* @__PURE__ */ jsxRuntime.jsx(
+          OrdersTableMobile,
+          {
+            orders,
+            editTPSLOrder: (order2) => props.editTPSLOrder(order2, orderlyTypes.PositionType.PARTIAL),
+            canCancelOrder: props.onCancelOrder
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
+          OrdersTable,
+          {
+            className: "oui-h-[300px]",
+            orders,
+            editTPSLOrder: (order2) => {
+              props.editTPSLOrder(order2, orderlyTypes.PositionType.PARTIAL);
+            },
+            onCancelOrder: props.onCancelOrder
+          }
+        )
+      }
+    )
+  ] });
+};
+var PositionTypeDescription = (props) => {
+  const { t } = orderlyI18n.useTranslation();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    orderlyUi.Flex,
+    {
+      gap: 1,
+      itemAlign: "center",
+      justify: "start",
+      className: "oui-text-2xs",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          orderlyUi.Flex,
+          {
+            itemAlign: "center",
+            justify: "start",
+            gap: 1,
+            className: "oui-cursor-pointer",
+            onClick: () => props.onOpenChange(!props.open),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                orderlyUi.ChevronDownIcon,
+                {
+                  size: 12,
+                  color: "white",
+                  className: orderlyUi.cn(
+                    "oui-cursor-pointer oui-transition-transform",
+                    props.open && "oui-rotate-180"
+                  )
+                }
+              ),
+              props.positionType === orderlyTypes.PositionType.FULL ? /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { children: t("tpsl.positionType.full") }) : /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { children: t("tpsl.positionType.partial") })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          orderlyUi.Tooltip,
+          {
+            className: "oui-w-[280px] oui-p-3",
+            content: props.positionType === orderlyTypes.PositionType.FULL ? t("tpsl.positionType.full.tips") : t("tpsl.positionType.partial.tips"),
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              orderlyUi.ExclamationFillIcon,
+              {
+                className: "oui-cursor-pointer oui-text-base-contrast-54",
+                size: 12
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+var AddButton = (props) => {
+  const { t } = orderlyI18n.useTranslation();
+  const onAdd = () => {
+    props.addTPSLOrder(props.positionType);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    orderlyUi.ThrottledButton,
+    {
+      variant: "outlined",
+      size: "sm",
+      color: "gray",
+      className: "oui-h-6 oui-w-[94px] oui-text-2xs",
+      onClick: onAdd,
+      children: t("tpsl.add")
+    }
+  );
+};
+var CancelAllBtn2 = (props) => {
+  const [loading, setLoading] = react.useState(false);
+  const { t } = orderlyI18n.useTranslation();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    orderlyUi.ThrottledButton,
+    {
+      loading,
+      variant: "outlined",
+      disabled: !props.canCancelAll,
+      size: "sm",
+      color: "gray",
+      className: "oui-h-6  oui-w-[94px] oui-text-2xs disabled:oui-border-base-contrast-16 disabled:oui-bg-transparent disabled:oui-text-base-contrast-20",
+      onClick: () => {
+        setLoading(true);
+        props.onCancelAllTPSLOrders().then(
+          () => {
+          },
+          (error) => {
+            orderlyUi.toast.error(error.message);
+          }
+        ).finally(() => {
+          setLoading(false);
+        });
+      },
+      children: t("tpsl.cancelAll")
+    }
+  );
+};
+var TPSLDetailWidget = (props) => {
+  const state = useTPSLDetail(props);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TPSLDetailProvider,
+    {
+      symbol: props.position.symbol,
+      position: props.position,
+      children: /* @__PURE__ */ jsxRuntime.jsx(TPSLDetailUI, { ...state })
+    }
+  );
+};
+var TPSLDetailDialogId = "TPSLDetailDialogId ";
+var TPSLDetailSheetId = "TPSLDetailSheetId";
+orderlyUi.registerSimpleDialog(TPSLDetailDialogId, TPSLDetailWidget, {
+  classNames: {
+    content: "oui-w-[420px] lg:oui-pt-4 lg:oui-pb-2 !oui-px-0",
+    body: "lg:oui-py-0"
+  }
+});
+orderlyUi.registerSimpleSheet(TPSLDetailSheetId, TPSLDetailWidget, {
+  classNames: {
+    content: "!oui-p-0"
+  }
+});
+var useTPSLSimpleDialog = (options) => {
+  const { type, triggerPrice, symbol } = options;
+  const symbolInfo = orderlyHooks.useSymbolsInfo();
+  const [{ rows: positions }, positionsInfo] = orderlyHooks.usePositionStream(symbol);
+  const position = positions?.[0];
+  react.useRef(orderlyTypes.AlgoOrderRootType.TP_SL);
+  const [needConfirm] = orderlyHooks.useLocalStorage("orderly_order_confirm", true);
+  const { t } = orderlyI18n.useTranslation();
+  const [
+    tpslOrder,
+    {
+      submit,
+      deleteOrder,
+      setValue,
+      setValues,
+      validate,
+      errors,
+      isCreateMutating,
+      isUpdateMutating
+    }
+  ] = orderlyHooks.useTPSLOrder(
+    {
+      symbol,
+      position_qty: position?.position_qty,
+      average_open_price: position?.average_open_price
+    },
+    {
+      defaultOrder: void 0,
+      positionType: orderlyTypes.PositionType.PARTIAL,
+      // tpslEnable: { tp_enable: type === "tp", sl_enable: type === "sl" },
+      isEditing: false
+    }
+  );
+  const setQuantity = (value) => {
+    setValue("quantity", value);
+  };
+  const setOrderPrice = (name, value) => {
+    setValue(name, value);
+  };
+  const setPnL = (type2, value) => {
+    setValue(type2, value);
+  };
+  const maxQty = react.useMemo(
+    () => Math.abs(Number(position.position_qty)),
+    [position.position_qty]
+  );
+  react.useEffect(() => {
+    if (!maxQty) {
+      return;
+    }
+    setValue("quantity", maxQty);
+    if (type === "tp") {
+      setValue("tp_trigger_price", triggerPrice ?? "");
+    } else {
+      setValue("sl_trigger_price", triggerPrice ?? "");
+    }
+  }, [type, triggerPrice, maxQty]);
+  const onSubmit = async () => {
+    try {
+      const validOrder = await validate();
+      if (validOrder) {
+        if (!needConfirm) {
+          return submit({ accountId: position.account_id }).then(() => true).catch((err) => {
+            if (err?.message) {
+              orderlyUi.toast.error(err.message);
+            }
+            throw false;
+          });
+        }
+        return orderlyUi.modal.confirm({
+          title: t("tpsl.confirmOrder"),
+          // bodyClassName: "lg:oui-py-0",
+          onOk: async () => {
+            try {
+              const res = await submit({
+                accountId: position.account_id
+              });
+              if (res.success) {
+                return res;
+              }
+              if (res.message) {
+                orderlyUi.toast.error(res.message);
+              }
+              return false;
+            } catch (err) {
+              if (err?.message) {
+                orderlyUi.toast.error(err.message);
+              }
+              return false;
+            }
+          },
+          classNames: {
+            body: "!oui-pb-0"
+          },
+          content: /* @__PURE__ */ jsxRuntime.jsx(
+            PositionTPSLConfirm,
+            {
+              isPositionTPSL: false,
+              isEditing: false,
+              symbol,
+              qty: Number(tpslOrder.quantity),
+              maxQty,
+              tpPrice: Number(tpslOrder.tp_trigger_price),
+              slPrice: Number(tpslOrder.sl_trigger_price),
+              side: tpslOrder.side,
+              orderInfo: tpslOrder,
+              quoteDP: symbolInfo[symbol]("quote_dp"),
+              baseDP: symbolInfo[symbol]("base_dp")
+            }
+          )
+        }).then(
+          () => {
+            return true;
+          },
+          () => {
+            return Promise.reject(false);
+          }
+        );
+      }
+    } catch (error) {
+      return Promise.reject(error);
+    }
+  };
+  return {
+    symbolInfo: symbolInfo[symbol],
+    maxQty,
+    setQuantity: orderlyHooks.useMemoizedFn(setQuantity),
+    orderQuantity: tpslOrder.quantity,
+    isPosition: false,
+    TPSL_OrderEntity: tpslOrder,
+    setOrderValue: setValue,
+    setPnL,
+    setOrderPrice,
+    onSubmit,
+    errors,
+    status: {
+      isCreateMutating,
+      isUpdateMutating
+    },
+    position,
+    setValues,
+    type,
+    triggerPrice
+  };
+};
+var TPSLSimpleDialogUI = (props) => {
+  const { type, triggerPrice, errors, TPSL_OrderEntity } = props;
+  const { t } = orderlyI18n.useTranslation();
+  const { getErrorMsg } = orderlyReactApp.useOrderEntryFormErrorMsg(errors);
+  const footer = /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { width: "100%", itemAlign: "center", gap: 3, mt: 4, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      orderlyUi.Button,
+      {
+        color: "gray",
+        onClick: () => {
+          props.onComplete?.();
+          props.close?.();
+        },
+        fullWidth: true,
+        className: "oui-text-sm",
+        size: "md",
+        children: t("common.cancel")
+      },
+      "secondary"
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      orderlyUi.Button,
+      {
+        onClick: () => {
+          props.onSubmit().then(() => {
+            props.onComplete?.();
+            props.close?.();
+          });
+        },
+        fullWidth: true,
+        className: "oui-text-sm",
+        size: "md",
+        children: t("common.confirm")
+      },
+      "primary"
+    )
+  ] });
+  const errorMessage = () => {
+    const tpError = getErrorMsg("tp_trigger_price");
+    const slError = getErrorMsg("sl_trigger_price");
+    let text = "";
+    if (tpError && type === "tp") {
+      text = tpError;
+    }
+    if (slError && type === "sl") {
+      text = slError;
+    }
+    if (!text) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      orderlyUi.Flex,
+      {
+        justify: "start",
+        itemAlign: "start",
+        gap: 2,
+        className: "oui-mt-2 oui-w-full",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-relative oui-top-[7px] oui-size-1 oui-rounded-full oui-bg-danger" }),
+          /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { className: "oui-text-danger", children: text })
+        ]
+      }
+    );
+  };
+  const renderPnl = () => {
+    const { tp_pnl, sl_pnl } = TPSL_OrderEntity;
+    if (type === "sl") {
+      return /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { justify: "between", className: "oui-w-full", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { size: "2xs", children: t("tpsl.totalEstSlPnl") }),
+        sl_pnl ? /* @__PURE__ */ jsxRuntime.jsx(
+          orderlyUi.Text.numeral,
+          {
+            suffix: /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { className: "oui-ml-1 oui-text-base-contrast-36", children: "USDC" }),
+            coloring: true,
+            visible: true,
+            size: "2xs",
+            dp: 2,
+            children: Number(sl_pnl)
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { size: "2xs", children: "-- USDC" })
+      ] });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { justify: "between", className: "oui-w-full", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { size: "2xs", children: t("tpsl.totalEstTpPnl") }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        orderlyUi.Text.numeral,
+        {
+          suffix: /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { className: "oui-text-base-contrast-36 oui-ml-1", children: "USDC" }),
+          rule: "price",
+          coloring: true,
+          visible: true,
+          size: "2xs",
+          dp: 2,
+          children: tp_pnl ? Number(tp_pnl) : "--"
+        }
+      )
+    ] });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Box, { className: "oui-w-full oui-px-0.5", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      TPSLQuantity,
+      {
+        maxQty: props.maxQty,
+        quantity: Number(props.orderQuantity ?? props.maxQty),
+        baseTick: props.symbolInfo("base_tick"),
+        base_dp: props.symbolInfo("base_dp"),
+        base: props.symbolInfo("base"),
+        isEditing: false,
+        errorMsg: getErrorMsg("quantity"),
+        onQuantityChange: props.setQuantity
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      orderlyUi.Flex,
+      {
+        direction: "column",
+        itemAlign: "start",
+        className: orderlyUi.cn(
+          "oui-mt-4 oui-w-full oui-gap-1 oui-text-xs oui-text-base-contrast-36"
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { justify: "between", className: "oui-w-full", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { size: "xs", children: t("common.triggerPrice") }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              orderlyUi.Text.numeral,
+              {
+                className: "oui-text-base-contrast",
+                suffix: /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { className: "oui-ml-1 oui-text-xs oui-text-base-contrast-36", children: "USDC" }),
+                rule: "price",
+                size: "xs",
+                dp: props.symbolInfo("quote_dp"),
+                children: triggerPrice ? Number(triggerPrice) : "--"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { justify: "between", className: "oui-w-full", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { size: "xs", children: t("common.orderPrice") }),
+            /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { className: "oui-text-base-contrast", size: "xs", children: t("common.market") })
+          ] }),
+          renderPnl()
+        ]
+      }
+    ),
+    errorMessage(),
+    /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Divider, { className: "oui-my-3 oui-w-full" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      orderlyUi.Flex,
+      {
+        itemAlign: "center",
+        onClick: () => {
+          props.close?.();
+          props.showAdvancedTPSLDialog?.({
+            qty: Number(TPSL_OrderEntity.quantity)
+          });
+        },
+        className: "oui-pb-4",
+        children: /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { color: "primary", className: "oui-cursor-pointer oui-text-sm", children: t("tpsl.advancedSetting") })
+      }
+    ),
+    footer
+  ] });
+};
+var TPSLSimpleDialogWidget = (props) => {
+  const { close, onComplete, showAdvancedTPSLDialog } = props;
+  const state = useTPSLSimpleDialog(props);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TPSLSimpleDialogUI,
+    {
+      ...state,
+      close,
+      onComplete,
+      showAdvancedTPSLDialog
+    }
+  );
+};
+var TPSLSimpleSheetId = "TPSLSimpleSheetId";
+var TPSLSimpleDialogId = "TPSLSimpleDialogId";
+orderlyUi.registerSimpleSheet(TPSLSimpleSheetId, TPSLSimpleDialogWidget, {
+  classNames: {}
+});
+orderlyUi.registerSimpleDialog(TPSLSimpleDialogId, TPSLSimpleDialogWidget, {
+  classNames: {
+    content: "oui-w-[420px]"
+  }
+});
+function getInitialOrder(order2) {
+  const childOrder = order2.child_orders[0];
+  const positionType = childOrder.algo_type === orderlyTypes.AlgoOrderRootType.TP_SL ? orderlyTypes.PositionType.PARTIAL : orderlyTypes.PositionType.FULL;
+  const tpOrder = childOrder.child_orders.find(
+    (item) => item.algo_type === orderlyTypes.AlgoOrderType.TAKE_PROFIT && item.trigger_price
+  );
+  const slOrder = childOrder.child_orders.find(
+    (item) => item.algo_type === orderlyTypes.AlgoOrderType.STOP_LOSS && item.trigger_price
+  );
+  const tpslPriceInfo = {};
+  if (tpOrder) {
+    tpslPriceInfo.tp_trigger_price = tpOrder.trigger_price?.toString();
+    tpslPriceInfo.tp_order_type = typeof tpOrder.type === "string" ? tpOrder.type.replace("_ORDER", "") : void 0;
+    if (tpslPriceInfo.tp_order_type === orderlyTypes.OrderType.LIMIT) {
+      tpslPriceInfo.tp_order_price = tpOrder.price?.toString();
+    }
+  }
+  if (slOrder) {
+    tpslPriceInfo.sl_trigger_price = slOrder.trigger_price?.toString();
+    tpslPriceInfo.sl_order_type = typeof slOrder.type === "string" ? slOrder.type.replace("_ORDER", "") : void 0;
+    if (tpslPriceInfo.sl_order_type === orderlyTypes.OrderType.LIMIT) {
+      tpslPriceInfo.sl_order_price = slOrder.price?.toString();
+    }
+  }
+  return {
+    baseInfo: {
+      symbol: order2.symbol,
+      order_type: order2.type,
+      side: order2.side,
+      order_price: order2.price,
+      order_quantity: order2.quantity,
+      position_type: positionType
+      // tp_enable: !!tpOrder?.trigger_price,
+      // sl_enable: !!slOrder?.trigger_price,
+    },
+    tpslPriceInfo,
+    tpInfo: {
+      orderId: tpOrder?.algo_order_id
+    },
+    slInfo: {
+      orderId: slOrder?.algo_order_id
+    }
+  };
+}
+function isTPSLPriceChanged(originPrice, newPrice) {
+  if (newPrice === void 0 || newPrice === null) {
+    return true;
+  }
+  if (isNaN(Number(newPrice))) {
+    return false;
+  }
+  const originDeci = new orderlyUtils.Decimal(Number(originPrice));
+  const newDeci = new orderlyUtils.Decimal(Number(newPrice));
+  return !newDeci.eq(originDeci);
+}
+var useEditBracketOrder = (props) => {
+  if (!props.order) {
+    throw new orderlyTypes.SDKError("order is required for editBracketOrder");
+  }
+  const { baseInfo, tpslPriceInfo, tpInfo, slInfo } = getInitialOrder(
+    props.order
+  );
+  const [doUpdateOrder, { isMutating }] = orderlyHooks.useMutation("/v1/algo/order", "PUT");
+  const maxQty = useEditOrderMaxQty(props.order, props.order.quantity);
+  const {
+    formattedOrder,
+    setValue,
+    setValues,
+    estLiqPrice,
+    metaState,
+    symbolInfo,
+    helper,
+    ...state
+  } = orderlyHooks.useOrderEntry(props.order.symbol, {
+    initialOrder: baseInfo,
+    maxQty
+  });
+  const symbol = props.order.symbol;
+  const isPriceChanged = react.useMemo(() => {
+    let dirty = false;
+    const {
+      tp_order_price,
+      sl_order_price,
+      tp_trigger_price,
+      sl_trigger_price
+    } = formattedOrder;
+    if (tpslPriceInfo.tp_trigger_price) {
+      dirty = dirty || isTPSLPriceChanged(
+        tpslPriceInfo.tp_trigger_price,
+        tp_trigger_price ?? 0
+      );
+    }
+    if (tpslPriceInfo.tp_order_price) {
+      dirty = dirty || isTPSLPriceChanged(tpslPriceInfo.tp_order_price, tp_order_price ?? 0);
+    }
+    if (tpslPriceInfo.sl_trigger_price) {
+      dirty = dirty || isTPSLPriceChanged(
+        tpslPriceInfo.sl_trigger_price,
+        sl_trigger_price ?? 0
+      );
+    }
+    if (tpslPriceInfo.sl_order_price) {
+      dirty = dirty || isTPSLPriceChanged(tpslPriceInfo.sl_order_price, sl_order_price ?? 0);
+    }
+    return dirty;
+  }, [
+    tpslPriceInfo,
+    formattedOrder.tp_order_price,
+    formattedOrder.sl_order_price,
+    formattedOrder.tp_trigger_price,
+    formattedOrder.sl_trigger_price
+  ]);
+  react.useEffect(() => {
+    setValues({
+      ...tpslPriceInfo
+    });
+  }, [props.order, setValues]);
+  const slPriceError = orderlyHooks.useTpslPriceChecker({
+    slPrice: formattedOrder.sl_trigger_price,
+    liqPrice: estLiqPrice,
+    side: formattedOrder.side
+  });
+  const isSlPriceError = slPriceError?.sl_trigger_price?.type === orderlyHooks.ERROR_MSG_CODES.SL_PRICE_ERROR;
+  const onSubmit = async () => {
+    return helper.validate(isSlPriceError ? slPriceError : void 0).then(() => {
+      const tpOrder = {
+        order_id: tpInfo.orderId,
+        algo_type: orderlyTypes.AlgoOrderType.TAKE_PROFIT,
+        trigger_price: formattedOrder.tp_trigger_price,
+        reduce_only: true
+      };
+      if (formattedOrder.tp_order_type === orderlyTypes.OrderType.LIMIT) {
+        tpOrder.price = formattedOrder.tp_order_price;
+      }
+      const slOrder = {
+        order_id: slInfo.orderId,
+        algo_type: orderlyTypes.AlgoOrderType.STOP_LOSS,
+        trigger_price: formattedOrder.sl_trigger_price,
+        reduce_only: true
+      };
+      if (formattedOrder.sl_order_type === orderlyTypes.OrderType.LIMIT) {
+        slOrder.price = formattedOrder.sl_order_price;
+      }
+      const childOrders = [];
+      if (tpInfo.orderId) {
+        childOrders.push(tpOrder);
+      }
+      if (slInfo.orderId) {
+        childOrders.push(slOrder);
+      }
+      return doUpdateOrder({
+        order_id: props.order.algo_order_id,
+        child_orders: [
+          {
+            order_id: props.order.child_orders[0].algo_order_id,
+            child_orders: childOrders
+          }
+        ]
+      });
+    });
+  };
+  return {
+    symbol,
+    symbolInfo,
+    slPriceError,
+    estLiqPrice,
+    side: formattedOrder.side,
+    formattedOrder,
+    setValue,
+    setValues,
+    metaState,
+    onSubmit,
+    isMutating,
+    isPriceChanged
+  };
+};
+function useEditOrderMaxQty(order2, positionQty) {
+  const { reduce_only } = order2;
+  const maxQty = orderlyHooks.useMaxQty(order2.symbol, order2.side, reduce_only);
+  return react.useMemo(() => {
+    if (reduce_only) {
+      return Math.abs(positionQty ?? 0);
+    }
+    return order2.quantity + Math.abs(maxQty);
+  }, [order2.quantity, maxQty, reduce_only, positionQty]);
+}
+var EditBracketOrderUI = (props) => {
+  const { t } = orderlyI18n.useTranslation();
+  const { errors, validated } = props.metaState;
+  const { isMobile } = orderlyUi.useScreen();
+  const isSlPriceWarning = props.slPriceError?.sl_trigger_price?.type === orderlyHooks.ERROR_MSG_CODES.SL_PRICE_WARNING;
+  const { getErrorMsg } = orderlyReactApp.useOrderEntryFormErrorMsg(props.slPriceError);
+  const {
+    formattedOrder,
+    setValue: setOrderValue,
+    symbol,
+    symbolInfo,
+    setValues
+  } = props;
+  const [tpValues, setTpValuse] = react.useState({
+    // enable: false,
+    order_type: formattedOrder.tp_order_type ?? orderlyTypes.OrderType.MARKET,
+    order_price: formattedOrder.tp_order_price ?? "",
+    trigger_price: formattedOrder.tp_trigger_price ?? "",
+    PnL: formattedOrder.tp_pnl ?? "",
+    Offset: formattedOrder.tp_offset ?? "",
+    "Offset%": formattedOrder.tp_offset_percentage ?? "",
+    ROI: formattedOrder.tp_ROI ?? ""
+  });
+  const [slValues, setSlValues] = react.useState({
+    // enable: false,
+    order_type: formattedOrder.sl_order_type ?? orderlyTypes.OrderType.MARKET,
+    order_price: formattedOrder.sl_order_price ?? "",
+    trigger_price: formattedOrder.sl_trigger_price ?? "",
+    PnL: formattedOrder.sl_pnl ?? "",
+    Offset: formattedOrder.sl_offset ?? "",
+    "Offset%": formattedOrder.sl_offset_percentage ?? "",
+    ROI: formattedOrder.sl_ROI ?? ""
+  });
+  react.useEffect(() => {
+    setTpValuse((prev) => ({
+      ...prev,
+      // enable: formattedOrder.tp_enable ?? false,
+      order_type: formattedOrder.tp_order_type ?? orderlyTypes.OrderType.MARKET,
+      order_price: formattedOrder.tp_order_price ?? "",
+      trigger_price: formattedOrder.tp_trigger_price ?? "",
+      PnL: formattedOrder.tp_pnl ?? "",
+      Offset: formattedOrder.tp_offset ?? "",
+      "Offset%": formattedOrder.tp_offset_percentage ?? "",
+      ROI: formattedOrder.tp_ROI ?? ""
+    }));
+  }, [formattedOrder]);
+  react.useEffect(() => {
+    setSlValues((prev) => ({
+      ...prev,
+      // enable: formattedOrder.sl_enable ?? false,
+      order_type: formattedOrder.sl_order_type ?? orderlyTypes.OrderType.MARKET,
+      order_price: formattedOrder.sl_order_price ?? "",
+      trigger_price: formattedOrder.sl_trigger_price ?? "",
+      PnL: formattedOrder.sl_pnl ?? "",
+      Offset: formattedOrder.sl_offset ?? "",
+      "Offset%": formattedOrder.sl_offset_percentage ?? "",
+      ROI: formattedOrder.sl_ROI ?? ""
+    }));
+  }, [formattedOrder]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      orderlyUi.ScrollArea,
+      {
+        className: orderlyUi.cn("oui-flex-1", isMobile && "oui-h-[calc(100vh-200px)]"),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "", children: /* @__PURE__ */ jsxRuntime.jsx(
+            OrderInfo,
+            {
+              order: {
+                symbol,
+                order_quantity: formattedOrder.order_quantity,
+                order_price: formattedOrder.order_price
+              },
+              estLiqPrice: props.estLiqPrice ?? void 0,
+              baseDP: symbolInfo.base_dp,
+              quoteDP: symbolInfo.quote_dp
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Divider, { className: "oui-my-3" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-py-3", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                TPSLPositionTypeWidget,
+                {
+                  value: formattedOrder.position_type ?? orderlyTypes.PositionType.PARTIAL,
+                  disableSelector: true,
+                  onChange: (key, value) => {
+                    if (value === orderlyTypes.PositionType.FULL) {
+                      setValues({
+                        position_type: orderlyTypes.PositionType.FULL,
+                        tp_order_type: orderlyTypes.OrderType.MARKET,
+                        tp_order_price: void 0,
+                        sl_order_type: orderlyTypes.OrderType.MARKET,
+                        sl_order_price: void 0
+                      });
+                      return;
+                    }
+                    setOrderValue("position_type", value);
+                  }
+                }
+              ),
+              formattedOrder.position_type === orderlyTypes.PositionType.FULL && /* @__PURE__ */ jsxRuntime.jsxs(
+                orderlyUi.Flex,
+                {
+                  justify: "start",
+                  itemAlign: "start",
+                  gap: 2,
+                  className: "oui-mt-3 oui-w-full",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-relative oui-top-[7px] oui-size-1 oui-rounded-full oui-bg-[#D25f00]" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { className: "oui-text-2xs oui-text-[#D25f00]", children: t("tpsl.positionType.full.tips.market") })
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { direction: "column", gap: 6, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                TPSLInputRowWidget,
+                {
+                  disableEnableCheckbox: true,
+                  disableOrderTypeSelector: true,
+                  rootOrderPrice: formattedOrder.order_price,
+                  symbol: symbolInfo.symbol,
+                  type: "tp",
+                  side: formattedOrder.side,
+                  values: tpValues,
+                  errors: validated ? errors : null,
+                  quote_dp: symbolInfo.quote_dp,
+                  hideOrderPrice: formattedOrder.position_type === orderlyTypes.PositionType.FULL,
+                  onChange: (key, value) => {
+                    setOrderValue(key, value);
+                  },
+                  positionType: formattedOrder.position_type ?? orderlyTypes.PositionType.PARTIAL
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Divider, { className: "oui-w-full" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                TPSLInputRowWidget,
+                {
+                  disableEnableCheckbox: true,
+                  disableOrderTypeSelector: true,
+                  rootOrderPrice: formattedOrder.order_price,
+                  symbol: symbolInfo.symbol,
+                  type: "sl",
+                  side: formattedOrder.side,
+                  values: slValues,
+                  hideOrderPrice: formattedOrder.position_type === orderlyTypes.PositionType.FULL,
+                  inputWarnNode: isSlPriceWarning && /* @__PURE__ */ jsxRuntime.jsx(
+                    orderlyUi.DotStatus,
+                    {
+                      color: "warning",
+                      size: "xs",
+                      label: getErrorMsg("sl_trigger_price")
+                    }
+                  ),
+                  errors: validated ? errors : null,
+                  quote_dp: symbolInfo.quote_dp,
+                  positionType: formattedOrder.position_type ?? orderlyTypes.PositionType.PARTIAL,
+                  onChange: (key, value) => {
+                    setOrderValue(key, value);
+                  }
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              PnlInfo,
+              {
+                tp_pnl: formattedOrder.tp_pnl,
+                sl_pnl: formattedOrder.sl_pnl,
+                className: "oui-mt-6"
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      orderlyUi.Flex,
+      {
+        itemAlign: "center",
+        gap: 3,
+        mt: 5,
+        width: "100%",
+        justify: "center",
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          orderlyUi.ThrottledButton,
+          {
+            className: "oui-w-[184px]",
+            "data-testid": "tpsl-confirm",
+            disabled: !props.isPriceChanged,
+            loading: props.isMutating,
+            onClick: () => {
+              props.onSubmit().then(() => {
+                props.onClose?.();
+              }).catch((err) => {
+              });
+            },
+            children: t("common.confirm")
+          }
+        )
+      }
+    )
+  ] });
+};
+var EditBracketOrderWidget = (props) => {
+  const state = useEditBracketOrder({ order: props.order });
+  return /* @__PURE__ */ jsxRuntime.jsx(EditBracketOrderUI, { ...state, onClose: props.close });
+};
+var EditBracketOrderSheetId = "EditBracketOrderSheetId";
+var EditBracketOrderDialogId = "EditBracketOrderDialogId";
+orderlyUi.registerSimpleSheet(EditBracketOrderSheetId, EditBracketOrderWidget);
+orderlyUi.registerSimpleDialog(EditBracketOrderDialogId, EditBracketOrderWidget, {
+  classNames: {
+    content: "oui-w-[420px]"
+  }
+});
 
-exports.ArrowRightIcon = os;
-exports.EditBracketOrderDialogId = nl;
-exports.EditBracketOrderSheetId = sl;
-exports.EditBracketOrderWidget = no;
-exports.PositionTPSLConfirm = Ne;
-exports.PositionTPSLPopover = Hi;
-exports.PositionTPSLSheet = Xi;
-exports.TPSL = er;
-exports.TPSLAdvancedDialogId = us;
-exports.TPSLAdvancedSheetId = ds;
-exports.TPSLAdvancedUI = br;
-exports.TPSLAdvancedWidget = Ir;
-exports.TPSLDetailDialogId = bn;
-exports.TPSLDetailSheetId = Sn;
-exports.TPSLDetailWidget = Hr;
-exports.TPSLDialogId = fe;
-exports.TPSLPositionTypeWidget = Y;
-exports.TPSLSheetId = ze;
-exports.TPSLSimpleDialogId = Xr;
-exports.TPSLSimpleDialogUI = Ct;
-exports.TPSLSimpleDialogWidget = vt;
-exports.TPSLSimpleSheetId = Zr;
-exports.TPSLWidget = he;
-exports.useTPSLAdvanced = Or;
-exports.useTPSLBuilder = mr;
-exports.useTPSLSimpleDialog = ht;
+exports.ArrowRightIcon = ArrowRightIcon;
+exports.CloseToLiqPriceIcon = CloseToLiqPriceIcon;
+exports.EditBracketOrderDialogId = EditBracketOrderDialogId;
+exports.EditBracketOrderSheetId = EditBracketOrderSheetId;
+exports.EditBracketOrderWidget = EditBracketOrderWidget;
+exports.PositionTPSLConfirm = PositionTPSLConfirm;
+exports.PositionTPSLPopover = PositionTPSLPopover;
+exports.PositionTPSLSheet = PositionTPSLSheet;
+exports.TPSL = TPSL;
+exports.TPSLAdvancedDialogId = TPSLAdvancedDialogId;
+exports.TPSLAdvancedSheetId = TPSLAdvancedSheetId;
+exports.TPSLAdvancedUI = TPSLAdvancedUI;
+exports.TPSLAdvancedWidget = TPSLAdvancedWidget;
+exports.TPSLDetailDialogId = TPSLDetailDialogId;
+exports.TPSLDetailSheetId = TPSLDetailSheetId;
+exports.TPSLDetailWidget = TPSLDetailWidget;
+exports.TPSLDialogId = TPSLDialogId;
+exports.TPSLPositionTypeWidget = TPSLPositionTypeWidget;
+exports.TPSLSheetId = TPSLSheetId;
+exports.TPSLSimpleDialogId = TPSLSimpleDialogId;
+exports.TPSLSimpleDialogUI = TPSLSimpleDialogUI;
+exports.TPSLSimpleDialogWidget = TPSLSimpleDialogWidget;
+exports.TPSLSimpleSheetId = TPSLSimpleSheetId;
+exports.TPSLWidget = TPSLWidget;
+exports.useTPSLAdvanced = useTPSLAdvanced;
+exports.useTPSLBuilder = useTPSLBuilder;
+exports.useTPSLSimpleDialog = useTPSLSimpleDialog;
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map