@orderly.network/trading 3.0.0-beta.0 → 3.0.0-beta.2

package/dist/index.mjs

@@ -1,17 +1,17 @@
-import { useGetRwaSymbolOpenStatus, useLocalStorage, useGetRwaSymbolCloseTimeInterval, usePositionStream, useOrderStream, useAccount, useFundingDetails, useFundingRateBySymbol, useFundingRate, useSymbolsInfo, useOrderbookStream, useEventEmitter, useCollateral, useMarginRatio, useLeverage, useDebouncedCallback, useMediaQuery, useAssetsHistory, useGetRwaSymbolInfo, useWalletConnector, useConfig, useMutation, useChains, useReferralInfo, useCurEpochEstimate, TWType, useEpochInfo, useMarketTradeStream, useAccountInstance, useComputedLTV, useTickerStream } from '@orderly.network/hooks';
-import React12, { forwardRef, useMemo, createContext, useEffect, useState, useRef, useCallback, useContext, createElement } from 'react';
+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, useBadgeBySymbol, useGetRwaSymbolOpenStatus, useGetRwaSymbolCloseTimeInterval, useMarketTradeStream, useAccountInstance, useComputedLTV, useTickerStream } from '@orderly.network/hooks';
+import React12, { forwardRef, useMemo, createContext, useContext, useState, useCallback, useEffect, useRef, createElement } from 'react';
 import { useDataTap, useAppContext } from '@orderly.network/react-app';
-import { TradingviewFullscreenKey, OrderEntrySortKeys, AlgoOrderRootType, OrderStatus, OrderSide, AccountStatusEnum, AssetHistoryStatusEnum, AssetHistorySideEnum, ChainNamespace, EMPTY_LIST } from '@orderly.network/types';
-import { i18n, useTranslation, Trans } from '@orderly.network/i18n';
-import { injectable, cn, Button, formatAddress, registerSimpleDialog, registerSimpleSheet, Box, Flex, toast as toast$1, useScreen, ExclamationFillIcon, Text, CloseIcon, TooltipRoot, TooltipTrigger, TooltipContent as TooltipContent$1, TooltipArrow, parseNumber, Divider, ListView, Grid, ArrowDownShortIcon, gradientTextVariants, EyeIcon, EyeCloseIcon, ChevronDownIcon, modal, Tooltip, Tabs, TabPanel, DropdownMenuRoot, DropdownMenuTrigger, DropdownMenuPortal, DropdownMenuContent, Statistic, RefreshIcon, ArrowLeftRightIcon, ArrowUpShortIcon, InfoCircleIcon, NewsFillIcon, SimpleSheet, SimpleDialog, ChainIcon, useModal, ArrowRightShortIcon, Switch, Checkbox, Sheet, SheetTrigger, SheetContent, SettingFillIcon, Spinner, PopoverRoot, PopoverTrigger, PopoverContent, Select, Popover, CaretUpIcon, CaretDownIcon, Picker } from '@orderly.network/ui';
+import { AccountStatusEnum, ChainNamespace, AlgoOrderRootType, OrderStatus, OrderSide, AssetHistoryStatusEnum, AssetHistorySideEnum, TradingviewFullscreenKey, OrderEntrySortKeys, EMPTY_LIST } from '@orderly.network/types';
+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, 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 { Decimal, getPrecisionByNumber, commifyOptional, removeTrailingZeros, isTestnet, formatSymbol, optimizeSymbolDisplay } from '@orderly.network/utils';
+import { isTestnet, Decimal, commifyOptional, removeTrailingZeros, formatSymbol, optimizeSymbolDisplay, getPrecisionByNumber } from '@orderly.network/utils';
 import { AssetsModule } from '@orderly.network/portfolio';
 import { DesktopOrderListWidget, TabType, MobileOrderListWidget } from '@orderly.network/ui-orders';
 import { AuthGuard } from '@orderly.network/ui-connector';
 import { OrderEntryWidget, LTVRiskTooltipWidget } from '@orderly.network/ui-order-entry';
-import { DepositStatusWidget, DepositAndWithdrawWithSheetId, TransferSheetId, DepositAndWithdrawWithDialogId, TransferDialogId } from '@orderly.network/ui-transfer';
+import { DepositAndWithdrawWithSheetId, TransferSheetId, DepositStatusWidget, DepositAndWithdrawWithDialogId, TransferDialogId } from '@orderly.network/ui-transfer';
 import { TradingviewWidget } from '@orderly.network/ui-tradingview';
 import Split from '@uiw/react-split';
 import { ScanQRCodeWidget } from '@orderly.network/ui-scaffold';
@@ -20,7 +20,7 @@ import { useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, close
 import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
 import { sortableKeyboardCoordinates, SortableContext, verticalListSortingStrategy, useSortable, arrayMove } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
-import { HorizontalMarketsWidget, SideMarketsWidget, SymbolInfoBarFullWidget, SymbolInfoBarWidget, MarketsSheetWidget } from '@orderly.network/markets';
+import { SymbolInfoBarWidget, SymbolInfoBarRiskNotice, MarketsSheetWidget, HorizontalMarketsWidget, SideMarketsWidget, SymbolInfoBarFullWidget } from '@orderly.network/markets';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -2204,7 +2204,7 @@ var init_listBox_desktop = __esm({
     };
   }
 });
-var DesktopAsks, InjectableDesktopAsks;
+var DesktopAsks;
 var init_asks_desktop = __esm({
   "src/components/desktop/orderBook/asks.desktop.tsx"() {
     init_types();
@@ -2230,13 +2230,9 @@ var init_asks_desktop = __esm({
         }
       );
     };
-    InjectableDesktopAsks = injectable(
-      DesktopAsks,
-      "OrderBook.Desktop.Asks"
-    );
   }
 });
-var DesktopBids, InjectableDesktopBids;
+var DesktopBids;
 var init_bids_desktop = __esm({
   "src/components/desktop/orderBook/bids.desktop.tsx"() {
     init_types();
@@ -2261,10 +2257,6 @@ var init_bids_desktop = __esm({
         }
       );
     };
-    InjectableDesktopBids = injectable(
-      DesktopBids,
-      "OrderBook.Desktop.Bids"
-    );
   }
 });
 var BuySellRatioSettings, MoreIcon;
@@ -2799,14 +2791,21 @@ var init_markPrice_desktop = __esm({
         if (bids.length === 0 && asks.length === 0) {
           return 0;
         }
-        const bid1 = Number.isNaN(bids[0][0]) ? 0 : bids[0][0];
-        const index = asks.reverse().findIndex((item) => !Number.isNaN(item[0]));
-        let ask1 = 0;
+        const bidRaw = bids[0]?.[0];
+        const bid1 = bidRaw === void 0 || Number.isNaN(bidRaw) ? new Decimal(0) : new Decimal(bidRaw);
+        const asksReversed = [...asks].reverse();
+        const index = asksReversed.findIndex((item) => !Number.isNaN(item[0]));
+        let ask1 = new Decimal(0);
         if (index !== -1) {
-          ask1 = Number.isNaN(asks[index][0]) ? 0 : asks[index][0];
+          const askRaw = asksReversed[index][0];
+          ask1 = Number.isNaN(askRaw) ? new Decimal(0) : new Decimal(askRaw);
+        }
+        const mid = ask1.add(bid1).div(2);
+        if (mid.isZero()) {
+          return 0;
         }
-        const dValue = new Decimal(ask1).sub(bid1).div(new Decimal(ask1).add(bid1).div(2));
-        return Math.ceil(dValue.toNumber() * 1e6 + 0.1) / 1e4;
+        const dValue = ask1.sub(bid1).div(mid);
+        return dValue.mul(1e6).add(0.1).toDecimalPlaces(0, Decimal.ROUND_CEIL).div(1e4).toNumber();
       }, [asks, bids]);
       return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
         Tooltip,
@@ -2921,7 +2920,7 @@ var init_index_desktop = __esm({
                   )
                 ] }),
                 /* @__PURE__ */ jsx(DesktopHeader, { quote, base }),
-                /* @__PURE__ */ jsx(InjectableDesktopAsks, { data: [...props.asks] }),
+                /* @__PURE__ */ jsx(DesktopAsks, { data: [...props.asks] }),
                 /* @__PURE__ */ jsx(
                   DesktopMarkPrice,
                   {
@@ -2932,12 +2931,12 @@ var init_index_desktop = __esm({
                     symbolInfo: props.symbolInfo
                   }
                 ),
-                /* @__PURE__ */ jsx(InjectableDesktopBids, { data: [...props.bids] }),
+                /* @__PURE__ */ jsx(DesktopBids, { data: [...props.bids] }),
                 showBuySellRatio && /* @__PURE__ */ jsx(
                   BuySellRatioBar,
                   {
                     ratio: buySellRatio || null,
-                    className: "oui-h-[38px] oui-px-3 oui-text-2xs"
+                    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, {}) })
@@ -3868,9 +3867,7 @@ var orderBook_exports = {};
 __export(orderBook_exports, {
   BuySellRatioBar: () => BuySellRatioBar,
   OrderBook: () => OrderBook2,
-  OrderBookProvider: () => OrderBookProvider,
   OrderBookWidget: () => OrderBookWidget,
-  useOrderBookContext: () => useOrderBookContext,
   useOrderBookScript: () => useOrderBookScript
 });
 var init_orderBook2 = __esm({
@@ -3879,7 +3876,6 @@ var init_orderBook2 = __esm({
     init_orderBook_widget();
     init_orderBook_script();
     init_buySellRatioBar();
-    init_orderContext();
   }
 });
 var RiskRate;
@@ -4248,6 +4244,53 @@ var init_orderBookAndTrades = __esm({
     init_orderBookAndTrades_script();
   }
 });
+var KlineDragIcon, CollapseIcon, ExpandIcon;
+var init_icons = __esm({
+  "src/components/base/icons.tsx"() {
+    KlineDragIcon = (props) => /* @__PURE__ */ jsx(
+      "svg",
+      {
+        width: "12",
+        height: "12",
+        viewBox: "0 0 12 12",
+        fill: "currentColor",
+        xmlns: "http://www.w3.org/2000/svg",
+        ...props,
+        children: /* @__PURE__ */ jsx("g", { id: "Arrows-expand", children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            id: "Vector",
+            d: "M5.9989 1.00708C5.8709 1.00708 5.7369 1.05008 5.6394 1.14758L3.7959 3.00708L4.4989 3.71008L5.4989 2.72607V4.50708C5.4989 4.78308 5.7229 5.00708 5.9989 5.00708C6.2749 5.00708 6.4989 4.78308 6.4989 4.50708V2.72607L7.4989 3.71008L8.2019 3.00708L6.3584 1.14758C6.2604 1.05008 6.1269 1.00708 5.9989 1.00708ZM5.9989 7.00707C5.7229 7.00707 5.4989 7.23107 5.4989 7.50707V9.28808L4.4989 8.30407L3.7959 9.00707L5.6394 10.8666C5.8349 11.0616 6.1629 11.0616 6.3584 10.8666L8.2019 9.00707L7.4989 8.30407L6.4989 9.28808V7.50707C6.4989 7.23107 6.2749 7.00707 5.9989 7.00707Z"
+          }
+        ) })
+      }
+    );
+    CollapseIcon = (props) => /* @__PURE__ */ jsx(
+      "svg",
+      {
+        width: "16",
+        height: "16",
+        viewBox: "0 0 16 16",
+        fill: "currentColor",
+        xmlns: "http://www.w3.org/2000/svg",
+        ...props,
+        children: /* @__PURE__ */ jsx("path", { d: "M14.668.492a.85.85 0 0 0-.599.234l-3.567 3.568V2.159H8.835v4.167c0 .46.373.833.833.833h4.167V5.492H11.7l3.569-3.567a.86.86 0 0 0 0-1.199.85.85 0 0 0-.6-.234m-12.5 8.334v1.666h2.135L.736 14.06a.86.86 0 0 0 0 1.198.86.86 0 0 0 1.198 0l3.568-3.567v2.134h1.666V9.66a.834.834 0 0 0-.833-.833z" })
+      }
+    );
+    ExpandIcon = (props) => /* @__PURE__ */ jsx(
+      "svg",
+      {
+        width: "16",
+        height: "16",
+        viewBox: "0 0 16 16",
+        fill: "currentColor",
+        xmlns: "http://www.w3.org/2000/svg",
+        ...props,
+        children: /* @__PURE__ */ jsx("path", { d: "M6.326 8.826a.84.84 0 0 0-.6.234L2.16 12.627v-2.135H.492v4.167c0 .46.373.833.834.833h4.166v-1.667H3.357l3.567-3.567a.857.857 0 0 0 0-1.198.84.84 0 0 0-.598-.234M10.502.492V2.16h2.135L9.07 5.726a.857.857 0 0 0 0 1.199.86.86 0 0 0 1.197 0l3.568-3.568v2.135h1.667V1.326a.834.834 0 0 0-.834-.834z" })
+      }
+    );
+  }
+});
 
 // src/components/desktop/layout/switchLayout.tsx
 var switchLayout_exports = {};
@@ -5357,29 +5400,6 @@ var init_tradingview_script = __esm({
     Key = "TRADINGVIEW_MOBILE_HEIGHT";
   }
 });
-var KlineDragIcon;
-var init_icons = __esm({
-  "src/components/base/icons.tsx"() {
-    KlineDragIcon = (props) => /* @__PURE__ */ jsx(
-      "svg",
-      {
-        width: "12",
-        height: "12",
-        viewBox: "0 0 12 12",
-        fill: "currentColor",
-        xmlns: "http://www.w3.org/2000/svg",
-        ...props,
-        children: /* @__PURE__ */ jsx("g", { id: "Arrows-expand", children: /* @__PURE__ */ jsx(
-          "path",
-          {
-            id: "Vector",
-            d: "M5.9989 1.00708C5.8709 1.00708 5.7369 1.05008 5.6394 1.14758L3.7959 3.00708L4.4989 3.71008L5.4989 2.72607V4.50708C5.4989 4.78308 5.7229 5.00708 5.9989 5.00708C6.2749 5.00708 6.4989 4.78308 6.4989 4.50708V2.72607L7.4989 3.71008L8.2019 3.00708L6.3584 1.14758C6.2604 1.05008 6.1269 1.00708 5.9989 1.00708ZM5.9989 7.00707C5.7229 7.00707 5.4989 7.23107 5.4989 7.50707V9.28808L4.4989 8.30407L3.7959 9.00707L5.6394 10.8666C5.8349 11.0616 6.1629 11.0616 6.3584 10.8666L8.2019 9.00707L7.4989 8.30407L6.4989 9.28808V7.50707C6.4989 7.23107 6.2749 7.00707 5.9989 7.00707Z"
-          }
-        ) })
-      }
-    );
-  }
-});
 var TradingviewUI;
 var init_tradingview_ui = __esm({
   "src/components/mobile/tradingview/tradingview.ui.tsx"() {
@@ -6886,10 +6906,17 @@ var Account = (props) => {
     }
   );
 };
-var InjectableAccount = injectable(Account, "Account.MobileAccountMenu");
+installExtension({
+  name: "mobile-account-menu",
+  scope: ["*"],
+  positions: [ExtensionPositionEnum.MobileAccountMenu],
+  builder: useAccountScript,
+  __isInternal: true
+})((props) => {
+  return /* @__PURE__ */ jsx(Account, { ...props });
+});
 var MobileAccountMenuExtension = () => {
-  const state = useAccountScript();
-  return /* @__PURE__ */ jsx(InjectableAccount, { ...state });
+  return /* @__PURE__ */ jsx(ExtensionSlot, { position: ExtensionPositionEnum.MobileAccountMenu });
 };
 
 // src/components/mobile/bottomNavBar/balance/balance.ui.tsx
@@ -7691,6 +7718,9 @@ init_fundingRate();
 init_fundingRateModal_script();
 init_fundingRateModal_ui();
 init_fundingRateModal_widget();
+
+// src/pages/trading/trading.ui.desktop.tsx
+init_icons();
 var SortablePanel = (props) => {
   const { showIndicator, dragOverlay } = props;
   const nodeRef = useRef(null);
@@ -8014,7 +8044,7 @@ var useTradingScript = () => {
       case "middle":
         return 70;
       case "large":
-        return 280;
+        return 360;
       default:
         return 0;
     }
@@ -8310,9 +8340,19 @@ var DesktopLayout4 = (props) => {
     dataListMinHeight
   } = props;
   const { showCountdown, closeCountdown } = useShowRwaCountdown(props.symbol);
+  const { brokerName } = useBadgeBySymbol(props.symbol);
+  const { t } = useTranslation();
   const symbolInfoBarHeight2 = useMemo(() => {
-    return showCountdown ? 104 : 56;
-  }, [showCountdown]);
+    let height = 56;
+    if (brokerName) {
+      height += 46;
+      height += 8;
+    }
+    if (showCountdown) {
+      height += 48;
+    }
+    return height;
+  }, [showCountdown, brokerName]);
   const { isRwa, open } = useGetRwaSymbolOpenStatus(props.symbol);
   useEffect(() => {
     if (isRwa && !open) {
@@ -8431,6 +8471,36 @@ var DesktopLayout4 = (props) => {
       onSymbolChange: props.onSymbolChange
     }
   );
+  const toggleButtoncls = cn(
+    "oui-text-base-contrast-36",
+    resizeable ? "oui-cursor-pointer hover:oui-text-base-contrast-80" : "oui-cursor-not-allowed"
+  );
+  const marketsHeader = /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      className: panelSize === "small" ? "oui-absolute oui-end-[-20px] oui-z-50" : "oui-relative",
+      justify: panelSize === "large" ? "between" : "center",
+      width: "100%",
+      px: 3,
+      children: [
+        panelSize === "large" && /* @__PURE__ */ jsx(Text, { size: "base", intensity: 80, children: t("common.markets") }),
+        panelSize === "large" && /* @__PURE__ */ jsx(
+          "div",
+          {
+            onClick: resizeable ? () => onPanelSizeChange?.("middle") : void 0,
+            children: /* @__PURE__ */ jsx(CollapseIcon, { className: toggleButtoncls })
+          }
+        ),
+        (panelSize === "middle" || panelSize === "small") && /* @__PURE__ */ jsx(
+          "div",
+          {
+            onClick: resizeable ? () => onPanelSizeChange?.("large") : void 0,
+            children: /* @__PURE__ */ jsx(ExpandIcon, { className: toggleButtoncls })
+          }
+        )
+      ]
+    }
+  );
   const marketsView = /* @__PURE__ */ jsx(
     Box,
     {
@@ -8442,16 +8512,37 @@ var DesktopLayout4 = (props) => {
       style: { minWidth: marketsWidth },
       className: "oui-trading-markets-container oui-transition-all oui-duration-150",
       onTransitionEnd: () => setAnimating(false),
-      children: !animating && marketLayout === "left" && marketsWidget
+      children: /* @__PURE__ */ jsxs(
+        Flex,
+        {
+          id: "oui-side-markets",
+          className: "oui-relative oui-font-semibold",
+          direction: "column",
+          gapY: 5,
+          height: "100%",
+          width: "100%",
+          children: [
+            marketsHeader,
+            !animating && marketLayout === "left" && /* @__PURE__ */ jsx(
+              Box,
+              {
+                width: "100%",
+                className: cn(
+                  panelSize === "large" && "oui-h-[calc(100%_-_56px)]",
+                  panelSize === "middle" && "oui-h-full"
+                ),
+                children: marketsWidget
+              }
+            )
+          ]
+        }
+      )
     }
   );
   const symbolInfoBarView = /* @__PURE__ */ jsx(
     Box,
     {
       className: "oui-trading-symbolInfoBar-container",
-      intensity: 900,
-      r: "2xl",
-      px: 3,
       width: "100%",
       style: {
         minHeight: symbolInfoBarHeight2,
@@ -9006,13 +9097,6 @@ var DesktopLayout4 = (props) => {
     }
   );
 };
-var InjectableTradingPage = injectable(
-  DesktopLayout4,
-  "Trading.TradingPage"
-);
-var TradingPageExtension = (props) => {
-  return /* @__PURE__ */ jsx(InjectableTradingPage, { ...props });
-};
 var Countdown = ({
   timeInterval
 }) => {
@@ -9119,6 +9203,12 @@ var MaybeEqual = () => {
 var MobileLayout4 = (props) => {
   const { t } = useTranslation();
   const { isRwa, open, closeTimeInterval } = useGetRwaSymbolInfo(props.symbol);
+  const { brokerId, brokerName, brokerNameRaw, displayName } = useBadgeBySymbol(
+    props.symbol
+  );
+  const isCommunityListed = Boolean(brokerId ?? brokerName);
+  const baseFromSymbol = props.symbol?.split("_")[1] ?? props.symbol ?? "";
+  const symbolWithBroker = brokerName != null ? `${baseFromSymbol}-${brokerNameRaw}` : displayName ?? props.symbol ?? "";
   useEffect(() => {
     if (isRwa && !open) {
       showRwaOutsideMarketHoursNotify();
@@ -9212,7 +9302,17 @@ var MobileLayout4 = (props) => {
       )
     }
   );
-  const topBar = /* @__PURE__ */ jsxs(Box, { intensity: 900, className: "oui-rounded-xl", mx: 1, px: 3, py: 2, children: [
+  const topBar = /* @__PURE__ */ jsxs(Box, { children: [
+    /* @__PURE__ */ jsx(Flex, { mx: 1, children: /* @__PURE__ */ jsx(
+      SymbolInfoBarRiskNotice,
+      {
+        visible: isCommunityListed,
+        symbolWithBroker,
+        brokerName: brokerNameRaw ?? brokerName ?? "",
+        autoHeight: true,
+        className: "oui-my-1"
+      }
+    ) }),
     symbolInfoBar,
     /* @__PURE__ */ jsx(
       SimpleSheet,
@@ -9220,7 +9320,7 @@ var MobileLayout4 = (props) => {
         open: props.openMarketsSheet,
         onOpenChange: props.onOpenMarketsSheetChange,
         classNames: {
-          body: "oui-h-full oui-pb-0",
+          body: "oui-h-full oui-pb-0 ",
           content: "!oui-w-[372px] !oui-max-w-[372px] !oui-p-0"
         },
         contentProps: { side: "left", closeable: false },
@@ -9254,11 +9354,12 @@ var MobileLayout4 = (props) => {
 };
 var Trading = (props) => {
   const { isMobile } = useScreen();
+  const { t } = useTranslation();
   if (isMobile) {
     return /* @__PURE__ */ jsx(MobileLayout4, { ...props });
   }
   return /* @__PURE__ */ jsx(
-    TradingPageExtension,
+    DesktopLayout4,
     {
       className: "oui-h-[calc(100vh_-_48px_-_29px)] oui-bg-base-10",
       ...props
@@ -9310,6 +9411,6 @@ var TradingPage = (props) => {
 init_tradingPageContext();
 init_hooks();
 
-export { AssetView, AssetViewWidget, BottomNavBar, BottomNavBarWidget, BuySellRatioBar, DataList, DataListWidget, FundingRate, FundingRateDialogId, FundingRateModal, FundingRateModalWidget, FundingRateSheetId, FundingRateWidget, LastTrades, LastTradesWidget, OrderBook2 as OrderBook, OrderBookAndTrades, OrderBookAndTradesWidget, OrderBookProvider, OrderBookWidget, PortfolioSheet, PortfolioSheetWidget, RiskRate, RiskRateWidget, SplitLayout, Trading, TradingPage, TradingPageContext, TradingPageProvider, TradingWidget, useBottomNavBarScript, useFundingRateModalScript, useFundingRateScript, useOrderBookAndTradesScript, useOrderBookContext, useOrderBookScript, usePendingOrderCount, usePortfolioSheetScript, usePositionsCount, useTradingLocalStorage, useTradingPageContext, useTradingScript };
+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