@orderly.network/ui-order-entry 2.12.4-alpha.0 → 3.0.0-alpha.0

package/dist/index.js

@@ -547,1035 +547,636 @@ 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 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 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 Available = (props) => {
-  const { canTrade, currentLtv, quote, freeCollateral, marginMode } = props;
+OrderConfirmDialog.displayName = "OrderConfirmDialog";
+var OrderTypeTag = (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 })
-            }
-          )
-        ] })
-      ]
+  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 });
 };
-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");
+var Dialog = (props) => {
+  const { close, resolve, reject, ...rest } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    OrderConfirmDialog,
+    {
+      ...rest,
+      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 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 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 orderConfirmDialogId = "orderConfirm";
+ui.registerSimpleDialog(orderConfirmDialogId, Dialog, {
+  size: "sm",
+  title: () => i18n.i18n.t("orderEntry.orderConfirm")
+});
+var MaxQtyConfirm = React3.memo((props) => {
   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.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}`
+      }) })
     }
-    return /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: t("tpsl.positionType.partial") });
-  };
-  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 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,
-      {
-        unit: "USDC",
-        rule: "price",
-        className: ui.cn(
-          "oui-text-base-contrast",
-          colorType === "TP" ? "oui-text-trade-profit" : "oui-text-trade-loss"
+  );
+});
+var PermissionlessMarketNoticeDialog = (props) => {
+  const { onConfirm, onCancel } = props;
+  const { t } = i18n.useTranslation();
+  const [checked, setChecked] = React3.useState(false);
+  const content = /* @__PURE__ */ jsxRuntime.jsxs(
+    ui.Flex,
+    {
+      direction: "column",
+      gap: 3,
+      itemAlign: "start",
+      className: "oui-permissionlessNotice-content",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Text,
+          {
+            className: ui.textVariants({
+              size: "sm",
+              intensity: 54
+            }),
+            children: t("orderEntry.permissionlessNotice.content1")
+          }
         ),
-        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()
-        }
-      )
-    ] });
-  };
-  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,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Text,
           {
-            title: t("common.triggerPrice"),
-            value: activated_price,
-            unit: quote,
-            dp: quote_dp
+            className: ui.textVariants({
+              size: "sm",
+              intensity: 54
+            }),
+            children: t("orderEntry.permissionlessNotice.content2")
           }
         ),
-        callbackView
-      ] });
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Text,
+          {
+            className: ui.textVariants({
+              size: "sm",
+              intensity: 54
+            }),
+            children: t("orderEntry.permissionlessNotice.content3")
+          }
+        )
+      ]
     }
-    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
-        }
-      )
-    ] });
-  };
-  const header = /* @__PURE__ */ jsxRuntime.jsxs(
+  );
+  const checkboxSection = /* @__PURE__ */ jsxRuntime.jsxs(
     ui.Flex,
     {
-      justify: "between",
-      className: "oui-orderEntry-orderConfirmDialog-header",
+      gapX: 1,
+      pt: 4,
+      pb: 5,
+      itemAlign: "start",
+      className: "oui-permissionlessNotice-checkbox oui-orderEntry-orderConfirmDialog-disableConfirm oui-cursor-pointer",
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 2, direction: "column", itemAlign: "start", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            ui.Text.formatted,
-            {
-              rule: "symbol",
-              formatString: "base",
-              showIcon: true,
-              className: "oui-orderConfirmDialog-symbol",
-              children: order.symbol
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(SymbolBadge, { symbol: order.symbol })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          ui.Flex,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Checkbox,
           {
-            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") })
-            ]
+            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",
+              intensity: 54,
+              className: "oui-cursor-pointer"
+            }),
+            children: t("orderEntry.permissionlessNotice.checkbox")
           }
         )
       ]
     }
   );
-  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,
+  const confirmButton = /* @__PURE__ */ jsxRuntime.jsx(
+    ui.Flex,
     {
-      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,
-            {
-              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"
-                  })
-                ] })
-              ]
-            }
-          ),
-          /* @__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"
-                  })
-                ] })
-              ]
-            }
-          )
-        ]
-      }
-    )
-  ] });
-  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,
-          {
-            color: "secondary",
-            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")
-          }
-        )
-      ]
+      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: [
-    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
-      }
-    )
+    content,
+    checkboxSection,
+    confirmButton
   ] });
 };
-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;
+PermissionlessMarketNoticeDialog.displayName = "PermissionlessMarketNoticeDialog";
+var Dialog2 = (props) => {
+  const { close, resolve, reject } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(
-    OrderConfirmDialog,
+    PermissionlessMarketNoticeDialog,
     {
-      ...rest,
       onCancel: () => {
         reject();
         close();
@@ -1587,178 +1188,15 @@ var Dialog = (props) => {
     }
   );
 };
-var orderConfirmDialogId = "orderConfirm";
-ui.registerSimpleDialog(orderConfirmDialogId, Dialog, {
+var permissionlessMarketNoticeDialogId = "permissionlessMarketNotice";
+var permissionlessMarketNoticeDesktopDialogId = "permissionlessMarketNoticeDesktop";
+ui.registerSimpleDialog(permissionlessMarketNoticeDialogId, Dialog2, {
   size: "sm",
-  title: () => i18n.i18n.t("orderEntry.orderConfirm")
+  title: () => i18n.i18n.t("orderEntry.permissionlessNotice.title")
 });
-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 PermissionlessMarketNoticeDialog = (props) => {
-  const { onConfirm, onCancel } = props;
-  const { t } = i18n.useTranslation();
-  const [checked, setChecked] = React3.useState(false);
-  const content = /* @__PURE__ */ jsxRuntime.jsxs(
-    ui.Flex,
-    {
-      direction: "column",
-      gap: 3,
-      itemAlign: "start",
-      className: "oui-permissionlessNotice-content",
-      children: [
-        /* @__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",
-              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
-  ] });
-};
-PermissionlessMarketNoticeDialog.displayName = "PermissionlessMarketNoticeDialog";
-var Dialog2 = (props) => {
-  const { close, resolve, reject } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    PermissionlessMarketNoticeDialog,
-    {
-      onCancel: () => {
-        reject();
-        close();
-      },
-      onConfirm: () => {
-        resolve();
-        close();
-      }
-    }
-  );
-};
-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")
+ui.registerSimpleDialog(permissionlessMarketNoticeDesktopDialogId, Dialog2, {
+  size: "xl",
+  title: () => i18n.i18n.t("orderEntry.permissionlessNotice.title")
 });
 var ScaledOrderConfirm = (props) => {
   const { order, symbolInfo, dataSource, national, askAndBid, totalQuantity } = props;
@@ -1987,14 +1425,576 @@ 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();
@@ -2146,49 +2146,317 @@ 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: mobileOptions,
-      onValueChange: handleMobileValueChange,
-      contentProps: {
-        className: ui.cn(
-          "oui-orderEntry-orderTypeSelect-content",
-          "oui-bg-base-8"
-        )
-      },
-      classNames: {
-        trigger: ui.cn(
-          "oui-orderEntry-orderTypeSelect-btn",
-          "oui-bg-base-7 oui-border-line-12 oui-h-8 oui-rounded-md"
-        )
-      },
-      valueFormatter: (value, option) => {
-        const item = allOptions.find((o) => o.value === value);
-        if (!item) {
-          return /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xs", children: option.placeholder });
+  }
+  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: mobileOptions,
+      onValueChange: handleMobileValueChange,
+      contentProps: {
+        className: ui.cn(
+          "oui-orderEntry-orderTypeSelect-content",
+          "oui-bg-base-8"
+        )
+      },
+      classNames: {
+        trigger: ui.cn(
+          "oui-orderEntry-orderTypeSelect-btn",
+          "oui-bg-base-7 oui-border-line-12 oui-h-8 oui-rounded-md"
+        )
+      },
+      valueFormatter: (value, option) => {
+        const item = allOptions.find((o) => o.value === value);
+        if (!item) {
+          return /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xs", children: option.placeholder });
+        }
+        const label = displayLabelMap[value];
+        return /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xs", className: "oui-text-base-contrast-80", children: label });
+      },
+      size: "md"
+    }
+  );
+};
+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
         }
-        const label = displayLabelMap[value];
-        return /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xs", className: "oui-text-base-contrast-80", children: label });
-      },
-      size: "md"
-    }
-  );
-};
+      ),
+      /* @__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) => {
@@ -3049,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,
@@ -3061,8 +3328,8 @@ 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,
@@ -3073,61 +3340,19 @@ function OrderEntryHeader(props) {
         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,
@@ -4598,129 +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,
-    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 ReduceOnlySwitch = ({
   checked,
   onCheckedChange,
@@ -5154,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(
@@ -5763,7 +5865,7 @@ var OrderEntry = (props) => {
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsx(
-                Available,
+                OrderEntryAvailableInjectabled,
                 {
                   currentLtv,
                   canTrade: props.canTrade,
@@ -5787,7 +5889,7 @@ var OrderEntry = (props) => {
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsx(
-                QuantitySlider,
+                OrderEntryQuantitySliderInjectabled,
                 {
                   canTrade: props.canTrade,
                   side: props.side,
@@ -5796,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" }),
@@ -6481,10 +6574,14 @@ var useOrderEntryScript = (inputs) => {
     isSymbolPostOnly
   };
 };
+var InjectableOrderEntry = ui.injectable(
+  OrderEntry,
+  "OrderEntry"
+);
 var OrderEntryWidget = (props) => {
   const state = useOrderEntryScript(props);
   return /* @__PURE__ */ jsxRuntime.jsx(
-    OrderEntry,
+    InjectableOrderEntry,
     {
       ...state,
       containerRef: props.containerRef,