@orderly.network/trading 3.0.4-alpha.1 → 3.0.4-alpha.3

package/dist/index.js

@@ -2211,7 +2211,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();
@@ -2237,9 +2237,13 @@ var init_asks_desktop = __esm({
         }
       );
     };
+    InjectableDesktopAsks = ui.injectable(
+      DesktopAsks,
+      "OrderBook.Desktop.Asks"
+    );
   }
 });
-var DesktopBids;
+var DesktopBids, InjectableDesktopBids;
 var init_bids_desktop = __esm({
   "src/components/desktop/orderBook/bids.desktop.tsx"() {
     init_types();
@@ -2264,6 +2268,10 @@ var init_bids_desktop = __esm({
         }
       );
     };
+    InjectableDesktopBids = ui.injectable(
+      DesktopBids,
+      "OrderBook.Desktop.Bids"
+    );
   }
 });
 var BuySellRatioSettings, MoreIcon;
@@ -2927,7 +2935,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,
                   {
@@ -2938,7 +2953,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,
                   {
@@ -6918,17 +6940,10 @@ var Account = (props) => {
     }
   );
 };
-ui.installExtension({
-  name: "mobile-account-menu",
-  scope: ["*"],
-  positions: [ui.ExtensionPositionEnum.MobileAccountMenu],
-  builder: useAccountScript,
-  __isInternal: true
-})((props) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Account, { ...props });
-});
+var InjectableAccount = ui.injectable(Account, "Account.MobileAccountMenu");
 var MobileAccountMenuExtension = () => {
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.ExtensionSlot, { position: ui.ExtensionPositionEnum.MobileAccountMenu });
+  const state = useAccountScript();
+  return /* @__PURE__ */ jsxRuntime.jsx(InjectableAccount, { ...state });
 };
 
 // src/components/mobile/bottomNavBar/balance/balance.ui.tsx
@@ -8403,7 +8418,10 @@ var DesktopLayout4 = (props) => {
           }
         ];
       },
-      sideEffects: ({ active, dragOverlay }) => {
+      sideEffects: ({
+        active,
+        dragOverlay
+      }) => {
         active.node.style.opacity = "0";
         const innerElement = dragOverlay.node.querySelector(".inner-content");
         if (innerElement) {
@@ -8476,11 +8494,9 @@ var DesktopLayout4 = (props) => {
   const marketsWidget = /* @__PURE__ */ jsxRuntime.jsx(
     markets.SideMarketsWidget,
     {
-      resizeable,
-      panelSize,
-      onPanelSizeChange,
       symbol: props.symbol,
-      onSymbolChange: props.onSymbolChange
+      onSymbolChange: props.onSymbolChange,
+      panelSize
     }
   );
   const toggleButtoncls = ui.cn(
@@ -8522,13 +8538,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(
         ui.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%",
@@ -8539,10 +8555,7 @@ var DesktopLayout4 = (props) => {
               ui.Box,
               {
                 width: "100%",
-                className: ui.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
               }
             )
@@ -8586,10 +8599,10 @@ var DesktopLayout4 = (props) => {
     {
       classNames: {
         root: ui.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: ui.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,
@@ -8721,7 +8734,8 @@ var DesktopLayout4 = (props) => {
         ui.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,
@@ -8751,10 +8765,20 @@ var DesktopLayout4 = (props) => {
   );
   const renderTradingViewAndOrderbookView = () => {
     if (max4XL && layout === "left") {
-      return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gapX: 2, style: { minHeight: orderbookMinHeight }, height: "100%", children: [
-        tradingViewAndOrderbookView,
-        marketLayout === "left" && marketsView
-      ] });
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        ui.Flex,
+        {
+          gapX: 2,
+          itemAlign: "stretch",
+          className: "oui-min-h-0",
+          style: { minHeight: orderbookMinHeight },
+          height: "100%",
+          children: [
+            tradingViewAndOrderbookView,
+            marketLayout === "left" && marketsView
+          ]
+        }
+      );
     }
     return tradingViewAndOrderbookView;
   };
@@ -8883,6 +8907,7 @@ var DesktopLayout4 = (props) => {
                                             pt: 3,
                                             r: "2xl",
                                             width: marketsWidth,
+                                            className: "oui-overflow-hidden",
                                             style: {
                                               minHeight: tradindviewMinHeight + orderbookMinHeight + space,
                                               maxHeight: tradindviewMaxHeight + orderbookMaxHeight + space
@@ -9060,8 +9085,9 @@ var DesktopLayout4 = (props) => {
                   /* @__PURE__ */ jsxRuntime.jsxs(
                     ui.Flex,
                     {
+                      itemAlign: "stretch",
                       className: ui.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,
@@ -9109,6 +9135,12 @@ var DesktopLayout4 = (props) => {
     }
   );
 };
+
+// src/pages/trading/trading.injectable.tsx
+var InjectableDesktopLayout = ui.injectable(
+  DesktopLayout4,
+  "Trading.Layout.Desktop"
+);
 var Countdown = ({
   timeInterval
 }) => {
@@ -9371,7 +9403,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