@kodiak-finance/orderly-trading 2.9.2 → 2.9.3

package/dist/index.js

@@ -747,7 +747,7 @@ var init_dataList_ui = __esm({
     };
     LiquidationTab = () => {
       const { t } = orderlyI18n.useTranslation();
-      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-flex oui-space-x-1", children: [
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-flex oui-gap-x-1", children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { children: t("positions.liquidation") }),
         /* @__PURE__ */ jsxRuntime.jsx(
           orderlyUi.Tooltip,
@@ -1101,7 +1101,7 @@ var init_lastTrades_ui = __esm({
           ),
           style: props.style,
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Box, { className: "oui-pr-1", children: /* @__PURE__ */ jsxRuntime.jsx(
+            /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Box, { className: "oui-pe-1", children: /* @__PURE__ */ jsxRuntime.jsx(
               Header,
               {
                 base: props.base,
@@ -1136,7 +1136,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>
@@ -1150,7 +1150,7 @@ var init_lastTrades_ui = __esm({
             children: [
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: orderlyUi.cn("oui-flex-1", classNames?.left), children: left }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: orderlyUi.cn("oui-flex-1", classNames?.mid), children: mid }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: orderlyUi.cn("oui-flex-1 oui-text-right", classNames?.right), children: right })
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: orderlyUi.cn("oui-flex-1 oui-text-end", classNames?.right), children: right })
             ]
           }
         )
@@ -1184,7 +1184,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__ */ jsxRuntime.jsx(
               Row,
@@ -1492,7 +1492,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,
@@ -1961,16 +1961,16 @@ var init_assetView = __esm({
     init_assetView_widget();
   }
 });
-var OrderBookContext, useOrderBookContext, ORDERBOOK_COIN_TYPE_KEY, ORDERBOOK_MOBILE_COIN_TYPE_KEY, OrderBookProvider;
+var OrderBookContext; exports.useOrderBookContext = void 0; var ORDERBOOK_COIN_TYPE_KEY, ORDERBOOK_MOBILE_COIN_TYPE_KEY; exports.OrderBookProvider = void 0;
 var init_orderContext = __esm({
   "src/components/base/orderBook/orderContext.tsx"() {
     OrderBookContext = React12.createContext({
       cellHeight: 22
     });
-    useOrderBookContext = () => React12.useContext(OrderBookContext);
+    exports.useOrderBookContext = () => React12.useContext(OrderBookContext);
     ORDERBOOK_COIN_TYPE_KEY = "orderbook_coin_type";
     ORDERBOOK_MOBILE_COIN_TYPE_KEY = "orderbook_mobile_coin_unit";
-    OrderBookProvider = (props) => {
+    exports.OrderBookProvider = (props) => {
       const [mode, setMode] = React12.useState("quantity");
       const [totalMode, setTotalMode] = React12.useState("quantity");
       const memoizedValue = React12__default.default.useMemo(() => {
@@ -2026,8 +2026,8 @@ var init_cellBar = __esm({
         "div",
         {
           className: orderlyUi.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
@@ -2043,7 +2043,7 @@ var init_cell_desktop = __esm({
     init_orderContext();
     init_types();
     DesktopOrderBookCell = (props) => {
-      const { cellHeight, showTotal, onItemClick, depth, pendingOrders } = useOrderBookContext();
+      const { cellHeight, showTotal, onItemClick, depth, pendingOrders } = exports.useOrderBookContext();
       const {
         symbolInfo,
         currentHover,
@@ -2071,7 +2071,7 @@ var init_cell_desktop = __esm({
       return /* @__PURE__ */ jsxRuntime.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)) {
@@ -2086,7 +2086,7 @@ var init_cell_desktop = __esm({
               "div",
               {
                 className: orderlyUi.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: [
@@ -2094,13 +2094,13 @@ var init_cell_desktop = __esm({
                     "div",
                     {
                       className: orderlyUi.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__ */ jsxRuntime.jsx(orderlyUi.Text.numeral, { dp, children: price })
+                      children: /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text.numeral, { dp, dir: "ltr", children: price })
                     }
                   ),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-flex-1 oui-text-right oui-text-base-contrast-80", children: /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text.numeral, { dp: base_dp, children: quantity }) })
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-flex-1 oui-text-end oui-text-base-contrast-80", children: /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text.numeral, { dp: base_dp, dir: "ltr", children: quantity }) })
                 ]
               }
             ),
@@ -2113,11 +2113,11 @@ var init_cell_desktop = __esm({
                 ),
                 children: [
                   showTotal ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: orderlyUi.cn("oui-flex-1 oui-pr-3 oui-text-right"), children: /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text.numeral, { dp: base_dp, className: "oui-z-10", children: accumulated }) }),
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: orderlyUi.cn("oui-flex-1 oui-pr-3 oui-text-right"), children: /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text.numeral, { dp: 0, className: "oui-z-10", children: totalAmount }) })
-                  ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: orderlyUi.cn("oui-flex-1 oui-pr-3 oui-text-right"), children: [
-                    coinType === base && /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text.numeral, { dp: base_dp, className: "oui-z-10", children: accumulated }),
-                    coinType === quote && /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text.numeral, { dp: 0, className: "oui-z-10", children: totalAmount })
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: orderlyUi.cn("oui-flex-1 oui-pe-3 oui-text-end"), children: /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text.numeral, { dp: base_dp, className: "oui-z-10", dir: "ltr", children: accumulated }) }),
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: orderlyUi.cn("oui-flex-1 oui-pe-3 oui-text-end"), children: /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text.numeral, { dp: 0, className: "oui-z-10", dir: "ltr", children: totalAmount }) })
+                  ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: orderlyUi.cn("oui-flex-1 oui-pe-3 oui-text-end"), children: [
+                    coinType === base && /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text.numeral, { dp: base_dp, className: "oui-z-10", dir: "ltr", children: accumulated }),
+                    coinType === quote && /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text.numeral, { dp: 0, className: "oui-z-10", dir: "ltr", children: totalAmount })
                   ] }),
                   /* @__PURE__ */ jsxRuntime.jsx(
                     CellBar,
@@ -2134,7 +2134,7 @@ var init_cell_desktop = __esm({
               "div",
               {
                 className: orderlyUi.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"
                 ),
@@ -2190,7 +2190,7 @@ var init_listBox_desktop = __esm({
     };
     DesktopListBox = (props) => {
       const { data, type, countQty } = props;
-      const { symbolInfo, depth } = useOrderBookContext();
+      const { symbolInfo, depth } = exports.useOrderBookContext();
       const findMaxItem = React12.useCallback(() => {
         if (!data?.length) {
           return null;
@@ -2349,7 +2349,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();
@@ -2375,9 +2375,13 @@ var init_asks_desktop = __esm({
         }
       );
     };
+    InjectableDesktopAsks = orderlyUi.injectable(
+      DesktopAsks,
+      "OrderBook.Desktop.Asks"
+    );
   }
 });
-var DesktopBids;
+var DesktopBids, InjectableDesktopBids;
 var init_bids_desktop = __esm({
   "src/components/desktop/orderBook/bids.desktop.tsx"() {
     init_types();
@@ -2402,6 +2406,10 @@ var init_bids_desktop = __esm({
         }
       );
     };
+    InjectableDesktopBids = orderlyUi.injectable(
+      DesktopBids,
+      "OrderBook.Desktop.Bids"
+    );
   }
 });
 var BuySellRatioSettings, MoreIcon;
@@ -2541,7 +2549,7 @@ var init_header_desktop = __esm({
     };
     DesktopHeader = (props) => {
       const { base, quote = "USDC" } = props;
-      const { showTotal } = useOrderBookContext();
+      const { showTotal } = exports.useOrderBookContext();
       const { t } = orderlyI18n.useTranslation();
       const [popoverOpen, setOpen] = React12__default.default.useState(false);
       const [coinType] = orderlyHooks.useLocalStorage(ORDERBOOK_COIN_TYPE_KEY, base);
@@ -2893,13 +2901,13 @@ var init_markPrice_desktop = __esm({
     init_orderContext();
     DesktopMarkPrice = (props) => {
       const { markPrice = 0, lastPrice, asks, bids, symbolInfo } = props;
-      const { showTotal } = useOrderBookContext();
-      return /* @__PURE__ */ jsxRuntime.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: [
+      const { showTotal } = exports.useOrderBookContext();
+      return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
           "div",
           {
             className: orderlyUi.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: [
@@ -2922,7 +2930,7 @@ var init_markPrice_desktop = __esm({
             className: orderlyUi.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__ */ jsxRuntime.jsx(Spread, { asks, bids })
           }
@@ -3024,7 +3032,7 @@ var init_index_desktop = __esm({
         };
       }, []);
       return /* @__PURE__ */ jsxRuntime.jsx(
-        OrderBookProvider,
+        exports.OrderBookProvider,
         {
           cellHeight: props.cellHeight ?? 20,
           onItemClick: props.onItemClick,
@@ -3047,7 +3055,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__ */ jsxRuntime.jsxs(orderlyUi.Flex, { justify: "between", itemAlign: "center", className: "oui-pr-3", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { justify: "between", itemAlign: "center", className: "oui-pe-3", children: [
                   /* @__PURE__ */ jsxRuntime.jsx(
                     DesktopDepthSelect,
                     {
@@ -3065,7 +3073,14 @@ var init_index_desktop = __esm({
                   )
                 ] }),
                 /* @__PURE__ */ jsxRuntime.jsx(DesktopHeader, { quote, base }),
-                /* @__PURE__ */ jsxRuntime.jsx(DesktopAsks, { data: [...props.asks] }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  InjectableDesktopAsks,
+                  {
+                    data: [...props.asks],
+                    symbolInfo: props.symbolInfo,
+                    depth: props.activeDepth
+                  }
+                ),
                 /* @__PURE__ */ jsxRuntime.jsx(
                   DesktopMarkPrice,
                   {
@@ -3076,7 +3091,14 @@ var init_index_desktop = __esm({
                     symbolInfo: props.symbolInfo
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsx(DesktopBids, { data: [...props.bids] }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  InjectableDesktopBids,
+                  {
+                    data: [...props.bids],
+                    symbolInfo: props.symbolInfo,
+                    depth: props.activeDepth
+                  }
+                ),
                 showBuySellRatio && /* @__PURE__ */ jsxRuntime.jsx(
                   exports.BuySellRatioBar,
                   {
@@ -3418,7 +3440,7 @@ var init_listBox = __esm({
     init_cell();
     ListBox = (props) => {
       const { data } = props;
-      const { mode } = useOrderBookContext();
+      const { mode } = exports.useOrderBookContext();
       return /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Box, { className: "oui-orderBook-list oui-order-book-list oui-flex oui-w-full oui-flex-col oui-gap-px", children: data.map((item, index) => {
         return /* @__PURE__ */ jsxRuntime.jsx(
           OrderBookCell,
@@ -3597,7 +3619,7 @@ var init_markPrice2 = __esm({
     init_midPriceView();
     init_orderContext();
     MarkPrice = (props) => {
-      const { symbolInfo } = useOrderBookContext();
+      const { symbolInfo } = exports.useOrderBookContext();
       const { quote_dp } = symbolInfo;
       return /* @__PURE__ */ jsxRuntime.jsxs(
         orderlyUi.Flex,
@@ -3658,13 +3680,12 @@ var init_orderBook = __esm({
       } = props;
       const { t } = orderlyI18n.useTranslation();
       const [settingsOpen, setSettingsOpen] = React12.useState(false);
-      const symbol = `PERP_${props.symbolInfo.base}_${props.symbolInfo.quote}`;
       const [coinUnit, setCoinUnit] = orderlyHooks.useLocalStorage(
         ORDERBOOK_MOBILE_COIN_TYPE_KEY,
         "qty"
       );
       return /* @__PURE__ */ jsxRuntime.jsx(
-        OrderBookProvider,
+        exports.OrderBookProvider,
         {
           cellHeight: props.cellHeight ?? 20,
           onItemClick: props.onItemClick,
@@ -3688,7 +3709,7 @@ var init_orderBook = __esm({
               itemAlign: "start",
               children: [
                 /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { justify: "between", itemAlign: "center", className: "oui-w-full", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(exports.FundingRateWidget, { symbol }),
+                  /* @__PURE__ */ jsxRuntime.jsx(exports.FundingRateWidget, { symbol: props.symbol }),
                   /* @__PURE__ */ jsxRuntime.jsx(
                     BuySellRatioSettings,
                     {
@@ -3747,6 +3768,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,
@@ -3891,6 +3913,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,
@@ -3976,10 +4000,10 @@ var init_buySellRatioBar = __esm({
               /* @__PURE__ */ jsxRuntime.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%"
@@ -3989,10 +4013,10 @@ var init_buySellRatioBar = __esm({
               /* @__PURE__ */ jsxRuntime.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%"
@@ -4019,7 +4043,9 @@ var orderBook_exports = {};
 __export(orderBook_exports, {
   BuySellRatioBar: () => exports.BuySellRatioBar,
   OrderBook: () => exports.OrderBook,
+  OrderBookProvider: () => exports.OrderBookProvider,
   OrderBookWidget: () => exports.OrderBookWidget,
+  useOrderBookContext: () => exports.useOrderBookContext,
   useOrderBookScript: () => exports.useOrderBookScript
 });
 var init_orderBook2 = __esm({
@@ -4028,6 +4054,7 @@ var init_orderBook2 = __esm({
     init_orderBook_widget();
     init_orderBook_script();
     init_buySellRatioBar();
+    init_orderContext();
   }
 });
 exports.RiskRate = void 0;
@@ -4211,7 +4238,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__ */ jsxRuntime.jsx(React12__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -4277,8 +4304,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: [
@@ -5580,14 +5607,14 @@ var init_tradingview_ui = __esm({
               {
                 ref: props.dragRef,
                 className: orderlyUi.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__ */ jsxRuntime.jsx(
                   KlineDragIcon,
                   {
                     className: orderlyUi.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"
                     )
                   }
@@ -6706,7 +6733,7 @@ var AccountInfo = (props) => {
               {
                 size: "2xs",
                 intensity: 80,
-                prefix: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-h-1 oui-w-1 oui-rounded-full oui-bg-success oui-pr-1" }),
+                prefix: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-h-1 oui-w-1 oui-rounded-full oui-bg-success oui-pe-1" }),
                 children: props.chainName
               }
             )
@@ -7084,17 +7111,10 @@ var Account = (props) => {
     }
   );
 };
-orderlyUi.installExtension({
-  name: "mobile-account-menu",
-  scope: ["*"],
-  positions: [orderlyUi.ExtensionPositionEnum.MobileAccountMenu],
-  builder: useAccountScript,
-  __isInternal: true
-})((props) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Account, { ...props });
-});
+var InjectableAccount = orderlyUi.injectable(Account, "Account.MobileAccountMenu");
 var MobileAccountMenuExtension = () => {
-  return /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.ExtensionSlot, { position: orderlyUi.ExtensionPositionEnum.MobileAccountMenu });
+  const state = useAccountScript();
+  return /* @__PURE__ */ jsxRuntime.jsx(InjectableAccount, { ...state });
 };
 
 // src/components/mobile/bottomNavBar/balance/balance.ui.tsx
@@ -7132,7 +7152,7 @@ var Chain = (props) => {
       },
       children: /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.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__ */ jsxRuntime.jsx(orderlyUi.ChainIcon, { chainId: props.currentChainId, size: "2xs" }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-absolute oui-right-0 oui-bottom-0", children: /* @__PURE__ */ jsxRuntime.jsxs(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-absolute oui-end-0 oui-bottom-0", children: /* @__PURE__ */ jsxRuntime.jsxs(
           "svg",
           {
             width: "9",
@@ -7583,7 +7603,7 @@ var RiskIndicator = (props) => {
         "div",
         {
           className: orderlyUi.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,
@@ -7989,7 +8009,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__ */ jsxRuntime.jsx(
@@ -8058,7 +8078,7 @@ var RwaOutsideMarketHoursNotify = () => {
     /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(orderlyUi.CloseIcon, { opacity: 1, className: "oui-text-base-contrast", size: 16 })
       }
@@ -8569,7 +8589,10 @@ var DesktopLayout4 = (props) => {
           }
         ];
       },
-      sideEffects: ({ active, dragOverlay }) => {
+      sideEffects: ({
+        active,
+        dragOverlay
+      }) => {
         active.node.style.opacity = "0";
         const innerElement = dragOverlay.node.querySelector(".inner-content");
         if (innerElement) {
@@ -8642,11 +8665,9 @@ var DesktopLayout4 = (props) => {
   const marketsWidget = /* @__PURE__ */ jsxRuntime.jsx(
     orderlyMarkets.SideMarketsWidget,
     {
-      resizeable,
-      panelSize,
-      onPanelSizeChange,
       symbol: props.symbol,
-      onSymbolChange: props.onSymbolChange
+      onSymbolChange: props.onSymbolChange,
+      panelSize
     }
   );
   const toggleButtoncls = orderlyUi.cn(
@@ -8688,13 +8709,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__ */ jsxRuntime.jsxs(
         orderlyUi.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%",
@@ -8705,10 +8726,7 @@ var DesktopLayout4 = (props) => {
               orderlyUi.Box,
               {
                 width: "100%",
-                className: orderlyUi.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
               }
             )
@@ -8752,10 +8770,10 @@ var DesktopLayout4 = (props) => {
     {
       classNames: {
         root: orderlyUi.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: orderlyUi.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,
@@ -8887,7 +8905,8 @@ var DesktopLayout4 = (props) => {
         orderlyUi.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,
@@ -8917,10 +8936,20 @@ var DesktopLayout4 = (props) => {
   );
   const renderTradingViewAndOrderbookView = () => {
     if (max4XL && layout === "left") {
-      return /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { gapX: 2, style: { minHeight: orderbookMinHeight }, height: "100%", children: [
-        tradingViewAndOrderbookView,
-        marketLayout === "left" && marketsView
-      ] });
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        orderlyUi.Flex,
+        {
+          gapX: 2,
+          itemAlign: "stretch",
+          className: "oui-min-h-0",
+          style: { minHeight: orderbookMinHeight },
+          height: "100%",
+          children: [
+            tradingViewAndOrderbookView,
+            marketLayout === "left" && marketsView
+          ]
+        }
+      );
     }
     return tradingViewAndOrderbookView;
   };
@@ -9049,6 +9078,7 @@ var DesktopLayout4 = (props) => {
                                             pt: 3,
                                             r: "2xl",
                                             width: marketsWidth,
+                                            className: "oui-overflow-hidden",
                                             style: {
                                               minHeight: tradindviewMinHeight + orderbookMinHeight + space,
                                               maxHeight: tradindviewMaxHeight + orderbookMaxHeight + space
@@ -9226,8 +9256,9 @@ var DesktopLayout4 = (props) => {
                   /* @__PURE__ */ jsxRuntime.jsxs(
                     orderlyUi.Flex,
                     {
+                      itemAlign: "stretch",
                       className: orderlyUi.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,
@@ -9275,6 +9306,12 @@ var DesktopLayout4 = (props) => {
     }
   );
 };
+
+// src/pages/trading/trading.injectable.tsx
+var InjectableDesktopLayout = orderlyUi.injectable(
+  DesktopLayout4,
+  "Trading.Layout.Desktop"
+);
 var Countdown = ({
   timeInterval
 }) => {
@@ -9420,7 +9457,7 @@ var MobileLayout4 = (props) => {
         ]
       }
     );
-  }, [isRwa, open, closeTimeInterval]);
+  }, [closeTimeInterval, isRwa, open, t]);
   const symbolInfoBar = /* @__PURE__ */ jsxRuntime.jsx(
     orderlyMarkets.SymbolInfoBarWidget,
     {
@@ -9538,7 +9575,7 @@ var Trading = (props) => {
     return /* @__PURE__ */ jsxRuntime.jsx(MobileLayout4, { ...props });
   }
   return /* @__PURE__ */ jsxRuntime.jsx(
-    DesktopLayout4,
+    InjectableDesktopLayout,
     {
       className: "oui-h-[calc(100vh_-_48px_-_29px)] oui-bg-base-10",
       ...props