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

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 +89 -161
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +92 -164
  6. package/dist/index.mjs.map +1 -1
  7. package/dist/styles.css +1 -1
  8. package/package.json +9 -9
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,12 +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)
707
- return -1;
708
- if (symbolA > symbolB)
709
- 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;
710
730
  return 0;
711
731
  };
712
732
  startsWithMatches.sort(compareSymbols);
@@ -737,12 +757,9 @@ var compareValues;
737
757
  var init_utils = __esm({
738
758
  "src/utils.ts"() {
739
759
  compareValues = (aValue, bValue) => {
740
- if (aValue == null && bValue == null)
741
- return 0;
742
- if (aValue == null)
743
- return 1;
744
- if (bValue == null)
745
- return -1;
760
+ if (aValue == null && bValue == null) return 0;
761
+ if (aValue == null) return 1;
762
+ if (bValue == null) return -1;
746
763
  const aStr = String(aValue).trim();
747
764
  const bStr = String(bValue).trim();
748
765
  const aNum = Number(aStr);
@@ -801,8 +818,7 @@ function useDataSource() {
801
818
  [markets]
802
819
  );
803
820
  const tvl = React6.useMemo(() => {
804
- if (!balance)
805
- return 0;
821
+ if (!balance) return 0;
806
822
  const { total_holding = 0 } = balance;
807
823
  return new utils.Decimal(total_holding).toNumber();
808
824
  }, [balance]);
@@ -850,6 +866,7 @@ var MobileMarketsHeader, BlockList2, BlockItem2, CardItem2, ListItem2;
850
866
  var init_marketsHeader_mobile_ui = __esm({
851
867
  "src/pages/home/marketsHeader/marketsHeader.mobile.ui.tsx"() {
852
868
  init_marketsProvider();
869
+ init_symbolDisplay();
853
870
  init_icons();
854
871
  MobileMarketsHeader = (props) => {
855
872
  const {
@@ -1008,17 +1025,7 @@ var init_marketsHeader_mobile_ui = __esm({
1008
1025
  props.onSymbol(item);
1009
1026
  },
1010
1027
  children: [
1011
- /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { width: "100%", gapX: 1, children: /* @__PURE__ */ jsxRuntime.jsx(
1012
- ui.Text.formatted,
1013
- {
1014
- rule: "symbol",
1015
- formatString: "base",
1016
- size: "xs",
1017
- weight: "semibold",
1018
- showIcon: true,
1019
- children: item.symbol
1020
- }
1021
- ) }),
1028
+ /* @__PURE__ */ jsxRuntime.jsx(exports.SymbolDisplay, { formatString: "base", showIcon: true, className: "oui-w-full", children: item.symbol }),
1022
1029
  /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { width: "100%", justify: "end", children: /* @__PURE__ */ jsxRuntime.jsx(
1023
1030
  ui.Text.numeral,
1024
1031
  {
@@ -1069,6 +1076,7 @@ exports.CollapseMarkets = void 0;
1069
1076
  var init_collapseMarkets = __esm({
1070
1077
  "src/components/collapseMarkets/index.tsx"() {
1071
1078
  init_marketsProvider();
1079
+ init_symbolDisplay();
1072
1080
  exports.CollapseMarkets = (props) => {
1073
1081
  const { symbol, onSymbolChange } = useMarketsContext();
1074
1082
  const { t } = i18n.useTranslation();
@@ -1080,16 +1088,7 @@ var init_collapseMarkets = __esm({
1080
1088
  /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", itemAlign: "start", gapY: 1, children: [
1081
1089
  /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gapX: 1, children: [
1082
1090
  /* @__PURE__ */ jsxRuntime.jsx(ui.TokenIcon, { symbol: item.symbol, className: "oui-size-[18px]" }),
1083
- /* @__PURE__ */ jsxRuntime.jsx(
1084
- ui.Text.formatted,
1085
- {
1086
- rule: "symbol",
1087
- formatString: "base",
1088
- size: "2xs",
1089
- weight: "semibold",
1090
- children: item.symbol
1091
- }
1092
- )
1091
+ /* @__PURE__ */ jsxRuntime.jsx(exports.SymbolDisplay, { formatString: "base", size: "2xs", children: item.symbol })
1093
1092
  ] }),
1094
1093
  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", intensity: 36, children: t("markets.column.last") }),
1095
1094
  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", intensity: 36, children: t("markets.column.24hPercentage") })
@@ -1534,6 +1533,7 @@ var init_column = __esm({
1534
1533
  init_icons();
1535
1534
  init_favoritesDropdownMenu();
1536
1535
  init_rwaDotTooltip();
1536
+ init_symbolDisplay();
1537
1537
  useSideMarketsColumns = (favorite, isFavoriteList = false) => {
1538
1538
  const { t } = i18n.useTranslation();
1539
1539
  return [
@@ -1573,16 +1573,7 @@ var init_column = __esm({
1573
1573
  /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", itemAlign: "start", gapY: 1, children: [
1574
1574
  /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gapX: 1, children: [
1575
1575
  /* @__PURE__ */ jsxRuntime.jsx(ui.TokenIcon, { symbol: record.symbol, className: "oui-size-[18px]" }),
1576
- /* @__PURE__ */ jsxRuntime.jsx(
1577
- ui.Text.formatted,
1578
- {
1579
- rule: "symbol",
1580
- formatString: "base",
1581
- size: "2xs",
1582
- weight: "semibold",
1583
- children: record.symbol
1584
- }
1585
- ),
1576
+ /* @__PURE__ */ jsxRuntime.jsx(exports.SymbolDisplay, { formatString: "base", size: "2xs", children: record.symbol }),
1586
1577
  /* @__PURE__ */ jsxRuntime.jsx(RwaDotTooltip, { record }),
1587
1578
  /* @__PURE__ */ jsxRuntime.jsxs(ui.Badge, { size: "xs", color: "primary", children: [
1588
1579
  record.leverage,
@@ -1965,16 +1956,7 @@ function getSymbolColumn(favorite, isFavoriteList = false) {
1965
1956
  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gapX: 1, children: [
1966
1957
  favoritesIcon,
1967
1958
  /* @__PURE__ */ jsxRuntime.jsx(ui.TokenIcon, { symbol: value, className: "oui-size-[18px]" }),
1968
- /* @__PURE__ */ jsxRuntime.jsx(
1969
- ui.Text.formatted,
1970
- {
1971
- rule: "symbol",
1972
- formatString: "base",
1973
- size: "2xs",
1974
- weight: "semibold",
1975
- children: value
1976
- }
1977
- ),
1959
+ /* @__PURE__ */ jsxRuntime.jsx(exports.SymbolDisplay, { formatString: "base", size: "2xs", children: value }),
1978
1960
  /* @__PURE__ */ jsxRuntime.jsx(RwaDotTooltip, { record }),
1979
1961
  /* @__PURE__ */ jsxRuntime.jsxs(ui.Badge, { size: "xs", color: "primary", children: [
1980
1962
  record.leverage,
@@ -2023,6 +2005,7 @@ var init_column2 = __esm({
2023
2005
  init_icons();
2024
2006
  init_favoritesDropdownMenu();
2025
2007
  init_rwaDotTooltip();
2008
+ init_symbolDisplay();
2026
2009
  }
2027
2010
  });
2028
2011
  var FavoritesEmpty;
@@ -2620,6 +2603,7 @@ var init_column3 = __esm({
2620
2603
  "src/components/marketsListFull/column.tsx"() {
2621
2604
  init_icons();
2622
2605
  init_favoritesDropdownMenu();
2606
+ init_symbolDisplay();
2623
2607
  useMarketsListFullColumns = (favorite, isFavoriteList = false) => {
2624
2608
  const { t } = i18n.useTranslation();
2625
2609
  const columns = React6.useMemo(() => {
@@ -2663,17 +2647,7 @@ var init_column3 = __esm({
2663
2647
  width: 90,
2664
2648
  onSort: true,
2665
2649
  render: (value) => {
2666
- return /* @__PURE__ */ jsxRuntime.jsx(
2667
- ui.Text.formatted,
2668
- {
2669
- rule: "symbol",
2670
- formatString: "base-type",
2671
- size: "xs",
2672
- weight: "semibold",
2673
- showIcon: true,
2674
- children: value
2675
- }
2676
- );
2650
+ return /* @__PURE__ */ jsxRuntime.jsx(exports.SymbolDisplay, { formatString: "base", showIcon: true, children: value });
2677
2651
  }
2678
2652
  },
2679
2653
  {
@@ -3318,6 +3292,7 @@ var init_expandMarkets = __esm({
3318
3292
  var createFundingRenderer, useFundingOverviewColumns, FundingPeriodSelect;
3319
3293
  var init_columns = __esm({
3320
3294
  "src/components/fundingOverview/columns.tsx"() {
3295
+ init_symbolDisplay();
3321
3296
  createFundingRenderer = (dp = 5) => (value) => {
3322
3297
  if (value === 0) {
3323
3298
  return /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: " - " });
@@ -3353,15 +3328,7 @@ var init_columns = __esm({
3353
3328
  className: isMobile ? "oui-size-[18px]" : "oui-size-5"
3354
3329
  }
3355
3330
  ),
3356
- /* @__PURE__ */ jsxRuntime.jsx(
3357
- ui.Text.formatted,
3358
- {
3359
- rule: "symbol",
3360
- formatString: "base-type",
3361
- weight: "semibold",
3362
- children: value
3363
- }
3364
- )
3331
+ /* @__PURE__ */ jsxRuntime.jsx(exports.SymbolDisplay, { formatString: "base", size: "xs", children: value })
3365
3332
  ] })
3366
3333
  },
3367
3334
  {
@@ -3540,8 +3507,7 @@ var init_fundingOverview_ui = __esm({
3540
3507
  }
3541
3508
  });
3542
3509
  function getFundingInterval(next_funding_time, last_funding_rate_timestamp) {
3543
- if (!next_funding_time || !last_funding_rate_timestamp)
3544
- return 8;
3510
+ if (!next_funding_time || !last_funding_rate_timestamp) return 8;
3545
3511
  const diff = next_funding_time - last_funding_rate_timestamp;
3546
3512
  return Math.round(diff / 36e5);
3547
3513
  }
@@ -3708,6 +3674,7 @@ var CDN_PREFIX, useFundingColumns;
3708
3674
  var init_columns2 = __esm({
3709
3675
  "src/components/fundingComparison/columns.tsx"() {
3710
3676
  init_icons();
3677
+ init_symbolDisplay();
3711
3678
  init_useEXchanges();
3712
3679
  CDN_PREFIX = "https://oss.orderly.network/static/exchange_logo";
3713
3680
  useFundingColumns = () => {
@@ -3739,16 +3706,7 @@ var init_columns2 = __esm({
3739
3706
  className: isMobile ? "oui-size-[18px]" : "oui-size-5"
3740
3707
  }
3741
3708
  ),
3742
- /* @__PURE__ */ jsxRuntime.jsx(
3743
- ui.Text.formatted,
3744
- {
3745
- rule: "symbol",
3746
- formatString: "base-type",
3747
- size: "xs",
3748
- weight: "semibold",
3749
- children: value
3750
- }
3751
- )
3709
+ /* @__PURE__ */ jsxRuntime.jsx(exports.SymbolDisplay, { formatString: "base", size: "xs", children: value })
3752
3710
  ] })
3753
3711
  },
3754
3712
  {
@@ -4403,6 +4361,7 @@ var init_dataItem_ui = __esm({
4403
4361
  var MarketItemComponent; exports.MarketItem = void 0;
4404
4362
  var init_marketItem_ui = __esm({
4405
4363
  "src/components/horizontalMarkets/marketItem.ui.tsx"() {
4364
+ init_symbolDisplay();
4406
4365
  MarketItemComponent = (props) => {
4407
4366
  const { symbol, tickerData, isActive, onSymbolClick } = props;
4408
4367
  const handleClick = React6__default.default.useCallback(() => {
@@ -4413,7 +4372,7 @@ var init_marketItem_ui = __esm({
4413
4372
  {
4414
4373
  direction: "row",
4415
4374
  className: ui.cn(
4416
- "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",
4417
4376
  "oui-transition-all oui-duration-200"
4418
4377
  ),
4419
4378
  onClick: handleClick,
@@ -4421,12 +4380,10 @@ var init_marketItem_ui = __esm({
4421
4380
  /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gapX: 1, itemAlign: "center", className: "oui-mr-[6px]", children: [
4422
4381
  /* @__PURE__ */ jsxRuntime.jsx(ui.TokenIcon, { symbol, className: "oui-size-[18px]" }),
4423
4382
  /* @__PURE__ */ jsxRuntime.jsx(
4424
- ui.Text.formatted,
4383
+ exports.SymbolDisplay,
4425
4384
  {
4426
- rule: "symbol",
4427
4385
  formatString: "base",
4428
- size: "xs",
4429
- weight: "semibold",
4386
+ size: "2xs",
4430
4387
  className: "oui-text-base-contrast-80",
4431
4388
  children: symbol
4432
4389
  }
@@ -4942,6 +4899,7 @@ init_favoritesTabs();
4942
4899
  init_marketsList();
4943
4900
  init_rwaTab();
4944
4901
  init_useFavoritesExtraProps();
4902
+ init_symbolDisplay();
4945
4903
  var LIST_ROW_COMPACT = "oui-h-auto";
4946
4904
  var TABLE_CLASSNAMES = {
4947
4905
  scroll: "oui-px-0",
@@ -4988,16 +4946,7 @@ var SubMenuMarkets = (props) => {
4988
4946
  render: (_, record) => {
4989
4947
  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-mx-[-8px]", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gapX: 1, itemAlign: "center", children: [
4990
4948
  /* @__PURE__ */ jsxRuntime.jsx(ui.TokenIcon, { symbol: record.symbol, className: "oui-size-[18px]" }),
4991
- /* @__PURE__ */ jsxRuntime.jsx(
4992
- ui.Text.formatted,
4993
- {
4994
- rule: "symbol",
4995
- formatString: "base",
4996
- size: "2xs",
4997
- weight: "semibold",
4998
- children: record.symbol
4999
- }
5000
- ),
4949
+ /* @__PURE__ */ jsxRuntime.jsx(exports.SymbolDisplay, { formatString: "base", size: "2xs", children: record.symbol }),
5001
4950
  /* @__PURE__ */ jsxRuntime.jsxs(ui.Badge, { size: "xs", color: "primary", children: [
5002
4951
  record.leverage,
5003
4952
  "x"
@@ -5237,6 +5186,7 @@ init_useFavoritesExtraProps();
5237
5186
  // src/components/marketsSheet/column.tsx
5238
5187
  init_icons();
5239
5188
  init_favoritesDropdownMenu();
5189
+ init_symbolDisplay();
5240
5190
  var getMarketsSheetColumns = (favorite, isFavoriteList = false) => {
5241
5191
  return [
5242
5192
  {
@@ -5275,16 +5225,7 @@ var getMarketsSheetColumns = (favorite, isFavoriteList = false) => {
5275
5225
  /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", itemAlign: "start", gapY: 1, children: [
5276
5226
  /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gapX: 1, children: [
5277
5227
  /* @__PURE__ */ jsxRuntime.jsx(ui.TokenIcon, { symbol: record.symbol, className: "oui-size-[18px]" }),
5278
- /* @__PURE__ */ jsxRuntime.jsx(
5279
- ui.Text.formatted,
5280
- {
5281
- rule: "symbol",
5282
- formatString: "base",
5283
- size: "2xs",
5284
- weight: "semibold",
5285
- children: record.symbol
5286
- }
5287
- ),
5228
+ /* @__PURE__ */ jsxRuntime.jsx(exports.SymbolDisplay, { formatString: "base", size: "2xs", children: record.symbol }),
5288
5229
  /* @__PURE__ */ jsxRuntime.jsxs(ui.Badge, { size: "xs", color: "primary", children: [
5289
5230
  record.leverage,
5290
5231
  "x"
@@ -5483,6 +5424,7 @@ var MarketsSheetWidget = (props) => {
5483
5424
 
5484
5425
  // src/components/symbolInfoBar/symbolInfoBar.ui.tsx
5485
5426
  init_icons();
5427
+ init_symbolDisplay();
5486
5428
  var RwaTooltip = (props) => {
5487
5429
  const { isRwa, open, closeTimeInterval, openTimeInterval } = props;
5488
5430
  const { isMobile } = ui.useScreen();
@@ -5635,21 +5577,11 @@ var SymbolInfoBar = (props) => {
5635
5577
  const symbolView = /* @__PURE__ */ jsxRuntime.jsxs(
5636
5578
  ui.Flex,
5637
5579
  {
5638
- className: "oui-cursor-pointer oui-gap-x-[6px] oui-h-5",
5580
+ className: "oui-h-5 oui-cursor-pointer oui-gap-x-[6px]",
5639
5581
  onClick: onSymbol,
5640
5582
  children: [
5641
- /* @__PURE__ */ jsxRuntime.jsx(
5642
- ui.Text.formatted,
5643
- {
5644
- className: "oui-break-normal oui-whitespace-nowrap",
5645
- rule: "symbol",
5646
- formatString: "base-type",
5647
- size: "sm",
5648
- weight: "semibold",
5649
- children: symbol
5650
- }
5651
- ),
5652
- /* @__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" })
5653
5585
  ]
5654
5586
  }
5655
5587
  );
@@ -5658,11 +5590,11 @@ var SymbolInfoBar = (props) => {
5658
5590
  {
5659
5591
  className: ui.cn(
5660
5592
  "oui-symbol-info-bar-mobile",
5661
- "oui-font-semibold oui-h-full",
5593
+ "oui-h-full oui-font-semibold",
5662
5594
  props.className
5663
5595
  ),
5664
5596
  children: [
5665
- /* @__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: [
5666
5598
  /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gapX: 3, children: [
5667
5599
  /* @__PURE__ */ jsxRuntime.jsx(ui.TokenIcon, { symbol, size: "xs" }),
5668
5600
  /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", itemAlign: "start", children: [
@@ -5824,8 +5756,7 @@ var useFundingRateHintScript = (symbol) => {
5824
5756
  return `${new utils.Decimal(est_funding_rate).mul(notional).todp(4).toNumber()}`;
5825
5757
  }, [est_funding_rate, notional, rows]);
5826
5758
  const calculateAnnualizedRate = (rate, intervalHours) => {
5827
- if (!rate || !intervalHours)
5828
- return void 0;
5759
+ if (!rate || !intervalHours) return void 0;
5829
5760
  const annualizedRate = new utils.Decimal(rate).mul(24).div(intervalHours).mul(365);
5830
5761
  return annualizedRate.todp(2, utils.Decimal.ROUND_DOWN).toNumber();
5831
5762
  };
@@ -5878,6 +5809,9 @@ var FundingRateHintWidget = (props) => {
5878
5809
  const state = useFundingRateHintScript(props.symbol);
5879
5810
  return /* @__PURE__ */ jsxRuntime.jsx(FundingRateHint, { ...state, ...props });
5880
5811
  };
5812
+
5813
+ // src/components/symbolInfoBarFull/symbolInfoBarFull.ui.tsx
5814
+ init_symbolDisplay();
5881
5815
  var LazyDropDownMarketsWidget = React6__default.default.lazy(
5882
5816
  () => Promise.resolve().then(() => (init_dropDownMarkets(), dropDownMarkets_exports)).then((mod) => {
5883
5817
  return { default: mod.DropDownMarketsWidget };
@@ -5934,7 +5868,7 @@ var SymbolInfoBarFull = (props) => {
5934
5868
  {
5935
5869
  direction: "column",
5936
5870
  itemAlign: "start",
5937
- className: "oui-gap-y-[2px] oui-shrink-0",
5871
+ className: "oui-shrink-0 oui-gap-y-[2px]",
5938
5872
  children: [
5939
5873
  /* @__PURE__ */ jsxRuntime.jsx(
5940
5874
  LazyDropDownMarketsWidget,
@@ -5945,14 +5879,11 @@ var SymbolInfoBarFull = (props) => {
5945
5879
  children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gapX: 1, className: "oui-cursor-pointer", children: [
5946
5880
  /* @__PURE__ */ jsxRuntime.jsx(ui.TokenIcon, { symbol, className: "oui-size-4" }),
5947
5881
  /* @__PURE__ */ jsxRuntime.jsx(
5948
- ui.Text.formatted,
5882
+ exports.SymbolDisplay,
5949
5883
  {
5950
- className: "oui-whitespace-nowrap oui-break-normal",
5951
- rule: "symbol",
5952
- formatString: "base-type",
5884
+ formatString: "base",
5953
5885
  size: "xs",
5954
- weight: "semibold",
5955
- intensity: 98,
5886
+ className: "oui-text-base-contrast",
5956
5887
  children: symbol
5957
5888
  }
5958
5889
  ),
@@ -6347,15 +6278,13 @@ var useHorizontalMarketsScript = (options) => {
6347
6278
  (fav) => fav.tabs?.some((tab) => tab.id === selectedFavoriteTab.id)
6348
6279
  )?.map((fav) => fav.name);
6349
6280
  const map = /* @__PURE__ */ Object.create(null);
6350
- for (const m of markets)
6351
- map[m.symbol] = m;
6281
+ for (const m of markets) map[m.symbol] = m;
6352
6282
  return (symbolsInTab || []).map((s) => map[s]).filter(Boolean);
6353
6283
  }
6354
6284
  if (selectedMarketType === "recent") {
6355
6285
  const symbolsInRecent = favorite.recent?.map((r) => r.name) || [];
6356
6286
  const map = /* @__PURE__ */ Object.create(null);
6357
- for (const m of markets)
6358
- map[m.symbol] = m;
6287
+ for (const m of markets) map[m.symbol] = m;
6359
6288
  return symbolsInRecent.map((s) => map[s]).filter(Boolean);
6360
6289
  }
6361
6290
  return markets;
@@ -6377,10 +6306,8 @@ var useHorizontalMarketsScript = (options) => {
6377
6306
  const list = optionSymbols ? optionSymbols : sortedMarkets.map((m) => m.symbol);
6378
6307
  const max = optionMaxItems;
6379
6308
  if (typeof max === "number") {
6380
- if (max === -1)
6381
- return list;
6382
- if (max >= 0)
6383
- return list.slice(0, max);
6309
+ if (max === -1) return list;
6310
+ if (max >= 0) return list.slice(0, max);
6384
6311
  }
6385
6312
  return list;
6386
6313
  }, [sortedMarkets, optionSymbols, optionMaxItems]);
@@ -6833,6 +6760,7 @@ var MarketsMobileContent = (props) => {
6833
6760
 
6834
6761
  // src/index.ts
6835
6762
  init_marketsProvider();
6763
+ init_symbolDisplay();
6836
6764
 
6837
6765
  exports.FavoritesList = FavoritesList;
6838
6766
  exports.FavoritesListWidget = FavoritesListWidget;
@@ -6865,5 +6793,5 @@ exports.useSideMarketsScript = useSideMarketsScript;
6865
6793
  exports.useSubMenuMarketsScript = useSubMenuMarketsScript;
6866
6794
  exports.useSymbolInfoBarFullScript = useSymbolInfoBarFullScript;
6867
6795
  exports.useSymbolInfoBarScript = useSymbolInfoBarScript;
6868
- //# sourceMappingURL=out.js.map
6796
+ //# sourceMappingURL=index.js.map
6869
6797
  //# sourceMappingURL=index.js.map