@orderly.network/markets 2.10.1 → 2.10.2

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 (6) hide show
  1. package/dist/index.js +627 -310
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +627 -310
  4. package/dist/index.mjs.map +1 -1
  5. package/dist/styles.css +1 -1
  6. package/package.json +8 -8
package/dist/index.js CHANGED
@@ -98,7 +98,7 @@ var init_icons = __esm({
98
98
  y: "0",
99
99
  width: "16",
100
100
  height: "16",
101
- children: /* @__PURE__ */ jsxRuntime.jsx("path", { fill: "#D9D9D9", d: "M0 0h16v16H0z" })
101
+ children: /* @__PURE__ */ jsxRuntime.jsx("path", { fill: "rgb(var(--oui-color-tertiary))", d: "M0 0h16v16H0z" })
102
102
  }
103
103
  ),
104
104
  /* @__PURE__ */ jsxRuntime.jsx("g", { mask: "url(#a)", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3.333 12.667h.95L10.8 6.15l-.95-.95-6.517 6.517zM2.667 14a.65.65 0 0 1-.475-.192.65.65 0 0 1-.192-.475v-1.616a1.32 1.32 0 0 1 .383-.934l8.417-8.4q.2-.183.442-.283.24-.1.508-.1.267 0 .517.1.249.1.433.3l.917.933q.2.184.291.434a1.44 1.44 0 0 1 0 1.008 1.25 1.25 0 0 1-.291.442l-8.4 8.4a1.32 1.32 0 0 1-.933.383zm7.65-8.317L9.85 5.2l.95.95z" }) })
@@ -137,7 +137,7 @@ var init_icons = __esm({
137
137
  y: "0",
138
138
  width: "12",
139
139
  height: "12",
140
- children: /* @__PURE__ */ jsxRuntime.jsx("path", { fill: "#D9D9D9", d: "M0 0h12v12H0z" })
140
+ children: /* @__PURE__ */ jsxRuntime.jsx("path", { fill: "rgb(var(--oui-color-tertiary))", d: "M0 0h12v12H0z" })
141
141
  }
142
142
  ),
143
143
  /* @__PURE__ */ jsxRuntime.jsx("g", { mask: "url(#a)", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8.5 10a.48.48 0 0 1-.356-.144A.48.48 0 0 1 8 9.5V7q0-.213.144-.356A.48.48 0 0 1 8.5 6.5h1q.212 0 .356.144A.48.48 0 0 1 10 7v2.5q0 .212-.144.356A.48.48 0 0 1 9.5 10zm-3 0a.48.48 0 0 1-.356-.144A.48.48 0 0 1 5 9.5v-7q0-.212.144-.356A.48.48 0 0 1 5.5 2h1q.213 0 .356.144A.48.48 0 0 1 7 2.5v7q0 .212-.144.356A.48.48 0 0 1 6.5 10zm-3 0a.48.48 0 0 1-.356-.144A.48.48 0 0 1 2 9.5V5q0-.213.144-.356A.48.48 0 0 1 2.5 4.5h1q.212 0 .356.144A.48.48 0 0 1 4 5v4.5q0 .212-.144.356A.48.48 0 0 1 3.5 10z" }) })
@@ -165,6 +165,7 @@ var init_icons = __esm({
165
165
  fill: "currentColor",
166
166
  xmlns: "http://www.w3.org/2000/svg",
167
167
  ...props,
168
+ className: ui.cn("oui-text-[rgba(255,154,46,1)]", props.className),
168
169
  children: [
169
170
  /* @__PURE__ */ jsxRuntime.jsx(
170
171
  "mask",
@@ -192,6 +193,10 @@ var init_icons = __esm({
192
193
  fill: "currentColor",
193
194
  xmlns: "http://www.w3.org/2000/svg",
194
195
  ...props,
196
+ className: ui.cn(
197
+ "oui-text-base-contrast-36 hover:oui-text-[rgba(255,154,46,1)]",
198
+ props.className
199
+ ),
195
200
  children: [
196
201
  /* @__PURE__ */ jsxRuntime.jsx(
197
202
  "mask",
@@ -262,6 +267,7 @@ var init_icons = __esm({
262
267
  fill: "currentColor",
263
268
  xmlns: "http://www.w3.org/2000/svg",
264
269
  ...props,
270
+ className: ui.cn("oui-text-[rgba(255,154,46,1)]", props.className),
265
271
  children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6.012 1.72c-.286 0-.577.178-.75.532L4.2 4.438l-2.42.344c-.78.108-1.03.872-.47 1.42l1.75 1.703-.407 2.39c-.133.773.508 1.24 1.203.874.268-.142 1.648-.857 2.155-1.124l2.155 1.124c.695.367 1.339-.1 1.202-.874l-.421-2.39 1.749-1.702c.565-.547.326-1.31-.453-1.421l-2.436-.344L6.76 2.252c-.172-.354-.464-.531-.75-.531" })
266
272
  }
267
273
  );
@@ -274,6 +280,10 @@ var init_icons = __esm({
274
280
  fill: "currentColor",
275
281
  xmlns: "http://www.w3.org/2000/svg",
276
282
  ...props,
283
+ className: ui.cn(
284
+ "oui-text-base-contrast-36 hover:oui-text-[rgba(255,154,46,1)]",
285
+ props.className
286
+ ),
277
287
  children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6.012 1.72c-.286 0-.577.178-.75.532L4.2 4.438l-2.42.344c-.78.108-1.03.872-.47 1.42l1.75 1.703-.407 2.39c-.133.773.508 1.24 1.203.874.268-.142 1.648-.857 2.155-1.124l2.155 1.124c.695.367 1.339-.1 1.202-.874l-.421-2.39 1.749-1.702c.565-.547.326-1.31-.453-1.421l-2.436-.344L6.76 2.252c-.172-.354-.464-.531-.75-.531m0 1.297 1.03 2.108c.073.15.211.242.375.266l2.343.343-1.702 1.64a.48.48 0 0 0-.14.437l.405 2.312L6.246 9.03a.5.5 0 0 0-.468 0L3.7 10.123l.39-2.296a.52.52 0 0 0-.14-.453l-1.687-1.64 2.327-.328a.52.52 0 0 0 .39-.28z" })
278
288
  }
279
289
  );
@@ -1564,7 +1574,7 @@ var init_column = __esm({
1564
1574
  justify: "center",
1565
1575
  itemAlign: "center",
1566
1576
  className: "oui-mr-1 oui-cursor-pointer",
1567
- children: record.isFavorite ? /* @__PURE__ */ jsxRuntime.jsx(FavoritesIcon2, { className: "oui-size-3 oui-text-[rgba(255,154,46,1)]" }) : /* @__PURE__ */ jsxRuntime.jsx(UnFavoritesIcon2, { className: "oui-size-3 oui-text-base-contrast-36 hover:oui-text-[rgba(255,154,46,1)]" })
1577
+ children: record.isFavorite ? /* @__PURE__ */ jsxRuntime.jsx(FavoritesIcon2, { className: "oui-size-3" }) : /* @__PURE__ */ jsxRuntime.jsx(UnFavoritesIcon2, { className: "oui-size-3" })
1568
1578
  }
1569
1579
  ) });
1570
1580
  }
@@ -1928,7 +1938,10 @@ var init_searchInput = __esm({
1928
1938
  classNames: {
1929
1939
  ...classNames,
1930
1940
  // use mt-px to fix the top border issue
1931
- root: ui.cn("oui-mt-px oui-border oui-border-line", classNames?.root)
1941
+ root: ui.cn(
1942
+ "oui-mt-px oui-border oui-border-line focus-within:oui-border-transparent",
1943
+ classNames?.root
1944
+ )
1932
1945
  },
1933
1946
  size: "sm",
1934
1947
  prefix: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { pl: 3, pr: 1, children: /* @__PURE__ */ jsxRuntime.jsx(SearchIcon, { className: "oui-text-base-contrast-36" }) }),
@@ -1963,18 +1976,22 @@ function getSymbolColumn(favorite, isFavoriteList = false) {
1963
1976
  justify: "center",
1964
1977
  itemAlign: "center",
1965
1978
  className: "oui-mr-1 oui-cursor-pointer",
1966
- children: record.isFavorite ? /* @__PURE__ */ jsxRuntime.jsx(FavoritesIcon2, { className: "oui-size-3 oui-text-[rgba(255,154,46,1)]" }) : /* @__PURE__ */ jsxRuntime.jsx(UnFavoritesIcon2, { className: "oui-size-3 oui-text-base-contrast-36 hover:oui-text-[rgba(255,154,46,1)]" })
1979
+ children: record.isFavorite ? /* @__PURE__ */ jsxRuntime.jsx(FavoritesIcon2, { className: "oui-size-3" }) : /* @__PURE__ */ jsxRuntime.jsx(UnFavoritesIcon2, { className: "oui-size-3" })
1967
1980
  }
1968
1981
  ) });
1969
1982
  }
1970
1983
  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gapX: 1, children: [
1971
1984
  favoritesIcon,
1972
- /* @__PURE__ */ jsxRuntime.jsx(ui.TokenIcon, { symbol: value, className: "oui-size-[18px]" }),
1973
- /* @__PURE__ */ jsxRuntime.jsx(exports.SymbolDisplay, { formatString: "base", size: "2xs", children: value }),
1974
- /* @__PURE__ */ jsxRuntime.jsx(RwaDotTooltip, { record }),
1975
- /* @__PURE__ */ jsxRuntime.jsxs(ui.Badge, { size: "xs", color: "primary", children: [
1976
- record.leverage,
1977
- "x"
1985
+ /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", itemAlign: "start", gapY: 1, children: [
1986
+ /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gapX: 1, itemAlign: "center", children: [
1987
+ /* @__PURE__ */ jsxRuntime.jsx(ui.TokenIcon, { symbol: value, className: "oui-size-[18px]" }),
1988
+ /* @__PURE__ */ jsxRuntime.jsx(exports.SymbolDisplay, { formatString: "base", size: "2xs", children: value }),
1989
+ /* @__PURE__ */ jsxRuntime.jsx(RwaDotTooltip, { record })
1990
+ ] }),
1991
+ /* @__PURE__ */ jsxRuntime.jsxs(ui.Badge, { size: "xs", color: "primary", children: [
1992
+ record.leverage,
1993
+ "x"
1994
+ ] })
1978
1995
  ] })
1979
1996
  ] });
1980
1997
  }
@@ -2014,8 +2031,153 @@ function get24hPercentageColumn() {
2014
2031
  }
2015
2032
  };
2016
2033
  }
2034
+ function get24hVolOIColumn() {
2035
+ return {
2036
+ title: i18n.i18n.t("markets.column.24hVolOI"),
2037
+ dataIndex: "24h_amount",
2038
+ align: "right",
2039
+ className: "oui-h-[36px]",
2040
+ width: 100,
2041
+ multiSort: {
2042
+ fields: [
2043
+ {
2044
+ sortKey: "24h_amount",
2045
+ label: i18n.i18n.t("markets.column.24hVol")
2046
+ },
2047
+ {
2048
+ sortKey: "openInterest",
2049
+ label: i18n.i18n.t("markets.column.OI")
2050
+ }
2051
+ ]
2052
+ },
2053
+ render: (value, record) => /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", itemAlign: "end", gapY: 1, children: [
2054
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text.numeral, { rule: "human", dp: 2, rm: utils.Decimal.ROUND_DOWN, children: value }),
2055
+ /* @__PURE__ */ jsxRuntime.jsx(
2056
+ ui.Text.numeral,
2057
+ {
2058
+ rule: "human",
2059
+ dp: 2,
2060
+ rm: utils.Decimal.ROUND_DOWN,
2061
+ size: "2xs",
2062
+ intensity: 54,
2063
+ children: record.openInterest
2064
+ }
2065
+ )
2066
+ ] })
2067
+ };
2068
+ }
2069
+ function getLastAnd24hPercentageColumn(favorite, isFavoriteList = false) {
2070
+ return {
2071
+ title: i18n.i18n.t("markets.column.last&24hPercentage"),
2072
+ dataIndex: "change",
2073
+ align: "right",
2074
+ onSort: true,
2075
+ className: "oui-h-[36px]",
2076
+ width: 100,
2077
+ render: (value, record) => {
2078
+ const onDelSymbol = (e) => {
2079
+ favorite.updateSymbolFavoriteState(
2080
+ record,
2081
+ favorite.selectedFavoriteTab,
2082
+ true
2083
+ );
2084
+ e.stopPropagation();
2085
+ };
2086
+ const iconCls = "oui-w-4 oui-h-4 oui-text-base-contrast-54 hover:oui-text-base-contrast";
2087
+ const actions = /* @__PURE__ */ jsxRuntime.jsx(
2088
+ "div",
2089
+ {
2090
+ className: ui.cn(
2091
+ "oui-absolute oui-right-0 oui-top-[6.5px]",
2092
+ "oui-hidden group-hover:oui-block"
2093
+ ),
2094
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
2095
+ ui.Flex,
2096
+ {
2097
+ className: ui.cn(
2098
+ "oui-inline-flex",
2099
+ "oui-bg-primary-darken oui-py-[6px]"
2100
+ ),
2101
+ r: "base",
2102
+ width: 52,
2103
+ justify: "center",
2104
+ itemAlign: "end",
2105
+ gapX: 2,
2106
+ children: [
2107
+ /* @__PURE__ */ jsxRuntime.jsx(
2108
+ TopIcon,
2109
+ {
2110
+ className: iconCls,
2111
+ onClick: (e) => {
2112
+ e.stopPropagation();
2113
+ favorite.pinToTop(record);
2114
+ }
2115
+ }
2116
+ ),
2117
+ /* @__PURE__ */ jsxRuntime.jsx(DeleteIcon, { className: iconCls, onClick: onDelSymbol })
2118
+ ]
2119
+ }
2120
+ )
2121
+ }
2122
+ );
2123
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-relative", children: [
2124
+ isFavoriteList && actions,
2125
+ /* @__PURE__ */ jsxRuntime.jsxs(
2126
+ ui.Flex,
2127
+ {
2128
+ direction: "column",
2129
+ justify: "end",
2130
+ itemAlign: "end",
2131
+ gapY: 1,
2132
+ className: ui.cn(isFavoriteList && "group-hover:oui-invisible"),
2133
+ children: [
2134
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text.numeral, { dp: record.quote_dp || 2, size: "2xs", children: record["24h_close"] }),
2135
+ /* @__PURE__ */ jsxRuntime.jsx(
2136
+ ui.Text.numeral,
2137
+ {
2138
+ rule: "percentages",
2139
+ coloring: true,
2140
+ rm: utils.Decimal.ROUND_DOWN,
2141
+ showIdentifier: true,
2142
+ size: "2xs",
2143
+ children: value
2144
+ }
2145
+ )
2146
+ ]
2147
+ }
2148
+ )
2149
+ ] });
2150
+ }
2151
+ };
2152
+ }
2153
+ function getMarkIndexColumn() {
2154
+ return {
2155
+ title: i18n.i18n.t("markets.column.mark&Index"),
2156
+ dataIndex: "mark_price",
2157
+ align: "right",
2158
+ className: "oui-h-[36px]",
2159
+ width: 100,
2160
+ multiSort: {
2161
+ fields: [
2162
+ {
2163
+ sortKey: "mark_price",
2164
+ label: i18n.i18n.t("markets.column.mark")
2165
+ },
2166
+ {
2167
+ sortKey: "index_price",
2168
+ label: i18n.i18n.t("markets.column.index")
2169
+ }
2170
+ ]
2171
+ },
2172
+ render: (value, record) => /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", itemAlign: "end", gapY: 1, children: [
2173
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text.numeral, { dp: record.quote_dp || 2, size: "2xs", children: value }),
2174
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text.numeral, { dp: record.quote_dp || 2, size: "2xs", intensity: 54, children: record.index_price })
2175
+ ] })
2176
+ };
2177
+ }
2017
2178
  var init_column2 = __esm({
2018
2179
  "src/components/shared/column.tsx"() {
2180
+ init_icons();
2019
2181
  init_icons();
2020
2182
  init_favoritesDropdownMenu();
2021
2183
  init_rwaDotTooltip();
@@ -2191,7 +2353,7 @@ var init_favoritesTabs_ui = __esm({
2191
2353
  isActive && ui.cn(overLen ? "oui-bg-danger/15" : gradientColor)
2192
2354
  ),
2193
2355
  input: ui.cn(
2194
- "oui-font-semibold oui-caret-[rgba(217,217,217,1)]",
2356
+ "oui-font-semibold oui-caret-[rgb(var(--oui-color-tertiary))]",
2195
2357
  overLen ? "oui-text-danger" : "oui-text-transparent oui-gradient-brand ",
2196
2358
  size === "sm" ? "oui-text-2xs" : "oui-text-sm"
2197
2359
  )
@@ -2490,8 +2652,9 @@ var init_marketsDataList_mobile_ui = __esm({
2490
2652
  (favorite, isFavoriteList = false) => {
2491
2653
  return [
2492
2654
  getSymbolColumn(favorite, isFavoriteList),
2493
- getLastColumn(),
2494
- get24hPercentageColumn()
2655
+ get24hVolOIColumn(),
2656
+ getLastAnd24hPercentageColumn(favorite, isFavoriteList),
2657
+ getMarkIndexColumn()
2495
2658
  ];
2496
2659
  },
2497
2660
  []
@@ -2646,7 +2809,7 @@ var init_column3 = __esm({
2646
2809
  itemAlign: "center",
2647
2810
  onClick: isFavoriteList ? onDelSymbol : void 0,
2648
2811
  "data-testid": "oui-testid-markets-table-row-favorite-icon",
2649
- children: value ? /* @__PURE__ */ jsxRuntime.jsx(FavoritesIcon, { className: "oui-text-[rgba(255,154,46,1)]" }) : /* @__PURE__ */ jsxRuntime.jsx(UnFavoritesIcon, { className: "oui-text-base-contrast-36 hover:oui-text-[rgba(255,154,46,1)]" })
2812
+ children: value ? /* @__PURE__ */ jsxRuntime.jsx(FavoritesIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(UnFavoritesIcon, {})
2650
2813
  }
2651
2814
  );
2652
2815
  if (isFavoriteList) {
@@ -2658,14 +2821,20 @@ var init_column3 = __esm({
2658
2821
  {
2659
2822
  title: t("markets.column.market"),
2660
2823
  dataIndex: "symbol",
2661
- width: 90,
2824
+ width: 120,
2662
2825
  onSort: true,
2663
- render: (value) => {
2664
- return /* @__PURE__ */ jsxRuntime.jsx(exports.SymbolDisplay, { formatString: "base", showIcon: true, children: value });
2826
+ render: (value, record) => {
2827
+ return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gapX: 1, itemAlign: "center", children: [
2828
+ /* @__PURE__ */ jsxRuntime.jsx(exports.SymbolDisplay, { formatString: "base", showIcon: true, children: value }),
2829
+ typeof record.leverage === "number" && /* @__PURE__ */ jsxRuntime.jsxs(ui.Badge, { size: "xs", color: "primary", children: [
2830
+ record.leverage,
2831
+ "x"
2832
+ ] })
2833
+ ] });
2665
2834
  }
2666
2835
  },
2667
2836
  {
2668
- title: t("common.price"),
2837
+ title: t("markets.column.last"),
2669
2838
  dataIndex: "24h_close",
2670
2839
  width: 100,
2671
2840
  align: "right",
@@ -2674,6 +2843,26 @@ var init_column3 = __esm({
2674
2843
  return /* @__PURE__ */ jsxRuntime.jsx(ui.Text.numeral, { dp: record.quote_dp || 2, currency: "$", children: value });
2675
2844
  }
2676
2845
  },
2846
+ {
2847
+ title: t("markets.column.mark"),
2848
+ dataIndex: "mark_price",
2849
+ width: 100,
2850
+ align: "right",
2851
+ onSort: true,
2852
+ render: (value, record) => {
2853
+ return /* @__PURE__ */ jsxRuntime.jsx(ui.Text.numeral, { dp: record.quote_dp || 2, currency: "$", children: value });
2854
+ }
2855
+ },
2856
+ {
2857
+ title: t("markets.column.index"),
2858
+ dataIndex: "index_price",
2859
+ width: 100,
2860
+ align: "right",
2861
+ onSort: true,
2862
+ render: (value, record) => {
2863
+ return /* @__PURE__ */ jsxRuntime.jsx(ui.Text.numeral, { dp: record.quote_dp || 2, currency: "$", children: value });
2864
+ }
2865
+ },
2677
2866
  {
2678
2867
  title: t("markets.column.24hChange"),
2679
2868
  dataIndex: "change",
@@ -2967,7 +3156,7 @@ var init_marketsListFull_script = __esm({
2967
3156
  const { type = "all" } = options;
2968
3157
  const [loading, setLoading] = React6.useState(true);
2969
3158
  const { setPage, pagination } = ui.usePagination({
2970
- pageSize: 10
3159
+ pageSize: 100
2971
3160
  });
2972
3161
  const [data, favorite] = hooks.useMarkets(MarketsTypeMap2[type]);
2973
3162
  const { searchValue } = useMarketsContext();
@@ -3064,10 +3253,19 @@ var init_marketsDataList_ui = __esm({
3064
3253
  value: activeTab,
3065
3254
  onValueChange: onTabChange,
3066
3255
  trailing: /* @__PURE__ */ jsxRuntime.jsx(React6__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(LazySearchInput, { classNames: { root: "oui-my-1 oui-w-[240px]" } }) }),
3256
+ classNames: {
3257
+ tabsList: "oui-tabs-markets-list",
3258
+ tabsContent: "oui-tabs-markets-content"
3259
+ },
3260
+ className: "oui-markets-list-tabs",
3067
3261
  children: [
3068
3262
  /* @__PURE__ */ jsxRuntime.jsx(
3069
3263
  ui.TabPanel,
3070
3264
  {
3265
+ classNames: {
3266
+ trigger: "oui-tabs-favorites-trigger",
3267
+ content: "oui-tabs-favorites-content"
3268
+ },
3071
3269
  title: /* @__PURE__ */ jsxRuntime.jsx(FavoritesIcon, {}),
3072
3270
  value: "favorites",
3073
3271
  testid: "oui-testid-markets-favorites-tab",
@@ -3087,6 +3285,10 @@ var init_marketsDataList_ui = __esm({
3087
3285
  /* @__PURE__ */ jsxRuntime.jsx(
3088
3286
  ui.TabPanel,
3089
3287
  {
3288
+ classNames: {
3289
+ trigger: "oui-tabs-all-trigger",
3290
+ content: "oui-tabs-all-content"
3291
+ },
3090
3292
  title: t("markets.allMarkets"),
3091
3293
  icon: /* @__PURE__ */ jsxRuntime.jsx(AllMarketsIcon, {}),
3092
3294
  value: "all",
@@ -3103,6 +3305,10 @@ var init_marketsDataList_ui = __esm({
3103
3305
  /* @__PURE__ */ jsxRuntime.jsx(
3104
3306
  ui.TabPanel,
3105
3307
  {
3308
+ classNames: {
3309
+ trigger: "oui-tabs-rwa-trigger",
3310
+ content: "oui-tabs-rwa-content"
3311
+ },
3106
3312
  title: /* @__PURE__ */ jsxRuntime.jsx(RwaIconTab, {}),
3107
3313
  value: "rwa",
3108
3314
  testid: "oui-testid-markets-rwa-tab",
@@ -3118,6 +3324,10 @@ var init_marketsDataList_ui = __esm({
3118
3324
  /* @__PURE__ */ jsxRuntime.jsx(
3119
3325
  ui.TabPanel,
3120
3326
  {
3327
+ classNames: {
3328
+ trigger: "oui-tabs-newListings-trigger",
3329
+ content: "oui-tabs-newListings-content"
3330
+ },
3121
3331
  title: t("markets.newListings"),
3122
3332
  icon: /* @__PURE__ */ jsxRuntime.jsx(NewListingsIcon, {}),
3123
3333
  value: "new",
@@ -3195,6 +3405,7 @@ var init_expandMarkets_ui = __esm({
3195
3405
  initialSort: tabSort[type],
3196
3406
  onSort: onTabSort(type),
3197
3407
  tableClassNames: {
3408
+ root: "oui-expandMarkets-list",
3198
3409
  scroll: ui.cn(
3199
3410
  "oui-px-1",
3200
3411
  type === "favorites" /* Favorites */ ? "oui-pb-9" : "oui-pb-2"
@@ -3210,39 +3421,102 @@ var init_expandMarkets_ui = __esm({
3210
3421
  }
3211
3422
  ) }) });
3212
3423
  };
3213
- return /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { className: ui.cn("oui-overflow-hidden oui-font-semibold"), height: "100%", children: [
3214
- /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { px: 3, pb: 2, children: /* @__PURE__ */ jsxRuntime.jsx(React6__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(LazySearchInput2, {}) }) }),
3215
- /* @__PURE__ */ jsxRuntime.jsxs(
3216
- ui.Tabs,
3217
- {
3218
- variant: "contained",
3219
- size: "md",
3220
- value: activeTab,
3221
- onValueChange: onTabChange,
3222
- classNames: {
3223
- tabsList: ui.cn("oui-my-[6px]"),
3224
- tabsContent: "oui-h-full",
3225
- scrollIndicator: "oui-mx-3"
3226
- },
3227
- className: cls,
3228
- showScrollIndicator: true,
3229
- children: [
3230
- /* @__PURE__ */ jsxRuntime.jsx(ui.TabPanel, { title: /* @__PURE__ */ jsxRuntime.jsx(FavoritesIcon, {}), value: "favorites" /* Favorites */, children: renderTab("favorites" /* Favorites */) }),
3231
- /* @__PURE__ */ jsxRuntime.jsx(ui.TabPanel, { title: t("common.all"), value: "all" /* All */, children: renderTab("all" /* All */) }),
3232
- /* @__PURE__ */ jsxRuntime.jsx(ui.TabPanel, { title: /* @__PURE__ */ jsxRuntime.jsx(RwaTab, {}), value: "rwa" /* Rwa */, children: renderTab("rwa" /* Rwa */) }),
3233
- /* @__PURE__ */ jsxRuntime.jsx(
3234
- ui.TabPanel,
3235
- {
3236
- title: t("markets.newListings"),
3237
- value: "newListing" /* NewListing */,
3238
- children: renderTab("newListing" /* NewListing */)
3239
- }
3240
- ),
3241
- /* @__PURE__ */ jsxRuntime.jsx(ui.TabPanel, { title: t("markets.recent"), value: "recent" /* Recent */, children: renderTab("recent" /* Recent */) })
3242
- ]
3243
- }
3244
- )
3245
- ] });
3424
+ return /* @__PURE__ */ jsxRuntime.jsxs(
3425
+ ui.Box,
3426
+ {
3427
+ className: ui.cn(
3428
+ "oui-markets-expandMarkets",
3429
+ "oui-overflow-hidden oui-font-semibold"
3430
+ ),
3431
+ height: "100%",
3432
+ children: [
3433
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "oui-expandMarkets-header", px: 3, pb: 2, children: /* @__PURE__ */ jsxRuntime.jsx(React6__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
3434
+ LazySearchInput2,
3435
+ {
3436
+ classNames: { root: "oui-expandMarkets-search-input" }
3437
+ }
3438
+ ) }) }),
3439
+ /* @__PURE__ */ jsxRuntime.jsxs(
3440
+ ui.Tabs,
3441
+ {
3442
+ variant: "contained",
3443
+ size: "md",
3444
+ value: activeTab,
3445
+ onValueChange: onTabChange,
3446
+ classNames: {
3447
+ tabsList: ui.cn("oui-my-[6px]"),
3448
+ tabsContent: "oui-h-full",
3449
+ scrollIndicator: "oui-mx-3"
3450
+ },
3451
+ className: ui.cn("oui-expandMarkets-tabs", cls),
3452
+ showScrollIndicator: true,
3453
+ children: [
3454
+ /* @__PURE__ */ jsxRuntime.jsx(
3455
+ ui.TabPanel,
3456
+ {
3457
+ classNames: {
3458
+ trigger: "oui-tabs-favorites-trigger",
3459
+ content: "oui-tabs-favorites-content"
3460
+ },
3461
+ title: /* @__PURE__ */ jsxRuntime.jsx(FavoritesIcon, {}),
3462
+ value: "favorites" /* Favorites */,
3463
+ children: renderTab("favorites" /* Favorites */)
3464
+ }
3465
+ ),
3466
+ /* @__PURE__ */ jsxRuntime.jsx(
3467
+ ui.TabPanel,
3468
+ {
3469
+ classNames: {
3470
+ trigger: "oui-tabs-all-trigger",
3471
+ content: "oui-tabs-all-content"
3472
+ },
3473
+ title: t("common.all"),
3474
+ value: "all" /* All */,
3475
+ children: renderTab("all" /* All */)
3476
+ }
3477
+ ),
3478
+ /* @__PURE__ */ jsxRuntime.jsx(
3479
+ ui.TabPanel,
3480
+ {
3481
+ classNames: {
3482
+ trigger: "oui-tabs-rwa-trigger",
3483
+ content: "oui-tabs-rwa-content"
3484
+ },
3485
+ title: /* @__PURE__ */ jsxRuntime.jsx(RwaTab, {}),
3486
+ value: "rwa" /* Rwa */,
3487
+ children: renderTab("rwa" /* Rwa */)
3488
+ }
3489
+ ),
3490
+ /* @__PURE__ */ jsxRuntime.jsx(
3491
+ ui.TabPanel,
3492
+ {
3493
+ classNames: {
3494
+ trigger: "oui-tabs-newListings-trigger",
3495
+ content: "oui-tabs-newListings-content"
3496
+ },
3497
+ title: t("markets.newListings"),
3498
+ value: "newListing" /* NewListing */,
3499
+ children: renderTab("newListing" /* NewListing */)
3500
+ }
3501
+ ),
3502
+ /* @__PURE__ */ jsxRuntime.jsx(
3503
+ ui.TabPanel,
3504
+ {
3505
+ classNames: {
3506
+ trigger: "oui-tabs-recent-trigger",
3507
+ content: "oui-tabs-recent-content"
3508
+ },
3509
+ title: t("markets.recent"),
3510
+ value: "recent" /* Recent */,
3511
+ children: renderTab("recent" /* Recent */)
3512
+ }
3513
+ )
3514
+ ]
3515
+ }
3516
+ )
3517
+ ]
3518
+ }
3519
+ );
3246
3520
  };
3247
3521
  }
3248
3522
  });
@@ -3356,16 +3630,28 @@ var init_columns = __esm({
3356
3630
  onSort: true,
3357
3631
  width: 135,
3358
3632
  className: isMobile ? "oui-pl-0" : void 0,
3359
- render: (value) => /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gapX: 1, children: [
3360
- /* @__PURE__ */ jsxRuntime.jsx(
3361
- ui.TokenIcon,
3362
- {
3363
- symbol: value,
3364
- className: isMobile ? "oui-size-[18px]" : "oui-size-5"
3365
- }
3366
- ),
3367
- /* @__PURE__ */ jsxRuntime.jsx(exports.SymbolDisplay, { formatString: "base", size: "xs", children: value })
3368
- ] })
3633
+ render: (value, record) => {
3634
+ if (isMobile) {
3635
+ return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", itemAlign: "start", gapY: 1, children: [
3636
+ /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gapX: 1, itemAlign: "center", children: [
3637
+ /* @__PURE__ */ jsxRuntime.jsx(ui.TokenIcon, { symbol: value, className: "oui-size-[18px]" }),
3638
+ /* @__PURE__ */ jsxRuntime.jsx(exports.SymbolDisplay, { formatString: "base", size: "2xs", children: value })
3639
+ ] }),
3640
+ typeof record.leverage === "number" && /* @__PURE__ */ jsxRuntime.jsxs(ui.Badge, { size: "xs", color: "primary", children: [
3641
+ record.leverage,
3642
+ "x"
3643
+ ] })
3644
+ ] });
3645
+ }
3646
+ return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gapX: 1, itemAlign: "center", children: [
3647
+ /* @__PURE__ */ jsxRuntime.jsx(ui.TokenIcon, { symbol: value, className: "oui-size-5" }),
3648
+ /* @__PURE__ */ jsxRuntime.jsx(exports.SymbolDisplay, { formatString: "base", size: "xs", children: value }),
3649
+ typeof record.leverage === "number" && /* @__PURE__ */ jsxRuntime.jsxs(ui.Badge, { size: "xs", color: "primary", children: [
3650
+ record.leverage,
3651
+ "x"
3652
+ ] })
3653
+ ] });
3654
+ }
3369
3655
  },
3370
3656
  {
3371
3657
  title: t("markets.funding.column.estFunding"),
@@ -3553,7 +3839,7 @@ var init_fundingOverview_script = __esm({
3553
3839
  init_marketsProvider();
3554
3840
  init_utils();
3555
3841
  exports.useFundingOverviewScript = () => {
3556
- const { pagination } = ui.usePagination({ pageSize: 10 });
3842
+ const { pagination } = ui.usePagination({ pageSize: 100 });
3557
3843
  const [marketData] = hooks.useMarkets(hooks.MarketsType.ALL);
3558
3844
  const {
3559
3845
  data: fundingHistory,
@@ -3585,6 +3871,7 @@ var init_fundingOverview_script = __esm({
3585
3871
  );
3586
3872
  return {
3587
3873
  symbol,
3874
+ leverage: item.leverage,
3588
3875
  estFunding: fundingRate("est_funding_rate"),
3589
3876
  lastFunding: fundingRate("last_funding_rate"),
3590
3877
  fundingInterval,
@@ -3734,16 +4021,28 @@ var init_columns2 = __esm({
3734
4021
  width: 150,
3735
4022
  onSort: true,
3736
4023
  className: isMobile ? "oui-pl-0" : void 0,
3737
- render: (value) => /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gapX: 1, children: [
3738
- /* @__PURE__ */ jsxRuntime.jsx(
3739
- ui.TokenIcon,
3740
- {
3741
- symbol: value,
3742
- className: isMobile ? "oui-size-[18px]" : "oui-size-5"
3743
- }
3744
- ),
3745
- /* @__PURE__ */ jsxRuntime.jsx(exports.SymbolDisplay, { formatString: "base", size: "xs", children: value })
3746
- ] })
4024
+ render: (value, record) => {
4025
+ if (isMobile) {
4026
+ return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", itemAlign: "start", gapY: 1, children: [
4027
+ /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gapX: 1, itemAlign: "center", children: [
4028
+ /* @__PURE__ */ jsxRuntime.jsx(ui.TokenIcon, { symbol: value, className: "oui-size-[18px]" }),
4029
+ /* @__PURE__ */ jsxRuntime.jsx(exports.SymbolDisplay, { formatString: "base", size: "2xs", children: value })
4030
+ ] }),
4031
+ typeof record.leverage === "number" && /* @__PURE__ */ jsxRuntime.jsxs(ui.Badge, { size: "xs", color: "primary", children: [
4032
+ record.leverage,
4033
+ "x"
4034
+ ] })
4035
+ ] });
4036
+ }
4037
+ return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gapX: 1, itemAlign: "center", children: [
4038
+ /* @__PURE__ */ jsxRuntime.jsx(ui.TokenIcon, { symbol: value, className: "oui-size-5" }),
4039
+ /* @__PURE__ */ jsxRuntime.jsx(exports.SymbolDisplay, { formatString: "base", size: "xs", children: value }),
4040
+ typeof record.leverage === "number" && /* @__PURE__ */ jsxRuntime.jsxs(ui.Badge, { size: "xs", color: "primary", children: [
4041
+ record.leverage,
4042
+ "x"
4043
+ ] })
4044
+ ] });
4045
+ }
3747
4046
  },
3748
4047
  {
3749
4048
  title: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gapX: 1, children: [
@@ -3841,11 +4140,12 @@ var init_fundingComparison_script = __esm({
3841
4140
  init_utils();
3842
4141
  init_useEXchanges();
3843
4142
  exports.useFundingComparisonScript = () => {
3844
- const { pagination } = ui.usePagination({ pageSize: 10 });
4143
+ const { pagination } = ui.usePagination({ pageSize: 100 });
3845
4144
  const { onSort, getSortedList } = useSort();
3846
4145
  const { searchValue } = useMarketsContext();
3847
4146
  const { exchanges, brokerName } = useEXchanges();
3848
4147
  const fundingRates = hooks.useFundingRates();
4148
+ const [markets] = hooks.useMarkets(hooks.MarketsType.ALL);
3849
4149
  const { data, isLoading } = hooks.useQuery("/v1/public/market_info/funding_comparison");
3850
4150
  const { data: futures } = hooks.useMarketsStream();
3851
4151
  const processedData = React6.useMemo(() => {
@@ -3854,8 +4154,10 @@ var init_fundingComparison_script = __esm({
3854
4154
  }
3855
4155
  return data.map((row) => {
3856
4156
  const target = futures?.find((item) => item.symbol === row.symbol);
4157
+ const marketMeta = markets?.find((item) => item.symbol === row.symbol);
3857
4158
  const result = {
3858
4159
  symbol: row.symbol,
4160
+ leverage: marketMeta?.leverage,
3859
4161
  openInterest: target ? getOpenInterest(
3860
4162
  target?.open_interest,
3861
4163
  target?.index_price
@@ -3890,7 +4192,7 @@ var init_fundingComparison_script = __esm({
3890
4192
  }
3891
4193
  return result;
3892
4194
  });
3893
- }, [data, futures, fundingRates, exchanges, brokerName]);
4195
+ }, [data, futures, markets, fundingRates, exchanges, brokerName]);
3894
4196
  const filteredData = React6.useMemo(() => {
3895
4197
  return searchBySymbol(processedData, searchValue, "base-type");
3896
4198
  }, [processedData, searchValue, pagination]);
@@ -4085,7 +4387,7 @@ var init_column4 = __esm({
4085
4387
  getLastColumn(),
4086
4388
  get24hPercentageColumn(),
4087
4389
  {
4088
- title: t("common.volume"),
4390
+ title: t("markets.column.24hVol"),
4089
4391
  dataIndex: "24h_amount",
4090
4392
  align: "right",
4091
4393
  onSort: true,
@@ -4201,7 +4503,7 @@ var init_dropDownMarkets_ui = __esm({
4201
4503
  const { activeTab, onTabChange, tabSort, onTabSort } = props;
4202
4504
  const { t } = i18n.useTranslation();
4203
4505
  const getColumns = exports.useDropDownMarketsColumns();
4204
- const search = /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { mx: 3, gapX: 3, pt: 3, pb: 2, children: [
4506
+ const search = /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { className: "oui-dropDownMarkets-search", mx: 3, gapX: 3, pt: 3, pb: 2, children: [
4205
4507
  /* @__PURE__ */ jsxRuntime.jsx(
4206
4508
  SearchInput,
4207
4509
  {
@@ -4214,7 +4516,7 @@ var init_dropDownMarkets_ui = __esm({
4214
4516
  ui.CloseIcon,
4215
4517
  {
4216
4518
  size: 12,
4217
- className: "oui-cursor-pointer oui-text-base-contrast-80",
4519
+ className: "oui-dropDownMarkets-close-btn oui-cursor-pointer oui-text-base-contrast-80",
4218
4520
  onClick: props.hide,
4219
4521
  opacity: 1
4220
4522
  }
@@ -4231,7 +4533,7 @@ var init_dropDownMarkets_ui = __esm({
4231
4533
  onSort: onTabSort(type),
4232
4534
  getColumns,
4233
4535
  tableClassNames: {
4234
- root: "!oui-bg-base-8",
4536
+ root: ui.cn("oui-dropDownMarkets-list", "!oui-bg-base-8"),
4235
4537
  scroll: "oui-pb-5 oui-px-1"
4236
4538
  },
4237
4539
  rowClassName: "!oui-h-[34px]",
@@ -4248,7 +4550,10 @@ var init_dropDownMarkets_ui = __esm({
4248
4550
  return /* @__PURE__ */ jsxRuntime.jsxs(
4249
4551
  ui.Box,
4250
4552
  {
4251
- className: ui.cn("oui-overflow-hidden oui-font-semibold"),
4553
+ className: ui.cn(
4554
+ "oui-markets-dropDownMarkets",
4555
+ "oui-overflow-hidden oui-font-semibold"
4556
+ ),
4252
4557
  height: "100%",
4253
4558
  intensity: 800,
4254
4559
  children: [
@@ -4264,20 +4569,68 @@ var init_dropDownMarkets_ui = __esm({
4264
4569
  tabsList: "oui-my-[6px] oui-px-3",
4265
4570
  tabsContent: "oui-h-full"
4266
4571
  },
4267
- className: cls3,
4572
+ className: ui.cn("oui-dropDownMarkets-tabs", cls3),
4268
4573
  children: [
4269
- /* @__PURE__ */ jsxRuntime.jsx(ui.TabPanel, { title: /* @__PURE__ */ jsxRuntime.jsx(FavoritesIcon, {}), value: "favorites" /* Favorites */, children: renderTab("favorites" /* Favorites */) }),
4270
- /* @__PURE__ */ jsxRuntime.jsx(ui.TabPanel, { title: t("common.all"), value: "all" /* All */, children: renderTab("all" /* All */) }),
4271
- /* @__PURE__ */ jsxRuntime.jsx(ui.TabPanel, { title: /* @__PURE__ */ jsxRuntime.jsx(RwaTab, {}), value: "rwa" /* Rwa */, children: renderTab("rwa" /* Rwa */) }),
4272
4574
  /* @__PURE__ */ jsxRuntime.jsx(
4273
4575
  ui.TabPanel,
4274
4576
  {
4577
+ classNames: {
4578
+ trigger: "oui-tabs-favorites-trigger",
4579
+ content: "oui-tabs-favorites-content"
4580
+ },
4581
+ title: /* @__PURE__ */ jsxRuntime.jsx(FavoritesIcon, {}),
4582
+ value: "favorites" /* Favorites */,
4583
+ children: renderTab("favorites" /* Favorites */)
4584
+ }
4585
+ ),
4586
+ /* @__PURE__ */ jsxRuntime.jsx(
4587
+ ui.TabPanel,
4588
+ {
4589
+ classNames: {
4590
+ trigger: "oui-tabs-all-trigger",
4591
+ content: "oui-tabs-all-content"
4592
+ },
4593
+ title: t("common.all"),
4594
+ value: "all" /* All */,
4595
+ children: renderTab("all" /* All */)
4596
+ }
4597
+ ),
4598
+ /* @__PURE__ */ jsxRuntime.jsx(
4599
+ ui.TabPanel,
4600
+ {
4601
+ classNames: {
4602
+ trigger: "oui-tabs-rwa-trigger",
4603
+ content: "oui-tabs-rwa-content"
4604
+ },
4605
+ title: /* @__PURE__ */ jsxRuntime.jsx(RwaTab, {}),
4606
+ value: "rwa" /* Rwa */,
4607
+ children: renderTab("rwa" /* Rwa */)
4608
+ }
4609
+ ),
4610
+ /* @__PURE__ */ jsxRuntime.jsx(
4611
+ ui.TabPanel,
4612
+ {
4613
+ classNames: {
4614
+ trigger: "oui-tabs-newListings-trigger",
4615
+ content: "oui-tabs-newListings-content"
4616
+ },
4275
4617
  title: t("markets.newListings"),
4276
4618
  value: "newListing" /* NewListing */,
4277
4619
  children: renderTab("newListing" /* NewListing */)
4278
4620
  }
4279
4621
  ),
4280
- /* @__PURE__ */ jsxRuntime.jsx(ui.TabPanel, { title: t("markets.recent"), value: "recent" /* Recent */, children: renderTab("recent" /* Recent */) })
4622
+ /* @__PURE__ */ jsxRuntime.jsx(
4623
+ ui.TabPanel,
4624
+ {
4625
+ classNames: {
4626
+ trigger: "oui-tabs-recent-trigger",
4627
+ content: "oui-tabs-recent-content"
4628
+ },
4629
+ title: t("markets.recent"),
4630
+ value: "recent" /* Recent */,
4631
+ children: renderTab("recent" /* Recent */)
4632
+ }
4633
+ )
4281
4634
  ]
4282
4635
  }
4283
4636
  )
@@ -4806,6 +5159,10 @@ var init_funding_mobile_ui = __esm({
4806
5159
  /* @__PURE__ */ jsxRuntime.jsx(
4807
5160
  ui.TabPanel,
4808
5161
  {
5162
+ classNames: {
5163
+ trigger: "oui-tabs-funding-overview-trigger",
5164
+ content: "oui-tabs-funding-overview-content"
5165
+ },
4809
5166
  title: t("common.overview"),
4810
5167
  value: "overview",
4811
5168
  testid: "oui-testid-funding-overview-tab",
@@ -4818,6 +5175,10 @@ var init_funding_mobile_ui = __esm({
4818
5175
  /* @__PURE__ */ jsxRuntime.jsx(
4819
5176
  ui.TabPanel,
4820
5177
  {
5178
+ classNames: {
5179
+ trigger: "oui-tabs-funding-comparison-trigger",
5180
+ content: "oui-tabs-funding-comparison-content"
5181
+ },
4821
5182
  title: t("markets.funding.comparison"),
4822
5183
  value: "comparison",
4823
5184
  testid: "oui-testid-funding-comparison-tab",
@@ -4889,6 +5250,10 @@ var init_funding_ui = __esm({
4889
5250
  /* @__PURE__ */ jsxRuntime.jsx(
4890
5251
  ui.TabPanel,
4891
5252
  {
5253
+ classNames: {
5254
+ trigger: "oui-tabs-funding-overview-trigger",
5255
+ content: "oui-tabs-funding-overview-content"
5256
+ },
4892
5257
  title: t("common.overview"),
4893
5258
  value: "overview",
4894
5259
  testid: "oui-testid-funding-overview-tab",
@@ -4898,6 +5263,10 @@ var init_funding_ui = __esm({
4898
5263
  /* @__PURE__ */ jsxRuntime.jsx(
4899
5264
  ui.TabPanel,
4900
5265
  {
5266
+ classNames: {
5267
+ trigger: "oui-tabs-funding-comparison-trigger",
5268
+ content: "oui-tabs-funding-comparison-content"
5269
+ },
4901
5270
  title: t("markets.funding.comparison"),
4902
5271
  value: "comparison",
4903
5272
  testid: "oui-testid-funding-comparison-tab",
@@ -5013,7 +5382,7 @@ var SubMenuMarkets = (props) => {
5013
5382
  ui.Box,
5014
5383
  {
5015
5384
  className: ui.cn(
5016
- "oui-overflow-hidden oui-font-semibold oui-bg-base-9",
5385
+ "oui-subMenuMarkets oui-overflow-hidden oui-bg-base-9 oui-font-semibold",
5017
5386
  className
5018
5387
  ),
5019
5388
  height: "100%",
@@ -5031,45 +5400,82 @@ var SubMenuMarkets = (props) => {
5031
5400
  tabsContent: "oui-h-full",
5032
5401
  scrollIndicator: "oui-mx-1"
5033
5402
  },
5034
- className: ui.cn(cls2, "oui-my-1.5"),
5403
+ className: ui.cn(cls2, "oui-subMenuMarkets-tabs oui-my-1.5"),
5035
5404
  showScrollIndicator: true,
5036
5405
  children: [
5037
- /* @__PURE__ */ jsxRuntime.jsx(ui.TabPanel, { title: /* @__PURE__ */ jsxRuntime.jsx(FavoritesIcon, {}), value: "favorites" /* Favorites */, children: (() => {
5038
- const favProps = getFavoritesProps("favorites" /* Favorites */);
5039
- return /* @__PURE__ */ jsxRuntime.jsx(
5040
- MarketTabPanel,
5041
- {
5042
- type: "favorites" /* Favorites */,
5043
- getColumns,
5044
- dataFilter: favProps?.dataFilter,
5045
- renderHeader: (favorite) => /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "oui-px-1 oui-my-1", children: /* @__PURE__ */ jsxRuntime.jsx(exports.FavoritesTabWidget, { favorite, size: "sm" }) }),
5046
- initialSort: tabSort["favorites" /* Favorites */],
5047
- onSort: onTabSort("favorites" /* Favorites */),
5048
- emptyView: /* @__PURE__ */ jsxRuntime.jsx(ui.EmptyDataState, {})
5049
- }
5050
- );
5051
- })() }),
5052
- /* @__PURE__ */ jsxRuntime.jsx(ui.TabPanel, { title: t("common.all"), value: "all" /* All */, children: /* @__PURE__ */ jsxRuntime.jsx(
5053
- MarketTabPanel,
5406
+ /* @__PURE__ */ jsxRuntime.jsx(
5407
+ ui.TabPanel,
5408
+ {
5409
+ classNames: {
5410
+ trigger: "oui-tabs-favorites-trigger",
5411
+ content: "oui-tabs-favorites-content"
5412
+ },
5413
+ title: /* @__PURE__ */ jsxRuntime.jsx(FavoritesIcon, {}),
5414
+ value: "favorites" /* Favorites */,
5415
+ children: (() => {
5416
+ const favProps = getFavoritesProps("favorites" /* Favorites */);
5417
+ return /* @__PURE__ */ jsxRuntime.jsx(
5418
+ MarketTabPanel,
5419
+ {
5420
+ type: "favorites" /* Favorites */,
5421
+ getColumns,
5422
+ dataFilter: favProps?.dataFilter,
5423
+ renderHeader: (favorite) => /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "oui-px-1 oui-my-1", children: /* @__PURE__ */ jsxRuntime.jsx(exports.FavoritesTabWidget, { favorite, size: "sm" }) }),
5424
+ initialSort: tabSort["favorites" /* Favorites */],
5425
+ onSort: onTabSort("favorites" /* Favorites */),
5426
+ emptyView: /* @__PURE__ */ jsxRuntime.jsx(ui.EmptyDataState, {})
5427
+ }
5428
+ );
5429
+ })()
5430
+ }
5431
+ ),
5432
+ /* @__PURE__ */ jsxRuntime.jsx(
5433
+ ui.TabPanel,
5054
5434
  {
5055
- type: "all" /* All */,
5056
- getColumns,
5057
- initialSort: tabSort["all" /* All */],
5058
- onSort: onTabSort("all" /* All */)
5435
+ classNames: {
5436
+ trigger: "oui-tabs-all-trigger",
5437
+ content: "oui-tabs-all-content"
5438
+ },
5439
+ title: t("common.all"),
5440
+ value: "all" /* All */,
5441
+ children: /* @__PURE__ */ jsxRuntime.jsx(
5442
+ MarketTabPanel,
5443
+ {
5444
+ type: "all" /* All */,
5445
+ getColumns,
5446
+ initialSort: tabSort["all" /* All */],
5447
+ onSort: onTabSort("all" /* All */)
5448
+ }
5449
+ )
5059
5450
  }
5060
- ) }),
5061
- /* @__PURE__ */ jsxRuntime.jsx(ui.TabPanel, { title: /* @__PURE__ */ jsxRuntime.jsx(RwaIconTab, {}), value: "rwa" /* Rwa */, children: /* @__PURE__ */ jsxRuntime.jsx(
5062
- MarketTabPanel,
5451
+ ),
5452
+ /* @__PURE__ */ jsxRuntime.jsx(
5453
+ ui.TabPanel,
5063
5454
  {
5064
- type: "rwa" /* Rwa */,
5065
- getColumns,
5066
- initialSort: tabSort["rwa" /* Rwa */],
5067
- onSort: onTabSort("rwa" /* Rwa */)
5455
+ classNames: {
5456
+ trigger: "oui-tabs-rwa-trigger",
5457
+ content: "oui-tabs-rwa-content"
5458
+ },
5459
+ title: /* @__PURE__ */ jsxRuntime.jsx(RwaIconTab, {}),
5460
+ value: "rwa" /* Rwa */,
5461
+ children: /* @__PURE__ */ jsxRuntime.jsx(
5462
+ MarketTabPanel,
5463
+ {
5464
+ type: "rwa" /* Rwa */,
5465
+ getColumns,
5466
+ initialSort: tabSort["rwa" /* Rwa */],
5467
+ onSort: onTabSort("rwa" /* Rwa */)
5468
+ }
5469
+ )
5068
5470
  }
5069
- ) }),
5471
+ ),
5070
5472
  /* @__PURE__ */ jsxRuntime.jsx(
5071
5473
  ui.TabPanel,
5072
5474
  {
5475
+ classNames: {
5476
+ trigger: "oui-tabs-newListings-trigger",
5477
+ content: "oui-tabs-newListings-content"
5478
+ },
5073
5479
  title: t("markets.newListings"),
5074
5480
  value: "newListing" /* NewListing */,
5075
5481
  children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -5083,15 +5489,26 @@ var SubMenuMarkets = (props) => {
5083
5489
  )
5084
5490
  }
5085
5491
  ),
5086
- /* @__PURE__ */ jsxRuntime.jsx(ui.TabPanel, { title: t("markets.recent"), value: "recent" /* Recent */, children: /* @__PURE__ */ jsxRuntime.jsx(
5087
- MarketTabPanel,
5492
+ /* @__PURE__ */ jsxRuntime.jsx(
5493
+ ui.TabPanel,
5088
5494
  {
5089
- type: "recent" /* Recent */,
5090
- getColumns,
5091
- initialSort: tabSort["recent" /* Recent */],
5092
- onSort: onTabSort("recent" /* Recent */)
5495
+ classNames: {
5496
+ trigger: "oui-tabs-recent-trigger",
5497
+ content: "oui-tabs-recent-content"
5498
+ },
5499
+ title: t("markets.recent"),
5500
+ value: "recent" /* Recent */,
5501
+ children: /* @__PURE__ */ jsxRuntime.jsx(
5502
+ MarketTabPanel,
5503
+ {
5504
+ type: "recent" /* Recent */,
5505
+ getColumns,
5506
+ initialSort: tabSort["recent" /* Recent */],
5507
+ onSort: onTabSort("recent" /* Recent */)
5508
+ }
5509
+ )
5093
5510
  }
5094
- ) })
5511
+ )
5095
5512
  ]
5096
5513
  }
5097
5514
  )
@@ -5237,165 +5654,12 @@ init_searchInput();
5237
5654
  init_useFavoritesExtraProps();
5238
5655
 
5239
5656
  // src/components/marketsSheet/column.tsx
5240
- init_icons();
5241
- init_favoritesDropdownMenu();
5242
- init_rwaDotTooltip();
5243
- init_symbolDisplay();
5657
+ init_column2();
5244
5658
  var getMarketsSheetColumns = (favorite, isFavoriteList = false) => {
5245
5659
  return [
5246
- {
5247
- title: i18n.i18n.t("common.symbol"),
5248
- dataIndex: "symbol",
5249
- align: "left",
5250
- onSort: true,
5251
- className: "oui-h-[36px]",
5252
- width: 124,
5253
- render: (value, record) => {
5254
- let favoritesIcon;
5255
- if (!isFavoriteList) {
5256
- favoritesIcon = /* @__PURE__ */ jsxRuntime.jsx(exports.FavoritesDropdownMenuWidget, { row: record, favorite, children: /* @__PURE__ */ jsxRuntime.jsx(
5257
- ui.Flex,
5258
- {
5259
- width: 12,
5260
- height: 12,
5261
- justify: "center",
5262
- itemAlign: "center",
5263
- className: "oui-mr-1 oui-cursor-pointer",
5264
- children: record.isFavorite ? /* @__PURE__ */ jsxRuntime.jsx(FavoritesIcon2, { className: "oui-size-3 oui-text-[rgba(255,154,46,1)]" }) : /* @__PURE__ */ jsxRuntime.jsx(UnFavoritesIcon2, { className: "oui-size-3 oui-text-base-contrast-36 hover:oui-text-[rgba(255,154,46,1)]" })
5265
- }
5266
- ) });
5267
- }
5268
- return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { children: [
5269
- favoritesIcon,
5270
- /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", itemAlign: "start", gapY: 1, children: [
5271
- /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gapX: 1, children: [
5272
- /* @__PURE__ */ jsxRuntime.jsx(ui.TokenIcon, { symbol: record.symbol, className: "oui-size-[18px]" }),
5273
- /* @__PURE__ */ jsxRuntime.jsx(exports.SymbolDisplay, { formatString: "base", size: "2xs", children: record.symbol }),
5274
- /* @__PURE__ */ jsxRuntime.jsx(RwaDotTooltip, { record })
5275
- ] }),
5276
- /* @__PURE__ */ jsxRuntime.jsxs(ui.Badge, { size: "xs", color: "primary", children: [
5277
- record.leverage,
5278
- "x"
5279
- ] })
5280
- ] })
5281
- ] });
5282
- }
5283
- },
5284
- {
5285
- title: i18n.i18n.t("markets.column.24hVolOI"),
5286
- dataIndex: "24h_amount",
5287
- align: "right",
5288
- className: "oui-h-[36px]",
5289
- width: 100,
5290
- multiSort: {
5291
- fields: [
5292
- {
5293
- sortKey: "24h_amount",
5294
- label: i18n.i18n.t("markets.column.24hVol")
5295
- },
5296
- {
5297
- sortKey: "openInterest",
5298
- label: i18n.i18n.t("markets.column.OI")
5299
- }
5300
- ]
5301
- },
5302
- render: (value, record) => /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", itemAlign: "end", gapY: 1, children: [
5303
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text.numeral, { rule: "human", dp: 2, rm: utils.Decimal.ROUND_DOWN, children: value }),
5304
- /* @__PURE__ */ jsxRuntime.jsx(
5305
- ui.Text.numeral,
5306
- {
5307
- rule: "human",
5308
- dp: 2,
5309
- rm: utils.Decimal.ROUND_DOWN,
5310
- size: "2xs",
5311
- intensity: 54,
5312
- children: record.openInterest
5313
- }
5314
- )
5315
- ] })
5316
- },
5317
- {
5318
- title: i18n.i18n.t("markets.column.last&24hPercentage"),
5319
- dataIndex: "change",
5320
- align: "right",
5321
- onSort: true,
5322
- className: "oui-h-[36px]",
5323
- width: 100,
5324
- render: (value, record) => {
5325
- const onDelSymbol = (e) => {
5326
- favorite.updateSymbolFavoriteState(
5327
- record,
5328
- favorite.selectedFavoriteTab,
5329
- true
5330
- );
5331
- e.stopPropagation();
5332
- };
5333
- const iconCls = "oui-w-4 oui-h-4 oui-text-base-contrast-54 hover:oui-text-base-contrast";
5334
- const actions = /* @__PURE__ */ jsxRuntime.jsx(
5335
- "div",
5336
- {
5337
- className: ui.cn(
5338
- "oui-absolute oui-right-0 oui-top-[6.5px]",
5339
- "oui-hidden group-hover:oui-block"
5340
- ),
5341
- children: /* @__PURE__ */ jsxRuntime.jsxs(
5342
- ui.Flex,
5343
- {
5344
- className: ui.cn(
5345
- "oui-inline-flex",
5346
- "oui-bg-primary-darken oui-py-[6px]"
5347
- ),
5348
- r: "base",
5349
- width: 52,
5350
- justify: "center",
5351
- itemAlign: "end",
5352
- gapX: 2,
5353
- children: [
5354
- /* @__PURE__ */ jsxRuntime.jsx(
5355
- TopIcon,
5356
- {
5357
- className: iconCls,
5358
- onClick: (e) => {
5359
- e.stopPropagation();
5360
- favorite.pinToTop(record);
5361
- }
5362
- }
5363
- ),
5364
- /* @__PURE__ */ jsxRuntime.jsx(DeleteIcon, { className: iconCls, onClick: onDelSymbol })
5365
- ]
5366
- }
5367
- )
5368
- }
5369
- );
5370
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-relative", children: [
5371
- isFavoriteList && actions,
5372
- /* @__PURE__ */ jsxRuntime.jsxs(
5373
- ui.Flex,
5374
- {
5375
- direction: "column",
5376
- justify: "end",
5377
- itemAlign: "end",
5378
- gapY: 1,
5379
- className: ui.cn(isFavoriteList && "group-hover:oui-invisible"),
5380
- children: [
5381
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text.numeral, { dp: record.quote_dp || 2, size: "2xs", children: record["24h_close"] }),
5382
- /* @__PURE__ */ jsxRuntime.jsx(
5383
- ui.Text.numeral,
5384
- {
5385
- rule: "percentages",
5386
- coloring: true,
5387
- rm: utils.Decimal.ROUND_DOWN,
5388
- showIdentifier: true,
5389
- size: "2xs",
5390
- children: value
5391
- }
5392
- )
5393
- ]
5394
- }
5395
- )
5396
- ] });
5397
- }
5398
- }
5660
+ getSymbolColumn(favorite, isFavoriteList),
5661
+ get24hVolOIColumn(),
5662
+ getLastAnd24hPercentageColumn(favorite, isFavoriteList)
5399
5663
  ];
5400
5664
  };
5401
5665
  var MarketsSheet = (props) => {
@@ -5412,7 +5676,7 @@ var MarketsSheet = (props) => {
5412
5676
  onSort: onTabSort(type),
5413
5677
  getColumns: getMarketsSheetColumns,
5414
5678
  tableClassNames: {
5415
- root: "!oui-bg-base-8",
5679
+ root: ui.cn("oui-marketsSheet-list", "!oui-bg-base-8"),
5416
5680
  scroll: ui.cn(
5417
5681
  "oui-pb-[env(safe-area-inset-bottom,_20px)]",
5418
5682
  isFavorites ? "oui-h-[calc(100%_-_70px)]" : "oui-h-[calc(100%_-_40px)]"
@@ -5428,33 +5692,78 @@ var MarketsSheet = (props) => {
5428
5692
  }
5429
5693
  );
5430
5694
  };
5431
- return /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { height: "100%", className: ui.cn("oui-font-semibold", className), children: [
5432
- /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { px: 3, mt: 3, mb: 2, children: [
5433
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "base", intensity: 80, children: t("common.markets") }),
5434
- /* @__PURE__ */ jsxRuntime.jsx(SearchInput, { classNames: { root: "oui-mt-4" } })
5435
- ] }),
5436
- /* @__PURE__ */ jsxRuntime.jsxs(
5437
- ui.Tabs,
5438
- {
5439
- variant: "contained",
5440
- size: "md",
5441
- value: props.activeTab,
5442
- onValueChange: props.onTabChange,
5443
- classNames: {
5444
- tabsList: ui.cn("oui-my-[6px]"),
5445
- tabsContent: "oui-h-full",
5446
- scrollIndicator: "oui-mx-3"
5447
- },
5448
- className: "oui-h-[calc(100%_-_92px)]",
5449
- showScrollIndicator: true,
5450
- children: [
5451
- /* @__PURE__ */ jsxRuntime.jsx(ui.TabPanel, { title: /* @__PURE__ */ jsxRuntime.jsx(FavoritesIcon, {}), value: "favorites" /* Favorites */, children: renderTab("favorites" /* Favorites */) }),
5452
- /* @__PURE__ */ jsxRuntime.jsx(ui.TabPanel, { title: t("common.all"), value: "all" /* All */, children: renderTab("all" /* All */) }),
5453
- /* @__PURE__ */ jsxRuntime.jsx(ui.TabPanel, { title: /* @__PURE__ */ jsxRuntime.jsx(RwaTab, {}), value: "rwa" /* Rwa */, children: renderTab("rwa" /* Rwa */) })
5454
- ]
5455
- }
5456
- )
5457
- ] });
5695
+ return /* @__PURE__ */ jsxRuntime.jsxs(
5696
+ ui.Box,
5697
+ {
5698
+ height: "100%",
5699
+ className: ui.cn("oui-markets-marketsSheet", "oui-font-semibold", className),
5700
+ children: [
5701
+ /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { className: "oui-marketsSheet-header", px: 3, mt: 3, mb: 2, children: [
5702
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "base", intensity: 80, children: t("common.markets") }),
5703
+ /* @__PURE__ */ jsxRuntime.jsx(
5704
+ SearchInput,
5705
+ {
5706
+ classNames: { root: ui.cn("oui-marketsSheet-search-input", "oui-mt-4") }
5707
+ }
5708
+ )
5709
+ ] }),
5710
+ /* @__PURE__ */ jsxRuntime.jsxs(
5711
+ ui.Tabs,
5712
+ {
5713
+ variant: "contained",
5714
+ size: "md",
5715
+ value: props.activeTab,
5716
+ onValueChange: props.onTabChange,
5717
+ classNames: {
5718
+ tabsList: ui.cn("oui-my-[6px]"),
5719
+ tabsContent: "oui-h-full",
5720
+ scrollIndicator: "oui-mx-3"
5721
+ },
5722
+ className: ui.cn("oui-marketsSheet-tabs", "oui-h-[calc(100%_-_92px)]"),
5723
+ showScrollIndicator: true,
5724
+ children: [
5725
+ /* @__PURE__ */ jsxRuntime.jsx(
5726
+ ui.TabPanel,
5727
+ {
5728
+ classNames: {
5729
+ trigger: "oui-tabs-favorites-trigger",
5730
+ content: "oui-tabs-favorites-content"
5731
+ },
5732
+ title: /* @__PURE__ */ jsxRuntime.jsx(FavoritesIcon, {}),
5733
+ value: "favorites" /* Favorites */,
5734
+ children: renderTab("favorites" /* Favorites */)
5735
+ }
5736
+ ),
5737
+ /* @__PURE__ */ jsxRuntime.jsx(
5738
+ ui.TabPanel,
5739
+ {
5740
+ classNames: {
5741
+ trigger: "oui-tabs-all-trigger",
5742
+ content: "oui-tabs-all-content"
5743
+ },
5744
+ title: t("common.all"),
5745
+ value: "all" /* All */,
5746
+ children: renderTab("all" /* All */)
5747
+ }
5748
+ ),
5749
+ /* @__PURE__ */ jsxRuntime.jsx(
5750
+ ui.TabPanel,
5751
+ {
5752
+ classNames: {
5753
+ trigger: "oui-tabs-rwa-trigger",
5754
+ content: "oui-tabs-rwa-content"
5755
+ },
5756
+ title: /* @__PURE__ */ jsxRuntime.jsx(RwaTab, {}),
5757
+ value: "rwa" /* Rwa */,
5758
+ children: renderTab("rwa" /* Rwa */)
5759
+ }
5760
+ )
5761
+ ]
5762
+ }
5763
+ )
5764
+ ]
5765
+ }
5766
+ );
5458
5767
  };
5459
5768
 
5460
5769
  // src/components/marketsSheet/marketsSheet.script.ts
@@ -6158,7 +6467,7 @@ var ScrollIndicator2 = (props) => {
6158
6467
  onClick?.(leading ? "left" : "right");
6159
6468
  },
6160
6469
  style: {
6161
- background: "linear-gradient(90deg, #07080A 0%, rgba(7, 8, 10, 0.60) 65%, rgba(7, 8, 10, 0.00) 100%)"
6470
+ background: "linear-gradient(90deg, rgb(var(--oui-color-base-10)) 0%, rgba(var(--oui-color-base-10), 0.60) 65%, rgba(var(--oui-color-base-10), 0.00) 100%)"
6162
6471
  },
6163
6472
  className: ui.cn(
6164
6473
  "oui-flex oui-w-[80px] oui-items-center",
@@ -6771,6 +7080,10 @@ var MarketsDesktopContent = (props) => {
6771
7080
  /* @__PURE__ */ jsxRuntime.jsxs(
6772
7081
  ui.TabPanel,
6773
7082
  {
7083
+ classNames: {
7084
+ trigger: "oui-tabs-markets-trigger",
7085
+ content: "oui-tabs-markets-content"
7086
+ },
6774
7087
  title: t("common.markets"),
6775
7088
  value: "markets" /* Markets */,
6776
7089
  testid: "oui-testid-markets-tab",
@@ -6783,6 +7096,10 @@ var MarketsDesktopContent = (props) => {
6783
7096
  /* @__PURE__ */ jsxRuntime.jsx(
6784
7097
  ui.TabPanel,
6785
7098
  {
7099
+ classNames: {
7100
+ trigger: "oui-tabs-funding-trigger",
7101
+ content: "oui-tabs-funding-content"
7102
+ },
6786
7103
  title: t("common.funding"),
6787
7104
  value: "funding" /* Funding */,
6788
7105
  testid: "oui-testid-funding-tab",