@kodiak-finance/orderly-trading 2.9.2 → 2.9.3

package/dist/index.mjs

@@ -1,16 +1,16 @@
-import { formatSymbol, isTestnet, Decimal, commifyOptional, removeTrailingZeros, exportToCSVFile, getLiquidationExportColumns, getOrderExportColumns, getPositionHistoryExportColumns, getPositionExportColumns, optimizeSymbolDisplay, getPrecisionByNumber } from '@kodiak-finance/orderly-utils';
-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 '@kodiak-finance/orderly-hooks';
-import React12, { forwardRef, useMemo, createContext, useContext, useState, useCallback, useEffect, useRef, createElement } from 'react';
+import { formatSymbol, Decimal, getPrecisionByNumber, commifyOptional, removeTrailingZeros, exportToCSVFile, getLiquidationExportColumns, getOrderExportColumns, getPositionHistoryExportColumns, getPositionExportColumns, isTestnet, optimizeSymbolDisplay } from '@kodiak-finance/orderly-utils';
+import { useBadgeBySymbol, 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 '@kodiak-finance/orderly-hooks';
+import React12, { forwardRef, useMemo, createContext, useEffect, useState, useRef, useCallback, useContext, createElement } from 'react';
 import { useDataTap, useAppContext } from '@kodiak-finance/orderly-react-app';
-import { AccountStatusEnum, ChainNamespace, AlgoOrderRootType, OrderStatus, OrderSide, AssetHistoryStatusEnum, AssetHistorySideEnum, TradingviewFullscreenKey, OrderEntrySortKeys, EMPTY_LIST } from '@kodiak-finance/orderly-types';
-import { useTranslation, i18n, Trans } from '@kodiak-finance/orderly-i18n';
-import { installExtension, ExtensionPositionEnum, cn, Button, formatAddress, registerSimpleDialog, registerSimpleSheet, modal, Flex, Divider, Checkbox, Text, useModal, toast as toast$1, ArrowRightShortIcon, Box, ListView, Grid, ArrowDownShortIcon, gradientTextVariants, EyeIcon, EyeCloseIcon, ChevronDownIcon, useScreen, Tooltip, Tabs, TabPanel, CloseIcon, DropdownMenuRoot, DropdownMenuTrigger, DropdownMenuPortal, DropdownMenuContent, Statistic, RefreshIcon, ArrowLeftRightIcon, ArrowUpShortIcon, InfoCircleIcon, ExtensionSlot, NewsFillIcon, SimpleSheet, SimpleDialog, ChainIcon, ExclamationFillIcon, Switch, Sheet, SheetTrigger, SheetContent, SettingFillIcon, Spinner, PopoverRoot, PopoverTrigger, PopoverContent, Select, Popover, CaretUpIcon, CaretDownIcon, Picker, TooltipRoot, TooltipTrigger, TooltipContent as TooltipContent$1, TooltipArrow, parseNumber } from '@kodiak-finance/orderly-ui';
+import { TradingviewFullscreenKey, OrderEntrySortKeys, AlgoOrderRootType, OrderStatus, OrderSide, AccountStatusEnum, AssetHistoryStatusEnum, AssetHistorySideEnum, ChainNamespace, EMPTY_LIST } from '@kodiak-finance/orderly-types';
+import { i18n, useTranslation, Trans } from '@kodiak-finance/orderly-i18n';
+import { injectable, cn, Button, formatAddress, registerSimpleDialog, registerSimpleSheet, Box, Flex, Text, toast as toast$1, Divider, Checkbox, useScreen, ExclamationFillIcon, CloseIcon, TooltipRoot, TooltipTrigger, TooltipContent as TooltipContent$1, TooltipArrow, parseNumber, 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, Sheet, SheetTrigger, SheetContent, SettingFillIcon, Spinner, PopoverRoot, PopoverTrigger, PopoverContent, Select, Popover, CaretUpIcon, CaretDownIcon, Picker } from '@kodiak-finance/orderly-ui';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { MobilePositionsWidget, PositionHistoryWidget, LiquidationWidget, PositionsWidget, CloseAllPositionsWidget, MobileLiquidationWidget, MobilePositionHistoryWidget, useReversePositionEnabled } from '@kodiak-finance/orderly-ui-positions';
 import { TabType, MobileOrderListWidget, DesktopOrderListWidget } from '@kodiak-finance/orderly-ui-orders';
 import { AuthGuard } from '@kodiak-finance/orderly-ui-connector';
 import { OrderEntryWidget, LTVRiskTooltipWidget } from '@kodiak-finance/orderly-ui-order-entry';
-import { DepositAndWithdrawWithSheetId, TransferSheetId, DepositStatusWidget, DepositAndWithdrawWithDialogId, TransferDialogId } from '@kodiak-finance/orderly-ui-transfer';
+import { DepositStatusWidget, DepositAndWithdrawWithSheetId, TransferSheetId, DepositAndWithdrawWithDialogId, TransferDialogId } from '@kodiak-finance/orderly-ui-transfer';
 import { TradingviewWidget } from '@kodiak-finance/orderly-ui-tradingview';
 import { AssetsModule } from '@kodiak-finance/orderly-portfolio';
 import Split from '@uiw/react-split';
@@ -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 { SymbolInfoBarWidget, SymbolInfoBarRiskNotice, MarketsSheetWidget, HorizontalMarketsWidget, SideMarketsWidget, SymbolInfoBarFullWidget } from '@kodiak-finance/orderly-markets';
+import { HorizontalMarketsWidget, SideMarketsWidget, SymbolInfoBarFullWidget, SymbolInfoBarWidget, SymbolInfoBarRiskNotice, MarketsSheetWidget } from '@kodiak-finance/orderly-markets';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -740,7 +740,7 @@ var init_dataList_ui = __esm({
     };
     LiquidationTab = () => {
       const { t } = useTranslation();
-      return /* @__PURE__ */ jsxs("div", { className: "oui-flex oui-space-x-1", children: [
+      return /* @__PURE__ */ jsxs("div", { className: "oui-flex oui-gap-x-1", children: [
         /* @__PURE__ */ jsx("span", { children: t("positions.liquidation") }),
         /* @__PURE__ */ jsx(
           Tooltip,
@@ -1094,7 +1094,7 @@ var init_lastTrades_ui = __esm({
           ),
           style: props.style,
           children: [
-            /* @__PURE__ */ jsx(Box, { className: "oui-pr-1", children: /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx(Box, { className: "oui-pe-1", children: /* @__PURE__ */ jsx(
               Header,
               {
                 base: props.base,
@@ -1129,7 +1129,7 @@ var init_lastTrades_ui = __esm({
         // >
         //   <Box className={cn("oui-flex-1", classNames?.left)}>{left}</Box>
         //   <Box className={cn("oui-flex-1", classNames?.mid)}>{mid}</Box>
-        //   <Box className={cn("oui-flex-1 oui-text-right", classNames?.right)}>
+        //   <Box className={cn("oui-flex-1 oui-text-end", classNames?.right)}>
         //     {right}
         //   </Box>
         // </Flex>
@@ -1143,7 +1143,7 @@ var init_lastTrades_ui = __esm({
             children: [
               /* @__PURE__ */ jsx("div", { className: cn("oui-flex-1", classNames?.left), children: left }),
               /* @__PURE__ */ jsx("div", { className: cn("oui-flex-1", classNames?.mid), children: mid }),
-              /* @__PURE__ */ jsx("div", { className: cn("oui-flex-1 oui-text-right", classNames?.right), children: right })
+              /* @__PURE__ */ jsx("div", { className: cn("oui-flex-1 oui-text-end", classNames?.right), children: right })
             ]
           }
         )
@@ -1177,7 +1177,7 @@ var init_lastTrades_ui = __esm({
             props.className,
             "oui-overflow-auto"
           ),
-          contentClassName: "!oui-space-y-0 oui-pr-[-4px]",
+          contentClassName: "!oui-space-y-0 -oui-me-[4px]",
           renderItem: (item, index) => {
             return /* @__PURE__ */ jsx(
               Row,
@@ -1485,7 +1485,7 @@ var init_assetView_ui = __esm({
             visible,
             size: "2xs",
             unit,
-            unitClassName: "oui-text-base-contrast-36 oui-ml-0.5",
+            unitClassName: "oui-text-base-contrast-36 oui-ms-0.5",
             as: "div",
             rule,
             padding: false,
@@ -2019,8 +2019,8 @@ var init_cellBar = __esm({
         "div",
         {
           className: cn(
-            "oui-absolute oui-right-[-100%] oui-top-0 oui-h-full oui-w-full oui-transition-transform oui-pointer-events-none",
-            direction === 0 /* LEFT_TO_RIGHT */ && "oui-left-[-100%]",
+            "oui-absolute oui-end-[-100%] oui-top-0 oui-h-full oui-w-full oui-transition-transform oui-pointer-events-none",
+            direction === 0 /* LEFT_TO_RIGHT */ && "oui-start-[-100%]",
             props.className
           ),
           style: transform
@@ -2064,7 +2064,7 @@ var init_cell_desktop = __esm({
       return /* @__PURE__ */ jsxs(
         "div",
         {
-          className: "oui-relative oui-flex oui-cursor-pointer oui-flex-row oui-justify-between oui-pl-3 oui-text-xs oui-tabular-nums oui-text-base-contrast-80",
+          className: "oui-relative oui-flex oui-cursor-pointer oui-flex-row oui-justify-between oui-ps-3 oui-text-xs oui-tabular-nums oui-text-base-contrast-80",
           style: { height: `${cellHeight}px` },
           onClick: () => {
             if (Number.isNaN(price) || Number.isNaN(quantity)) {
@@ -2079,7 +2079,7 @@ var init_cell_desktop = __esm({
               "div",
               {
                 className: cn(
-                  "oui-mr-2 oui-flex oui-basis-7/12 oui-flex-row oui-items-center",
+                  "oui-me-2 oui-flex oui-basis-7/12 oui-flex-row oui-items-center",
                   showTotal && "oui-basis-5/12"
                 ),
                 children: [
@@ -2087,13 +2087,13 @@ var init_cell_desktop = __esm({
                     "div",
                     {
                       className: cn(
-                        "oui-flex-1 oui-text-left",
+                        "oui-flex-1 oui-text-start",
                         props.type === "ask" /* ASK */ ? "oui-text-trade-loss" : "oui-text-trade-profit"
                       ),
-                      children: /* @__PURE__ */ jsx(Text.numeral, { dp, children: price })
+                      children: /* @__PURE__ */ jsx(Text.numeral, { dp, dir: "ltr", children: price })
                     }
                   ),
-                  /* @__PURE__ */ jsx("div", { className: "oui-flex-1 oui-text-right oui-text-base-contrast-80", children: /* @__PURE__ */ jsx(Text.numeral, { dp: base_dp, children: quantity }) })
+                  /* @__PURE__ */ jsx("div", { className: "oui-flex-1 oui-text-end oui-text-base-contrast-80", children: /* @__PURE__ */ jsx(Text.numeral, { dp: base_dp, dir: "ltr", children: quantity }) })
                 ]
               }
             ),
@@ -2106,11 +2106,11 @@ var init_cell_desktop = __esm({
                 ),
                 children: [
                   showTotal ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                    /* @__PURE__ */ jsx("div", { className: cn("oui-flex-1 oui-pr-3 oui-text-right"), children: /* @__PURE__ */ jsx(Text.numeral, { dp: base_dp, className: "oui-z-10", children: accumulated }) }),
-                    /* @__PURE__ */ jsx("div", { className: cn("oui-flex-1 oui-pr-3 oui-text-right"), children: /* @__PURE__ */ jsx(Text.numeral, { dp: 0, className: "oui-z-10", children: totalAmount }) })
-                  ] }) : /* @__PURE__ */ jsxs("div", { className: cn("oui-flex-1 oui-pr-3 oui-text-right"), children: [
-                    coinType === base && /* @__PURE__ */ jsx(Text.numeral, { dp: base_dp, className: "oui-z-10", children: accumulated }),
-                    coinType === quote && /* @__PURE__ */ jsx(Text.numeral, { dp: 0, className: "oui-z-10", children: totalAmount })
+                    /* @__PURE__ */ jsx("div", { className: cn("oui-flex-1 oui-pe-3 oui-text-end"), children: /* @__PURE__ */ jsx(Text.numeral, { dp: base_dp, className: "oui-z-10", dir: "ltr", children: accumulated }) }),
+                    /* @__PURE__ */ jsx("div", { className: cn("oui-flex-1 oui-pe-3 oui-text-end"), children: /* @__PURE__ */ jsx(Text.numeral, { dp: 0, className: "oui-z-10", dir: "ltr", children: totalAmount }) })
+                  ] }) : /* @__PURE__ */ jsxs("div", { className: cn("oui-flex-1 oui-pe-3 oui-text-end"), children: [
+                    coinType === base && /* @__PURE__ */ jsx(Text.numeral, { dp: base_dp, className: "oui-z-10", dir: "ltr", children: accumulated }),
+                    coinType === quote && /* @__PURE__ */ jsx(Text.numeral, { dp: 0, className: "oui-z-10", dir: "ltr", children: totalAmount })
                   ] }),
                   /* @__PURE__ */ jsx(
                     CellBar,
@@ -2127,7 +2127,7 @@ var init_cell_desktop = __esm({
               "div",
               {
                 className: cn(
-                  "oui-pointer-events-none oui-absolute oui-left-[4px] oui-size-[4px] oui-rounded-full",
+                  "oui-pointer-events-none oui-absolute oui-start-[4px] oui-size-[4px] oui-rounded-full",
                   props.type === "ask" /* ASK */ && "oui-bg-trade-loss",
                   props.type === "bid" /* BID */ && "oui-bg-trade-profit"
                 ),
@@ -2342,7 +2342,7 @@ var init_listBox_desktop = __esm({
     };
   }
 });
-var DesktopAsks;
+var DesktopAsks, InjectableDesktopAsks;
 var init_asks_desktop = __esm({
   "src/components/desktop/orderBook/asks.desktop.tsx"() {
     init_types();
@@ -2368,9 +2368,13 @@ var init_asks_desktop = __esm({
         }
       );
     };
+    InjectableDesktopAsks = injectable(
+      DesktopAsks,
+      "OrderBook.Desktop.Asks"
+    );
   }
 });
-var DesktopBids;
+var DesktopBids, InjectableDesktopBids;
 var init_bids_desktop = __esm({
   "src/components/desktop/orderBook/bids.desktop.tsx"() {
     init_types();
@@ -2395,6 +2399,10 @@ var init_bids_desktop = __esm({
         }
       );
     };
+    InjectableDesktopBids = injectable(
+      DesktopBids,
+      "OrderBook.Desktop.Bids"
+    );
   }
 });
 var BuySellRatioSettings, MoreIcon;
@@ -2887,12 +2895,12 @@ var init_markPrice_desktop = __esm({
     DesktopMarkPrice = (props) => {
       const { markPrice = 0, lastPrice, asks, bids, symbolInfo } = props;
       const { showTotal } = useOrderBookContext();
-      return /* @__PURE__ */ jsxs("div", { className: "oui-flex oui-flex-row oui-pl-3 oui-tabular-nums oui-justify-between oui-text-base-contrast-80 oui-text-xs oui-relative oui-cursor-pointer oui-py-[6px]", children: [
+      return /* @__PURE__ */ jsxs("div", { className: "oui-flex oui-flex-row oui-ps-3 oui-tabular-nums oui-justify-between oui-text-base-contrast-80 oui-text-xs oui-relative oui-cursor-pointer oui-py-[6px]", children: [
         /* @__PURE__ */ jsxs(
           "div",
           {
             className: cn(
-              "oui-basis-7/12 oui-flex oui-flex-row oui-items-center oui-mr-2 oui-justify-between",
+              "oui-basis-7/12 oui-flex oui-flex-row oui-items-center oui-me-2 oui-justify-between",
               showTotal && "oui-basis-5/12"
             ),
             children: [
@@ -2915,7 +2923,7 @@ var init_markPrice_desktop = __esm({
             className: cn(
               "oui-basis-5/12 oui-flex oui-items-center oui-fex-row oui-overflow-hidden oui-relative oui-justify-end",
               showTotal && "oui-basis-7/12",
-              "oui-pr-3"
+              "oui-pe-3"
             ),
             children: /* @__PURE__ */ jsx(Spread, { asks, bids })
           }
@@ -3040,7 +3048,7 @@ var init_index_desktop = __esm({
                 showBuySellRatio ? "oui-grid-rows-[auto,auto,1fr,auto,1fr,auto]" : "oui-grid-rows-[auto,auto,1fr,auto,1fr]"
               ),
               children: [
-                /* @__PURE__ */ jsxs(Flex, { justify: "between", itemAlign: "center", className: "oui-pr-3", children: [
+                /* @__PURE__ */ jsxs(Flex, { justify: "between", itemAlign: "center", className: "oui-pe-3", children: [
                   /* @__PURE__ */ jsx(
                     DesktopDepthSelect,
                     {
@@ -3058,7 +3066,14 @@ var init_index_desktop = __esm({
                   )
                 ] }),
                 /* @__PURE__ */ jsx(DesktopHeader, { quote, base }),
-                /* @__PURE__ */ jsx(DesktopAsks, { data: [...props.asks] }),
+                /* @__PURE__ */ jsx(
+                  InjectableDesktopAsks,
+                  {
+                    data: [...props.asks],
+                    symbolInfo: props.symbolInfo,
+                    depth: props.activeDepth
+                  }
+                ),
                 /* @__PURE__ */ jsx(
                   DesktopMarkPrice,
                   {
@@ -3069,7 +3084,14 @@ var init_index_desktop = __esm({
                     symbolInfo: props.symbolInfo
                   }
                 ),
-                /* @__PURE__ */ jsx(DesktopBids, { data: [...props.bids] }),
+                /* @__PURE__ */ jsx(
+                  InjectableDesktopBids,
+                  {
+                    data: [...props.bids],
+                    symbolInfo: props.symbolInfo,
+                    depth: props.activeDepth
+                  }
+                ),
                 showBuySellRatio && /* @__PURE__ */ jsx(
                   BuySellRatioBar,
                   {
@@ -3651,7 +3673,6 @@ var init_orderBook = __esm({
       } = 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,
         "qty"
@@ -3681,7 +3702,7 @@ var init_orderBook = __esm({
               itemAlign: "start",
               children: [
                 /* @__PURE__ */ jsxs(Flex, { justify: "between", itemAlign: "center", className: "oui-w-full", children: [
-                  /* @__PURE__ */ jsx(FundingRateWidget, { symbol }),
+                  /* @__PURE__ */ jsx(FundingRateWidget, { symbol: props.symbol }),
                   /* @__PURE__ */ jsx(
                     BuySellRatioSettings,
                     {
@@ -3740,6 +3761,7 @@ var init_orderBook_ui = __esm({
               lastPrice: props.lastPrice,
               depths: props.depths,
               activeDepth: props.selDepth,
+              symbol: props.symbol,
               base: props.base,
               quote: props.quote,
               isLoading: props.isLoading,
@@ -3884,6 +3906,8 @@ var init_orderBook_script = __esm({
         lastPrice: data?.middlePrice,
         depths,
         selDepth,
+        /** Canonical API / route symbol (do not reconstruct from base+quote). */
+        symbol,
         base,
         quote,
         isLoading,
@@ -3969,10 +3993,10 @@ var init_buySellRatioBar = __esm({
               /* @__PURE__ */ jsx(
                 "div",
                 {
-                  className: "oui-bg-trade-profit oui-mr-[2px] oui-rounded-sm",
+                  className: "oui-bg-trade-profit oui-me-[2px] oui-rounded-sm",
                   style: {
                     position: "absolute",
-                    left: 0,
+                    insetInlineStart: 0,
                     top: 0,
                     width: `${buyPercentage}%`,
                     height: "100%"
@@ -3982,10 +4006,10 @@ var init_buySellRatioBar = __esm({
               /* @__PURE__ */ jsx(
                 "div",
                 {
-                  className: "oui-bg-trade-loss oui-ml-[2px] oui-rounded-sm",
+                  className: "oui-bg-trade-loss oui-ms-[2px] oui-rounded-sm",
                   style: {
                     position: "absolute",
-                    left: `${buyPercentage}%`,
+                    insetInlineStart: `${buyPercentage}%`,
                     top: 0,
                     width: `${sellPercentage}%`,
                     height: "100%"
@@ -4012,7 +4036,9 @@ var orderBook_exports = {};
 __export(orderBook_exports, {
   BuySellRatioBar: () => BuySellRatioBar,
   OrderBook: () => OrderBook2,
+  OrderBookProvider: () => OrderBookProvider,
   OrderBookWidget: () => OrderBookWidget,
+  useOrderBookContext: () => useOrderBookContext,
   useOrderBookScript: () => useOrderBookScript
 });
 var init_orderBook2 = __esm({
@@ -4021,6 +4047,7 @@ var init_orderBook2 = __esm({
     init_orderBook_widget();
     init_orderBook_script();
     init_buySellRatioBar();
+    init_orderContext();
   }
 });
 var RiskRate;
@@ -4204,7 +4231,7 @@ var init_orderBookAndTrades_ui = __esm({
                     Title2,
                     {
                       title: t("trading.orderBook"),
-                      className: "oui-pl-3 oui-text-sm"
+                      className: "oui-ps-3 oui-text-sm"
                     }
                   ),
                   /* @__PURE__ */ jsx(React12.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
@@ -4270,8 +4297,8 @@ var init_orderBookAndTrades_ui = __esm({
                 props.setTab(tab);
               },
               classNames: {
-                tabsList: "oui-pl-3"
-                // tabsContent: props.tab === "lastTrades" ? 'oui-pl-3' : ''
+                tabsList: "oui-ps-3"
+                // tabsContent: props.tab === "lastTrades" ? 'oui-ps-3' : ''
               },
               size: "lg",
               children: [
@@ -5573,14 +5600,14 @@ var init_tradingview_ui = __esm({
               {
                 ref: props.dragRef,
                 className: cn(
-                  "oui-h-[1px] oui-absolute oui-left-0 oui-right-0 oui-bottom-0 oui-top-0 oui-z-10 oui-mt-[7px] oui-bg-base-contrast-12",
+                  "oui-h-[1px] oui-absolute oui-start-0 oui-end-0 oui-bottom-0 oui-top-0 oui-z-10 oui-mt-[7px] oui-bg-base-contrast-12",
                   props.dragging && "oui-bg-primary "
                 ),
                 children: /* @__PURE__ */ jsx(
                   KlineDragIcon,
                   {
                     className: cn(
-                      "oui-w-3 oui-h-3 oui-absolute oui-left-1/2 -oui-top-[5px] -oui-translate-y-[0.5px] oui-text-base-contrast-12",
+                      "oui-w-3 oui-h-3 oui-absolute oui-start-1/2 -oui-top-[5px] -oui-translate-y-[0.5px] oui-text-base-contrast-12",
                       props.dragging && " oui-text-primary"
                     )
                   }
@@ -6699,7 +6726,7 @@ var AccountInfo = (props) => {
               {
                 size: "2xs",
                 intensity: 80,
-                prefix: /* @__PURE__ */ jsx("div", { className: "oui-h-1 oui-w-1 oui-rounded-full oui-bg-success oui-pr-1" }),
+                prefix: /* @__PURE__ */ jsx("div", { className: "oui-h-1 oui-w-1 oui-rounded-full oui-bg-success oui-pe-1" }),
                 children: props.chainName
               }
             )
@@ -7077,17 +7104,10 @@ var Account = (props) => {
     }
   );
 };
-installExtension({
-  name: "mobile-account-menu",
-  scope: ["*"],
-  positions: [ExtensionPositionEnum.MobileAccountMenu],
-  builder: useAccountScript,
-  __isInternal: true
-})((props) => {
-  return /* @__PURE__ */ jsx(Account, { ...props });
-});
+var InjectableAccount = injectable(Account, "Account.MobileAccountMenu");
 var MobileAccountMenuExtension = () => {
-  return /* @__PURE__ */ jsx(ExtensionSlot, { position: ExtensionPositionEnum.MobileAccountMenu });
+  const state = useAccountScript();
+  return /* @__PURE__ */ jsx(InjectableAccount, { ...state });
 };
 
 // src/components/mobile/bottomNavBar/balance/balance.ui.tsx
@@ -7125,7 +7145,7 @@ var Chain = (props) => {
       },
       children: /* @__PURE__ */ jsxs(Box, { className: "oui-relative oui-rounded-t-[6px] oui-rounded-bl-[6px] oui-rounded-br-[3px] oui-bg-base-5 oui-px-2 oui-h-7 oui-flex oui-items-center", children: [
         /* @__PURE__ */ jsx(ChainIcon, { chainId: props.currentChainId, size: "2xs" }),
-        /* @__PURE__ */ jsx("div", { className: "oui-absolute oui-right-0 oui-bottom-0", children: /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx("div", { className: "oui-absolute oui-end-0 oui-bottom-0", children: /* @__PURE__ */ jsxs(
           "svg",
           {
             width: "9",
@@ -7576,7 +7596,7 @@ var RiskIndicator = (props) => {
         "div",
         {
           className: cn(
-            "oui-relative oui-w-[2px] oui-h-[2px] oui-rounded-full oui-bg-base-contrast after:oui-block after:oui-content-[''] after:oui-absolute after:oui-right-0 after:oui-w-[10px] after:oui-h-[2px] after:oui-bg-base-contrast-50",
+            "oui-relative oui-w-[2px] oui-h-[2px] oui-rounded-full oui-bg-base-contrast after:oui-block after:oui-content-[''] after:oui-absolute after:oui-end-0 after:oui-w-[10px] after:oui-h-[2px] after:oui-bg-base-contrast-50",
             className
             // {
             //   "oui-rotate-0": value > 1,
@@ -7982,7 +8002,7 @@ var SortablePanel = (props) => {
           {
             ...attributes,
             ...listeners,
-            className: "oui-absolute oui-right-0 oui-top-4 oui-cursor-move oui-py-1",
+            className: "oui-absolute oui-end-0 oui-top-4 oui-cursor-move oui-py-1",
             style: { touchAction: "none" },
             ref: setActivatorNodeRef,
             children: /* @__PURE__ */ jsx(
@@ -8051,7 +8071,7 @@ var RwaOutsideMarketHoursNotify = () => {
     /* @__PURE__ */ jsx(
       "button",
       {
-        className: "oui-w-6 oui-h-6 oui-right-0 oui-top-0 oui-absolute oui-bg-base-8 oui-rounded-tr-[10px] oui-rounded-bl-[10px] oui-inline-flex oui-justify-center oui-items-center oui-gap-2.5 oui-cursor-pointer",
+        className: "oui-w-6 oui-h-6 oui-end-0 oui-top-0 oui-absolute oui-bg-base-8 oui-rounded-tr-[10px] oui-rounded-bl-[10px] oui-inline-flex oui-justify-center oui-items-center oui-gap-2.5 oui-cursor-pointer",
         onClick: closeNotify,
         children: /* @__PURE__ */ jsx(CloseIcon, { opacity: 1, className: "oui-text-base-contrast", size: 16 })
       }
@@ -8562,7 +8582,10 @@ var DesktopLayout4 = (props) => {
           }
         ];
       },
-      sideEffects: ({ active, dragOverlay }) => {
+      sideEffects: ({
+        active,
+        dragOverlay
+      }) => {
         active.node.style.opacity = "0";
         const innerElement = dragOverlay.node.querySelector(".inner-content");
         if (innerElement) {
@@ -8635,11 +8658,9 @@ var DesktopLayout4 = (props) => {
   const marketsWidget = /* @__PURE__ */ jsx(
     SideMarketsWidget,
     {
-      resizeable,
-      panelSize,
-      onPanelSizeChange,
       symbol: props.symbol,
-      onSymbolChange: props.onSymbolChange
+      onSymbolChange: props.onSymbolChange,
+      panelSize
     }
   );
   const toggleButtoncls = cn(
@@ -8681,13 +8702,13 @@ var DesktopLayout4 = (props) => {
       height: "100%",
       width: marketsWidth,
       style: { minWidth: marketsWidth },
-      className: "oui-trading-markets-container oui-transition-all oui-duration-150",
+      className: "oui-trading-markets-container oui-min-h-0 oui-min-w-0 oui-max-w-full oui-transition-all oui-duration-150",
       onTransitionEnd: () => setAnimating(false),
       children: /* @__PURE__ */ jsxs(
         Flex,
         {
           id: "oui-side-markets",
-          className: "oui-relative oui-font-semibold",
+          className: "oui-relative oui-min-h-0 oui-min-w-0 oui-font-semibold",
           direction: "column",
           gapY: 5,
           height: "100%",
@@ -8698,10 +8719,7 @@ var DesktopLayout4 = (props) => {
               Box,
               {
                 width: "100%",
-                className: cn(
-                  panelSize === "large" && "oui-h-[calc(100%_-_56px)]",
-                  panelSize === "middle" && "oui-h-full"
-                ),
+                className: "oui-min-h-0 oui-min-w-0 oui-max-w-full oui-flex-1 oui-overflow-hidden oui-rounded-b-2xl",
                 children: marketsWidget
               }
             )
@@ -8745,10 +8763,10 @@ var DesktopLayout4 = (props) => {
     {
       classNames: {
         root: cn(
-          tradingViewFullScreen ? "!oui-absolute oui-top-0 oui-left-0 oui-right-0 oui-bottom-0 oui-z-[40] oui-bg-base-10" : "oui-z-1"
+          tradingViewFullScreen ? "!oui-absolute oui-inset-0 oui-z-40 oui-bg-base-10" : "oui-z-1"
         ),
         content: cn(
-          tradingViewFullScreen ? "oui-top-3 oui-bottom-3 oui-left-3 oui-right-3 oui-bg-base-9 oui-rounded-[16px] oui-overflow-hidden" : ""
+          tradingViewFullScreen ? "oui-inset-3 oui-overflow-hidden oui-rounded-[16px] oui-bg-base-9" : ""
         )
       },
       symbol: props.symbol,
@@ -8880,7 +8898,8 @@ var DesktopLayout4 = (props) => {
         Flex,
         {
           gap: 2,
-          className: "oui-flex-1 oui-overflow-hidden",
+          itemAlign: "stretch",
+          className: "oui-min-h-0 oui-flex-1 oui-overflow-hidden",
           style: { minWidth: marketsWidth + tradingViewMinWidth + space },
           children: [
             marketLayout === "left" && marketsView,
@@ -8910,10 +8929,20 @@ var DesktopLayout4 = (props) => {
   );
   const renderTradingViewAndOrderbookView = () => {
     if (max4XL && layout === "left") {
-      return /* @__PURE__ */ jsxs(Flex, { gapX: 2, style: { minHeight: orderbookMinHeight }, height: "100%", children: [
-        tradingViewAndOrderbookView,
-        marketLayout === "left" && marketsView
-      ] });
+      return /* @__PURE__ */ jsxs(
+        Flex,
+        {
+          gapX: 2,
+          itemAlign: "stretch",
+          className: "oui-min-h-0",
+          style: { minHeight: orderbookMinHeight },
+          height: "100%",
+          children: [
+            tradingViewAndOrderbookView,
+            marketLayout === "left" && marketsView
+          ]
+        }
+      );
     }
     return tradingViewAndOrderbookView;
   };
@@ -9042,6 +9071,7 @@ var DesktopLayout4 = (props) => {
                                             pt: 3,
                                             r: "2xl",
                                             width: marketsWidth,
+                                            className: "oui-overflow-hidden",
                                             style: {
                                               minHeight: tradindviewMinHeight + orderbookMinHeight + space,
                                               maxHeight: tradindviewMaxHeight + orderbookMaxHeight + space
@@ -9219,8 +9249,9 @@ var DesktopLayout4 = (props) => {
                   /* @__PURE__ */ jsxs(
                     Flex,
                     {
+                      itemAlign: "stretch",
                       className: cn(
-                        "oui-flex-1 oui-overflow-hidden",
+                        "oui-min-h-0 oui-flex-1 oui-overflow-hidden",
                         layout === "left" && "oui-flex-row-reverse"
                       ),
                       gap: 2,
@@ -9268,6 +9299,12 @@ var DesktopLayout4 = (props) => {
     }
   );
 };
+
+// src/pages/trading/trading.injectable.tsx
+var InjectableDesktopLayout = injectable(
+  DesktopLayout4,
+  "Trading.Layout.Desktop"
+);
 var Countdown = ({
   timeInterval
 }) => {
@@ -9413,7 +9450,7 @@ var MobileLayout4 = (props) => {
         ]
       }
     );
-  }, [isRwa, open, closeTimeInterval]);
+  }, [closeTimeInterval, isRwa, open, t]);
   const symbolInfoBar = /* @__PURE__ */ jsx(
     SymbolInfoBarWidget,
     {
@@ -9531,7 +9568,7 @@ var Trading = (props) => {
     return /* @__PURE__ */ jsx(MobileLayout4, { ...props });
   }
   return /* @__PURE__ */ jsx(
-    DesktopLayout4,
+    InjectableDesktopLayout,
     {
       className: "oui-h-[calc(100vh_-_48px_-_29px)] oui-bg-base-10",
       ...props
@@ -9583,6 +9620,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, OrderBookWidget, PortfolioSheet, PortfolioSheetWidget, RiskRate, RiskRateWidget, SplitLayout, Trading, TradingPage, TradingPageContext, TradingPageProvider, TradingWidget, useBottomNavBarScript, useFundingRateModalScript, useFundingRateScript, useOrderBookAndTradesScript, 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, OrderBookProvider, OrderBookWidget, PortfolioSheet, PortfolioSheetWidget, RiskRate, RiskRateWidget, SplitLayout, Trading, TradingPage, TradingPageContext, TradingPageProvider, TradingWidget, useBottomNavBarScript, useFundingRateModalScript, useFundingRateScript, useOrderBookAndTradesScript, useOrderBookContext, useOrderBookScript, usePendingOrderCount, usePortfolioSheetScript, usePositionsCount, useTradingLocalStorage, useTradingPageContext, useTradingScript };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map