@orderly.network/trading 2.8.10 → 2.8.11-alpha.0

package/dist/index.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var hooks = require('@orderly.network/hooks');
-var React11 = require('react');
+var React12 = require('react');
 var reactApp = require('@orderly.network/react-app');
 var types = require('@orderly.network/types');
 var uiOrders = require('@orderly.network/ui-orders');
@@ -26,7 +26,7 @@ var markets = require('@orderly.network/markets');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React11__default = /*#__PURE__*/_interopDefault(React11);
+var React12__default = /*#__PURE__*/_interopDefault(React12);
 var Split__default = /*#__PURE__*/_interopDefault(Split);
 
 var __defProp = Object.defineProperty;
@@ -75,7 +75,7 @@ var init_usePositionsCount = __esm({
     exports.usePositionsCount = (symbol) => {
       const { showAllSymbol } = exports.useTradingLocalStorage();
       const [data] = hooks.usePositionStream(showAllSymbol ? void 0 : symbol);
-      const count = React11.useMemo(() => {
+      const count = React12.useMemo(() => {
         return data.rows?.length;
       }, [data.rows?.length]);
       const positionCount = reactApp.useDataTap(count) ?? 0;
@@ -140,9 +140,9 @@ var init_hooks = __esm({
 exports.TradingPageContext = void 0; exports.useTradingPageContext = void 0;
 var init_tradingPageContext = __esm({
   "src/provider/tradingPageContext.tsx"() {
-    exports.TradingPageContext = React11.createContext({});
+    exports.TradingPageContext = React12.createContext({});
     exports.useTradingPageContext = () => {
-      return React11.useContext(exports.TradingPageContext);
+      return React12.useContext(exports.TradingPageContext);
     };
   }
 });
@@ -184,10 +184,10 @@ var Setting, UnPnlPriceBasisCheckBox, DecimalPrecisionCheckbox, RadioButton, Sel
 var init_setting_ui = __esm({
   "src/components/desktop/dataList/setting/setting.ui.tsx"() {
     Setting = (props) => {
-      const [open, setOpen] = React11.useState(false);
+      const [open, setOpen] = React12.useState(false);
       const { t } = i18n.useTranslation();
       const { isMobile } = ui.useScreen();
-      const SettingsContent = React11.useMemo(() => {
+      const SettingsContent = React12.useMemo(() => {
         return () => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-flex oui-flex-col oui-text-sm", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -695,19 +695,19 @@ var LazySettingWidget, LazyPositionHeaderWidget, PositionsView, LiquidationTab;
 var init_dataList_ui = __esm({
   "src/components/desktop/dataList/dataList.ui.tsx"() {
     init_dataList_script();
-    LazySettingWidget = React11__default.default.lazy(
+    LazySettingWidget = React12__default.default.lazy(
       () => Promise.resolve().then(() => (init_setting(), setting_exports)).then((mod) => {
         return { default: mod.SettingWidget };
       })
     );
-    LazyPositionHeaderWidget = React11__default.default.lazy(
+    LazyPositionHeaderWidget = React12__default.default.lazy(
       () => Promise.resolve().then(() => (init_positionHeader(), positionHeader_exports)).then((mod) => {
         return { default: mod.PositionHeaderWidget };
       })
     );
     PositionsView = (props) => {
       return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", width: "100%", height: "100%", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(React11__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx(React12__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
           LazyPositionHeaderWidget,
           {
             setPnlNotionalDecimalPrecision: props.setPnlNotionalDecimalPrecision,
@@ -890,7 +890,7 @@ var init_dataList_ui = __esm({
         {
           defaultValue: current || "Positions" /* positions */,
           variant: "contained",
-          trailing: /* @__PURE__ */ jsxRuntime.jsx(React11__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
+          trailing: /* @__PURE__ */ jsxRuntime.jsx(React12__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
             LazySettingWidget,
             {
               pnlNotionalDecimalPrecision,
@@ -909,7 +909,7 @@ var init_dataList_ui = __esm({
           },
           children: tabPanelItems.map((item) => {
             const { content, ...rest } = item;
-            return /* @__PURE__ */ React11.createElement(ui.TabPanel, { ...rest, key: `item-${rest.value}` }, content);
+            return /* @__PURE__ */ React12.createElement(ui.TabPanel, { ...rest, key: `item-${rest.value}` }, content);
           })
         }
       );
@@ -1141,8 +1141,8 @@ function useFaucetScript() {
   const [getTestUSDC, { isMutating }] = hooks.useMutation(
     `${operatorUrl}/v1/faucet/usdc`
   );
-  const [loading, setLoading] = React11.useState(false);
-  const showFaucet = React11.useMemo(() => {
+  const [loading, setLoading] = React12.useState(false);
+  const showFaucet = React12.useMemo(() => {
     if (!connectedChain || !connectedChain.id) {
       return false;
     }
@@ -1214,7 +1214,7 @@ var init_assetView_ui = __esm({
       const { state } = hooks.useAccount();
       const { wrongNetwork, disabledConnect } = reactApp.useAppContext();
       const { t } = i18n.useTranslation();
-      return React11.useMemo(() => {
+      return React12.useMemo(() => {
         const statusText = {
           wrongNetwork: {
             title: t("connector.wrongNetwork"),
@@ -1388,6 +1388,8 @@ var init_assetView_ui = __esm({
         freeCollateral,
         marginRatioVal,
         renderMMR,
+        maintenanceMargin,
+        currentLeverage,
         isConnected,
         currentLtv
       } = props;
@@ -1395,9 +1397,9 @@ var init_assetView_ui = __esm({
         "orderly_entry_asset_list_open",
         false
       );
-      const [open, setOpen] = React11.useState(optionsOpen);
+      const [open, setOpen] = React12.useState(optionsOpen);
       const { t } = i18n.useTranslation();
-      const toggleOpen = React11.useCallback(() => {
+      const toggleOpen = React12.useCallback(() => {
         setOpen((prevOpen) => !prevOpen);
         setTimeout(() => {
           setOptionsOpen(!open);
@@ -1435,7 +1437,7 @@ var init_assetView_ui = __esm({
               "oui-select-none oui-space-y-1.5 oui-overflow-hidden",
               "oui-transition-[max-height] oui-duration-150",
               "group-hover:oui-will-change-[max-height]",
-              open ? showLTV ? "oui-max-h-[94px]" : "oui-max-h-[69px]" : "oui-max-h-0"
+              open ? showLTV ? "oui-max-h-[144px]" : "oui-max-h-[119px]" : "oui-max-h-0"
             ),
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -1476,6 +1478,28 @@ var init_assetView_ui = __esm({
                   placeholder: "--%"
                 }
               ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                AssetDetail,
+                {
+                  label: t("trading.asset.maintenanceMargin"),
+                  description: t("trading.asset.maintenanceMargin.tooltip"),
+                  formula: t("trading.asset.maintenanceMargin.formula"),
+                  visible,
+                  value: maintenanceMargin,
+                  unit: "USDC"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                AssetDetail,
+                {
+                  label: t("trading.asset.currentLeverage"),
+                  description: t("trading.asset.currentLeverage.tooltip"),
+                  formula: t("trading.asset.currentLeverage.formula"),
+                  visible,
+                  value: currentLeverage,
+                  unit: "x"
+                }
+              ),
               showLTV && /* @__PURE__ */ jsxRuntime.jsx(LTVDetail, { visible, value: currentLtv })
             ]
           }
@@ -1494,6 +1518,8 @@ var init_assetView_ui = __esm({
       freeCollateral,
       marginRatioVal,
       renderMMR,
+      maintenanceMargin,
+      currentLeverage,
       isConnected,
       isMainAccount,
       hasSubAccount,
@@ -1615,6 +1641,8 @@ var init_assetView_ui = __esm({
                   freeCollateral,
                   marginRatioVal,
                   renderMMR,
+                  maintenanceMargin,
+                  currentLeverage,
                   isConnected,
                   currentLtv
                 }
@@ -1666,16 +1694,16 @@ var init_assetView_script = __esm({
       const { freeCollateral } = hooks.useCollateral({
         dp: 2
       });
-      const { marginRatio, mmr } = hooks.useMarginRatio();
+      const { marginRatio, mmr, maintenanceMargin, currentLeverage } = hooks.useMarginRatio();
       const isConnected = state.status >= types.AccountStatusEnum.Connected;
       const [{ aggregated }, positionsInfo] = hooks.usePositionStream();
-      const marginRatioVal = React11.useMemo(() => {
+      const marginRatioVal = React12.useMemo(() => {
         return Math.min(
           10,
           aggregated.notional === 0 ? positionsInfo["margin_ratio"](10) : marginRatio
         );
       }, [marginRatio, aggregated]);
-      const openDepositAndWithdraw = React11.useCallback(
+      const openDepositAndWithdraw = React12.useCallback(
         (viewName) => {
           return ui.modal.show(uiTransfer.DepositAndWithdrawWithDialogId, {
             activeTab: viewName
@@ -1683,16 +1711,16 @@ var init_assetView_script = __esm({
         },
         []
       );
-      const onDeposit = React11.useCallback(async () => {
+      const onDeposit = React12.useCallback(async () => {
         return openDepositAndWithdraw("deposit");
       }, []);
-      const onWithdraw = React11.useCallback(async () => {
+      const onWithdraw = React12.useCallback(async () => {
         return openDepositAndWithdraw("withdraw");
       }, []);
-      const onTransfer = React11.useCallback(async () => {
+      const onTransfer = React12.useCallback(async () => {
         return ui.modal.show(uiTransfer.TransferDialogId);
       }, []);
-      const onSettle = React11.useCallback(async () => {
+      const onSettle = React12.useCallback(async () => {
         return account.settle().catch((e) => {
           if (e.code === -1104) {
             ui.toast.error(t("settle.settlement.error"));
@@ -1715,7 +1743,7 @@ var init_assetView_script = __esm({
         "orderly_assets_visible",
         true
       );
-      const toggleVisible = React11.useCallback(() => {
+      const toggleVisible = React12.useCallback(() => {
         setVisible((visible2) => {
           return !visible2;
         });
@@ -1724,6 +1752,8 @@ var init_assetView_script = __esm({
       const _freeCollateral = reactApp.useDataTap(freeCollateral) ?? void 0;
       const _marginRatioVal = reactApp.useDataTap(marginRatioVal) ?? void 0;
       const _mmr = reactApp.useDataTap(mmr) ?? void 0;
+      const _maintenanceMargin = reactApp.useDataTap(maintenanceMargin) ?? void 0;
+      const _currentLeverage = reactApp.useDataTap(currentLeverage) ?? void 0;
       const _totalValue = reactApp.useDataTap(totalValue) ?? void 0;
       return {
         onDeposit,
@@ -1738,6 +1768,8 @@ var init_assetView_script = __esm({
         freeCollateral: _freeCollateral,
         marginRatioVal: _marginRatioVal,
         renderMMR: _mmr,
+        maintenanceMargin: _maintenanceMargin,
+        currentLeverage: _currentLeverage,
         isConnected,
         isMainAccount,
         hasSubAccount: !!state.subAccounts?.length,
@@ -1773,16 +1805,16 @@ var init_assetView = __esm({
 var OrderBookContext, useOrderBookContext, ORDERBOOK_COIN_TYPE_KEY, ORDERBOOK_MOBILE_COIN_TYPE_KEY, OrderBookProvider;
 var init_orderContext = __esm({
   "src/components/base/orderBook/orderContext.tsx"() {
-    OrderBookContext = React11.createContext({
+    OrderBookContext = React12.createContext({
       cellHeight: 22
     });
-    useOrderBookContext = () => React11.useContext(OrderBookContext);
+    useOrderBookContext = () => React12.useContext(OrderBookContext);
     ORDERBOOK_COIN_TYPE_KEY = "orderbook_coin_type";
     ORDERBOOK_MOBILE_COIN_TYPE_KEY = "orderbook_mobile_coin_unit";
     OrderBookProvider = (props) => {
-      const [mode, setMode] = React11.useState("quantity");
-      const [totalMode, setTotalMode] = React11.useState("quantity");
-      const memoizedValue = React11__default.default.useMemo(() => {
+      const [mode, setMode] = React12.useState("quantity");
+      const [totalMode, setTotalMode] = React12.useState("quantity");
+      const memoizedValue = React12__default.default.useMemo(() => {
         return {
           cellHeight: props.cellHeight,
           onItemClick: props.onItemClick,
@@ -1793,7 +1825,9 @@ var init_orderContext = __esm({
           onTotalModeChange: setTotalMode,
           showTotal: props.showTotal || false,
           pendingOrders: props.pendingOrders,
-          symbolInfo: props.symbolInfo
+          symbolInfo: props.symbolInfo,
+          showBuySellRatio: props.showBuySellRatio ?? true,
+          onShowBuySellRatioChange: props.onShowBuySellRatioChange
         };
       }, [
         mode,
@@ -1803,6 +1837,8 @@ var init_orderContext = __esm({
         props.pendingOrders,
         props.showTotal,
         props.symbolInfo,
+        props.showBuySellRatio,
+        props.onShowBuySellRatioChange,
         totalMode
       ]);
       return /* @__PURE__ */ jsxRuntime.jsx(OrderBookContext.Provider, { value: memoizedValue, children: props.children });
@@ -1820,7 +1856,7 @@ var init_cellBar = __esm({
   "src/components/base/orderBook/cellBar.tsx"() {
     CellBar = (props) => {
       const { direction = 1 /* RIGHT_TO_LEFT */ } = props;
-      const transform = React11.useMemo(() => {
+      const transform = React12.useMemo(() => {
         const x = Math.max(props.width, 0);
         if (direction === 0 /* LEFT_TO_RIGHT */) {
           return { transform: `translateX(${x}%)` };
@@ -1863,11 +1899,11 @@ var init_cell_desktop = __esm({
       const { base_dp, quote_dp } = symbolInfo;
       const [coinType] = hooks.useLocalStorage(ORDERBOOK_COIN_TYPE_KEY, base);
       const width = Number.isNaN(price) ? 0 : accumulated / count * 100;
-      const dp = React11.useMemo(() => {
+      const dp = React12.useMemo(() => {
         return utils.getPrecisionByNumber(depth || `${quote_dp}`);
       }, [depth, quote_dp]);
       const totalAmount = Number.isNaN(accumulated) ? "-" : accumulatedAmount?.toString();
-      const isPendingOrder = React11.useMemo(() => {
+      const isPendingOrder = React12.useMemo(() => {
         const priceStr = ui.parseNumber(price, { dp, padding: true });
         return pendingOrders.some(
           (item) => priceStr === ui.parseNumber(item, { dp, padding: true })
@@ -1996,7 +2032,7 @@ var init_listBox_desktop = __esm({
     DesktopListBox = (props) => {
       const { data, type, countQty } = props;
       const { symbolInfo, depth } = useOrderBookContext();
-      const findMaxItem = React11.useCallback(() => {
+      const findMaxItem = React12.useCallback(() => {
         if (!data?.length) {
           return null;
         }
@@ -2017,16 +2053,16 @@ var init_listBox_desktop = __esm({
           return null;
         }
       }, [data, type]);
-      const priceDp = React11.useMemo(() => {
+      const priceDp = React12.useMemo(() => {
         if (depth?.toString().includes(".")) {
           return depth.toString().split(".")[1].length;
         }
         return 0;
       }, [depth]);
-      const maxQty = React11.useMemo(() => {
+      const maxQty = React12.useMemo(() => {
         return data.reduce((a, b) => Math.max(a, b[1]), 0);
       }, [data]);
-      const [hoverIndex, setHoverIndex] = React11.useState(-1);
+      const [hoverIndex, setHoverIndex] = React12.useState(-1);
       return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-order-book-list oui-flex oui-flex-col oui-gap-px", children: data.map((item, index) => {
         return /* @__PURE__ */ jsxRuntime.jsx(
           Tip,
@@ -2062,8 +2098,8 @@ var init_listBox_desktop = __esm({
       const { base, quote, base_dp: baseDp, quote_dp: quoteDp } = symbolInfo;
       const { t } = i18n.useTranslation();
       const isHover = hoverIndex !== -1 ? type === "ask" /* ASK */ ? index >= hoverIndex : index <= hoverIndex : false;
-      const [open, setOpen] = React11.useState(false);
-      const hintInfo = React11.useMemo(() => {
+      const [open, setOpen] = React12.useState(false);
+      const hintInfo = React12.useMemo(() => {
         const info = calcHintInfo(item);
         return info.avgPrice === 0 ? calcHintInfo(findMaxItem()) : info;
       }, [item, findMaxItem]);
@@ -2161,7 +2197,7 @@ var init_asks_desktop = __esm({
     init_listBox_desktop();
     DesktopAsks = (props) => {
       const { data } = props;
-      const countQty = React11.useMemo(() => {
+      const countQty = React12.useMemo(() => {
         let max = Number.NaN;
         const len = data.length;
         let index = 0;
@@ -2189,7 +2225,7 @@ var init_bids_desktop = __esm({
     init_listBox_desktop();
     DesktopBids = (props) => {
       const { data } = props;
-      const countQty = React11.useMemo(() => {
+      const countQty = React12.useMemo(() => {
         let max = Number.NaN;
         let index = data.length - 1;
         while (Number.isNaN(max) && index > 0) {
@@ -2209,11 +2245,70 @@ var init_bids_desktop = __esm({
     };
   }
 });
+var BuySellRatioSettings, MoreIcon;
+var init_buySellRatio = __esm({
+  "src/components/desktop/orderBook/buySellRatio.tsx"() {
+    BuySellRatioSettings = ({
+      showBuySellRatio,
+      setShowBuySellRatio
+    }) => {
+      const { t } = i18n.useTranslation();
+      const [settingsOpen, setSettingsOpen] = React12.useState(false);
+      return /* @__PURE__ */ jsxRuntime.jsxs(ui.PopoverRoot, { open: settingsOpen, onOpenChange: setSettingsOpen, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            className: "oui-cursor-pointer oui-text-base-contrast-54 hover:oui-text-base-contrast oui-transition-colors",
+            "aria-label": t("trading.orderBook.settings"),
+            children: /* @__PURE__ */ jsxRuntime.jsx(MoreIcon, {})
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.PopoverContent, { align: "end", sideOffset: 8, className: "oui-w-[200px] ", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { itemAlign: "center", gap: 2, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Checkbox,
+            {
+              id: "show-buy-sell-ratio",
+              checked: showBuySellRatio,
+              onCheckedChange: (checked) => {
+                setShowBuySellRatio?.(checked === true);
+                setSettingsOpen(false);
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "label",
+            {
+              htmlFor: "show-buy-sell-ratio",
+              className: "oui-cursor-pointer oui-text-xs oui-text-base-contrast-54",
+              children: t("trading.orderBook.showBuySellRatio")
+            }
+          )
+        ] }) })
+      ] });
+    };
+    MoreIcon = (props) => /* @__PURE__ */ jsxRuntime.jsxs(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "16",
+        height: "16",
+        viewBox: "0 0 16 16",
+        fill: "currentColor",
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8.00521 6.66797C8.74161 6.66797 9.33854 7.26464 9.33854 8.0013C9.33854 8.73797 8.74161 9.33464 8.00521 9.33464C7.26881 9.33464 6.67188 8.73797 6.67188 8.0013C6.67188 7.26464 7.26881 6.66797 8.00521 6.66797Z" }),
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3.33333 6.66797C4.06973 6.66797 4.66667 7.26464 4.66667 8.0013C4.66667 8.73797 4.06973 9.33464 3.33333 9.33464C2.59693 9.33464 2 8.73797 2 8.0013C2 7.26464 2.59693 6.66797 3.33333 6.66797Z" }),
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12.6666 6.66797C13.403 6.66797 14 7.26464 14 8.0013C14 8.73797 13.403 9.33464 12.6666 9.33464C11.9302 9.33464 11.3333 8.73797 11.3333 8.0013C11.3333 7.26464 11.9302 6.66797 12.6666 6.66797Z" })
+        ]
+      }
+    );
+  }
+});
 var DesktopDepthSelect;
 var init_depthSelect_desktop = __esm({
   "src/components/desktop/orderBook/depthSelect.desktop.tsx"() {
     DesktopDepthSelect = (props) => {
-      const options = React11.useMemo(() => {
+      const options = React12.useMemo(() => {
         return props.depths.map((d) => ({
           value: d,
           label: `${d}`
@@ -2244,7 +2339,7 @@ var init_header_desktop = __esm({
         ORDERBOOK_COIN_TYPE_KEY,
         base
       );
-      const optimizedItem = React11.useMemo(() => {
+      const optimizedItem = React12.useMemo(() => {
         return utils.optimizeSymbolDisplay(item);
       }, [item]);
       return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -2289,13 +2384,13 @@ var init_header_desktop = __esm({
       const { base, quote = "USDC" } = props;
       const { showTotal } = useOrderBookContext();
       const { t } = i18n.useTranslation();
-      const [popoverOpen, setOpen] = React11__default.default.useState(false);
+      const [popoverOpen, setOpen] = React12__default.default.useState(false);
       const [coinType] = hooks.useLocalStorage(ORDERBOOK_COIN_TYPE_KEY, base);
       const TriggerIcon = popoverOpen ? ui.CaretUpIcon : ui.CaretDownIcon;
-      const optimizedBase = React11.useMemo(() => {
+      const optimizedBase = React12.useMemo(() => {
         return utils.optimizeSymbolDisplay(base);
       }, [base]);
-      const optimizedCoinType = React11.useMemo(() => {
+      const optimizedCoinType = React12.useMemo(() => {
         return utils.optimizeSymbolDisplay(coinType);
       }, [coinType]);
       return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { pl: 3, justify: "between", className: "oui-py-[6px]", children: [
@@ -2473,7 +2568,7 @@ var init_markPrice = __esm({
     };
     MobileLayout2 = (props) => {
       const { quote_dp, className, iconSize = 18 } = props;
-      const [open, setOpen] = React11.useState(false);
+      const [open, setOpen] = React12.useState(false);
       const { t } = i18n.useTranslation();
       return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
@@ -2586,7 +2681,7 @@ var init_markPrice_desktop = __esm({
     Spread = (props) => {
       const { asks, bids } = props;
       const { t } = i18n.useTranslation();
-      const spread = React11.useMemo(() => {
+      const spread = React12.useMemo(() => {
         if (bids.length === 0 && asks.length === 0) {
           return 0;
         }
@@ -2621,26 +2716,39 @@ var init_markPrice_desktop = __esm({
 var DesktopOrderBook;
 var init_index_desktop = __esm({
   "src/components/desktop/orderBook/index.desktop.tsx"() {
+    init_orderBook2();
     init_orderContext();
     init_asks_desktop();
     init_bids_desktop();
+    init_buySellRatio();
     init_depthSelect_desktop();
     init_header_desktop();
     init_markPrice_desktop();
     DesktopOrderBook = (props) => {
-      const { lastPrice, markPrice, quote, base, isLoading, onDepthChange } = props;
-      const divRef = React11.useRef(null);
-      const [showTotal, setShowTotal] = React11.useState(false);
+      const {
+        lastPrice,
+        markPrice,
+        quote,
+        base,
+        isLoading,
+        onDepthChange,
+        showBuySellRatio = true,
+        setShowBuySellRatio,
+        buySellRatio
+      } = props;
+      const { t } = i18n.useTranslation();
+      const divRef = React12.useRef(null);
+      const [showTotal, setShowTotal] = React12.useState(false);
       const [coinType, setCoinType] = hooks.useLocalStorage(
         ORDERBOOK_COIN_TYPE_KEY,
         base
       );
-      React11.useEffect(() => {
+      React12.useEffect(() => {
         if (coinType !== quote && base) {
           setCoinType(base);
         }
       }, [base, quote]);
-      React11.useEffect(() => {
+      React12.useEffect(() => {
         const resizeObserver = new ResizeObserver((entries) => {
           for (const entry of entries) {
             const { inlineSize: width } = entry.borderBoxSize[0];
@@ -2666,23 +2774,37 @@ var init_index_desktop = __esm({
           showTotal,
           pendingOrders: props.pendingOrders || types.EMPTY_LIST,
           symbolInfo: props.symbolInfo,
+          showBuySellRatio,
+          onShowBuySellRatioChange: setShowBuySellRatio,
           children: /* @__PURE__ */ jsxRuntime.jsxs(
             ui.Grid,
             {
               cols: 1,
-              rows: 5,
+              rows: showBuySellRatio ? 6 : 5,
               id: "oui-orderbook-desktop",
               ref: divRef,
-              className: "oui-relative oui-size-full oui-grid-rows-[auto,auto,1fr,auto,1fr]",
+              className: ui.cn(
+                "oui-relative oui-size-full",
+                showBuySellRatio ? "oui-grid-rows-[auto,auto,1fr,auto,1fr,auto]" : "oui-grid-rows-[auto,auto,1fr,auto,1fr]"
+              ),
               children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  DesktopDepthSelect,
-                  {
-                    depths: props.depths,
-                    value: props.activeDepth,
-                    onChange: onDepthChange
-                  }
-                ),
+                /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "between", itemAlign: "center", className: "oui-pr-3", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    DesktopDepthSelect,
+                    {
+                      depths: props.depths,
+                      value: props.activeDepth,
+                      onChange: onDepthChange
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    BuySellRatioSettings,
+                    {
+                      showBuySellRatio,
+                      setShowBuySellRatio
+                    }
+                  )
+                ] }),
                 /* @__PURE__ */ jsxRuntime.jsx(DesktopHeader, { quote, base }),
                 /* @__PURE__ */ jsxRuntime.jsx(DesktopAsks, { data: [...props.asks] }),
                 /* @__PURE__ */ jsxRuntime.jsx(
@@ -2696,6 +2818,13 @@ var init_index_desktop = __esm({
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsx(DesktopBids, { data: [...props.bids] }),
+                showBuySellRatio && /* @__PURE__ */ jsxRuntime.jsx(
+                  exports.BuySellRatioBar,
+                  {
+                    ratio: buySellRatio || null,
+                    className: "oui-text-2xs oui-px-3 oui-h-[38px]"
+                  }
+                ),
                 isLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-bg-bg-8/70 oui-absolute oui-inset-0 oui-z-10 oui-flex oui-items-center oui-justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Spinner, {}) })
               ]
             }
@@ -2741,49 +2870,48 @@ var init_fundingRateModal_script = __esm({
       const { last_funding_rate, est_funding_rate } = hooks.useFundingRateBySymbol(options.symbol) ?? {};
       const [{ aggregated, rows }] = hooks.usePositionStream(options.symbol);
       const { notional } = aggregated ?? {};
-      const fundingPeriod = React11.useMemo(() => {
+      const fundingPeriod = React12.useMemo(() => {
         if (!data || isLoading) {
           return "-";
         }
         return `${data.funding_period}h`;
       }, [data, isLoading]);
-      const capFunding = React11.useMemo(() => {
+      const capFunding = React12.useMemo(() => {
         if (!data || isLoading) {
           return "-";
         }
         return `${new utils.Decimal(data.cap_funding).mul(100).toNumber()}%`;
       }, [data, isLoading]);
-      const floorFunding = React11.useMemo(() => {
+      const floorFunding = React12.useMemo(() => {
         if (!data || isLoading) {
           return "-";
         }
         return `${new utils.Decimal(data.floor_funding).mul(100).toNumber()}%`;
       }, [data, isLoading]);
-      const lastFundingRate = React11.useMemo(() => {
+      const lastFundingRate = React12.useMemo(() => {
         if (!last_funding_rate) {
           return void 0;
         }
         return `${new utils.Decimal(last_funding_rate).mul(100).toNumber()}%`;
       }, [last_funding_rate]);
-      const estFundingRate = React11.useMemo(() => {
+      const estFundingRate = React12.useMemo(() => {
         if (!est_funding_rate) {
           return void 0;
         }
         return `${new utils.Decimal(est_funding_rate).mul(100).toNumber()}%`;
       }, [est_funding_rate]);
-      const estFundingFee = React11.useMemo(() => {
+      const estFundingFee = React12.useMemo(() => {
         if (!est_funding_rate || !notional || rows.length === 0) {
           return "--";
         }
         return `${new utils.Decimal(est_funding_rate).mul(notional).todp(4).toNumber()}`;
       }, [est_funding_rate, notional, rows]);
       const calculateAnnualizedRate = (rate, intervalHours) => {
-        if (!rate || !intervalHours)
-          return void 0;
+        if (!rate || !intervalHours) return void 0;
         const annualizedRate = new utils.Decimal(rate).mul(24).div(intervalHours).mul(365);
         return annualizedRate.todp(2, utils.Decimal.ROUND_DOWN).toNumber();
       };
-      const lastFundingRateAnnualized = React11.useMemo(() => {
+      const lastFundingRateAnnualized = React12.useMemo(() => {
         if (!last_funding_rate || !data?.funding_period) {
           return void 0;
         }
@@ -2791,7 +2919,7 @@ var init_fundingRateModal_script = __esm({
         const annualized = calculateAnnualizedRate(rate, data.funding_period);
         return annualized ? `${annualized}%` : void 0;
       }, [last_funding_rate, data?.funding_period]);
-      const estFundingRateAnnualized = React11.useMemo(() => {
+      const estFundingRateAnnualized = React12.useMemo(() => {
         if (!est_funding_rate || !data?.funding_period) {
           return void 0;
         }
@@ -2902,7 +3030,7 @@ var init_fundingRate_script = __esm({
     init_fundingRateModal_widget();
     exports.useFundingRateScript = (symbol) => {
       const data = hooks.useFundingRate(symbol);
-      const onClick = React11.useCallback(() => {
+      const onClick = React12.useCallback(() => {
         ui.modal.show(exports.FundingRateSheetId, { symbol });
       }, [symbol]);
       return {
@@ -2941,14 +3069,14 @@ var init_cell = __esm({
     OrderBookCell = (props) => {
       const { accumulated, count, quantity, price, type, accumulatedAmount } = props;
       const width = accumulated / count * 100;
-      const { cellHeight, onItemClick, depth, symbolInfo } = React11.useContext(OrderBookContext);
+      const { cellHeight, onItemClick, depth, symbolInfo } = React12.useContext(OrderBookContext);
       const { base_dp, quote_dp, base, quote } = symbolInfo;
       const [coinUnit, setCoinUnit] = hooks.useLocalStorage(
         ORDERBOOK_MOBILE_COIN_TYPE_KEY,
         "qty"
       );
       const totalAmount = Number.isNaN(accumulated) ? "-" : accumulatedAmount?.toString();
-      const dp = React11.useMemo(() => {
+      const dp = React12.useMemo(() => {
         return utils.getPrecisionByNumber(depth || `${quote_dp}`);
       }, [depth, quote_dp]);
       const renderCell = () => {
@@ -3035,7 +3163,7 @@ var init_asks = __esm({
     init_listBox();
     Asks = (props) => {
       const { data } = props;
-      const countQty = React11.useMemo(() => {
+      const countQty = React12.useMemo(() => {
         const len = data.length;
         let max = Number.NaN;
         let index = 0;
@@ -3056,7 +3184,7 @@ var init_bids = __esm({
     init_listBox();
     Bids = (props) => {
       const { data } = props;
-      const countQty = React11.useMemo(() => {
+      const countQty = React12.useMemo(() => {
         let max = Number.NaN;
         let index = data.length - 1;
         while (Number.isNaN(max) && index > 0) {
@@ -3073,7 +3201,7 @@ var DepthSelect;
 var init_depthSelect = __esm({
   "src/components/mobile/orderBook/depthSelect.tsx"() {
     DepthSelect = (props) => {
-      const options = React11.useMemo(() => {
+      const options = React12.useMemo(() => {
         return props.depth.map((d) => ({
           value: d,
           label: `${d}`
@@ -3106,7 +3234,7 @@ var init_header = __esm({
         ORDERBOOK_MOBILE_COIN_TYPE_KEY,
         "qty"
       );
-      const options = React11.useMemo(() => {
+      const options = React12.useMemo(() => {
         return [
           {
             value: "qty",
@@ -3217,7 +3345,9 @@ var init_markPrice2 = __esm({
 var OrderBook;
 var init_orderBook = __esm({
   "src/components/mobile/orderBook/index.tsx"() {
+    init_orderBook2();
     init_orderContext();
+    init_buySellRatio();
     init_fundingRate();
     init_asks();
     init_bids();
@@ -3225,7 +3355,19 @@ var init_orderBook = __esm({
     init_header();
     init_markPrice2();
     OrderBook = (props) => {
-      const { lastPrice, markPrice, quote, base, isLoading, onDepthChange } = props;
+      const {
+        lastPrice,
+        markPrice,
+        quote,
+        base,
+        isLoading,
+        onDepthChange,
+        showBuySellRatio = true,
+        setShowBuySellRatio,
+        buySellRatio
+      } = props;
+      const { t } = i18n.useTranslation();
+      const [settingsOpen, setSettingsOpen] = React12.useState(false);
       const symbol = `PERP_${props.symbolInfo.base}_${props.symbolInfo.quote}`;
       const [coinUnit, setCoinUnit] = hooks.useLocalStorage(
         ORDERBOOK_MOBILE_COIN_TYPE_KEY,
@@ -3240,6 +3382,8 @@ var init_orderBook = __esm({
           pendingOrders: types.EMPTY_LIST,
           showTotal: false,
           symbolInfo: props.symbolInfo,
+          showBuySellRatio,
+          onShowBuySellRatioChange: setShowBuySellRatio,
           children: /* @__PURE__ */ jsxRuntime.jsxs(
             ui.Flex,
             {
@@ -3250,7 +3394,16 @@ var init_orderBook = __esm({
               justify: "start",
               itemAlign: "start",
               children: [
-                /* @__PURE__ */ jsxRuntime.jsx(exports.FundingRateWidget, { symbol }),
+                /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "between", itemAlign: "center", className: "oui-w-full", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(exports.FundingRateWidget, { symbol }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    BuySellRatioSettings,
+                    {
+                      showBuySellRatio,
+                      setShowBuySellRatio
+                    }
+                  )
+                ] }),
                 /* @__PURE__ */ jsxRuntime.jsx(Header2, { quote, base }),
                 /* @__PURE__ */ jsxRuntime.jsx(Asks, { data: props.asks }),
                 /* @__PURE__ */ jsxRuntime.jsx(MarkPrice, { lastPrice, markPrice }),
@@ -3263,6 +3416,13 @@ var init_orderBook = __esm({
                     onChange: onDepthChange
                   }
                 ),
+                showBuySellRatio && /* @__PURE__ */ jsxRuntime.jsx(
+                  exports.BuySellRatioBar,
+                  {
+                    ratio: buySellRatio || null,
+                    className: "oui-px-0 oui-text-[8px] oui-h-6 oui-mt-2"
+                  }
+                ),
                 isLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-bg-base-800/70 oui-absolute oui-inset-0 oui-z-10 oui-flex oui-h-full oui-min-h-[420px] oui-items-center oui-justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Spinner, {}) })
               ]
             }
@@ -3295,7 +3455,10 @@ var init_orderBook_ui = __esm({
           cellHeight: props.cellHeight,
           onDepthChange: props.onDepthChange,
           className: props.className,
-          symbolInfo: props.symbolInfo
+          symbolInfo: props.symbolInfo,
+          showBuySellRatio: props.showBuySellRatio,
+          setShowBuySellRatio: props.setShowBuySellRatio,
+          buySellRatio: props.buySellRatio
         }
       ) : /* @__PURE__ */ jsxRuntime.jsx(
         DesktopOrderBook,
@@ -3315,7 +3478,10 @@ var init_orderBook_ui = __esm({
           onDepthChange: props.onDepthChange,
           className: props.className,
           pendingOrders: props.pendingOrders,
-          symbolInfo: props.symbolInfo
+          symbolInfo: props.symbolInfo,
+          showBuySellRatio: props.showBuySellRatio,
+          setShowBuySellRatio: props.setShowBuySellRatio,
+          buySellRatio: props.buySellRatio
         }
       ) });
     };
@@ -3337,27 +3503,36 @@ var init_utils = __esm({
     };
   }
 });
-var DEFAULT_CELL_HEIGHT, SPACE; exports.useOrderBookScript = void 0; var usePendingOrderStream;
+var DEFAULT_CELL_HEIGHT, SPACE, BUY_SELL_RATIO_BAR_HEIGHT_MOBILE, BUY_SELL_RATIO_BAR_HEIGHT_DESKTOP, ORDERBOOK_SHOW_BUY_SELL_RATIO_KEY; exports.useOrderBookScript = void 0; var usePendingOrderStream;
 var init_orderBook_script = __esm({
   "src/components/base/orderBook/orderBook.script.tsx"() {
     init_utils();
     DEFAULT_CELL_HEIGHT = 20;
     SPACE = 104;
+    BUY_SELL_RATIO_BAR_HEIGHT_MOBILE = 28;
+    BUY_SELL_RATIO_BAR_HEIGHT_DESKTOP = 38;
+    ORDERBOOK_SHOW_BUY_SELL_RATIO_KEY = "orderbook_show_buy_sell_ratio";
     exports.useOrderBookScript = (props) => {
       const { symbol, height } = props;
       const symbolInfo = hooks.useSymbolsInfo()[symbol];
-      const [cellHeight, setCellHeight] = React11.useState(DEFAULT_CELL_HEIGHT);
-      const [level, setLevel] = React11.useState(10);
+      const [cellHeight, setCellHeight] = React12.useState(DEFAULT_CELL_HEIGHT);
+      const [level, setLevel] = React12.useState(10);
       const { base, quote, quote_dp } = getBasicSymbolInfo(symbolInfo);
       const [data, { onDepthChange, isLoading, onItemClick, depth, allDepths }] = hooks.useOrderbookStream(symbol, void 0, { level });
       const pendingOrders = usePendingOrderStream(symbol);
-      React11.useEffect(() => {
+      const { isMobile } = ui.useScreen();
+      const [showBuySellRatio, setShowBuySellRatio] = hooks.useLocalStorage(
+        ORDERBOOK_SHOW_BUY_SELL_RATIO_KEY,
+        true
+      );
+      React12.useEffect(() => {
         if (height) {
+          const availableSpace = SPACE + (showBuySellRatio ? isMobile ? BUY_SELL_RATIO_BAR_HEIGHT_MOBILE : BUY_SELL_RATIO_BAR_HEIGHT_DESKTOP : 0);
           const level2 = Math.floor(
-            (height - SPACE) / ((DEFAULT_CELL_HEIGHT + 1) * 2)
+            (height - availableSpace) / ((DEFAULT_CELL_HEIGHT + 1) * 2)
           );
           const cellsHeight = (DEFAULT_CELL_HEIGHT + 1) * 2 * level2;
-          const restSpace = height - SPACE - cellsHeight;
+          const restSpace = height - availableSpace - cellsHeight;
           if (restSpace > 10) {
             setCellHeight(DEFAULT_CELL_HEIGHT + restSpace / level2 / 2);
           } else {
@@ -3365,17 +3540,48 @@ var init_orderBook_script = __esm({
           }
           setLevel(level2);
         }
-      }, [height]);
-      const selDepth = React11.useMemo(() => {
+      }, [height, showBuySellRatio]);
+      const selDepth = React12.useMemo(() => {
         if (typeof depth === "undefined" || typeof quote_dp === "undefined") {
           return void 0;
         }
         return utils.removeTrailingZeros(depth);
       }, [depth, quote_dp, symbol]);
-      const depths = React11.useMemo(() => {
+      const depths = React12.useMemo(() => {
         return allDepths?.map((e) => utils.removeTrailingZeros(e)) || [];
       }, [allDepths, quote_dp]);
-      const { isMobile } = ui.useScreen();
+      const buySellRatio = React12.useMemo(() => {
+        if (!data?.asks || !data?.bids || level === void 0) {
+          return null;
+        }
+        const isValidNumber = (value) => {
+          return typeof value === "number" && !Number.isNaN(value) && Number.isFinite(value) && value >= 0;
+        };
+        const visibleAsks = data.asks.slice(0, level);
+        const visibleBids = data.bids.slice(-level);
+        if (visibleAsks.length > 0 && visibleBids.length > 0) {
+          const firstAsk = visibleAsks.find(
+            (ask) => Array.isArray(ask) && ask.length === 4 && ask[3] !== void 0 && ask[3] !== null && isValidNumber(ask[3])
+          );
+          const lastBid = [...visibleBids].reverse().find(
+            (bid) => Array.isArray(bid) && bid.length === 4 && bid[3] !== void 0 && bid[3] !== null && isValidNumber(bid[3])
+          );
+          if (firstAsk && lastBid) {
+            const askAmount = new utils.Decimal(firstAsk[3]);
+            const bidAmount = new utils.Decimal(lastBid[3]);
+            const totalAmount = askAmount.add(bidAmount);
+            const buyPercentage = bidAmount.div(totalAmount).mul(100).toNumber();
+            const sellPercentage = 100 - buyPercentage;
+            return {
+              buyPercentage,
+              sellPercentage,
+              buyAmount: askAmount.toNumber(),
+              sellAmount: bidAmount.toNumber()
+            };
+          }
+        }
+        return null;
+      }, [data?.asks, data?.bids, level]);
       return {
         level,
         asks: data?.asks,
@@ -3392,7 +3598,10 @@ var init_orderBook_script = __esm({
         onDepthChange,
         pendingOrders,
         symbolInfo: getBasicSymbolInfo(symbolInfo),
-        isMobile
+        isMobile,
+        showBuySellRatio,
+        setShowBuySellRatio,
+        buySellRatio
       };
     };
     usePendingOrderStream = (symbol) => {
@@ -3400,7 +3609,7 @@ var init_orderBook_script = __esm({
         status: types.OrderStatus.INCOMPLETE,
         symbol
       });
-      const pendingOrders = React11.useMemo(() => {
+      const pendingOrders = React12.useMemo(() => {
         const info = data?.filter((item) => item.symbol === symbol).reduce((a, b) => {
           const price = b.price || b.trigger_price || 0;
           return [...a, price];
@@ -3423,10 +3632,91 @@ var init_orderBook_widget = __esm({
     };
   }
 });
+exports.BuySellRatioBar = void 0;
+var init_buySellRatioBar = __esm({
+  "src/components/base/orderBook/buySellRatioBar.tsx"() {
+    exports.BuySellRatioBar = (props) => {
+      const { ratio, className } = props;
+      const { buyPercentage, sellPercentage } = React12.useMemo(() => {
+        if (!ratio) {
+          return { buyPercentage: 50, sellPercentage: 50 };
+        }
+        const isValidNumber = (value) => {
+          return typeof value === "number" && !Number.isNaN(value) && Number.isFinite(value) && value >= 0 && value <= 100;
+        };
+        const buyPct = isValidNumber(ratio.buyPercentage) ? ratio.buyPercentage : 50;
+        const buyPctRounded = new utils.Decimal(buyPct).toDecimalPlaces(1, utils.Decimal.ROUND_HALF_UP).toNumber();
+        const sellPctRounded = new utils.Decimal(100).sub(buyPctRounded).toDecimalPlaces(1, utils.Decimal.ROUND_HALF_UP).toNumber();
+        return {
+          buyPercentage: buyPctRounded,
+          sellPercentage: sellPctRounded
+        };
+      }, [ratio]);
+      return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { className: ui.cn("oui-w-full", className), gap: 1, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { itemAlign: "center", gap: 1, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { intensity: 80, children: "B" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { color: "success", children: [
+            buyPercentage.toFixed(1),
+            "%"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              flex: 1,
+              height: "4px",
+              position: "relative",
+              borderRadius: "2px",
+              overflow: "hidden",
+              backgroundColor: "rgb(var(--oui-line-4))"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "oui-bg-trade-profit oui-mr-[2px] oui-rounded-sm",
+                  style: {
+                    position: "absolute",
+                    left: 0,
+                    top: 0,
+                    width: `${buyPercentage}%`,
+                    height: "100%"
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "oui-bg-trade-loss oui-ml-[2px] oui-rounded-sm",
+                  style: {
+                    position: "absolute",
+                    left: `${buyPercentage}%`,
+                    top: 0,
+                    width: `${sellPercentage}%`,
+                    height: "100%"
+                  }
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { itemAlign: "center", gap: 1, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { color: "danger", children: [
+            sellPercentage.toFixed(1),
+            "%"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { intensity: 80, children: "S" })
+        ] })
+      ] });
+    };
+  }
+});
 
 // src/components/base/orderBook/index.ts
 var orderBook_exports = {};
 __export(orderBook_exports, {
+  BuySellRatioBar: () => exports.BuySellRatioBar,
   OrderBook: () => exports.OrderBook,
   OrderBookWidget: () => exports.OrderBookWidget,
   useOrderBookScript: () => exports.useOrderBookScript
@@ -3436,6 +3726,7 @@ var init_orderBook2 = __esm({
     init_orderBook_ui();
     init_orderBook_widget();
     init_orderBook_script();
+    init_buySellRatioBar();
   }
 });
 exports.RiskRate = void 0;
@@ -3524,7 +3815,7 @@ var init_riskRate_script = __esm({
       const isConnected = state.status >= types.AccountStatusEnum.EnableTrading || state.status === types.AccountStatusEnum.EnableTradingWithoutConnected;
       const { marginRatio, currentLeverage, mmr } = hooks.useMarginRatio();
       const { curLeverage } = hooks.useLeverage();
-      const riskRate = React11.useMemo(() => {
+      const riskRate = React12.useMemo(() => {
         if (!isConnected || marginRatio === null || mmr === null) {
           return "--";
         }
@@ -3535,7 +3826,7 @@ var init_riskRate_script = __esm({
         return `${calculatedRiskRate.toString().replace(/\.?0+$/, "")}%`;
       }, [isConnected, marginRatio, mmr]);
       const riskRateNumber = riskRate === "--" ? null : parseFloat(riskRate);
-      const riskRateColor = React11.useMemo(() => {
+      const riskRateColor = React12.useMemo(() => {
         return getRiskRateColor(riskRateNumber);
       }, [riskRateNumber]);
       const _curLeverage = reactApp.useDataTap(currentLeverage);
@@ -3578,14 +3869,14 @@ var init_riskRate = __esm({
 var LazyLastTradesWidget, LazyOrderBookWidget, TwoColLayout, TabLayout, Title2; exports.OrderBookAndTrades = void 0;
 var init_orderBookAndTrades_ui = __esm({
   "src/components/desktop/orderBookAndTrades/orderBookAndTrades.ui.tsx"() {
-    LazyLastTradesWidget = React11__default.default.lazy(
+    LazyLastTradesWidget = React12__default.default.lazy(
       () => Promise.resolve().then(() => (init_lastTrades(), lastTrades_exports)).then((mod) => {
         return {
           default: mod.LastTradesWidget
         };
       })
     );
-    LazyOrderBookWidget = React11__default.default.lazy(
+    LazyOrderBookWidget = React12__default.default.lazy(
       () => Promise.resolve().then(() => (init_orderBook2(), orderBook_exports)).then((mod) => {
         return {
           default: mod.OrderBookWidget
@@ -3622,7 +3913,7 @@ var init_orderBookAndTrades_ui = __esm({
                       className: "oui-pl-3 oui-text-sm"
                     }
                   ),
-                  /* @__PURE__ */ jsxRuntime.jsx(React11__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
+                  /* @__PURE__ */ jsxRuntime.jsx(React12__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
                     LazyOrderBookWidget,
                     {
                       symbol: props.symbol,
@@ -3648,7 +3939,7 @@ var init_orderBookAndTrades_ui = __esm({
                       className: "oui-text-sm oui-px-3"
                     }
                   ),
-                  /* @__PURE__ */ jsxRuntime.jsx(React11__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
+                  /* @__PURE__ */ jsxRuntime.jsx(React12__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
                     LazyLastTradesWidget,
                     {
                       symbol: props.symbol,
@@ -3690,14 +3981,14 @@ var init_orderBookAndTrades_ui = __esm({
               },
               size: "lg",
               children: [
-                /* @__PURE__ */ jsxRuntime.jsx(ui.TabPanel, { value: "orderBook", title: t("trading.orderBook"), children: /* @__PURE__ */ jsxRuntime.jsx(React11__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
+                /* @__PURE__ */ jsxRuntime.jsx(ui.TabPanel, { value: "orderBook", title: t("trading.orderBook"), children: /* @__PURE__ */ jsxRuntime.jsx(React12__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
                   LazyOrderBookWidget,
                   {
                     symbol: props.symbol,
                     height: props.containerSize ? props.containerSize.height - 29 - 18 : void 0
                   }
                 ) }) }),
-                /* @__PURE__ */ jsxRuntime.jsx(ui.TabPanel, { value: "lastTrades", title: t("trading.lastTrades"), children: /* @__PURE__ */ jsxRuntime.jsx(React11__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
+                /* @__PURE__ */ jsxRuntime.jsx(ui.TabPanel, { value: "lastTrades", title: t("trading.lastTrades"), children: /* @__PURE__ */ jsxRuntime.jsx(React12__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
                   LazyLastTradesWidget,
                   {
                     symbol: props.symbol,
@@ -3738,10 +4029,10 @@ exports.useOrderBookAndTradesScript = void 0;
 var init_orderBookAndTrades_script = __esm({
   "src/components/desktop/orderBookAndTrades/orderBookAndTrades.script.tsx"() {
     exports.useOrderBookAndTradesScript = (symbol) => {
-      const [containerSize, setContainerSize] = React11.useState(void 0);
-      const [tab, setTab] = React11.useState("orderBook");
-      const containerRef = React11.useRef(null);
-      React11.useEffect(() => {
+      const [containerSize, setContainerSize] = React12.useState(void 0);
+      const [tab, setTab] = React12.useState("orderBook");
+      const containerRef = React12.useRef(null);
+      React12.useEffect(() => {
         const resizeObserver = new ResizeObserver((entries) => {
           for (const entry of entries) {
             const { width, height } = entry.contentRect;
@@ -3838,8 +4129,8 @@ var init_switchLayout = __esm({
       ) });
     };
     SwitchLayoutDropDown = (props) => {
-      const [open, setOpen] = React11.useState(false);
-      const [hoveredMarket, setHoveredMarket] = React11.useState(null);
+      const [open, setOpen] = React12.useState(false);
+      const [hoveredMarket, setHoveredMarket] = React12.useState(null);
       const { t } = i18n.useTranslation();
       const renderItem = (position) => {
         return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -4060,10 +4351,8 @@ var init_switchLayout = __esm({
     );
     MarketLeftIcon = ({ isSelected, isHovered, ...props }) => {
       const getStrokeColor = () => {
-        if (isSelected)
-          return "rgb(var(--oui-color-primary-light))";
-        if (isHovered)
-          return "rgb(var(--oui-color-primary-light))";
+        if (isSelected) return "rgb(var(--oui-color-primary-light))";
+        if (isHovered) return "rgb(var(--oui-color-primary-light))";
         return "rgb(var(--oui-color-base-5))";
       };
       return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -4101,10 +4390,8 @@ var init_switchLayout = __esm({
     };
     MarketTopIcon = ({ isSelected, isHovered, ...props }) => {
       const getStrokeColor = () => {
-        if (isSelected)
-          return "rgb(var(--oui-color-primary-light))";
-        if (isHovered)
-          return "rgb(var(--oui-color-primary-light))";
+        if (isSelected) return "rgb(var(--oui-color-primary-light))";
+        if (isHovered) return "rgb(var(--oui-color-primary-light))";
         return "rgb(var(--oui-color-base-5))";
       };
       return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -4156,10 +4443,8 @@ var init_switchLayout = __esm({
     };
     MarketBottomIcon = ({ isSelected, isHovered, ...props }) => {
       const getStrokeColor = () => {
-        if (isSelected)
-          return "rgb(var(--oui-color-primary-light))";
-        if (isHovered)
-          return "rgb(var(--oui-color-primary-light))";
+        if (isSelected) return "rgb(var(--oui-color-primary-light))";
+        if (isHovered) return "rgb(var(--oui-color-primary-light))";
         return "rgb(var(--oui-color-base-5))";
       };
       return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -4211,10 +4496,8 @@ var init_switchLayout = __esm({
     };
     MarketHideIcon = ({ isSelected, isHovered, ...props }) => {
       const getStrokeColor = () => {
-        if (isSelected)
-          return "rgb(var(--oui-color-primary-light))";
-        if (isHovered)
-          return "rgb(var(--oui-color-primary-light))";
+        if (isSelected) return "rgb(var(--oui-color-primary-light))";
+        if (isHovered) return "rgb(var(--oui-color-primary-light))";
         return "rgb(var(--oui-color-base-5))";
       };
       return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -4503,9 +4786,9 @@ var init_topTab_script = __esm({
   "src/components/mobile/topTab/topTab.script.tsx"() {
     init_tradingPageContext();
     useTopTabScript = () => {
-      const [tab, setTab] = React11.useState("chart" /* chart */);
+      const [tab, setTab] = React12.useState("chart" /* chart */);
       const { symbol } = exports.useTradingPageContext();
-      const [visible, setVisible] = React11.useState(true);
+      const [visible, setVisible] = React12.useState(true);
       const toggleContentVisible = () => {
         setVisible((e) => !e);
       };
@@ -4522,12 +4805,12 @@ var init_topTab_script = __esm({
 });
 function useTradingviewScript(props) {
   const [height, setHeight] = hooks.useLocalStorage(Key, MaxHeight);
-  const [dragging, setDragging] = React11.useState(false);
-  const dragRef = React11.useRef(null);
-  const boxRef = React11.useRef(null);
-  const [offsetY, setOffsetY] = React11.useState(0);
-  const topRef = React11.useRef(0);
-  const handleTouchStart = React11.useCallback((e) => {
+  const [dragging, setDragging] = React12.useState(false);
+  const dragRef = React12.useRef(null);
+  const boxRef = React12.useRef(null);
+  const [offsetY, setOffsetY] = React12.useState(0);
+  const topRef = React12.useRef(0);
+  const handleTouchStart = React12.useCallback((e) => {
     if (!boxRef.current) {
       return;
     }
@@ -4540,7 +4823,7 @@ function useTradingviewScript(props) {
     topRef.current = rect.top;
     setOffsetY(offsetY2);
   }, []);
-  const handleTouchMove = React11.useCallback(
+  const handleTouchMove = React12.useCallback(
     (e) => {
       if (!boxRef.current) {
         return;
@@ -4558,10 +4841,10 @@ function useTradingviewScript(props) {
     },
     [dragging, offsetY]
   );
-  const handleTouchEnd = React11.useCallback(() => {
+  const handleTouchEnd = React12.useCallback(() => {
     setDragging(false);
   }, []);
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     const drag = dragRef.current;
     if (!drag) {
       return;
@@ -4571,7 +4854,7 @@ function useTradingviewScript(props) {
       drag.removeEventListener("touchstart", handleTouchStart);
     };
   }, [handleTouchStart]);
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     document.addEventListener("touchmove", handleTouchMove, { passive: false });
     document.addEventListener("touchend", handleTouchEnd);
     return () => {
@@ -4793,7 +5076,7 @@ var init_tradeData_script = __esm({
       const { symbol } = props;
       const ticker = hooks.useTickerStream(symbol);
       const { symbolInfo } = exports.useTradingPageContext();
-      const vol_24h = React11.useMemo(() => {
+      const vol_24h = React12.useMemo(() => {
         const close = ticker?.["24h_close"];
         const volume = ticker?.["24h_volume"];
         if (close && volume && !isNaN(close) && !isNaN(volume)) {
@@ -4801,7 +5084,7 @@ var init_tradeData_script = __esm({
         }
         return void 0;
       }, [ticker]);
-      const openInterest = React11.useMemo(() => {
+      const openInterest = React12.useMemo(() => {
         const markPrice = ticker?.["mark_price"];
         const openInterest2 = ticker?.["open_interest"];
         if (markPrice && openInterest2 && !isNaN(markPrice)) {
@@ -4849,17 +5132,17 @@ var init_topTab_ui = __esm({
   "src/components/mobile/topTab/topTab.ui.tsx"() {
     init_tradingPageContext();
     init_topTab_script();
-    LazyTradingviewWidget = React11__default.default.lazy(
+    LazyTradingviewWidget = React12__default.default.lazy(
       () => Promise.resolve().then(() => (init_tradingview_widget(), tradingview_widget_exports)).then((mod) => {
         return { default: mod.TradingviewWidget };
       })
     );
-    LazyMWebLastTrades = React11__default.default.lazy(
+    LazyMWebLastTrades = React12__default.default.lazy(
       () => Promise.resolve().then(() => (init_lastTrades_widget2(), lastTrades_widget_exports)).then((mod) => {
         return { default: mod.MWebLastTrades };
       })
     );
-    LazyTradeDataWidget = React11__default.default.lazy(
+    LazyTradeDataWidget = React12__default.default.lazy(
       () => Promise.resolve().then(() => (init_tradeData(), tradeData_exports)).then((mod) => {
         return { default: mod.TradeDataWidget };
       })
@@ -4892,15 +5175,15 @@ var init_topTab_ui = __esm({
             }
           ) }),
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx(ui.TabPanel, { title: t("trading.tabs.chart"), value: "chart" /* chart */, children: /* @__PURE__ */ jsxRuntime.jsx(React11__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
+            /* @__PURE__ */ jsxRuntime.jsx(ui.TabPanel, { title: t("trading.tabs.chart"), value: "chart" /* chart */, children: /* @__PURE__ */ jsxRuntime.jsx(React12__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
               LazyTradingviewWidget,
               {
                 symbol: props.symbol,
                 tradingViewConfig
               }
             ) }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(ui.TabPanel, { title: t("trading.tabs.trades"), value: "trades" /* trades */, children: /* @__PURE__ */ jsxRuntime.jsx(React11__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(LazyMWebLastTrades, { symbol: props.symbol }) }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(ui.TabPanel, { title: t("trading.tabs.data"), value: "data" /* data */, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { px: 3, children: /* @__PURE__ */ jsxRuntime.jsx(React11__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(LazyTradeDataWidget, { symbol: props.symbol }) }) }) })
+            /* @__PURE__ */ jsxRuntime.jsx(ui.TabPanel, { title: t("trading.tabs.trades"), value: "trades" /* trades */, children: /* @__PURE__ */ jsxRuntime.jsx(React12__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(LazyMWebLastTrades, { symbol: props.symbol }) }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.TabPanel, { title: t("trading.tabs.data"), value: "data" /* data */, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { px: 3, children: /* @__PURE__ */ jsxRuntime.jsx(React12__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(LazyTradeDataWidget, { symbol: props.symbol }) }) }) })
           ]
         }
       );
@@ -4961,15 +5244,15 @@ var init_topTab = __esm({
 var LazyOrderBookWidget2, OrderBookAndEntry;
 var init_orderBookAndEntry_ui = __esm({
   "src/components/mobile/orderBookAndEntry/orderBookAndEntry.ui.tsx"() {
-    LazyOrderBookWidget2 = React11__default.default.lazy(
+    LazyOrderBookWidget2 = React12__default.default.lazy(
       () => Promise.resolve().then(() => (init_orderBook2(), orderBook_exports)).then((mod) => {
         return { default: mod.OrderBookWidget };
       })
     );
     OrderBookAndEntry = (props) => {
-      const [height, setHeight] = React11.useState(0);
-      const divRef = React11.useRef(null);
-      React11.useEffect(() => {
+      const [height, setHeight] = React12.useState(0);
+      const divRef = React12.useRef(null);
+      React12.useEffect(() => {
         const div = divRef.current;
         if (!div) {
           return;
@@ -4997,7 +5280,7 @@ var init_orderBookAndEntry_ui = __esm({
               {
                 className: "oui-rounded-xl oui-bg-base-9",
                 style: { height: `${height + 16}px` },
-                children: /* @__PURE__ */ jsxRuntime.jsx(React11__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
+                children: /* @__PURE__ */ jsxRuntime.jsx(React12__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
                   LazyOrderBookWidget2,
                   {
                     symbol: props.symbol,
@@ -5060,8 +5343,8 @@ var init_dataList_script2 = __esm({
     init_tradingPageContext();
     useDataListScript2 = (props) => {
       const { symbol, sharePnLConfig } = props;
-      const [tab, setTab] = React11.useState("Position" /* position */);
-      const [subTab, setSubTab] = React11.useState(
+      const [tab, setTab] = React12.useState("Position" /* position */);
+      const [subTab, setSubTab] = React12.useState(
         "Position history" /* positionHistory */
       );
       const { t } = i18n.useTranslation();
@@ -5165,7 +5448,7 @@ var LazyPositionHeaderWidget2, SymbolControlHeader, OrdersView, PositionsView2,
 var init_dataList_ui2 = __esm({
   "src/components/mobile/dataList/dataList.ui.tsx"() {
     init_dataList_script2();
-    LazyPositionHeaderWidget2 = React11__default.default.lazy(
+    LazyPositionHeaderWidget2 = React12__default.default.lazy(
       () => Promise.resolve().then(() => (init_positionHeader(), positionHeader_exports)).then((mod) => {
         return { default: mod.PositionHeaderWidget };
       })
@@ -5173,7 +5456,7 @@ var init_dataList_ui2 = __esm({
     SymbolControlHeader = (props) => {
       const { pendingOrderCount, tpSlOrderCount, type, symbol } = props;
       const { t } = i18n.useTranslation();
-      const cancelAllDisabled = React11.useMemo(() => {
+      const cancelAllDisabled = React12.useMemo(() => {
         if (type === uiOrders.TabType.pending) {
           return pendingOrderCount === 0;
         }
@@ -5256,7 +5539,7 @@ var init_dataList_ui2 = __esm({
     };
     PositionsView2 = (props) => {
       return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", gap: 2, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(React11__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx(React12__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
           LazyPositionHeaderWidget2,
           {
             pnlNotionalDecimalPrecision: props.pnlNotionalDecimalPrecision,
@@ -5266,7 +5549,7 @@ var init_dataList_ui2 = __esm({
             setUnPnlPriceBasic: props.setUnPnlPriceBasic
           }
         ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(React11__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx(React12__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
           uiPositions.MobilePositionsWidget,
           {
             symbol: props.showAllSymbol ? void 0 : props.symbol,
@@ -5393,7 +5676,7 @@ var init_dataList_ui2 = __esm({
           },
           children: tabPanelItems.map((item) => {
             const { content, ...rest } = item;
-            return /* @__PURE__ */ React11.createElement(ui.TabPanel, { ...rest, key: `item-${rest.value}` }, content);
+            return /* @__PURE__ */ React12.createElement(ui.TabPanel, { ...rest, key: `item-${rest.value}` }, content);
           })
         }
       );
@@ -5436,11 +5719,11 @@ init_riskRate();
 init_orderBookAndTrades();
 var SplitLineBar = (props) => {
   const { onMouseDown, mode = "horizontal", ...rest } = props;
-  const disable = React11.useMemo(
+  const disable = React12.useMemo(
     () => props.className?.split(" ").includes("disable"),
     [props.className]
   );
-  const filterCls = React11.useMemo(
+  const filterCls = React12.useMemo(
     () => props.className?.split(" ").filter((cls) => cls !== "disable"),
     [props.className]
   );
@@ -5472,7 +5755,7 @@ var SplitLineBar = (props) => {
     }
   );
 };
-var SplitLayout = React11.forwardRef((props, ref) => {
+var SplitLayout = React12.forwardRef((props, ref) => {
   const { onSizeChange, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(
     Split__default.default,
@@ -5902,7 +6185,7 @@ var useAccountSheetScript = (props) => {
   const config = hooks.useConfig();
   const { connectedChain, disconnect, namespace } = hooks.useWalletConnector();
   const chainId = account.chainId || connectedChain?.id || linkDeviceStorage?.chainId;
-  const showGetTestUSDC = React11.useMemo(() => {
+  const showGetTestUSDC = React12.useMemo(() => {
     if (chainId) {
       return (state.status === types.AccountStatusEnum.EnableTrading || state.status === types.AccountStatusEnum.EnableTradingWithoutConnected) && // @ts-ignore
       utils.isTestnet(parseInt(chainId));
@@ -5987,13 +6270,13 @@ var useAccountSheetScript = (props) => {
 };
 var useReferral = (_onClickReferral) => {
   const { data, isLoading, isAffiliate, isTrader } = hooks.useReferralInfo();
-  const affiliateCommission30D = React11.useMemo(() => {
+  const affiliateCommission30D = React12.useMemo(() => {
     if (isAffiliate) {
       return data?.referrer_info?.["30d_referrer_rebate"];
     }
     return void 0;
   }, [data, isAffiliate]);
-  const traderCommission30D = React11.useMemo(() => {
+  const traderCommission30D = React12.useMemo(() => {
     if (isTrader) {
       return data?.referee_info?.["30d_referee_rebate"];
     }
@@ -6018,10 +6301,10 @@ var useReferral = (_onClickReferral) => {
 var useTradingRewards = (_onClick) => {
   const [curEpochEstimate] = hooks.useCurEpochEstimate(hooks.TWType.normal);
   const [list, curEpoch] = hooks.useEpochInfo(hooks.TWType.normal);
-  const curEpochId = React11.useMemo(() => {
+  const curEpochId = React12.useMemo(() => {
     return curEpoch.curEpochInfo?.epoch_id ?? "--";
   }, [curEpoch]);
-  const estRewards = React11.useMemo(() => {
+  const estRewards = React12.useMemo(() => {
     if (typeof curEpochEstimate?.est_r_wallet === "undefined") {
       return "--";
     }
@@ -6041,7 +6324,7 @@ function useGetChains(chainId) {
     pick: "network_infos",
     filter: (chain) => chain.network_infos?.bridge_enable || chain.network_infos?.bridgeless
   });
-  const chainName = React11.useMemo(() => {
+  const chainName = React12.useMemo(() => {
     const chain = findByChainId(parseInt(chainId), "network_infos");
     if (!chain) {
       return "Unknown";
@@ -6228,7 +6511,7 @@ var BottomNavBar = (props) => {
   ] });
 };
 var LinkDevice = (props) => {
-  const [open, setOpen] = React11.useState(false);
+  const [open, setOpen] = React12.useState(false);
   const { t } = i18n.useTranslation();
   const showDialog = () => {
     setOpen(true);
@@ -6413,8 +6696,8 @@ var usePortfolioSheetScript = () => {
   const ee = hooks.useEventEmitter();
   const { t } = i18n.useTranslation();
   const subAccounts = state.subAccounts ?? [];
-  const [showSliderTip, setShowSliderTip] = React11.useState(false);
-  const onSettlePnL = React11.useCallback(async () => {
+  const [showSliderTip, setShowSliderTip] = React12.useState(false);
+  const onSettlePnL = React12.useCallback(async () => {
     return account.settle().catch((e) => {
       if (e.code == -1104) {
         ui.toast.error(t("settle.settlement.error"));
@@ -6438,17 +6721,17 @@ var usePortfolioSheetScript = () => {
       return Promise.resolve(res);
     });
   }, [account, t]);
-  const onDeposit = React11.useCallback(() => {
+  const onDeposit = React12.useCallback(() => {
     ui.modal.show(uiTransfer.DepositAndWithdrawWithSheetId, {
       activeTab: "deposit"
     });
   }, []);
-  const onWithdraw = React11.useCallback(() => {
+  const onWithdraw = React12.useCallback(() => {
     ui.modal.show(uiTransfer.DepositAndWithdrawWithSheetId, {
       activeTab: "withdraw"
     });
   }, []);
-  const onTransfer = React11.useCallback(() => {
+  const onTransfer = React12.useCallback(() => {
     ui.modal.show(uiTransfer.TransferSheetId);
   }, []);
   return {
@@ -6485,20 +6768,20 @@ var useMarginRatioAndLeverage = () => {
   const { t } = i18n.useTranslation();
   const [{ aggregated, totalUnrealizedROI }, positionsInfo] = hooks.usePositionStream();
   const { marginRatio, currentLeverage, mmr } = hooks.useMarginRatio();
-  const marginRatioVal = React11.useMemo(() => {
+  const marginRatioVal = React12.useMemo(() => {
     return Math.min(
       10,
       aggregated.notional === 0 ? positionsInfo["margin_ratio"](10) : marginRatio
     );
   }, [marginRatio, aggregated]);
   const { update, curLeverage, maxLeverage, leverageLevers } = hooks.useLeverage();
-  const marks = React11.useMemo(() => {
+  const marks = React12.useMemo(() => {
     return leverageLevers?.map((e) => ({
       label: `${e}x`,
       value: e
     }));
   }, [leverageLevers]);
-  const [leverage, setLeverage] = React11.useState(curLeverage ?? 0);
+  const [leverage, setLeverage] = React12.useState(curLeverage ?? 0);
   const step = 100 / ((marks?.length || 0) - 1);
   const onLeverageChange = (leverage2) => {
     setLeverage(leverage2);
@@ -6516,11 +6799,11 @@ var useMarginRatioAndLeverage = () => {
     } catch {
     }
   };
-  const onValueCommit = React11.useCallback((value) => {
+  const onValueCommit = React12.useCallback((value) => {
     onSave(Array.isArray(value) ? value[0] : value);
   }, []);
   const debouncedCommit = hooks.useDebouncedCallback(onValueCommit, 500);
-  const onInputChange = React11.useCallback(
+  const onInputChange = React12.useCallback(
     (e) => {
       const parsed = Number.parseInt(e.target.value, 10);
       const raw = Number.isNaN(parsed) ? 0 : parsed;
@@ -6615,7 +6898,7 @@ var PortfolioSheet = (props) => {
 };
 var Asset = (props) => {
   const { t } = i18n.useTranslation();
-  const onUnsettleClick = React11.useCallback(() => {
+  const onUnsettleClick = React12.useCallback(() => {
     return ui.modal.confirm({
       title: t("settle.settlePnl"),
       // maxWidth: "xs",
@@ -6898,8 +7181,8 @@ init_fundingRateModal_ui();
 init_fundingRateModal_widget();
 var SortablePanel = (props) => {
   const { showIndicator, dragOverlay } = props;
-  const nodeRef = React11.useRef(null);
-  const [dimensions, setDimensions] = React11__default.default.useState(null);
+  const nodeRef = React12.useRef(null);
+  const [dimensions, setDimensions] = React12__default.default.useState(null);
   const sortableResult = sortable.useSortable({
     id: props.id
   });
@@ -6912,7 +7195,7 @@ var SortablePanel = (props) => {
     isDragging,
     setActivatorNodeRef
   } = sortableResult;
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     if (isDragging && nodeRef.current && !dimensions) {
       const rect = nodeRef.current.getBoundingClientRect();
       setDimensions({
@@ -7026,7 +7309,7 @@ var RwaOutsideMarketHoursNotify = () => {
     ui.toast.remove(toastId);
   };
   const { isMobile } = ui.useScreen();
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     if (isMobile) {
       setTimeout(() => {
         ui.toast.dismiss(toastId);
@@ -7070,18 +7353,18 @@ var showRwaOutsideMarketHoursNotify = () => {
 };
 RwaOutsideMarketHoursNotify.displayName = "RwaOutsideMarketHoursNotify";
 var useShowRwaCountdown = (symbol) => {
-  const [showCountdown, setShowCountdown] = React11.useState(
+  const [showCountdown, setShowCountdown] = React12.useState(
     void 0
   );
-  const [manulClose, setManulClose] = React11.useState(false);
+  const [manulClose, setManulClose] = React12.useState(false);
   const { isRwa, open, closeTimeInterval } = hooks.useGetRwaSymbolCloseTimeInterval(symbol);
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     if (manulClose) {
       return;
     }
     setShowCountdown(isRwa && open && !!closeTimeInterval);
   }, [isRwa, open, closeTimeInterval, manulClose]);
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     return () => {
       setShowCountdown(void 0);
       setManulClose(false);
@@ -7091,7 +7374,7 @@ var useShowRwaCountdown = (symbol) => {
     setShowCountdown(false);
     setManulClose(true);
   };
-  return React11.useMemo(() => {
+  return React12.useMemo(() => {
     return {
       showCountdown,
       closeCountdown
@@ -7099,7 +7382,7 @@ var useShowRwaCountdown = (symbol) => {
   }, [showCountdown, closeCountdown]);
 };
 var useSplitPersistent = (key, defaulValue, dep) => {
-  const size = React11.useMemo(() => {
+  const size = React12.useMemo(() => {
     const size2 = localStorage.getItem(key);
     if (size2) {
       return `${size2}%`;
@@ -7122,7 +7405,7 @@ var useFirstTimeDeposit = () => {
     dp: 2
   });
   const unavailable = wrongNetwork || disabledConnect || state.status < types.AccountStatusEnum.EnableTrading && state.status !== types.AccountStatusEnum.EnableTradingWithoutConnected;
-  const { startTime, endTime } = React11.useMemo(() => {
+  const { startTime, endTime } = React12.useMemo(() => {
     const d = /* @__PURE__ */ new Date();
     const today = new Date(
       d.getFullYear(),
@@ -7173,7 +7456,7 @@ var ORDERLY_ORDER_ENTRY_SIDE_MARKETS_LAYOUT = "orderly_order_entry_side_markets_
 var ORDERLY_SIDE_MARKETS_MODE_KEY = "orderly_side_markets_mode";
 var ORDERLY_HORIZONTAL_MARKETS_LAYOUT = "orderly_horizontal_markets_layout";
 var useTradingScript = () => {
-  const [openMarketsSheet, setOpenMarketsSheet] = React11.useState(false);
+  const [openMarketsSheet, setOpenMarketsSheet] = React12.useState(false);
   const props = exports.useTradingPageContext();
   const { state } = hooks.useAccount();
   const { t } = i18n.useTranslation();
@@ -7193,7 +7476,7 @@ var useTradingScript = () => {
     ORDERLY_HORIZONTAL_MARKETS_LAYOUT,
     "left"
   );
-  const canTrade = React11.useMemo(() => {
+  const canTrade = React12.useMemo(() => {
     return !wrongNetwork && !disabledConnect && (state.status >= types.AccountStatusEnum.EnableTrading || state.status === types.AccountStatusEnum.EnableTradingWithoutConnected);
   }, [state.status, wrongNetwork, disabledConnect]);
   const onShowPortfolioSheet = () => {
@@ -7205,14 +7488,14 @@ var useTradingScript = () => {
       });
     }
   };
-  const horizontalDraggable = React11.useMemo(() => min3XL, [min3XL]);
+  const horizontalDraggable = React12.useMemo(() => min3XL, [min3XL]);
   const positionsState = useOrderEntryPositions({
     canTrade,
     isFirstTimeDeposit
   });
   const marketsCollapseState = useMarketsCollapse({ resizeable: min3XL });
   const observerState = useObserverOrderEntry({ max2XL });
-  const marketsWidth = React11.useMemo(() => {
+  const marketsWidth = React12.useMemo(() => {
     switch (marketsCollapseState.panelSize) {
       case "small":
         return 0;
@@ -7266,13 +7549,13 @@ var useTradingScript = () => {
 };
 var useMarketsCollapse = (options) => {
   const { resizeable } = options;
-  const [animating, setAnimating] = React11.useState(false);
+  const [animating, setAnimating] = React12.useState(false);
   const [panelSize, setPanelSize] = hooks.useLocalStorage(ORDERLY_SIDE_MARKETS_MODE_KEY, "large");
   const onPanelSizeChange = (collapsed) => {
     setPanelSize(collapsed);
     setAnimating(true);
   };
-  const memoizedPanelSize = React11.useMemo(() => {
+  const memoizedPanelSize = React12.useMemo(() => {
     const normalized = panelSize === "large" ? "large" : "middle";
     return resizeable ? normalized : "middle";
   }, [resizeable, panelSize]);
@@ -7307,11 +7590,11 @@ var useOrderEntryPositions = (options) => {
     }
     setPositions(pos2);
   };
-  const showPositionIcon = React11.useMemo(
+  const showPositionIcon = React12.useMemo(
     () => canTrade && !isFirstTimeDeposit,
     [canTrade, isFirstTimeDeposit]
   );
-  const pos = React11.useMemo(() => {
+  const pos = React12.useMemo(() => {
     return showPositionIcon ? positions : [0, 1, 2];
   }, [showPositionIcon, positions]);
   return {
@@ -7357,9 +7640,9 @@ var useSplitSize = (options) => {
 };
 var useObserverOrderEntry = (options) => {
   const { max2XL } = options;
-  const [orderEntryHeight, setOrderEntryHeight] = React11.useState(0);
-  const orderEntryViewRef = React11.useRef(null);
-  React11.useEffect(() => {
+  const [orderEntryHeight, setOrderEntryHeight] = React12.useState(0);
+  const orderEntryViewRef = React12.useRef(null);
+  React12.useEffect(() => {
     const element = orderEntryViewRef.current;
     if (!element || !max2XL) {
       return;
@@ -7390,8 +7673,8 @@ function getOffsetSizeNum(size) {
 }
 function useExtraHeight(options) {
   const { tradindviewMaxHeight, dataListMinHeight } = options;
-  const tradingviewAndOrderbookSplitRef = React11.useRef(null);
-  const max2XLSplitRef = React11.useRef(null);
+  const tradingviewAndOrderbookSplitRef = React12.useRef(null);
+  const max2XLSplitRef = React12.useRef(null);
   const [extraHeight, setExtraHeight] = hooks.useLocalStorage(
     "orderly_order_entry_extra_height",
     0
@@ -7449,35 +7732,35 @@ function useExtraHeight(options) {
     dataListHeight
   };
 }
-var LazyRiskRateWidget = React11__default.default.lazy(
+var LazyRiskRateWidget = React12__default.default.lazy(
   () => Promise.resolve().then(() => (init_riskRate(), riskRate_exports)).then((mod) => {
     return {
       default: mod.RiskRateWidget
     };
   })
 );
-var LazyAssetViewWidget = React11__default.default.lazy(
+var LazyAssetViewWidget = React12__default.default.lazy(
   () => Promise.resolve().then(() => (init_assetView(), assetView_exports)).then((mod) => {
     return {
       default: mod.AssetViewWidget
     };
   })
 );
-var LazyDataListWidget = React11__default.default.lazy(
+var LazyDataListWidget = React12__default.default.lazy(
   () => Promise.resolve().then(() => (init_dataList(), dataList_exports)).then((mod) => {
     return {
       default: mod.DataListWidget
     };
   })
 );
-var LazySwitchLayout = React11__default.default.lazy(
+var LazySwitchLayout = React12__default.default.lazy(
   () => Promise.resolve().then(() => (init_switchLayout(), switchLayout_exports)).then((mod) => {
     return {
       default: mod.SwitchLayout
     };
   })
 );
-var LazyOrderBookAndTradesWidget = React11__default.default.lazy(
+var LazyOrderBookAndTradesWidget = React12__default.default.lazy(
   () => Promise.resolve().then(() => (init_orderBookAndTrades(), orderBookAndTrades_exports)).then((mod) => {
     return {
       default: mod.OrderBookAndTradesWidget
@@ -7515,11 +7798,11 @@ var DesktopLayout3 = (props) => {
     dataListMinHeight
   } = props;
   const { showCountdown, closeCountdown } = useShowRwaCountdown(props.symbol);
-  const symbolInfoBarHeight2 = React11.useMemo(() => {
+  const symbolInfoBarHeight2 = React12.useMemo(() => {
     return showCountdown ? 104 : 56;
   }, [showCountdown]);
   const { isRwa, open } = hooks.useGetRwaSymbolOpenStatus(props.symbol);
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     if (isRwa && !open) {
       showRwaOutsideMarketHoursNotify();
     }
@@ -7532,7 +7815,7 @@ var DesktopLayout3 = (props) => {
     types.OrderEntrySortKeys,
     ["margin", "assets", "orderEntry"]
   );
-  const dropAnimationConfig = React11.useMemo(() => {
+  const dropAnimationConfig = React12.useMemo(() => {
     return {
       keyframes({
         transform
@@ -7578,7 +7861,7 @@ var DesktopLayout3 = (props) => {
       coordinateGetter: sortable.sortableKeyboardCoordinates
     })
   );
-  const [activeId, setActiveId] = React11.useState(null);
+  const [activeId, setActiveId] = React12.useState(null);
   function handleDragStart(event) {
     setActiveId(event.active.id);
   }
@@ -7594,7 +7877,7 @@ var DesktopLayout3 = (props) => {
     }
     setActiveId(null);
   }
-  const minScreenHeight = React11.useMemo(() => {
+  const minScreenHeight = React12.useMemo(() => {
     return tradingViewFullScreen ? 0 : symbolInfoBarHeight2 + orderbookMaxHeight + dataListInitialHeight + space * 4;
   }, [tradingViewFullScreen]);
   const minScreenHeightSM = topBarHeight + bottomBarHeight + symbolInfoBarHeight2 + tradindviewMinHeight + orderbookMinHeight + dataListMinHeight + space * 4;
@@ -7607,7 +7890,7 @@ var DesktopLayout3 = (props) => {
       dropdownPos: marketLayout === "bottom" ? "top" : "bottom"
     }
   );
-  const containerPaddingX = React11.useMemo(() => max2XL ? 12 : 8, [max2XL]);
+  const containerPaddingX = React12.useMemo(() => max2XL ? 12 : 8, [max2XL]);
   const stickyHorizontalMarketsView = /* @__PURE__ */ jsxRuntime.jsx(
     ui.Box,
     {
@@ -7667,7 +7950,7 @@ var DesktopLayout3 = (props) => {
           onSymbolChange: props.onSymbolChange,
           closeCountdown,
           showCountdown,
-          trailing: /* @__PURE__ */ jsxRuntime.jsx(React11__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
+          trailing: /* @__PURE__ */ jsxRuntime.jsx(React12__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
             LazySwitchLayout,
             {
               layout,
@@ -7709,7 +7992,7 @@ var DesktopLayout3 = (props) => {
       children: tradingviewWidget
     }
   );
-  const orderbookWidget = /* @__PURE__ */ jsxRuntime.jsx(React11__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(LazyOrderBookAndTradesWidget, { symbol: props.symbol }) });
+  const orderbookWidget = /* @__PURE__ */ jsxRuntime.jsx(React12__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(LazyOrderBookAndTradesWidget, { symbol: props.symbol }) });
   const orderbookView = /* @__PURE__ */ jsxRuntime.jsx(
     ui.Box,
     {
@@ -7724,7 +8007,7 @@ var DesktopLayout3 = (props) => {
       children: orderbookWidget
     }
   );
-  const dataListWidget = /* @__PURE__ */ jsxRuntime.jsx(React11__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
+  const dataListWidget = /* @__PURE__ */ jsxRuntime.jsx(React12__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
     LazyDataListWidget,
     {
       current: void 0,
@@ -7748,16 +8031,16 @@ var DesktopLayout3 = (props) => {
       children: dataListWidget
     }
   );
-  const orderInteractionWidgets = React11.useMemo(() => {
+  const orderInteractionWidgets = React12.useMemo(() => {
     return {
       margin: {
         className: "",
-        element: /* @__PURE__ */ jsxRuntime.jsx(React11__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(LazyRiskRateWidget, {}) })
+        element: /* @__PURE__ */ jsxRuntime.jsx(React12__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(LazyRiskRateWidget, {}) })
       },
       assets: {
         className: "oui-border oui-border-line-12",
         element: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(React11__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx(React12__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
             LazyAssetViewWidget,
             {
               isFirstTimeDeposit: props.isFirstTimeDeposit
@@ -8279,17 +8562,17 @@ function breakDownSeconds(total) {
   const secs = remAfterHours % SEC_PER_MIN;
   return [days, hours, mins, secs];
 }
-var LazyTopTabWidget = React11__default.default.lazy(
+var LazyTopTabWidget = React12__default.default.lazy(
   () => Promise.resolve().then(() => (init_topTab(), topTab_exports)).then((mod) => {
     return { default: mod.TopTabWidget };
   })
 );
-var LazyOrderBookAndEntryWidget = React11__default.default.lazy(
+var LazyOrderBookAndEntryWidget = React12__default.default.lazy(
   () => Promise.resolve().then(() => (init_orderBookAndEntry(), orderBookAndEntry_exports)).then((mod) => {
     return { default: mod.OrderBookAndEntryWidget };
   })
 );
-var LazyDataListWidget2 = React11__default.default.lazy(
+var LazyDataListWidget2 = React12__default.default.lazy(
   () => Promise.resolve().then(() => (init_dataList2(), dataList_exports2)).then((mod) => {
     return { default: mod.DataListWidget };
   })
@@ -8317,12 +8600,12 @@ var MaybeEqual = () => {
 var MobileLayout3 = (props) => {
   const { t } = i18n.useTranslation();
   const { isRwa, open, closeTimeInterval } = hooks.useGetRwaSymbolInfo(props.symbol);
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     if (isRwa && !open) {
       showRwaOutsideMarketHoursNotify();
     }
   }, [isRwa, open, props.symbol]);
-  const rwaStatusBar = React11.useMemo(() => {
+  const rwaStatusBar = React12.useMemo(() => {
     if (!isRwa) {
       return null;
     }
@@ -8438,9 +8721,9 @@ var MobileLayout3 = (props) => {
   ] });
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-relative oui-grid oui-gap-1 oui-bg-base-10", children: /* @__PURE__ */ jsxRuntime.jsxs("main", { className: "oui-hide-scrollbar oui-space-y-1 oui-overflow-y-auto", children: [
     topBar,
-    /* @__PURE__ */ jsxRuntime.jsx(React11__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(LazyTopTabWidget, { className: "oui-mx-1 oui-rounded-xl oui-bg-base-9" }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(React11__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(LazyOrderBookAndEntryWidget, {}) }),
-    /* @__PURE__ */ jsxRuntime.jsx(React11__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx(React12__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(LazyTopTabWidget, { className: "oui-mx-1 oui-rounded-xl oui-bg-base-9" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(React12__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(LazyOrderBookAndEntryWidget, {}) }),
+    /* @__PURE__ */ jsxRuntime.jsx(React12__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
       LazyDataListWidget2,
       {
         symbol: props.symbol,
@@ -8474,7 +8757,7 @@ init_tradingPageContext();
 var TradingPageProvider = (props) => {
   const { symbol, children } = props;
   const symbolInfo = hooks.useSymbolsInfo()[symbol];
-  const memoizedValue = React11.useMemo(() => {
+  const memoizedValue = React12.useMemo(() => {
     const basicSymbol = getBasicSymbolInfo(symbolInfo);
     return {
       ...props,
@@ -8520,5 +8803,5 @@ exports.TradingWidget = TradingWidget;
 exports.useBottomNavBarScript = useBottomNavBarScript;
 exports.usePortfolioSheetScript = usePortfolioSheetScript;
 exports.useTradingScript = useTradingScript;
-//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map