@orderly.network/ui-order-entry 3.0.0-beta.0 → 3.0.0-beta.10

package/dist/index.js

@@ -547,1225 +547,799 @@ var EditIcon = (props) => {
     }
   );
 };
-var RegularFeesUI = (props) => {
-  const { t } = i18n.useTranslation();
-  const { taker, maker } = props;
-  const originalTrailingFees = /* @__PURE__ */ jsxRuntime.jsx(
-    ui.Flex,
-    {
-      itemAlign: "center",
-      justify: "between",
-      width: "100%",
-      gap: 1,
-      className: "oui-orderEntry-fees",
-      children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { width: "100%", itemAlign: "center", justify: "between", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-fees-label oui-truncate", size: "2xs", children: t("common.fees") }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          uiConnector.AuthGuard,
-          {
-            fallback: () => /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { className: "oui-truncate", size: "2xs", children: [
-              t("dmm.taker"),
-              ": --% / ",
-              t("dmm.maker"),
-              ": --%"
-            ] }),
-            children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 1, className: "oui-fees-value-container", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { className: "oui-truncate", size: "2xs", children: [
-                t("dmm.taker"),
-                ":"
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", className: "oui-text-base-contrast-80", children: taker }),
-              /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", children: "/" }),
-              /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { className: "oui-truncate", size: "2xs", children: [
-                t("dmm.maker"),
-                ":"
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", className: "oui-text-base-contrast-80", children: maker })
-            ] })
-          }
-        )
-      ] })
+function isBBOOrder(options2) {
+  const { order_type, order_type_ext } = options2;
+  const isBBO = [types.OrderType.ASK, types.OrderType.BID].includes(order_type_ext);
+  if (order_type) {
+    return order_type === types.OrderType.LIMIT && isBBO;
+  }
+  return isBBO;
+}
+function getOrderTypeByBBO(value, size) {
+  if ([types.BBOOrderType.COUNTERPARTY1, types.BBOOrderType.COUNTERPARTY5].includes(value)) {
+    return size === types.OrderSide.BUY ? types.OrderType.ASK : types.OrderType.BID;
+  }
+  if ([types.BBOOrderType.QUEUE1, types.BBOOrderType.QUEUE5].includes(value)) {
+    return size === types.OrderSide.BUY ? types.OrderType.BID : types.OrderType.ASK;
+  }
+}
+function getOrderLevelByBBO(value) {
+  if ([types.BBOOrderType.COUNTERPARTY1, types.BBOOrderType.QUEUE1].includes(value)) {
+    return types.OrderLevel.ONE;
+  }
+  if ([types.BBOOrderType.COUNTERPARTY5, types.BBOOrderType.QUEUE5].includes(value)) {
+    return types.OrderLevel.FIVE;
+  }
+}
+function getScaledPlaceOrderMessage(result) {
+  const rows = result?.data?.rows || [];
+  if (rows.length > 0) {
+    const totalCount = rows.length;
+    const successCount = rows.filter((row) => row.success).length;
+    if (successCount === totalCount) {
+      return i18n.i18n.t("orderEntry.scaledOrder.fullySuccessful", {
+        total: totalCount
+      });
     }
-  );
-  return originalTrailingFees;
-};
-var RegularFeesWidget = (props) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(RegularFeesUI, { ...props });
-};
-var FeesWidget = ({ symbol }) => {
-  const { takerFee, makerFee, rwaTakerFee, rwaMakerFee } = hooks.useFeeState();
-  const info = hooks.useRwaSymbolsInfoStore();
-  const isRwa = info?.[symbol] !== void 0;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    RegularFeesWidget,
-    {
-      taker: isRwa ? rwaTakerFee : takerFee,
-      maker: isRwa ? rwaMakerFee : makerFee
+    if (successCount === 0) {
+      return i18n.i18n.t("orderEntry.scaledOrder.allFailed");
     }
+    return i18n.i18n.t("orderEntry.scaledOrder.partiallySuccessful", {
+      successCount,
+      total: totalCount
+    });
+  }
+}
+var safeNumber = (val) => {
+  return Number.isNaN(Number(val)) ? 0 : Number(val);
+};
+var SymbolBadge = (props) => {
+  const { brokerId, brokerName, brokerNameRaw } = hooks.useBadgeBySymbol(
+    props.symbol
   );
+  const badge = brokerName ?? brokerId ?? void 0;
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.SymbolBadge, { badge, fullName: brokerNameRaw });
 };
-var options = [0.01, 0.05, 0.1];
-var SlippageEditor = React3.forwardRef((props, ref) => {
+var OrderConfirmDialog = (props) => {
+  const { symbolInfo, order, onConfirm, onCancel } = props;
+  const { quote, quote_dp, base_dp } = symbolInfo;
+  const { side, order_type, order_type_ext, level, symbol } = order;
+  const orderMarginMode = order.margin_mode;
   const { t } = i18n.useTranslation();
-  const [value, setValue] = React3.useState();
-  const [customValue, setCustomValue] = React3.useState("");
-  const [error, setError] = React3.useState(void 0);
-  React3.useImperativeHandle(ref, () => ({
-    getValue: () => customValue ? new utils.Decimal(customValue)?.toNumber() : value
-  }));
-  React3.useEffect(() => {
-    if (props.initialValue && !options.includes(props.initialValue)) {
-      setCustomValue(props.initialValue.toString());
-    } else {
-      setValue(props.initialValue);
+  const [{ rows: positions }] = hooks.usePositionStream(symbol);
+  const position = React3.useMemo(
+    () => orderMarginMode != null ? positions?.find(
+      (row) => row.symbol === symbol && row.margin_mode === orderMarginMode
+    ) : positions?.[0],
+    [positions, symbol, orderMarginMode]
+  );
+  const positionQty = position?.position_qty;
+  const [_, setNeedConfirm] = hooks.useLocalStorage("orderly_order_confirm", true);
+  const renderPositionType = () => {
+    if (order.position_type === types.PositionType.FULL) {
+      return /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: t("tpsl.positionType.full") });
     }
-  }, [props.initialValue, open]);
-  const onClick = (val) => {
-    setValue(val);
-    setCustomValue("");
-    setError(void 0);
+    return /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: t("tpsl.positionType.partial") });
   };
-  const onValueChange = (val) => {
-    if (!val) {
-      setCustomValue(val);
-      return;
+  const renderPrice = () => {
+    if (order_type === types.OrderType.MARKET || order_type === types.OrderType.STOP_MARKET) {
+      return /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { intensity: 80, children: t("common.marketPrice") });
     }
-    const d = new utils.Decimal(val);
-    setValue(void 0);
-    if (d.gt(3)) {
-      setCustomValue("3");
-      setError(t("orderEntry.slippage.error.exceed"));
-    } else {
-      setCustomValue(val);
-      setError(void 0);
+    if (isBBOOrder({ order_type, order_type_ext })) {
+      const bboType = utils.getBBOType({
+        type: order_type_ext,
+        side,
+        level
+      });
+      const label = {
+        [types.BBOOrderType.COUNTERPARTY1]: t("orderEntry.bbo.counterparty1"),
+        [types.BBOOrderType.COUNTERPARTY5]: t("orderEntry.bbo.counterparty5"),
+        [types.BBOOrderType.QUEUE1]: t("orderEntry.bbo.queue1"),
+        [types.BBOOrderType.QUEUE5]: t("orderEntry.bbo.queue5")
+      }[bboType];
+      return /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { intensity: 80, children: label });
     }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Text.numeral,
+      {
+        unit: quote,
+        rule: "price",
+        className: "oui-text-base-contrast",
+        unitClassName: "oui-text-base-contrast-36 oui-ml-1",
+        dp: quote_dp,
+        padding: false,
+        children: order.order_price
+      }
+    );
   };
-  const toolTipButton = props.isMobile ? /* @__PURE__ */ jsxRuntime.jsx(
-    "button",
-    {
-      onClick: () => {
-        ui.modal.alert({
-          title: t("common.tips"),
-          message: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", children: t("orderEntry.slippage.tips") })
-        });
-      },
-      children: /* @__PURE__ */ jsxRuntime.jsx(ui.ExclamationFillIcon, { className: "oui-text-base-contrast-54", size: 16 })
+  const renderTPSLPrice = ({
+    price,
+    isOrderPrice,
+    isEnable,
+    colorType
+  }) => {
+    if (!isEnable) {
+      return /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-text-base-contrast-36", children: "-- USDC" });
     }
-  ) : /* @__PURE__ */ jsxRuntime.jsx(
-    ui.Tooltip,
-    {
-      content: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { intensity: 80, size: "2xs", children: t("orderEntry.slippage.tips") }),
-      className: "oui-w-[260px] oui-bg-base-6",
-      arrow: { className: "oui-fill-base-6" },
-      children: /* @__PURE__ */ jsxRuntime.jsx(ui.TooltipTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.ExclamationFillIcon, { className: "oui-text-base-contrast-54", size: 16 }) })
+    if (!price) {
+      if (isOrderPrice) {
+        return /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-text-base-contrast-36", children: t("common.marketPrice") });
+      }
     }
-  );
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-orderEntry-slippageEditor oui-text-2xs", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { mb: 2, gapX: 1, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xs", children: t("orderEntry.slippage") }),
-      toolTipButton
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gapX: 2, children: [
-      options.map((item) => {
-        const isActive = value === item;
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          SlippageItem,
-          {
-            value: item,
-            isActive,
-            onClick: () => {
-              onClick(item);
-            }
-          },
-          item
-        );
-      }),
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Text.numeral,
+      {
+        unit: "USDC",
+        rule: "price",
+        className: ui.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: quote_dp,
+        padding: false,
+        children: price
+      }
+    );
+  };
+  const renderTPSLQty = () => {
+    if (!positionQty || !order.order_quantity) {
+      return null;
+    }
+    let qty = new utils.Decimal(order.order_quantity);
+    if (order.position_type === types.PositionType.FULL) {
+      qty = qty.plus(new utils.Decimal(positionQty ?? 0));
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "between", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: order.position_type === types.PositionType.FULL ? t("common.positionQty") : t("common.orderQty") }),
       /* @__PURE__ */ jsxRuntime.jsx(
-        ui.Input,
+        ui.Text.numeral,
         {
-          suffix: "%",
-          formatters: [
-            ui.inputFormatter.numberFormatter,
-            ui.inputFormatter.dpFormatter(2)
-          ],
-          value: customValue,
-          onValueChange,
-          classNames: {
-            root: ui.cn(
-              "oui-slippageEditor-customInput",
-              "oui-rounded-md oui-bg-base-6",
-              "oui-h-[40px] oui-w-[74px]"
-            ),
-            input: "oui-text-base-contrast",
-            additional: "oui-pl-1"
-          }
+          rule: "price",
+          dp: base_dp,
+          padding: false,
+          className: "oui-text-base-contrast",
+          children: qty.toNumber()
         }
       )
-    ] }),
-    !!error && /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { mt: 5, className: "-oui-mb-5", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", color: "danger", children: error }) })
-  ] });
-});
-var SlippageItem = ({ value, isActive, onClick }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    ui.Flex,
-    {
-      intensity: 600,
-      justify: "center",
-      itemAlign: "center",
-      r: "md",
-      width: 74,
-      height: 40,
-      className: ui.cn(
-        "oui-slippageEditor-option",
-        "oui-cursor-pointer oui-select-none",
-        isActive ? "oui-bg-primary-light oui-text-primary-contrast/80" : "oui-text-base-contrast-80"
-      ),
-      onClick,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: "sm", children: [
-        value,
-        "%"
-      ] })
-    }
-  );
-};
-var SlippageCell = (props) => {
-  const { t } = i18n.useTranslation();
-  const [open2, { setTrue: setOpen, setFalse: setClose, toggle }] = hooks.useBoolean(false);
-  const { isMobile } = ui.useScreen();
-  const slippageRef = React3.useRef(null);
-  const onConfirm = () => {
-    const val = slippageRef.current?.getValue();
-    props.setSlippage(!val ? "1" : val.toString());
-    setClose();
-    return Promise.resolve(true);
+    ] });
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      ui.SimpleDialog,
-      {
-        open: open2,
-        onOpenChange: toggle,
-        title: t("common.settings"),
-        contentProps: { size: isMobile ? "xs" : "sm" },
-        classNames: {
-          footer: "oui-orderEntry-slippage-footer",
-          body: "oui-orderEntry-slippage-body"
-        },
-        actions: {
-          primary: {
-            disabled: false,
-            label: t("common.save"),
-            onClick: onConfirm,
-            className: "oui-slippage-save-btn"
-          },
-          secondary: {
-            label: t("common.cancel"),
-            onClick: () => setClose(),
-            className: "oui-slippage-cancel-btn"
-          }
-        },
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          SlippageEditor,
+  const renderPriceAndTotal = () => {
+    if (order_type === types.OrderType.TRAILING_STOP) {
+      const { activated_price, callback_value, callback_rate } = order;
+      const callbackView = callback_rate ? /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "between", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: t("orderEntry.trailingRate") }),
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { className: "oui-text-base-contrast", children: [
+          callback_rate,
+          "%"
+        ] })
+      ] }) : /* @__PURE__ */ jsxRuntime.jsx(
+        OrderItem,
+        {
+          title: t("orderEntry.trailingValue"),
+          value: callback_value,
+          unit: quote,
+          dp: quote_dp
+        }
+      );
+      return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        activated_price && /* @__PURE__ */ jsxRuntime.jsx(
+          OrderItem,
           {
-            ref: slippageRef,
-            isMobile,
-            initialValue: props.slippage ? Number(props.slippage) : void 0
+            title: t("common.triggerPrice"),
+            value: activated_price,
+            unit: quote,
+            dp: quote_dp
           }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "between", className: "oui-orderEntry-slippage", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-slippage-label", size: "2xs", children: t("orderEntry.slippage") }),
+        ),
+        callbackView
+      ] });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "between", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: t("common.price") }),
+        renderPrice()
+      ] }),
       /* @__PURE__ */ jsxRuntime.jsx(
-        uiConnector.AuthGuard,
+        OrderItem,
         {
-          fallback: () => /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: "2xs", children: [
-            t("orderEntry.slippage.est"),
-            ": -% / ",
-            t("common.max"),
-            ": --%"
-          ] }),
-          children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 1, className: "oui-slippage-value-container", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              ui.Text.numeral,
-              {
-                size: "2xs",
-                rule: "percentages",
-                prefix: `${t("orderEntry.slippage.est")}: `,
-                suffix: ` / ${t("common.max")}: `,
-                children: props.estSlippage ?? 0
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                className: "oui-slippage-edit-btn oui-text-2xs",
-                onClick: () => setOpen(),
-                children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { className: "oui-gap-0.5", as: "span", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", className: "oui-text-primary", children: `${props.slippage || "-"}%` }),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    ui.EditIcon,
-                    {
-                      className: "oui-slippage-edit-icon oui-text-primary oui-hidden md:oui-block",
-                      size: 12,
-                      opacity: 1
-                    }
-                  )
-                ] })
-              }
-            )
-          ] })
+          title: t("common.estTotal"),
+          value: order.total,
+          unit: quote,
+          dp: quote_dp
         }
       )
-    ] })
-  ] });
-};
-var SlippageUI = (props) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(SlippageCell, { ...props });
-};
-function AssetInfo(props) {
-  const { canTrade, disableFeatures, orderType, symbol } = props;
-  const { t } = i18n.useTranslation();
-  const { isMobile } = ui.useScreen();
-  const displayEstLiqPrice = hooks.useGetEstLiqPrice({
-    estLiqPrice: props.estLiqPrice,
-    symbol,
-    side: props.side
-  });
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
+    ] });
+  };
+  const header = /* @__PURE__ */ jsxRuntime.jsxs(
+    ui.Flex,
     {
-      className: "oui-orderEntry-assetInfo oui-space-y-[2px] xl:oui-space-y-1",
+      justify: "between",
+      className: "oui-orderEntry-orderConfirmDialog-header",
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "between", className: "oui-orderEntry-estLiqPrice", children: [
-          isMobile ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", children: t("orderEntry.estLiqPrice") }) : /* @__PURE__ */ jsxRuntime.jsx(
-            ui.Tooltip,
-            {
-              content: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-min-w-[204px] oui-max-w-[280px] oui-text-2xs oui-leading-normal oui-text-base-contrast-80", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-text-pretty", children: t("common.liquidationPrice.tooltip") }),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
-                  "a",
-                  {
-                    href: "https://orderly.network/docs/introduction/trade-on-orderly/perpetual-futures/liquidations",
-                    target: "_blank",
-                    rel: "noopener noreferrer",
-                    className: "oui-text-primary oui-underline",
-                    children: t("common.liquidationPrice.tooltip.learnMore")
-                  }
-                ) })
-              ] }),
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                ui.Text,
-                {
-                  size: "2xs",
-                  className: "oui-estLiqPrice-label oui-cursor-pointer oui-border-b oui-border-dashed oui-border-line-12",
-                  children: t("orderEntry.estLiqPrice")
-                }
-              )
-            }
-          ),
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 2, direction: "column", itemAlign: "start", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            ui.Text.numeral,
+            ui.Text.formatted,
             {
-              unit: props.quote,
-              size: "2xs",
-              dp: props.dp,
-              className: "oui-estLiqPrice-value oui-text-base-contrast-80",
-              unitClassName: "oui-ml-1 oui-text-base-contrast-36",
-              children: canTrade ? displayEstLiqPrice ?? "--" : "--"
+              rule: "symbol",
+              formatString: "base",
+              showIcon: true,
+              className: "oui-orderConfirmDialog-symbol",
+              children: order.symbol
             }
-          )
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(SymbolBadge, { symbol: order.symbol })
         ] }),
-        orderType === types.OrderType.MARKET && !disableFeatures?.includes("slippageSetting") && /* @__PURE__ */ jsxRuntime.jsx(
-          SlippageUI,
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          ui.Flex,
           {
-            slippage: props.slippage,
-            setSlippage: props.setSlippage,
-            estSlippage: props.estSlippage
+            justify: "end",
+            gapX: 1,
+            className: "oui-orderConfirmDialog-header-tags",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(OrderTypeTag, { type: order_type }),
+              side === types.OrderSide.BUY ? /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { color: "buy", size: "sm", children: t("common.buy") }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { color: "sell", size: "sm", children: t("common.sell") })
+            ]
           }
-        ),
-        !disableFeatures?.includes("feesInfo") && /* @__PURE__ */ jsxRuntime.jsx(FeesWidget, { symbol: props.symbol })
+        )
       ]
     }
   );
-}
-var calculateLTVColor = (val) => {
-  if (val >= 0 && val < 50) {
-    return "oui-text-success";
-  } else if (val >= 50 && val < 80) {
-    return "oui-text-warning";
-  } else if (val >= 80) {
-    return "oui-text-danger";
-  } else {
-    return "";
-  }
-};
-var LTVRiskTooltipUI = (props) => {
-  const { t } = i18n.useTranslation();
-  const {
-    ltv_threshold,
-    negative_usdc_threshold,
-    isThresholdLoading,
-    holdingData = [],
-    currentLtv,
-    onConvert,
-    marginMode
-  } = props;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    ui.Flex,
+  const quantityItem = /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "between", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: t("common.orderQty") }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Text.numeral,
+      {
+        rule: "price",
+        dp: base_dp,
+        padding: false,
+        className: "oui-text-base-contrast",
+        children: order.order_quantity
+      }
+    )
+  ] });
+  const triggerPriceItem = (order_type === types.OrderType.STOP_LIMIT || order_type === types.OrderType.STOP_MARKET && order.trigger_price) && /* @__PURE__ */ jsxRuntime.jsx(
+    OrderItem,
     {
-      gap: 1,
-      className: "oui-orderEntry-ltvRiskTooltip oui-w-72 oui-max-w-72",
-      direction: "column",
-      itemAlign: "start",
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { width: "100%", justify: "between", itemAlign: "center", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { intensity: 36, size: "xs", children: t("common.assets") }),
-          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { intensity: 36, size: "xs", children: t("transfer.deposit.collateralContribution") })
-        ] }),
-        holdingData.map((asset, index) => {
-          return /* @__PURE__ */ jsxRuntime.jsxs(
+      title: t("common.trigger"),
+      value: order.trigger_price,
+      unit: quote,
+      dp: quote_dp
+    }
+  );
+  const tpslTriggerPrice = (order.tp_trigger_price || order.sl_trigger_price) && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { className: "oui-my-4" }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: ui.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(ui.Text, { className: "oui-text-base-contrast", children: renderPositionType() }),
+          renderTPSLQty(),
+          /* @__PURE__ */ jsxRuntime.jsxs(
             ui.Flex,
             {
-              width: "100%",
+              direction: "column",
               justify: "between",
-              itemAlign: "center",
+              itemAlign: "start",
+              gap: 1,
+              className: "oui-w-full",
               children: [
-                /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { intensity: 80, size: "xs", children: asset.token }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  ui.Text,
-                  {
-                    size: "xs",
-                    intensity: 80,
-                    className: ui.cn(
-                      Number(asset.collateralContribution) < 0 && "oui-text-warning"
-                    ),
-                    children: utils.removeTrailingZeros(asset.collateralContribution)
-                  }
-                )
+                /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "between", className: "oui-w-full", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: t("tpsl.tpTriggerPrice") }),
+                  renderTPSLPrice({
+                    price: order.tp_trigger_price ?? "",
+                    isOrderPrice: false,
+                    isEnable: !!order.tp_trigger_price,
+                    colorType: "TP"
+                  })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "between", className: "oui-w-full", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: t("tpsl.tpOrderPrice") }),
+                  renderTPSLPrice({
+                    price: order.tp_order_price ?? "",
+                    isOrderPrice: true,
+                    isEnable: !!order.tp_trigger_price,
+                    colorType: "TP"
+                  })
+                ] })
               ]
-            },
-            `item-${index}`
-          );
-        }),
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { className: "oui-w-full" }),
-        /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { width: "100%", justify: "between", itemAlign: "center", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { intensity: 36, size: "xs", children: t("transfer.LTV.currentLTV") }),
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsxs(
-            ui.Text,
+            ui.Flex,
             {
-              size: "xs",
-              intensity: 36,
-              className: ui.cn("oui-select-none", calculateLTVColor(currentLtv)),
+              direction: "column",
+              justify: "between",
+              itemAlign: "start",
+              gap: 1,
+              className: "oui-w-full",
               children: [
-                currentLtv,
-                "%"
+                /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "between", className: "oui-w-full", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: t("tpsl.slTriggerPrice") }),
+                  renderTPSLPrice({
+                    price: order.sl_trigger_price ?? "",
+                    isOrderPrice: false,
+                    isEnable: !!order.sl_trigger_price,
+                    colorType: "SL"
+                  })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "between", className: "oui-w-full", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: t("tpsl.slOrderPrice") }),
+                  renderTPSLPrice({
+                    price: order.sl_order_price ?? "",
+                    isOrderPrice: true,
+                    isEnable: !!order.sl_trigger_price,
+                    colorType: "SL"
+                  })
+                ] })
               ]
             }
           )
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-py-2", intensity: 54, size: "2xs", children: t("transfer.LTV.tooltip", {
-          threshold: isThresholdLoading ? "-" : ltv_threshold,
-          usdcThreshold: isThresholdLoading ? "-" : negative_usdc_threshold
-        }) }),
+        ]
+      }
+    )
+  ] });
+  const orderConfirmCheckbox = /* @__PURE__ */ jsxRuntime.jsxs(
+    ui.Flex,
+    {
+      gapX: 1,
+      pt: 4,
+      pb: 5,
+      className: "oui-orderEntry-orderConfirmDialog-disableConfirm",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Checkbox,
+          {
+            id: "orderConfirm",
+            color: "white",
+            className: "oui-orderConfirmDialog-disableConfirm-checkbox",
+            onCheckedChange: (checked) => {
+              setNeedConfirm(!!!checked);
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "label",
+          {
+            htmlFor: "orderConfirm",
+            className: ui.textVariants({
+              size: "xs",
+              intensity: 54
+            }),
+            children: t("orderEntry.disableOrderConfirm")
+          }
+        )
+      ]
+    }
+  );
+  const buttons = /* @__PURE__ */ jsxRuntime.jsxs(
+    ui.Grid,
+    {
+      cols: 2,
+      gapX: 3,
+      className: "oui-orderEntry-orderConfirmDialog-actions",
+      children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           ui.Button,
           {
-            fullWidth: true,
-            size: "md",
-            variant: "outlined",
             color: "secondary",
-            className: "oui-ltvRiskTooltip-convert-btn",
-            onClick: onConvert,
-            children: t("transfer.convert.convertAssets")
+            size: "md",
+            className: "oui-cancel-btn",
+            onClick: () => onCancel(),
+            children: t("common.cancel")
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Button,
+          {
+            size: "md",
+            className: "oui-confirm-btn",
+            onClick: () => onConfirm(),
+            children: t("common.confirm")
           }
         )
       ]
     }
   );
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    header,
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { className: "oui-my-4" }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: ui.textVariants({
+          size: "sm",
+          intensity: 54,
+          className: "oui-orderEntry-orderConfirmDialog-content oui-space-y-1"
+        }),
+        children: [
+          quantityItem,
+          triggerPriceItem,
+          renderPriceAndTotal()
+        ]
+      }
+    ),
+    tpslTriggerPrice,
+    orderConfirmCheckbox,
+    buttons
+  ] });
 };
-var useConvertThreshold = () => {
-  const { data, error, isLoading } = hooks.useQuery(
-    "/v1/public/auto_convert_threshold",
-    { errorRetryCount: 3 }
-  );
-  return {
-    ltv_threshold: new utils.Decimal(data?.ltv_threshold ?? 0).mul(100).toNumber(),
-    negative_usdc_threshold: data?.negative_usdc_threshold,
-    isLoading,
-    error
-  };
+var OrderItem = (props) => {
+  const { title, value, unit, dp } = props;
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "between", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: title }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Text.numeral,
+      {
+        unit,
+        rule: "price",
+        dp,
+        padding: false,
+        className: "oui-text-base-contrast",
+        unitClassName: "oui-text-base-contrast-36 oui-ml-1",
+        children: value
+      }
+    )
+  ] });
 };
-var useLTVTooltipScript = (marginMode) => {
-  const { data: holdingList = [], isLoading: isHoldingLoading } = hooks.useHoldingStream();
-  const {
-    ltv_threshold,
-    negative_usdc_threshold,
-    isLoading: isThresholdLoading
-  } = useConvertThreshold();
-  const tokensInfo = hooks.useAppStore((state) => state.tokensInfo);
-  const { getIndexPrice } = hooks.useIndexPricesStream();
-  const holdingData = holdingList.map((item) => {
-    const tokenInfo = tokensInfo?.find(({ token }) => token === item.token);
-    const indexPrice = getIndexPrice(item.token);
-    const collateralRatio = tokenInfo ? perp.account.collateralRatio({
-      baseWeight: tokenInfo.base_weight ?? 0,
-      discountFactor: tokenInfo.discount_factor ?? 0,
-      collateralQty: item.holding,
-      collateralCap: tokenInfo?.user_max_qty ?? item.holding,
-      indexPrice
-    }) : utils.zero;
-    const collateralContribution = perp.account.collateralContribution({
-      collateralQty: item.holding,
-      collateralCap: tokenInfo?.user_max_qty ?? item.holding,
-      collateralRatio: collateralRatio.toNumber(),
-      indexPrice
-    });
-    return {
-      ...item,
-      collateralContribution
-    };
-  });
-  const currentLtv = hooks.useComputedLTV();
-  const onConvert = React3.useCallback(async () => {
-    return ui.modal.show("ConvertDialogId");
-  }, []);
-  return {
-    holdingData,
-    isHoldingLoading,
-    ltv_threshold,
-    negative_usdc_threshold,
-    isThresholdLoading,
-    currentLtv,
-    onConvert,
-    marginMode
-  };
+OrderConfirmDialog.displayName = "OrderConfirmDialog";
+var OrderTypeTag = (props) => {
+  const { t } = i18n.useTranslation();
+  const typeStr = React3.useMemo(() => {
+    switch (props.type) {
+      case types.OrderType.LIMIT:
+        return t("orderEntry.orderType.limit");
+      case types.OrderType.MARKET:
+        return t("common.marketPrice");
+      case types.OrderType.STOP_LIMIT:
+        return t("orderEntry.orderType.stopLimit");
+      case types.OrderType.STOP_MARKET:
+        return t("orderEntry.orderType.stopMarket");
+      case types.OrderType.TRAILING_STOP:
+        return t("orderEntry.orderType.trailingStop");
+      default:
+        return "";
+    }
+  }, [props.type]);
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { color: "neutral", size: "sm", children: typeStr });
 };
-var LTVRiskTooltipWidget = ({
-  marginMode
-}) => {
-  const state = useLTVTooltipScript(marginMode);
-  return /* @__PURE__ */ jsxRuntime.jsx(LTVRiskTooltipUI, { ...state });
+var Dialog = (props) => {
+  const { close, resolve, reject, ...rest } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    OrderConfirmDialog,
+    {
+      ...rest,
+      onCancel: () => {
+        reject();
+        close();
+      },
+      onConfirm: () => {
+        resolve();
+        close();
+      }
+    }
+  );
 };
-var Available = (props) => {
-  const { canTrade, currentLtv, quote, freeCollateral, marginMode } = props;
+var orderConfirmDialogId = "orderConfirm";
+ui.registerSimpleDialog(orderConfirmDialogId, Dialog, {
+  size: "sm",
+  title: () => i18n.i18n.t("orderEntry.orderConfirm")
+});
+var MaxQtyConfirm = React3.memo((props) => {
   const { t } = i18n.useTranslation();
-  const { isMobile } = ui.useScreen();
-  const showLTV = React3.useMemo(() => {
-    return typeof currentLtv === "number" && !Number.isNaN(currentLtv) && currentLtv > 0;
-  }, [currentLtv]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ui.SimpleDialog,
+    {
+      open: props.open,
+      title: t("orderEntry.orderConfirm"),
+      closable: true,
+      onOpenChange: props.onOpenChange,
+      size: "sm",
+      classNames: {
+        footer: "oui-maxQtyConfirm-footer",
+        body: "oui-maxQtyConfirm-body"
+      },
+      actions: {
+        primary: {
+          label: t("orderEntry.placeOrderNow"),
+          className: "oui-primary-btn oui-text-sm oui-font-semibold oui-w-[100%] oui-h-8",
+          onClick: () => {
+            props.onConfirm();
+            return Promise.resolve();
+          }
+        },
+        secondary: {
+          label: t("common.cancel"),
+          className: "oui-secondary-btn oui-text-sm oui-font-semibold oui-w-[100%] oui-h-8",
+          onClick: () => {
+            props.onOpenChange(false);
+            return Promise.resolve();
+          }
+        }
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-maxQtyConfirm-content oui-text-2xs lg:oui-text-sm", children: t("orderEntry.maxQty.reminder.content", {
+        maxQty: `${props.maxQty} ${props.base}`
+      }) })
+    }
+  );
+});
+var PermissionlessMarketNoticeDialog = (props) => {
+  const { onConfirm, onCancel } = props;
+  const { t } = i18n.useTranslation();
+  const [checked, setChecked] = React3.useState(false);
+  const content = /* @__PURE__ */ jsxRuntime.jsxs(
     ui.Flex,
     {
-      itemAlign: "center",
-      justify: "between",
-      className: "oui-orderEntry-available",
+      direction: "column",
+      gap: 3,
+      itemAlign: "start",
+      className: "oui-permissionlessNotice-content",
       children: [
-        marginMode === types.MarginMode.ISOLATED ? /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { content: t("transfer.LTV.isolatedModeUsdcOnly"), children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-available-label oui-cursor-pointer", size: "2xs", children: t("common.available") }) }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-available-label", size: "2xs", children: t("common.available") }),
-        /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { itemAlign: "center", justify: "center", gap: 1, children: [
-          showLTV && /* @__PURE__ */ jsxRuntime.jsx(
-            ui.Tooltip,
-            {
-              className: "oui-available-ltvRisk-tooltip oui-bg-base-6 oui-p-2",
-              content: /* @__PURE__ */ jsxRuntime.jsx(LTVRiskTooltipWidget, { marginMode }),
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                ui.InfoCircleIcon,
-                {
-                  className: "oui-cursor-pointer oui-text-warning oui-opacity-80"
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            ui.Text.numeral,
-            {
-              unit: quote,
-              size: "2xs",
-              className: "oui-available-value oui-text-base-contrast-80",
-              unitClassName: "oui-ml-1 oui-text-base-contrast-54",
-              dp: 2,
-              padding: false,
-              children: canTrade ? freeCollateral : 0
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            ui.Button,
-            {
-              variant: "text",
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Text,
+          {
+            className: ui.textVariants({
+              size: "sm",
+              intensity: 54
+            }),
+            children: t("orderEntry.permissionlessNotice.content1")
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Text,
+          {
+            className: ui.textVariants({
+              size: "sm",
+              intensity: 54
+            }),
+            children: t("orderEntry.permissionlessNotice.content2")
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Text,
+          {
+            className: ui.textVariants({
+              size: "sm",
+              intensity: 54
+            }),
+            children: t("orderEntry.permissionlessNotice.content3")
+          }
+        )
+      ]
+    }
+  );
+  const checkboxSection = /* @__PURE__ */ jsxRuntime.jsxs(
+    ui.Flex,
+    {
+      gapX: 1,
+      pt: 4,
+      pb: 5,
+      itemAlign: "start",
+      className: "oui-permissionlessNotice-checkbox oui-orderEntry-orderConfirmDialog-disableConfirm oui-cursor-pointer",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Checkbox,
+          {
+            id: "permissionlessNotice",
+            color: "white",
+            className: "oui-permissionlessNotice-checkbox-input oui-mt-1",
+            checked,
+            onCheckedChange: (value) => setChecked(!!value)
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "label",
+          {
+            htmlFor: "permissionlessNotice",
+            className: ui.textVariants({
               size: "xs",
-              color: "secondary",
-              className: "oui-available-deposit-icon oui-p-0 hover:oui-text-base-contrast-80",
-              onClick: () => {
-                const handleDomId = isMobile ? "DepositAndWithdrawWithSheetId" : "DepositAndWithdrawWithDialogId";
-                ui.modal.show(handleDomId, {
-                  activeTab: "deposit"
-                });
-              },
-              children: /* @__PURE__ */ jsxRuntime.jsx(ui.AddCircleIcon, { opacity: 1 })
-            }
-          )
-        ] })
+              intensity: 54,
+              className: "oui-cursor-pointer"
+            }),
+            children: t("orderEntry.permissionlessNotice.checkbox")
+          }
+        )
       ]
     }
   );
+  const confirmButton = /* @__PURE__ */ jsxRuntime.jsx(
+    ui.Flex,
+    {
+      className: "oui-permissionlessNotice-confirm-button oui-w-full",
+      justify: "center",
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Button,
+        {
+          fullWidth: true,
+          size: "md",
+          className: "oui-permissionlessNotice-confirm oui-confirm-btn oui-max-w-[244px]",
+          disabled: !checked,
+          onClick: () => onConfirm(),
+          children: t("common.confirm")
+        }
+      )
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    content,
+    checkboxSection,
+    confirmButton
+  ] });
 };
-function isBBOOrder(options2) {
-  const { order_type, order_type_ext } = options2;
-  const isBBO = [types.OrderType.ASK, types.OrderType.BID].includes(order_type_ext);
-  if (order_type) {
-    return order_type === types.OrderType.LIMIT && isBBO;
-  }
-  return isBBO;
-}
-function getOrderTypeByBBO(value, size) {
-  if ([types.BBOOrderType.COUNTERPARTY1, types.BBOOrderType.COUNTERPARTY5].includes(value)) {
-    return size === types.OrderSide.BUY ? types.OrderType.ASK : types.OrderType.BID;
-  }
-  if ([types.BBOOrderType.QUEUE1, types.BBOOrderType.QUEUE5].includes(value)) {
-    return size === types.OrderSide.BUY ? types.OrderType.BID : types.OrderType.ASK;
-  }
-}
-function getOrderLevelByBBO(value) {
-  if ([types.BBOOrderType.COUNTERPARTY1, types.BBOOrderType.QUEUE1].includes(value)) {
-    return types.OrderLevel.ONE;
-  }
-  if ([types.BBOOrderType.COUNTERPARTY5, types.BBOOrderType.QUEUE5].includes(value)) {
-    return types.OrderLevel.FIVE;
-  }
-}
-function getScaledPlaceOrderMessage(result) {
-  const rows = result?.data?.rows || [];
-  if (rows.length > 0) {
-    const totalCount = rows.length;
-    const successCount = rows.filter((row) => row.success).length;
-    if (successCount === totalCount) {
-      return i18n.i18n.t("orderEntry.scaledOrder.fullySuccessful", {
-        total: totalCount
-      });
-    }
-    if (successCount === 0) {
-      return i18n.i18n.t("orderEntry.scaledOrder.allFailed");
+PermissionlessMarketNoticeDialog.displayName = "PermissionlessMarketNoticeDialog";
+var Dialog2 = (props) => {
+  const { close, resolve, reject } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    PermissionlessMarketNoticeDialog,
+    {
+      onCancel: () => {
+        reject();
+        close();
+      },
+      onConfirm: () => {
+        resolve();
+        close();
+      }
     }
-    return i18n.i18n.t("orderEntry.scaledOrder.partiallySuccessful", {
-      successCount,
-      total: totalCount
-    });
-  }
-}
-var safeNumber = (val) => {
-  return Number.isNaN(Number(val)) ? 0 : Number(val);
+  );
 };
-var OrderConfirmDialog = (props) => {
-  const { symbolInfo, order, onConfirm, onCancel } = props;
-  const { quote, quote_dp, base_dp } = symbolInfo;
-  const { side, order_type, order_type_ext, level, symbol } = order;
-  const orderMarginMode = order.margin_mode;
+var permissionlessMarketNoticeDialogId = "permissionlessMarketNotice";
+var permissionlessMarketNoticeDesktopDialogId = "permissionlessMarketNoticeDesktop";
+ui.registerSimpleDialog(permissionlessMarketNoticeDialogId, Dialog2, {
+  size: "sm",
+  title: () => i18n.i18n.t("orderEntry.permissionlessNotice.title")
+});
+ui.registerSimpleDialog(permissionlessMarketNoticeDesktopDialogId, Dialog2, {
+  size: "xl",
+  title: () => i18n.i18n.t("orderEntry.permissionlessNotice.title")
+});
+var ScaledOrderConfirm = (props) => {
+  const { order, symbolInfo, dataSource, national, askAndBid, totalQuantity } = props;
+  const { base, quote, base_dp, quote_dp } = symbolInfo;
   const { t } = i18n.useTranslation();
-  const [{ rows: positions }] = hooks.usePositionStream(symbol);
-  const position = React3.useMemo(
-    () => orderMarginMode != null ? positions?.find(
-      (row) => row.symbol === symbol && row.margin_mode === orderMarginMode
-    ) : positions?.[0],
-    [positions, symbol, orderMarginMode]
-  );
-  const positionQty = position?.position_qty;
-  const [_, setNeedConfirm] = hooks.useLocalStorage("orderly_order_confirm", true);
-  const renderPositionType = () => {
-    if (order.position_type === types.PositionType.FULL) {
-      return /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: t("tpsl.positionType.full") });
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: t("tpsl.positionType.partial") });
+  const onCancel = () => {
+    props.reject();
+    props.close?.();
   };
-  const renderPrice = () => {
-    if (order_type === types.OrderType.MARKET || order_type === types.OrderType.STOP_MARKET) {
-      return /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { intensity: 80, children: t("common.marketPrice") });
-    }
-    if (isBBOOrder({ order_type, order_type_ext })) {
-      const bboType = utils.getBBOType({
-        type: order_type_ext,
-        side,
-        level
-      });
-      const label = {
-        [types.BBOOrderType.COUNTERPARTY1]: t("orderEntry.bbo.counterparty1"),
-        [types.BBOOrderType.COUNTERPARTY5]: t("orderEntry.bbo.counterparty5"),
-        [types.BBOOrderType.QUEUE1]: t("orderEntry.bbo.queue1"),
-        [types.BBOOrderType.QUEUE5]: t("orderEntry.bbo.queue5")
-      }[bboType];
-      return /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { intensity: 80, children: label });
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      ui.Text.numeral,
-      {
-        unit: quote,
-        rule: "price",
-        className: "oui-text-base-contrast",
-        unitClassName: "oui-text-base-contrast-36 oui-ml-1",
-        dp: quote_dp,
-        padding: false,
-        children: order.order_price
-      }
-    );
+  const onConfirm = () => {
+    props.resolve();
+    props.close?.();
   };
-  const renderTPSLPrice = ({
-    price,
-    isOrderPrice,
-    isEnable,
-    colorType
-  }) => {
-    if (!isEnable) {
-      return /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-text-base-contrast-36", children: "-- USDC" });
-    }
-    if (!price) {
-      if (isOrderPrice) {
-        return /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-text-base-contrast-36", children: t("common.marketPrice") });
-      }
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      ui.Text.numeral,
+  const columns = React3.useMemo(() => {
+    return [
       {
-        unit: "USDC",
-        rule: "price",
-        className: ui.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: quote_dp,
-        padding: false,
-        children: price
-      }
-    );
-  };
-  const renderTPSLQty = () => {
-    if (!positionQty || !order.order_quantity) {
-      return null;
-    }
-    let qty = new utils.Decimal(order.order_quantity);
-    if (order.position_type === types.PositionType.FULL) {
-      qty = qty.plus(new utils.Decimal(positionQty ?? 0));
-    }
-    return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "between", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: order.position_type === types.PositionType.FULL ? t("common.positionQty") : t("common.orderQty") }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        ui.Text.numeral,
-        {
-          rule: "price",
-          dp: base_dp,
-          padding: false,
-          className: "oui-text-base-contrast",
-          children: qty.toNumber()
+        title: t("common.symbol"),
+        dataIndex: "symbol",
+        width: 125,
+        render: (value, record) => {
+          return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 2, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: ui.cn(
+                  "oui-h-[42px] oui-w-1 oui-shrink-0 oui-rounded-[1px]",
+                  record.side === types.OrderSide.BUY ? "oui-bg-trade-profit" : "oui-bg-trade-loss"
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", itemAlign: "start", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gapX: 1, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(ui.TokenIcon, { symbol: value, className: "oui-size-3" }),
+                /* @__PURE__ */ jsxRuntime.jsx(ui.Text.formatted, { rule: "symbol", size: "xs", formatString: "base", children: value })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 1, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(SymbolBadge, { symbol: value }),
+                /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { color: "neutral", size: "xs", children: t("orderEntry.orderType.limit") })
+              ] })
+            ] })
+          ] });
         }
-      )
-    ] });
-  };
-  const renderPriceAndTotal = () => {
-    if (order_type === types.OrderType.TRAILING_STOP) {
-      const { activated_price, callback_value, callback_rate } = order;
-      const callbackView = callback_rate ? /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "between", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: t("orderEntry.trailingRate") }),
-        /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { className: "oui-text-base-contrast", children: [
-          callback_rate,
-          "%"
-        ] })
-      ] }) : /* @__PURE__ */ jsxRuntime.jsx(
-        OrderItem,
-        {
-          title: t("orderEntry.trailingValue"),
-          value: callback_value,
-          unit: quote,
-          dp: quote_dp
+      },
+      {
+        title: t("common.quantity"),
+        dataIndex: "order_quantity",
+        width: 100,
+        render: (value, record) => {
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Text.numeral,
+            {
+              rule: "price",
+              dp: base_dp,
+              padding: false,
+              color: record.side === types.OrderSide.BUY ? "buy" : "sell",
+              children: value
+            }
+          );
         }
-      );
-      return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        activated_price && /* @__PURE__ */ jsxRuntime.jsx(
-          OrderItem,
-          {
-            title: t("common.triggerPrice"),
-            value: activated_price,
-            unit: quote,
-            dp: quote_dp
-          }
-        ),
-        callbackView
-      ] });
-    }
-    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "between", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: t("common.price") }),
-        renderPrice()
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        OrderItem,
-        {
-          title: t("common.estTotal"),
-          value: order.total,
-          unit: quote,
-          dp: quote_dp
+      },
+      {
+        title: t("common.orderPrice"),
+        dataIndex: "order_price",
+        width: 100,
+        render: (value, record) => {
+          const showWarning = !!(record.side === types.OrderSide.BUY ? askAndBid?.[0] && Number(value) >= askAndBid?.[0] : askAndBid?.[1] && Number(value) <= askAndBid?.[1]);
+          return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gapX: 1, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Text.numeral, { rule: "price", dp: quote_dp, children: value }),
+            showWarning && /* @__PURE__ */ jsxRuntime.jsx(
+              ui.Tooltip,
+              {
+                content: t(
+                  "orderEntry.confirmScaledOrder.orderPrice.warning"
+                ),
+                className: "oui-w-[240px] oui-text-2xs oui-font-semibold oui-text-base-contrast-80",
+                children: /* @__PURE__ */ jsxRuntime.jsx(TooltipIcon, { className: "oui-text-warning-darken" })
+              }
+            )
+          ] });
         }
-      )
-    ] });
-  };
-  const header = /* @__PURE__ */ jsxRuntime.jsxs(
-    ui.Flex,
-    {
-      justify: "between",
-      className: "oui-orderEntry-orderConfirmDialog-header",
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ui.Text.formatted,
-          {
-            rule: "symbol",
-            showIcon: true,
-            className: "oui-orderConfirmDialog-symbol",
-            children: order.symbol
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          ui.Flex,
-          {
-            justify: "end",
-            gapX: 1,
-            className: "oui-orderConfirmDialog-header-tags",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(OrderTypeTag, { type: order_type }),
-              side === types.OrderSide.BUY ? /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { color: "buy", size: "sm", children: t("common.buy") }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { color: "sell", size: "sm", children: t("common.sell") })
-            ]
-          }
-        )
-      ]
-    }
-  );
-  const quantityItem = /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "between", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: t("common.orderQty") }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      ui.Text.numeral,
-      {
-        rule: "price",
-        dp: base_dp,
-        padding: false,
-        className: "oui-text-base-contrast",
-        children: order.order_quantity
       }
-    )
-  ] });
-  const triggerPriceItem = (order_type === types.OrderType.STOP_LIMIT || order_type === types.OrderType.STOP_MARKET && order.trigger_price) && /* @__PURE__ */ jsxRuntime.jsx(
-    OrderItem,
-    {
-      title: t("common.trigger"),
-      value: order.trigger_price,
-      unit: quote,
-      dp: quote_dp
-    }
-  );
-  const tpslTriggerPrice = (order.tp_trigger_price || order.sl_trigger_price) && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { className: "oui-my-4" }),
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
+    ];
+  }, [t, symbolInfo, askAndBid, base_dp, quote_dp]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-orderEntry-scaledOrderConfirm oui-font-semibold", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ui.DataTable,
       {
-        className: ui.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(ui.Text, { className: "oui-text-base-contrast", children: renderPositionType() }),
-          renderTPSLQty(),
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            ui.Flex,
-            {
-              direction: "column",
-              justify: "between",
-              itemAlign: "start",
-              gap: 1,
-              className: "oui-w-full",
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "between", className: "oui-w-full", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: t("tpsl.tpTriggerPrice") }),
-                  renderTPSLPrice({
-                    price: order.tp_trigger_price ?? "",
-                    isOrderPrice: false,
-                    isEnable: !!order.tp_trigger_price,
-                    colorType: "TP"
-                  })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "between", className: "oui-w-full", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: t("tpsl.tpOrderPrice") }),
-                  renderTPSLPrice({
-                    price: order.tp_order_price ?? "",
-                    isOrderPrice: true,
-                    isEnable: !!order.tp_trigger_price,
-                    colorType: "TP"
-                  })
-                ] })
-              ]
-            }
+        classNames: {
+          root: ui.cn(
+            "oui-scaledOrderConfirm-table",
+            "oui-bg-base-7",
+            "oui-rounded-lg",
+            // need to set overflow hidden because table header will avoid the border radius
+            "oui-overflow-hidden",
+            // "oui-text-2xs lg:oui-text-xs",
+            // if orders is greater than 6, set the height to 320px to show scroll bar
+            order.orders?.length >= 6 && "oui-h-[320px]"
           ),
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            ui.Flex,
-            {
-              direction: "column",
-              justify: "between",
-              itemAlign: "start",
-              gap: 1,
-              className: "oui-w-full",
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "between", className: "oui-w-full", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: t("tpsl.slTriggerPrice") }),
-                  renderTPSLPrice({
-                    price: order.sl_trigger_price ?? "",
-                    isOrderPrice: false,
-                    isEnable: !!order.sl_trigger_price,
-                    colorType: "SL"
-                  })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "between", className: "oui-w-full", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: t("tpsl.slOrderPrice") }),
-                  renderTPSLPrice({
-                    price: order.sl_order_price ?? "",
-                    isOrderPrice: true,
-                    isEnable: !!order.sl_trigger_price,
-                    colorType: "SL"
-                  })
-                ] })
-              ]
-            }
-          )
-        ]
+          // set the min height of the table to show 2 rows
+          scroll: "!oui-min-h-[130px]"
+        },
+        dataSource,
+        columns,
+        bordered: true,
+        onRow: () => {
+          return {
+            className: ui.cn("oui-h-[50px]")
+          };
+        }
       }
-    )
-  ] });
-  const orderConfirmCheckbox = /* @__PURE__ */ jsxRuntime.jsxs(
-    ui.Flex,
-    {
-      gapX: 1,
-      pt: 4,
-      pb: 5,
-      className: "oui-orderEntry-orderConfirmDialog-disableConfirm",
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ui.Checkbox,
-          {
-            id: "orderConfirm",
-            color: "white",
-            className: "oui-orderConfirmDialog-disableConfirm-checkbox",
-            onCheckedChange: (checked) => {
-              setNeedConfirm(!!!checked);
-            }
-          }
-        ),
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-scaledOrderConfirm-content oui-mb-5 oui-mt-4 oui-text-2xs", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "between", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: t("orderEntry.totalOrders") }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { intensity: 80, children: order.orders?.length })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "between", mt: 2, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: t("orderEntry.totalQuantity") }),
         /* @__PURE__ */ jsxRuntime.jsx(
-          "label",
+          ui.Text.numeral,
           {
-            htmlFor: "orderConfirm",
-            className: ui.textVariants({
-              size: "xs",
-              intensity: 54
-            }),
-            children: t("orderEntry.disableOrderConfirm")
+            rule: "price",
+            unit: base,
+            dp: base_dp,
+            padding: false,
+            intensity: 80,
+            unitClassName: "oui-text-base-contrast-36 oui-ml-1",
+            children: totalQuantity
           }
         )
-      ]
-    }
-  );
-  const buttons = /* @__PURE__ */ jsxRuntime.jsxs(
-    ui.Grid,
-    {
-      cols: 2,
-      gapX: 3,
-      className: "oui-orderEntry-orderConfirmDialog-actions",
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ui.Button,
-          {
-            color: "secondary",
-            size: "md",
-            className: "oui-cancel-btn",
-            onClick: () => onCancel(),
-            children: t("common.cancel")
-          }
-        ),
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "between", mt: 2, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: t("common.notional") }),
         /* @__PURE__ */ jsxRuntime.jsx(
-          ui.Button,
+          ui.Text.numeral,
           {
-            size: "md",
-            className: "oui-confirm-btn",
-            onClick: () => onConfirm(),
-            children: t("common.confirm")
-          }
-        )
-      ]
-    }
-  );
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    header,
-    /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { className: "oui-my-4" }),
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        className: ui.textVariants({
-          size: "sm",
-          intensity: 54,
-          className: "oui-orderEntry-orderConfirmDialog-content oui-space-y-1"
-        }),
-        children: [
-          quantityItem,
-          triggerPriceItem,
-          renderPriceAndTotal()
-        ]
-      }
-    ),
-    tpslTriggerPrice,
-    orderConfirmCheckbox,
-    buttons
-  ] });
-};
-var OrderItem = (props) => {
-  const { title, value, unit, dp } = props;
-  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "between", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: title }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      ui.Text.numeral,
-      {
-        unit,
-        rule: "price",
-        dp,
-        padding: false,
-        className: "oui-text-base-contrast",
-        unitClassName: "oui-text-base-contrast-36 oui-ml-1",
-        children: value
-      }
-    )
-  ] });
-};
-OrderConfirmDialog.displayName = "OrderConfirmDialog";
-var OrderTypeTag = (props) => {
-  const { t } = i18n.useTranslation();
-  const typeStr = React3.useMemo(() => {
-    switch (props.type) {
-      case types.OrderType.LIMIT:
-        return t("orderEntry.orderType.limit");
-      case types.OrderType.MARKET:
-        return t("common.marketPrice");
-      case types.OrderType.STOP_LIMIT:
-        return t("orderEntry.orderType.stopLimit");
-      case types.OrderType.STOP_MARKET:
-        return t("orderEntry.orderType.stopMarket");
-      case types.OrderType.TRAILING_STOP:
-        return t("orderEntry.orderType.trailingStop");
-      default:
-        return "";
-    }
-  }, [props.type]);
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { color: "neutral", size: "sm", children: typeStr });
-};
-var Dialog = (props) => {
-  const { close, resolve, reject, ...rest } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    OrderConfirmDialog,
-    {
-      ...rest,
-      onCancel: () => {
-        reject();
-        close();
-      },
-      onConfirm: () => {
-        resolve();
-        close();
-      }
-    }
-  );
-};
-var orderConfirmDialogId = "orderConfirm";
-ui.registerSimpleDialog(orderConfirmDialogId, Dialog, {
-  size: "sm",
-  title: () => i18n.i18n.t("orderEntry.orderConfirm")
-});
-var MaxQtyConfirm = React3.memo((props) => {
-  const { t } = i18n.useTranslation();
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    ui.SimpleDialog,
-    {
-      open: props.open,
-      title: t("orderEntry.orderConfirm"),
-      closable: true,
-      onOpenChange: props.onOpenChange,
-      size: "sm",
-      classNames: {
-        footer: "oui-maxQtyConfirm-footer",
-        body: "oui-maxQtyConfirm-body"
-      },
-      actions: {
-        primary: {
-          label: t("orderEntry.placeOrderNow"),
-          className: "oui-primary-btn oui-text-sm oui-font-semibold oui-w-[100%] oui-h-8",
-          onClick: () => {
-            props.onConfirm();
-            return Promise.resolve();
-          }
-        },
-        secondary: {
-          label: t("common.cancel"),
-          className: "oui-secondary-btn oui-text-sm oui-font-semibold oui-w-[100%] oui-h-8",
-          onClick: () => {
-            props.onOpenChange(false);
-            return Promise.resolve();
-          }
-        }
-      },
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-maxQtyConfirm-content oui-text-2xs lg:oui-text-sm", children: t("orderEntry.maxQty.reminder.content", {
-        maxQty: `${props.maxQty} ${props.base}`
-      }) })
-    }
-  );
-});
-var ScaledOrderConfirm = (props) => {
-  const { order, symbolInfo, dataSource, national, askAndBid, totalQuantity } = props;
-  const { base, quote, base_dp, quote_dp } = symbolInfo;
-  const { t } = i18n.useTranslation();
-  const onCancel = () => {
-    props.reject();
-    props.close?.();
-  };
-  const onConfirm = () => {
-    props.resolve();
-    props.close?.();
-  };
-  const columns = React3.useMemo(() => {
-    return [
-      {
-        title: t("common.symbol"),
-        dataIndex: "symbol",
-        width: 125,
-        render: (value, record) => {
-          return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 2, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                className: ui.cn(
-                  "oui-h-[38px] oui-w-1 oui-shrink-0 oui-rounded-[1px]",
-                  record.side === types.OrderSide.BUY ? "oui-bg-trade-profit" : "oui-bg-trade-loss"
-                )
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", itemAlign: "start", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gapX: 1, children: [
-                /* @__PURE__ */ jsxRuntime.jsx(ui.TokenIcon, { symbol: value, className: "oui-size-3" }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  ui.Text.formatted,
-                  {
-                    rule: "symbol",
-                    size: "xs",
-                    formatString: "base-type",
-                    children: value
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { color: "neutral", size: "xs", children: t("orderEntry.orderType.limit") })
-            ] })
-          ] });
-        }
-      },
-      {
-        title: t("common.quantity"),
-        dataIndex: "order_quantity",
-        width: 100,
-        render: (value, record) => {
-          return /* @__PURE__ */ jsxRuntime.jsx(
-            ui.Text.numeral,
-            {
-              rule: "price",
-              dp: base_dp,
-              padding: false,
-              color: record.side === types.OrderSide.BUY ? "buy" : "sell",
-              children: value
-            }
-          );
-        }
-      },
-      {
-        title: t("common.orderPrice"),
-        dataIndex: "order_price",
-        width: 100,
-        render: (value, record) => {
-          const showWarning = !!(record.side === types.OrderSide.BUY ? askAndBid?.[0] && Number(value) >= askAndBid?.[0] : askAndBid?.[1] && Number(value) <= askAndBid?.[1]);
-          return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gapX: 1, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(ui.Text.numeral, { rule: "price", dp: quote_dp, children: value }),
-            showWarning && /* @__PURE__ */ jsxRuntime.jsx(
-              ui.Tooltip,
-              {
-                content: t(
-                  "orderEntry.confirmScaledOrder.orderPrice.warning"
-                ),
-                className: "oui-w-[240px] oui-text-2xs oui-font-semibold oui-text-base-contrast-80",
-                children: /* @__PURE__ */ jsxRuntime.jsx(TooltipIcon, { className: "oui-text-warning-darken" })
-              }
-            )
-          ] });
-        }
-      }
-    ];
-  }, [t, symbolInfo, askAndBid, base_dp, quote_dp]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-orderEntry-scaledOrderConfirm oui-font-semibold", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      ui.DataTable,
-      {
-        classNames: {
-          root: ui.cn(
-            "oui-scaledOrderConfirm-table",
-            "oui-bg-base-7",
-            "oui-rounded-lg",
-            // need to set overflow hidden because table header will avoid the border radius
-            "oui-overflow-hidden",
-            // "oui-text-2xs lg:oui-text-xs",
-            // if orders is greater than 6, set the height to 320px to show scroll bar
-            order.orders?.length >= 6 && "oui-h-[320px]"
-          ),
-          // set the min height of the table to show 2 rows
-          scroll: "!oui-min-h-[130px]"
-        },
-        dataSource,
-        columns,
-        bordered: true,
-        onRow: () => {
-          return {
-            className: ui.cn("oui-h-[50px]")
-          };
-        }
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-scaledOrderConfirm-content oui-mb-5 oui-mt-4 oui-text-2xs", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "between", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: t("orderEntry.totalOrders") }),
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { intensity: 80, children: order.orders?.length })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "between", mt: 2, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: t("orderEntry.totalQuantity") }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ui.Text.numeral,
-          {
-            rule: "price",
-            unit: base,
-            dp: base_dp,
-            padding: false,
-            intensity: 80,
-            unitClassName: "oui-text-base-contrast-36 oui-ml-1",
-            children: totalQuantity
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "between", mt: 2, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: t("common.notional") }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ui.Text.numeral,
-          {
-            rule: "price",
-            unit: quote,
-            dp: quote_dp,
-            padding: false,
-            intensity: 80,
-            unitClassName: "oui-text-base-contrast-36 oui-ml-1",
-            children: national
+            rule: "price",
+            unit: quote,
+            dp: quote_dp,
+            padding: false,
+            intensity: 80,
+            unitClassName: "oui-text-base-contrast-36 oui-ml-1",
+            children: national
           }
         )
       ] })
@@ -1851,17 +1425,580 @@ var ScaledOrderConfirmWidget = (props) => {
   const state = useScaledOrderConfirmScript(props);
   return /* @__PURE__ */ jsxRuntime.jsx(ScaledOrderConfirm, { ...props, ...state });
 };
-var scaledOrderConfirmDialogId = "scaledOrderConfirm";
-ui.registerSimpleDialog(scaledOrderConfirmDialogId, ScaledOrderConfirmWidget, {
-  size: "md",
-  title: () => i18n.i18n.t("orderEntry.confirmScaledOrder"),
-  contentProps: {
-    // className: "oui-p-0",
-  }
-});
+var scaledOrderConfirmDialogId = "scaledOrderConfirm";
+ui.registerSimpleDialog(scaledOrderConfirmDialogId, ScaledOrderConfirmWidget, {
+  size: "md",
+  title: () => i18n.i18n.t("orderEntry.confirmScaledOrder"),
+  contentProps: {
+    // className: "oui-p-0",
+  }
+});
+var RegularFeesUI = (props) => {
+  const { t } = i18n.useTranslation();
+  const { taker, maker } = props;
+  const originalTrailingFees = /* @__PURE__ */ jsxRuntime.jsx(
+    ui.Flex,
+    {
+      itemAlign: "center",
+      justify: "between",
+      width: "100%",
+      gap: 1,
+      className: "oui-orderEntry-fees",
+      children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { width: "100%", itemAlign: "center", justify: "between", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-fees-label oui-truncate", size: "2xs", children: t("common.fees") }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          uiConnector.AuthGuard,
+          {
+            fallback: () => /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { className: "oui-truncate", size: "2xs", children: [
+              t("dmm.taker"),
+              ": --% / ",
+              t("dmm.maker"),
+              ": --%"
+            ] }),
+            children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 1, className: "oui-fees-value-container", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { className: "oui-truncate", size: "2xs", children: [
+                t("dmm.taker"),
+                ":"
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", className: "oui-text-base-contrast-80", children: taker }),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", children: "/" }),
+              /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { className: "oui-truncate", size: "2xs", children: [
+                t("dmm.maker"),
+                ":"
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", className: "oui-text-base-contrast-80", children: maker })
+            ] })
+          }
+        )
+      ] })
+    }
+  );
+  return originalTrailingFees;
+};
+var RegularFeesWidget = (props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(RegularFeesUI, { ...props });
+};
+var FeesWidget = ({ symbol }) => {
+  const { takerFee, makerFee, rwaTakerFee, rwaMakerFee } = hooks.useFeeState();
+  const info = hooks.useRwaSymbolsInfoStore();
+  const isRwa = info?.[symbol] !== void 0;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    RegularFeesWidget,
+    {
+      taker: isRwa ? rwaTakerFee : takerFee,
+      maker: isRwa ? rwaMakerFee : makerFee
+    }
+  );
+};
+var options = [0.01, 0.05, 0.1];
+var SlippageEditor = React3.forwardRef((props, ref) => {
+  const { t } = i18n.useTranslation();
+  const [value, setValue] = React3.useState();
+  const [customValue, setCustomValue] = React3.useState("");
+  const [error, setError] = React3.useState(void 0);
+  React3.useImperativeHandle(ref, () => ({
+    getValue: () => customValue ? new utils.Decimal(customValue)?.toNumber() : value
+  }));
+  React3.useEffect(() => {
+    if (props.initialValue && !options.includes(props.initialValue)) {
+      setCustomValue(props.initialValue.toString());
+    } else {
+      setValue(props.initialValue);
+    }
+  }, [props.initialValue, open]);
+  const onClick = (val) => {
+    setValue(val);
+    setCustomValue("");
+    setError(void 0);
+  };
+  const onValueChange = (val) => {
+    if (!val) {
+      setCustomValue(val);
+      return;
+    }
+    const d = new utils.Decimal(val);
+    setValue(void 0);
+    if (d.gt(3)) {
+      setCustomValue("3");
+      setError(t("orderEntry.slippage.error.exceed"));
+    } else {
+      setCustomValue(val);
+      setError(void 0);
+    }
+  };
+  const toolTipButton = props.isMobile ? /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      onClick: () => {
+        ui.modal.alert({
+          title: t("common.tips"),
+          message: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", children: t("orderEntry.slippage.tips") })
+        });
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(ui.ExclamationFillIcon, { className: "oui-text-base-contrast-54", size: 16 })
+    }
+  ) : /* @__PURE__ */ jsxRuntime.jsx(
+    ui.Tooltip,
+    {
+      content: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { intensity: 80, size: "2xs", children: t("orderEntry.slippage.tips") }),
+      className: "oui-w-[260px] oui-bg-base-6",
+      arrow: { className: "oui-fill-base-6" },
+      children: /* @__PURE__ */ jsxRuntime.jsx(ui.TooltipTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.ExclamationFillIcon, { className: "oui-text-base-contrast-54", size: 16 }) })
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-orderEntry-slippageEditor oui-text-2xs", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { mb: 2, gapX: 1, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xs", children: t("orderEntry.slippage") }),
+      toolTipButton
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gapX: 2, children: [
+      options.map((item) => {
+        const isActive = value === item;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          SlippageItem,
+          {
+            value: item,
+            isActive,
+            onClick: () => {
+              onClick(item);
+            }
+          },
+          item
+        );
+      }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Input,
+        {
+          suffix: "%",
+          formatters: [
+            ui.inputFormatter.numberFormatter,
+            ui.inputFormatter.dpFormatter(2)
+          ],
+          value: customValue,
+          onValueChange,
+          classNames: {
+            root: ui.cn(
+              "oui-slippageEditor-customInput",
+              "oui-rounded-md oui-bg-base-6",
+              "oui-h-[40px] oui-w-[74px]"
+            ),
+            input: "oui-text-base-contrast",
+            additional: "oui-pl-1"
+          }
+        }
+      )
+    ] }),
+    !!error && /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { mt: 5, className: "-oui-mb-5", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", color: "danger", children: error }) })
+  ] });
+});
+var SlippageItem = ({ value, isActive, onClick }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ui.Flex,
+    {
+      intensity: 600,
+      justify: "center",
+      itemAlign: "center",
+      r: "md",
+      width: 74,
+      height: 40,
+      className: ui.cn(
+        "oui-slippageEditor-option",
+        "oui-cursor-pointer oui-select-none",
+        isActive ? "oui-bg-primary-light oui-text-primary-contrast/80" : "oui-text-base-contrast-80"
+      ),
+      onClick,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: "sm", children: [
+        value,
+        "%"
+      ] })
+    }
+  );
+};
+var SlippageCell = (props) => {
+  const { t } = i18n.useTranslation();
+  const [open2, { setTrue: setOpen, setFalse: setClose, toggle }] = hooks.useBoolean(false);
+  const { isMobile } = ui.useScreen();
+  const slippageRef = React3.useRef(null);
+  const onConfirm = () => {
+    const val = slippageRef.current?.getValue();
+    props.setSlippage(!val ? "1" : val.toString());
+    setClose();
+    return Promise.resolve(true);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ui.SimpleDialog,
+      {
+        open: open2,
+        onOpenChange: toggle,
+        title: t("common.settings"),
+        contentProps: { size: isMobile ? "xs" : "sm" },
+        classNames: {
+          footer: "oui-orderEntry-slippage-footer",
+          body: "oui-orderEntry-slippage-body"
+        },
+        actions: {
+          primary: {
+            disabled: false,
+            label: t("common.save"),
+            onClick: onConfirm,
+            className: "oui-slippage-save-btn"
+          },
+          secondary: {
+            label: t("common.cancel"),
+            onClick: () => setClose(),
+            className: "oui-slippage-cancel-btn"
+          }
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          SlippageEditor,
+          {
+            ref: slippageRef,
+            isMobile,
+            initialValue: props.slippage ? Number(props.slippage) : void 0
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "between", className: "oui-orderEntry-slippage", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-slippage-label", size: "2xs", children: t("orderEntry.slippage") }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        uiConnector.AuthGuard,
+        {
+          fallback: () => /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: "2xs", children: [
+            t("orderEntry.slippage.est"),
+            ": -% / ",
+            t("common.max"),
+            ": --%"
+          ] }),
+          children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 1, className: "oui-slippage-value-container", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ui.Text.numeral,
+              {
+                size: "2xs",
+                rule: "percentages",
+                prefix: `${t("orderEntry.slippage.est")}: `,
+                suffix: ` / ${t("common.max")}: `,
+                children: props.estSlippage ?? 0
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                className: "oui-slippage-edit-btn oui-text-2xs",
+                onClick: () => setOpen(),
+                children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { className: "oui-gap-0.5", as: "span", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", className: "oui-text-primary", children: `${props.slippage || "-"}%` }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    ui.EditIcon,
+                    {
+                      className: "oui-slippage-edit-icon oui-text-primary oui-hidden md:oui-block",
+                      size: 12,
+                      opacity: 1
+                    }
+                  )
+                ] })
+              }
+            )
+          ] })
+        }
+      )
+    ] })
+  ] });
+};
+var SlippageUI = (props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(SlippageCell, { ...props });
+};
+function AssetInfo(props) {
+  const { canTrade, disableFeatures, orderType, symbol } = props;
+  const { t } = i18n.useTranslation();
+  const { isMobile } = ui.useScreen();
+  const displayEstLiqPrice = hooks.useGetEstLiqPrice({
+    estLiqPrice: props.estLiqPrice,
+    symbol,
+    side: props.side
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "oui-orderEntry-assetInfo oui-space-y-[2px] xl:oui-space-y-1",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "between", className: "oui-orderEntry-estLiqPrice", children: [
+          isMobile ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", children: t("orderEntry.estLiqPrice") }) : /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Tooltip,
+            {
+              content: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-min-w-[204px] oui-max-w-[280px] oui-text-2xs oui-leading-normal oui-text-base-contrast-80", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-text-pretty", children: t("common.liquidationPrice.tooltip") }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "a",
+                  {
+                    href: "https://orderly.network/docs/introduction/trade-on-orderly/perpetual-futures/liquidations",
+                    target: "_blank",
+                    rel: "noopener noreferrer",
+                    className: "oui-text-primary oui-underline",
+                    children: t("common.liquidationPrice.tooltip.learnMore")
+                  }
+                ) })
+              ] }),
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                ui.Text,
+                {
+                  size: "2xs",
+                  className: "oui-estLiqPrice-label oui-cursor-pointer oui-border-b oui-border-dashed oui-border-line-12",
+                  children: t("orderEntry.estLiqPrice")
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Text.numeral,
+            {
+              unit: props.quote,
+              size: "2xs",
+              dp: props.dp,
+              className: "oui-estLiqPrice-value oui-text-base-contrast-80",
+              unitClassName: "oui-ml-1 oui-text-base-contrast-36",
+              children: canTrade ? displayEstLiqPrice ?? "--" : "--"
+            }
+          )
+        ] }),
+        orderType === types.OrderType.MARKET && !disableFeatures?.includes("slippageSetting") && /* @__PURE__ */ jsxRuntime.jsx(
+          SlippageUI,
+          {
+            slippage: props.slippage,
+            setSlippage: props.setSlippage,
+            estSlippage: props.estSlippage
+          }
+        ),
+        !disableFeatures?.includes("feesInfo") && /* @__PURE__ */ jsxRuntime.jsx(FeesWidget, { symbol: props.symbol })
+      ]
+    }
+  );
+}
+var calculateLTVColor = (val) => {
+  if (val >= 0 && val < 50) {
+    return "oui-text-success";
+  } else if (val >= 50 && val < 80) {
+    return "oui-text-warning";
+  } else if (val >= 80) {
+    return "oui-text-danger";
+  } else {
+    return "";
+  }
+};
+var LTVRiskTooltipUI = (props) => {
+  const { t } = i18n.useTranslation();
+  const {
+    ltv_threshold,
+    negative_usdc_threshold,
+    isThresholdLoading,
+    holdingData = [],
+    currentLtv,
+    onConvert,
+    marginMode
+  } = props;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    ui.Flex,
+    {
+      gap: 1,
+      className: "oui-orderEntry-ltvRiskTooltip oui-w-72 oui-max-w-72",
+      direction: "column",
+      itemAlign: "start",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { width: "100%", justify: "between", itemAlign: "center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { intensity: 36, size: "xs", children: t("common.assets") }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { intensity: 36, size: "xs", children: t("transfer.deposit.collateralContribution") })
+        ] }),
+        holdingData.map((asset, index) => {
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            ui.Flex,
+            {
+              width: "100%",
+              justify: "between",
+              itemAlign: "center",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { intensity: 80, size: "xs", children: asset.token }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  ui.Text,
+                  {
+                    size: "xs",
+                    intensity: 80,
+                    className: ui.cn(
+                      Number(asset.collateralContribution) < 0 && "oui-text-warning"
+                    ),
+                    children: utils.removeTrailingZeros(asset.collateralContribution)
+                  }
+                )
+              ]
+            },
+            `item-${index}`
+          );
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { className: "oui-w-full" }),
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { width: "100%", justify: "between", itemAlign: "center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { intensity: 36, size: "xs", children: t("transfer.LTV.currentLTV") }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            ui.Text,
+            {
+              size: "xs",
+              intensity: 36,
+              className: ui.cn("oui-select-none", calculateLTVColor(currentLtv)),
+              children: [
+                currentLtv,
+                "%"
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-py-2", intensity: 54, size: "2xs", children: t("transfer.LTV.tooltip", {
+          threshold: isThresholdLoading ? "-" : ltv_threshold,
+          usdcThreshold: isThresholdLoading ? "-" : negative_usdc_threshold
+        }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Button,
+          {
+            fullWidth: true,
+            size: "md",
+            variant: "outlined",
+            color: "secondary",
+            className: "oui-ltvRiskTooltip-convert-btn",
+            onClick: onConvert,
+            children: t("transfer.convert.convertAssets")
+          }
+        )
+      ]
+    }
+  );
+};
+var useConvertThreshold = () => {
+  const { data, error, isLoading } = hooks.useQuery(
+    "/v1/public/auto_convert_threshold",
+    { errorRetryCount: 3 }
+  );
+  return {
+    ltv_threshold: new utils.Decimal(data?.ltv_threshold ?? 0).mul(100).toNumber(),
+    negative_usdc_threshold: data?.negative_usdc_threshold,
+    isLoading,
+    error
+  };
+};
+var useLTVTooltipScript = (marginMode) => {
+  const { data: holdingList = [], isLoading: isHoldingLoading } = hooks.useHoldingStream();
+  const {
+    ltv_threshold,
+    negative_usdc_threshold,
+    isLoading: isThresholdLoading
+  } = useConvertThreshold();
+  const tokensInfo = hooks.useAppStore((state) => state.tokensInfo);
+  const { getIndexPrice } = hooks.useIndexPricesStream();
+  const holdingData = holdingList.map((item) => {
+    const tokenInfo = tokensInfo?.find(({ token }) => token === item.token);
+    const indexPrice = getIndexPrice(item.token);
+    const collateralRatio = tokenInfo ? perp.account.collateralRatio({
+      baseWeight: tokenInfo.base_weight ?? 0,
+      discountFactor: tokenInfo.discount_factor ?? 0,
+      collateralQty: item.holding,
+      collateralCap: tokenInfo?.user_max_qty ?? item.holding,
+      indexPrice
+    }) : utils.zero;
+    const collateralContribution = perp.account.collateralContribution({
+      collateralQty: item.holding,
+      collateralCap: tokenInfo?.user_max_qty ?? item.holding,
+      collateralRatio: collateralRatio.toNumber(),
+      indexPrice
+    });
+    return {
+      ...item,
+      collateralContribution
+    };
+  });
+  const currentLtv = hooks.useComputedLTV();
+  const onConvert = React3.useCallback(async () => {
+    return ui.modal.show("ConvertDialogId");
+  }, []);
+  return {
+    holdingData,
+    isHoldingLoading,
+    ltv_threshold,
+    negative_usdc_threshold,
+    isThresholdLoading,
+    currentLtv,
+    onConvert,
+    marginMode
+  };
+};
+var LTVRiskTooltipWidget = ({
+  marginMode
+}) => {
+  const state = useLTVTooltipScript(marginMode);
+  return /* @__PURE__ */ jsxRuntime.jsx(LTVRiskTooltipUI, { ...state });
+};
+var Available = (props) => {
+  const { canTrade, currentLtv, quote, freeCollateral, marginMode } = props;
+  const { t } = i18n.useTranslation();
+  const { isMobile } = ui.useScreen();
+  const showLTV = React3.useMemo(() => {
+    return typeof currentLtv === "number" && !Number.isNaN(currentLtv) && currentLtv > 0;
+  }, [currentLtv]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    ui.Flex,
+    {
+      itemAlign: "center",
+      justify: "between",
+      className: "oui-orderEntry-available",
+      children: [
+        marginMode === types.MarginMode.ISOLATED ? /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { content: t("transfer.LTV.isolatedModeUsdcOnly"), children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-available-label oui-cursor-pointer", size: "2xs", children: t("common.available") }) }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-available-label", size: "2xs", children: t("common.available") }),
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { itemAlign: "center", justify: "center", gap: 1, children: [
+          showLTV && /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Tooltip,
+            {
+              className: "oui-available-ltvRisk-tooltip oui-bg-base-6 oui-p-2",
+              content: /* @__PURE__ */ jsxRuntime.jsx(LTVRiskTooltipWidget, { marginMode }),
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                ui.InfoCircleIcon,
+                {
+                  className: "oui-cursor-pointer oui-text-warning oui-opacity-80"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Text.numeral,
+            {
+              unit: quote,
+              size: "2xs",
+              className: "oui-available-value oui-text-base-contrast-80",
+              unitClassName: "oui-ml-1 oui-text-base-contrast-54",
+              dp: 2,
+              padding: false,
+              children: canTrade ? freeCollateral : 0
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Button,
+            {
+              variant: "text",
+              size: "xs",
+              color: "secondary",
+              className: "oui-available-deposit-icon oui-p-0 hover:oui-text-base-contrast-80",
+              onClick: () => {
+                const handleDomId = isMobile ? "DepositAndWithdrawWithSheetId" : "DepositAndWithdrawWithDialogId";
+                ui.modal.show(handleDomId, {
+                  activeTab: "deposit"
+                });
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(ui.AddCircleIcon, { opacity: 1 })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
 var OrderTypeSelect = (props) => {
   const { t } = i18n.useTranslation();
   const { isMobile } = ui.useScreen();
+  const { marketOrderDisabled = false, marketOrderDisabledTooltip } = props;
   const allOptions = React3.useMemo(() => {
     return [
       { label: t("orderEntry.orderType.limitOrder"), value: types.OrderType.LIMIT },
@@ -1911,6 +2048,7 @@ var OrderTypeSelect = (props) => {
       [types.OrderType.TRAILING_STOP]: t("orderEntry.orderType.trailingStop")
     };
   }, [t]);
+  const mobileOptions = React3.useMemo(() => allOptions, [allOptions]);
   if (!isMobile) {
     const baseButtonClassName = "oui-flex oui-flex-1 oui-items-center oui-justify-center oui-gap-x-1 oui-rounded oui-px-3 oui-py-0.5 oui-text-xs oui-font-semibold oui-h-8";
     const selectedButtonClassName = ui.cn(
@@ -1942,7 +2080,24 @@ var OrderTypeSelect = (props) => {
               children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xs", children: t("orderEntry.orderType.limit") })
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(
+          marketOrderDisabled && marketOrderDisabledTooltip ? /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Tooltip,
+            {
+              content: marketOrderDisabledTooltip,
+              className: "oui-max-w-[275px]",
+              children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oui-inline-flex oui-flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  className: unselectedButtonClassName,
+                  "aria-pressed": false,
+                  disabled: true,
+                  "data-testid": "oui-testid-orderEntry-orderType-market",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xs", children: t("orderEntry.orderType.market") })
+                }
+              ) })
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
               type: "button",
@@ -1992,14 +2147,24 @@ var OrderTypeSelect = (props) => {
       }
     );
   }
+  const handleMobileValueChange = (value) => {
+    if (marketOrderDisabled && value === types.OrderType.MARKET && marketOrderDisabledTooltip) {
+      ui.modal.alert({
+        title: t("common.tips"),
+        message: marketOrderDisabledTooltip
+      });
+      return;
+    }
+    props.onChange(value);
+  };
   return /* @__PURE__ */ jsxRuntime.jsx(
     ui.Select.options,
     {
       testid: "oui-testid-orderEntry-orderType-button",
       currentValue: props.type,
       value: props.type,
-      options: allOptions,
-      onValueChange: props.onChange,
+      options: mobileOptions,
+      onValueChange: handleMobileValueChange,
       contentProps: {
         className: ui.cn(
           "oui-orderEntry-orderTypeSelect-content",
@@ -2024,6 +2189,274 @@ var OrderTypeSelect = (props) => {
     }
   );
 };
+var OrderEntryContext = React3.createContext(
+  {}
+);
+var useOrderEntryContext = () => {
+  return React3.useContext(OrderEntryContext);
+};
+var SLIDER_MIN = 0;
+var SLIDER_MAX = 100;
+var QuantitySlider = React3.memo((props) => {
+  const { canTrade, side, order_quantity, maxQty } = props;
+  const [sliderValue, setSliderValue] = React3.useState(0);
+  const {
+    setOrderValue,
+    manualSetOrderValue,
+    symbolInfo,
+    lastQuantityInputType
+  } = useOrderEntryContext();
+  const { base_dp, base_tick } = symbolInfo;
+  const { t } = i18n.useTranslation();
+  const color = React3.useMemo(
+    () => canTrade ? side === types.OrderSide.BUY ? "buy" : "sell" : void 0,
+    [side, canTrade]
+  );
+  const maxLabel = React3.useMemo(() => {
+    return side === types.OrderSide.BUY ? t("orderEntry.maxBuy") : t("orderEntry.maxSell");
+  }, [side, t]);
+  const onSliderValueChange = (value) => {
+    lastQuantityInputType.current = 4 /* QUANTITY_SLIDER */;
+    setSliderValue(value);
+    sliderToQuantity(value, true);
+  };
+  const sliderToQuantity = (value, isManual = false) => {
+    const newQty = new utils.Decimal(value).div(SLIDER_MAX).mul(maxQty).toFixed(base_dp, utils.Decimal.ROUND_DOWN);
+    if (isManual) {
+      manualSetOrderValue?.(
+        "order_quantity",
+        hooks.utils.formatNumber(newQty, base_tick)
+      );
+    } else {
+      setOrderValue("order_quantity", hooks.utils.formatNumber(newQty, base_tick));
+    }
+  };
+  const onMax = () => {
+    onSliderValueChange(SLIDER_MAX);
+    if (sliderValue === SLIDER_MAX) {
+      sliderToQuantity(SLIDER_MAX, true);
+    }
+  };
+  React3.useEffect(() => {
+    if (lastQuantityInputType.current === 4 /* QUANTITY_SLIDER */) {
+      sliderToQuantity(sliderValue);
+    }
+  }, [maxQty]);
+  React3.useEffect(() => {
+    const quantityToSlider = () => {
+      if (order_quantity && Number(order_quantity) !== 0 && maxQty !== 0) {
+        return new utils.Decimal(Math.min(Number(order_quantity), maxQty)).div(maxQty).mul(SLIDER_MAX).todp(2, utils.Decimal.ROUND_DOWN).toNumber();
+      }
+      return 0;
+    };
+    if (lastQuantityInputType.current !== 4 /* QUANTITY_SLIDER */) {
+      setSliderValue(quantityToSlider());
+    }
+  }, [order_quantity, maxQty]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-orderEntry-quantitySlider", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Slider,
+      {
+        disabled: maxQty === 0 || !canTrade,
+        value: [sliderValue],
+        color,
+        markCount: 4,
+        showTip: true,
+        onValueChange: (e) => {
+          onSliderValueChange(e[0]);
+        },
+        min: SLIDER_MIN,
+        max: SLIDER_MAX
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      ui.Flex,
+      {
+        justify: "between",
+        className: "oui-quantitySlider-footer oui-pt-1 xl:oui-pt-2",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Text.numeral,
+            {
+              size: "2xs",
+              color,
+              dp: 2,
+              padding: false,
+              suffix: "%",
+              children: canTrade ? sliderValue : 0
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                className: ui.textVariants({
+                  size: "2xs",
+                  className: "oui-quantitySlider-maxQty-btn oui-mr-1"
+                }),
+                onClick: onMax,
+                "data-testid": "oui-testid-orderEntry-maxQty-value-button",
+                children: maxLabel
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ui.Text.numeral,
+              {
+                size: "2xs",
+                color,
+                dp: base_dp,
+                padding: false,
+                className: "oui-quantitySlider-maxQty-value",
+                "data-testid": "oui-testid-orderEntry-maxQty-value",
+                children: canTrade ? maxQty : 0
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+});
+QuantitySlider.displayName = "QuantitySlider";
+var OrderEntryTypeTabsInjectabled = ui.injectable(
+  (props) => {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
+      OrderTypeSelect,
+      {
+        type: props.type,
+        side: props.side,
+        canTrade: props.canTrade,
+        onChange: props.onChange,
+        marketOrderDisabled: props.marketOrderDisabled,
+        marketOrderDisabledTooltip: props.marketOrderDisabledTooltip
+      }
+    ) });
+  },
+  "Trading.OrderEntry.TypeTabs"
+);
+var OrderEntryBuySellSwitchInjectabled = ui.injectable(
+  (props) => {
+    const { t } = i18n.useTranslation();
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: ui.cn(
+          "oui-orderEntry-side",
+          "oui-grid oui-w-full oui-flex-1 oui-gap-x-2 lg:oui-flex lg:oui-gap-x-[6px]",
+          "oui-grid-cols-2"
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Button,
+            {
+              onClick: () => {
+                props.onSideChange(types.OrderSide.BUY);
+              },
+              size: "md",
+              fullWidth: true,
+              "data-type": types.OrderSide.BUY,
+              className: ui.cn(
+                "oui-orderEntry-side-buy-btn",
+                props.side === types.OrderSide.BUY && props.canTrade ? "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(
+            ui.Button,
+            {
+              onClick: () => {
+                props.onSideChange(types.OrderSide.SELL);
+              },
+              "data-type": types.OrderSide.SELL,
+              fullWidth: true,
+              size: "md",
+              className: ui.cn(
+                "oui-orderEntry-side-sell-btn",
+                props.side === types.OrderSide.SELL && props.canTrade ? "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")
+            }
+          )
+        ]
+      }
+    );
+  },
+  "Trading.OrderEntry.BuySellSwitch"
+);
+var OrderEntryAvailableInjectabled = ui.injectable(
+  (props) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Available,
+      {
+        currentLtv: props.currentLtv,
+        canTrade: props.canTrade,
+        quote: props.quote,
+        freeCollateral: props.freeCollateral,
+        marginMode: props.marginMode
+      }
+    );
+  },
+  "Trading.OrderEntry.Available"
+);
+var OrderEntryQuantitySliderInjectabled = ui.injectable(
+  (props) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      QuantitySlider,
+      {
+        canTrade: props.canTrade,
+        side: props.side,
+        order_quantity: props.order_quantity,
+        maxQty: props.maxQty
+      }
+    );
+  },
+  "Trading.OrderEntry.QuantitySlider"
+);
+var OrderEntrySubmitSectionInjectabled = ui.injectable(
+  (props) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ui.ThrottledButton,
+        {
+          fullWidth: true,
+          id: "order-entry-submit-button",
+          "data-type": types.OrderSide.BUY,
+          className: ui.cn(
+            "oui-orderEntry-submit-btn",
+            props.side === types.OrderSide.BUY ? "orderly-order-entry-submit-button-buy oui-bg-success-darken hover:oui-bg-success-darken/80 active:oui-bg-success-darken/80" : "orderly-order-entry-submit-button-sell oui-bg-danger-darken hover:oui-bg-danger-darken/80 active:oui-bg-danger-darken/80"
+          ),
+          onClick: props.onSubmit,
+          loading: props.isMutating,
+          disabled: !props.canTrade,
+          children: props.buttonLabel
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        AssetInfo,
+        {
+          canTrade: props.assetInfo.canTrade,
+          quote: props.assetInfo.quote,
+          estLiqPrice: props.assetInfo.estLiqPrice,
+          estLiqPriceDistance: props.assetInfo.estLiqPriceDistance,
+          estLeverage: props.assetInfo.estLeverage,
+          currentLeverage: props.assetInfo.currentLeverage,
+          slippage: props.assetInfo.slippage,
+          dp: props.assetInfo.dp,
+          setSlippage: props.assetInfo.setSlippage,
+          estSlippage: props.assetInfo.estSlippage,
+          orderType: props.assetInfo.orderType,
+          disableFeatures: props.assetInfo.disableFeatures,
+          symbol: props.assetInfo.symbol,
+          side: props.assetInfo.side
+        }
+      )
+    ] });
+  },
+  "Trading.OrderEntry.SubmitSection"
+);
 var MarginModeSwitch = (props) => {
   const { t } = i18n.useTranslation();
   const handleSelect = (mode) => {
@@ -2102,10 +2535,11 @@ var MarginModeSwitch = (props) => {
                   {
                     className: "oui-tracking-[0.03em]",
                     rule: "symbol",
-                    formatString: "base-type",
+                    formatString: "base",
                     size: "base",
                     weight: "semibold",
                     intensity: 98,
+                    suffix: /* @__PURE__ */ jsxRuntime.jsx(SymbolBadge, { symbol: props.symbol }),
                     children: props.symbol
                   }
                 )
@@ -2117,7 +2551,8 @@ var MarginModeSwitch = (props) => {
                     mode: types.MarginMode.CROSS,
                     selected: props.selectedMarginMode === types.MarginMode.CROSS,
                     isCurrent: props.currentMarginMode === types.MarginMode.CROSS,
-                    onClick: () => handleSelect(types.MarginMode.CROSS)
+                    onClick: () => handleSelect(types.MarginMode.CROSS),
+                    disabled: props.isPermissionlessListing
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsx(
@@ -2180,9 +2615,11 @@ var OptionCard = (props) => {
         "oui-relative oui-w-full oui-rounded-md oui-p-2",
         "oui-bg-base-6",
         "oui-text-left",
-        props.selected ? "oui-border oui-border-[#38e2fe]" : "oui-border oui-border-transparent hover:oui-border-line-12"
+        props.disabled ? "oui-cursor-not-allowed oui-opacity-50 oui-border oui-border-transparent" : props.selected ? "oui-border oui-border-[#38e2fe]" : "oui-border oui-border-transparent hover:oui-border-line-12"
       ),
-      onClick: props.onClick,
+      onClick: props.disabled ? void 0 : props.onClick,
+      disabled: props.disabled,
+      "aria-disabled": props.disabled,
       "data-testid": `oui-testid-marginModeSwitch-option-${props.mode}`,
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", gap: 2, itemAlign: "start", className: "oui-w-full", children: [
@@ -2215,7 +2652,11 @@ var useMarginModeSwitchScript = (options2) => {
   const { symbol, close } = options2;
   const { isMobile } = ui.useScreen();
   const { t } = i18n.useTranslation();
-  const { marginMode: currentMarginMode, update } = hooks.useMarginModeBySymbol(symbol);
+  const {
+    marginMode: currentMarginMode,
+    update,
+    isPermissionlessListing
+  } = hooks.useMarginModeBySymbol(symbol);
   const [selectedMarginMode, setSelectedMarginMode] = React3.useState(currentMarginMode);
   React3.useEffect(() => {
     setSelectedMarginMode(currentMarginMode);
@@ -2253,11 +2694,13 @@ var useMarginModeSwitchScript = (options2) => {
     setSelectedMarginMode,
     applyMarginMode,
     close,
-    onSelect
+    onSelect,
+    isPermissionlessListing
   };
 };
 var useMarginModeSettingsScript = (options2) => {
   const { isMobile } = ui.useScreen();
+  const { t } = i18n.useTranslation();
   const [markets] = hooks.useMarkets(hooks.MarketsType.ALL);
   const items = React3.useMemo(() => {
     if (!markets || markets.length === 0) {
@@ -2266,10 +2709,20 @@ var useMarginModeSettingsScript = (options2) => {
     return markets.map((market) => ({
       key: market.symbol,
       // Original symbol: "PERP_BTC_USDC"
-      symbol: utils.formatSymbol(market.symbol, "base-type")
+      symbol: utils.formatSymbol(market.symbol, "base"),
       // Formatted: "BTC-PERP"
+      brokerId: market.broker_id
     }));
   }, [markets]);
+  const brokerLockedKeys = React3.useMemo(() => {
+    const locked = /* @__PURE__ */ new Set();
+    for (const item of items) {
+      if (item.brokerId) {
+        locked.add(item.key);
+      }
+    }
+    return locked;
+  }, [items]);
   const [searchKeyword, setSearchKeyword] = React3.useState("");
   const [selectedKeys, setSelectedKeys] = React3.useState(
     () => /* @__PURE__ */ new Set()
@@ -2290,11 +2743,15 @@ var useMarginModeSettingsScript = (options2) => {
   const itemMarginModes = React3.useMemo(() => {
     const result = {};
     for (const item of items) {
+      if (brokerLockedKeys.has(item.key)) {
+        result[item.key] = types.MarginMode.ISOLATED;
+        continue;
+      }
       const marginMode = marginModes[item.key];
       result[item.key] = marginMode ?? types.MarginMode.CROSS;
     }
     return result;
-  }, [items, marginModes]);
+  }, [brokerLockedKeys, items, marginModes]);
   const filteredItems = React3.useMemo(() => {
     const keyword = searchKeyword.trim().toLowerCase();
     if (!keyword) return items;
@@ -2330,17 +2787,21 @@ var useMarginModeSettingsScript = (options2) => {
   const onSearchChange = React3.useCallback((keyword) => {
     setSearchKeyword(keyword);
   }, []);
-  const onToggleItem = React3.useCallback((key) => {
-    setSelectedKeys((prev) => {
-      const next = new Set(prev);
-      if (next.has(key)) {
-        next.delete(key);
-      } else {
-        next.add(key);
-      }
-      return next;
-    });
-  }, []);
+  const onToggleItem = React3.useCallback(
+    (key) => {
+      if (brokerLockedKeys.has(key)) return;
+      setSelectedKeys((prev) => {
+        const next = new Set(prev);
+        if (next.has(key)) {
+          next.delete(key);
+        } else {
+          next.add(key);
+        }
+        return next;
+      });
+    },
+    [brokerLockedKeys]
+  );
   const onToggleSelectAll = React3.useCallback(() => {
     setSelectedKeys((prev) => {
       const next = new Set(prev);
@@ -2351,31 +2812,39 @@ var useMarginModeSettingsScript = (options2) => {
         return next;
       }
       for (const item of filteredItems) {
+        if (brokerLockedKeys.has(item.key)) continue;
         next.add(item.key);
       }
       return next;
     });
-  }, [filteredItems, isSelectAll]);
+  }, [brokerLockedKeys, filteredItems, isSelectAll]);
   const onSetMarginMode = React3.useCallback(
     async (mode) => {
       if (selectedKeys.size === 0) return;
+      const editableSymbolList = Array.from(selectedKeys).filter(
+        (key) => !brokerLockedKeys.has(key)
+      );
+      if (editableSymbolList.length === 0) {
+        ui.toast.error(t("marginMode.noEditableSymbolsSelected"));
+        return;
+      }
       setIsOperationLoading(true);
       try {
         const payload = {
-          symbol_list: Array.from(selectedKeys),
+          symbol_list: editableSymbolList,
           default_margin_mode: mode
         };
         await updateMarginMode(payload);
-        ui.toast.success("Updated successfully");
+        ui.toast.success(t("marginMode.updatedSuccessfully"));
       } catch (error) {
         ui.toast.error(
-          error instanceof Error ? error.message : "Failed to update margin mode"
+          error instanceof Error ? error.message : t("marginMode.failedToUpdateMarginMode")
         );
       } finally {
         setIsOperationLoading(false);
       }
     },
-    [selectedKeys, updateMarginMode]
+    [brokerLockedKeys, selectedKeys, updateMarginMode]
   );
   const isLoading = isDataLoading || isMarginModesLoading || isOperationLoading || isSettingMarginMode;
   return {
@@ -2523,7 +2992,8 @@ var MarginModeSettings = (props) => {
                       item,
                       checked: props.selectedKeys.has(item.key),
                       marginMode: props.itemMarginModes[item.key] ?? types.MarginMode.CROSS,
-                      onToggle: props.onToggleItem
+                      onToggle: props.onToggleItem,
+                      disabled: !!item.brokerId
                     },
                     item.key
                   ))
@@ -2626,13 +3096,15 @@ var MarginModeSettings = (props) => {
 var SymbolRow = (props) => {
   const { t } = i18n.useTranslation();
   const handleCheckedChange = React3.useCallback(() => {
+    if (props.disabled) return;
     props.onToggle(props.item.key);
   }, [props]);
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { itemAlign: "center", className: "oui-w-full", children: /* @__PURE__ */ jsxRuntime.jsxs(
+  const row = /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { itemAlign: "center", className: "oui-w-full", children: /* @__PURE__ */ jsxRuntime.jsxs(
     "label",
     {
       className: ui.cn(
-        "oui-flex oui-items-center oui-gap-2 oui-flex-1 oui-cursor-pointer oui-select-none oui-w-full"
+        "oui-flex oui-items-center oui-gap-2 oui-flex-1 oui-cursor-pointer oui-select-none oui-w-full",
+        props.disabled ? "oui-cursor-not-allowed oui-opacity-50" : ""
       ),
       "data-testid": `oui-testid-marginModeSettings-item-${props.item.key}`,
       children: [
@@ -2642,10 +3114,12 @@ var SymbolRow = (props) => {
             color: "white",
             checked: props.checked,
             onCheckedChange: handleCheckedChange,
-            "aria-label": props.item.symbol
+            "aria-label": props.item.symbol,
+            disabled: props.disabled
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-text-sm oui-font-semibold oui-text-base-contrast-80", children: props.item.symbol }),
+        /* @__PURE__ */ jsxRuntime.jsx(SymbolBadge, { symbol: props.item.key }),
         /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
@@ -2661,6 +3135,17 @@ var SymbolRow = (props) => {
       ]
     }
   ) });
+  if (props.disabled) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Tooltip,
+      {
+        content: t("marginMode.disabledSymbolTooltip"),
+        className: "oui-max-w-[280px] oui-text-2xs oui-text-base-contrast-80",
+        children: row
+      }
+    );
+  }
+  return row;
 };
 var SearchGlyph = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -2832,7 +3317,6 @@ var LeverageBadge = (props) => {
 };
 function OrderEntryHeader(props) {
   const { canTrade, side, order_type, setOrderValue } = props;
-  const { t } = i18n.useTranslation();
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
       LeverageBadge,
@@ -2844,71 +3328,31 @@ function OrderEntryHeader(props) {
         disabled: !props.canTrade
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
-      OrderTypeSelect,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      OrderEntryTypeTabsInjectabled,
       {
         type: order_type,
         side,
         canTrade,
         onChange: (type) => {
           setOrderValue("order_type", type);
-        }
+        },
+        marketOrderDisabled: props.marketOrderDisabled,
+        marketOrderDisabledTooltip: props.marketOrderDisabledTooltip
       }
-    ) }),
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      OrderEntryBuySellSwitchInjectabled,
       {
-        className: ui.cn(
-          "oui-orderEntry-side",
-          "oui-grid oui-w-full oui-flex-1 oui-gap-x-2 lg:oui-flex lg:oui-gap-x-[6px]",
-          "oui-grid-cols-2"
-        ),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            ui.Button,
-            {
-              onClick: () => {
-                props.setOrderValue("side", types.OrderSide.BUY);
-              },
-              size: "md",
-              fullWidth: true,
-              "data-type": types.OrderSide.BUY,
-              className: ui.cn(
-                "oui-orderEntry-side-buy-btn",
-                side === types.OrderSide.BUY && canTrade ? "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(
-            ui.Button,
-            {
-              onClick: () => {
-                props.setOrderValue("side", types.OrderSide.SELL);
-              },
-              "data-type": types.OrderSide.SELL,
-              fullWidth: true,
-              size: "md",
-              className: ui.cn(
-                "oui-orderEntry-side-sell-btn",
-                side === types.OrderSide.SELL && props.canTrade ? "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")
-            }
-          )
-        ]
+        side,
+        canTrade,
+        onSideChange: (nextSide) => {
+          props.setOrderValue("side", nextSide);
+        }
       }
     )
   ] });
 }
-var OrderEntryContext = React3.createContext(
-  {}
-);
-var useOrderEntryContext = () => {
-  return React3.useContext(OrderEntryContext);
-};
 var OrderEntryProvider = (props) => {
   const {
     errorMsgVisible,
@@ -2917,6 +3361,7 @@ var OrderEntryProvider = (props) => {
     onBlur,
     getErrorMsg,
     setOrderValue,
+    manualSetOrderValue,
     setOrderValues,
     currentFocusInput,
     errors,
@@ -2935,6 +3380,7 @@ var OrderEntryProvider = (props) => {
       onBlur,
       getErrorMsg,
       setOrderValue,
+      manualSetOrderValue,
       setOrderValues,
       currentFocusInput,
       errors,
@@ -2953,6 +3399,7 @@ var OrderEntryProvider = (props) => {
     onBlur,
     getErrorMsg,
     setOrderValue,
+    manualSetOrderValue,
     setOrderValues,
     currentFocusInput,
     errors,
@@ -4376,116 +4823,6 @@ function OrderInput(props) {
     )
   ] });
 }
-var SLIDER_MIN = 0;
-var SLIDER_MAX = 100;
-var QuantitySlider = React3.memo((props) => {
-  const { canTrade, side, order_quantity, maxQty } = props;
-  const [sliderValue, setSliderValue] = React3.useState(0);
-  const { setOrderValue, symbolInfo, lastQuantityInputType } = useOrderEntryContext();
-  const { base_dp, base_tick } = symbolInfo;
-  const { t } = i18n.useTranslation();
-  const color = React3.useMemo(
-    () => canTrade ? side === types.OrderSide.BUY ? "buy" : "sell" : void 0,
-    [side, canTrade]
-  );
-  const maxLabel = React3.useMemo(() => {
-    return side === types.OrderSide.BUY ? t("orderEntry.maxBuy") : t("orderEntry.maxSell");
-  }, [side, t]);
-  const onSliderValueChange = (value) => {
-    lastQuantityInputType.current = 4 /* QUANTITY_SLIDER */;
-    setSliderValue(value);
-  };
-  const sliderToQuantity = (value) => {
-    const newQty = new utils.Decimal(value).div(SLIDER_MAX).mul(maxQty).toFixed(base_dp, utils.Decimal.ROUND_DOWN);
-    setOrderValue("order_quantity", hooks.utils.formatNumber(newQty, base_tick));
-  };
-  const onMax = () => {
-    onSliderValueChange(SLIDER_MAX);
-    if (sliderValue === SLIDER_MAX) {
-      sliderToQuantity(SLIDER_MAX);
-    }
-  };
-  React3.useEffect(() => {
-    if (lastQuantityInputType.current === 4 /* QUANTITY_SLIDER */) {
-      sliderToQuantity(sliderValue);
-    }
-  }, [sliderValue, maxQty]);
-  React3.useEffect(() => {
-    const quantityToSlider = () => {
-      if (order_quantity && Number(order_quantity) !== 0 && maxQty !== 0) {
-        return new utils.Decimal(Math.min(Number(order_quantity), maxQty)).div(maxQty).mul(SLIDER_MAX).todp(2, utils.Decimal.ROUND_DOWN).toNumber();
-      }
-      return 0;
-    };
-    if (lastQuantityInputType.current !== 4 /* QUANTITY_SLIDER */) {
-      setSliderValue(quantityToSlider());
-    }
-  }, [order_quantity, maxQty]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-orderEntry-quantitySlider", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      ui.Slider,
-      {
-        disabled: maxQty === 0 || !canTrade,
-        value: [sliderValue],
-        color,
-        markCount: 4,
-        showTip: true,
-        onValueChange: (e) => {
-          onSliderValueChange(e[0]);
-        },
-        min: SLIDER_MIN,
-        max: SLIDER_MAX
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      ui.Flex,
-      {
-        justify: "between",
-        className: "oui-quantitySlider-footer oui-pt-1 xl:oui-pt-2",
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            ui.Text.numeral,
-            {
-              size: "2xs",
-              color,
-              dp: 2,
-              padding: false,
-              suffix: "%",
-              children: canTrade ? sliderValue : 0
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                className: ui.textVariants({
-                  size: "2xs",
-                  className: "oui-quantitySlider-maxQty-btn oui-mr-1"
-                }),
-                onClick: onMax,
-                "data-testid": "oui-testid-orderEntry-maxQty-value-button",
-                children: maxLabel
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              ui.Text.numeral,
-              {
-                size: "2xs",
-                color,
-                dp: base_dp,
-                padding: false,
-                className: "oui-quantitySlider-maxQty-value",
-                "data-testid": "oui-testid-orderEntry-maxQty-value",
-                children: canTrade ? maxQty : 0
-              }
-            )
-          ] })
-        ]
-      }
-    )
-  ] });
-});
-QuantitySlider.displayName = "QuantitySlider";
 var ReduceOnlySwitch = ({
   checked,
   onCheckedChange,
@@ -4529,10 +4866,19 @@ var usePnlInputContext = () => {
 };
 
 // src/components/pnlInput/useBuilder.script.ts
+function normalizeSlPnlForStore(raw) {
+  const v = `${raw}`.replace(/,/g, "").trim();
+  if (v === "" || v === "-") return v;
+  const withoutTrailingDot = v.replace(/\.$/, "");
+  const num = Number(withoutTrailingDot);
+  if (!isNaN(num) && num === 0) return "0";
+  if (v.startsWith("-")) return v;
+  return `-${v}`;
+}
 var usePNLInputBuilder = (props) => {
   const { type, values, quote_dp } = props;
   const { t } = i18n.useTranslation();
-  const [focus, setFocus] = React3.useState(true);
+  const [, setFocus] = React3.useState(true);
   const { mode, setMode, tipsEle } = usePnlInputContext();
   const [tipVisible, setTipVisible] = React3.useState(false);
   const [isFocused, setIsFocused] = React3.useState(false);
@@ -4542,10 +4888,14 @@ var usePNLInputBuilder = (props) => {
         return `${type.toLowerCase()}_offset`;
       case "Offset%" /* PERCENTAGE */:
         return `${type.toLowerCase()}_offset_percentage`;
+      case "OffsetFromMark" /* OFFSET_FROM_MARK */:
+        return `${type.toLowerCase()}_offset_from_mark`;
+      case "PercentageFromMark" /* PERCENTAGE_FROM_MARK */:
+        return `${type.toLowerCase()}_offset_percentage_from_mark`;
       default:
         return `${type.toLowerCase()}_pnl`;
     }
-  }, [mode]);
+  }, [mode, type]);
   const [innerValue, setInnerValue] = React3.useState(
     values[mode]
   );
@@ -4568,23 +4918,39 @@ var usePNLInputBuilder = (props) => {
         testId: `${"Offset" /* OFFSET */}_mneu_item`
       },
       {
-        label: `${t("tpsl.offset")}%`,
+        label: t("tpsl.offsetPercent"),
         value: "Offset%" /* PERCENTAGE */,
         testId: `${"Offset%" /* PERCENTAGE */}_menu_item`
+      },
+      {
+        // @ts-ignore
+        label: t("tpsl.offsetMark"),
+        value: "OffsetFromMark" /* OFFSET_FROM_MARK */,
+        testId: `${"OffsetFromMark" /* OFFSET_FROM_MARK */}_menu_item`
+      },
+      {
+        // @ts-ignore
+        label: t("tpsl.offsetPercentMark"),
+        value: "PercentageFromMark" /* PERCENTAGE_FROM_MARK */,
+        testId: `${"PercentageFromMark" /* PERCENTAGE_FROM_MARK */}_menu_item`
       }
     ];
   }, [t]);
   const modeLabelMap = React3.useMemo(() => {
     return {
       ["PnL" /* PnL */]: t("tpsl.pnl"),
-      ["Offset" /* OFFSET */]: t("tpsl.offset"),
-      ["Offset%" /* PERCENTAGE */]: `${t("tpsl.offset")}%`
+      ["Offset" /* OFFSET */]: t("tpsl.offsetHolder"),
+      ["Offset%" /* PERCENTAGE */]: `${t("tpsl.offsetHolder")}`,
+      // Extend locale keys; not yet in LocaleMessages typings
+      ["OffsetFromMark" /* OFFSET_FROM_MARK */]: t("tpsl.offsetHolder"),
+      ["PercentageFromMark" /* PERCENTAGE_FROM_MARK */]: t("tpsl.offsetHolder")
     };
   }, [t]);
   const percentageSuffix = React3.useRef("");
   const onValueChange = (value) => {
     setInnerValue(value);
-    props.onChange(key, value);
+    const outgoing = key === "sl_pnl" ? normalizeSlPnlForStore(value) : value;
+    props.onChange(key, outgoing);
   };
   const onFocus = () => {
     setTipVisible(true);
@@ -4593,27 +4959,29 @@ var usePNLInputBuilder = (props) => {
   const onBlur = () => {
     setTipVisible(false);
     setIsFocused(false);
-    props.onChange(key, innerValue);
+    const outgoing = key === "sl_pnl" ? normalizeSlPnlForStore(innerValue) : innerValue;
+    props.onChange(key, outgoing);
   };
   const formatter = (options2) => {
     const { dp = 2 } = options2;
     return {
       onRenderBefore: (value, options3) => {
         value = `${value}`;
-        if (focus) {
-          if (type === "SL" && mode === "PnL" /* PnL */) {
-            value = value.startsWith("-") ? value : "-" + value;
-          }
+        if (type === "SL" && mode === "PnL" /* PnL */) {
+          value = value.startsWith("-") ? value : "-" + value;
         }
         if (value === "" || value === "-") return "";
-        if (mode === "Offset%" /* PERCENTAGE */) {
-          return `${new utils.Decimal(
-            value.replace(
-              new RegExp(percentageSuffix.current.replace(".", "\\.") + "$"),
-              ""
-            )
-          ).mul(100).todp(2, 4).toString()}${percentageSuffix.current}`;
-        } else if (mode === "Offset" /* OFFSET */) {
+        if (mode === "Offset%" /* PERCENTAGE */ || mode === "PercentageFromMark" /* PERCENTAGE_FROM_MARK */) {
+          let normalized = value.replace(
+            new RegExp(percentageSuffix.current.replace(".", "\\.") + "$"),
+            ""
+          ).replace(/,/g, "");
+          normalized = normalized.replace(/\.$/, "");
+          if (isNaN(Number(normalized)) || normalized === "" || normalized === "-") {
+            return value;
+          }
+          return `${new utils.Decimal(normalized).mul(100).todp(2, 4).toString()}${percentageSuffix.current}`;
+        } else if (mode === "Offset" /* OFFSET */ || mode === "OffsetFromMark" /* OFFSET_FROM_MARK */) {
           value = utils.todpIfNeed(value, dp);
         } else ;
         return `${value}`;
@@ -4622,7 +4990,7 @@ var usePNLInputBuilder = (props) => {
         if (/^\-?0{2,}$/.test(value)) {
           return "0";
         }
-        if (mode === "Offset%" /* PERCENTAGE */) {
+        if (mode === "Offset%" /* PERCENTAGE */ || mode === "PercentageFromMark" /* PERCENTAGE_FROM_MARK */) {
           if (value !== "") {
             value = utils.todpIfNeed(value, 2);
             const endStr = value.match(/\.0{0,2}$/);
@@ -4631,10 +4999,13 @@ var usePNLInputBuilder = (props) => {
             } else {
               percentageSuffix.current = "";
             }
+            if (isNaN(Number(value))) {
+              return value;
+            }
             value = new utils.Decimal(value).div(100).toString();
             value = `${value}${percentageSuffix.current}`;
           }
-        } else if (mode === "PnL" /* PnL */ && type === "SL" && focus) {
+        } else if (mode === "PnL" /* PnL */ && type === "SL") {
           value = value.startsWith("-") ? value : "-" + value;
         } else {
           value = utils.todpIfNeed(value, dp);
@@ -4678,21 +5049,28 @@ var PNLInput = (props) => {
     setFocus
   } = props;
   const [prefix, setPrefix] = React3.useState(mode);
+  const isPercentageMode = mode === "Offset%" /* PERCENTAGE */ || mode === "PercentageFromMark" /* PERCENTAGE_FROM_MARK */;
   const [placeholder, setPlaceholder] = React3.useState(
-    mode === "Offset%" /* PERCENTAGE */ ? "%" : quote
+    isPercentageMode ? "%" : quote
   );
   React3.useEffect(() => {
     setPrefix(mode);
-    setPlaceholder(mode === "Offset%" /* PERCENTAGE */ ? "%" : quote);
-  }, [mode]);
+    setPlaceholder(isPercentageMode ? "%" : quote);
+  }, [mode, isPercentageMode, quote]);
   React3.useEffect(() => {
     setPrefix(!!value ? "" : mode);
   }, [value]);
-  const id = React3.useMemo(() => `${type.toLowerCase()}_${mode.toLowerCase()}`, []);
+  const id = React3.useMemo(
+    () => `${type.toLowerCase()}_${mode.toLowerCase()}`,
+    [type, mode]
+  );
+  const prefixLabel = prefix === "" ? "" : String(
+    modeLabelMap[prefix] ?? prefix ?? ""
+  );
   return /* @__PURE__ */ jsxRuntime.jsx(
     ui.Input.tooltip,
     {
-      prefix: modeLabelMap[prefix] || prefix,
+      prefix: prefixLabel,
       size: "md",
       placeholder,
       id,
@@ -4729,11 +5107,11 @@ var PNLInput = (props) => {
       },
       onBlur: () => {
         setPrefix(!!value ? "" : mode);
-        setPlaceholder(mode === "Offset%" /* PERCENTAGE */ ? "%" : quote);
+        setPlaceholder(isPercentageMode ? "%" : quote);
         onBlur();
       },
       suffix: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        mode === "Offset%" /* PERCENTAGE */ && !!value && /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", color: "inherit", className: "oui-ml-[2px]", children: "%" }),
+        isPercentageMode && !!value && /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", color: "inherit", className: "oui-ml-[2px]", children: "%" }),
         /* @__PURE__ */ jsxRuntime.jsx(
           PNLMenus,
           {
@@ -4878,8 +5256,8 @@ var OrderTPSL = (props) => {
       {
         className: ui.cn(
           "oui-orderEntry-tpsl-body",
-          "oui-max-h-0 oui-overflow-hidden oui-transition-all",
-          props.switchState && "oui-max-h-[120px]"
+          "oui-overflow-hidden oui-transition-all",
+          props.switchState ? "oui-max-h-[120px]" : "oui-max-h-0"
         ),
         onTransitionEnd: () => {
           tpslFormRef.current?.style.setProperty(
@@ -5153,6 +5531,8 @@ var TPSLInputRow = (props) => {
           PnL: props.values.PnL,
           Offset: props.values.Offset,
           "Offset%": props.values["Offset%"],
+          OffsetFromMark: props.values.OffsetFromMark,
+          PercentageFromMark: props.values.PercentageFromMark,
           ROI: props.values.ROI
         }
       }
@@ -5164,7 +5544,9 @@ var OrderEntry = (props) => {
     side,
     formattedOrder,
     setOrderValue,
+    manualSetOrderValue,
     setOrderValues,
+    setOrderValuesRaw,
     symbolInfo,
     maxQty,
     freeCollateral,
@@ -5180,9 +5562,13 @@ var OrderEntry = (props) => {
     fillMiddleValue,
     soundAlert,
     setSoundAlert,
-    currentFocusInput
+    currentFocusInput,
+    walletAddress,
+    isPermissionlessListing,
+    symbol
   } = props;
   const [maxQtyConfirmOpen, setMaxQtyConfirmOpen] = React3.useState(false);
+  const [permissionlessAcknowledgedKeys, setPermissionlessAcknowledgedKeys] = hooks.useLocalStorage("orderly-permissionless-market-notice", []);
   const { t } = i18n.useTranslation();
   const { isMobile } = ui.useScreen();
   const [hasAdvancedTPSLResult, setHasAdvancedTPSLResult] = React3.useState(false);
@@ -5219,11 +5605,11 @@ var OrderEntry = (props) => {
       return;
     }
     if (slippage) {
-      setOrderValue("slippage", Number(slippage));
+      manualSetOrderValue("slippage", Number(slippage));
     } else {
-      setOrderValue("slippage", void 0);
+      manualSetOrderValue("slippage", void 0);
     }
-  }, [slippage, disableFeatures]);
+  }, [slippage, disableFeatures, manualSetOrderValue]);
   React3.useEffect(() => {
     const clickHandler = (event) => {
       const target = event.target;
@@ -5252,22 +5638,7 @@ var OrderEntry = (props) => {
     helper.validate(isSlPriceError ? props.slPriceError : void 0).then(
       // validate success, it return the order
       // TODO: get order from other function
-      (order) => {
-        if (isScaledOrder) {
-          return ui.modal.show(scaledOrderConfirmDialogId, {
-            order,
-            symbolInfo,
-            size: isMobile ? "sm" : "md"
-          });
-        }
-        if (needConfirm) {
-          return ui.modal.show(orderConfirmDialogId, {
-            order: formattedOrder,
-            symbolInfo
-          });
-        }
-        return true;
-      },
+      (order) => order,
       // should catch validate error first, then submit
       (errors2) => {
         if (errors2.slippage) {
@@ -5276,7 +5647,38 @@ var OrderEntry = (props) => {
         setErrorMsgVisible(true);
         return Promise.reject();
       }
-    ).then(() => {
+    ).then((order) => {
+      const shouldShowPermissionlessNotice = isPermissionlessListing && walletAddress && !(permissionlessAcknowledgedKeys ?? []).includes(
+        `${walletAddress}_${symbol}`
+      );
+      if (shouldShowPermissionlessNotice) {
+        return ui.modal.show(
+          isMobile ? permissionlessMarketNoticeDialogId : permissionlessMarketNoticeDesktopDialogId
+        ).then(() => {
+          setPermissionlessAcknowledgedKeys([
+            ...Array.isArray(permissionlessAcknowledgedKeys) ? permissionlessAcknowledgedKeys : [],
+            `${walletAddress}_${symbol}`
+          ]);
+          return order;
+        });
+      }
+      return Promise.resolve(order);
+    }).then((order) => {
+      if (isScaledOrder) {
+        return ui.modal.show(scaledOrderConfirmDialogId, {
+          order,
+          symbolInfo,
+          size: isMobile ? "sm" : "md"
+        });
+      }
+      if (needConfirm) {
+        return ui.modal.show(orderConfirmDialogId, {
+          order: formattedOrder,
+          symbolInfo
+        });
+      }
+      return true;
+    }).then(() => {
       return submit({ resetOnSuccess: false }).then((result) => {
         if (!result.success && result.message) {
           ui.toast.error(result.message);
@@ -5297,12 +5699,12 @@ var OrderEntry = (props) => {
     return new utils.Decimal(maxQty).todp(symbolInfo.base_dp, utils.Decimal.ROUND_DOWN).toString();
   }, [maxQty, symbolInfo.base_dp]);
   const onMaxQtyConfirm = React3.useCallback(() => {
-    setOrderValue("order_quantity", formattedMaxQty);
+    manualSetOrderValue("order_quantity", formattedMaxQty);
     requestAnimationFrame(() => {
       onSubmit();
     });
     setMaxQtyConfirmOpen(false);
-  }, [setOrderValue, formattedMaxQty]);
+  }, [manualSetOrderValue, formattedMaxQty, onSubmit]);
   const validateSubmit = async () => {
     if (formattedOrder.reduce_only && maxQty === 0) {
       return ui.modal.confirm({
@@ -5310,7 +5712,7 @@ var OrderEntry = (props) => {
         content: t("orderEntry.reduceOnly.reminder.content"),
         okLabel: t("orderEntry.placeOrderNow"),
         onOk: async () => {
-          setOrderValue("reduce_only", false);
+          manualSetOrderValue("reduce_only", false);
           requestAnimationFrame(() => {
             props.resetMetaState();
             onSubmit();
@@ -5342,14 +5744,16 @@ var OrderEntry = (props) => {
   };
   const onSubmitAdvancedTPSL = (order) => {
     if (order.side !== formattedOrder.side) {
-      setOrderValue("side", order.side);
+      manualSetOrderValue("side", order.side);
     }
-    setOrderValues({
+    setOrderValuesRaw({
       position_type: order.position_type,
       tp_order_type: order.tp_order_type,
       tp_pnl: order.tp_pnl,
       tp_offset: order.tp_offset,
       tp_offset_percentage: order.tp_offset_percentage,
+      tp_offset_from_mark: order.tp_offset_from_mark,
+      tp_offset_percentage_from_mark: order.tp_offset_percentage_from_mark,
       tp_ROI: order.tp_ROI,
       tp_trigger_price: order.tp_trigger_price,
       tp_order_price: order.tp_order_price,
@@ -5359,6 +5763,8 @@ var OrderEntry = (props) => {
       sl_pnl: order.sl_pnl,
       sl_offset: order.sl_offset,
       sl_offset_percentage: order.sl_offset_percentage,
+      sl_offset_from_mark: order.sl_offset_from_mark,
+      sl_offset_percentage_from_mark: order.sl_offset_percentage_from_mark,
       sl_ROI: order.sl_ROI
     });
     setShowTPSLAdvanced(false);
@@ -5375,6 +5781,14 @@ var OrderEntry = (props) => {
       sl_order_type: types.OrderType.MARKET,
       tp_pnl: void 0,
       sl_pnl: void 0,
+      tp_offset: void 0,
+      tp_offset_percentage: void 0,
+      tp_offset_from_mark: void 0,
+      tp_offset_percentage_from_mark: void 0,
+      sl_offset: void 0,
+      sl_offset_percentage: void 0,
+      sl_offset_from_mark: void 0,
+      sl_offset_percentage_from_mark: void 0,
       position_type: types.PositionType.FULL
     });
   };
@@ -5390,7 +5804,7 @@ var OrderEntry = (props) => {
     setNeedConfirm,
     hidden,
     setHidden,
-    onValueChange: setOrderValue,
+    onValueChange: manualSetOrderValue,
     orderTypeExtra: formattedOrder["order_type_ext"],
     showExtra: formattedOrder["order_type"] === types.OrderType.LIMIT && !props.tpslSwitch
   };
@@ -5405,6 +5819,7 @@ var OrderEntry = (props) => {
       onBlur: props.onBlur,
       getErrorMsg,
       setOrderValue,
+      manualSetOrderValue,
       setOrderValues,
       currentFocusInput: currentFocusInput.current,
       priceInputRef: props.priceInputRef,
@@ -5440,13 +5855,17 @@ var OrderEntry = (props) => {
                   canTrade: props.canTrade,
                   side,
                   order_type: formattedOrder.order_type,
-                  setOrderValue,
+                  setOrderValue: manualSetOrderValue,
                   symbolLeverage: props.symbolLeverage,
-                  marginMode: props.marginMode
+                  marginMode: props.marginMode,
+                  marketOrderDisabled: props.isSymbolPostOnly,
+                  marketOrderDisabledTooltip: t(
+                    "orderEntry.orderType.symbolPostOnly.tooltip"
+                  )
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsx(
-                Available,
+                OrderEntryAvailableInjectabled,
                 {
                   currentLtv,
                   canTrade: props.canTrade,
@@ -5470,7 +5889,7 @@ var OrderEntry = (props) => {
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsx(
-                QuantitySlider,
+                OrderEntryQuantitySliderInjectabled,
                 {
                   canTrade: props.canTrade,
                   side: props.side,
@@ -5479,38 +5898,29 @@ var OrderEntry = (props) => {
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsx(
-                ui.ThrottledButton,
-                {
-                  fullWidth: true,
-                  id: "order-entry-submit-button",
-                  "data-type": types.OrderSide.BUY,
-                  className: ui.cn(
-                    "oui-orderEntry-submit-btn",
-                    side === types.OrderSide.BUY ? "orderly-order-entry-submit-button-buy oui-bg-success-darken hover:oui-bg-success-darken/80 active:oui-bg-success-darken/80" : "orderly-order-entry-submit-button-sell oui-bg-danger-darken hover:oui-bg-danger-darken/80 active:oui-bg-danger-darken/80"
-                  ),
-                  onClick: validateSubmit,
-                  loading: props.isMutating,
-                  disabled: !props.canTrade,
-                  children: buttonLabel
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                AssetInfo,
+                OrderEntrySubmitSectionInjectabled,
                 {
+                  buttonLabel,
+                  side,
                   canTrade: props.canTrade,
-                  quote: symbolInfo.quote,
-                  estLiqPrice: props.estLiqPrice,
-                  estLiqPriceDistance: props.estLiqPriceDistance,
-                  estLeverage: props.estLeverage,
-                  currentLeverage: props.currentLeverage,
-                  slippage,
-                  dp: symbolInfo.quote_dp,
-                  setSlippage,
-                  estSlippage: props.estSlippage,
-                  orderType: formattedOrder.order_type,
-                  disableFeatures,
-                  symbol: props.symbol,
-                  side
+                  isMutating: props.isMutating,
+                  onSubmit: validateSubmit,
+                  assetInfo: {
+                    canTrade: props.canTrade,
+                    quote: symbolInfo.quote,
+                    estLiqPrice: props.estLiqPrice,
+                    estLiqPriceDistance: props.estLiqPriceDistance,
+                    estLeverage: props.estLeverage,
+                    currentLeverage: props.currentLeverage,
+                    slippage,
+                    dp: symbolInfo.quote_dp,
+                    setSlippage,
+                    estSlippage: props.estSlippage,
+                    orderType: formattedOrder.order_type,
+                    disableFeatures,
+                    symbol: props.symbol,
+                    side
+                  }
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { className: "oui-w-full" }),
@@ -5535,10 +5945,10 @@ var OrderEntry = (props) => {
                   onSwitchChanged: props.setTpslSwitch,
                   orderType: formattedOrder.order_type,
                   errors: validated || props.slPriceError !== void 0 ? { ...errors, ...props.slPriceError } : null,
-                  setOrderValue,
+                  setOrderValue: manualSetOrderValue,
                   reduceOnlyChecked: formattedOrder.reduce_only ?? false,
                   onReduceOnlyChange: (checked) => {
-                    setOrderValue("reduce_only", checked);
+                    manualSetOrderValue("reduce_only", checked);
                   },
                   values: {
                     position_type: formattedOrder.position_type ?? types.PositionType.PARTIAL,
@@ -5547,6 +5957,8 @@ var OrderEntry = (props) => {
                       PnL: formattedOrder.tp_pnl ?? "",
                       Offset: formattedOrder.tp_offset ?? "",
                       "Offset%": formattedOrder.tp_offset_percentage ?? "",
+                      OffsetFromMark: formattedOrder.tp_offset_from_mark ?? "",
+                      PercentageFromMark: formattedOrder.tp_offset_percentage_from_mark ?? "",
                       ROI: formattedOrder.tp_ROI ?? ""
                     },
                     sl: {
@@ -5554,6 +5966,8 @@ var OrderEntry = (props) => {
                       PnL: formattedOrder.sl_pnl ?? "",
                       Offset: formattedOrder.sl_offset ?? "",
                       "Offset%": formattedOrder.sl_offset_percentage ?? "",
+                      OffsetFromMark: formattedOrder.sl_offset_from_mark ?? "",
+                      PercentageFromMark: formattedOrder.sl_offset_percentage_from_mark ?? "",
                       ROI: formattedOrder.sl_ROI ?? ""
                     }
                   },
@@ -5575,7 +5989,7 @@ var OrderEntry = (props) => {
                       {
                         checked: formattedOrder.reduce_only ?? false,
                         onCheckedChange: (checked) => {
-                          setOrderValue("reduce_only", checked);
+                          manualSetOrderValue("reduce_only", checked);
                         }
                       }
                     ),
@@ -5664,7 +6078,7 @@ var OrderEntry = (props) => {
             children: showTPSLAdvanced && /* @__PURE__ */ jsxRuntime.jsx(
               uiTpsl.TPSLAdvancedWidget,
               {
-                setOrderValue,
+                setOrderValue: manualSetOrderValue,
                 order: formattedOrder,
                 onSubmit: onSubmitAdvancedTPSL,
                 onClose: () => {
@@ -5840,11 +6254,14 @@ var useOrderEntryScript = (inputs) => {
     defaultSoundValue ?? null
   );
   const canTrade = reactApp.useCanTrade();
-  const { marginMode } = hooks.useMarginModeBySymbol(symbol);
+  const { state: accountState } = hooks.useAccount();
+  const { marginMode, isPermissionlessListing } = hooks.useMarginModeBySymbol(symbol);
+  const walletAddress = accountState?.address;
   const {
     formattedOrder,
     setValue,
     setValues: setOrderValues,
+    setValuesRaw: setOrderValuesRaw,
     symbolInfo,
     symbolLeverage,
     ...state
@@ -5943,6 +6360,12 @@ var useOrderEntryScript = (inputs) => {
       );
     }
   );
+  const manualSetOrderValue = hooks.useMemoizedFn(
+    (key, value, options2) => {
+      lastUserActiveTimeRef.current = Date.now();
+      setOrderValue(key, value, options2);
+    }
+  );
   const onTPSLSwitchChanged = (state2) => {
     setTpslSwitch(state2);
     if (state2) {
@@ -6034,6 +6457,16 @@ var useOrderEntryScript = (inputs) => {
       setValue("distribution_type", types.DistributionType.FLAT);
     }
   }, [formattedOrder.order_type, formattedOrder.distribution_type]);
+  const isSymbolPostOnly = symbolInfo?.status === "POST_ONLY";
+  React3.useEffect(() => {
+    if (isSymbolPostOnly && (formattedOrder.order_type === types.OrderType.MARKET || formattedOrder.order_type === types.OrderType.STOP_MARKET)) {
+      setLocalOrderType(types.OrderType.LIMIT);
+      setOrderValues({
+        order_type: types.OrderType.LIMIT,
+        order_type_ext: void 0
+      });
+    }
+  }, [isSymbolPostOnly, formattedOrder.order_type, setOrderValues]);
   const currentLtv = hooks.useComputedLTV();
   const askAndBid = useAskAndBid();
   const fillMiddleValue = () => {
@@ -6051,10 +6484,24 @@ var useOrderEntryScript = (inputs) => {
   const { priceInputContainerRef, priceInputContainerWidth } = usePriceInputContainer({
     order_type_ext: formattedOrder.order_type_ext
   });
+  const effectiveEstLiqPriceForSlCheck = React3.useMemo(() => {
+    const estLiqPrice = state.estLiqPrice;
+    if (estLiqPrice == null || formattedOrder.side == null || state.markPrice == null) {
+      return null;
+    }
+    if (formattedOrder.side === types.OrderSide.BUY && estLiqPrice > state.markPrice || formattedOrder.side === types.OrderSide.SELL && estLiqPrice < state.markPrice) {
+      return null;
+    }
+    if (!Number.isFinite(estLiqPrice) || estLiqPrice <= 0) {
+      return null;
+    }
+    return estLiqPrice;
+  }, [state.estLiqPrice, state.markPrice, formattedOrder.side]);
   const slPriceError = hooks.useTpslPriceChecker({
     slPrice: formattedOrder.sl_trigger_price,
-    liqPrice: state.estLiqPrice,
+    liqPrice: effectiveEstLiqPriceForSlCheck,
     side: formattedOrder.side,
+    markPrice: state.markPrice,
     currentPosition: state.currentPosition,
     orderQuantity: Number(formattedOrder.order_quantity)
   });
@@ -6069,22 +6516,16 @@ var useOrderEntryScript = (inputs) => {
     }
   }, [tpslSwitch]);
   React3.useEffect(() => {
-    lastUserActiveTimeRef.current = Date.now();
-  }, [
-    formattedOrder.order_price,
-    formattedOrder.order_quantity,
-    formattedOrder.side
-  ]);
-  React3.useEffect(() => {
+    const estLiqPrice = effectiveEstLiqPriceForSlCheck;
     const lastActive = lastUserActiveTimeRef.current;
     const now = Date.now();
     const isUserActive = now - lastActive <= ORDER_ENTRY_EST_LIQ_ACTIVE_WINDOW_MS;
     ee.emit(types.ORDER_ENTRY_EST_LIQ_PRICE_CHANGE, {
       symbol,
-      estLiqPrice: state.estLiqPrice ?? null,
+      estLiqPrice,
       isUserActive
     });
-  }, [ee, symbol, state.estLiqPrice]);
+  }, [ee, symbol, effectiveEstLiqPriceForSlCheck]);
   React3.useEffect(() => {
     setOrderValue("margin_mode", marginMode);
   }, [marginMode]);
@@ -6096,7 +6537,9 @@ var useOrderEntryScript = (inputs) => {
     level: formattedOrder.level,
     formattedOrder,
     setOrderValue,
+    manualSetOrderValue,
     setOrderValues,
+    setOrderValuesRaw,
     // account-level leverage (for other consumers)
     currentLeverage,
     // symbol-level leverage & margin mode for this order entry
@@ -6125,7 +6568,10 @@ var useOrderEntryScript = (inputs) => {
     symbol,
     soundAlert,
     setSoundAlert,
-    currentFocusInput
+    currentFocusInput,
+    walletAddress,
+    isPermissionlessListing,
+    isSymbolPostOnly
   };
 };
 var InjectableOrderEntry = ui.injectable(
@@ -6150,6 +6596,7 @@ exports.LTVRiskTooltipWidget = LTVRiskTooltipWidget;
 exports.OrderConfirmDialog = OrderConfirmDialog;
 exports.OrderEntry = OrderEntry;
 exports.OrderEntryWidget = OrderEntryWidget;
+exports.SymbolBadge = SymbolBadge;
 exports.useOrderEntryScript = useOrderEntryScript;
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map