@orderly.network/trading 2.12.4-alpha.0 → 3.0.0-alpha.0

package/dist/index.js

@@ -4251,6 +4251,53 @@ var init_orderBookAndTrades = __esm({
     init_orderBookAndTrades_script();
   }
 });
+var KlineDragIcon, CollapseIcon, ExpandIcon;
+var init_icons = __esm({
+  "src/components/base/icons.tsx"() {
+    KlineDragIcon = (props) => /* @__PURE__ */ jsxRuntime.jsx(
+      "svg",
+      {
+        width: "12",
+        height: "12",
+        viewBox: "0 0 12 12",
+        fill: "currentColor",
+        xmlns: "http://www.w3.org/2000/svg",
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx("g", { id: "Arrows-expand", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+      "svg",
+      {
+        width: "16",
+        height: "16",
+        viewBox: "0 0 16 16",
+        fill: "currentColor",
+        xmlns: "http://www.w3.org/2000/svg",
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+      "svg",
+      {
+        width: "16",
+        height: "16",
+        viewBox: "0 0 16 16",
+        fill: "currentColor",
+        xmlns: "http://www.w3.org/2000/svg",
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.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 = {};
@@ -5360,29 +5407,6 @@ var init_tradingview_script = __esm({
     Key = "TRADINGVIEW_MOBILE_HEIGHT";
   }
 });
-var KlineDragIcon;
-var init_icons = __esm({
-  "src/components/base/icons.tsx"() {
-    KlineDragIcon = (props) => /* @__PURE__ */ jsxRuntime.jsx(
-      "svg",
-      {
-        width: "12",
-        height: "12",
-        viewBox: "0 0 12 12",
-        fill: "currentColor",
-        xmlns: "http://www.w3.org/2000/svg",
-        ...props,
-        children: /* @__PURE__ */ jsxRuntime.jsx("g", { id: "Arrows-expand", children: /* @__PURE__ */ jsxRuntime.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"() {
@@ -7701,6 +7725,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 = React12.useRef(null);
@@ -8321,6 +8348,7 @@ var DesktopLayout4 = (props) => {
   } = props;
   const { showCountdown, closeCountdown } = useShowRwaCountdown(props.symbol);
   const { brokerName } = hooks.useBadgeBySymbol(props.symbol);
+  const { t } = i18n.useTranslation();
   const symbolInfoBarHeight2 = React12.useMemo(() => {
     let height = 56;
     if (brokerName) {
@@ -8450,6 +8478,36 @@ var DesktopLayout4 = (props) => {
       onSymbolChange: props.onSymbolChange
     }
   );
+  const toggleButtoncls = ui.cn(
+    "oui-text-base-contrast-36",
+    resizeable ? "oui-cursor-pointer hover:oui-text-base-contrast-80" : "oui-cursor-not-allowed"
+  );
+  const marketsHeader = /* @__PURE__ */ jsxRuntime.jsxs(
+    ui.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__ */ jsxRuntime.jsx(ui.Text, { size: "base", intensity: 80, children: t("common.markets") }),
+        panelSize === "large" && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            onClick: resizeable ? () => onPanelSizeChange?.("middle") : void 0,
+            children: /* @__PURE__ */ jsxRuntime.jsx(CollapseIcon, { className: toggleButtoncls })
+          }
+        ),
+        (panelSize === "middle" || panelSize === "small") && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            onClick: resizeable ? () => onPanelSizeChange?.("large") : void 0,
+            children: /* @__PURE__ */ jsxRuntime.jsx(ExpandIcon, { className: toggleButtoncls })
+          }
+        )
+      ]
+    }
+  );
   const marketsView = /* @__PURE__ */ jsxRuntime.jsx(
     ui.Box,
     {
@@ -8461,7 +8519,31 @@ 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__ */ jsxRuntime.jsxs(
+        ui.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__ */ jsxRuntime.jsx(
+              ui.Box,
+              {
+                width: "100%",
+                className: ui.cn(
+                  panelSize === "large" && "oui-h-[calc(100%_-_56px)]",
+                  panelSize === "middle" && "oui-h-full"
+                ),
+                children: marketsWidget
+              }
+            )
+          ]
+        }
+      )
     }
   );
   const symbolInfoBarView = /* @__PURE__ */ jsxRuntime.jsx(