@orderly.network/ui-order-entry 2.10.2 → 2.11.0-alpha.0

package/dist/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var React2 = require('react');
+var React3 = require('react');
 var hooks = require('@orderly.network/hooks');
 var i18n = require('@orderly.network/i18n');
 var reactApp = require('@orderly.network/react-app');
@@ -15,7 +15,7 @@ var uiLeverage = require('@orderly.network/ui-leverage');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React2__default = /*#__PURE__*/_interopDefault(React2);
+var React3__default = /*#__PURE__*/_interopDefault(React3);
 
 // src/orderEntry.ui.tsx
 var AdditionalInfo = (props) => {
@@ -30,7 +30,7 @@ var AdditionalInfo = (props) => {
       );
     }
   };
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     props.onValueChange?.("visible_quantity", props.hidden ? 0 : 1);
   }, [props.hidden]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -240,7 +240,7 @@ var AdditionalInfo = (props) => {
   );
 };
 function AdditionalConfigButton(props) {
-  const [open2, setOpen] = React2.useState(false);
+  const [open2, setOpen] = React3.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsxs(ui.PopoverRoot, { open: open2, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsxRuntime.jsx(ui.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
       "button",
@@ -282,7 +282,7 @@ function AdditionalConfigButton(props) {
 }
 var defaultPath = "M10.007 1.302a.74.74 0 0 0-.486.214c-1.033.989-1.349 1.815-.972 2.948-.88.675-1.437.84-2.536.84-1.503 0-2.484.182-3.152.85v.02a1.583 1.583 0 0 0 0 2.248l1.867 1.882-3.181 3.18c-.26.26-.28.696-.02.956.261.26.699.26.959 0l3.193-3.194 1.87 1.861a1.585 1.585 0 0 0 2.25 0h.02c.668-.667.854-1.523.854-3.144 0-1.03.212-1.758.852-2.523 1.233.361 1.95.015 2.961-.995a.68.68 0 0 0 .188-.48c0-.234-.06-.593-.209-1.04a5.34 5.34 0 0 0-1.312-2.103 5.35 5.35 0 0 0-2.104-1.312c-.448-.15-.808-.208-1.042-.208";
 var PinButton = (props) => {
-  const [path, setPath] = React2.useState(defaultPath);
+  const [path, setPath] = React3.useState(defaultPath);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "button",
     {
@@ -605,15 +605,15 @@ var FeesWidget = ({ symbol }) => {
   );
 };
 var options = [0.01, 0.05, 0.1];
-var SlippageEditor = React2.forwardRef((props, ref) => {
+var SlippageEditor = React3.forwardRef((props, ref) => {
   const { t } = i18n.useTranslation();
-  const [value, setValue] = React2.useState();
-  const [customValue, setCustomValue] = React2.useState("");
-  const [error, setError] = React2.useState(void 0);
-  React2.useImperativeHandle(ref, () => ({
+  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
   }));
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     if (props.initialValue && !options.includes(props.initialValue)) {
       setCustomValue(props.initialValue.toString());
     } else {
@@ -732,7 +732,7 @@ var SlippageCell = (props) => {
   const { t } = i18n.useTranslation();
   const [open2, { setTrue: setOpen, setFalse: setClose, toggle }] = hooks.useBoolean(false);
   const { isMobile } = ui.useScreen();
-  const slippageRef = React2.useRef(null);
+  const slippageRef = React3.useRef(null);
   const onConfirm = () => {
     const val = slippageRef.current?.getValue();
     props.setSlippage(!val ? "1" : val.toString());
@@ -908,7 +908,8 @@ var LTVRiskTooltipUI = (props) => {
     isThresholdLoading,
     holdingData = [],
     currentLtv,
-    onConvert
+    onConvert,
+    marginMode
   } = props;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     ui.Flex,
@@ -916,6 +917,7 @@ var LTVRiskTooltipUI = (props) => {
       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") }),
@@ -994,7 +996,7 @@ var useConvertThreshold = () => {
     error
   };
 };
-var useLTVTooltipScript = () => {
+var useLTVTooltipScript = (marginMode) => {
   const { data: holdingList = [], isLoading: isHoldingLoading } = hooks.useHoldingStream();
   const {
     ltv_threshold,
@@ -1025,7 +1027,7 @@ var useLTVTooltipScript = () => {
     };
   });
   const currentLtv = hooks.useComputedLTV();
-  const onConvert = React2.useCallback(async () => {
+  const onConvert = React3.useCallback(async () => {
     return ui.modal.show("ConvertDialogId");
   }, []);
   return {
@@ -1035,18 +1037,21 @@ var useLTVTooltipScript = () => {
     negative_usdc_threshold,
     isThresholdLoading,
     currentLtv,
-    onConvert
+    onConvert,
+    marginMode
   };
 };
-var LTVRiskTooltipWidget = () => {
-  const state = useLTVTooltipScript();
+var LTVRiskTooltipWidget = ({
+  marginMode
+}) => {
+  const state = useLTVTooltipScript(marginMode);
   return /* @__PURE__ */ jsxRuntime.jsx(LTVRiskTooltipUI, { ...state });
 };
 var Available = (props) => {
-  const { canTrade, currentLtv, quote, freeCollateral } = props;
+  const { canTrade, currentLtv, quote, freeCollateral, marginMode } = props;
   const { t } = i18n.useTranslation();
   const { isMobile } = ui.useScreen();
-  const showLTV = React2.useMemo(() => {
+  const showLTV = React3.useMemo(() => {
     return typeof currentLtv === "number" && !Number.isNaN(currentLtv) && currentLtv > 0;
   }, [currentLtv]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1056,13 +1061,13 @@ var Available = (props) => {
       justify: "between",
       className: "oui-orderEntry-available",
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-available-label", size: "2xs", children: t("common.available") }),
+        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, {}),
+              content: /* @__PURE__ */ jsxRuntime.jsx(LTVRiskTooltipWidget, { marginMode }),
               children: /* @__PURE__ */ jsxRuntime.jsx(
                 ui.InfoCircleIcon,
                 {
@@ -1154,9 +1159,15 @@ 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 [{ rows: positions }] = hooks.usePositionStream(symbol);
-  const position = positions?.[0];
+  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 = () => {
@@ -1530,7 +1541,7 @@ var OrderItem = (props) => {
 OrderConfirmDialog.displayName = "OrderConfirmDialog";
 var OrderTypeTag = (props) => {
   const { t } = i18n.useTranslation();
-  const typeStr = React2.useMemo(() => {
+  const typeStr = React3.useMemo(() => {
     switch (props.type) {
       case types.OrderType.LIMIT:
         return t("orderEntry.orderType.limit");
@@ -1570,7 +1581,7 @@ ui.registerSimpleDialog(orderConfirmDialogId, Dialog, {
   size: "sm",
   title: () => i18n.i18n.t("orderEntry.orderConfirm")
 });
-var MaxQtyConfirm = React2.memo((props) => {
+var MaxQtyConfirm = React3.memo((props) => {
   const { t } = i18n.useTranslation();
   return /* @__PURE__ */ jsxRuntime.jsx(
     ui.SimpleDialog,
@@ -1620,7 +1631,7 @@ var ScaledOrderConfirm = (props) => {
     props.resolve();
     props.close?.();
   };
-  const columns = React2.useMemo(() => {
+  const columns = React3.useMemo(() => {
     return [
       {
         title: t("common.symbol"),
@@ -1782,7 +1793,7 @@ var ScaledOrderConfirm = (props) => {
     ] })
   ] });
 };
-var TooltipIcon = React2.forwardRef(
+var TooltipIcon = React3.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "svg",
@@ -1801,13 +1812,13 @@ var TooltipIcon = React2.forwardRef(
 );
 function useAskAndBid() {
   const ee = hooks.useEventEmitter();
-  const [askAndBid, setAskAndBid] = React2.useState([0, 0]);
+  const [askAndBid, setAskAndBid] = React3.useState([0, 0]);
   const onOrderBookUpdate = hooks.useDebouncedCallback((data) => {
     const ask0 = data.asks?.[data.asks.length - 1]?.[0];
     const bid0 = data.bids?.[0]?.[0];
     setAskAndBid([ask0, bid0]);
   }, 200);
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     ee.on("orderbook:update", onOrderBookUpdate);
     return () => {
       ee.off("orderbook:update", onOrderBookUpdate);
@@ -1822,13 +1833,13 @@ function useScaledOrderConfirmScript(options2) {
   const { order, symbolInfo } = options2;
   const orders = order.orders;
   const askAndBid = useAskAndBid();
-  const national = React2.useMemo(() => {
+  const national = React3.useMemo(() => {
     const national2 = orders.reduce((acc, order2) => {
       return acc.add(new utils.Decimal(order2.order_price).mul(order2.order_quantity));
     }, utils.zero);
     return national2.toNumber();
   }, [orders]);
-  const totalQuantity = React2.useMemo(() => {
+  const totalQuantity = React3.useMemo(() => {
     const totalQuantity2 = orders.reduce((acc, order2) => {
       return acc.add(new utils.Decimal(order2.order_quantity));
     }, utils.zero);
@@ -1850,7 +1861,8 @@ ui.registerSimpleDialog(scaledOrderConfirmDialogId, ScaledOrderConfirmWidget, {
 });
 var OrderTypeSelect = (props) => {
   const { t } = i18n.useTranslation();
-  const options2 = React2.useMemo(() => {
+  const { isMobile } = ui.useScreen();
+  const allOptions = React3.useMemo(() => {
     return [
       { label: t("orderEntry.orderType.limitOrder"), value: types.OrderType.LIMIT },
       { label: t("orderEntry.orderType.marketOrder"), value: types.OrderType.MARKET },
@@ -1872,7 +1884,24 @@ var OrderTypeSelect = (props) => {
       }
     ];
   }, [t]);
-  const displayLabelMap = React2.useMemo(() => {
+  const advancedOptions = React3.useMemo(() => {
+    return [
+      {
+        label: t("orderEntry.orderType.stopLimit"),
+        value: types.OrderType.STOP_LIMIT
+      },
+      {
+        label: t("orderEntry.orderType.stopMarket"),
+        value: types.OrderType.STOP_MARKET
+      },
+      { label: t("orderEntry.orderType.scaledOrder"), value: types.OrderType.SCALED },
+      {
+        label: t("orderEntry.orderType.trailingStop"),
+        value: types.OrderType.TRAILING_STOP
+      }
+    ];
+  }, [t]);
+  const displayLabelMap = React3.useMemo(() => {
     return {
       [types.OrderType.LIMIT]: t("orderEntry.orderType.limit"),
       [types.OrderType.MARKET]: t("common.marketPrice"),
@@ -1882,13 +1911,94 @@ var OrderTypeSelect = (props) => {
       [types.OrderType.TRAILING_STOP]: t("orderEntry.orderType.trailingStop")
     };
   }, [t]);
+  if (!isMobile) {
+    const baseButtonClassName = "oui-flex oui-flex-1 oui-items-center oui-justify-center oui-gap-x-1 oui-rounded oui-px-3 oui-py-0.5 oui-text-xs oui-font-semibold oui-h-8";
+    const selectedButtonClassName = ui.cn(
+      baseButtonClassName,
+      "oui-bg-base-5 oui-text-base-contrast"
+    );
+    const unselectedButtonClassName = ui.cn(
+      baseButtonClassName,
+      "oui-bg-base-7 oui-text-base-contrast-36"
+    );
+    const handleChange = (type) => {
+      props.onChange(type);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: "oui-flex oui-w-full oui-gap-1",
+        "data-testid": "oui-testid-orderEntry-orderType-desktop",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: props.type === types.OrderType.LIMIT ? selectedButtonClassName : unselectedButtonClassName,
+              "aria-pressed": props.type === types.OrderType.LIMIT,
+              onClick: () => handleChange(types.OrderType.LIMIT),
+              disabled: !props.canTrade,
+              "data-testid": "oui-testid-orderEntry-orderType-limit",
+              children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xs", children: t("orderEntry.orderType.limit") })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: props.type === types.OrderType.MARKET ? selectedButtonClassName : unselectedButtonClassName,
+              "aria-pressed": props.type === types.OrderType.MARKET,
+              onClick: () => handleChange(types.OrderType.MARKET),
+              disabled: !props.canTrade,
+              "data-testid": "oui-testid-orderEntry-orderType-market",
+              children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xs", children: t("orderEntry.orderType.market") })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "oui-flex-1",
+              "data-testid": "oui-testid-orderEntry-orderType-advanced",
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                ui.Select.options,
+                {
+                  testid: "oui-testid-orderEntry-orderType-advanced-select",
+                  currentValue: props.type,
+                  value: props.type,
+                  options: advancedOptions,
+                  onValueChange: props.onChange,
+                  placeholder: t("trading.layout.advanced"),
+                  disabled: !props.canTrade,
+                  contentProps: {
+                    className: "oui-bg-base-8"
+                  },
+                  classNames: {
+                    trigger: "oui-bg-base-7 oui-border-none oui-h-8 oui-rounded-md"
+                  },
+                  valueFormatter: (value, option) => {
+                    const isAdvanced = value === types.OrderType.STOP_LIMIT || value === types.OrderType.STOP_MARKET || value === types.OrderType.SCALED || value === types.OrderType.TRAILING_STOP;
+                    if (!isAdvanced) {
+                      return /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xs", className: "oui-text-base-contrast-80", 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"
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
   return /* @__PURE__ */ jsxRuntime.jsx(
     ui.Select.options,
     {
       testid: "oui-testid-orderEntry-orderType-button",
       currentValue: props.type,
       value: props.type,
-      options: options2,
+      options: allOptions,
       onValueChange: props.onChange,
       contentProps: {
         className: ui.cn(
@@ -1899,57 +2009,823 @@ var OrderTypeSelect = (props) => {
       classNames: {
         trigger: ui.cn(
           "oui-orderEntry-orderTypeSelect-btn",
-          "oui-bg-base-6 oui-border-line"
+          "oui-bg-base-7 oui-border-line-12 oui-h-8 oui-rounded-md"
         )
       },
       valueFormatter: (value, option) => {
-        const item = options2.find((o) => o.value === value);
+        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,
+        return /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xs", className: "oui-text-base-contrast-80", children: label });
+      },
+      size: "md"
+    }
+  );
+};
+var MarginModeSwitch = (props) => {
+  const { t } = i18n.useTranslation();
+  const handleSelect = (mode) => {
+    props.onSelect(mode);
+  };
+  const titleClassName = props.isMobile ? "oui-text-lg oui-leading-[26px]" : "oui-text-base oui-leading-6";
+  const headerPadding = props.isMobile ? "oui-pt-3" : "oui-px-5 oui-pt-3";
+  const contentPadding = props.isMobile ? "oui-py-4" : "oui-p-5";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    ui.Flex,
+    {
+      direction: "column",
+      className: ui.cn(
+        "oui-w-full",
+        props.isMobile ? "oui-rounded-t-xl oui-bg-base-8" : "oui-rounded-xl oui-bg-base-8"
+      ),
+      "data-testid": "oui-testid-marginModeSwitch",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.cn("oui-w-full", headerPadding), children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            ui.Flex,
+            {
+              itemAlign: "center",
+              justify: "between",
+              className: ui.cn(props.isMobile && "oui-px-4"),
+              children: [
+                props.isMobile ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: "oui-size-[18px] oui-opacity-0",
+                    "aria-hidden": "true",
+                    tabIndex: -1
+                  }
+                ) : null,
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  ui.Text,
+                  {
+                    className: ui.cn(
+                      "oui-font-semibold oui-tracking-[0.03em]",
+                      titleClassName
+                    ),
+                    intensity: 98,
+                    children: t("marginMode.switchMarginMode")
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  ui.IconButton,
+                  {
+                    color: "light",
+                    className: "oui-size-[18px]",
+                    onClick: props.close,
+                    "aria-label": "Close",
+                    "data-testid": "oui-testid-marginModeSwitch-close",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(ui.CloseIcon, { size: 18, color: "white", opacity: 0.98 })
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { className: "oui-mt-[9px] oui-w-full" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
           {
-            size: "xs",
-            color: props.canTrade ? props.side === types.OrderSide.BUY ? "buy" : "sell" : void 0,
-            children: label
+            className: ui.cn(
+              "oui-w-full",
+              contentPadding,
+              props.isMobile && "oui-px-4"
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { itemAlign: "center", gap: 2, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(ui.TokenIcon, { symbol: props.symbol, className: "oui-size-5" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  ui.Text.formatted,
+                  {
+                    className: "oui-tracking-[0.03em]",
+                    rule: "symbol",
+                    formatString: "base-type",
+                    size: "base",
+                    weight: "semibold",
+                    intensity: 98,
+                    children: props.symbol
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", gap: 3, className: "oui-mt-3 oui-w-full", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  OptionCard,
+                  {
+                    mode: types.MarginMode.CROSS,
+                    selected: props.selectedMarginMode === types.MarginMode.CROSS,
+                    isCurrent: props.currentMarginMode === types.MarginMode.CROSS,
+                    onClick: () => handleSelect(types.MarginMode.CROSS)
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  OptionCard,
+                  {
+                    mode: types.MarginMode.ISOLATED,
+                    selected: props.selectedMarginMode === types.MarginMode.ISOLATED,
+                    isCurrent: props.currentMarginMode === types.MarginMode.ISOLATED,
+                    onClick: () => handleSelect(types.MarginMode.ISOLATED)
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { justify: "center", className: "oui-mt-3 oui-w-full", children: /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  type: "button",
+                  className: ui.cn(
+                    "oui-flex oui-items-center oui-gap-1",
+                    "oui-group",
+                    "oui-text-xs oui-leading-[15px] oui-font-semibold oui-text-base-contrast-54 oui-tracking-[0.03em]",
+                    props.onOpenSettings ? "oui-cursor-pointer hover:oui-text-base-contrast-80 oui-transition-colors" : "oui-cursor-default"
+                  ),
+                  onClick: props.onOpenSettings,
+                  disabled: !props.onOpenSettings,
+                  "data-testid": "oui-testid-marginModeSwitch-settings",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { children: t("marginMode.marginModeSettings") }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      ui.ChevronRightIcon,
+                      {
+                        size: 18,
+                        color: "white",
+                        opacity: 1,
+                        className: ui.cn(
+                          "oui-text-base-contrast-54 oui-transition-colors",
+                          props.onOpenSettings && "group-hover:oui-text-base-contrast-80"
+                        )
+                      }
+                    )
+                  ]
+                }
+              ) }),
+              props.isMobile ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-mt-4 oui-h-[34px] oui-w-full" }) : null
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+var OptionCard = (props) => {
+  const { t } = i18n.useTranslation();
+  const title = props.mode === types.MarginMode.CROSS ? t("marginMode.crossMargin") : t("marginMode.isolatedMargin");
+  const desc = props.mode === types.MarginMode.CROSS ? t("marginMode.crossMarginDescription") : t("marginMode.isolatedMarginDescription");
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      className: ui.cn(
+        "oui-relative oui-w-full oui-rounded-md oui-p-2",
+        "oui-bg-base-6",
+        "oui-text-left",
+        props.selected ? "oui-border oui-border-[#38e2fe]" : "oui-border oui-border-transparent hover:oui-border-line-12"
+      ),
+      onClick: props.onClick,
+      "data-testid": `oui-testid-marginModeSwitch-option-${props.mode}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", gap: 2, itemAlign: "start", className: "oui-w-full", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Text,
+            {
+              className: "oui-text-sm oui-font-semibold oui-leading-5 oui-tracking-[0.03em]",
+              intensity: 98,
+              children: title
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-text-2xs oui-leading-[15px] oui-text-base-contrast-36 oui-font-semibold oui-tracking-[0.03em]", children: desc })
+        ] }),
+        props.isCurrent ? /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: ui.cn(
+              "oui-absolute -oui-right-px -oui-top-px",
+              "oui-rounded-bl-md oui-rounded-tr-md",
+              "oui-bg-[#38e2fe] oui-px-1 oui-py-0.5"
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-text-2xs oui-leading-none oui-font-semibold oui-text-black", children: t("marginMode.current") })
           }
+        ) : null
+      ]
+    }
+  );
+};
+var useMarginModeSwitchScript = (options2) => {
+  const { symbol, close } = options2;
+  const { isMobile } = ui.useScreen();
+  const { t } = i18n.useTranslation();
+  const { marginMode: currentMarginMode, update } = hooks.useMarginModeBySymbol(symbol);
+  const [selectedMarginMode, setSelectedMarginMode] = React3.useState(currentMarginMode);
+  React3.useEffect(() => {
+    setSelectedMarginMode(currentMarginMode);
+  }, [currentMarginMode]);
+  const applyMarginMode = React3.useCallback(
+    async (mode) => {
+      const result = await update(mode);
+      setSelectedMarginMode(mode);
+      return result;
+    },
+    [update]
+  );
+  const onSelect = React3.useCallback(
+    (mode) => {
+      if (mode === currentMarginMode) {
+        close?.();
+        return;
+      }
+      close?.();
+      applyMarginMode(mode).then(() => {
+        ui.toast.success(t("marginMode.updatedSuccessfully"));
+      }).catch((error) => {
+        ui.toast.error(
+          error instanceof Error ? error.message : "Failed to update margin mode"
         );
-      },
-      size: "md"
+      });
+    },
+    [applyMarginMode, close, currentMarginMode, t]
+  );
+  return {
+    symbol,
+    isMobile,
+    currentMarginMode,
+    selectedMarginMode,
+    setSelectedMarginMode,
+    applyMarginMode,
+    close,
+    onSelect
+  };
+};
+var useMarginModeSettingsScript = (options2) => {
+  const { isMobile } = ui.useScreen();
+  const [markets] = hooks.useMarkets(hooks.MarketsType.ALL);
+  const items = React3.useMemo(() => {
+    if (!markets || markets.length === 0) {
+      return [];
+    }
+    return markets.map((market) => ({
+      key: market.symbol,
+      // Original symbol: "PERP_BTC_USDC"
+      symbol: utils.formatSymbol(market.symbol, "base-type")
+      // Formatted: "BTC-PERP"
+    }));
+  }, [markets]);
+  const [searchKeyword, setSearchKeyword] = React3.useState("");
+  const [selectedKeys, setSelectedKeys] = React3.useState(
+    () => /* @__PURE__ */ new Set()
+  );
+  const [isOperationLoading, setIsOperationLoading] = React3.useState(false);
+  const {
+    marginModes,
+    isLoading: isMarginModesLoading,
+    updateMarginMode,
+    isMutating: isSettingMarginMode
+  } = hooks.useMarginModes();
+  const [isDataLoading, setIsDataLoading] = React3.useState(true);
+  React3.useEffect(() => {
+    if (markets.length > 0) {
+      setIsDataLoading(false);
+    }
+  }, [markets]);
+  const itemMarginModes = React3.useMemo(() => {
+    const result = {};
+    for (const item of items) {
+      const marginMode = marginModes[item.key];
+      result[item.key] = marginMode ?? types.MarginMode.CROSS;
+    }
+    return result;
+  }, [items, marginModes]);
+  const filteredItems = React3.useMemo(() => {
+    const keyword = searchKeyword.trim().toLowerCase();
+    if (!keyword) return items;
+    return items.filter((item) => item.symbol.toLowerCase().includes(keyword));
+  }, [items, searchKeyword]);
+  const visibleSelectedCount = React3.useMemo(() => {
+    return filteredItems.filter((item) => selectedKeys.has(item.key)).length;
+  }, [filteredItems, selectedKeys]);
+  const isSelectAll = React3.useMemo(() => {
+    return filteredItems.length > 0 && visibleSelectedCount === filteredItems.length;
+  }, [filteredItems.length, visibleSelectedCount]);
+  const isIndeterminate = React3.useMemo(() => {
+    return visibleSelectedCount > 0 && visibleSelectedCount < filteredItems.length;
+  }, [filteredItems.length, visibleSelectedCount]);
+  const selectedMarginModeStats = React3.useMemo(() => {
+    let crossCount = 0;
+    let isolatedCount = 0;
+    selectedKeys.forEach((key) => {
+      const mode = itemMarginModes[key] ?? types.MarginMode.CROSS;
+      if (mode === types.MarginMode.CROSS) {
+        crossCount++;
+      } else {
+        isolatedCount++;
+      }
+    });
+    return {
+      crossCount,
+      isolatedCount,
+      isCrossButtonDisabled: crossCount > 0 && isolatedCount === 0,
+      isIsolatedButtonDisabled: isolatedCount > 0 && crossCount === 0
+    };
+  }, [selectedKeys, itemMarginModes]);
+  const onSearchChange = React3.useCallback((keyword) => {
+    setSearchKeyword(keyword);
+  }, []);
+  const onToggleItem = React3.useCallback((key) => {
+    setSelectedKeys((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) {
+        next.delete(key);
+      } else {
+        next.add(key);
+      }
+      return next;
+    });
+  }, []);
+  const onToggleSelectAll = React3.useCallback(() => {
+    setSelectedKeys((prev) => {
+      const next = new Set(prev);
+      if (isSelectAll) {
+        for (const item of filteredItems) {
+          next.delete(item.key);
+        }
+        return next;
+      }
+      for (const item of filteredItems) {
+        next.add(item.key);
+      }
+      return next;
+    });
+  }, [filteredItems, isSelectAll]);
+  const onSetMarginMode = React3.useCallback(
+    async (mode) => {
+      if (selectedKeys.size === 0) return;
+      setIsOperationLoading(true);
+      try {
+        const payload = {
+          symbol_list: Array.from(selectedKeys),
+          default_margin_mode: mode
+        };
+        await updateMarginMode(payload);
+        ui.toast.success("Updated successfully");
+      } catch (error) {
+        ui.toast.error(
+          error instanceof Error ? error.message : "Failed to update margin mode"
+        );
+      } finally {
+        setIsOperationLoading(false);
+      }
+    },
+    [selectedKeys, updateMarginMode]
+  );
+  const isLoading = isDataLoading || isMarginModesLoading || isOperationLoading || isSettingMarginMode;
+  return {
+    isMobile,
+    close: options2.close,
+    items,
+    filteredItems,
+    searchKeyword,
+    selectedKeys,
+    itemMarginModes,
+    isSelectAll,
+    isIndeterminate,
+    isLoading,
+    isCrossButtonDisabled: selectedMarginModeStats.isCrossButtonDisabled,
+    isIsolatedButtonDisabled: selectedMarginModeStats.isIsolatedButtonDisabled,
+    onSearchChange,
+    onToggleItem,
+    onToggleSelectAll,
+    onSetMarginMode
+  };
+};
+var MarginModeSettings = (props) => {
+  const { t } = i18n.useTranslation();
+  const headerPadding = props.isMobile ? "oui-px-4 oui-pt-3" : "oui-px-5 oui-pt-3";
+  const contentPadding = props.isMobile ? "oui-px-4" : "oui-px-5";
+  const selectedCount = props.selectedKeys.size;
+  const totalCountTextClassName = selectedCount > 0 ? "oui-text-primary-light" : "oui-text-base-contrast-36";
+  const handleClearSearch = React3.useCallback(() => {
+    props.onSearchChange("");
+  }, [props.onSearchChange]);
+  const handleSetCross = React3.useCallback(() => {
+    props.onSetMarginMode(types.MarginMode.CROSS);
+  }, [props.onSetMarginMode]);
+  const handleSetIsolated = React3.useCallback(() => {
+    props.onSetMarginMode(types.MarginMode.ISOLATED);
+  }, [props.onSetMarginMode]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    ui.Flex,
+    {
+      direction: "column",
+      className: ui.cn(
+        "oui-size-full",
+        "oui-rounded-xl oui-bg-base-8",
+        "oui-overflow-hidden"
+      ),
+      "data-testid": "oui-testid-marginModeSettings",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.cn("oui-w-full", headerPadding), children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { itemAlign: "center", justify: "between", children: [
+            props.isMobile ? /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                className: "oui-size-[18px] oui-opacity-0",
+                "aria-hidden": "true",
+                tabIndex: -1
+              }
+            ) : null,
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ui.Text,
+              {
+                className: ui.cn(
+                  "oui-font-semibold oui-tracking-[0.48px]",
+                  props.isMobile ? "oui-text-center oui-text-lg oui-leading-[26px]" : "oui-text-base oui-leading-6"
+                ),
+                intensity: 98,
+                children: t("marginMode.perpetualFutures")
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ui.IconButton,
+              {
+                color: "light",
+                className: "oui-size-[18px]",
+                onClick: props.close,
+                "aria-label": t("common.close"),
+                "data-testid": "oui-testid-marginModeSettings-close",
+                children: /* @__PURE__ */ jsxRuntime.jsx(ui.CloseIcon, { size: 18, color: "white", opacity: 0.98 })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { className: "oui-mt-[9px] oui-w-full" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: ui.cn(
+              "oui-relative oui-z-10 oui-w-full oui-bg-base-8",
+              contentPadding,
+              "oui-py-3"
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              ui.Input,
+              {
+                value: props.searchKeyword,
+                onValueChange: props.onSearchChange,
+                placeholder: t("marginMode.searchPlaceholder"),
+                size: "md",
+                fullWidth: true,
+                classNames: {
+                  root: ui.cn(
+                    "oui-outline-line",
+                    props.searchKeyword.trim() ? "oui-outline-primary-light" : ""
+                  )
+                },
+                prefix: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-pl-3 oui-pr-1", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(SearchGlyph, { className: "oui-text-base-contrast-54" }) }),
+                suffix: props.searchKeyword ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-pr-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  ui.CloseCircleFillIcon,
+                  {
+                    size: 14,
+                    className: "oui-cursor-pointer oui-text-base-contrast-36",
+                    onClick: handleClearSearch
+                  }
+                ) }) : null,
+                autoComplete: "off"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          ui.Flex,
+          {
+            direction: "column",
+            className: ui.cn(
+              "oui-w-full",
+              props.isMobile ? "oui-flex-1 oui-min-h-0" : ""
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                ui.Flex,
+                {
+                  direction: "column",
+                  gap: 3,
+                  className: ui.cn(
+                    "oui-w-full oui-overflow-y-auto oui-custom-scrollbar",
+                    props.isMobile ? "oui-flex-1 oui-min-h-0 oui-px-4 oui-pt-0 oui-pb-3" : "oui-h-[308px] oui-px-5 oui-pt-0 oui-pb-3"
+                  ),
+                  style: {
+                    scrollbarWidth: "thin",
+                    scrollbarColor: "rgba(255, 255, 255, 0.2) transparent"
+                  },
+                  children: props.filteredItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+                    SymbolRow,
+                    {
+                      item,
+                      checked: props.selectedKeys.has(item.key),
+                      marginMode: props.itemMarginModes[item.key] ?? types.MarginMode.CROSS,
+                      onToggle: props.onToggleItem
+                    },
+                    item.key
+                  ))
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { className: "oui-w-full" }),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                ui.Flex,
+                {
+                  itemAlign: "center",
+                  justify: "between",
+                  className: ui.cn(
+                    "oui-w-full",
+                    props.isMobile ? "oui-px-4 oui-py-3" : "oui-px-5 oui-py-3"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { itemAlign: "center", gap: 2, children: /* @__PURE__ */ jsxRuntime.jsxs(
+                      "label",
+                      {
+                        className: ui.cn(
+                          "oui-flex oui-items-center oui-gap-2 oui-cursor-pointer oui-select-none"
+                        ),
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            ui.Checkbox,
+                            {
+                              color: "white",
+                              checked: props.isSelectAll,
+                              onCheckedChange: () => {
+                                props.onToggleSelectAll();
+                              },
+                              "aria-label": t("marginMode.selectAll")
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-text-sm oui-font-semibold oui-text-base-contrast-80", children: t("marginMode.selectAll") })
+                        ]
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { className: "oui-text-sm oui-text-base-contrast-54", children: [
+                      t("common.total"),
+                      ":",
+                      " ",
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: ui.cn("oui-font-semibold", totalCountTextClassName), children: selectedCount })
+                    ] })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                ui.Flex,
+                {
+                  itemAlign: "center",
+                  justify: "end",
+                  gap: 3,
+                  className: ui.cn(
+                    "oui-w-full",
+                    props.isMobile ? "oui-px-4 oui-pt-3 oui-pb-[calc(20px+env(safe-area-inset-bottom))]" : "oui-px-5 oui-pt-3 oui-pb-5"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-text-sm oui-leading-8 oui-text-base-contrast-80", children: t("marginMode.setAs") }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      ui.Button,
+                      {
+                        size: "md",
+                        className: ui.cn(
+                          "oui-bg-base-3 hover:oui-bg-base-3/80 active:oui-bg-base-3/70",
+                          selectedCount > 0 && !props.isLoading ? "oui-text-base-contrast-80" : "oui-text-base-contrast-98"
+                        ),
+                        disabled: selectedCount === 0 || props.isLoading || (props.isCrossButtonDisabled ?? false),
+                        onClick: handleSetCross,
+                        "aria-label": t("marginMode.cross"),
+                        "data-testid": "oui-testid-marginModeSettings-set-cross",
+                        children: t("marginMode.cross")
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      ui.Button,
+                      {
+                        size: "md",
+                        className: ui.cn(
+                          "oui-bg-base-3 hover:oui-bg-base-3/80 active:oui-bg-base-3/70",
+                          selectedCount > 0 && !props.isLoading ? "oui-text-base-contrast-80" : "oui-text-base-contrast-98"
+                        ),
+                        disabled: selectedCount === 0 || props.isLoading || (props.isIsolatedButtonDisabled ?? false),
+                        onClick: handleSetIsolated,
+                        "aria-label": t("marginMode.isolated"),
+                        "data-testid": "oui-testid-marginModeSettings-set-isolated",
+                        children: t("marginMode.isolated")
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ]
     }
   );
 };
+var SymbolRow = (props) => {
+  const { t } = i18n.useTranslation();
+  const handleCheckedChange = React3.useCallback(() => {
+    props.onToggle(props.item.key);
+  }, [props]);
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { itemAlign: "center", className: "oui-w-full", children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "label",
+    {
+      className: ui.cn(
+        "oui-flex oui-items-center oui-gap-2 oui-flex-1 oui-cursor-pointer oui-select-none oui-w-full"
+      ),
+      "data-testid": `oui-testid-marginModeSettings-item-${props.item.key}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Checkbox,
+          {
+            color: "white",
+            checked: props.checked,
+            onCheckedChange: handleCheckedChange,
+            "aria-label": props.item.symbol
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-text-sm oui-font-semibold oui-text-base-contrast-80", children: props.item.symbol }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: ui.cn(
+              "oui-inline-flex oui-items-center",
+              "oui-rounded oui-bg-base-6 oui-px-2 oui-py-0",
+              "oui-h-[18px] oui-text-xs oui-leading-[18px]",
+              "oui-text-base-contrast-36"
+            ),
+            children: props.marginMode === types.MarginMode.ISOLATED ? t("marginMode.isolated") : t("marginMode.cross")
+          }
+        )
+      ]
+    }
+  ) });
+};
+var SearchGlyph = (props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      width: "14",
+      height: "14",
+      viewBox: "0 0 14 14",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className: props.className,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M6.417 1.167a5.25 5.25 0 1 0 3.138 9.46l2.139 2.14a.583.583 0 1 0 .825-.826l-2.14-2.139a5.25 5.25 0 0 0-3.962-8.635Zm0 1.167a4.083 4.083 0 1 1 0 8.166 4.083 4.083 0 0 1 0-8.166Z",
+          fill: "currentColor",
+          fillOpacity: "0.8"
+        }
+      )
+    }
+  );
+};
+var MarginModeSettingsWidget = (props) => {
+  const state = useMarginModeSettingsScript(props);
+  return /* @__PURE__ */ jsxRuntime.jsx(MarginModeSettings, { ...state, onSetMarginMode: state.onSetMarginMode });
+};
+var MarginModeSettingsSheetId = "MarginModeSettingsSheetId";
+var MarginModeSettingsDialogId = "MarginModeSettingsDialogId";
+ui.registerSimpleSheet(MarginModeSettingsSheetId, MarginModeSettingsWidget, {
+  title: void 0,
+  closable: false,
+  classNames: {
+    content: "oui-bg-transparent !oui-px-0 !oui-py-0 oui-top-[100px] oui-bottom-0",
+    // SheetBody must be full height, otherwise child `h-full`/flex layout can't allocate space
+    // and footer may be pushed out of viewport.
+    body: "oui-p-0 oui-h-full",
+    overlay: "!oui-bg-black/10"
+  }
+});
+ui.registerSimpleDialog(MarginModeSettingsDialogId, MarginModeSettingsWidget, {
+  title: void 0,
+  closable: false,
+  classNames: {
+    content: "oui-w-[360px] oui-bg-transparent !oui-px-0",
+    body: "oui-p-0",
+    overlay: "!oui-bg-black/10"
+  }
+});
+var MarginModeSwitchWidget = (props) => {
+  const state = useMarginModeSwitchScript(props);
+  const { id: currentModalId } = ui.useModal();
+  const onOpenSettings = () => {
+    const modalId = currentModalId === MarginModeSwitchSheetId ? MarginModeSettingsSheetId : MarginModeSettingsDialogId;
+    ui.modal.show(modalId, {});
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    MarginModeSwitch,
+    {
+      ...state,
+      onOpenSettings: props.onOpenSettings ?? onOpenSettings
+    }
+  );
+};
+var MarginModeSwitchSheetId = "MarginModeSwitchSheetId";
+var MarginModeSwitchDialogId = "MarginModeSwitchDialogId";
+ui.registerSimpleSheet(MarginModeSwitchSheetId, MarginModeSwitchWidget, {
+  // Use custom header in widget UI for both web and mweb.
+  title: void 0,
+  closable: false,
+  classNames: {
+    content: "oui-bg-transparent !oui-px-0",
+    body: "oui-p-0"
+  }
+});
+ui.registerSimpleDialog(MarginModeSwitchDialogId, MarginModeSwitchWidget, {
+  // Use custom header in widget UI for both web and mweb.
+  title: void 0,
+  closable: false,
+  classNames: {
+    content: "oui-w-[360px] oui-bg-transparent !oui-px-0",
+    body: "oui-p-0"
+  }
+});
 var LeverageBadge = (props) => {
-  const { symbol, side, symbolLeverage } = props;
+  const { symbol, side, symbolLeverage, disabled } = props;
   const { isMobile } = ui.useScreen();
-  const { maxLeverage } = hooks.useSymbolLeverage(symbol);
-  const curLeverage = symbolLeverage || maxLeverage;
-  const showModal = () => {
+  const { t } = i18n.useTranslation();
+  const { enabled } = hooks.useFeatureFlag(hooks.FlagKeys.IsolatedMargin);
+  const marginMode = props.marginMode;
+  const isDisabled = !!disabled;
+  const curLeverage = symbolLeverage ?? 1;
+  const showLeverageModal = () => {
+    if (isDisabled) return;
     const modalId = isMobile ? uiLeverage.SymbolLeverageSheetId : uiLeverage.SymbolLeverageDialogId;
     ui.modal.show(modalId, {
       symbol,
       side,
-      curLeverage
+      curLeverage,
+      marginMode
+    });
+  };
+  const showMarginModeModal = () => {
+    if (isDisabled || !enabled) {
+      return;
+    }
+    const modalId = isMobile ? MarginModeSwitchSheetId : MarginModeSwitchDialogId;
+    ui.modal.show(modalId, {
+      symbol
     });
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    ui.Flex,
+    "div",
     {
-      justify: "center",
-      itemAlign: "center",
-      gapX: 1,
       className: ui.cn(
+        "oui-flex oui-w-full oui-items-center oui-rounded-md oui-border oui-border-line-12 oui-bg-base-6",
         "oui-orderEntry-leverage-btn",
         "oui-h-8",
-        "oui-rounded oui-border oui-border-line oui-bg-base-6",
-        "oui-cursor-pointer oui-select-none oui-text-xs oui-font-semibold oui-text-base-contrast-54"
+        "oui-select-none"
       ),
-      onClick: showModal,
+      "data-testid": "oui-testid-orderEntry-margin-leverage",
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: "Cross" }),
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Text.numeral, { dp: 0, rm: utils.Decimal.ROUND_DOWN, unit: "X", children: curLeverage })
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: ui.cn(
+              "oui-flex oui-flex-1 oui-items-center oui-justify-center oui-gap-x-1",
+              "oui-px-3 oui-py-1.5",
+              "oui-text-xs oui-font-semibold oui-text-base-contrast-54",
+              isDisabled ? "oui-cursor-not-allowed" : "oui-cursor-pointer"
+            ),
+            "data-testid": "oui-testid-orderEntry-margin-mode",
+            "aria-label": t("marginMode.switchMarginMode"),
+            disabled: isDisabled,
+            onClick: showMarginModeModal,
+            children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: marginMode === void 0 ? "--" : marginMode === types.MarginMode.ISOLATED ? t("marginMode.isolated") : t("marginMode.cross") })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-h-5 oui-w-px oui-bg-line", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: ui.cn(
+              "oui-flex oui-flex-1 oui-items-center oui-justify-center oui-gap-x-1",
+              "oui-px-3 oui-py-1.5",
+              "oui-text-xs oui-font-semibold oui-text-base-contrast-54",
+              isDisabled ? "oui-cursor-not-allowed" : "oui-cursor-pointer"
+            ),
+            "aria-label": "Adjust leverage",
+            disabled: isDisabled,
+            onClick: showLeverageModal,
+            "data-testid": "oui-testid-orderEntry-leverage",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              ui.Text.numeral,
+              {
+                dp: 0,
+                rm: utils.Decimal.ROUND_DOWN,
+                unit: "x",
+                unitClassName: "oui-ml-0",
+                children: curLeverage
+              }
+            )
+          }
+        )
       ]
     }
   );
@@ -1958,6 +2834,27 @@ 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,
+      {
+        symbol: props.symbol,
+        side: props.side,
+        symbolLeverage: props.symbolLeverage,
+        marginMode: props.marginMode,
+        disabled: !props.canTrade
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
+      OrderTypeSelect,
+      {
+        type: order_type,
+        side,
+        canTrade,
+        onChange: (type) => {
+          setOrderValue("order_type", type);
+        }
+      }
+    ) }),
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -2003,45 +2900,14 @@ function OrderEntryHeader(props) {
           )
         ]
       }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        className: ui.cn(
-          "oui-orderEntry-header-controls",
-          "oui-grid oui-gap-x-2 lg:oui-flex lg:oui-gap-x-[6px]",
-          "oui-grid-cols-2"
-        ),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-w-full oui-orderEntry-orderTypeSelect", children: /* @__PURE__ */ jsxRuntime.jsx(
-            OrderTypeSelect,
-            {
-              type: order_type,
-              side,
-              canTrade,
-              onChange: (type) => {
-                setOrderValue("order_type", type);
-              }
-            }
-          ) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-w-full oui-orderEntry-leverage", children: /* @__PURE__ */ jsxRuntime.jsx(
-            LeverageBadge,
-            {
-              symbol: props.symbol,
-              side: props.side,
-              symbolLeverage: props.symbolLeverage
-            }
-          ) })
-        ]
-      }
     )
   ] });
 }
-var OrderEntryContext = React2.createContext(
+var OrderEntryContext = React3.createContext(
   {}
 );
 var useOrderEntryContext = () => {
-  return React2.useContext(OrderEntryContext);
+  return React3.useContext(OrderEntryContext);
 };
 var OrderEntryProvider = (props) => {
   const {
@@ -2061,7 +2927,7 @@ var OrderEntryProvider = (props) => {
     lastQuantityInputType,
     leverage
   } = props;
-  const memoizedValue = React2.useMemo(() => {
+  const memoizedValue = React3.useMemo(() => {
     return {
       errorMsgVisible,
       symbolInfo,
@@ -2099,7 +2965,7 @@ var OrderEntryProvider = (props) => {
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx(OrderEntryContext.Provider, { value: memoizedValue, children: props.children });
 };
-var CustomInput = React2.forwardRef(
+var CustomInput = React3.forwardRef(
   (props, ref) => {
     const { placeholder = "0" } = props;
     const { errorMsgVisible } = useOrderEntryContext();
@@ -2166,7 +3032,7 @@ var InputLabel = (props) => {
 };
 var BBOOrderTypeSelect = (props) => {
   const { t } = i18n.useTranslation();
-  const options2 = React2.useMemo(
+  const options2 = React3.useMemo(
     () => [
       {
         label: t("orderEntry.bbo.counterparty1"),
@@ -2359,7 +3225,7 @@ var PriceInput = (props) => {
     }
   );
 };
-var QuantityInput = React2.memo((props) => {
+var QuantityInput = React3.memo((props) => {
   const { t } = i18n.useTranslation();
   const { symbolInfo, onFocus, onBlur, getErrorMsg, setOrderValue } = useOrderEntryContext();
   const { base, base_dp } = symbolInfo;
@@ -2386,9 +3252,9 @@ var QuantityInput = React2.memo((props) => {
   );
 });
 QuantityInput.displayName = "QuantityInput";
-var TotalTypeSelect = React2.memo((props) => {
+var TotalTypeSelect = React3.memo((props) => {
   const { t } = i18n.useTranslation();
-  const options2 = React2.useMemo(() => {
+  const options2 = React3.useMemo(() => {
     return [
       {
         label: t("orderEntry.orderSize"),
@@ -2422,10 +3288,10 @@ var TotalTypeSelect = React2.memo((props) => {
   );
 });
 TotalTypeSelect.displayName = "TotalTypeSelect";
-var TotalInput = React2.memo((props) => {
+var TotalInput = React3.memo((props) => {
   const { t } = i18n.useTranslation();
   const { total } = props;
-  const [margin, setMargin] = React2.useState("");
+  const [margin, setMargin] = React3.useState("");
   const {
     symbolInfo,
     onFocus,
@@ -2440,7 +3306,7 @@ var TotalInput = React2.memo((props) => {
     "orderly_order_total_type",
     "orderSize" /* OrderSize */
   );
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     if (total) {
       if (currentFocusInput !== 6 /* MARGIN */) {
         const margin2 = new utils.Decimal(total).div(leverage).todp(2).toString();
@@ -2502,7 +3368,7 @@ var TotalInput = React2.memo((props) => {
   );
 });
 TotalInput.displayName = "TotalInput";
-var QtyAndTotalInput = React2.memo((props) => {
+var QtyAndTotalInput = React3.memo((props) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     ui.Grid,
     {
@@ -2516,7 +3382,7 @@ var QtyAndTotalInput = React2.memo((props) => {
   );
 });
 QtyAndTotalInput.displayName = "QtyAndTotalInput";
-var QuantityDistributionInput = React2.memo((props) => {
+var QuantityDistributionInput = React3.memo((props) => {
   const { t } = i18n.useTranslation();
   const { setOrderValue } = useOrderEntryContext();
   const showHint = () => {
@@ -2570,8 +3436,8 @@ var QuantityDistributionInput = React2.memo((props) => {
 });
 var QuantityDistributionHint = (props) => {
   const { t } = i18n.useTranslation();
-  const [type, setType] = React2.useState(types.DistributionType.FLAT);
-  React2.useEffect(() => {
+  const [type, setType] = React3.useState(types.DistributionType.FLAT);
+  React3.useEffect(() => {
     setType(
       [
         types.DistributionType.FLAT,
@@ -2580,7 +3446,7 @@ var QuantityDistributionHint = (props) => {
       ].includes(props.value) ? props.value : types.DistributionType.FLAT
     );
   }, [props.value]);
-  const content = React2.useMemo(() => {
+  const content = React3.useMemo(() => {
     return [
       {
         type: types.DistributionType.FLAT,
@@ -2605,7 +3471,7 @@ var QuantityDistributionHint = (props) => {
       }
     ];
   }, []);
-  const currentContent = React2.useMemo(() => {
+  const currentContent = React3.useMemo(() => {
     return content.find((item) => item.type === type);
   }, [content, type]);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-text-2xs oui-font-semibold oui-text-base-contrast-54", children: [
@@ -2663,7 +3529,7 @@ var QuantityDistribution = (props) => {
   const onChange = (value2) => (checked) => {
     onValueChange(value2);
   };
-  const distributionTypeMap = React2.useMemo(() => {
+  const distributionTypeMap = React3.useMemo(() => {
     return {
       [types.DistributionType.FLAT]: t("orderEntry.distributionType.flat"),
       [types.DistributionType.ASCENDING]: t(
@@ -2974,7 +3840,7 @@ var PriceChart = () => {
     }
   );
 };
-var ScaledPriceInput = React2.memo((props) => {
+var ScaledPriceInput = React3.memo((props) => {
   const { t } = i18n.useTranslation();
   const { symbolInfo, onFocus, onBlur, getErrorMsg, setOrderValue } = useOrderEntryContext();
   const { quote, quote_dp } = symbolInfo;
@@ -3024,7 +3890,7 @@ var valueRenderer = (value) => {
 };
 var ScaledQuantityUnit = (props) => {
   const { base, quote } = props;
-  const options2 = React2.useMemo(() => {
+  const options2 = React3.useMemo(() => {
     return [{ name: quote }, { name: base }];
   }, [base, quote]);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -3054,7 +3920,7 @@ var ScaledQuantityUnit = (props) => {
     }
   );
 };
-var ScaledQuantityInput = React2.memo((props) => {
+var ScaledQuantityInput = React3.memo((props) => {
   const { t } = i18n.useTranslation();
   const { errors, symbolInfo, onFocus, onBlur, getErrorMsg, setOrderValue } = useOrderEntryContext();
   const [quantityUnit, setQuantityUnit] = hooks.useLocalStorage(
@@ -3117,7 +3983,7 @@ var ScaledQuantityInput = React2.memo((props) => {
     }
   );
 });
-var SkewInput = React2.memo((props) => {
+var SkewInput = React3.memo((props) => {
   const { t } = i18n.useTranslation();
   const { onFocus, onBlur, getErrorMsg, setOrderValue } = useOrderEntryContext();
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -3143,7 +4009,7 @@ var SkewInput = React2.memo((props) => {
     }
   );
 });
-var TotalOrdersInput = React2.memo((props) => {
+var TotalOrdersInput = React3.memo((props) => {
   const { t } = i18n.useTranslation();
   const { onFocus, onBlur, getErrorMsg, setOrderValue } = useOrderEntryContext();
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -3206,7 +4072,7 @@ var ScaledOrderInput = (props) => {
     showSkewInput && /* @__PURE__ */ jsxRuntime.jsx(SkewInput, { skew: values.skew })
   ] });
 };
-var TriggerPriceInput = React2.memo((props) => {
+var TriggerPriceInput = React3.memo((props) => {
   const { t } = i18n.useTranslation();
   const {
     symbolInfo,
@@ -3237,7 +4103,7 @@ var TriggerPriceInput = React2.memo((props) => {
   ) });
 });
 TriggerPriceInput.displayName = "TriggerPriceInput";
-var ActivePriceInput = React2.memo((props) => {
+var ActivePriceInput = React3.memo((props) => {
   const { t } = i18n.useTranslation();
   const {
     symbolInfo,
@@ -3270,7 +4136,7 @@ var ActivePriceInput = React2.memo((props) => {
 });
 ActivePriceInput.displayName = "ActivePriceInput";
 var percentages = [1, 2, 3, 5];
-var CallbackRatePercentages = React2.memo(
+var CallbackRatePercentages = React3.memo(
   (props) => {
     const { setOrderValue } = useOrderEntryContext();
     return /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { gapX: 2, className: props.className, children: percentages.map((item) => {
@@ -3303,10 +4169,10 @@ var CallbackRatePercentages = React2.memo(
   }
 );
 CallbackRatePercentages.displayName = "CallbackRatePercentages";
-var TrailingCallbackSelect = React2.memo(
+var TrailingCallbackSelect = React3.memo(
   (props) => {
     const { quote } = props;
-    const options2 = React2.useMemo(() => {
+    const options2 = React3.useMemo(() => {
       return [
         { label: quote, value: types.TrailingCallbackType.VALUE },
         { label: "%", value: types.TrailingCallbackType.RATE }
@@ -3339,7 +4205,7 @@ var TrailingCallbackSelect = React2.memo(
   }
 );
 TrailingCallbackSelect.displayName = "trailingCallbackSelect";
-var TrailingCallbackInput = React2.memo(
+var TrailingCallbackInput = React3.memo(
   (props) => {
     const { callback_value, callback_rate } = props;
     const { t } = i18n.useTranslation();
@@ -3352,13 +4218,13 @@ var TrailingCallbackInput = React2.memo(
       setOrderValues
     } = useOrderEntryContext();
     const { quote, quote_dp } = symbolInfo;
-    const lastCallbackValueRef = React2.useRef();
-    const lastCallbackRateRef = React2.useRef();
+    const lastCallbackValueRef = React3.useRef();
+    const lastCallbackRateRef = React3.useRef();
     const [callbackType, setCallbackType] = hooks.useLocalStorage(
       "orderly_order_trailing_callback_type",
       types.TrailingCallbackType.VALUE
     );
-    const onCallbackTypeChange = React2.useCallback(
+    const onCallbackTypeChange = React3.useCallback(
       (type) => {
         setCallbackType(type);
         if (type === types.TrailingCallbackType.RATE) {
@@ -3512,17 +4378,17 @@ function OrderInput(props) {
 }
 var SLIDER_MIN = 0;
 var SLIDER_MAX = 100;
-var QuantitySlider = React2.memo((props) => {
+var QuantitySlider = React3.memo((props) => {
   const { canTrade, side, order_quantity, maxQty } = props;
-  const [sliderValue, setSliderValue] = React2.useState(0);
+  const [sliderValue, setSliderValue] = React3.useState(0);
   const { setOrderValue, symbolInfo, lastQuantityInputType } = useOrderEntryContext();
   const { base_dp, base_tick } = symbolInfo;
   const { t } = i18n.useTranslation();
-  const color = React2.useMemo(
+  const color = React3.useMemo(
     () => canTrade ? side === types.OrderSide.BUY ? "buy" : "sell" : void 0,
     [side, canTrade]
   );
-  const maxLabel = React2.useMemo(() => {
+  const maxLabel = React3.useMemo(() => {
     return side === types.OrderSide.BUY ? t("orderEntry.maxBuy") : t("orderEntry.maxSell");
   }, [side, t]);
   const onSliderValueChange = (value) => {
@@ -3539,12 +4405,12 @@ var QuantitySlider = React2.memo((props) => {
       sliderToQuantity(SLIDER_MAX);
     }
   };
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     if (lastQuantityInputType.current === 4 /* QUANTITY_SLIDER */) {
       sliderToQuantity(sliderValue);
     }
   }, [sliderValue, maxQty]);
-  React2.useEffect(() => {
+  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();
@@ -3655,22 +4521,22 @@ var ReduceOnlySwitch = ({
     }
   );
 };
-var PnlInputContext = React2.createContext(
+var PnlInputContext = React3.createContext(
   {}
 );
 var usePnlInputContext = () => {
-  return React2.useContext(PnlInputContext);
+  return React3.useContext(PnlInputContext);
 };
 
 // src/components/pnlInput/useBuilder.script.ts
 var usePNLInputBuilder = (props) => {
   const { type, values, quote_dp } = props;
   const { t } = i18n.useTranslation();
-  const [focus, setFocus] = React2.useState(true);
+  const [focus, setFocus] = React3.useState(true);
   const { mode, setMode, tipsEle } = usePnlInputContext();
-  const [tipVisible, setTipVisible] = React2.useState(false);
-  const [isFocused, setIsFocused] = React2.useState(false);
-  const key = React2.useMemo(() => {
+  const [tipVisible, setTipVisible] = React3.useState(false);
+  const [isFocused, setIsFocused] = React3.useState(false);
+  const key = React3.useMemo(() => {
     switch (mode) {
       case "Offset" /* OFFSET */:
         return `${type.toLowerCase()}_offset`;
@@ -3680,16 +4546,16 @@ var usePNLInputBuilder = (props) => {
         return `${type.toLowerCase()}_pnl`;
     }
   }, [mode]);
-  const [innerValue, setInnerValue] = React2.useState(
+  const [innerValue, setInnerValue] = React3.useState(
     values[mode]
   );
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     if (isFocused) {
       return;
     }
     setInnerValue(values[mode]);
   }, [values, mode, isFocused]);
-  const modes = React2.useMemo(() => {
+  const modes = React3.useMemo(() => {
     return [
       {
         label: t("tpsl.pnl"),
@@ -3708,14 +4574,14 @@ var usePNLInputBuilder = (props) => {
       }
     ];
   }, [t]);
-  const modeLabelMap = React2.useMemo(() => {
+  const modeLabelMap = React3.useMemo(() => {
     return {
       ["PnL" /* PnL */]: t("tpsl.pnl"),
       ["Offset" /* OFFSET */]: t("tpsl.offset"),
       ["Offset%" /* PERCENTAGE */]: `${t("tpsl.offset")}%`
     };
   }, [t]);
-  const percentageSuffix = React2.useRef("");
+  const percentageSuffix = React3.useRef("");
   const onValueChange = (value) => {
     setInnerValue(value);
     props.onChange(key, value);
@@ -3811,18 +4677,18 @@ var PNLInput = (props) => {
     onBlur,
     setFocus
   } = props;
-  const [prefix, setPrefix] = React2.useState(mode);
-  const [placeholder, setPlaceholder] = React2.useState(
+  const [prefix, setPrefix] = React3.useState(mode);
+  const [placeholder, setPlaceholder] = React3.useState(
     mode === "Offset%" /* PERCENTAGE */ ? "%" : quote
   );
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     setPrefix(mode);
     setPlaceholder(mode === "Offset%" /* PERCENTAGE */ ? "%" : quote);
   }, [mode]);
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     setPrefix(!!value ? "" : mode);
   }, [value]);
-  const id = React2.useMemo(() => `${type.toLowerCase()}_${mode.toLowerCase()}`, []);
+  const id = React3.useMemo(() => `${type.toLowerCase()}_${mode.toLowerCase()}`, []);
   return /* @__PURE__ */ jsxRuntime.jsx(
     ui.Input.tooltip,
     {
@@ -3915,7 +4781,7 @@ var PnlInputProvider = (props) => {
     "Offset%" /* PERCENTAGE */
   );
   const { t } = i18n.useTranslation();
-  const tipsEle = React2.useMemo(() => {
+  const tipsEle = React3.useMemo(() => {
     if (!values.PnL || !values.trigger_price) {
       return null;
     }
@@ -3944,16 +4810,16 @@ var PnlInputProvider = (props) => {
       )
     ] });
   }, [mode, values.ROI, values.PnL, values.trigger_price]);
-  const memoizedValue = React2.useMemo(() => {
+  const memoizedValue = React3.useMemo(() => {
     return { mode, setMode, tipsEle };
   }, [mode, setMode, tipsEle]);
   return /* @__PURE__ */ jsxRuntime.jsx(PnlInputContext.Provider, { value: memoizedValue, children });
 };
 var OrderTPSL = (props) => {
-  const tpslFormRef = React2__default.default.useRef(null);
+  const tpslFormRef = React3__default.default.useRef(null);
   const { t } = i18n.useTranslation();
   const { isMobile } = ui.useScreen();
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     if (props.orderType !== types.OrderType.LIMIT && props.orderType !== types.OrderType.MARKET) {
       props.onSwitchChanged(false);
     }
@@ -4051,7 +4917,7 @@ var TPSLPriceWarning = (props) => {
     }
   );
 };
-var TPSLInputForm = React2__default.default.forwardRef((props, ref) => {
+var TPSLInputForm = React3__default.default.forwardRef((props, ref) => {
   const { getErrorMsg } = reactApp.useOrderEntryFormErrorMsg(props.errors);
   const { t } = i18n.useTranslation();
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -4156,20 +5022,20 @@ var TPSLTriggerPriceInput = (props) => {
   const { t } = i18n.useTranslation();
   const { errorMsgVisible } = useOrderEntryContext();
   const { tipsEle } = usePnlInputContext();
-  const [prefix, setPrefix] = React2.useState(`${props.type} Price`);
-  const [placeholder, setPlaceholder] = React2.useState("USDC");
-  const [tipVisible, setTipVisible] = React2.useState(false);
-  const [isFocused, setIsFocused] = React2.useState(false);
-  const [innerValue, setInnerValue] = React2.useState(
+  const [prefix, setPrefix] = React3.useState(`${props.type} Price`);
+  const [placeholder, setPlaceholder] = React3.useState("USDC");
+  const [tipVisible, setTipVisible] = React3.useState(false);
+  const [isFocused, setIsFocused] = React3.useState(false);
+  const [innerValue, setInnerValue] = React3.useState(
     props.values.trigger_price ?? ""
   );
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     if (isFocused) {
       return;
     }
     setInnerValue(props.values.trigger_price ?? "");
   }, [props.values.trigger_price, isFocused]);
-  const triggerPriceToolTipEle = React2.useMemo(() => {
+  const triggerPriceToolTipEle = React3.useMemo(() => {
     if (props.error && (errorMsgVisible || props.displayErrorMessage))
       return props.error;
     if (tipVisible) return tipsEle;
@@ -4192,7 +5058,7 @@ var TPSLTriggerPriceInput = (props) => {
     setInnerValue(value);
     props.onChange(value);
   };
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     setPrefix(getPrefixLabel(props.values.trigger_price));
     if (!isFocused) {
       setInnerValue(props.values.trigger_price ?? "");
@@ -4316,12 +5182,12 @@ var OrderEntry = (props) => {
     setSoundAlert,
     currentFocusInput
   } = props;
-  const [maxQtyConfirmOpen, setMaxQtyConfirmOpen] = React2.useState(false);
+  const [maxQtyConfirmOpen, setMaxQtyConfirmOpen] = React3.useState(false);
   const { t } = i18n.useTranslation();
   const { isMobile } = ui.useScreen();
-  const [hasAdvancedTPSLResult, setHasAdvancedTPSLResult] = React2.useState(false);
+  const [hasAdvancedTPSLResult, setHasAdvancedTPSLResult] = React3.useState(false);
   const { errors, validated } = metaState;
-  const [errorMsgVisible, setErrorMsgVisible] = React2.useState(false);
+  const [errorMsgVisible, setErrorMsgVisible] = React3.useState(false);
   const [needConfirm, setNeedConfirm] = hooks.useLocalStorage(
     "orderly_order_confirm",
     true
@@ -4330,7 +5196,7 @@ var OrderEntry = (props) => {
     "orderly-order-additional-pinned",
     true
   );
-  const [showTPSLAdvanced, setShowTPSLAdvanced] = React2.useState(false);
+  const [showTPSLAdvanced, setShowTPSLAdvanced] = React3.useState(false);
   const [hidden, setHidden] = hooks.useLocalStorage("orderly-order-hidden", false);
   const [slippage, setSlippage] = hooks.useLocalStorage("orderly-slippage", "1", {
     parseJSON: ((value) => {
@@ -4338,17 +5204,17 @@ var OrderEntry = (props) => {
     })
   });
   const { notification } = hooks.useOrderlyContext();
-  const soundAlertId = React2.useId();
+  const soundAlertId = React3.useId();
   const { getErrorMsg } = reactApp.useOrderEntryFormErrorMsg(validated ? errors : null);
-  const buttonLabel = React2.useMemo(() => {
+  const buttonLabel = React3.useMemo(() => {
     return side === types.OrderSide.BUY ? t("orderEntry.buyLong") : t("orderEntry.sellShort");
   }, [side, t, isMobile]);
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     if (validated) {
       setErrorMsgVisible(true);
     }
   }, [validated]);
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     if (disableFeatures?.includes("slippageSetting")) {
       return;
     }
@@ -4358,7 +5224,7 @@ var OrderEntry = (props) => {
       setOrderValue("slippage", void 0);
     }
   }, [slippage, disableFeatures]);
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     const clickHandler = (event) => {
       const target = event.target;
       if (target.closest("#order-entry-submit-button")) {
@@ -4427,10 +5293,10 @@ var OrderEntry = (props) => {
       }
     });
   });
-  const formattedMaxQty = React2.useMemo(() => {
+  const formattedMaxQty = React3.useMemo(() => {
     return new utils.Decimal(maxQty).todp(symbolInfo.base_dp, utils.Decimal.ROUND_DOWN).toString();
   }, [maxQty, symbolInfo.base_dp]);
-  const onMaxQtyConfirm = React2.useCallback(() => {
+  const onMaxQtyConfirm = React3.useCallback(() => {
     setOrderValue("order_quantity", formattedMaxQty);
     requestAnimationFrame(() => {
       onSubmit();
@@ -4512,7 +5378,7 @@ var OrderEntry = (props) => {
       position_type: types.PositionType.FULL
     });
   };
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     setHasAdvancedTPSLResult(false);
   }, [props.symbol]);
   const showReduceOnlySection = isMobile && formattedOrder.order_type !== types.OrderType.LIMIT && formattedOrder.order_type !== types.OrderType.MARKET || !isMobile;
@@ -4575,7 +5441,8 @@ var OrderEntry = (props) => {
                   side,
                   order_type: formattedOrder.order_type,
                   setOrderValue,
-                  symbolLeverage: props.symbolLeverage
+                  symbolLeverage: props.symbolLeverage,
+                  marginMode: props.marginMode
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -4584,7 +5451,8 @@ var OrderEntry = (props) => {
                   currentLtv,
                   canTrade: props.canTrade,
                   quote: symbolInfo?.quote,
-                  freeCollateral
+                  freeCollateral,
+                  marginMode: props.marginMode
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -4793,7 +5661,7 @@ var OrderEntry = (props) => {
               )
             },
             contentProps: { side: "right", closeable: false },
-            children: /* @__PURE__ */ jsxRuntime.jsx(
+            children: showTPSLAdvanced && /* @__PURE__ */ jsxRuntime.jsx(
               uiTpsl.TPSLAdvancedWidget,
               {
                 setOrderValue,
@@ -4819,9 +5687,9 @@ function useBBOState({
   setOrderValues
 }) {
   const [localBBOType, setLocalBBOType] = hooks.useLocalStorage("orderly_order_bbo_type", void 0);
-  const lastBBOType = React2.useRef(localBBOType);
+  const lastBBOType = React3.useRef(localBBOType);
   const { track } = hooks.useTrack();
-  const bboStatus = React2.useMemo(() => {
+  const bboStatus = React3.useMemo(() => {
     if (tpslSwitch || [types.OrderType.POST_ONLY, types.OrderType.IOC, types.OrderType.FOK].includes(
       order_type_ext
     )) {
@@ -4845,7 +5713,7 @@ function useBBOState({
     setLocalBBOType(value);
     lastBBOType.current = value;
   };
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     if (bboStatus === "disabled" /* DISABLED */) {
       setOrderValues({
         // if order_type_ext is not bbo(ask, bid), keep previous value
@@ -4854,7 +5722,7 @@ function useBBOState({
       });
     }
   }, [bboStatus, order_type_ext]);
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     if (bboStatus === "on" /* ON */) {
       const orderType = getOrderTypeByBBO(localBBOType, side);
       const orderLevel = getOrderLevelByBBO(localBBOType);
@@ -4874,9 +5742,9 @@ function useBBOState({
 }
 function useFocusAndBlur(props) {
   const { base_tick, order_type, order_quantity, setValue } = props;
-  const currentFocusInput = React2.useRef(0 /* NONE */);
-  const lastScaledOrderPriceInput = React2.useRef(8 /* END_PRICE */);
-  const lastQuantityInputType = React2.useRef(0 /* NONE */);
+  const currentFocusInput = React3.useRef(0 /* NONE */);
+  const lastScaledOrderPriceInput = React3.useRef(8 /* END_PRICE */);
+  const lastQuantityInputType = React3.useRef(0 /* NONE */);
   const formatQty = () => {
     if (base_tick < 1 || // scaled order should not format quantity, because it is total quantity
     order_type === types.OrderType.SCALED || !order_quantity) {
@@ -4923,9 +5791,9 @@ function useFocusAndBlur(props) {
 function usePriceInputContainer({
   order_type_ext
 }) {
-  const [priceInputContainerWidth, setPriceInputContainerWidth] = React2.useState(0);
-  const priceInputContainerRef = React2.useRef(null);
-  React2.useEffect(() => {
+  const [priceInputContainerWidth, setPriceInputContainerWidth] = React3.useState(0);
+  const priceInputContainerRef = React3.useRef(null);
+  React3.useEffect(() => {
     const element = priceInputContainerRef.current;
     if (!element) {
       return;
@@ -4972,18 +5840,21 @@ var useOrderEntryScript = (inputs) => {
     defaultSoundValue ?? null
   );
   const canTrade = reactApp.useCanTrade();
+  const { marginMode } = hooks.useMarginModeBySymbol(symbol);
   const {
     formattedOrder,
     setValue,
     setValues: setOrderValues,
     symbolInfo,
+    symbolLeverage,
     ...state
   } = hooks.useOrderEntry(symbol, {
     initialOrder: {
       symbol,
       order_type: localOrderType,
       position_type: types.PositionType.PARTIAL,
-      side: localOrderSide
+      side: localOrderSide,
+      margin_mode: marginMode
     }
   });
   const [tpslSwitch, setTpslSwitch] = hooks.useLocalStorage(
@@ -4992,10 +5863,10 @@ var useOrderEntryScript = (inputs) => {
   );
   const { currentLeverage } = hooks.useMarginRatio();
   const ee = hooks.useEventEmitter();
-  const triggerPriceInputRef = React2.useRef(null);
-  const priceInputRef = React2.useRef(null);
-  const activatedPriceInputRef = React2.useRef(null);
-  const lastUserActiveTimeRef = React2.useRef(Date.now());
+  const triggerPriceInputRef = React3.useRef(null);
+  const priceInputRef = React3.useRef(null);
+  const activatedPriceInputRef = React3.useRef(null);
+  const lastUserActiveTimeRef = React3.useRef(Date.now());
   const { bboStatus, bboType, setBBOType, onBBOChange, toggleBBO } = useBBOState({
     tpslSwitch,
     order_type: formattedOrder.order_type,
@@ -5019,13 +5890,13 @@ var useOrderEntryScript = (inputs) => {
     setOrderValues({
       tp_trigger_price: "",
       sl_trigger_price: "",
-      position_type: types.PositionType.FULL
+      position_type: types.PositionType.PARTIAL
     });
   };
   const enableTP_SL = () => {
     setOrderValues({
       order_type_ext: void 0,
-      position_type: types.PositionType.FULL
+      position_type: types.PositionType.PARTIAL
     });
   };
   const setOrderValue = hooks.useMemoizedFn(
@@ -5058,13 +5929,18 @@ var useOrderEntryScript = (inputs) => {
         return;
       }
       if (key === "order_type" && value === types.OrderType.SCALED) {
-        setOrderValues({
+        const data = {
           distribution_type: types.DistributionType.FLAT,
           [key]: value
-        });
+        };
+        setOrderValues(data);
         return;
       }
-      setValue(key, value, options2);
+      setValue(
+        key,
+        value,
+        options2
+      );
     }
   );
   const onTPSLSwitchChanged = (state2) => {
@@ -5075,7 +5951,7 @@ var useOrderEntryScript = (inputs) => {
       cancelTP_SL();
     }
   };
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     const updateOrderPrice = (price) => {
       setValue("order_price", price);
     };
@@ -5084,7 +5960,7 @@ var useOrderEntryScript = (inputs) => {
       ee.off("update:orderPrice", updateOrderPrice);
     };
   }, []);
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     const focusInputElement = (target) => {
       requestAnimationFrame(() => {
         target?.focus();
@@ -5148,12 +6024,12 @@ var useOrderEntryScript = (inputs) => {
       ee.off("orderbook:item:click", orderBookItemClickHandler);
     };
   }, [formattedOrder, symbolInfo]);
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     state.reset();
     state.resetMetaState();
     lastQuantityInputType.current = 0 /* NONE */;
   }, [symbol]);
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     if (formattedOrder.order_type === types.OrderType.SCALED && !formattedOrder.distribution_type) {
       setValue("distribution_type", types.DistributionType.FLAT);
     }
@@ -5182,24 +6058,24 @@ var useOrderEntryScript = (inputs) => {
     currentPosition: state.currentPosition,
     orderQuantity: Number(formattedOrder.order_quantity)
   });
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     if (formattedOrder.reduce_only) {
       setTpslSwitch(false);
     }
   }, [formattedOrder.reduce_only]);
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     if (tpslSwitch) {
       setOrderValue("reduce_only", false);
     }
   }, [tpslSwitch]);
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     lastUserActiveTimeRef.current = Date.now();
   }, [
     formattedOrder.order_price,
     formattedOrder.order_quantity,
     formattedOrder.side
   ]);
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     const lastActive = lastUserActiveTimeRef.current;
     const now = Date.now();
     const isUserActive = now - lastActive <= ORDER_ENTRY_EST_LIQ_ACTIVE_WINDOW_MS;
@@ -5209,6 +6085,9 @@ var useOrderEntryScript = (inputs) => {
       isUserActive
     });
   }, [ee, symbol, state.estLiqPrice]);
+  React3.useEffect(() => {
+    setOrderValue("margin_mode", marginMode);
+  }, [marginMode]);
   return {
     ...state,
     slPriceError: slPriceError ?? void 0,
@@ -5218,7 +6097,11 @@ var useOrderEntryScript = (inputs) => {
     formattedOrder,
     setOrderValue,
     setOrderValues,
+    // account-level leverage (for other consumers)
     currentLeverage,
+    // symbol-level leverage & margin mode for this order entry
+    symbolLeverage,
+    marginMode,
     // cancelTP_SL,
     // enableTP_SL,
     tpslSwitch,