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

package/dist/index.mjs

@@ -1,10 +1,10 @@
 import { useAccount, useLocalStorage, useConfig, useWalletConnector, useMutation, useChains, useReferralInfo, useCurEpochEstimate, TWType, useEpochInfo, usePositionStream, useOrderStream, useFundingDetails, useFundingRateBySymbol, useFundingRate, useSymbolsInfo, useOrderbookStream, useEventEmitter, useCollateral, useMarginRatio, useLeverage, useDebouncedCallback, useMediaQuery, useAssetsHistory, useGetRwaSymbolInfo, useGetRwaSymbolOpenStatus, useGetRwaSymbolCloseTimeInterval, useMarketTradeStream, useAccountInstance, useComputedLTV, useTickerStream } from '@orderly.network/hooks';
-import React11, { forwardRef, useMemo, createContext, useContext, useState, useCallback, useEffect, useRef, createElement } from 'react';
+import React12, { forwardRef, useMemo, createContext, useContext, useState, useCallback, useEffect, useRef, createElement } from 'react';
 import { useDataTap, useAppContext } from '@orderly.network/react-app';
 import { AccountStatusEnum, ChainNamespace, AlgoOrderRootType, OrderStatus, OrderSide, AssetHistoryStatusEnum, AssetHistorySideEnum, TradingviewFullscreenKey, OrderEntrySortKeys, EMPTY_LIST } from '@orderly.network/types';
 import { TabType, DesktopOrderListWidget, MobileOrderListWidget } from '@orderly.network/ui-orders';
 import { useTranslation, i18n, Trans } from '@orderly.network/i18n';
-import { installExtension, ExtensionPositionEnum, cn, Button, formatAddress, registerSimpleDialog, registerSimpleSheet, modal, useModal, Flex, toast as toast$1, Text, ArrowRightShortIcon, Box, ListView, Grid, ArrowDownShortIcon, gradientTextVariants, EyeIcon, EyeCloseIcon, Divider, ChevronDownIcon, useScreen, Tooltip, Tabs, TabPanel, CloseIcon, DropdownMenuRoot, DropdownMenuTrigger, DropdownMenuPortal, DropdownMenuContent, Statistic, RefreshIcon, ArrowLeftRightIcon, ArrowUpShortIcon, InfoCircleIcon, ExtensionSlot, NewsFillIcon, SimpleSheet, SimpleDialog, ChainIcon, ExclamationFillIcon, Switch, Checkbox, Sheet, SheetTrigger, SheetContent, SettingFillIcon, Spinner, Select, Popover, CaretUpIcon, CaretDownIcon, Picker, TooltipRoot, TooltipTrigger, TooltipContent as TooltipContent$1, TooltipArrow, parseNumber } from '@orderly.network/ui';
+import { installExtension, ExtensionPositionEnum, cn, Button, formatAddress, registerSimpleDialog, registerSimpleSheet, modal, useModal, Flex, toast as toast$1, Text, ArrowRightShortIcon, Box, ListView, Grid, ArrowDownShortIcon, gradientTextVariants, EyeIcon, EyeCloseIcon, Divider, ChevronDownIcon, useScreen, Tooltip, Tabs, TabPanel, CloseIcon, DropdownMenuRoot, DropdownMenuTrigger, DropdownMenuPortal, DropdownMenuContent, Statistic, RefreshIcon, ArrowLeftRightIcon, ArrowUpShortIcon, InfoCircleIcon, ExtensionSlot, NewsFillIcon, SimpleSheet, SimpleDialog, ChainIcon, ExclamationFillIcon, Switch, Checkbox, Sheet, SheetTrigger, SheetContent, SettingFillIcon, Spinner, PopoverRoot, PopoverTrigger, PopoverContent, Select, Popover, CaretUpIcon, CaretDownIcon, Picker, TooltipRoot, TooltipTrigger, TooltipContent as TooltipContent$1, TooltipArrow, parseNumber } from '@orderly.network/ui';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { PositionHistoryWidget, LiquidationWidget, PositionsWidget, CloseAllPositionsWidget, MobileLiquidationWidget, MobilePositionsWidget, MobilePositionHistoryWidget, useReversePositionEnabled } from '@orderly.network/ui-positions';
 import { isTestnet, Decimal, commifyOptional, removeTrailingZeros, formatSymbol, optimizeSymbolDisplay, getPrecisionByNumber } from '@orderly.network/utils';
@@ -688,19 +688,19 @@ var LazySettingWidget, LazyPositionHeaderWidget, PositionsView, LiquidationTab,
 var init_dataList_ui = __esm({
   "src/components/desktop/dataList/dataList.ui.tsx"() {
     init_dataList_script();
-    LazySettingWidget = React11.lazy(
+    LazySettingWidget = React12.lazy(
       () => Promise.resolve().then(() => (init_setting(), setting_exports)).then((mod) => {
         return { default: mod.SettingWidget };
       })
     );
-    LazyPositionHeaderWidget = React11.lazy(
+    LazyPositionHeaderWidget = React12.lazy(
       () => Promise.resolve().then(() => (init_positionHeader(), positionHeader_exports)).then((mod) => {
         return { default: mod.PositionHeaderWidget };
       })
     );
     PositionsView = (props) => {
       return /* @__PURE__ */ jsxs(Flex, { direction: "column", width: "100%", height: "100%", children: [
-        /* @__PURE__ */ jsx(React11.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(React12.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
           LazyPositionHeaderWidget,
           {
             setPnlNotionalDecimalPrecision: props.setPnlNotionalDecimalPrecision,
@@ -883,7 +883,7 @@ var init_dataList_ui = __esm({
         {
           defaultValue: current || "Positions" /* positions */,
           variant: "contained",
-          trailing: /* @__PURE__ */ jsx(React11.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
+          trailing: /* @__PURE__ */ jsx(React12.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
             LazySettingWidget,
             {
               pnlNotionalDecimalPrecision,
@@ -1381,6 +1381,8 @@ var init_assetView_ui = __esm({
         freeCollateral,
         marginRatioVal,
         renderMMR,
+        maintenanceMargin,
+        currentLeverage,
         isConnected,
         currentLtv
       } = props;
@@ -1428,7 +1430,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__ */ jsx(
@@ -1469,6 +1471,28 @@ var init_assetView_ui = __esm({
                   placeholder: "--%"
                 }
               ),
+              /* @__PURE__ */ 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__ */ 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__ */ jsx(LTVDetail, { visible, value: currentLtv })
             ]
           }
@@ -1487,6 +1511,8 @@ var init_assetView_ui = __esm({
       freeCollateral,
       marginRatioVal,
       renderMMR,
+      maintenanceMargin,
+      currentLeverage,
       isConnected,
       isMainAccount,
       hasSubAccount,
@@ -1608,6 +1634,8 @@ var init_assetView_ui = __esm({
                   freeCollateral,
                   marginRatioVal,
                   renderMMR,
+                  maintenanceMargin,
+                  currentLeverage,
                   isConnected,
                   currentLtv
                 }
@@ -1659,7 +1687,7 @@ var init_assetView_script = __esm({
       const { freeCollateral } = useCollateral({
         dp: 2
       });
-      const { marginRatio, mmr } = useMarginRatio();
+      const { marginRatio, mmr, maintenanceMargin, currentLeverage } = useMarginRatio();
       const isConnected = state.status >= AccountStatusEnum.Connected;
       const [{ aggregated }, positionsInfo] = usePositionStream();
       const marginRatioVal = useMemo(() => {
@@ -1717,6 +1745,8 @@ var init_assetView_script = __esm({
       const _freeCollateral = useDataTap(freeCollateral) ?? void 0;
       const _marginRatioVal = useDataTap(marginRatioVal) ?? void 0;
       const _mmr = useDataTap(mmr) ?? void 0;
+      const _maintenanceMargin = useDataTap(maintenanceMargin) ?? void 0;
+      const _currentLeverage = useDataTap(currentLeverage) ?? void 0;
       const _totalValue = useDataTap(totalValue) ?? void 0;
       return {
         onDeposit,
@@ -1731,6 +1761,8 @@ var init_assetView_script = __esm({
         freeCollateral: _freeCollateral,
         marginRatioVal: _marginRatioVal,
         renderMMR: _mmr,
+        maintenanceMargin: _maintenanceMargin,
+        currentLeverage: _currentLeverage,
         isConnected,
         isMainAccount,
         hasSubAccount: !!state.subAccounts?.length,
@@ -1775,7 +1807,7 @@ var init_orderContext = __esm({
     OrderBookProvider = (props) => {
       const [mode, setMode] = useState("quantity");
       const [totalMode, setTotalMode] = useState("quantity");
-      const memoizedValue = React11.useMemo(() => {
+      const memoizedValue = React12.useMemo(() => {
         return {
           cellHeight: props.cellHeight,
           onItemClick: props.onItemClick,
@@ -1786,7 +1818,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,
@@ -1796,6 +1830,8 @@ var init_orderContext = __esm({
         props.pendingOrders,
         props.showTotal,
         props.symbolInfo,
+        props.showBuySellRatio,
+        props.onShowBuySellRatioChange,
         totalMode
       ]);
       return /* @__PURE__ */ jsx(OrderBookContext.Provider, { value: memoizedValue, children: props.children });
@@ -2202,6 +2238,65 @@ var init_bids_desktop = __esm({
     };
   }
 });
+var BuySellRatioSettings, MoreIcon;
+var init_buySellRatio = __esm({
+  "src/components/desktop/orderBook/buySellRatio.tsx"() {
+    BuySellRatioSettings = ({
+      showBuySellRatio,
+      setShowBuySellRatio
+    }) => {
+      const { t } = useTranslation();
+      const [settingsOpen, setSettingsOpen] = useState(false);
+      return /* @__PURE__ */ jsxs(PopoverRoot, { open: settingsOpen, onOpenChange: setSettingsOpen, children: [
+        /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ 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__ */ jsx(MoreIcon, {})
+          }
+        ) }),
+        /* @__PURE__ */ jsx(PopoverContent, { align: "end", sideOffset: 8, className: "oui-w-[200px] ", children: /* @__PURE__ */ jsxs(Flex, { itemAlign: "center", gap: 2, children: [
+          /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              id: "show-buy-sell-ratio",
+              checked: showBuySellRatio,
+              onCheckedChange: (checked) => {
+                setShowBuySellRatio?.(checked === true);
+                setSettingsOpen(false);
+              }
+            }
+          ),
+          /* @__PURE__ */ 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__ */ jsxs(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "16",
+        height: "16",
+        viewBox: "0 0 16 16",
+        fill: "currentColor",
+        ...props,
+        children: [
+          /* @__PURE__ */ 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__ */ 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__ */ 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"() {
@@ -2282,7 +2377,7 @@ var init_header_desktop = __esm({
       const { base, quote = "USDC" } = props;
       const { showTotal } = useOrderBookContext();
       const { t } = useTranslation();
-      const [popoverOpen, setOpen] = React11.useState(false);
+      const [popoverOpen, setOpen] = React12.useState(false);
       const [coinType] = useLocalStorage(ORDERBOOK_COIN_TYPE_KEY, base);
       const TriggerIcon = popoverOpen ? CaretUpIcon : CaretDownIcon;
       const optimizedBase = useMemo(() => {
@@ -2614,14 +2709,27 @@ 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 {
+        lastPrice,
+        markPrice,
+        quote,
+        base,
+        isLoading,
+        onDepthChange,
+        showBuySellRatio = true,
+        setShowBuySellRatio,
+        buySellRatio
+      } = props;
+      const { t } = useTranslation();
       const divRef = useRef(null);
       const [showTotal, setShowTotal] = useState(false);
       const [coinType, setCoinType] = useLocalStorage(
@@ -2659,23 +2767,37 @@ var init_index_desktop = __esm({
           showTotal,
           pendingOrders: props.pendingOrders || EMPTY_LIST,
           symbolInfo: props.symbolInfo,
+          showBuySellRatio,
+          onShowBuySellRatioChange: setShowBuySellRatio,
           children: /* @__PURE__ */ jsxs(
             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: 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__ */ jsx(
-                  DesktopDepthSelect,
-                  {
-                    depths: props.depths,
-                    value: props.activeDepth,
-                    onChange: onDepthChange
-                  }
-                ),
+                /* @__PURE__ */ jsxs(Flex, { justify: "between", itemAlign: "center", className: "oui-pr-3", children: [
+                  /* @__PURE__ */ jsx(
+                    DesktopDepthSelect,
+                    {
+                      depths: props.depths,
+                      value: props.activeDepth,
+                      onChange: onDepthChange
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    BuySellRatioSettings,
+                    {
+                      showBuySellRatio,
+                      setShowBuySellRatio
+                    }
+                  )
+                ] }),
                 /* @__PURE__ */ jsx(DesktopHeader, { quote, base }),
                 /* @__PURE__ */ jsx(DesktopAsks, { data: [...props.asks] }),
                 /* @__PURE__ */ jsx(
@@ -2689,6 +2811,13 @@ var init_index_desktop = __esm({
                   }
                 ),
                 /* @__PURE__ */ jsx(DesktopBids, { data: [...props.bids] }),
+                showBuySellRatio && /* @__PURE__ */ jsx(
+                  BuySellRatioBar,
+                  {
+                    ratio: buySellRatio || null,
+                    className: "oui-text-2xs oui-px-3 oui-h-[38px]"
+                  }
+                ),
                 isLoading && /* @__PURE__ */ 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__ */ jsx(Spinner, {}) })
               ]
             }
@@ -2771,8 +2900,7 @@ var init_fundingRateModal_script = __esm({
         return `${new 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 Decimal(rate).mul(24).div(intervalHours).mul(365);
         return annualizedRate.todp(2, Decimal.ROUND_DOWN).toNumber();
       };
@@ -3210,7 +3338,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();
@@ -3218,7 +3348,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 } = useTranslation();
+      const [settingsOpen, setSettingsOpen] = useState(false);
       const symbol = `PERP_${props.symbolInfo.base}_${props.symbolInfo.quote}`;
       const [coinUnit, setCoinUnit] = useLocalStorage(
         ORDERBOOK_MOBILE_COIN_TYPE_KEY,
@@ -3233,6 +3375,8 @@ var init_orderBook = __esm({
           pendingOrders: EMPTY_LIST,
           showTotal: false,
           symbolInfo: props.symbolInfo,
+          showBuySellRatio,
+          onShowBuySellRatioChange: setShowBuySellRatio,
           children: /* @__PURE__ */ jsxs(
             Flex,
             {
@@ -3243,7 +3387,16 @@ var init_orderBook = __esm({
               justify: "start",
               itemAlign: "start",
               children: [
-                /* @__PURE__ */ jsx(FundingRateWidget, { symbol }),
+                /* @__PURE__ */ jsxs(Flex, { justify: "between", itemAlign: "center", className: "oui-w-full", children: [
+                  /* @__PURE__ */ jsx(FundingRateWidget, { symbol }),
+                  /* @__PURE__ */ jsx(
+                    BuySellRatioSettings,
+                    {
+                      showBuySellRatio,
+                      setShowBuySellRatio
+                    }
+                  )
+                ] }),
                 /* @__PURE__ */ jsx(Header2, { quote, base }),
                 /* @__PURE__ */ jsx(Asks, { data: props.asks }),
                 /* @__PURE__ */ jsx(MarkPrice, { lastPrice, markPrice }),
@@ -3256,6 +3409,13 @@ var init_orderBook = __esm({
                     onChange: onDepthChange
                   }
                 ),
+                showBuySellRatio && /* @__PURE__ */ jsx(
+                  BuySellRatioBar,
+                  {
+                    ratio: buySellRatio || null,
+                    className: "oui-px-0 oui-text-[8px] oui-h-6 oui-mt-2"
+                  }
+                ),
                 isLoading && /* @__PURE__ */ 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__ */ jsx(Spinner, {}) })
               ]
             }
@@ -3288,7 +3448,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__ */ jsx(
         DesktopOrderBook,
@@ -3308,7 +3471,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
         }
       ) });
     };
@@ -3330,12 +3496,15 @@ var init_utils = __esm({
     };
   }
 });
-var DEFAULT_CELL_HEIGHT, SPACE, useOrderBookScript, usePendingOrderStream;
+var DEFAULT_CELL_HEIGHT, SPACE, BUY_SELL_RATIO_BAR_HEIGHT_MOBILE, BUY_SELL_RATIO_BAR_HEIGHT_DESKTOP, ORDERBOOK_SHOW_BUY_SELL_RATIO_KEY, useOrderBookScript, 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";
     useOrderBookScript = (props) => {
       const { symbol, height } = props;
       const symbolInfo = useSymbolsInfo()[symbol];
@@ -3344,13 +3513,19 @@ var init_orderBook_script = __esm({
       const { base, quote, quote_dp } = getBasicSymbolInfo(symbolInfo);
       const [data, { onDepthChange, isLoading, onItemClick, depth, allDepths }] = useOrderbookStream(symbol, void 0, { level });
       const pendingOrders = usePendingOrderStream(symbol);
+      const { isMobile } = useScreen();
+      const [showBuySellRatio, setShowBuySellRatio] = useLocalStorage(
+        ORDERBOOK_SHOW_BUY_SELL_RATIO_KEY,
+        true
+      );
       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 {
@@ -3358,7 +3533,7 @@ var init_orderBook_script = __esm({
           }
           setLevel(level2);
         }
-      }, [height]);
+      }, [height, showBuySellRatio]);
       const selDepth = useMemo(() => {
         if (typeof depth === "undefined" || typeof quote_dp === "undefined") {
           return void 0;
@@ -3368,7 +3543,38 @@ var init_orderBook_script = __esm({
       const depths = useMemo(() => {
         return allDepths?.map((e) => removeTrailingZeros(e)) || [];
       }, [allDepths, quote_dp]);
-      const { isMobile } = useScreen();
+      const buySellRatio = 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 Decimal(firstAsk[3]);
+            const bidAmount = new 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,
@@ -3385,7 +3591,10 @@ var init_orderBook_script = __esm({
         onDepthChange,
         pendingOrders,
         symbolInfo: getBasicSymbolInfo(symbolInfo),
-        isMobile
+        isMobile,
+        showBuySellRatio,
+        setShowBuySellRatio,
+        buySellRatio
       };
     };
     usePendingOrderStream = (symbol) => {
@@ -3416,10 +3625,91 @@ var init_orderBook_widget = __esm({
     };
   }
 });
+var BuySellRatioBar;
+var init_buySellRatioBar = __esm({
+  "src/components/base/orderBook/buySellRatioBar.tsx"() {
+    BuySellRatioBar = (props) => {
+      const { ratio, className } = props;
+      const { buyPercentage, sellPercentage } = 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 Decimal(buyPct).toDecimalPlaces(1, Decimal.ROUND_HALF_UP).toNumber();
+        const sellPctRounded = new Decimal(100).sub(buyPctRounded).toDecimalPlaces(1, Decimal.ROUND_HALF_UP).toNumber();
+        return {
+          buyPercentage: buyPctRounded,
+          sellPercentage: sellPctRounded
+        };
+      }, [ratio]);
+      return /* @__PURE__ */ jsxs(Flex, { className: cn("oui-w-full", className), gap: 1, children: [
+        /* @__PURE__ */ jsxs(Flex, { itemAlign: "center", gap: 1, children: [
+          /* @__PURE__ */ jsx(Text, { intensity: 80, children: "B" }),
+          /* @__PURE__ */ jsxs(Text, { color: "success", children: [
+            buyPercentage.toFixed(1),
+            "%"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              flex: 1,
+              height: "4px",
+              position: "relative",
+              borderRadius: "2px",
+              overflow: "hidden",
+              backgroundColor: "rgb(var(--oui-line-4))"
+            },
+            children: [
+              /* @__PURE__ */ 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__ */ 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__ */ jsxs(Flex, { itemAlign: "center", gap: 1, children: [
+          /* @__PURE__ */ jsxs(Text, { color: "danger", children: [
+            sellPercentage.toFixed(1),
+            "%"
+          ] }),
+          /* @__PURE__ */ jsx(Text, { intensity: 80, children: "S" })
+        ] })
+      ] });
+    };
+  }
+});
 
 // src/components/base/orderBook/index.ts
 var orderBook_exports = {};
 __export(orderBook_exports, {
+  BuySellRatioBar: () => BuySellRatioBar,
   OrderBook: () => OrderBook2,
   OrderBookWidget: () => OrderBookWidget,
   useOrderBookScript: () => useOrderBookScript
@@ -3429,6 +3719,7 @@ var init_orderBook2 = __esm({
     init_orderBook_ui();
     init_orderBook_widget();
     init_orderBook_script();
+    init_buySellRatioBar();
   }
 });
 var RiskRate;
@@ -3571,14 +3862,14 @@ var init_riskRate = __esm({
 var LazyLastTradesWidget, LazyOrderBookWidget, TwoColLayout, TabLayout, Title2, OrderBookAndTrades;
 var init_orderBookAndTrades_ui = __esm({
   "src/components/desktop/orderBookAndTrades/orderBookAndTrades.ui.tsx"() {
-    LazyLastTradesWidget = React11.lazy(
+    LazyLastTradesWidget = React12.lazy(
       () => Promise.resolve().then(() => (init_lastTrades(), lastTrades_exports)).then((mod) => {
         return {
           default: mod.LastTradesWidget
         };
       })
     );
-    LazyOrderBookWidget = React11.lazy(
+    LazyOrderBookWidget = React12.lazy(
       () => Promise.resolve().then(() => (init_orderBook2(), orderBook_exports)).then((mod) => {
         return {
           default: mod.OrderBookWidget
@@ -3615,7 +3906,7 @@ var init_orderBookAndTrades_ui = __esm({
                       className: "oui-pl-3 oui-text-sm"
                     }
                   ),
-                  /* @__PURE__ */ jsx(React11.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
+                  /* @__PURE__ */ jsx(React12.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
                     LazyOrderBookWidget,
                     {
                       symbol: props.symbol,
@@ -3641,7 +3932,7 @@ var init_orderBookAndTrades_ui = __esm({
                       className: "oui-text-sm oui-px-3"
                     }
                   ),
-                  /* @__PURE__ */ jsx(React11.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
+                  /* @__PURE__ */ jsx(React12.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
                     LazyLastTradesWidget,
                     {
                       symbol: props.symbol,
@@ -3683,14 +3974,14 @@ var init_orderBookAndTrades_ui = __esm({
               },
               size: "lg",
               children: [
-                /* @__PURE__ */ jsx(TabPanel, { value: "orderBook", title: t("trading.orderBook"), children: /* @__PURE__ */ jsx(React11.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
+                /* @__PURE__ */ jsx(TabPanel, { value: "orderBook", title: t("trading.orderBook"), children: /* @__PURE__ */ jsx(React12.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
                   LazyOrderBookWidget,
                   {
                     symbol: props.symbol,
                     height: props.containerSize ? props.containerSize.height - 29 - 18 : void 0
                   }
                 ) }) }),
-                /* @__PURE__ */ jsx(TabPanel, { value: "lastTrades", title: t("trading.lastTrades"), children: /* @__PURE__ */ jsx(React11.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
+                /* @__PURE__ */ jsx(TabPanel, { value: "lastTrades", title: t("trading.lastTrades"), children: /* @__PURE__ */ jsx(React12.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
                   LazyLastTradesWidget,
                   {
                     symbol: props.symbol,
@@ -4053,10 +4344,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__ */ jsxs(
@@ -4094,10 +4383,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__ */ jsxs(
@@ -4149,10 +4436,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__ */ jsxs(
@@ -4204,10 +4489,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__ */ jsxs(
@@ -4842,17 +5125,17 @@ var init_topTab_ui = __esm({
   "src/components/mobile/topTab/topTab.ui.tsx"() {
     init_tradingPageContext();
     init_topTab_script();
-    LazyTradingviewWidget = React11.lazy(
+    LazyTradingviewWidget = React12.lazy(
       () => Promise.resolve().then(() => (init_tradingview_widget(), tradingview_widget_exports)).then((mod) => {
         return { default: mod.TradingviewWidget };
       })
     );
-    LazyMWebLastTrades = React11.lazy(
+    LazyMWebLastTrades = React12.lazy(
       () => Promise.resolve().then(() => (init_lastTrades_widget2(), lastTrades_widget_exports)).then((mod) => {
         return { default: mod.MWebLastTrades };
       })
     );
-    LazyTradeDataWidget = React11.lazy(
+    LazyTradeDataWidget = React12.lazy(
       () => Promise.resolve().then(() => (init_tradeData(), tradeData_exports)).then((mod) => {
         return { default: mod.TradeDataWidget };
       })
@@ -4885,15 +5168,15 @@ var init_topTab_ui = __esm({
             }
           ) }),
           children: [
-            /* @__PURE__ */ jsx(TabPanel, { title: t("trading.tabs.chart"), value: "chart" /* chart */, children: /* @__PURE__ */ jsx(React11.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx(TabPanel, { title: t("trading.tabs.chart"), value: "chart" /* chart */, children: /* @__PURE__ */ jsx(React12.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
               LazyTradingviewWidget,
               {
                 symbol: props.symbol,
                 tradingViewConfig
               }
             ) }) }),
-            /* @__PURE__ */ jsx(TabPanel, { title: t("trading.tabs.trades"), value: "trades" /* trades */, children: /* @__PURE__ */ jsx(React11.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(LazyMWebLastTrades, { symbol: props.symbol }) }) }),
-            /* @__PURE__ */ jsx(TabPanel, { title: t("trading.tabs.data"), value: "data" /* data */, children: /* @__PURE__ */ jsx(Box, { px: 3, children: /* @__PURE__ */ jsx(React11.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(LazyTradeDataWidget, { symbol: props.symbol }) }) }) })
+            /* @__PURE__ */ jsx(TabPanel, { title: t("trading.tabs.trades"), value: "trades" /* trades */, children: /* @__PURE__ */ jsx(React12.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(LazyMWebLastTrades, { symbol: props.symbol }) }) }),
+            /* @__PURE__ */ jsx(TabPanel, { title: t("trading.tabs.data"), value: "data" /* data */, children: /* @__PURE__ */ jsx(Box, { px: 3, children: /* @__PURE__ */ jsx(React12.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(LazyTradeDataWidget, { symbol: props.symbol }) }) }) })
           ]
         }
       );
@@ -4954,7 +5237,7 @@ var init_topTab = __esm({
 var LazyOrderBookWidget2, OrderBookAndEntry;
 var init_orderBookAndEntry_ui = __esm({
   "src/components/mobile/orderBookAndEntry/orderBookAndEntry.ui.tsx"() {
-    LazyOrderBookWidget2 = React11.lazy(
+    LazyOrderBookWidget2 = React12.lazy(
       () => Promise.resolve().then(() => (init_orderBook2(), orderBook_exports)).then((mod) => {
         return { default: mod.OrderBookWidget };
       })
@@ -4990,7 +5273,7 @@ var init_orderBookAndEntry_ui = __esm({
               {
                 className: "oui-rounded-xl oui-bg-base-9",
                 style: { height: `${height + 16}px` },
-                children: /* @__PURE__ */ jsx(React11.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
+                children: /* @__PURE__ */ jsx(React12.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
                   LazyOrderBookWidget2,
                   {
                     symbol: props.symbol,
@@ -5158,7 +5441,7 @@ var LazyPositionHeaderWidget2, SymbolControlHeader, OrdersView, PositionsView2,
 var init_dataList_ui2 = __esm({
   "src/components/mobile/dataList/dataList.ui.tsx"() {
     init_dataList_script2();
-    LazyPositionHeaderWidget2 = React11.lazy(
+    LazyPositionHeaderWidget2 = React12.lazy(
       () => Promise.resolve().then(() => (init_positionHeader(), positionHeader_exports)).then((mod) => {
         return { default: mod.PositionHeaderWidget };
       })
@@ -5249,7 +5532,7 @@ var init_dataList_ui2 = __esm({
     };
     PositionsView2 = (props) => {
       return /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 2, children: [
-        /* @__PURE__ */ jsx(React11.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(React12.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
           LazyPositionHeaderWidget2,
           {
             pnlNotionalDecimalPrecision: props.pnlNotionalDecimalPrecision,
@@ -5259,7 +5542,7 @@ var init_dataList_ui2 = __esm({
             setUnPnlPriceBasic: props.setUnPnlPriceBasic
           }
         ) }),
-        /* @__PURE__ */ jsx(React11.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(React12.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
           MobilePositionsWidget,
           {
             symbol: props.showAllSymbol ? void 0 : props.symbol,
@@ -6892,7 +7175,7 @@ init_fundingRateModal_widget();
 var SortablePanel = (props) => {
   const { showIndicator, dragOverlay } = props;
   const nodeRef = useRef(null);
-  const [dimensions, setDimensions] = React11.useState(null);
+  const [dimensions, setDimensions] = React12.useState(null);
   const sortableResult = useSortable({
     id: props.id
   });
@@ -7442,35 +7725,35 @@ function useExtraHeight(options) {
     dataListHeight
   };
 }
-var LazyRiskRateWidget = React11.lazy(
+var LazyRiskRateWidget = React12.lazy(
   () => Promise.resolve().then(() => (init_riskRate(), riskRate_exports)).then((mod) => {
     return {
       default: mod.RiskRateWidget
     };
   })
 );
-var LazyAssetViewWidget = React11.lazy(
+var LazyAssetViewWidget = React12.lazy(
   () => Promise.resolve().then(() => (init_assetView(), assetView_exports)).then((mod) => {
     return {
       default: mod.AssetViewWidget
     };
   })
 );
-var LazyDataListWidget = React11.lazy(
+var LazyDataListWidget = React12.lazy(
   () => Promise.resolve().then(() => (init_dataList(), dataList_exports)).then((mod) => {
     return {
       default: mod.DataListWidget
     };
   })
 );
-var LazySwitchLayout = React11.lazy(
+var LazySwitchLayout = React12.lazy(
   () => Promise.resolve().then(() => (init_switchLayout(), switchLayout_exports)).then((mod) => {
     return {
       default: mod.SwitchLayout
     };
   })
 );
-var LazyOrderBookAndTradesWidget = React11.lazy(
+var LazyOrderBookAndTradesWidget = React12.lazy(
   () => Promise.resolve().then(() => (init_orderBookAndTrades(), orderBookAndTrades_exports)).then((mod) => {
     return {
       default: mod.OrderBookAndTradesWidget
@@ -7660,7 +7943,7 @@ var DesktopLayout3 = (props) => {
           onSymbolChange: props.onSymbolChange,
           closeCountdown,
           showCountdown,
-          trailing: /* @__PURE__ */ jsx(React11.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
+          trailing: /* @__PURE__ */ jsx(React12.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
             LazySwitchLayout,
             {
               layout,
@@ -7702,7 +7985,7 @@ var DesktopLayout3 = (props) => {
       children: tradingviewWidget
     }
   );
-  const orderbookWidget = /* @__PURE__ */ jsx(React11.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(LazyOrderBookAndTradesWidget, { symbol: props.symbol }) });
+  const orderbookWidget = /* @__PURE__ */ jsx(React12.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(LazyOrderBookAndTradesWidget, { symbol: props.symbol }) });
   const orderbookView = /* @__PURE__ */ jsx(
     Box,
     {
@@ -7717,7 +8000,7 @@ var DesktopLayout3 = (props) => {
       children: orderbookWidget
     }
   );
-  const dataListWidget = /* @__PURE__ */ jsx(React11.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
+  const dataListWidget = /* @__PURE__ */ jsx(React12.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
     LazyDataListWidget,
     {
       current: void 0,
@@ -7745,12 +8028,12 @@ var DesktopLayout3 = (props) => {
     return {
       margin: {
         className: "",
-        element: /* @__PURE__ */ jsx(React11.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(LazyRiskRateWidget, {}) })
+        element: /* @__PURE__ */ jsx(React12.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(LazyRiskRateWidget, {}) })
       },
       assets: {
         className: "oui-border oui-border-line-12",
         element: /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(React11.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(React12.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
             LazyAssetViewWidget,
             {
               isFirstTimeDeposit: props.isFirstTimeDeposit
@@ -8272,17 +8555,17 @@ function breakDownSeconds(total) {
   const secs = remAfterHours % SEC_PER_MIN;
   return [days, hours, mins, secs];
 }
-var LazyTopTabWidget = React11.lazy(
+var LazyTopTabWidget = React12.lazy(
   () => Promise.resolve().then(() => (init_topTab(), topTab_exports)).then((mod) => {
     return { default: mod.TopTabWidget };
   })
 );
-var LazyOrderBookAndEntryWidget = React11.lazy(
+var LazyOrderBookAndEntryWidget = React12.lazy(
   () => Promise.resolve().then(() => (init_orderBookAndEntry(), orderBookAndEntry_exports)).then((mod) => {
     return { default: mod.OrderBookAndEntryWidget };
   })
 );
-var LazyDataListWidget2 = React11.lazy(
+var LazyDataListWidget2 = React12.lazy(
   () => Promise.resolve().then(() => (init_dataList2(), dataList_exports2)).then((mod) => {
     return { default: mod.DataListWidget };
   })
@@ -8431,9 +8714,9 @@ var MobileLayout3 = (props) => {
   ] });
   return /* @__PURE__ */ jsx("div", { className: "oui-relative oui-grid oui-gap-1 oui-bg-base-10", children: /* @__PURE__ */ jsxs("main", { className: "oui-hide-scrollbar oui-space-y-1 oui-overflow-y-auto", children: [
     topBar,
-    /* @__PURE__ */ jsx(React11.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(LazyTopTabWidget, { className: "oui-mx-1 oui-rounded-xl oui-bg-base-9" }) }),
-    /* @__PURE__ */ jsx(React11.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(LazyOrderBookAndEntryWidget, {}) }),
-    /* @__PURE__ */ jsx(React11.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(React12.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(LazyTopTabWidget, { className: "oui-mx-1 oui-rounded-xl oui-bg-base-9" }) }),
+    /* @__PURE__ */ jsx(React12.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(LazyOrderBookAndEntryWidget, {}) }),
+    /* @__PURE__ */ jsx(React12.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
       LazyDataListWidget2,
       {
         symbol: props.symbol,
@@ -8501,6 +8784,6 @@ var TradingPage = (props) => {
 init_tradingPageContext();
 init_hooks();
 
-export { AssetView, AssetViewWidget, BottomNavBar, BottomNavBarWidget, DataList, DataListWidget, FundingRate, FundingRateDialogId, FundingRateModal, FundingRateModalWidget, FundingRateSheetId, FundingRateWidget, LastTrades, LastTradesWidget, OrderBook2 as OrderBook, OrderBookAndTrades, OrderBookAndTradesWidget, OrderBookWidget, PortfolioSheet, PortfolioSheetWidget, RiskRate, RiskRateWidget, SplitLayout, Trading, TradingPage, TradingPageContext, TradingPageProvider, TradingWidget, useBottomNavBarScript, useFundingRateModalScript, useFundingRateScript, useOrderBookAndTradesScript, useOrderBookScript, usePendingOrderCount, usePortfolioSheetScript, usePositionsCount, useTradingLocalStorage, useTradingPageContext, useTradingScript };
-//# sourceMappingURL=out.js.map
+export { AssetView, AssetViewWidget, BottomNavBar, BottomNavBarWidget, BuySellRatioBar, DataList, DataListWidget, FundingRate, FundingRateDialogId, FundingRateModal, FundingRateModalWidget, FundingRateSheetId, FundingRateWidget, LastTrades, LastTradesWidget, OrderBook2 as OrderBook, OrderBookAndTrades, OrderBookAndTradesWidget, OrderBookWidget, PortfolioSheet, PortfolioSheetWidget, RiskRate, RiskRateWidget, SplitLayout, Trading, TradingPage, TradingPageContext, TradingPageProvider, TradingWidget, useBottomNavBarScript, useFundingRateModalScript, useFundingRateScript, useOrderBookAndTradesScript, useOrderBookScript, usePendingOrderCount, usePortfolioSheetScript, usePositionsCount, useTradingLocalStorage, useTradingPageContext, useTradingScript };
+//# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map