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

package/dist/index.mjs

@@ -1,8 +1,8 @@
-import React6, { createContext, memo, useState, useRef, useCallback, useEffect, createElement, useMemo, useContext, isValidElement } from 'react';
+import React6, { createContext, memo, useState, useRef, useCallback, useEffect, useMemo, createElement, useContext, isValidElement } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { useSymbolsInfo, useBadgeBySymbol, useMarkets, MarketsType, isCurrentlyTrading, useFundingRateHistory, useFundingRates, useQuery, useMarketsStream, useLocalStorage, useGetRwaSymbolInfo, useTickerStream, useFundingRate, useMarketsStore, useFundingDetails, useSessionStorage, useMarketCategoriesConfig, useMarketList, useRwaSymbolsInfo, useFundingRateBySymbol, usePositionStream, useConfig, useAllBrokers } from '@orderly.network/hooks';
+import { useSymbolsInfo, useBadgeBySymbol, useMarkets, MarketsType, isCurrentlyTrading, useFundingRate, useFundingDetails, useFundingRateBySymbol, usePositionStream, useFundingRateHistory, useFundingRates, useQuery, useMarketsStream, useLocalStorage, useGetRwaSymbolInfo, useTickerStream, useMarketsStore, useSessionStorage, useMarketCategoriesConfig, useMarketList, useRwaSymbolsInfo, useConfig, useAllBrokers } from '@orderly.network/hooks';
 import { useTranslation, Trans, i18n } from '@orderly.network/i18n';
-import { Flex, TokenIcon, Text, SymbolBadge as SymbolBadge$1, Box, cn, Marquee, Checkbox, Divider, Tooltip, GradientText, useEmblaCarousel, useScreen, Badge, CloseIcon, CheckedSquareFillIcon, CheckSquareEmptyIcon, Button, DropdownMenuRoot, DropdownMenuTrigger, DropdownMenuPortal, DropdownMenuContent, Input, CloseCircleFillIcon, PlusIcon, DataTable, usePagination, Tabs, TabPanel, WarningIcon, NewsFillIcon, EmptyDataState, modal, RwaIcon, EmptyStateIcon, Picker, Select } from '@orderly.network/ui';
+import { injectable, Flex, TokenIcon, Text, SymbolBadge as SymbolBadge$1, Tooltip, Box, cn, Marquee, Checkbox, Divider, useScreen, WarningIcon, NewsFillIcon, CloseIcon, modal, GradientText, useEmblaCarousel, Badge, CheckedSquareFillIcon, CheckSquareEmptyIcon, Button, DropdownMenuRoot, DropdownMenuTrigger, DropdownMenuPortal, DropdownMenuContent, Input, CloseCircleFillIcon, PlusIcon, DataTable, usePagination, Tabs, TabPanel, EmptyDataState, RwaIcon, EmptyStateIcon, Picker, Select } from '@orderly.network/ui';
 import { Decimal, formatSymbol } from '@orderly.network/utils';
 import { pick } from 'ramda';
 import { LeftNavUI } from '@orderly.network/ui-scaffold';
@@ -137,7 +137,7 @@ var init_symbolDisplay = __esm({
     });
   }
 });
-var EditIcon, TrashIcon, AllMarketsIcon, NewListingsIcon, FavoritesIcon, UnFavoritesIcon, SearchIcon, MoveToTopIcon, OrderlyIcon, FavoritesIcon2, UnFavoritesIcon2, TopIcon, DeleteIcon, AddIcon, ActiveAddIcon, ExpandIcon, CollapseIcon, FilterIcon, TriangleDownIcon, ArrowLeftIcon;
+var EditIcon, TrashIcon, AllMarketsIcon, NewListingsIcon, FavoritesIcon, UnFavoritesIcon, SearchIcon, MoveToTopIcon, OrderlyIcon, FavoritesIcon2, UnFavoritesIcon2, TopIcon, DeleteIcon, AddIcon, ActiveAddIcon, FilterIcon, TriangleDownIcon, ArrowLeftIcon;
 var init_icons = __esm({
   "src/icons.tsx"() {
     EditIcon = (props) => /* @__PURE__ */ jsxs(
@@ -434,30 +434,6 @@ var init_icons = __esm({
         ]
       }
     );
-    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" })
-      }
-    );
-    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" })
-      }
-    );
     FilterIcon = (props) => /* @__PURE__ */ jsx(
       "svg",
       {
@@ -3627,7 +3603,7 @@ var init_expandMarkets_ui = __esm({
         return { default: mod.MarketsListWidget };
       })
     );
-    cls = "oui-h-[calc(100%_-_36px)]";
+    cls = "oui-h-full";
     ExpandMarkets = (props) => {
       const { activeTab, onTabChange, tabSort, onTabSort } = props;
       const { getFavoritesProps, renderEmptyView } = useFavoritesProps();
@@ -4591,53 +4567,17 @@ var init_fundingComparison = __esm({
 // src/components/sideMarkets/sideMarkets.ui.tsx
 var sideMarkets_ui_exports = {};
 __export(sideMarkets_ui_exports, {
-  SideMarkets: () => SideMarkets,
-  SideMarketsHeader: () => SideMarketsHeader
+  SideMarkets: () => SideMarkets
 });
-var SideMarketsHeader, SideMarkets;
+var SideMarkets;
 var init_sideMarkets_ui = __esm({
   "src/components/sideMarkets/sideMarkets.ui.tsx"() {
-    init_icons();
     init_expandMarkets();
     init_marketsList();
     init_marketsProvider();
     init_useFavoritesExtraProps();
-    SideMarketsHeader = (props) => {
-      const { resizeable, panelSize, onPanelSizeChange } = props;
-      const { t } = useTranslation();
-      const cls3 = cn(
-        "oui-text-base-contrast-36",
-        resizeable ? "oui-cursor-pointer hover:oui-text-base-contrast-80" : "oui-cursor-not-allowed"
-      );
-      return /* @__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: cls3 })
-              }
-            ),
-            (panelSize === "middle" || panelSize === "small") && /* @__PURE__ */ jsx(
-              "div",
-              {
-                onClick: resizeable ? () => onPanelSizeChange?.("large") : void 0,
-                children: /* @__PURE__ */ jsx(ExpandIcon, { className: cls3 })
-              }
-            )
-          ]
-        }
-      );
-    };
     SideMarkets = (props) => {
-      const { panelSize, activeTab, onTabChange, className, tabSort } = props;
+      const { activeTab, onTabChange, className, tabSort, panelSize } = props;
       const { symbol, onSymbolChange } = useMarketsContext();
       const { getFavoritesProps } = useFavoritesProps();
       const renderContent = () => {
@@ -4662,34 +4602,12 @@ var init_sideMarkets_ui = __esm({
           }
         );
       };
-      return /* @__PURE__ */ jsxs(
-        Flex,
+      return /* @__PURE__ */ jsx(
+        Box,
         {
-          id: "oui-side-markets",
-          className: cn("oui-relative oui-font-semibold", className),
-          direction: "column",
-          gapY: 5,
-          height: "100%",
           width: "100%",
-          children: [
-            /* @__PURE__ */ jsx(
-              SideMarketsHeader,
-              {
-                ...pick(["resizeable", "panelSize", "onPanelSizeChange"], props)
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              Box,
-              {
-                width: "100%",
-                className: cn(
-                  panelSize === "large" && "oui-h-[calc(100%_-_56px)]",
-                  panelSize === "middle" && "oui-h-[calc(100%_-_52px)]"
-                ),
-                children: renderContent()
-              }
-            )
-          ]
+          height: "100%",
+          children: renderContent()
         }
       );
     };
@@ -5944,7 +5862,6 @@ init_type();
 init_useTabSort();
 var SIDE_MARKETS_SEL_TAB_KEY2 = "orderly_side_markets_sel_tab_key";
 var useSideMarketsScript = (options) => {
-  const [panelSize, setPanelSize] = useState(options?.panelSize);
   const [activeTab, setActiveTab] = useLocalStorage(
     SIDE_MARKETS_SEL_TAB_KEY2,
     "all" /* All */
@@ -5952,26 +5869,25 @@ var useSideMarketsScript = (options) => {
   const { tabSort } = useTabSort({
     storageKey: SIDE_MARKETS_TAB_SORT_STORAGE_KEY
   });
-  const onPanelSizeChange = useCallback(
+  const panelSize = useMemo(() => {
+    if (options?.collapsed) {
+      return "small";
+    }
+    return options?.panelSize || "large";
+  }, [options?.collapsed, options?.panelSize]);
+  useCallback(
     (size) => {
       if (typeof options?.onPanelSizeChange === "function") {
         options.onPanelSizeChange(size);
-      } else {
-        setPanelSize(size);
       }
     },
     [options?.onPanelSizeChange]
   );
-  useEffect(() => {
-    setPanelSize(options?.panelSize);
-  }, [options?.panelSize]);
   return {
-    resizeable: options?.resizeable ?? true,
-    panelSize,
-    onPanelSizeChange,
     activeTab,
     onTabChange: setActiveTab,
-    tabSort
+    tabSort,
+    panelSize
   };
 };
 
@@ -5983,9 +5899,7 @@ var LazySideMarkets = React6.lazy(
   })
 );
 var SideMarketsWidget = (props) => {
-  const state = useSideMarketsScript(
-    pick(["resizeable", "panelSize", "onPanelSizeChange"], props)
-  );
+  const state = useSideMarketsScript(props);
   return /* @__PURE__ */ jsx(MarketsProvider, { ...pick(["symbol", "onSymbolChange"], props), children: /* @__PURE__ */ jsx(React6.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(LazySideMarkets, { ...state, className: props.className }) }) });
 };
 
@@ -6667,7 +6581,6 @@ var SymbolInfoBarDesktop = ({
   {
     intensity: 900,
     r: "2xl",
-    mt: 1,
     px: 3,
     className: cn(
       "oui-symbol-info-bar-desktop",
@@ -7089,10 +7002,14 @@ function useSymbolInfoBarFullScript(options) {
     openTimeInterval
   };
 }
+var SymbolInfoBarFullInjectable = injectable(
+  SymbolInfoBarFull,
+  "Trading.SymbolInfoBar.Desktop"
+);
 var SymbolInfoBarFullWidget = (props) => {
   const { symbol, ...rest } = props;
   const state = useSymbolInfoBarFullScript({ symbol });
-  return /* @__PURE__ */ jsx(SymbolInfoBarFull, { ...state, ...rest });
+  return /* @__PURE__ */ jsx(SymbolInfoBarFullInjectable, { ...state, ...rest });
 };
 
 // src/components/horizontalMarkets/horizontalMarkets.widget.tsx