@orderly.network/markets 2.8.10 → 2.8.11-alpha.1

package/dist/index.mjs

@@ -1,9 +1,9 @@
-import React6, { createContext, useState, useRef, useEffect, useCallback, useMemo, useContext } from 'react';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import React6, { memo, createContext, useState, useRef, useEffect, useCallback, useMemo, useContext } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useSymbolsInfo, useMarkets, MarketsType, useFundingRateHistory, useFundingRates, useQuery, useMarketsStream, useLocalStorage, useGetRwaSymbolInfo, useTickerStream, useFundingRate, useMarketsStore, useFundingDetails, useSessionStorage, useFundingRateBySymbol, usePositionStream, isCurrentlyTrading } from '@orderly.network/hooks';
+import { Flex, TokenIcon, Text, Box, cn, Marquee, Checkbox, Divider, useEmblaCarousel, useScreen, Badge, Tooltip, CloseIcon, CheckedSquareFillIcon, CheckSquareEmptyIcon, Button, DropdownMenuRoot, DropdownMenuTrigger, DropdownMenuPortal, DropdownMenuContent, Input, CloseCircleFillIcon, PlusIcon, DataTable, usePagination, Tabs, TabPanel, EmptyDataState, NewsFillIcon, modal, GradientText, EmptyStateIcon, Picker, Select } from '@orderly.network/ui';
 import { useTranslation, Trans, i18n } from '@orderly.network/i18n';
-import { Box, cn, Flex, Marquee, Checkbox, Divider, Text, TokenIcon, useEmblaCarousel, useScreen, Badge, Tooltip, CloseIcon, CheckedSquareFillIcon, CheckSquareEmptyIcon, Button, DropdownMenuRoot, DropdownMenuTrigger, DropdownMenuPortal, DropdownMenuContent, Input, CloseCircleFillIcon, PlusIcon, DataTable, usePagination, Tabs, TabPanel, EmptyDataState, NewsFillIcon, modal, GradientText, EmptyStateIcon, Picker, Select } from '@orderly.network/ui';
 import { Decimal, formatSymbol } from '@orderly.network/utils';
-import { useMarkets, MarketsType, useFundingRateHistory, useFundingRates, useQuery, useMarketsStream, useLocalStorage, useGetRwaSymbolInfo, useTickerStream, useSymbolsInfo, useFundingRate, useMarketsStore, useFundingDetails, useSessionStorage, useFundingRateBySymbol, usePositionStream, isCurrentlyTrading } from '@orderly.network/hooks';
 import { pick } from 'ramda';
 import { LeftNavUI } from '@orderly.network/ui-scaffold';
 
@@ -43,6 +43,32 @@ var init_marketsProvider = __esm({
     };
   }
 });
+var SymbolDisplay;
+var init_symbolDisplay = __esm({
+  "src/components/symbolDisplay.tsx"() {
+    SymbolDisplay = memo((props) => {
+      const { children, size = "xs", ...rest } = props;
+      const symbol = children;
+      const symbolsInfo = useSymbolsInfo();
+      const displayName = symbolsInfo[symbol]("displayName");
+      if (displayName) {
+        return /* @__PURE__ */ jsxs(Flex, { gapX: 1, className: props.className, children: [
+          props.showIcon && /* @__PURE__ */ jsx(TokenIcon, { size, symbol }),
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              size: "xs",
+              weight: "semibold",
+              className: "oui-whitespace-nowrap oui-break-normal",
+              children: displayName
+            }
+          )
+        ] });
+      }
+      return /* @__PURE__ */ jsx(Text.formatted, { size: "xs", rule: "symbol", weight: "semibold", ...rest, children: symbol });
+    });
+  }
+});
 var EditIcon, TrashIcon, AllMarketsIcon, NewListingsIcon, FavoritesIcon, UnFavoritesIcon, SearchIcon, MoveToTopIcon, OrderlyIcon, FavoritesIcon2, UnFavoritesIcon2, TopIcon, DeleteIcon, AddIcon, ActiveAddIcon, ExpandIcon, CollapseIcon, FilterIcon, TriangleDownIcon, ArrowLeftIcon;
 var init_icons = __esm({
   "src/icons.tsx"() {
@@ -396,6 +422,7 @@ var MarketsHeader, BlockList, BlockItem, CardItem, ListItem, ScrollIndicator;
 var init_marketsHeader_ui = __esm({
   "src/pages/home/marketsHeader/marketsHeader.ui.tsx"() {
     init_marketsProvider();
+    init_symbolDisplay();
     init_icons();
     MarketsHeader = (props) => {
       const {
@@ -568,17 +595,7 @@ var init_marketsHeader_ui = __esm({
             props.onSymbol(item);
           },
           children: [
-            /* @__PURE__ */ jsx(Flex, { width: "100%", gapX: 1, children: /* @__PURE__ */ jsx(
-              Text.formatted,
-              {
-                rule: "symbol",
-                formatString: "base",
-                size: "xs",
-                weight: "semibold",
-                showIcon: true,
-                children: item.symbol
-              }
-            ) }),
+            /* @__PURE__ */ jsx(SymbolDisplay, { formatString: "base", showIcon: true, className: "oui-w-full", children: item.symbol }),
             /* @__PURE__ */ jsx(Flex, { width: "100%", justify: "end", children: /* @__PURE__ */ jsx(
               Text.numeral,
               {
@@ -684,10 +701,15 @@ function searchBySymbol(list, searchValue = "", formatString) {
   list?.forEach((item) => {
     const formattedSymbol = formatSymbol(item.symbol, formatString);
     const symbolLower = formattedSymbol.toLowerCase();
-    if (reg.test(formattedSymbol)) {
-      if (symbolLower === searchValueLower) {
+    const displayName = item.displayName;
+    const displayNameLower = displayName ? String(displayName).toLowerCase() : null;
+    const matchesSymbol = reg.test(formattedSymbol);
+    const matchesDisplayName = displayNameLower ? reg.test(displayNameLower) : false;
+    if (matchesSymbol || matchesDisplayName) {
+      const searchText = displayNameLower || symbolLower;
+      if (searchText === searchValueLower) {
         exactMatches.push(item);
-      } else if (symbolLower.startsWith(searchValueLower)) {
+      } else if (searchText.startsWith(searchValueLower)) {
         startsWithMatches.push(item);
       } else {
         otherMatches.push(item);
@@ -695,12 +717,10 @@ function searchBySymbol(list, searchValue = "", formatString) {
     }
   });
   const compareSymbols = (a, b) => {
-    const symbolA = formatSymbol(a.symbol, formatString);
-    const symbolB = formatSymbol(b.symbol, formatString);
-    if (symbolA < symbolB)
-      return -1;
-    if (symbolA > symbolB)
-      return 1;
+    const textA = a.displayName || formatSymbol(a.symbol, formatString);
+    const textB = b.displayName || formatSymbol(b.symbol, formatString);
+    if (textA < textB) return -1;
+    if (textA > textB) return 1;
     return 0;
   };
   startsWithMatches.sort(compareSymbols);
@@ -731,12 +751,9 @@ var compareValues;
 var init_utils = __esm({
   "src/utils.ts"() {
     compareValues = (aValue, bValue) => {
-      if (aValue == null && bValue == null)
-        return 0;
-      if (aValue == null)
-        return 1;
-      if (bValue == null)
-        return -1;
+      if (aValue == null && bValue == null) return 0;
+      if (aValue == null) return 1;
+      if (bValue == null) return -1;
       const aStr = String(aValue).trim();
       const bStr = String(bValue).trim();
       const aNum = Number(aStr);
@@ -795,8 +812,7 @@ function useDataSource() {
     [markets]
   );
   const tvl = useMemo(() => {
-    if (!balance)
-      return 0;
+    if (!balance) return 0;
     const { total_holding = 0 } = balance;
     return new Decimal(total_holding).toNumber();
   }, [balance]);
@@ -844,6 +860,7 @@ var MobileMarketsHeader, BlockList2, BlockItem2, CardItem2, ListItem2;
 var init_marketsHeader_mobile_ui = __esm({
   "src/pages/home/marketsHeader/marketsHeader.mobile.ui.tsx"() {
     init_marketsProvider();
+    init_symbolDisplay();
     init_icons();
     MobileMarketsHeader = (props) => {
       const {
@@ -1002,17 +1019,7 @@ var init_marketsHeader_mobile_ui = __esm({
             props.onSymbol(item);
           },
           children: [
-            /* @__PURE__ */ jsx(Flex, { width: "100%", gapX: 1, children: /* @__PURE__ */ jsx(
-              Text.formatted,
-              {
-                rule: "symbol",
-                formatString: "base",
-                size: "xs",
-                weight: "semibold",
-                showIcon: true,
-                children: item.symbol
-              }
-            ) }),
+            /* @__PURE__ */ jsx(SymbolDisplay, { formatString: "base", showIcon: true, className: "oui-w-full", children: item.symbol }),
             /* @__PURE__ */ jsx(Flex, { width: "100%", justify: "end", children: /* @__PURE__ */ jsx(
               Text.numeral,
               {
@@ -1063,6 +1070,7 @@ var CollapseMarkets;
 var init_collapseMarkets = __esm({
   "src/components/collapseMarkets/index.tsx"() {
     init_marketsProvider();
+    init_symbolDisplay();
     CollapseMarkets = (props) => {
       const { symbol, onSymbolChange } = useMarketsContext();
       const { t } = useTranslation();
@@ -1074,16 +1082,7 @@ var init_collapseMarkets = __esm({
           /* @__PURE__ */ jsxs(Flex, { direction: "column", itemAlign: "start", gapY: 1, children: [
             /* @__PURE__ */ jsxs(Flex, { gapX: 1, children: [
               /* @__PURE__ */ jsx(TokenIcon, { symbol: item.symbol, className: "oui-size-[18px]" }),
-              /* @__PURE__ */ jsx(
-                Text.formatted,
-                {
-                  rule: "symbol",
-                  formatString: "base",
-                  size: "2xs",
-                  weight: "semibold",
-                  children: item.symbol
-                }
-              )
+              /* @__PURE__ */ jsx(SymbolDisplay, { formatString: "base", size: "2xs", children: item.symbol })
             ] }),
             /* @__PURE__ */ jsx(Text, { size: "2xs", intensity: 36, children: t("markets.column.last") }),
             /* @__PURE__ */ jsx(Text, { size: "2xs", intensity: 36, children: t("markets.column.24hPercentage") })
@@ -1528,6 +1527,7 @@ var init_column = __esm({
     init_icons();
     init_favoritesDropdownMenu();
     init_rwaDotTooltip();
+    init_symbolDisplay();
     useSideMarketsColumns = (favorite, isFavoriteList = false) => {
       const { t } = useTranslation();
       return [
@@ -1567,16 +1567,7 @@ var init_column = __esm({
               /* @__PURE__ */ jsxs(Flex, { direction: "column", itemAlign: "start", gapY: 1, children: [
                 /* @__PURE__ */ jsxs(Flex, { gapX: 1, children: [
                   /* @__PURE__ */ jsx(TokenIcon, { symbol: record.symbol, className: "oui-size-[18px]" }),
-                  /* @__PURE__ */ jsx(
-                    Text.formatted,
-                    {
-                      rule: "symbol",
-                      formatString: "base",
-                      size: "2xs",
-                      weight: "semibold",
-                      children: record.symbol
-                    }
-                  ),
+                  /* @__PURE__ */ jsx(SymbolDisplay, { formatString: "base", size: "2xs", children: record.symbol }),
                   /* @__PURE__ */ jsx(RwaDotTooltip, { record }),
                   /* @__PURE__ */ jsxs(Badge, { size: "xs", color: "primary", children: [
                     record.leverage,
@@ -1959,16 +1950,7 @@ function getSymbolColumn(favorite, isFavoriteList = false) {
       return /* @__PURE__ */ jsxs(Flex, { gapX: 1, children: [
         favoritesIcon,
         /* @__PURE__ */ jsx(TokenIcon, { symbol: value, className: "oui-size-[18px]" }),
-        /* @__PURE__ */ jsx(
-          Text.formatted,
-          {
-            rule: "symbol",
-            formatString: "base",
-            size: "2xs",
-            weight: "semibold",
-            children: value
-          }
-        ),
+        /* @__PURE__ */ jsx(SymbolDisplay, { formatString: "base", size: "2xs", children: value }),
         /* @__PURE__ */ jsx(RwaDotTooltip, { record }),
         /* @__PURE__ */ jsxs(Badge, { size: "xs", color: "primary", children: [
           record.leverage,
@@ -2017,6 +1999,7 @@ var init_column2 = __esm({
     init_icons();
     init_favoritesDropdownMenu();
     init_rwaDotTooltip();
+    init_symbolDisplay();
   }
 });
 var FavoritesEmpty;
@@ -2614,6 +2597,7 @@ var init_column3 = __esm({
   "src/components/marketsListFull/column.tsx"() {
     init_icons();
     init_favoritesDropdownMenu();
+    init_symbolDisplay();
     useMarketsListFullColumns = (favorite, isFavoriteList = false) => {
       const { t } = useTranslation();
       const columns = useMemo(() => {
@@ -2657,17 +2641,7 @@ var init_column3 = __esm({
             width: 90,
             onSort: true,
             render: (value) => {
-              return /* @__PURE__ */ jsx(
-                Text.formatted,
-                {
-                  rule: "symbol",
-                  formatString: "base-type",
-                  size: "xs",
-                  weight: "semibold",
-                  showIcon: true,
-                  children: value
-                }
-              );
+              return /* @__PURE__ */ jsx(SymbolDisplay, { formatString: "base", showIcon: true, children: value });
             }
           },
           {
@@ -3312,6 +3286,7 @@ var init_expandMarkets = __esm({
 var createFundingRenderer, useFundingOverviewColumns, FundingPeriodSelect;
 var init_columns = __esm({
   "src/components/fundingOverview/columns.tsx"() {
+    init_symbolDisplay();
     createFundingRenderer = (dp = 5) => (value) => {
       if (value === 0) {
         return /* @__PURE__ */ jsx(Text, { children: " - " });
@@ -3347,15 +3322,7 @@ var init_columns = __esm({
                   className: isMobile ? "oui-size-[18px]" : "oui-size-5"
                 }
               ),
-              /* @__PURE__ */ jsx(
-                Text.formatted,
-                {
-                  rule: "symbol",
-                  formatString: "base-type",
-                  weight: "semibold",
-                  children: value
-                }
-              )
+              /* @__PURE__ */ jsx(SymbolDisplay, { formatString: "base", size: "xs", children: value })
             ] })
           },
           {
@@ -3534,8 +3501,7 @@ var init_fundingOverview_ui = __esm({
   }
 });
 function getFundingInterval(next_funding_time, last_funding_rate_timestamp) {
-  if (!next_funding_time || !last_funding_rate_timestamp)
-    return 8;
+  if (!next_funding_time || !last_funding_rate_timestamp) return 8;
   const diff = next_funding_time - last_funding_rate_timestamp;
   return Math.round(diff / 36e5);
 }
@@ -3702,6 +3668,7 @@ var CDN_PREFIX, useFundingColumns;
 var init_columns2 = __esm({
   "src/components/fundingComparison/columns.tsx"() {
     init_icons();
+    init_symbolDisplay();
     init_useEXchanges();
     CDN_PREFIX = "https://oss.orderly.network/static/exchange_logo";
     useFundingColumns = () => {
@@ -3733,16 +3700,7 @@ var init_columns2 = __esm({
                   className: isMobile ? "oui-size-[18px]" : "oui-size-5"
                 }
               ),
-              /* @__PURE__ */ jsx(
-                Text.formatted,
-                {
-                  rule: "symbol",
-                  formatString: "base-type",
-                  size: "xs",
-                  weight: "semibold",
-                  children: value
-                }
-              )
+              /* @__PURE__ */ jsx(SymbolDisplay, { formatString: "base", size: "xs", children: value })
             ] })
           },
           {
@@ -4397,6 +4355,7 @@ var init_dataItem_ui = __esm({
 var MarketItemComponent, MarketItem;
 var init_marketItem_ui = __esm({
   "src/components/horizontalMarkets/marketItem.ui.tsx"() {
+    init_symbolDisplay();
     MarketItemComponent = (props) => {
       const { symbol, tickerData, isActive, onSymbolClick } = props;
       const handleClick = React6.useCallback(() => {
@@ -4407,7 +4366,7 @@ var init_marketItem_ui = __esm({
         {
           direction: "row",
           className: cn(
-            "oui-cursor-pointer oui-rounded oui-h-[18px] oui-items-center oui-mr-3 oui-flex-shrink-0",
+            "oui-mr-3 oui-h-[18px] oui-shrink-0 oui-cursor-pointer oui-items-center oui-rounded",
             "oui-transition-all oui-duration-200"
           ),
           onClick: handleClick,
@@ -4415,12 +4374,10 @@ var init_marketItem_ui = __esm({
             /* @__PURE__ */ jsxs(Flex, { gapX: 1, itemAlign: "center", className: "oui-mr-[6px]", children: [
               /* @__PURE__ */ jsx(TokenIcon, { symbol, className: "oui-size-[18px]" }),
               /* @__PURE__ */ jsx(
-                Text.formatted,
+                SymbolDisplay,
                 {
-                  rule: "symbol",
                   formatString: "base",
-                  size: "xs",
-                  weight: "semibold",
+                  size: "2xs",
                   className: "oui-text-base-contrast-80",
                   children: symbol
                 }
@@ -4936,6 +4893,7 @@ init_favoritesTabs();
 init_marketsList();
 init_rwaTab();
 init_useFavoritesExtraProps();
+init_symbolDisplay();
 var LIST_ROW_COMPACT = "oui-h-auto";
 var TABLE_CLASSNAMES = {
   scroll: "oui-px-0",
@@ -4982,16 +4940,7 @@ var SubMenuMarkets = (props) => {
         render: (_, record) => {
           return /* @__PURE__ */ jsx("div", { className: "oui-mx-[-8px]", children: /* @__PURE__ */ jsxs(Flex, { gapX: 1, itemAlign: "center", children: [
             /* @__PURE__ */ jsx(TokenIcon, { symbol: record.symbol, className: "oui-size-[18px]" }),
-            /* @__PURE__ */ jsx(
-              Text.formatted,
-              {
-                rule: "symbol",
-                formatString: "base",
-                size: "2xs",
-                weight: "semibold",
-                children: record.symbol
-              }
-            ),
+            /* @__PURE__ */ jsx(SymbolDisplay, { formatString: "base", size: "2xs", children: record.symbol }),
             /* @__PURE__ */ jsxs(Badge, { size: "xs", color: "primary", children: [
               record.leverage,
               "x"
@@ -5231,6 +5180,7 @@ init_useFavoritesExtraProps();
 // src/components/marketsSheet/column.tsx
 init_icons();
 init_favoritesDropdownMenu();
+init_symbolDisplay();
 var getMarketsSheetColumns = (favorite, isFavoriteList = false) => {
   return [
     {
@@ -5269,16 +5219,7 @@ var getMarketsSheetColumns = (favorite, isFavoriteList = false) => {
           /* @__PURE__ */ jsxs(Flex, { direction: "column", itemAlign: "start", gapY: 1, children: [
             /* @__PURE__ */ jsxs(Flex, { gapX: 1, children: [
               /* @__PURE__ */ jsx(TokenIcon, { symbol: record.symbol, className: "oui-size-[18px]" }),
-              /* @__PURE__ */ jsx(
-                Text.formatted,
-                {
-                  rule: "symbol",
-                  formatString: "base",
-                  size: "2xs",
-                  weight: "semibold",
-                  children: record.symbol
-                }
-              ),
+              /* @__PURE__ */ jsx(SymbolDisplay, { formatString: "base", size: "2xs", children: record.symbol }),
               /* @__PURE__ */ jsxs(Badge, { size: "xs", color: "primary", children: [
                 record.leverage,
                 "x"
@@ -5477,6 +5418,7 @@ var MarketsSheetWidget = (props) => {
 
 // src/components/symbolInfoBar/symbolInfoBar.ui.tsx
 init_icons();
+init_symbolDisplay();
 var RwaTooltip = (props) => {
   const { isRwa, open, closeTimeInterval, openTimeInterval } = props;
   const { isMobile } = useScreen();
@@ -5629,21 +5571,11 @@ var SymbolInfoBar = (props) => {
   const symbolView = /* @__PURE__ */ jsxs(
     Flex,
     {
-      className: "oui-cursor-pointer oui-gap-x-[6px] oui-h-5",
+      className: "oui-h-5 oui-cursor-pointer oui-gap-x-[6px]",
       onClick: onSymbol,
       children: [
-        /* @__PURE__ */ jsx(
-          Text.formatted,
-          {
-            className: "oui-break-normal oui-whitespace-nowrap",
-            rule: "symbol",
-            formatString: "base-type",
-            size: "sm",
-            weight: "semibold",
-            children: symbol
-          }
-        ),
-        /* @__PURE__ */ jsx(TriangleDownIcon, { className: "oui-text-base-contrast-54 oui-w-[14px] oui-h-[14px]" })
+        /* @__PURE__ */ jsx(SymbolDisplay, { formatString: "base", size: "sm", children: symbol }),
+        /* @__PURE__ */ jsx(TriangleDownIcon, { className: "oui-size-[14px] oui-text-base-contrast-54" })
       ]
     }
   );
@@ -5652,11 +5584,11 @@ var SymbolInfoBar = (props) => {
     {
       className: cn(
         "oui-symbol-info-bar-mobile",
-        "oui-font-semibold oui-h-full",
+        "oui-h-full oui-font-semibold",
         props.className
       ),
       children: [
-        /* @__PURE__ */ jsxs(Flex, { gapX: 3, className: "oui-flex-1 oui-overflow-hidden oui-h-full", children: [
+        /* @__PURE__ */ jsxs(Flex, { gapX: 3, className: "oui-h-full oui-flex-1 oui-overflow-hidden", children: [
           /* @__PURE__ */ jsxs(Flex, { gapX: 3, children: [
             /* @__PURE__ */ jsx(TokenIcon, { symbol, size: "xs" }),
             /* @__PURE__ */ jsxs(Flex, { direction: "column", itemAlign: "start", children: [
@@ -5818,8 +5750,7 @@ var useFundingRateHintScript = (symbol) => {
     return `${new Decimal(est_funding_rate).mul(notional).todp(4).toNumber()}`;
   }, [est_funding_rate, notional, rows]);
   const calculateAnnualizedRate = (rate, intervalHours) => {
-    if (!rate || !intervalHours)
-      return void 0;
+    if (!rate || !intervalHours) return void 0;
     const annualizedRate = new Decimal(rate).mul(24).div(intervalHours).mul(365);
     return annualizedRate.todp(2, Decimal.ROUND_DOWN).toNumber();
   };
@@ -5872,6 +5803,9 @@ var FundingRateHintWidget = (props) => {
   const state = useFundingRateHintScript(props.symbol);
   return /* @__PURE__ */ jsx(FundingRateHint, { ...state, ...props });
 };
+
+// src/components/symbolInfoBarFull/symbolInfoBarFull.ui.tsx
+init_symbolDisplay();
 var LazyDropDownMarketsWidget = React6.lazy(
   () => Promise.resolve().then(() => (init_dropDownMarkets(), dropDownMarkets_exports)).then((mod) => {
     return { default: mod.DropDownMarketsWidget };
@@ -5928,7 +5862,7 @@ var SymbolInfoBarFull = (props) => {
     {
       direction: "column",
       itemAlign: "start",
-      className: "oui-gap-y-[2px] oui-shrink-0",
+      className: "oui-shrink-0 oui-gap-y-[2px]",
       children: [
         /* @__PURE__ */ jsx(
           LazyDropDownMarketsWidget,
@@ -5939,14 +5873,11 @@ var SymbolInfoBarFull = (props) => {
             children: /* @__PURE__ */ jsxs(Flex, { gapX: 1, className: "oui-cursor-pointer", children: [
               /* @__PURE__ */ jsx(TokenIcon, { symbol, className: "oui-size-4" }),
               /* @__PURE__ */ jsx(
-                Text.formatted,
+                SymbolDisplay,
                 {
-                  className: "oui-whitespace-nowrap oui-break-normal",
-                  rule: "symbol",
-                  formatString: "base-type",
+                  formatString: "base",
                   size: "xs",
-                  weight: "semibold",
-                  intensity: 98,
+                  className: "oui-text-base-contrast",
                   children: symbol
                 }
               ),
@@ -6341,15 +6272,13 @@ var useHorizontalMarketsScript = (options) => {
         (fav) => fav.tabs?.some((tab) => tab.id === selectedFavoriteTab.id)
       )?.map((fav) => fav.name);
       const map = /* @__PURE__ */ Object.create(null);
-      for (const m of markets)
-        map[m.symbol] = m;
+      for (const m of markets) map[m.symbol] = m;
       return (symbolsInTab || []).map((s) => map[s]).filter(Boolean);
     }
     if (selectedMarketType === "recent") {
       const symbolsInRecent = favorite.recent?.map((r) => r.name) || [];
       const map = /* @__PURE__ */ Object.create(null);
-      for (const m of markets)
-        map[m.symbol] = m;
+      for (const m of markets) map[m.symbol] = m;
       return symbolsInRecent.map((s) => map[s]).filter(Boolean);
     }
     return markets;
@@ -6371,10 +6300,8 @@ var useHorizontalMarketsScript = (options) => {
     const list = optionSymbols ? optionSymbols : sortedMarkets.map((m) => m.symbol);
     const max = optionMaxItems;
     if (typeof max === "number") {
-      if (max === -1)
-        return list;
-      if (max >= 0)
-        return list.slice(0, max);
+      if (max === -1) return list;
+      if (max >= 0) return list.slice(0, max);
     }
     return list;
   }, [sortedMarkets, optionSymbols, optionMaxItems]);
@@ -6827,7 +6754,8 @@ var MarketsMobileContent = (props) => {
 
 // src/index.ts
 init_marketsProvider();
+init_symbolDisplay();
 
-export { CollapseMarkets, DropDownMarkets, DropDownMarketsConetnt, DropDownMarketsWidget, ExpandMarkets, ExpandMarketsWidget, FavoritesDropdownMenu, FavoritesDropdownMenuWidget, FavoritesList, FavoritesListFull, FavoritesListFullWidget, FavoritesListWidget, FavoritesTab, FavoritesTabWidget, FundingComparison, FundingComparisonWidget, FundingOverview, FundingOverviewWidget, FundingTabName, HorizontalMarkets, HorizontalMarketsWidget, MarketItem, MarketTypeFilter, MarketsDataList, MarketsDataListWidget, MarketsHeader, MarketsHeaderWidget, MarketsHomePage, MarketsList, MarketsListFull, MarketsListFullWidget, MarketsListWidget, MarketsPageTab, MarketsProvider, MarketsSheet, MarketsSheetWidget, MarketsTabName, NewListingList, NewListingListWidget, RecentList, RecentListWidget, SideMarkets, SideMarketsWidget, SubMenuMarkets, SubMenuMarketsWidget, SymbolInfoBar, SymbolInfoBarFull, SymbolInfoBarFullWidget, SymbolInfoBarWidget, useDropDownMarketsColumns, useDropDownMarketsScript, useExpandMarketsScript, useFavoritesDropdownMenuScript, useFavoritesListFullScript, useFavoritesListScript, useFavoritesTabScript, useFundingComparisonScript, useFundingOverviewScript, useHorizontalMarketsScript, useMarketsDataListScript, useMarketsHeaderScript, useMarketsListFullScript, useMarketsListScript, useMarketsSheetScript, useNewListingListScript, useRecentListScript, useSideMarketsScript, useSubMenuMarketsScript, useSymbolInfoBarFullScript, useSymbolInfoBarScript };
-//# sourceMappingURL=out.js.map
+export { CollapseMarkets, DropDownMarkets, DropDownMarketsConetnt, DropDownMarketsWidget, ExpandMarkets, ExpandMarketsWidget, FavoritesDropdownMenu, FavoritesDropdownMenuWidget, FavoritesList, FavoritesListFull, FavoritesListFullWidget, FavoritesListWidget, FavoritesTab, FavoritesTabWidget, FundingComparison, FundingComparisonWidget, FundingOverview, FundingOverviewWidget, FundingTabName, HorizontalMarkets, HorizontalMarketsWidget, MarketItem, MarketTypeFilter, MarketsDataList, MarketsDataListWidget, MarketsHeader, MarketsHeaderWidget, MarketsHomePage, MarketsList, MarketsListFull, MarketsListFullWidget, MarketsListWidget, MarketsPageTab, MarketsProvider, MarketsSheet, MarketsSheetWidget, MarketsTabName, NewListingList, NewListingListWidget, RecentList, RecentListWidget, SideMarkets, SideMarketsWidget, SubMenuMarkets, SubMenuMarketsWidget, SymbolDisplay, SymbolInfoBar, SymbolInfoBarFull, SymbolInfoBarFullWidget, SymbolInfoBarWidget, useDropDownMarketsColumns, useDropDownMarketsScript, useExpandMarketsScript, useFavoritesDropdownMenuScript, useFavoritesListFullScript, useFavoritesListScript, useFavoritesTabScript, useFundingComparisonScript, useFundingOverviewScript, useHorizontalMarketsScript, useMarketsDataListScript, useMarketsHeaderScript, useMarketsListFullScript, useMarketsListScript, useMarketsSheetScript, useNewListingListScript, useRecentListScript, useSideMarketsScript, useSubMenuMarketsScript, useSymbolInfoBarFullScript, useSymbolInfoBarScript };
+//# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map