@orderly.network/markets 2.8.11-alpha.0 → 2.8.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/index.d.mts +6 -2
  2. package/dist/index.d.ts +6 -2
  3. package/dist/index.js +78 -138
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +81 -141
  6. package/dist/index.mjs.map +1 -1
  7. package/dist/styles.css +1 -1
  8. package/package.json +8 -8
package/dist/index.d.mts CHANGED
@@ -1,12 +1,13 @@
1
1
  import * as react from 'react';
2
2
  import react__default, { FC, ReactNode, PropsWithChildren } from 'react';
3
3
  import * as _orderly_network_ui from '@orderly.network/ui';
4
- import { SortOrder, Column, TableSort, DataTableClassNames } from '@orderly.network/ui';
4
+ import { SortOrder, Column, TableSort, DataTableClassNames, FormattedTextProps } from '@orderly.network/ui';
5
5
  import * as _orderly_network_types from '@orderly.network/types';
6
6
  import { API, RouterAdapter } from '@orderly.network/types';
7
7
  import * as _orderly_network_hooks from '@orderly.network/hooks';
8
8
  import { useMarkets, FavoriteTab, Favorite } from '@orderly.network/hooks';
9
9
  import { LeftNavProps } from '@orderly.network/ui-scaffold';
10
+ import * as react_jsx_runtime from 'react/jsx-runtime';
10
11
 
11
12
  type TEmblaApi = {
12
13
  scrollPrev: (jump?: boolean) => void;
@@ -823,4 +824,7 @@ type MarketsHomePageProps = MarketsProviderProps & {
823
824
  };
824
825
  declare const MarketsHomePage: FC<MarketsHomePageProps>;
825
826
 
826
- export { CollapseMarkets, type CollapseMarketsProps, DropDownMarkets, DropDownMarketsConetnt, DropDownMarketsWidget, ExpandMarkets, ExpandMarketsWidget, type FavoriteInstance, FavoritesDropdownMenu, FavoritesDropdownMenuWidget, FavoritesList, FavoritesListFull, FavoritesListFullWidget, FavoritesListWidget, FavoritesTab, FavoritesTabWidget, FundingComparison, FundingComparisonWidget, FundingOverview, FundingOverviewWidget, FundingTabName, type GetColumns, HorizontalMarkets, type HorizontalMarketsProps, type HorizontalMarketsScriptOptions, type HorizontalMarketsScriptReturn, HorizontalMarketsWidget, type HorizontalMarketsWidgetProps, MarketItem, type MarketItemProps, type MarketType, MarketTypeFilter, type MarketTypeFilterProps, MarketsDataList, MarketsDataListWidget, MarketsHeader, MarketsHeaderWidget, MarketsHomePage, MarketsList, MarketsListFull, MarketsListFullWidget, MarketsListWidget, MarketsPageTab, MarketsProvider, MarketsSheet, MarketsSheetWidget, MarketsTabName, NewListingList, NewListingListWidget, RecentList, RecentListWidget, SideMarkets, SideMarketsWidget, type SortType, SubMenuMarkets, type SubMenuMarketsProps, 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 };
827
+ type SymbolDisplayProps = FormattedTextProps;
828
+ declare const SymbolDisplay: react.MemoExoticComponent<(props: SymbolDisplayProps) => react_jsx_runtime.JSX.Element>;
829
+
830
+ export { CollapseMarkets, type CollapseMarketsProps, DropDownMarkets, DropDownMarketsConetnt, DropDownMarketsWidget, ExpandMarkets, ExpandMarketsWidget, type FavoriteInstance, FavoritesDropdownMenu, FavoritesDropdownMenuWidget, FavoritesList, FavoritesListFull, FavoritesListFullWidget, FavoritesListWidget, FavoritesTab, FavoritesTabWidget, FundingComparison, FundingComparisonWidget, FundingOverview, FundingOverviewWidget, FundingTabName, type GetColumns, HorizontalMarkets, type HorizontalMarketsProps, type HorizontalMarketsScriptOptions, type HorizontalMarketsScriptReturn, HorizontalMarketsWidget, type HorizontalMarketsWidgetProps, MarketItem, type MarketItemProps, type MarketType, MarketTypeFilter, type MarketTypeFilterProps, MarketsDataList, MarketsDataListWidget, MarketsHeader, MarketsHeaderWidget, MarketsHomePage, MarketsList, MarketsListFull, MarketsListFullWidget, MarketsListWidget, MarketsPageTab, MarketsProvider, MarketsSheet, MarketsSheetWidget, MarketsTabName, NewListingList, NewListingListWidget, RecentList, RecentListWidget, SideMarkets, SideMarketsWidget, type SortType, SubMenuMarkets, type SubMenuMarketsProps, 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 };
package/dist/index.d.ts CHANGED
@@ -1,12 +1,13 @@
1
1
  import * as react from 'react';
2
2
  import react__default, { FC, ReactNode, PropsWithChildren } from 'react';
3
3
  import * as _orderly_network_ui from '@orderly.network/ui';
4
- import { SortOrder, Column, TableSort, DataTableClassNames } from '@orderly.network/ui';
4
+ import { SortOrder, Column, TableSort, DataTableClassNames, FormattedTextProps } from '@orderly.network/ui';
5
5
  import * as _orderly_network_types from '@orderly.network/types';
6
6
  import { API, RouterAdapter } from '@orderly.network/types';
7
7
  import * as _orderly_network_hooks from '@orderly.network/hooks';
8
8
  import { useMarkets, FavoriteTab, Favorite } from '@orderly.network/hooks';
9
9
  import { LeftNavProps } from '@orderly.network/ui-scaffold';
10
+ import * as react_jsx_runtime from 'react/jsx-runtime';
10
11
 
11
12
  type TEmblaApi = {
12
13
  scrollPrev: (jump?: boolean) => void;
@@ -823,4 +824,7 @@ type MarketsHomePageProps = MarketsProviderProps & {
823
824
  };
824
825
  declare const MarketsHomePage: FC<MarketsHomePageProps>;
825
826
 
826
- export { CollapseMarkets, type CollapseMarketsProps, DropDownMarkets, DropDownMarketsConetnt, DropDownMarketsWidget, ExpandMarkets, ExpandMarketsWidget, type FavoriteInstance, FavoritesDropdownMenu, FavoritesDropdownMenuWidget, FavoritesList, FavoritesListFull, FavoritesListFullWidget, FavoritesListWidget, FavoritesTab, FavoritesTabWidget, FundingComparison, FundingComparisonWidget, FundingOverview, FundingOverviewWidget, FundingTabName, type GetColumns, HorizontalMarkets, type HorizontalMarketsProps, type HorizontalMarketsScriptOptions, type HorizontalMarketsScriptReturn, HorizontalMarketsWidget, type HorizontalMarketsWidgetProps, MarketItem, type MarketItemProps, type MarketType, MarketTypeFilter, type MarketTypeFilterProps, MarketsDataList, MarketsDataListWidget, MarketsHeader, MarketsHeaderWidget, MarketsHomePage, MarketsList, MarketsListFull, MarketsListFullWidget, MarketsListWidget, MarketsPageTab, MarketsProvider, MarketsSheet, MarketsSheetWidget, MarketsTabName, NewListingList, NewListingListWidget, RecentList, RecentListWidget, SideMarkets, SideMarketsWidget, type SortType, SubMenuMarkets, type SubMenuMarketsProps, 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 };
827
+ type SymbolDisplayProps = FormattedTextProps;
828
+ declare const SymbolDisplay: react.MemoExoticComponent<(props: SymbolDisplayProps) => react_jsx_runtime.JSX.Element>;
829
+
830
+ export { CollapseMarkets, type CollapseMarketsProps, DropDownMarkets, DropDownMarketsConetnt, DropDownMarketsWidget, ExpandMarkets, ExpandMarketsWidget, type FavoriteInstance, FavoritesDropdownMenu, FavoritesDropdownMenuWidget, FavoritesList, FavoritesListFull, FavoritesListFullWidget, FavoritesListWidget, FavoritesTab, FavoritesTabWidget, FundingComparison, FundingComparisonWidget, FundingOverview, FundingOverviewWidget, FundingTabName, type GetColumns, HorizontalMarkets, type HorizontalMarketsProps, type HorizontalMarketsScriptOptions, type HorizontalMarketsScriptReturn, HorizontalMarketsWidget, type HorizontalMarketsWidgetProps, MarketItem, type MarketItemProps, type MarketType, MarketTypeFilter, type MarketTypeFilterProps, MarketsDataList, MarketsDataListWidget, MarketsHeader, MarketsHeaderWidget, MarketsHomePage, MarketsList, MarketsListFull, MarketsListFullWidget, MarketsListWidget, MarketsPageTab, MarketsProvider, MarketsSheet, MarketsSheetWidget, MarketsTabName, NewListingList, NewListingListWidget, RecentList, RecentListWidget, SideMarkets, SideMarketsWidget, type SortType, SubMenuMarkets, type SubMenuMarketsProps, 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 };
package/dist/index.js CHANGED
@@ -2,10 +2,10 @@
2
2
 
3
3
  var React6 = require('react');
4
4
  var jsxRuntime = require('react/jsx-runtime');
5
- var i18n = require('@orderly.network/i18n');
5
+ var hooks = require('@orderly.network/hooks');
6
6
  var ui = require('@orderly.network/ui');
7
+ var i18n = require('@orderly.network/i18n');
7
8
  var utils = require('@orderly.network/utils');
8
- var hooks = require('@orderly.network/hooks');
9
9
  var ramda = require('ramda');
10
10
  var uiScaffold = require('@orderly.network/ui-scaffold');
11
11
 
@@ -49,6 +49,32 @@ var init_marketsProvider = __esm({
49
49
  };
50
50
  }
51
51
  });
52
+ exports.SymbolDisplay = void 0;
53
+ var init_symbolDisplay = __esm({
54
+ "src/components/symbolDisplay.tsx"() {
55
+ exports.SymbolDisplay = React6.memo((props) => {
56
+ const { children, size = "xs", ...rest } = props;
57
+ const symbol = children;
58
+ const symbolsInfo = hooks.useSymbolsInfo();
59
+ const displayName = symbolsInfo[symbol]("displayName");
60
+ if (displayName) {
61
+ return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gapX: 1, className: props.className, children: [
62
+ props.showIcon && /* @__PURE__ */ jsxRuntime.jsx(ui.TokenIcon, { size, symbol }),
63
+ /* @__PURE__ */ jsxRuntime.jsx(
64
+ ui.Text,
65
+ {
66
+ size: "xs",
67
+ weight: "semibold",
68
+ className: "oui-whitespace-nowrap oui-break-normal",
69
+ children: displayName
70
+ }
71
+ )
72
+ ] });
73
+ }
74
+ return /* @__PURE__ */ jsxRuntime.jsx(ui.Text.formatted, { size: "xs", rule: "symbol", weight: "semibold", ...rest, children: symbol });
75
+ });
76
+ }
77
+ });
52
78
  var EditIcon, TrashIcon, AllMarketsIcon, NewListingsIcon, FavoritesIcon, UnFavoritesIcon, SearchIcon, MoveToTopIcon, OrderlyIcon, FavoritesIcon2, UnFavoritesIcon2, TopIcon, DeleteIcon, AddIcon, ActiveAddIcon, ExpandIcon, CollapseIcon, FilterIcon, TriangleDownIcon, ArrowLeftIcon;
53
79
  var init_icons = __esm({
54
80
  "src/icons.tsx"() {
@@ -402,6 +428,7 @@ exports.MarketsHeader = void 0; var BlockList, BlockItem, CardItem, ListItem, Sc
402
428
  var init_marketsHeader_ui = __esm({
403
429
  "src/pages/home/marketsHeader/marketsHeader.ui.tsx"() {
404
430
  init_marketsProvider();
431
+ init_symbolDisplay();
405
432
  init_icons();
406
433
  exports.MarketsHeader = (props) => {
407
434
  const {
@@ -574,17 +601,7 @@ var init_marketsHeader_ui = __esm({
574
601
  props.onSymbol(item);
575
602
  },
576
603
  children: [
577
- /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { width: "100%", gapX: 1, children: /* @__PURE__ */ jsxRuntime.jsx(
578
- ui.Text.formatted,
579
- {
580
- rule: "symbol",
581
- formatString: "base",
582
- size: "xs",
583
- weight: "semibold",
584
- showIcon: true,
585
- children: item.symbol
586
- }
587
- ) }),
604
+ /* @__PURE__ */ jsxRuntime.jsx(exports.SymbolDisplay, { formatString: "base", showIcon: true, className: "oui-w-full", children: item.symbol }),
588
605
  /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { width: "100%", justify: "end", children: /* @__PURE__ */ jsxRuntime.jsx(
589
606
  ui.Text.numeral,
590
607
  {
@@ -690,10 +707,15 @@ function searchBySymbol(list, searchValue = "", formatString) {
690
707
  list?.forEach((item) => {
691
708
  const formattedSymbol = utils.formatSymbol(item.symbol, formatString);
692
709
  const symbolLower = formattedSymbol.toLowerCase();
693
- if (reg.test(formattedSymbol)) {
694
- if (symbolLower === searchValueLower) {
710
+ const displayName = item.displayName;
711
+ const displayNameLower = displayName ? String(displayName).toLowerCase() : null;
712
+ const matchesSymbol = reg.test(formattedSymbol);
713
+ const matchesDisplayName = displayNameLower ? reg.test(displayNameLower) : false;
714
+ if (matchesSymbol || matchesDisplayName) {
715
+ const searchText = displayNameLower || symbolLower;
716
+ if (searchText === searchValueLower) {
695
717
  exactMatches.push(item);
696
- } else if (symbolLower.startsWith(searchValueLower)) {
718
+ } else if (searchText.startsWith(searchValueLower)) {
697
719
  startsWithMatches.push(item);
698
720
  } else {
699
721
  otherMatches.push(item);
@@ -701,10 +723,10 @@ function searchBySymbol(list, searchValue = "", formatString) {
701
723
  }
702
724
  });
703
725
  const compareSymbols = (a, b) => {
704
- const symbolA = utils.formatSymbol(a.symbol, formatString);
705
- const symbolB = utils.formatSymbol(b.symbol, formatString);
706
- if (symbolA < symbolB) return -1;
707
- if (symbolA > symbolB) return 1;
726
+ const textA = a.displayName || utils.formatSymbol(a.symbol, formatString);
727
+ const textB = b.displayName || utils.formatSymbol(b.symbol, formatString);
728
+ if (textA < textB) return -1;
729
+ if (textA > textB) return 1;
708
730
  return 0;
709
731
  };
710
732
  startsWithMatches.sort(compareSymbols);
@@ -844,6 +866,7 @@ var MobileMarketsHeader, BlockList2, BlockItem2, CardItem2, ListItem2;
844
866
  var init_marketsHeader_mobile_ui = __esm({
845
867
  "src/pages/home/marketsHeader/marketsHeader.mobile.ui.tsx"() {
846
868
  init_marketsProvider();
869
+ init_symbolDisplay();
847
870
  init_icons();
848
871
  MobileMarketsHeader = (props) => {
849
872
  const {
@@ -1002,17 +1025,7 @@ var init_marketsHeader_mobile_ui = __esm({
1002
1025
  props.onSymbol(item);
1003
1026
  },
1004
1027
  children: [
1005
- /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { width: "100%", gapX: 1, children: /* @__PURE__ */ jsxRuntime.jsx(
1006
- ui.Text.formatted,
1007
- {
1008
- rule: "symbol",
1009
- formatString: "base",
1010
- size: "xs",
1011
- weight: "semibold",
1012
- showIcon: true,
1013
- children: item.symbol
1014
- }
1015
- ) }),
1028
+ /* @__PURE__ */ jsxRuntime.jsx(exports.SymbolDisplay, { formatString: "base", showIcon: true, className: "oui-w-full", children: item.symbol }),
1016
1029
  /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { width: "100%", justify: "end", children: /* @__PURE__ */ jsxRuntime.jsx(
1017
1030
  ui.Text.numeral,
1018
1031
  {
@@ -1063,6 +1076,7 @@ exports.CollapseMarkets = void 0;
1063
1076
  var init_collapseMarkets = __esm({
1064
1077
  "src/components/collapseMarkets/index.tsx"() {
1065
1078
  init_marketsProvider();
1079
+ init_symbolDisplay();
1066
1080
  exports.CollapseMarkets = (props) => {
1067
1081
  const { symbol, onSymbolChange } = useMarketsContext();
1068
1082
  const { t } = i18n.useTranslation();
@@ -1074,16 +1088,7 @@ var init_collapseMarkets = __esm({
1074
1088
  /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", itemAlign: "start", gapY: 1, children: [
1075
1089
  /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gapX: 1, children: [
1076
1090
  /* @__PURE__ */ jsxRuntime.jsx(ui.TokenIcon, { symbol: item.symbol, className: "oui-size-[18px]" }),
1077
- /* @__PURE__ */ jsxRuntime.jsx(
1078
- ui.Text.formatted,
1079
- {
1080
- rule: "symbol",
1081
- formatString: "base",
1082
- size: "2xs",
1083
- weight: "semibold",
1084
- children: item.symbol
1085
- }
1086
- )
1091
+ /* @__PURE__ */ jsxRuntime.jsx(exports.SymbolDisplay, { formatString: "base", size: "2xs", children: item.symbol })
1087
1092
  ] }),
1088
1093
  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", intensity: 36, children: t("markets.column.last") }),
1089
1094
  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", intensity: 36, children: t("markets.column.24hPercentage") })
@@ -1528,6 +1533,7 @@ var init_column = __esm({
1528
1533
  init_icons();
1529
1534
  init_favoritesDropdownMenu();
1530
1535
  init_rwaDotTooltip();
1536
+ init_symbolDisplay();
1531
1537
  useSideMarketsColumns = (favorite, isFavoriteList = false) => {
1532
1538
  const { t } = i18n.useTranslation();
1533
1539
  return [
@@ -1567,16 +1573,7 @@ var init_column = __esm({
1567
1573
  /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", itemAlign: "start", gapY: 1, children: [
1568
1574
  /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gapX: 1, children: [
1569
1575
  /* @__PURE__ */ jsxRuntime.jsx(ui.TokenIcon, { symbol: record.symbol, className: "oui-size-[18px]" }),
1570
- /* @__PURE__ */ jsxRuntime.jsx(
1571
- ui.Text.formatted,
1572
- {
1573
- rule: "symbol",
1574
- formatString: "base",
1575
- size: "2xs",
1576
- weight: "semibold",
1577
- children: record.symbol
1578
- }
1579
- ),
1576
+ /* @__PURE__ */ jsxRuntime.jsx(exports.SymbolDisplay, { formatString: "base", size: "2xs", children: record.symbol }),
1580
1577
  /* @__PURE__ */ jsxRuntime.jsx(RwaDotTooltip, { record }),
1581
1578
  /* @__PURE__ */ jsxRuntime.jsxs(ui.Badge, { size: "xs", color: "primary", children: [
1582
1579
  record.leverage,
@@ -1959,16 +1956,7 @@ function getSymbolColumn(favorite, isFavoriteList = false) {
1959
1956
  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gapX: 1, children: [
1960
1957
  favoritesIcon,
1961
1958
  /* @__PURE__ */ jsxRuntime.jsx(ui.TokenIcon, { symbol: value, className: "oui-size-[18px]" }),
1962
- /* @__PURE__ */ jsxRuntime.jsx(
1963
- ui.Text.formatted,
1964
- {
1965
- rule: "symbol",
1966
- formatString: "base",
1967
- size: "2xs",
1968
- weight: "semibold",
1969
- children: value
1970
- }
1971
- ),
1959
+ /* @__PURE__ */ jsxRuntime.jsx(exports.SymbolDisplay, { formatString: "base", size: "2xs", children: value }),
1972
1960
  /* @__PURE__ */ jsxRuntime.jsx(RwaDotTooltip, { record }),
1973
1961
  /* @__PURE__ */ jsxRuntime.jsxs(ui.Badge, { size: "xs", color: "primary", children: [
1974
1962
  record.leverage,
@@ -2017,6 +2005,7 @@ var init_column2 = __esm({
2017
2005
  init_icons();
2018
2006
  init_favoritesDropdownMenu();
2019
2007
  init_rwaDotTooltip();
2008
+ init_symbolDisplay();
2020
2009
  }
2021
2010
  });
2022
2011
  var FavoritesEmpty;
@@ -2614,6 +2603,7 @@ var init_column3 = __esm({
2614
2603
  "src/components/marketsListFull/column.tsx"() {
2615
2604
  init_icons();
2616
2605
  init_favoritesDropdownMenu();
2606
+ init_symbolDisplay();
2617
2607
  useMarketsListFullColumns = (favorite, isFavoriteList = false) => {
2618
2608
  const { t } = i18n.useTranslation();
2619
2609
  const columns = React6.useMemo(() => {
@@ -2657,17 +2647,7 @@ var init_column3 = __esm({
2657
2647
  width: 90,
2658
2648
  onSort: true,
2659
2649
  render: (value) => {
2660
- return /* @__PURE__ */ jsxRuntime.jsx(
2661
- ui.Text.formatted,
2662
- {
2663
- rule: "symbol",
2664
- formatString: "base-type",
2665
- size: "xs",
2666
- weight: "semibold",
2667
- showIcon: true,
2668
- children: value
2669
- }
2670
- );
2650
+ return /* @__PURE__ */ jsxRuntime.jsx(exports.SymbolDisplay, { formatString: "base", showIcon: true, children: value });
2671
2651
  }
2672
2652
  },
2673
2653
  {
@@ -3312,6 +3292,7 @@ var init_expandMarkets = __esm({
3312
3292
  var createFundingRenderer, useFundingOverviewColumns, FundingPeriodSelect;
3313
3293
  var init_columns = __esm({
3314
3294
  "src/components/fundingOverview/columns.tsx"() {
3295
+ init_symbolDisplay();
3315
3296
  createFundingRenderer = (dp = 5) => (value) => {
3316
3297
  if (value === 0) {
3317
3298
  return /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: " - " });
@@ -3347,15 +3328,7 @@ var init_columns = __esm({
3347
3328
  className: isMobile ? "oui-size-[18px]" : "oui-size-5"
3348
3329
  }
3349
3330
  ),
3350
- /* @__PURE__ */ jsxRuntime.jsx(
3351
- ui.Text.formatted,
3352
- {
3353
- rule: "symbol",
3354
- formatString: "base-type",
3355
- weight: "semibold",
3356
- children: value
3357
- }
3358
- )
3331
+ /* @__PURE__ */ jsxRuntime.jsx(exports.SymbolDisplay, { formatString: "base", size: "xs", children: value })
3359
3332
  ] })
3360
3333
  },
3361
3334
  {
@@ -3701,6 +3674,7 @@ var CDN_PREFIX, useFundingColumns;
3701
3674
  var init_columns2 = __esm({
3702
3675
  "src/components/fundingComparison/columns.tsx"() {
3703
3676
  init_icons();
3677
+ init_symbolDisplay();
3704
3678
  init_useEXchanges();
3705
3679
  CDN_PREFIX = "https://oss.orderly.network/static/exchange_logo";
3706
3680
  useFundingColumns = () => {
@@ -3732,16 +3706,7 @@ var init_columns2 = __esm({
3732
3706
  className: isMobile ? "oui-size-[18px]" : "oui-size-5"
3733
3707
  }
3734
3708
  ),
3735
- /* @__PURE__ */ jsxRuntime.jsx(
3736
- ui.Text.formatted,
3737
- {
3738
- rule: "symbol",
3739
- formatString: "base-type",
3740
- size: "xs",
3741
- weight: "semibold",
3742
- children: value
3743
- }
3744
- )
3709
+ /* @__PURE__ */ jsxRuntime.jsx(exports.SymbolDisplay, { formatString: "base", size: "xs", children: value })
3745
3710
  ] })
3746
3711
  },
3747
3712
  {
@@ -4396,6 +4361,7 @@ var init_dataItem_ui = __esm({
4396
4361
  var MarketItemComponent; exports.MarketItem = void 0;
4397
4362
  var init_marketItem_ui = __esm({
4398
4363
  "src/components/horizontalMarkets/marketItem.ui.tsx"() {
4364
+ init_symbolDisplay();
4399
4365
  MarketItemComponent = (props) => {
4400
4366
  const { symbol, tickerData, isActive, onSymbolClick } = props;
4401
4367
  const handleClick = React6__default.default.useCallback(() => {
@@ -4406,7 +4372,7 @@ var init_marketItem_ui = __esm({
4406
4372
  {
4407
4373
  direction: "row",
4408
4374
  className: ui.cn(
4409
- "oui-cursor-pointer oui-rounded oui-h-[18px] oui-items-center oui-mr-3 oui-flex-shrink-0",
4375
+ "oui-mr-3 oui-h-[18px] oui-shrink-0 oui-cursor-pointer oui-items-center oui-rounded",
4410
4376
  "oui-transition-all oui-duration-200"
4411
4377
  ),
4412
4378
  onClick: handleClick,
@@ -4414,12 +4380,10 @@ var init_marketItem_ui = __esm({
4414
4380
  /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gapX: 1, itemAlign: "center", className: "oui-mr-[6px]", children: [
4415
4381
  /* @__PURE__ */ jsxRuntime.jsx(ui.TokenIcon, { symbol, className: "oui-size-[18px]" }),
4416
4382
  /* @__PURE__ */ jsxRuntime.jsx(
4417
- ui.Text.formatted,
4383
+ exports.SymbolDisplay,
4418
4384
  {
4419
- rule: "symbol",
4420
4385
  formatString: "base",
4421
- size: "xs",
4422
- weight: "semibold",
4386
+ size: "2xs",
4423
4387
  className: "oui-text-base-contrast-80",
4424
4388
  children: symbol
4425
4389
  }
@@ -4935,6 +4899,7 @@ init_favoritesTabs();
4935
4899
  init_marketsList();
4936
4900
  init_rwaTab();
4937
4901
  init_useFavoritesExtraProps();
4902
+ init_symbolDisplay();
4938
4903
  var LIST_ROW_COMPACT = "oui-h-auto";
4939
4904
  var TABLE_CLASSNAMES = {
4940
4905
  scroll: "oui-px-0",
@@ -4981,16 +4946,7 @@ var SubMenuMarkets = (props) => {
4981
4946
  render: (_, record) => {
4982
4947
  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-mx-[-8px]", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gapX: 1, itemAlign: "center", children: [
4983
4948
  /* @__PURE__ */ jsxRuntime.jsx(ui.TokenIcon, { symbol: record.symbol, className: "oui-size-[18px]" }),
4984
- /* @__PURE__ */ jsxRuntime.jsx(
4985
- ui.Text.formatted,
4986
- {
4987
- rule: "symbol",
4988
- formatString: "base",
4989
- size: "2xs",
4990
- weight: "semibold",
4991
- children: record.symbol
4992
- }
4993
- ),
4949
+ /* @__PURE__ */ jsxRuntime.jsx(exports.SymbolDisplay, { formatString: "base", size: "2xs", children: record.symbol }),
4994
4950
  /* @__PURE__ */ jsxRuntime.jsxs(ui.Badge, { size: "xs", color: "primary", children: [
4995
4951
  record.leverage,
4996
4952
  "x"
@@ -5230,6 +5186,7 @@ init_useFavoritesExtraProps();
5230
5186
  // src/components/marketsSheet/column.tsx
5231
5187
  init_icons();
5232
5188
  init_favoritesDropdownMenu();
5189
+ init_symbolDisplay();
5233
5190
  var getMarketsSheetColumns = (favorite, isFavoriteList = false) => {
5234
5191
  return [
5235
5192
  {
@@ -5268,16 +5225,7 @@ var getMarketsSheetColumns = (favorite, isFavoriteList = false) => {
5268
5225
  /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", itemAlign: "start", gapY: 1, children: [
5269
5226
  /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gapX: 1, children: [
5270
5227
  /* @__PURE__ */ jsxRuntime.jsx(ui.TokenIcon, { symbol: record.symbol, className: "oui-size-[18px]" }),
5271
- /* @__PURE__ */ jsxRuntime.jsx(
5272
- ui.Text.formatted,
5273
- {
5274
- rule: "symbol",
5275
- formatString: "base",
5276
- size: "2xs",
5277
- weight: "semibold",
5278
- children: record.symbol
5279
- }
5280
- ),
5228
+ /* @__PURE__ */ jsxRuntime.jsx(exports.SymbolDisplay, { formatString: "base", size: "2xs", children: record.symbol }),
5281
5229
  /* @__PURE__ */ jsxRuntime.jsxs(ui.Badge, { size: "xs", color: "primary", children: [
5282
5230
  record.leverage,
5283
5231
  "x"
@@ -5476,6 +5424,7 @@ var MarketsSheetWidget = (props) => {
5476
5424
 
5477
5425
  // src/components/symbolInfoBar/symbolInfoBar.ui.tsx
5478
5426
  init_icons();
5427
+ init_symbolDisplay();
5479
5428
  var RwaTooltip = (props) => {
5480
5429
  const { isRwa, open, closeTimeInterval, openTimeInterval } = props;
5481
5430
  const { isMobile } = ui.useScreen();
@@ -5628,21 +5577,11 @@ var SymbolInfoBar = (props) => {
5628
5577
  const symbolView = /* @__PURE__ */ jsxRuntime.jsxs(
5629
5578
  ui.Flex,
5630
5579
  {
5631
- className: "oui-cursor-pointer oui-gap-x-[6px] oui-h-5",
5580
+ className: "oui-h-5 oui-cursor-pointer oui-gap-x-[6px]",
5632
5581
  onClick: onSymbol,
5633
5582
  children: [
5634
- /* @__PURE__ */ jsxRuntime.jsx(
5635
- ui.Text.formatted,
5636
- {
5637
- className: "oui-break-normal oui-whitespace-nowrap",
5638
- rule: "symbol",
5639
- formatString: "base-type",
5640
- size: "sm",
5641
- weight: "semibold",
5642
- children: symbol
5643
- }
5644
- ),
5645
- /* @__PURE__ */ jsxRuntime.jsx(TriangleDownIcon, { className: "oui-text-base-contrast-54 oui-w-[14px] oui-h-[14px]" })
5583
+ /* @__PURE__ */ jsxRuntime.jsx(exports.SymbolDisplay, { formatString: "base", size: "sm", children: symbol }),
5584
+ /* @__PURE__ */ jsxRuntime.jsx(TriangleDownIcon, { className: "oui-size-[14px] oui-text-base-contrast-54" })
5646
5585
  ]
5647
5586
  }
5648
5587
  );
@@ -5651,11 +5590,11 @@ var SymbolInfoBar = (props) => {
5651
5590
  {
5652
5591
  className: ui.cn(
5653
5592
  "oui-symbol-info-bar-mobile",
5654
- "oui-font-semibold oui-h-full",
5593
+ "oui-h-full oui-font-semibold",
5655
5594
  props.className
5656
5595
  ),
5657
5596
  children: [
5658
- /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gapX: 3, className: "oui-flex-1 oui-overflow-hidden oui-h-full", children: [
5597
+ /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gapX: 3, className: "oui-h-full oui-flex-1 oui-overflow-hidden", children: [
5659
5598
  /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gapX: 3, children: [
5660
5599
  /* @__PURE__ */ jsxRuntime.jsx(ui.TokenIcon, { symbol, size: "xs" }),
5661
5600
  /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", itemAlign: "start", children: [
@@ -5870,6 +5809,9 @@ var FundingRateHintWidget = (props) => {
5870
5809
  const state = useFundingRateHintScript(props.symbol);
5871
5810
  return /* @__PURE__ */ jsxRuntime.jsx(FundingRateHint, { ...state, ...props });
5872
5811
  };
5812
+
5813
+ // src/components/symbolInfoBarFull/symbolInfoBarFull.ui.tsx
5814
+ init_symbolDisplay();
5873
5815
  var LazyDropDownMarketsWidget = React6__default.default.lazy(
5874
5816
  () => Promise.resolve().then(() => (init_dropDownMarkets(), dropDownMarkets_exports)).then((mod) => {
5875
5817
  return { default: mod.DropDownMarketsWidget };
@@ -5926,7 +5868,7 @@ var SymbolInfoBarFull = (props) => {
5926
5868
  {
5927
5869
  direction: "column",
5928
5870
  itemAlign: "start",
5929
- className: "oui-gap-y-[2px] oui-shrink-0",
5871
+ className: "oui-shrink-0 oui-gap-y-[2px]",
5930
5872
  children: [
5931
5873
  /* @__PURE__ */ jsxRuntime.jsx(
5932
5874
  LazyDropDownMarketsWidget,
@@ -5937,14 +5879,11 @@ var SymbolInfoBarFull = (props) => {
5937
5879
  children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gapX: 1, className: "oui-cursor-pointer", children: [
5938
5880
  /* @__PURE__ */ jsxRuntime.jsx(ui.TokenIcon, { symbol, className: "oui-size-4" }),
5939
5881
  /* @__PURE__ */ jsxRuntime.jsx(
5940
- ui.Text.formatted,
5882
+ exports.SymbolDisplay,
5941
5883
  {
5942
- className: "oui-whitespace-nowrap oui-break-normal",
5943
- rule: "symbol",
5944
- formatString: "base-type",
5884
+ formatString: "base",
5945
5885
  size: "xs",
5946
- weight: "semibold",
5947
- intensity: 98,
5886
+ className: "oui-text-base-contrast",
5948
5887
  children: symbol
5949
5888
  }
5950
5889
  ),
@@ -6821,6 +6760,7 @@ var MarketsMobileContent = (props) => {
6821
6760
 
6822
6761
  // src/index.ts
6823
6762
  init_marketsProvider();
6763
+ init_symbolDisplay();
6824
6764
 
6825
6765
  exports.FavoritesList = FavoritesList;
6826
6766
  exports.FavoritesListWidget = FavoritesListWidget;