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

package/dist/index.mjs

@@ -1,11 +1,11 @@
-import React2, { forwardRef, useState, useImperativeHandle, useEffect, memo, createContext, useMemo, useRef, useCallback, useContext, useId } from 'react';
-import { useLocalStorage, utils, usePositionStream, useEventEmitter, useDebouncedCallback, useFeeState, useRwaSymbolsInfoStore, useOrderlyContext, useMemoizedFn, ERROR_MSG_CODES, useOrderEntry, useMarginRatio, useComputedLTV, useTpslPriceChecker, useHoldingStream, useAppStore, useIndexPricesStream, useGetEstLiqPrice, useTrack, useQuery, useSymbolLeverage, useBoolean } from '@orderly.network/hooks';
+import React3, { forwardRef, useState, useImperativeHandle, useEffect, memo, createContext, useMemo, useRef, useCallback, useContext, useId } from 'react';
+import { useLocalStorage, utils, usePositionStream, useMarkets, MarketsType, useMarginModes, useMarginModeBySymbol, useEventEmitter, useDebouncedCallback, useFeeState, useRwaSymbolsInfoStore, useOrderlyContext, useMemoizedFn, ERROR_MSG_CODES, useOrderEntry, useMarginRatio, useComputedLTV, useTpslPriceChecker, useHoldingStream, useAppStore, useIndexPricesStream, useGetEstLiqPrice, useTrack, useQuery, useFeatureFlag, FlagKeys, useBoolean } from '@orderly.network/hooks';
 import { useTranslation, i18n } from '@orderly.network/i18n';
 import { useOrderEntryFormErrorMsg, useCanTrade } from '@orderly.network/react-app';
-import { EMPTY_LIST, DistributionType, TrailingCallbackType, OrderSide, OrderType, PositionType, BBOOrderType, ORDER_ENTRY_EST_LIQ_PRICE_CHANGE, OrderLevel, TrackerEventName } from '@orderly.network/types';
-import { ExclamationFillIcon, modal, Text, Tooltip, TooltipTrigger, Flex, Input, cn, inputFormatter, Box, registerSimpleDialog, SimpleDialog, Select, Grid, Checkbox, Slider, textVariants, SettingFillIcon, Badge, Divider, Button, TokenIcon, DataTable, SimpleDropdownMenu, CaretDownIcon, Switch, useScreen, toast, ThrottledButton, SimpleSheet, InfoCircleIcon, AddCircleIcon, PopoverRoot, PopoverTrigger, PopoverContent, DotStatus, EditIcon as EditIcon$1 } from '@orderly.network/ui';
+import { EMPTY_LIST, DistributionType, TrailingCallbackType, OrderSide, OrderType, MarginMode, PositionType, BBOOrderType, ORDER_ENTRY_EST_LIQ_PRICE_CHANGE, OrderLevel, TrackerEventName } from '@orderly.network/types';
+import { ExclamationFillIcon, modal, Text, Tooltip, TooltipTrigger, Flex, Input, cn, inputFormatter, Box, registerSimpleDialog, SimpleDialog, registerSimpleSheet, Select, Grid, Checkbox, Slider, textVariants, SettingFillIcon, useModal, Badge, Divider, Button, TokenIcon, DataTable, useScreen, toast, IconButton, CloseIcon, CloseCircleFillIcon, ChevronRightIcon, SimpleDropdownMenu, CaretDownIcon, Switch, ThrottledButton, SimpleSheet, InfoCircleIcon, AddCircleIcon, PopoverRoot, PopoverTrigger, PopoverContent, DotStatus, EditIcon as EditIcon$1 } from '@orderly.network/ui';
 import { TPSLPositionTypeWidget, TPSLAdvancedWidget } from '@orderly.network/ui-tpsl';
-import { Decimal, zero, todpIfNeed, getBBOType, removeTrailingZeros } from '@orderly.network/utils';
+import { Decimal, zero, formatSymbol, todpIfNeed, getBBOType, removeTrailingZeros } from '@orderly.network/utils';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { AuthGuard } from '@orderly.network/ui-connector';
 import { account } from '@orderly.network/perp';
@@ -902,7 +902,8 @@ var LTVRiskTooltipUI = (props) => {
     isThresholdLoading,
     holdingData = [],
     currentLtv,
-    onConvert
+    onConvert,
+    marginMode
   } = props;
   return /* @__PURE__ */ jsxs(
     Flex,
@@ -910,6 +911,7 @@ var LTVRiskTooltipUI = (props) => {
       gap: 1,
       className: "oui-orderEntry-ltvRiskTooltip oui-w-72 oui-max-w-72",
       direction: "column",
+      itemAlign: "start",
       children: [
         /* @__PURE__ */ jsxs(Flex, { width: "100%", justify: "between", itemAlign: "center", children: [
           /* @__PURE__ */ jsx(Text, { intensity: 36, size: "xs", children: t("common.assets") }),
@@ -988,7 +990,7 @@ var useConvertThreshold = () => {
     error
   };
 };
-var useLTVTooltipScript = () => {
+var useLTVTooltipScript = (marginMode) => {
   const { data: holdingList = [], isLoading: isHoldingLoading } = useHoldingStream();
   const {
     ltv_threshold,
@@ -1029,15 +1031,18 @@ var useLTVTooltipScript = () => {
     negative_usdc_threshold,
     isThresholdLoading,
     currentLtv,
-    onConvert
+    onConvert,
+    marginMode
   };
 };
-var LTVRiskTooltipWidget = () => {
-  const state = useLTVTooltipScript();
+var LTVRiskTooltipWidget = ({
+  marginMode
+}) => {
+  const state = useLTVTooltipScript(marginMode);
   return /* @__PURE__ */ jsx(LTVRiskTooltipUI, { ...state });
 };
 var Available = (props) => {
-  const { canTrade, currentLtv, quote, freeCollateral } = props;
+  const { canTrade, currentLtv, quote, freeCollateral, marginMode } = props;
   const { t } = useTranslation();
   const { isMobile } = useScreen();
   const showLTV = useMemo(() => {
@@ -1050,13 +1055,13 @@ var Available = (props) => {
       justify: "between",
       className: "oui-orderEntry-available",
       children: [
-        /* @__PURE__ */ jsx(Text, { className: "oui-available-label", size: "2xs", children: t("common.available") }),
+        marginMode === MarginMode.ISOLATED ? /* @__PURE__ */ jsx(Tooltip, { content: t("transfer.LTV.isolatedModeUsdcOnly"), children: /* @__PURE__ */ jsx(Text, { className: "oui-available-label oui-cursor-pointer", size: "2xs", children: t("common.available") }) }) : /* @__PURE__ */ jsx(Text, { className: "oui-available-label", size: "2xs", children: t("common.available") }),
         /* @__PURE__ */ jsxs(Flex, { itemAlign: "center", justify: "center", gap: 1, children: [
           showLTV && /* @__PURE__ */ jsx(
             Tooltip,
             {
               className: "oui-available-ltvRisk-tooltip oui-bg-base-6 oui-p-2",
-              content: /* @__PURE__ */ jsx(LTVRiskTooltipWidget, {}),
+              content: /* @__PURE__ */ jsx(LTVRiskTooltipWidget, { marginMode }),
               children: /* @__PURE__ */ jsx(
                 InfoCircleIcon,
                 {
@@ -1148,9 +1153,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 } = useTranslation();
   const [{ rows: positions }] = usePositionStream(symbol);
-  const position = positions?.[0];
+  const position = 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] = useLocalStorage("orderly_order_confirm", true);
   const renderPositionType = () => {
@@ -1844,7 +1855,8 @@ registerSimpleDialog(scaledOrderConfirmDialogId, ScaledOrderConfirmWidget, {
 });
 var OrderTypeSelect = (props) => {
   const { t } = useTranslation();
-  const options2 = useMemo(() => {
+  const { isMobile } = useScreen();
+  const allOptions = useMemo(() => {
     return [
       { label: t("orderEntry.orderType.limitOrder"), value: OrderType.LIMIT },
       { label: t("orderEntry.orderType.marketOrder"), value: OrderType.MARKET },
@@ -1866,6 +1878,23 @@ var OrderTypeSelect = (props) => {
       }
     ];
   }, [t]);
+  const advancedOptions = useMemo(() => {
+    return [
+      {
+        label: t("orderEntry.orderType.stopLimit"),
+        value: OrderType.STOP_LIMIT
+      },
+      {
+        label: t("orderEntry.orderType.stopMarket"),
+        value: OrderType.STOP_MARKET
+      },
+      { label: t("orderEntry.orderType.scaledOrder"), value: OrderType.SCALED },
+      {
+        label: t("orderEntry.orderType.trailingStop"),
+        value: OrderType.TRAILING_STOP
+      }
+    ];
+  }, [t]);
   const displayLabelMap = useMemo(() => {
     return {
       [OrderType.LIMIT]: t("orderEntry.orderType.limit"),
@@ -1876,13 +1905,94 @@ var OrderTypeSelect = (props) => {
       [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 = cn(
+      baseButtonClassName,
+      "oui-bg-base-5 oui-text-base-contrast"
+    );
+    const unselectedButtonClassName = cn(
+      baseButtonClassName,
+      "oui-bg-base-7 oui-text-base-contrast-36"
+    );
+    const handleChange = (type) => {
+      props.onChange(type);
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "oui-flex oui-w-full oui-gap-1",
+        "data-testid": "oui-testid-orderEntry-orderType-desktop",
+        children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: props.type === OrderType.LIMIT ? selectedButtonClassName : unselectedButtonClassName,
+              "aria-pressed": props.type === OrderType.LIMIT,
+              onClick: () => handleChange(OrderType.LIMIT),
+              disabled: !props.canTrade,
+              "data-testid": "oui-testid-orderEntry-orderType-limit",
+              children: /* @__PURE__ */ jsx(Text, { size: "xs", children: t("orderEntry.orderType.limit") })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: props.type === OrderType.MARKET ? selectedButtonClassName : unselectedButtonClassName,
+              "aria-pressed": props.type === OrderType.MARKET,
+              onClick: () => handleChange(OrderType.MARKET),
+              disabled: !props.canTrade,
+              "data-testid": "oui-testid-orderEntry-orderType-market",
+              children: /* @__PURE__ */ jsx(Text, { size: "xs", children: t("orderEntry.orderType.market") })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "oui-flex-1",
+              "data-testid": "oui-testid-orderEntry-orderType-advanced",
+              children: /* @__PURE__ */ jsx(
+                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 === OrderType.STOP_LIMIT || value === OrderType.STOP_MARKET || value === OrderType.SCALED || value === OrderType.TRAILING_STOP;
+                    if (!isAdvanced) {
+                      return /* @__PURE__ */ jsx(Text, { size: "xs", className: "oui-text-base-contrast-80", children: option.placeholder });
+                    }
+                    const label = displayLabelMap[value];
+                    return /* @__PURE__ */ jsx(Text, { size: "xs", className: "oui-text-base-contrast-80", children: label });
+                  },
+                  size: "md"
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
   return /* @__PURE__ */ jsx(
     Select.options,
     {
       testid: "oui-testid-orderEntry-orderType-button",
       currentValue: props.type,
       value: props.type,
-      options: options2,
+      options: allOptions,
       onValueChange: props.onChange,
       contentProps: {
         className: cn(
@@ -1893,57 +2003,823 @@ var OrderTypeSelect = (props) => {
       classNames: {
         trigger: 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__ */ jsx(Text, { size: "xs", children: option.placeholder });
         }
         const label = displayLabelMap[value];
-        return /* @__PURE__ */ jsx(
-          Text,
+        return /* @__PURE__ */ jsx(Text, { size: "xs", className: "oui-text-base-contrast-80", children: label });
+      },
+      size: "md"
+    }
+  );
+};
+var MarginModeSwitch = (props) => {
+  const { t } = 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__ */ jsxs(
+    Flex,
+    {
+      direction: "column",
+      className: 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__ */ jsxs("div", { className: cn("oui-w-full", headerPadding), children: [
+          /* @__PURE__ */ jsxs(
+            Flex,
+            {
+              itemAlign: "center",
+              justify: "between",
+              className: cn(props.isMobile && "oui-px-4"),
+              children: [
+                props.isMobile ? /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: "oui-size-[18px] oui-opacity-0",
+                    "aria-hidden": "true",
+                    tabIndex: -1
+                  }
+                ) : null,
+                /* @__PURE__ */ jsx(
+                  Text,
+                  {
+                    className: cn(
+                      "oui-font-semibold oui-tracking-[0.03em]",
+                      titleClassName
+                    ),
+                    intensity: 98,
+                    children: t("marginMode.switchMarginMode")
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  IconButton,
+                  {
+                    color: "light",
+                    className: "oui-size-[18px]",
+                    onClick: props.close,
+                    "aria-label": "Close",
+                    "data-testid": "oui-testid-marginModeSwitch-close",
+                    children: /* @__PURE__ */ jsx(CloseIcon, { size: 18, color: "white", opacity: 0.98 })
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(Divider, { className: "oui-mt-[9px] oui-w-full" })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
           {
-            size: "xs",
-            color: props.canTrade ? props.side === OrderSide.BUY ? "buy" : "sell" : void 0,
-            children: label
+            className: cn(
+              "oui-w-full",
+              contentPadding,
+              props.isMobile && "oui-px-4"
+            ),
+            children: [
+              /* @__PURE__ */ jsxs(Flex, { itemAlign: "center", gap: 2, children: [
+                /* @__PURE__ */ jsx(TokenIcon, { symbol: props.symbol, className: "oui-size-5" }),
+                /* @__PURE__ */ jsx(
+                  Text.formatted,
+                  {
+                    className: "oui-tracking-[0.03em]",
+                    rule: "symbol",
+                    formatString: "base-type",
+                    size: "base",
+                    weight: "semibold",
+                    intensity: 98,
+                    children: props.symbol
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 3, className: "oui-mt-3 oui-w-full", children: [
+                /* @__PURE__ */ jsx(
+                  OptionCard,
+                  {
+                    mode: MarginMode.CROSS,
+                    selected: props.selectedMarginMode === MarginMode.CROSS,
+                    isCurrent: props.currentMarginMode === MarginMode.CROSS,
+                    onClick: () => handleSelect(MarginMode.CROSS)
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  OptionCard,
+                  {
+                    mode: MarginMode.ISOLATED,
+                    selected: props.selectedMarginMode === MarginMode.ISOLATED,
+                    isCurrent: props.currentMarginMode === MarginMode.ISOLATED,
+                    onClick: () => handleSelect(MarginMode.ISOLATED)
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(Flex, { justify: "center", className: "oui-mt-3 oui-w-full", children: /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  className: 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__ */ jsx("span", { children: t("marginMode.marginModeSettings") }),
+                    /* @__PURE__ */ jsx(
+                      ChevronRightIcon,
+                      {
+                        size: 18,
+                        color: "white",
+                        opacity: 1,
+                        className: cn(
+                          "oui-text-base-contrast-54 oui-transition-colors",
+                          props.onOpenSettings && "group-hover:oui-text-base-contrast-80"
+                        )
+                      }
+                    )
+                  ]
+                }
+              ) }),
+              props.isMobile ? /* @__PURE__ */ jsx("div", { className: "oui-mt-4 oui-h-[34px] oui-w-full" }) : null
+            ]
           }
+        )
+      ]
+    }
+  );
+};
+var OptionCard = (props) => {
+  const { t } = useTranslation();
+  const title = props.mode === MarginMode.CROSS ? t("marginMode.crossMargin") : t("marginMode.isolatedMargin");
+  const desc = props.mode === MarginMode.CROSS ? t("marginMode.crossMarginDescription") : t("marginMode.isolatedMarginDescription");
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: 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__ */ jsxs(Flex, { direction: "column", gap: 2, itemAlign: "start", className: "oui-w-full", children: [
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              className: "oui-text-sm oui-font-semibold oui-leading-5 oui-tracking-[0.03em]",
+              intensity: 98,
+              children: title
+            }
+          ),
+          /* @__PURE__ */ jsx(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__ */ jsx(
+          "div",
+          {
+            className: 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__ */ jsx(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 } = useScreen();
+  const { t } = useTranslation();
+  const { marginMode: currentMarginMode, update } = useMarginModeBySymbol(symbol);
+  const [selectedMarginMode, setSelectedMarginMode] = useState(currentMarginMode);
+  useEffect(() => {
+    setSelectedMarginMode(currentMarginMode);
+  }, [currentMarginMode]);
+  const applyMarginMode = useCallback(
+    async (mode) => {
+      const result = await update(mode);
+      setSelectedMarginMode(mode);
+      return result;
+    },
+    [update]
+  );
+  const onSelect = useCallback(
+    (mode) => {
+      if (mode === currentMarginMode) {
+        close?.();
+        return;
+      }
+      close?.();
+      applyMarginMode(mode).then(() => {
+        toast.success(t("marginMode.updatedSuccessfully"));
+      }).catch((error) => {
+        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 } = useScreen();
+  const [markets] = useMarkets(MarketsType.ALL);
+  const items = useMemo(() => {
+    if (!markets || markets.length === 0) {
+      return [];
+    }
+    return markets.map((market) => ({
+      key: market.symbol,
+      // Original symbol: "PERP_BTC_USDC"
+      symbol: formatSymbol(market.symbol, "base-type")
+      // Formatted: "BTC-PERP"
+    }));
+  }, [markets]);
+  const [searchKeyword, setSearchKeyword] = useState("");
+  const [selectedKeys, setSelectedKeys] = useState(
+    () => /* @__PURE__ */ new Set()
+  );
+  const [isOperationLoading, setIsOperationLoading] = useState(false);
+  const {
+    marginModes,
+    isLoading: isMarginModesLoading,
+    updateMarginMode,
+    isMutating: isSettingMarginMode
+  } = useMarginModes();
+  const [isDataLoading, setIsDataLoading] = useState(true);
+  useEffect(() => {
+    if (markets.length > 0) {
+      setIsDataLoading(false);
+    }
+  }, [markets]);
+  const itemMarginModes = useMemo(() => {
+    const result = {};
+    for (const item of items) {
+      const marginMode = marginModes[item.key];
+      result[item.key] = marginMode ?? MarginMode.CROSS;
+    }
+    return result;
+  }, [items, marginModes]);
+  const filteredItems = useMemo(() => {
+    const keyword = searchKeyword.trim().toLowerCase();
+    if (!keyword) return items;
+    return items.filter((item) => item.symbol.toLowerCase().includes(keyword));
+  }, [items, searchKeyword]);
+  const visibleSelectedCount = useMemo(() => {
+    return filteredItems.filter((item) => selectedKeys.has(item.key)).length;
+  }, [filteredItems, selectedKeys]);
+  const isSelectAll = useMemo(() => {
+    return filteredItems.length > 0 && visibleSelectedCount === filteredItems.length;
+  }, [filteredItems.length, visibleSelectedCount]);
+  const isIndeterminate = useMemo(() => {
+    return visibleSelectedCount > 0 && visibleSelectedCount < filteredItems.length;
+  }, [filteredItems.length, visibleSelectedCount]);
+  const selectedMarginModeStats = useMemo(() => {
+    let crossCount = 0;
+    let isolatedCount = 0;
+    selectedKeys.forEach((key) => {
+      const mode = itemMarginModes[key] ?? MarginMode.CROSS;
+      if (mode === MarginMode.CROSS) {
+        crossCount++;
+      } else {
+        isolatedCount++;
+      }
+    });
+    return {
+      crossCount,
+      isolatedCount,
+      isCrossButtonDisabled: crossCount > 0 && isolatedCount === 0,
+      isIsolatedButtonDisabled: isolatedCount > 0 && crossCount === 0
+    };
+  }, [selectedKeys, itemMarginModes]);
+  const onSearchChange = useCallback((keyword) => {
+    setSearchKeyword(keyword);
+  }, []);
+  const onToggleItem = useCallback((key) => {
+    setSelectedKeys((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) {
+        next.delete(key);
+      } else {
+        next.add(key);
+      }
+      return next;
+    });
+  }, []);
+  const onToggleSelectAll = 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 = 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);
+        toast.success("Updated successfully");
+      } catch (error) {
+        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 } = 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 = useCallback(() => {
+    props.onSearchChange("");
+  }, [props.onSearchChange]);
+  const handleSetCross = useCallback(() => {
+    props.onSetMarginMode(MarginMode.CROSS);
+  }, [props.onSetMarginMode]);
+  const handleSetIsolated = useCallback(() => {
+    props.onSetMarginMode(MarginMode.ISOLATED);
+  }, [props.onSetMarginMode]);
+  return /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      direction: "column",
+      className: cn(
+        "oui-size-full",
+        "oui-rounded-xl oui-bg-base-8",
+        "oui-overflow-hidden"
+      ),
+      "data-testid": "oui-testid-marginModeSettings",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: cn("oui-w-full", headerPadding), children: [
+          /* @__PURE__ */ jsxs(Flex, { itemAlign: "center", justify: "between", children: [
+            props.isMobile ? /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "oui-size-[18px] oui-opacity-0",
+                "aria-hidden": "true",
+                tabIndex: -1
+              }
+            ) : null,
+            /* @__PURE__ */ jsx(
+              Text,
+              {
+                className: 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__ */ jsx(
+              IconButton,
+              {
+                color: "light",
+                className: "oui-size-[18px]",
+                onClick: props.close,
+                "aria-label": t("common.close"),
+                "data-testid": "oui-testid-marginModeSettings-close",
+                children: /* @__PURE__ */ jsx(CloseIcon, { size: 18, color: "white", opacity: 0.98 })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(Divider, { className: "oui-mt-[9px] oui-w-full" })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "oui-relative oui-z-10 oui-w-full oui-bg-base-8",
+              contentPadding,
+              "oui-py-3"
+            ),
+            children: /* @__PURE__ */ jsx(
+              Input,
+              {
+                value: props.searchKeyword,
+                onValueChange: props.onSearchChange,
+                placeholder: t("marginMode.searchPlaceholder"),
+                size: "md",
+                fullWidth: true,
+                classNames: {
+                  root: cn(
+                    "oui-outline-line",
+                    props.searchKeyword.trim() ? "oui-outline-primary-light" : ""
+                  )
+                },
+                prefix: /* @__PURE__ */ jsx("div", { className: "oui-pl-3 oui-pr-1", "aria-hidden": "true", children: /* @__PURE__ */ jsx(SearchGlyph, { className: "oui-text-base-contrast-54" }) }),
+                suffix: props.searchKeyword ? /* @__PURE__ */ jsx("div", { className: "oui-pr-2", children: /* @__PURE__ */ jsx(
+                  CloseCircleFillIcon,
+                  {
+                    size: 14,
+                    className: "oui-cursor-pointer oui-text-base-contrast-36",
+                    onClick: handleClearSearch
+                  }
+                ) }) : null,
+                autoComplete: "off"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Flex,
+          {
+            direction: "column",
+            className: cn(
+              "oui-w-full",
+              props.isMobile ? "oui-flex-1 oui-min-h-0" : ""
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                Flex,
+                {
+                  direction: "column",
+                  gap: 3,
+                  className: 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__ */ jsx(
+                    SymbolRow,
+                    {
+                      item,
+                      checked: props.selectedKeys.has(item.key),
+                      marginMode: props.itemMarginModes[item.key] ?? MarginMode.CROSS,
+                      onToggle: props.onToggleItem
+                    },
+                    item.key
+                  ))
+                }
+              ),
+              /* @__PURE__ */ jsx(Divider, { className: "oui-w-full" }),
+              /* @__PURE__ */ jsxs(
+                Flex,
+                {
+                  itemAlign: "center",
+                  justify: "between",
+                  className: cn(
+                    "oui-w-full",
+                    props.isMobile ? "oui-px-4 oui-py-3" : "oui-px-5 oui-py-3"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx(Flex, { itemAlign: "center", gap: 2, children: /* @__PURE__ */ jsxs(
+                      "label",
+                      {
+                        className: cn(
+                          "oui-flex oui-items-center oui-gap-2 oui-cursor-pointer oui-select-none"
+                        ),
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            Checkbox,
+                            {
+                              color: "white",
+                              checked: props.isSelectAll,
+                              onCheckedChange: () => {
+                                props.onToggleSelectAll();
+                              },
+                              "aria-label": t("marginMode.selectAll")
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(Text, { className: "oui-text-sm oui-font-semibold oui-text-base-contrast-80", children: t("marginMode.selectAll") })
+                        ]
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsxs(Text, { className: "oui-text-sm oui-text-base-contrast-54", children: [
+                      t("common.total"),
+                      ":",
+                      " ",
+                      /* @__PURE__ */ jsx("span", { className: cn("oui-font-semibold", totalCountTextClassName), children: selectedCount })
+                    ] })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                Flex,
+                {
+                  itemAlign: "center",
+                  justify: "end",
+                  gap: 3,
+                  className: 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__ */ jsx(Text, { className: "oui-text-sm oui-leading-8 oui-text-base-contrast-80", children: t("marginMode.setAs") }),
+                    /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        size: "md",
+                        className: 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__ */ jsx(
+                      Button,
+                      {
+                        size: "md",
+                        className: 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 } = useTranslation();
+  const handleCheckedChange = useCallback(() => {
+    props.onToggle(props.item.key);
+  }, [props]);
+  return /* @__PURE__ */ jsx(Flex, { itemAlign: "center", className: "oui-w-full", children: /* @__PURE__ */ jsxs(
+    "label",
+    {
+      className: 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__ */ jsx(
+          Checkbox,
+          {
+            color: "white",
+            checked: props.checked,
+            onCheckedChange: handleCheckedChange,
+            "aria-label": props.item.symbol
+          }
+        ),
+        /* @__PURE__ */ jsx(Text, { className: "oui-text-sm oui-font-semibold oui-text-base-contrast-80", children: props.item.symbol }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: 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 === MarginMode.ISOLATED ? t("marginMode.isolated") : t("marginMode.cross")
+          }
+        )
+      ]
+    }
+  ) });
+};
+var SearchGlyph = (props) => {
+  return /* @__PURE__ */ 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__ */ 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__ */ jsx(MarginModeSettings, { ...state, onSetMarginMode: state.onSetMarginMode });
+};
+var MarginModeSettingsSheetId = "MarginModeSettingsSheetId";
+var MarginModeSettingsDialogId = "MarginModeSettingsDialogId";
+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"
+  }
+});
+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 } = useModal();
+  const onOpenSettings = () => {
+    const modalId = currentModalId === MarginModeSwitchSheetId ? MarginModeSettingsSheetId : MarginModeSettingsDialogId;
+    modal.show(modalId, {});
+  };
+  return /* @__PURE__ */ jsx(
+    MarginModeSwitch,
+    {
+      ...state,
+      onOpenSettings: props.onOpenSettings ?? onOpenSettings
+    }
+  );
+};
+var MarginModeSwitchSheetId = "MarginModeSwitchSheetId";
+var MarginModeSwitchDialogId = "MarginModeSwitchDialogId";
+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"
+  }
+});
+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 } = useScreen();
-  const { maxLeverage } = useSymbolLeverage(symbol);
-  const curLeverage = symbolLeverage || maxLeverage;
-  const showModal = () => {
+  const { t } = useTranslation();
+  const { enabled } = useFeatureFlag(FlagKeys.IsolatedMargin);
+  const marginMode = props.marginMode;
+  const isDisabled = !!disabled;
+  const curLeverage = symbolLeverage ?? 1;
+  const showLeverageModal = () => {
+    if (isDisabled) return;
     const modalId = isMobile ? SymbolLeverageSheetId : SymbolLeverageDialogId;
     modal.show(modalId, {
       symbol,
       side,
-      curLeverage
+      curLeverage,
+      marginMode
+    });
+  };
+  const showMarginModeModal = () => {
+    if (isDisabled || !enabled) {
+      return;
+    }
+    const modalId = isMobile ? MarginModeSwitchSheetId : MarginModeSwitchDialogId;
+    modal.show(modalId, {
+      symbol
     });
   };
   return /* @__PURE__ */ jsxs(
-    Flex,
+    "div",
     {
-      justify: "center",
-      itemAlign: "center",
-      gapX: 1,
       className: 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__ */ jsx(Text, { children: "Cross" }),
-        /* @__PURE__ */ jsx(Text.numeral, { dp: 0, rm: Decimal.ROUND_DOWN, unit: "X", children: curLeverage })
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: 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__ */ jsx(Text, { children: marginMode === void 0 ? "--" : marginMode === MarginMode.ISOLATED ? t("marginMode.isolated") : t("marginMode.cross") })
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "oui-h-5 oui-w-px oui-bg-line", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: 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__ */ jsx(
+              Text.numeral,
+              {
+                dp: 0,
+                rm: Decimal.ROUND_DOWN,
+                unit: "x",
+                unitClassName: "oui-ml-0",
+                children: curLeverage
+              }
+            )
+          }
+        )
       ]
     }
   );
@@ -1952,6 +2828,27 @@ function OrderEntryHeader(props) {
   const { canTrade, side, order_type, setOrderValue } = props;
   const { t } = useTranslation();
   return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "oui-w-full", children: /* @__PURE__ */ jsx(
+      LeverageBadge,
+      {
+        symbol: props.symbol,
+        side: props.side,
+        symbolLeverage: props.symbolLeverage,
+        marginMode: props.marginMode,
+        disabled: !props.canTrade
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { className: "oui-w-full", children: /* @__PURE__ */ jsx(
+      OrderTypeSelect,
+      {
+        type: order_type,
+        side,
+        canTrade,
+        onChange: (type) => {
+          setOrderValue("order_type", type);
+        }
+      }
+    ) }),
     /* @__PURE__ */ jsxs(
       "div",
       {
@@ -1997,37 +2894,6 @@ function OrderEntryHeader(props) {
           )
         ]
       }
-    ),
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: 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__ */ jsx("div", { className: "oui-w-full oui-orderEntry-orderTypeSelect", children: /* @__PURE__ */ jsx(
-            OrderTypeSelect,
-            {
-              type: order_type,
-              side,
-              canTrade,
-              onChange: (type) => {
-                setOrderValue("order_type", type);
-              }
-            }
-          ) }),
-          /* @__PURE__ */ jsx("div", { className: "oui-w-full oui-orderEntry-leverage", children: /* @__PURE__ */ jsx(
-            LeverageBadge,
-            {
-              symbol: props.symbol,
-              side: props.side,
-              symbolLeverage: props.symbolLeverage
-            }
-          ) })
-        ]
-      }
     )
   ] });
 }
@@ -3944,7 +4810,7 @@ var PnlInputProvider = (props) => {
   return /* @__PURE__ */ jsx(PnlInputContext.Provider, { value: memoizedValue, children });
 };
 var OrderTPSL = (props) => {
-  const tpslFormRef = React2.useRef(null);
+  const tpslFormRef = React3.useRef(null);
   const { t } = useTranslation();
   const { isMobile } = useScreen();
   useEffect(() => {
@@ -4045,7 +4911,7 @@ var TPSLPriceWarning = (props) => {
     }
   );
 };
-var TPSLInputForm = React2.forwardRef((props, ref) => {
+var TPSLInputForm = React3.forwardRef((props, ref) => {
   const { getErrorMsg } = useOrderEntryFormErrorMsg(props.errors);
   const { t } = useTranslation();
   return /* @__PURE__ */ jsxs(
@@ -4569,7 +5435,8 @@ var OrderEntry = (props) => {
                   side,
                   order_type: formattedOrder.order_type,
                   setOrderValue,
-                  symbolLeverage: props.symbolLeverage
+                  symbolLeverage: props.symbolLeverage,
+                  marginMode: props.marginMode
                 }
               ),
               /* @__PURE__ */ jsx(
@@ -4578,7 +5445,8 @@ var OrderEntry = (props) => {
                   currentLtv,
                   canTrade: props.canTrade,
                   quote: symbolInfo?.quote,
-                  freeCollateral
+                  freeCollateral,
+                  marginMode: props.marginMode
                 }
               ),
               /* @__PURE__ */ jsx(
@@ -4787,7 +5655,7 @@ var OrderEntry = (props) => {
               )
             },
             contentProps: { side: "right", closeable: false },
-            children: /* @__PURE__ */ jsx(
+            children: showTPSLAdvanced && /* @__PURE__ */ jsx(
               TPSLAdvancedWidget,
               {
                 setOrderValue,
@@ -4966,18 +5834,21 @@ var useOrderEntryScript = (inputs) => {
     defaultSoundValue ?? null
   );
   const canTrade = useCanTrade();
+  const { marginMode } = useMarginModeBySymbol(symbol);
   const {
     formattedOrder,
     setValue,
     setValues: setOrderValues,
     symbolInfo,
+    symbolLeverage,
     ...state
   } = useOrderEntry(symbol, {
     initialOrder: {
       symbol,
       order_type: localOrderType,
       position_type: PositionType.PARTIAL,
-      side: localOrderSide
+      side: localOrderSide,
+      margin_mode: marginMode
     }
   });
   const [tpslSwitch, setTpslSwitch] = useLocalStorage(
@@ -5013,13 +5884,13 @@ var useOrderEntryScript = (inputs) => {
     setOrderValues({
       tp_trigger_price: "",
       sl_trigger_price: "",
-      position_type: PositionType.FULL
+      position_type: PositionType.PARTIAL
     });
   };
   const enableTP_SL = () => {
     setOrderValues({
       order_type_ext: void 0,
-      position_type: PositionType.FULL
+      position_type: PositionType.PARTIAL
     });
   };
   const setOrderValue = useMemoizedFn(
@@ -5052,13 +5923,18 @@ var useOrderEntryScript = (inputs) => {
         return;
       }
       if (key === "order_type" && value === OrderType.SCALED) {
-        setOrderValues({
+        const data = {
           distribution_type: DistributionType.FLAT,
           [key]: value
-        });
+        };
+        setOrderValues(data);
         return;
       }
-      setValue(key, value, options2);
+      setValue(
+        key,
+        value,
+        options2
+      );
     }
   );
   const onTPSLSwitchChanged = (state2) => {
@@ -5203,6 +6079,9 @@ var useOrderEntryScript = (inputs) => {
       isUserActive
     });
   }, [ee, symbol, state.estLiqPrice]);
+  useEffect(() => {
+    setOrderValue("margin_mode", marginMode);
+  }, [marginMode]);
   return {
     ...state,
     slPriceError: slPriceError ?? void 0,
@@ -5212,7 +6091,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,