@liberfi.io/ui-tokens 0.1.0
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.
- package/dist/index.d.mts +267 -0
- package/dist/index.d.ts +267 -0
- package/dist/index.js +22 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +22 -0
- package/dist/index.mjs.map +1 -0
- package/package.json +49 -0
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,267 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { Token, TokenProtocol, API, Chain } from '@liberfi.io/types';
|
|
3
|
+
import { PopoverProps } from '@liberfi.io/ui';
|
|
4
|
+
import { ComponentType } from 'react';
|
|
5
|
+
|
|
6
|
+
declare global {
|
|
7
|
+
interface Window {
|
|
8
|
+
__LIBERFI_VERSION__?: {
|
|
9
|
+
[key: string]: string;
|
|
10
|
+
};
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
declare const _default: "0.1.0";
|
|
14
|
+
|
|
15
|
+
type TokenAvatarProps = {
|
|
16
|
+
/** token data to display */
|
|
17
|
+
token: Token;
|
|
18
|
+
/** whether hover to preview the avatar */
|
|
19
|
+
enablePreview?: boolean;
|
|
20
|
+
/** whether click to search the avatar */
|
|
21
|
+
enableSearch?: boolean;
|
|
22
|
+
/** whether show the bonding curve progress */
|
|
23
|
+
showProgress?: boolean;
|
|
24
|
+
/** whether show the launch protocol family icon */
|
|
25
|
+
showProtocolFamily?: boolean;
|
|
26
|
+
/** radius of the avatar */
|
|
27
|
+
radius?: "none" | "sm" | "md" | "lg";
|
|
28
|
+
/** use this class to adjust the size of the avatar */
|
|
29
|
+
className?: string;
|
|
30
|
+
/** customize the styles */
|
|
31
|
+
classNames?: {
|
|
32
|
+
/** use this class to adjust the color of the avatar background, background is displayed when progress is not displayed */
|
|
33
|
+
background?: string;
|
|
34
|
+
/** use this class to adjust the color of the progress track */
|
|
35
|
+
progress?: string;
|
|
36
|
+
/** use this class to adjust the color of the avatar wrapper */
|
|
37
|
+
avatarWrapper?: string;
|
|
38
|
+
/** use this class to adjust the size of the avatar */
|
|
39
|
+
avatar?: string;
|
|
40
|
+
/** use this class to adjust the size of the protocol family icon's wrapper */
|
|
41
|
+
protocolFamilyIconWrapper?: string;
|
|
42
|
+
/** use this class to adjust the size of the protocol family icon */
|
|
43
|
+
protocolFamilyIcon?: string;
|
|
44
|
+
/** use this class to adjust the size & background color of the search wrapper */
|
|
45
|
+
searchWrapper?: string;
|
|
46
|
+
/** use this class to adjust the size & color of the search icon */
|
|
47
|
+
searchIcon?: string;
|
|
48
|
+
/** use this class to adjust the size of the preview wrapper */
|
|
49
|
+
previewWrapper?: string;
|
|
50
|
+
/** use this class to adjust the size of the avatar in the preview */
|
|
51
|
+
previewAvatar?: string;
|
|
52
|
+
/** use this class to adjust the size & background color of the search wrapper in the preview */
|
|
53
|
+
previewSearchWrapper?: string;
|
|
54
|
+
/** use this class to adjust the size & color of the search icon in the preview */
|
|
55
|
+
previewSearchIcon?: string;
|
|
56
|
+
};
|
|
57
|
+
};
|
|
58
|
+
declare function TokenAvatar({ token, enablePreview, enableSearch, showProgress, showProtocolFamily, radius, className, classNames, }: TokenAvatarProps): react_jsx_runtime.JSX.Element;
|
|
59
|
+
|
|
60
|
+
type TokenListResolution = "1m" | "5m" | "1h" | "4h" | "24h";
|
|
61
|
+
|
|
62
|
+
type TokenListFiltersType = Pick<API.GetTokenListOptions, "filters" | "keywords" | "excludeKeywords">;
|
|
63
|
+
interface TokenListFilterProps {
|
|
64
|
+
/** protocol filter options */
|
|
65
|
+
protocols?: Array<TokenProtocol>;
|
|
66
|
+
/** current resolution */
|
|
67
|
+
resolution: TokenListResolution;
|
|
68
|
+
/** filters */
|
|
69
|
+
filters?: TokenListFiltersType;
|
|
70
|
+
/** callback when filters change */
|
|
71
|
+
onFiltersChange?: (filters?: TokenListFiltersType) => void;
|
|
72
|
+
/** custom class name */
|
|
73
|
+
className?: string;
|
|
74
|
+
}
|
|
75
|
+
declare function TokenListFilter({ protocols, resolution, filters, onFiltersChange, className, }: TokenListFilterProps): react_jsx_runtime.JSX.Element;
|
|
76
|
+
|
|
77
|
+
type TokenListFilterModalProps = Pick<TokenListFilterProps, "protocols" | "resolution" | "filters" | "onFiltersChange">;
|
|
78
|
+
declare function TokenListFilterModal({ protocols, resolution, filters, onFiltersChange, }: TokenListFilterModalProps): react_jsx_runtime.JSX.Element;
|
|
79
|
+
|
|
80
|
+
type TokenListFilterPopoverProps = Pick<PopoverProps, "placement"> & Pick<TokenListFilterProps, "protocols" | "resolution" | "filters" | "onFiltersChange">;
|
|
81
|
+
declare function TokenListFilterPopover({ protocols, resolution, filters, onFiltersChange, ...popoverProps }: TokenListFilterPopoverProps): react_jsx_runtime.JSX.Element;
|
|
82
|
+
|
|
83
|
+
interface TokenListResolutionSelectorProps {
|
|
84
|
+
/** current resolution */
|
|
85
|
+
resolution?: TokenListResolution;
|
|
86
|
+
/** callback function when resolution changes */
|
|
87
|
+
onResolutionChange?: (resolution: TokenListResolution) => void | Promise<void>;
|
|
88
|
+
/** resolution options */
|
|
89
|
+
resolutionOptions?: TokenListResolution[];
|
|
90
|
+
}
|
|
91
|
+
declare function TokenListResolutionSelector({ resolution, onResolutionChange, resolutionOptions, }: TokenListResolutionSelectorProps): react_jsx_runtime.JSX.Element;
|
|
92
|
+
|
|
93
|
+
type SortDirection = "asc" | "desc" | undefined;
|
|
94
|
+
type TokenListSortDirections = {
|
|
95
|
+
[key in API.TokenFieldOption]?: SortDirection;
|
|
96
|
+
};
|
|
97
|
+
interface TokenListActionsProps {
|
|
98
|
+
token: Token;
|
|
99
|
+
resolution: TokenListResolution;
|
|
100
|
+
}
|
|
101
|
+
type TokenListActionsComponent = ComponentType<TokenListActionsProps>;
|
|
102
|
+
interface TokenListProps {
|
|
103
|
+
/** tokens to display */
|
|
104
|
+
tokens: Array<Token>;
|
|
105
|
+
/** resolution of the token prices */
|
|
106
|
+
resolution?: TokenListResolution;
|
|
107
|
+
/** whether the list is loading */
|
|
108
|
+
isLoading?: boolean;
|
|
109
|
+
/** custom token actions component */
|
|
110
|
+
ActionsComponent?: TokenListActionsComponent;
|
|
111
|
+
/** callback function when select a token */
|
|
112
|
+
onSelectToken?: (token: Token) => void | Promise<void>;
|
|
113
|
+
/** current sort directions */
|
|
114
|
+
sortDirections?: TokenListSortDirections;
|
|
115
|
+
/** callback function when sort direction changes */
|
|
116
|
+
onSortChange?: (sortDirections: TokenListSortDirections) => void | Promise<void>;
|
|
117
|
+
/**
|
|
118
|
+
* list container height, required for virtualized list.
|
|
119
|
+
* you can use useResizeObserver hook to get the container's height.
|
|
120
|
+
* default is 600
|
|
121
|
+
*/
|
|
122
|
+
height?: number;
|
|
123
|
+
/** custom item height, default is 88 */
|
|
124
|
+
itemHeight?: number;
|
|
125
|
+
/** custom item height on mobile, default is 72 */
|
|
126
|
+
itemHeightMobile?: number;
|
|
127
|
+
/** custom styles, if ActionsComponent is provided, please provide the max-width for the list */
|
|
128
|
+
className?: string;
|
|
129
|
+
}
|
|
130
|
+
/**
|
|
131
|
+
* Token List UI Component
|
|
132
|
+
*/
|
|
133
|
+
declare function TokenList({ tokens, resolution, isLoading, ActionsComponent, onSelectToken, sortDirections, onSortChange, height, itemHeight, itemHeightMobile, className, }: TokenListProps): react_jsx_runtime.JSX.Element;
|
|
134
|
+
|
|
135
|
+
type UseNewTokensScriptParams = {
|
|
136
|
+
/** chain id */
|
|
137
|
+
chain: Chain;
|
|
138
|
+
/** resolution */
|
|
139
|
+
resolution: TokenListResolution;
|
|
140
|
+
/** fetch tokens options */
|
|
141
|
+
options?: API.GetTokenListOptions;
|
|
142
|
+
/** refetch tokens interval */
|
|
143
|
+
refetchInterval?: number;
|
|
144
|
+
};
|
|
145
|
+
type UseNewTokensScriptResult = {
|
|
146
|
+
/** is fetching tokens, return true if initially fetching tokens or refetching tokens due to query params change */
|
|
147
|
+
isLoading: boolean;
|
|
148
|
+
/** tokens */
|
|
149
|
+
tokens: Array<Token>;
|
|
150
|
+
};
|
|
151
|
+
declare function useNewTokensScript({ chain, resolution, options, refetchInterval, }: UseNewTokensScriptParams): UseNewTokensScriptResult;
|
|
152
|
+
|
|
153
|
+
type NewTokenListWidgetProps = {
|
|
154
|
+
/** chain id */
|
|
155
|
+
chain: Chain;
|
|
156
|
+
/** resolution of the token prices */
|
|
157
|
+
resolution: TokenListResolution;
|
|
158
|
+
/** fetch tokens filters */
|
|
159
|
+
filters?: TokenListFiltersType;
|
|
160
|
+
/** custom token actions component */
|
|
161
|
+
ActionsComponent?: TokenListActionsComponent;
|
|
162
|
+
/** callback function when select a token */
|
|
163
|
+
onSelectToken?: (token: Token) => void | Promise<void>;
|
|
164
|
+
/**
|
|
165
|
+
* list container height, required for virtualized list.
|
|
166
|
+
* you can use useResizeObserver hook to get the container's height.
|
|
167
|
+
* default is 600
|
|
168
|
+
*/
|
|
169
|
+
height?: number;
|
|
170
|
+
/** custom item height, default is 88 */
|
|
171
|
+
itemHeight?: number;
|
|
172
|
+
/** custom item height on mobile, default is 72 */
|
|
173
|
+
itemHeightMobile?: number;
|
|
174
|
+
/** custom styles, if ActionsComponent is provided, please provide the max-width for the list */
|
|
175
|
+
className?: string;
|
|
176
|
+
};
|
|
177
|
+
declare function NewTokenListWidget({ chain, resolution, filters, ActionsComponent, onSelectToken, height, itemHeight, itemHeightMobile, className, }: NewTokenListWidgetProps): react_jsx_runtime.JSX.Element;
|
|
178
|
+
|
|
179
|
+
type UseStockTokensScriptParams = {
|
|
180
|
+
/** chain id */
|
|
181
|
+
chain: Chain;
|
|
182
|
+
/** resolution */
|
|
183
|
+
resolution: TokenListResolution;
|
|
184
|
+
/** fetch tokens options */
|
|
185
|
+
options?: API.GetTokenListOptions;
|
|
186
|
+
/** refetch tokens interval */
|
|
187
|
+
refetchInterval?: number;
|
|
188
|
+
};
|
|
189
|
+
type UseStockTokensScriptResult = {
|
|
190
|
+
/** is fetching tokens, return true if initially fetching tokens or refetching tokens due to query params change */
|
|
191
|
+
isLoading: boolean;
|
|
192
|
+
/** tokens */
|
|
193
|
+
tokens: Array<Token>;
|
|
194
|
+
};
|
|
195
|
+
declare function useStockTokensScript({ chain, resolution, options, refetchInterval, }: UseStockTokensScriptParams): UseStockTokensScriptResult;
|
|
196
|
+
|
|
197
|
+
type StockTokenListWidgetProps = {
|
|
198
|
+
/** chain id */
|
|
199
|
+
chain: Chain;
|
|
200
|
+
/** resolution of the token prices */
|
|
201
|
+
resolution: TokenListResolution;
|
|
202
|
+
/** fetch tokens filters */
|
|
203
|
+
filters?: TokenListFiltersType;
|
|
204
|
+
/** custom token actions component */
|
|
205
|
+
ActionsComponent?: TokenListActionsComponent;
|
|
206
|
+
/** callback function when select a token */
|
|
207
|
+
onSelectToken?: (token: Token) => void | Promise<void>;
|
|
208
|
+
/**
|
|
209
|
+
* list container height, required for virtualized list.
|
|
210
|
+
* you can use useResizeObserver hook to get the container's height.
|
|
211
|
+
* default is 600
|
|
212
|
+
*/
|
|
213
|
+
height?: number;
|
|
214
|
+
/** custom item height, default is 88 */
|
|
215
|
+
itemHeight?: number;
|
|
216
|
+
/** custom item height on mobile, default is 72 */
|
|
217
|
+
itemHeightMobile?: number;
|
|
218
|
+
/** custom styles, if ActionsComponent is provided, please provide the max-width for the list */
|
|
219
|
+
className?: string;
|
|
220
|
+
};
|
|
221
|
+
declare function StockTokenListWidget({ chain, resolution, filters, ActionsComponent, onSelectToken, height, itemHeight, itemHeightMobile, className, }: StockTokenListWidgetProps): react_jsx_runtime.JSX.Element;
|
|
222
|
+
|
|
223
|
+
type UseTrendingTokensScriptParams = {
|
|
224
|
+
/** chain id */
|
|
225
|
+
chain: Chain;
|
|
226
|
+
/** resolution */
|
|
227
|
+
resolution: TokenListResolution;
|
|
228
|
+
/** fetch tokens options */
|
|
229
|
+
options?: API.GetTokenListOptions;
|
|
230
|
+
/** refetch tokens interval */
|
|
231
|
+
refetchInterval?: number;
|
|
232
|
+
};
|
|
233
|
+
type UseTrendingTokensScriptResult = {
|
|
234
|
+
/** is fetching tokens, return true if initially fetching tokens or refetching tokens due to query params change */
|
|
235
|
+
isLoading: boolean;
|
|
236
|
+
/** tokens */
|
|
237
|
+
tokens: Array<Token>;
|
|
238
|
+
};
|
|
239
|
+
declare function useTrendingTokensScript({ chain, resolution, options, refetchInterval, }: UseTrendingTokensScriptParams): UseTrendingTokensScriptResult;
|
|
240
|
+
|
|
241
|
+
type TrendingTokenListWidgetProps = {
|
|
242
|
+
/** chain id */
|
|
243
|
+
chain: Chain;
|
|
244
|
+
/** resolution of the token prices */
|
|
245
|
+
resolution: TokenListResolution;
|
|
246
|
+
/** fetch tokens filters */
|
|
247
|
+
filters?: TokenListFiltersType;
|
|
248
|
+
/** custom token actions component */
|
|
249
|
+
ActionsComponent?: TokenListActionsComponent;
|
|
250
|
+
/** callback function when select a token */
|
|
251
|
+
onSelectToken?: (token: Token) => void | Promise<void>;
|
|
252
|
+
/**
|
|
253
|
+
* list container height, required for virtualized list.
|
|
254
|
+
* you can use useResizeObserver hook to get the container's height.
|
|
255
|
+
* default is 600
|
|
256
|
+
*/
|
|
257
|
+
height?: number;
|
|
258
|
+
/** custom item height, default is 88 */
|
|
259
|
+
itemHeight?: number;
|
|
260
|
+
/** custom item height on mobile, default is 72 */
|
|
261
|
+
itemHeightMobile?: number;
|
|
262
|
+
/** custom styles, if ActionsComponent is provided, please provide the max-width for the list */
|
|
263
|
+
className?: string;
|
|
264
|
+
};
|
|
265
|
+
declare function TrendingTokenListWidget({ chain, resolution, filters, ActionsComponent, onSelectToken, height, itemHeight, itemHeightMobile, className, }: TrendingTokenListWidgetProps): react_jsx_runtime.JSX.Element;
|
|
266
|
+
|
|
267
|
+
export { NewTokenListWidget, type NewTokenListWidgetProps, StockTokenListWidget, type StockTokenListWidgetProps, TokenAvatar, type TokenAvatarProps, TokenList, type TokenListActionsComponent, type TokenListActionsProps, TokenListFilter, TokenListFilterModal, type TokenListFilterModalProps, TokenListFilterPopover, type TokenListFilterPopoverProps, type TokenListFilterProps, type TokenListFiltersType, type TokenListProps, type TokenListResolution, TokenListResolutionSelector, type TokenListResolutionSelectorProps, type TokenListSortDirections, TrendingTokenListWidget, type TrendingTokenListWidgetProps, type UseNewTokensScriptParams, type UseNewTokensScriptResult, type UseStockTokensScriptParams, type UseStockTokensScriptResult, type UseTrendingTokensScriptParams, type UseTrendingTokensScriptResult, useNewTokensScript, useStockTokensScript, useTrendingTokensScript, _default as version };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,267 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { Token, TokenProtocol, API, Chain } from '@liberfi.io/types';
|
|
3
|
+
import { PopoverProps } from '@liberfi.io/ui';
|
|
4
|
+
import { ComponentType } from 'react';
|
|
5
|
+
|
|
6
|
+
declare global {
|
|
7
|
+
interface Window {
|
|
8
|
+
__LIBERFI_VERSION__?: {
|
|
9
|
+
[key: string]: string;
|
|
10
|
+
};
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
declare const _default: "0.1.0";
|
|
14
|
+
|
|
15
|
+
type TokenAvatarProps = {
|
|
16
|
+
/** token data to display */
|
|
17
|
+
token: Token;
|
|
18
|
+
/** whether hover to preview the avatar */
|
|
19
|
+
enablePreview?: boolean;
|
|
20
|
+
/** whether click to search the avatar */
|
|
21
|
+
enableSearch?: boolean;
|
|
22
|
+
/** whether show the bonding curve progress */
|
|
23
|
+
showProgress?: boolean;
|
|
24
|
+
/** whether show the launch protocol family icon */
|
|
25
|
+
showProtocolFamily?: boolean;
|
|
26
|
+
/** radius of the avatar */
|
|
27
|
+
radius?: "none" | "sm" | "md" | "lg";
|
|
28
|
+
/** use this class to adjust the size of the avatar */
|
|
29
|
+
className?: string;
|
|
30
|
+
/** customize the styles */
|
|
31
|
+
classNames?: {
|
|
32
|
+
/** use this class to adjust the color of the avatar background, background is displayed when progress is not displayed */
|
|
33
|
+
background?: string;
|
|
34
|
+
/** use this class to adjust the color of the progress track */
|
|
35
|
+
progress?: string;
|
|
36
|
+
/** use this class to adjust the color of the avatar wrapper */
|
|
37
|
+
avatarWrapper?: string;
|
|
38
|
+
/** use this class to adjust the size of the avatar */
|
|
39
|
+
avatar?: string;
|
|
40
|
+
/** use this class to adjust the size of the protocol family icon's wrapper */
|
|
41
|
+
protocolFamilyIconWrapper?: string;
|
|
42
|
+
/** use this class to adjust the size of the protocol family icon */
|
|
43
|
+
protocolFamilyIcon?: string;
|
|
44
|
+
/** use this class to adjust the size & background color of the search wrapper */
|
|
45
|
+
searchWrapper?: string;
|
|
46
|
+
/** use this class to adjust the size & color of the search icon */
|
|
47
|
+
searchIcon?: string;
|
|
48
|
+
/** use this class to adjust the size of the preview wrapper */
|
|
49
|
+
previewWrapper?: string;
|
|
50
|
+
/** use this class to adjust the size of the avatar in the preview */
|
|
51
|
+
previewAvatar?: string;
|
|
52
|
+
/** use this class to adjust the size & background color of the search wrapper in the preview */
|
|
53
|
+
previewSearchWrapper?: string;
|
|
54
|
+
/** use this class to adjust the size & color of the search icon in the preview */
|
|
55
|
+
previewSearchIcon?: string;
|
|
56
|
+
};
|
|
57
|
+
};
|
|
58
|
+
declare function TokenAvatar({ token, enablePreview, enableSearch, showProgress, showProtocolFamily, radius, className, classNames, }: TokenAvatarProps): react_jsx_runtime.JSX.Element;
|
|
59
|
+
|
|
60
|
+
type TokenListResolution = "1m" | "5m" | "1h" | "4h" | "24h";
|
|
61
|
+
|
|
62
|
+
type TokenListFiltersType = Pick<API.GetTokenListOptions, "filters" | "keywords" | "excludeKeywords">;
|
|
63
|
+
interface TokenListFilterProps {
|
|
64
|
+
/** protocol filter options */
|
|
65
|
+
protocols?: Array<TokenProtocol>;
|
|
66
|
+
/** current resolution */
|
|
67
|
+
resolution: TokenListResolution;
|
|
68
|
+
/** filters */
|
|
69
|
+
filters?: TokenListFiltersType;
|
|
70
|
+
/** callback when filters change */
|
|
71
|
+
onFiltersChange?: (filters?: TokenListFiltersType) => void;
|
|
72
|
+
/** custom class name */
|
|
73
|
+
className?: string;
|
|
74
|
+
}
|
|
75
|
+
declare function TokenListFilter({ protocols, resolution, filters, onFiltersChange, className, }: TokenListFilterProps): react_jsx_runtime.JSX.Element;
|
|
76
|
+
|
|
77
|
+
type TokenListFilterModalProps = Pick<TokenListFilterProps, "protocols" | "resolution" | "filters" | "onFiltersChange">;
|
|
78
|
+
declare function TokenListFilterModal({ protocols, resolution, filters, onFiltersChange, }: TokenListFilterModalProps): react_jsx_runtime.JSX.Element;
|
|
79
|
+
|
|
80
|
+
type TokenListFilterPopoverProps = Pick<PopoverProps, "placement"> & Pick<TokenListFilterProps, "protocols" | "resolution" | "filters" | "onFiltersChange">;
|
|
81
|
+
declare function TokenListFilterPopover({ protocols, resolution, filters, onFiltersChange, ...popoverProps }: TokenListFilterPopoverProps): react_jsx_runtime.JSX.Element;
|
|
82
|
+
|
|
83
|
+
interface TokenListResolutionSelectorProps {
|
|
84
|
+
/** current resolution */
|
|
85
|
+
resolution?: TokenListResolution;
|
|
86
|
+
/** callback function when resolution changes */
|
|
87
|
+
onResolutionChange?: (resolution: TokenListResolution) => void | Promise<void>;
|
|
88
|
+
/** resolution options */
|
|
89
|
+
resolutionOptions?: TokenListResolution[];
|
|
90
|
+
}
|
|
91
|
+
declare function TokenListResolutionSelector({ resolution, onResolutionChange, resolutionOptions, }: TokenListResolutionSelectorProps): react_jsx_runtime.JSX.Element;
|
|
92
|
+
|
|
93
|
+
type SortDirection = "asc" | "desc" | undefined;
|
|
94
|
+
type TokenListSortDirections = {
|
|
95
|
+
[key in API.TokenFieldOption]?: SortDirection;
|
|
96
|
+
};
|
|
97
|
+
interface TokenListActionsProps {
|
|
98
|
+
token: Token;
|
|
99
|
+
resolution: TokenListResolution;
|
|
100
|
+
}
|
|
101
|
+
type TokenListActionsComponent = ComponentType<TokenListActionsProps>;
|
|
102
|
+
interface TokenListProps {
|
|
103
|
+
/** tokens to display */
|
|
104
|
+
tokens: Array<Token>;
|
|
105
|
+
/** resolution of the token prices */
|
|
106
|
+
resolution?: TokenListResolution;
|
|
107
|
+
/** whether the list is loading */
|
|
108
|
+
isLoading?: boolean;
|
|
109
|
+
/** custom token actions component */
|
|
110
|
+
ActionsComponent?: TokenListActionsComponent;
|
|
111
|
+
/** callback function when select a token */
|
|
112
|
+
onSelectToken?: (token: Token) => void | Promise<void>;
|
|
113
|
+
/** current sort directions */
|
|
114
|
+
sortDirections?: TokenListSortDirections;
|
|
115
|
+
/** callback function when sort direction changes */
|
|
116
|
+
onSortChange?: (sortDirections: TokenListSortDirections) => void | Promise<void>;
|
|
117
|
+
/**
|
|
118
|
+
* list container height, required for virtualized list.
|
|
119
|
+
* you can use useResizeObserver hook to get the container's height.
|
|
120
|
+
* default is 600
|
|
121
|
+
*/
|
|
122
|
+
height?: number;
|
|
123
|
+
/** custom item height, default is 88 */
|
|
124
|
+
itemHeight?: number;
|
|
125
|
+
/** custom item height on mobile, default is 72 */
|
|
126
|
+
itemHeightMobile?: number;
|
|
127
|
+
/** custom styles, if ActionsComponent is provided, please provide the max-width for the list */
|
|
128
|
+
className?: string;
|
|
129
|
+
}
|
|
130
|
+
/**
|
|
131
|
+
* Token List UI Component
|
|
132
|
+
*/
|
|
133
|
+
declare function TokenList({ tokens, resolution, isLoading, ActionsComponent, onSelectToken, sortDirections, onSortChange, height, itemHeight, itemHeightMobile, className, }: TokenListProps): react_jsx_runtime.JSX.Element;
|
|
134
|
+
|
|
135
|
+
type UseNewTokensScriptParams = {
|
|
136
|
+
/** chain id */
|
|
137
|
+
chain: Chain;
|
|
138
|
+
/** resolution */
|
|
139
|
+
resolution: TokenListResolution;
|
|
140
|
+
/** fetch tokens options */
|
|
141
|
+
options?: API.GetTokenListOptions;
|
|
142
|
+
/** refetch tokens interval */
|
|
143
|
+
refetchInterval?: number;
|
|
144
|
+
};
|
|
145
|
+
type UseNewTokensScriptResult = {
|
|
146
|
+
/** is fetching tokens, return true if initially fetching tokens or refetching tokens due to query params change */
|
|
147
|
+
isLoading: boolean;
|
|
148
|
+
/** tokens */
|
|
149
|
+
tokens: Array<Token>;
|
|
150
|
+
};
|
|
151
|
+
declare function useNewTokensScript({ chain, resolution, options, refetchInterval, }: UseNewTokensScriptParams): UseNewTokensScriptResult;
|
|
152
|
+
|
|
153
|
+
type NewTokenListWidgetProps = {
|
|
154
|
+
/** chain id */
|
|
155
|
+
chain: Chain;
|
|
156
|
+
/** resolution of the token prices */
|
|
157
|
+
resolution: TokenListResolution;
|
|
158
|
+
/** fetch tokens filters */
|
|
159
|
+
filters?: TokenListFiltersType;
|
|
160
|
+
/** custom token actions component */
|
|
161
|
+
ActionsComponent?: TokenListActionsComponent;
|
|
162
|
+
/** callback function when select a token */
|
|
163
|
+
onSelectToken?: (token: Token) => void | Promise<void>;
|
|
164
|
+
/**
|
|
165
|
+
* list container height, required for virtualized list.
|
|
166
|
+
* you can use useResizeObserver hook to get the container's height.
|
|
167
|
+
* default is 600
|
|
168
|
+
*/
|
|
169
|
+
height?: number;
|
|
170
|
+
/** custom item height, default is 88 */
|
|
171
|
+
itemHeight?: number;
|
|
172
|
+
/** custom item height on mobile, default is 72 */
|
|
173
|
+
itemHeightMobile?: number;
|
|
174
|
+
/** custom styles, if ActionsComponent is provided, please provide the max-width for the list */
|
|
175
|
+
className?: string;
|
|
176
|
+
};
|
|
177
|
+
declare function NewTokenListWidget({ chain, resolution, filters, ActionsComponent, onSelectToken, height, itemHeight, itemHeightMobile, className, }: NewTokenListWidgetProps): react_jsx_runtime.JSX.Element;
|
|
178
|
+
|
|
179
|
+
type UseStockTokensScriptParams = {
|
|
180
|
+
/** chain id */
|
|
181
|
+
chain: Chain;
|
|
182
|
+
/** resolution */
|
|
183
|
+
resolution: TokenListResolution;
|
|
184
|
+
/** fetch tokens options */
|
|
185
|
+
options?: API.GetTokenListOptions;
|
|
186
|
+
/** refetch tokens interval */
|
|
187
|
+
refetchInterval?: number;
|
|
188
|
+
};
|
|
189
|
+
type UseStockTokensScriptResult = {
|
|
190
|
+
/** is fetching tokens, return true if initially fetching tokens or refetching tokens due to query params change */
|
|
191
|
+
isLoading: boolean;
|
|
192
|
+
/** tokens */
|
|
193
|
+
tokens: Array<Token>;
|
|
194
|
+
};
|
|
195
|
+
declare function useStockTokensScript({ chain, resolution, options, refetchInterval, }: UseStockTokensScriptParams): UseStockTokensScriptResult;
|
|
196
|
+
|
|
197
|
+
type StockTokenListWidgetProps = {
|
|
198
|
+
/** chain id */
|
|
199
|
+
chain: Chain;
|
|
200
|
+
/** resolution of the token prices */
|
|
201
|
+
resolution: TokenListResolution;
|
|
202
|
+
/** fetch tokens filters */
|
|
203
|
+
filters?: TokenListFiltersType;
|
|
204
|
+
/** custom token actions component */
|
|
205
|
+
ActionsComponent?: TokenListActionsComponent;
|
|
206
|
+
/** callback function when select a token */
|
|
207
|
+
onSelectToken?: (token: Token) => void | Promise<void>;
|
|
208
|
+
/**
|
|
209
|
+
* list container height, required for virtualized list.
|
|
210
|
+
* you can use useResizeObserver hook to get the container's height.
|
|
211
|
+
* default is 600
|
|
212
|
+
*/
|
|
213
|
+
height?: number;
|
|
214
|
+
/** custom item height, default is 88 */
|
|
215
|
+
itemHeight?: number;
|
|
216
|
+
/** custom item height on mobile, default is 72 */
|
|
217
|
+
itemHeightMobile?: number;
|
|
218
|
+
/** custom styles, if ActionsComponent is provided, please provide the max-width for the list */
|
|
219
|
+
className?: string;
|
|
220
|
+
};
|
|
221
|
+
declare function StockTokenListWidget({ chain, resolution, filters, ActionsComponent, onSelectToken, height, itemHeight, itemHeightMobile, className, }: StockTokenListWidgetProps): react_jsx_runtime.JSX.Element;
|
|
222
|
+
|
|
223
|
+
type UseTrendingTokensScriptParams = {
|
|
224
|
+
/** chain id */
|
|
225
|
+
chain: Chain;
|
|
226
|
+
/** resolution */
|
|
227
|
+
resolution: TokenListResolution;
|
|
228
|
+
/** fetch tokens options */
|
|
229
|
+
options?: API.GetTokenListOptions;
|
|
230
|
+
/** refetch tokens interval */
|
|
231
|
+
refetchInterval?: number;
|
|
232
|
+
};
|
|
233
|
+
type UseTrendingTokensScriptResult = {
|
|
234
|
+
/** is fetching tokens, return true if initially fetching tokens or refetching tokens due to query params change */
|
|
235
|
+
isLoading: boolean;
|
|
236
|
+
/** tokens */
|
|
237
|
+
tokens: Array<Token>;
|
|
238
|
+
};
|
|
239
|
+
declare function useTrendingTokensScript({ chain, resolution, options, refetchInterval, }: UseTrendingTokensScriptParams): UseTrendingTokensScriptResult;
|
|
240
|
+
|
|
241
|
+
type TrendingTokenListWidgetProps = {
|
|
242
|
+
/** chain id */
|
|
243
|
+
chain: Chain;
|
|
244
|
+
/** resolution of the token prices */
|
|
245
|
+
resolution: TokenListResolution;
|
|
246
|
+
/** fetch tokens filters */
|
|
247
|
+
filters?: TokenListFiltersType;
|
|
248
|
+
/** custom token actions component */
|
|
249
|
+
ActionsComponent?: TokenListActionsComponent;
|
|
250
|
+
/** callback function when select a token */
|
|
251
|
+
onSelectToken?: (token: Token) => void | Promise<void>;
|
|
252
|
+
/**
|
|
253
|
+
* list container height, required for virtualized list.
|
|
254
|
+
* you can use useResizeObserver hook to get the container's height.
|
|
255
|
+
* default is 600
|
|
256
|
+
*/
|
|
257
|
+
height?: number;
|
|
258
|
+
/** custom item height, default is 88 */
|
|
259
|
+
itemHeight?: number;
|
|
260
|
+
/** custom item height on mobile, default is 72 */
|
|
261
|
+
itemHeightMobile?: number;
|
|
262
|
+
/** custom styles, if ActionsComponent is provided, please provide the max-width for the list */
|
|
263
|
+
className?: string;
|
|
264
|
+
};
|
|
265
|
+
declare function TrendingTokenListWidget({ chain, resolution, filters, ActionsComponent, onSelectToken, height, itemHeight, itemHeightMobile, className, }: TrendingTokenListWidgetProps): react_jsx_runtime.JSX.Element;
|
|
266
|
+
|
|
267
|
+
export { NewTokenListWidget, type NewTokenListWidgetProps, StockTokenListWidget, type StockTokenListWidgetProps, TokenAvatar, type TokenAvatarProps, TokenList, type TokenListActionsComponent, type TokenListActionsProps, TokenListFilter, TokenListFilterModal, type TokenListFilterModalProps, TokenListFilterPopover, type TokenListFilterPopoverProps, type TokenListFilterProps, type TokenListFiltersType, type TokenListProps, type TokenListResolution, TokenListResolutionSelector, type TokenListResolutionSelectorProps, type TokenListSortDirections, TrendingTokenListWidget, type TrendingTokenListWidgetProps, type UseNewTokensScriptParams, type UseNewTokensScriptResult, type UseStockTokensScriptParams, type UseStockTokensScriptResult, type UseTrendingTokensScriptParams, type UseTrendingTokensScriptResult, useNewTokensScript, useStockTokensScript, useTrendingTokensScript, _default as version };
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
'use strict';var react=require('react'),ui=require('@liberfi.io/ui'),utils=require('@liberfi.io/utils'),jsxRuntime=require('react/jsx-runtime'),i18n=require('@liberfi.io/i18n'),hooks=require('@liberfi.io/hooks');typeof window<"u"&&(window.__LIBERFI_VERSION__=window.__LIBERFI_VERSION__||{},window.__LIBERFI_VERSION__["@liberfi.io/ui-tokens"]="0.1.0");var Ot="0.1.0";function Ae({token:e,enablePreview:t=true,enableSearch:o=true,showProgress:r=true,showProtocolFamily:n=true,radius:s="sm",className:p,classNames:i}){let c=react.useMemo(()=>e.launchedFrom?.protocolFamily?utils.parseTokenProtocolFamily(e.chain,e.launchedFrom.protocolFamily):void 0,[e.chain,e.launchedFrom?.protocolFamily]),m=react.useMemo(()=>n&&c,[n,c]),a=react.useMemo(()=>r&&e.migrateProgress&&new utils.SafeBigNumber(e.migrateProgress).lt(100),[r,e.migrateProgress]),d=react.useMemo(()=>o&&e.image,[o,e.image]),l=react.useMemo(()=>(e.symbol??e.name??e.address??"L").slice(0,1).toUpperCase(),[e.symbol,e.name,e.address]),[k,T]=react.useState(false),v=react.useCallback(()=>{T(true);},[]),C=react.useCallback(()=>{T(false);},[]),h=react.useCallback(H=>{if(H.stopPropagation(),!e.image)return;let U=utils.searchImageUrl(e.image);window.open(U,"_blank");},[e.image]);return jsxRuntime.jsxs("div",{className:ui.clsx("relative justify-center items-center",p??"w-15 h-15"),children:[!a&&jsxRuntime.jsx("div",{className:ui.clsx("absolute inset-0",`rounded-${s}`,c?`bg-${c}`:"bg-bullish",i?.background)}),a&&jsxRuntime.jsx("div",{className:ui.clsx("absolute -inset-0.5",`rounded-${s}`),children:jsxRuntime.jsx(Ut,{className:ui.clsx(c?`text-${c}`:"text-bullish",i?.progress),progress:e.migrateProgress??"0"})}),jsxRuntime.jsx("div",{className:ui.clsx("absolute inset-0 p-px flex items-center justify-center",`rounded-${s}`,c?`bg-${c}/20`:"bg-bullish/20",i?.avatarWrapper),children:jsxRuntime.jsx(Bt,{token:e,radius:s,enableSearch:o,enablePreview:t,classNames:i,children:jsxRuntime.jsxs("div",{className:ui.clsx("relative w-full h-full bg-content1 flex items-center justify-center p-0.5",`rounded-${s}`,k&&d&&"cursor-pointer"),onMouseEnter:v,onMouseLeave:C,children:[jsxRuntime.jsx(ui.Avatar,{showFallback:true,src:e.image,name:l,className:ui.clsx("w-full h-full bg-content1 text-neutral text-2xl",`rounded-${s}`,i?.avatar)}),k&&d&&jsxRuntime.jsx("div",{className:ui.clsx("absolute inset-0 bg-content1/80 flex items-center justify-center",`rounded-${s}`,i?.searchWrapper),onClick:h,children:jsxRuntime.jsx(ui.CameraIcon,{className:ui.clsx("w-6 h-6",i?.searchIcon)})})]})})}),m&&jsxRuntime.jsx("div",{className:"contents",children:jsxRuntime.jsx(ui.StyledTooltip,{content:e.launchedFrom?.protocolFamily??c,placement:"bottom",closeDelay:0,children:jsxRuntime.jsx("div",{className:ui.clsx("absolute -bottom-1 -right-1 rounded-full p-px w-4 h-4",`bg-${c}`,i?.protocolFamilyIconWrapper),children:jsxRuntime.jsx(ui.Image,{removeWrapper:true,src:`/images/protocols/${c}.svg`,className:ui.clsx("w-full h-full rounded-full bg-content1",i?.protocolFamilyIcon)})})})})]})}function Bt({token:e,radius:t,enableSearch:o,enablePreview:r,classNames:n,children:s}){return react.useMemo(()=>r&&e.image,[r,e.image])?jsxRuntime.jsx(ui.StyledTooltip,{content:jsxRuntime.jsx(Wt,{token:e,radius:t,enableSearch:o,classNames:n}),closeDelay:100,placement:"bottom-start",classNames:{content:"p-1"},children:s}):s}function Wt({token:e,enableSearch:t,radius:o,classNames:r}){let n=react.useMemo(()=>t&&e.image,[t,e.image]),s=react.useMemo(()=>(e.symbol??e.name??e.address??"L").slice(0,1).toUpperCase(),[e.symbol,e.name,e.address]),[p,i]=react.useState(false),c=react.useCallback(()=>{i(true);},[]),m=react.useCallback(()=>{i(false);},[]),a=react.useCallback(d=>{if(d.stopPropagation(),!e.image)return;let l=utils.searchImageUrl(e.image);window.open(l,"_blank");},[e.image]);return jsxRuntime.jsxs("div",{className:ui.clsx("relative flex items-center justify-center w-60 h-60",`rounded-${o}`,p&&n&&"cursor-pointer",r?.previewWrapper),onMouseEnter:c,onMouseLeave:m,children:[jsxRuntime.jsx(ui.Avatar,{showFallback:true,src:e.image,name:s,className:ui.clsx("w-full h-full bg-content1 text-neutral text-3xl",`rounded-${o}`,r?.previewAvatar)}),p&&n&&jsxRuntime.jsx("div",{className:ui.clsx("absolute inset-0 bg-content1/80 flex items-center justify-center",`rounded-${o}`,r?.previewSearchWrapper),onClick:a,children:jsxRuntime.jsx(ui.CameraIcon,{className:ui.clsx("w-10 h-10",r?.previewSearchIcon)})})]})}function Ut({progress:e,className:t}){let o=react.useMemo(()=>296-Number(e)*296/100,[e]);return jsxRuntime.jsxs("svg",{viewBox:"0 0 78 78",className:"w-full h-full",children:[jsxRuntime.jsx("path",{className:`${t} opacity-40`,stroke:"currentColor",fill:"transparent",strokeWidth:"1",d:`
|
|
2
|
+
M 76 76
|
|
3
|
+
L 6 76
|
|
4
|
+
Q 2 76 2 72
|
|
5
|
+
L 2 6
|
|
6
|
+
Q 2 2 6 2
|
|
7
|
+
L 72 2
|
|
8
|
+
Q 76 2 76 6
|
|
9
|
+
L 76 72
|
|
10
|
+
Q 76 76 76 76
|
|
11
|
+
`}),jsxRuntime.jsx("path",{className:`${t} transition-all duration-300 ease-in-out`,stroke:"currentColor",fill:"transparent",strokeWidth:"1",strokeLinecap:"round",strokeDasharray:"296",strokeDashoffset:o,d:`
|
|
12
|
+
M 76 76
|
|
13
|
+
L 6 76
|
|
14
|
+
Q 2 76 2 72
|
|
15
|
+
L 2 6
|
|
16
|
+
Q 2 2 6 2
|
|
17
|
+
L 72 2
|
|
18
|
+
Q 76 2 76 6
|
|
19
|
+
L 76 72
|
|
20
|
+
Q 76 76 76 76
|
|
21
|
+
`})]})}function He({keywords:e,excludeKeywords:t,onKeywordsChange:o,onExcludeKeywordsChange:r,className:n}){let{t:s}=i18n.useTranslation(),[p,i]=react.useState(e?.join(", ")??""),[c,m]=react.useState(t?.join(", ")??"");react.useEffect(()=>{i(l=>{let k=K(l);return k===void 0&&e===void 0?l:k===void 0?e?.join(", ")??"":e===void 0?"":k.join("")===e.join("")?l:e.join(", ")});},[e]),react.useEffect(()=>{m(l=>{let k=K(l);return k===void 0&&t===void 0?l:k===void 0?t?.join(", ")??"":t===void 0?"":k.join("")===t.join("")?l:t.join(", ")});},[t]);let a=react.useCallback(l=>{i(l),o?.(K(l));},[o]),d=react.useCallback(l=>{m(l),r?.(K(l));},[r]);return jsxRuntime.jsxs("div",{className:ui.clsx("grid grid-cols-2 gap-3 px-4",n),children:[jsxRuntime.jsxs("div",{className:"flex flex-col gap-3",children:[jsxRuntime.jsx("h3",{className:"text-xs text-neutral",children:s("tokens.filters.keywords.title")}),jsxRuntime.jsx(ui.StyledInput,{variant:"bordered",radius:"lg",size:"sm",placeholder:s("tokens.filters.keywords.placeholder"),value:p,onValueChange:a})]}),jsxRuntime.jsxs("div",{className:"flex flex-col gap-3",children:[jsxRuntime.jsx("h3",{className:"text-xs text-neutral",children:s("tokens.filters.keywords.exclude.title")}),jsxRuntime.jsx(ui.StyledInput,{variant:"bordered",radius:"lg",size:"sm",placeholder:s("tokens.filters.keywords.placeholder"),value:c,onValueChange:d})]})]})}function K(e){let t=e.split(",").map(o=>o.trim()).filter(Boolean);return t.length>0?t:void 0}function Be({protocols:e,selectedProtocols:t=[],onSelectedProtocolsChange:o,className:r}){let{t:n}=i18n.useTranslation(),[s,p]=react.useState(t);react.useEffect(()=>{p(t);},[t]);let i=react.useMemo(()=>e.every(a=>s.includes(a)),[e,s]),c=react.useCallback(()=>{if(i){let a=[];p(a),o?.(a);}else {let a=[...e];p(a),o?.(a);}},[e,o,i]),m=react.useCallback(a=>()=>{if(s.includes(a)){let d=s.filter(l=>l!==a);p(d),o?.(d);}else {let d=[...s,a];p(d),o?.(d);}},[s,o]);return jsxRuntime.jsxs("div",{className:ui.clsx("flex flex-col gap-3 px-4",r),children:[jsxRuntime.jsxs("div",{className:"flex justify-between items-center",children:[jsxRuntime.jsx("h3",{className:"text-xs text-neutral",children:n("tokens.filters.protocols.title")}),jsxRuntime.jsx(ui.StyledButton,{variant:"light",color:"content3",size:"xs",radius:"full",onPress:c,children:n(i?"tokens.filters.protocols.unselectAll":"tokens.filters.protocols.selectAll")})]}),jsxRuntime.jsx("div",{className:"grid grid-cols-3 gap-3",children:e.map(a=>jsxRuntime.jsx(ui.StyledButton,{variant:"bordered",size:"xs",radius:"full",className:ui.clsx("w-fit",`text-${a}`,`bg-${a}/5`,`border border-${a}`,{"opacity-40":!s.includes(a)}),startContent:jsxRuntime.jsx(ui.Image,{width:14,height:14,src:`/images/protocols/${a}.svg`,alt:utils.formatTokenProtocolName(a)}),onPress:m(a),children:utils.formatTokenProtocolName(a)},a))})]})}function N({title:e,field:t,value:o,onChange:r}){let{t:n}=i18n.useTranslation(),[s,p]=react.useState(o?re(o).min:NaN),[i,c]=react.useState(o?re(o).max:NaN);react.useEffect(()=>{if(o===void 0)p(NaN),c(NaN);else {let{min:d,max:l}=re(o);p(d),c(l);}},[o]);let m=react.useCallback(d=>{p(d),r?.(Ke(t,d,i));},[t,r,i]),a=react.useCallback(d=>{c(d),r?.(Ke(t,s,d));},[t,r,s]);return jsxRuntime.jsxs("div",{className:"flex flex-col gap-1",children:[e&&jsxRuntime.jsx("h3",{className:"text-xs text-neutral",children:e}),jsxRuntime.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[jsxRuntime.jsx(ui.StyledNumberInput,{value:s,onValueChange:m,variant:"bordered",radius:"lg",size:"sm",placeholder:n("tokens.filters.stats.min"),"aria-label":`${e} min`}),jsxRuntime.jsx(ui.StyledNumberInput,{value:i,onValueChange:a,variant:"bordered",radius:"lg",size:"sm",placeholder:n("tokens.filters.stats.max"),"aria-label":`${e} max`})]})]})}function re(e){if(e.operator==="between"){let[t,o]=e.value;return {min:t,max:o}}return e.operator==="gte"?{min:e.value,max:NaN}:e.operator==="lte"?{min:NaN,max:e.value}:{min:NaN,max:NaN}}function Ke(e,t,o){if(!(isNaN(t)&&isNaN(o)))return isNaN(t)?{field:e,operator:"lte",value:o}:isNaN(o)?{field:e,operator:"gte",value:t}:{field:e,operator:"between",value:[t,o]}}function je({values:e,onValuesChange:t,className:o}){let{t:r}=i18n.useTranslation(),[n,s]=react.useState(e);react.useEffect(()=>{s(e);},[e]);let p=react.useCallback(i=>c=>{if(c===void 0){let m=(n??[]).filter(a=>a.field!==i);m=m.length>0?m:void 0,s(m),t?.(m);}else {let m=[...(n??[]).filter(a=>a.field!==i),c];s(m),t?.(m);}},[n,t]);return jsxRuntime.jsxs("div",{className:ui.clsx("flex flex-col gap-4",o),children:[jsxRuntime.jsx(N,{field:"holders",title:r("tokens.filters.stats.audits.holders"),value:n?.find(i=>i.field==="holders"),onChange:p("holders")}),jsxRuntime.jsx(N,{field:"top10Ratio",title:r("tokens.filters.stats.audits.top10HoldingsRatio"),value:n?.find(i=>i.field==="top10Ratio"),onChange:p("top10Ratio")}),jsxRuntime.jsx(N,{field:"top100Ratio",title:r("tokens.filters.stats.audits.top100HoldingsRatio"),value:n?.find(i=>i.field==="top100Ratio"),onChange:p("top100Ratio")}),jsxRuntime.jsx(N,{field:"creatorsRatio",title:r("tokens.filters.stats.audits.devHoldingsRatio"),value:n?.find(i=>i.field==="creatorsRatio"),onChange:p("creatorsRatio")})]})}function qe({resolution:e,values:t,onValuesChange:o,className:r}){let{t:n}=i18n.useTranslation(),[s,p]=react.useState(t);react.useEffect(()=>{p(t);},[t]);let i=react.useCallback(c=>m=>{if(m===void 0){let a=(s??[]).filter(d=>d.field!==c);a=a.length>0?a:void 0,p(a),o?.(a);}else {let a=[...(s??[]).filter(d=>d.field!==c),m];p(a),o?.(a);}},[s,o]);return jsxRuntime.jsxs("div",{className:ui.clsx("flex flex-col gap-4",r),children:[jsxRuntime.jsx(N,{field:"marketCap",title:n("tokens.filters.stats.metrics.marketCap"),value:s?.find(c=>c.field==="marketCap"),onChange:i("marketCap")}),jsxRuntime.jsx(N,{field:"tvl",title:n("tokens.filters.stats.metrics.liquidity"),value:s?.find(c=>c.field==="tvl"),onChange:i("tvl")}),jsxRuntime.jsx(N,{field:`volumes${e}`,title:n("tokens.filters.stats.metrics.volumes",{resolution:n(`common.resolution.${e}`)}),value:s?.find(c=>c.field===`volumes${e}`),onChange:i(`volumes${e}`)}),jsxRuntime.jsx(N,{field:`trades${e}`,title:n("tokens.filters.stats.metrics.txns",{resolution:n(`common.resolution.${e}`)}),value:s?.find(c=>c.field===`trades${e}`),onChange:i(`trades${e}`)})]})}function Ze({resolution:e,values:t,onValuesChange:o,className:r}){let{t:n}=i18n.useTranslation(),[s,p]=react.useState("audits"),[i,c]=react.useState(t);react.useEffect(()=>{c(t);},[t]);let m=react.useCallback(l=>{c(l),o?.(l);},[o]),a=react.useMemo(()=>{let l=["holders","top10Ratio","top100Ratio","creatorsRatio"];return i?.filter(k=>l.includes(k.field))?.length??0},[i]),d=react.useMemo(()=>{let l=["marketCap","tvl",`volumes${e}`,`trades${e}`];return i?.filter(k=>l.includes(k.field)).length??0},[i,e]);return jsxRuntime.jsxs("div",{className:ui.clsx("flex flex-col gap-3 px-4",r),children:[jsxRuntime.jsxs(ui.StyledTabs,{variant:"light",radius:"full",size:"sm",selectedKey:s,onSelectionChange:p,children:[jsxRuntime.jsx(ui.Tab,{title:a===0?n("tokens.filters.stats.audits"):jsxRuntime.jsx(ui.StyledBadge,{color:"primary",size:"sm",content:a,shape:"circle",children:n("tokens.filters.stats.audits")})},"audits"),jsxRuntime.jsx(ui.Tab,{title:d===0?n("tokens.filters.stats.metrics"):jsxRuntime.jsx(ui.StyledBadge,{color:"primary",size:"sm",content:d,shape:"circle",children:n("tokens.filters.stats.metrics")})},"metrics")]}),jsxRuntime.jsx(je,{values:i,onValuesChange:m,className:ui.clsx({hidden:s!=="audits"})}),jsxRuntime.jsx(qe,{values:i,onValuesChange:m,resolution:e,className:ui.clsx({hidden:s!=="metrics"})})]})}function Y({protocols:e,resolution:t,filters:o,onFiltersChange:r,className:n}){let[s,p]=react.useState(tt(o?.filters,e));react.useEffect(()=>{p(tt(o?.filters,e));},[o?.filters,e]);let[i,c]=react.useState(o?.keywords);react.useEffect(()=>{c(o?.keywords);},[o?.keywords]);let[m,a]=react.useState(o?.excludeKeywords);react.useEffect(()=>{a(o?.excludeKeywords);},[o?.excludeKeywords]);let[d,l]=react.useState(o?.filters);react.useEffect(()=>{l(o?.filters);},[o?.filters]);let k=react.useCallback(h=>{p(h),r?.(X(e,h,i,m,d));},[e,i,m,d,r]),T=react.useCallback(h=>{c(h),r?.(X(e,s,h,m,d));},[e,s,m,d,r]),v=react.useCallback(h=>{a(h),r?.(X(e,s,i,h,d));},[e,s,i,d,r]),C=react.useCallback(h=>{l(h),r?.(X(e,s,i,m,h));},[e,s,i,m,r]);return jsxRuntime.jsxs("div",{className:ui.clsx("flex flex-col gap-4",n),children:[e&&e.length>0&&jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(Be,{protocols:e,selectedProtocols:s,onSelectedProtocolsChange:k}),jsxRuntime.jsx(ui.StyledDivider,{})]}),jsxRuntime.jsx(He,{keywords:i,excludeKeywords:m,onKeywordsChange:T,onExcludeKeywordsChange:v}),jsxRuntime.jsx(ui.StyledDivider,{}),jsxRuntime.jsx(Ze,{resolution:t,values:d,onValuesChange:C})]})}function tt(e,t){let o=e?.find(r=>r.field==="launchedFromProtocolFamily");return o?o.operator==="in"?o.value:[...t||[]]:[...t||[]]}function X(e,t,o,r,n){let s=n?[...n.filter(p=>p.field!=="launchedFromProtocolFamily")]:[];return e&&e.length>0&&(e.every(i=>t.includes(i))||s.push({field:"launchedFromProtocolFamily",operator:"in",value:t})),o===void 0&&r===void 0&&s.length===0?void 0:{keywords:o,excludeKeywords:r,filters:s.length>0?s:void 0}}function gn({protocols:e,resolution:t,filters:o,onFiltersChange:r}){let{t:n}=i18n.useTranslation(),{isOpen:s,onOpen:p,onClose:i,onOpenChange:c}=ui.useDisclosure(),[m,a]=react.useState(o),d=react.useCallback(()=>{a(void 0);},[]),l=react.useCallback(()=>{r?.(m),i();},[m,r,i]);react.useEffect(()=>{a(o);},[s,o]);let k=react.useMemo(()=>Object.values(o||{}).every(T=>T===void 0),[o]);return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(ui.StyledButton,{color:"content2",size:"sm",radius:"full",className:"font-bold text-sm",startContent:k?jsxRuntime.jsx(ui.FilterIcon,{width:16,height:16}):jsxRuntime.jsx(ui.StyledBadge,{color:"primary",size:"sm",content:"",shape:"circle",children:jsxRuntime.jsx(ui.FilterIcon,{width:16,height:16})}),endContent:jsxRuntime.jsx(ui.ChevronDownIcon,{width:16,height:16,className:"data-[open=true]:-rotate-180 transition-transform","data-open":s}),onPress:p,children:n("tokens.listHeader.filter")}),jsxRuntime.jsx(ui.StyledModal,{isOpen:s,onOpenChange:c,size:"md",scrollBehavior:"inside",children:jsxRuntime.jsxs(ui.ModalContent,{children:[jsxRuntime.jsx(ui.ModalHeader,{children:n("tokens.filters.modal.title")}),jsxRuntime.jsx(ui.ModalBody,{children:jsxRuntime.jsx(ui.ScrollShadow,{children:jsxRuntime.jsx(Y,{protocols:e,resolution:t,filters:m,onFiltersChange:a,className:"pb-4"})})}),jsxRuntime.jsx(ui.ModalFooter,{children:jsxRuntime.jsxs("div",{className:"w-full px-4 flex justify-between items-center",children:[jsxRuntime.jsx(ui.StyledButton,{color:"transparent",size:"xs",radius:"full",startContent:jsxRuntime.jsx(ui.RefreshIcon,{width:16,height:16}),onPress:d,children:n("common.reset")}),jsxRuntime.jsx(ui.StyledButton,{color:"primary",size:"sm",radius:"full",onPress:l,children:n("common.apply")})]})})]})})]})}function Ln({protocols:e,resolution:t,filters:o,onFiltersChange:r,...n}){let{t:s}=i18n.useTranslation(),{isOpen:p,onClose:i,onOpenChange:c}=ui.useDisclosure(),[m,a]=react.useState(o),d=react.useCallback(()=>{a(void 0);},[]),l=react.useCallback(()=>{r?.(m),i();},[m,r,i]);react.useEffect(()=>{a(o);},[p,o]);let k=react.useMemo(()=>Object.values(o||{}).every(T=>T===void 0),[o]);return jsxRuntime.jsxs(ui.StyledPopover,{...n,isOpen:p,onOpenChange:c,children:[jsxRuntime.jsx(ui.PopoverTrigger,{children:jsxRuntime.jsx(ui.StyledButton,{color:"content2",size:"sm",radius:"full",className:"font-bold text-sm",startContent:k?jsxRuntime.jsx(ui.FilterIcon,{width:16,height:16}):jsxRuntime.jsx(ui.StyledBadge,{color:"primary",size:"sm",content:"",shape:"circle",children:jsxRuntime.jsx(ui.FilterIcon,{width:16,height:16})}),endContent:jsxRuntime.jsx(ui.ChevronDownIcon,{width:16,height:16,className:"data-[open=true]:-rotate-180 transition-transform","data-open":p}),children:s("tokens.listHeader.filter")})}),jsxRuntime.jsx(ui.PopoverContent,{children:jsxRuntime.jsxs("div",{className:"w-md py-4 px-0 flex flex-col gap-4",children:[jsxRuntime.jsx(ui.ScrollShadow,{className:"w-full max-h-120",children:jsxRuntime.jsx(Y,{protocols:e,resolution:t,filters:m,onFiltersChange:a})}),jsxRuntime.jsx(ui.StyledDivider,{}),jsxRuntime.jsxs("div",{className:"w-full px-4 flex justify-between items-center",children:[jsxRuntime.jsx(ui.StyledButton,{color:"transparent",size:"xs",radius:"full",startContent:jsxRuntime.jsx(ui.RefreshIcon,{width:16,height:16}),onPress:d,children:s("common.reset")}),jsxRuntime.jsx(ui.StyledButton,{color:"primary",size:"sm",radius:"full",onPress:l,children:s("common.apply")})]})]})})]})}function Dn({resolution:e,onResolutionChange:t,resolutionOptions:o=["1m","5m","1h","4h","24h"]}){let{t:r}=i18n.useTranslation(),n=react.useCallback(s=>{t?.(s);},[t]);return jsxRuntime.jsx(ui.StyledTabs,{variant:"radio",radius:"lg",selectedKey:e,onSelectionChange:n,"aria-label":"Select Resolution",children:o.map(s=>jsxRuntime.jsx(ui.Tab,{title:r(`common.resolution.${s}`)},s))})}function lt({token:e}){let t=ui.useCopyToClipboard(),{t:o}=i18n.useTranslation(),r=react.useCallback(s=>{s.preventDefault(),s.stopPropagation(),t(e.address,o("tokens.copied.address"));},[t,e.address,o]),n=hooks.useTickAge(e.createdAt);return jsxRuntime.jsxs("div",{className:"w-full flex justify-start items-center gap-3",children:[jsxRuntime.jsx(Ae,{token:e,className:"w-10 h-10 sm:w-16 sm:h-16 flex-none"}),jsxRuntime.jsxs("div",{className:"flex-auto flex flex-col gap-1 min-w-0",children:[jsxRuntime.jsxs("div",{className:"flex items-center gap-1",children:[jsxRuntime.jsx("span",{className:"flex-none font-medium tracking-[-0.02em]",children:e.symbol}),jsxRuntime.jsx(ui.StyledTooltip,{content:e.name,closeDelay:0,children:jsxRuntime.jsxs("div",{className:"flex-initial flex items-center gap-1 min-w-0 text-neutral hover:text-primary-200 cursor-pointer",onClick:r,children:[jsxRuntime.jsx("div",{className:"flex-initial whitespace-nowrap truncate",children:e.name}),jsxRuntime.jsx(ui.CopyIcon,{className:"flex-none w-3 h-3 sm:w-3.5 sm:h-3.5"})]})})]}),jsxRuntime.jsxs("div",{className:"flex items-center gap-2",children:[jsxRuntime.jsx("span",{className:"text-primary text-xs sm:text-sm font-medium",children:utils.formatAge(n)}),e.socialMedias?.website&&jsxRuntime.jsx(ui.Link,{href:e.socialMedias.website,className:"text-neutral hover:text-primary",target:"_blank",children:jsxRuntime.jsx(ui.WebsiteIcon,{className:"w-3.5 h-3.5 sm:w-4 sm:h-4"})}),e.socialMedias?.twitter&&jsxRuntime.jsx(ui.Link,{href:e.socialMedias.twitter,className:"text-neutral hover:text-primary",target:"_blank",children:jsxRuntime.jsx(ui.TwitterIcon,{className:"w-3.5 h-3.5 sm:w-4 sm:h-4"})}),e.socialMedias?.telegram&&jsxRuntime.jsx(ui.Link,{href:e.socialMedias.telegram,className:"text-neutral hover:text-primary",target:"_blank",children:jsxRuntime.jsx(ui.TelegramIcon,{className:"w-3.5 h-3.5 sm:w-4 sm:h-4"})}),e.socialMedias?.discord&&jsxRuntime.jsx(ui.Link,{href:e.socialMedias.discord,className:"text-neutral hover:text-primary",target:"_blank",children:jsxRuntime.jsx(ui.DiscordIcon,{className:"w-3.5 h-3.5 sm:w-4 sm:h-4"})}),jsxRuntime.jsx(ui.Link,{href:utils.searchTwitterUrl(`${e.symbol} OR ${e.address}`),className:"text-neutral hover:text-primary",target:"_blank",children:jsxRuntime.jsx(ui.SearchIcon,{className:"w-3.5 h-3.5 sm:w-4 sm:h-4"})})]})]})]})}function mt({token:e}){let{t}=i18n.useTranslation(),o=react.useMemo(()=>e.marketData?.holders,[e.marketData?.holders]),r=react.useMemo(()=>e.marketData?.creatorsRatio,[e.marketData?.creatorsRatio]),n=react.useMemo(()=>new utils.SafeBigNumber(r).gte(.1),[r]),s=react.useMemo(()=>e.marketData?.top10Ratio,[e.marketData?.top10Ratio]),p=react.useMemo(()=>new utils.SafeBigNumber(s).gte(.1),[s]),i=react.useMemo(()=>e.marketData?.top100Ratio,[e.marketData?.top100Ratio]),c=react.useMemo(()=>new utils.SafeBigNumber(i).gte(.1),[i]);return jsxRuntime.jsxs("div",{className:"w-full h-full flex gap-1 justify-start items-center",children:[jsxRuntime.jsxs("div",{className:"flex flex-col gap-1 items-start justify-start",children:[jsxRuntime.jsx(ui.StyledTooltip,{content:t("tokens.tokenInfo.holders"),closeDelay:0,children:jsxRuntime.jsx(ui.Chip,{className:"pl-2 pr-1.5 gap-0.5 h-5",startContent:jsxRuntime.jsx(ui.PeopleIcon,{width:14,height:14}),variant:"flat",size:"sm",color:o?"primary":"default",children:utils.formatAmount(o)})}),jsxRuntime.jsx(ui.StyledTooltip,{content:t("tokens.tokenInfo.devHoldingsRatio"),closeDelay:0,children:jsxRuntime.jsx(ui.Chip,{className:"pl-2 pr-1.5 gap-0.5 h-5",startContent:jsxRuntime.jsx(ui.CookIcon,{width:13,height:13}),variant:"flat",size:"sm",color:n?"danger":r===void 0?"default":"primary",children:utils.formatPercent(r)})})]}),jsxRuntime.jsxs("div",{className:"flex flex-col gap-1 items-start justify-start",children:[jsxRuntime.jsx(ui.StyledTooltip,{content:t("tokens.tokenInfo.top10HoldingsRatio"),closeDelay:0,children:jsxRuntime.jsx(ui.Chip,{className:"pl-2 pr-1.5 gap-0.5 h-5",startContent:jsxRuntime.jsx(ui.UserWithStarBadgeIcon,{width:14,height:14}),variant:"flat",size:"sm",color:p?"danger":s===void 0?"default":"primary",children:utils.formatPercent(s)})}),jsxRuntime.jsx(ui.StyledTooltip,{content:t("tokens.tokenInfo.top100HoldingsRatio"),closeDelay:0,children:jsxRuntime.jsx(ui.Chip,{className:"pl-2 pr-1.5 gap-0.5 h-5",startContent:jsxRuntime.jsx(ui.UserIcon,{width:14,height:14}),variant:"flat",size:"sm",color:c?"danger":i===void 0?"default":"primary",children:utils.formatPercent(i)})})]})]})}function dt({token:e}){let t=react.useMemo(()=>e.marketData?.tvlInUsd,[e.marketData?.tvlInUsd]);return jsxRuntime.jsx(jsxRuntime.Fragment,{children:utils.formatAmountUSD(t)})}function ct({token:e}){let t=react.useMemo(()=>e.marketData?.marketCapInUsd,[e.marketData?.marketCapInUsd]);return jsxRuntime.jsx(jsxRuntime.Fragment,{children:utils.formatAmountUSD(t)})}function ft({token:e,resolution:t}){let o=react.useMemo(()=>e.marketData?.priceInUsd,[e]),r=react.useMemo(()=>e.stats?.[t]?.priceChange,[e,t]),n=react.useMemo(()=>r?new utils.SafeBigNumber(r).abs().toString():void 0,[r]),s=react.useMemo(()=>r&&new utils.SafeBigNumber(r).gte(0),[r]);return jsxRuntime.jsxs("div",{className:"flex flex-col gap-1 justify-center items-start",children:[jsxRuntime.jsx("span",{children:utils.formatPriceUSD(o)}),jsxRuntime.jsxs("span",{className:ui.clsx("inline-flex gap-1 items-center text-xs",s?"text-bullish":"text-bearish"),children:[s?jsxRuntime.jsx(ui.TriangleUpIcon,{width:10,height:10}):jsxRuntime.jsx(ui.TriangleDownIcon,{width:10,height:10}),jsxRuntime.jsx("span",{children:utils.formatPercent(n)})]})]})}function ht({token:e,resolution:t}){let o=react.useMemo(()=>e.stats?.[t]?.traders,[e.stats?.[t]?.traders]),r=react.useMemo(()=>e.stats?.[t]?.buyers,[e.stats?.[t]?.buyers]),n=react.useMemo(()=>e.stats?.[t]?.sellers,[e.stats?.[t]?.sellers]);return jsxRuntime.jsxs("div",{className:"flex flex-col gap-1 justify-center items-start",children:[jsxRuntime.jsx("span",{children:utils.formatAmount(o)}),jsxRuntime.jsxs("div",{className:"flex gap-1 text-xs",children:[jsxRuntime.jsx("span",{className:"text-bullish",children:utils.formatAmount(r)}),"/",jsxRuntime.jsx("span",{className:"text-bearish",children:utils.formatAmount(n)})]})]})}function gt({token:e,resolution:t}){let o=react.useMemo(()=>e.stats?.[t]?.trades,[e.stats?.[t]?.trades]),r=react.useMemo(()=>e.stats?.[t]?.buys,[e.stats?.[t]?.buys]),n=react.useMemo(()=>e.stats?.[t]?.sells,[e.stats?.[t]?.sells]);return jsxRuntime.jsxs("div",{className:"flex flex-col gap-1 justify-center items-start",children:[jsxRuntime.jsx("span",{children:utils.formatAmount(o)}),jsxRuntime.jsxs("div",{className:"flex gap-1 text-xs",children:[jsxRuntime.jsx("span",{className:"text-bullish",children:utils.formatAmount(r)}),"/",jsxRuntime.jsx("span",{className:"text-bearish",children:utils.formatAmount(n)})]})]})}function xt({token:e,resolution:t}){let o=react.useMemo(()=>e.stats?.[t]?.volumesInUsd,[e.stats?.[t]?.volumesInUsd]),r=react.useMemo(()=>e.stats?.[t]?.buyVolumesInUsd,[e.stats?.[t]?.buyVolumesInUsd]),n=react.useMemo(()=>e.stats?.[t]?.sellVolumesInUsd,[e.stats?.[t]?.sellVolumesInUsd]);return jsxRuntime.jsxs("div",{className:"flex flex-col gap-1 justify-center items-start",children:[jsxRuntime.jsx("span",{children:utils.formatAmountUSD(o)}),jsxRuntime.jsxs("div",{className:"flex gap-1 text-xs",children:[jsxRuntime.jsx("span",{className:"text-bullish",children:utils.formatAmountUSD(r)}),"/",jsxRuntime.jsx("span",{className:"text-bearish",children:utils.formatAmountUSD(n)})]})]})}var vt=5;function wt({rowHeight:e,hasActions:t}){return jsxRuntime.jsx(jsxRuntime.Fragment,{children:Array.from({length:vt}).map((o,r)=>jsxRuntime.jsx(Ls,{rowHeight:e,hasBorderBottom:r!==vt-1,hasActions:t},r))})}function Ls({rowHeight:e,hasBorderBottom:t,hasActions:o}){return jsxRuntime.jsxs("div",{className:ui.clsx("relative flex items-center","[&>div]:first:sm:pl-6 [&>div]:last:sm:pr-6",t&&"after:content-[''] after:absolute after:left-0 after:bottom-0",t&&"after:w-full after:h-px after:bg-border/50"),style:{height:`${e}px`},children:[jsxRuntime.jsx(As,{}),jsxRuntime.jsx(Fs,{}),jsxRuntime.jsx(Is,{}),jsxRuntime.jsx(Rs,{}),jsxRuntime.jsx(Ms,{}),jsxRuntime.jsx(Hs,{}),jsxRuntime.jsx(Ds,{}),jsxRuntime.jsx(Os,{}),o&&jsxRuntime.jsx(Es,{})]})}function As(){return jsxRuntime.jsxs("div",{className:"w-56 sm:w-81 px-3 h-full flex justify-start items-center gap-3",children:[jsxRuntime.jsx(ui.Skeleton,{className:"w-10 h-10 sm:w-16 sm:h-16 flex-none rounded-md"}),jsxRuntime.jsxs("div",{className:"flex flex-col gap-1",children:[jsxRuntime.jsx("div",{className:"w-18 sm:w-24 h-4 sm:h-6 flex items-center",children:jsxRuntime.jsx(ui.Skeleton,{className:"w-full h-3 sm:h-4 rounded-md"})}),jsxRuntime.jsx("div",{className:"w-32 sm:w-40 h-4 sm:h-6 flex items-center",children:jsxRuntime.jsx(ui.Skeleton,{className:"w-full h-3 sm:h-3.5 rounded-md"})})]})]})}function Fs(){return jsxRuntime.jsxs("div",{className:"w-23.5 sm:w-36 h-full px-3 flex flex-col gap-1 justify-center items-start",children:[jsxRuntime.jsx("div",{className:"w-10 sm:w-14 h-4 sm:h-6 flex items-center",children:jsxRuntime.jsx(ui.Skeleton,{className:"w-full h-3 sm:h-4 rounded-md"})}),jsxRuntime.jsx("div",{className:"w-18 sm:w-24 h-4 flex items-center",children:jsxRuntime.jsx(ui.Skeleton,{className:"w-full h-3 rounded-md"})})]})}function Is(){return jsxRuntime.jsx("div",{className:"w-23.5 sm:w-36 h-full px-3 flex items-center",children:jsxRuntime.jsx(ui.Skeleton,{className:"w-18 sm:w-24 h-3 sm:h-4 rounded-md"})})}function Rs(){return jsxRuntime.jsx("div",{className:"w-23.5 sm:w-36 h-full px-3 flex items-center",children:jsxRuntime.jsx(ui.Skeleton,{className:"w-18 sm:w-24 h-3 sm:h-4 rounded-md"})})}function Ms(){return jsxRuntime.jsxs("div",{className:"w-31.5 sm:w-36 h-full px-3 flex flex-col gap-1 justify-center items-start",children:[jsxRuntime.jsx("div",{className:"w-10 sm:w-14 h-4 sm:h-6 flex items-center",children:jsxRuntime.jsx(ui.Skeleton,{className:"w-full h-3 sm:h-4 rounded-md"})}),jsxRuntime.jsx("div",{className:"w-18 sm:w-24 h-4 flex items-center",children:jsxRuntime.jsx(ui.Skeleton,{className:"w-full h-3 rounded-md"})})]})}function Hs(){return jsxRuntime.jsxs("div",{className:"w-31.5 sm:w-36 h-full px-3 py-2 flex flex-col gap-1 justify-center items-start",children:[jsxRuntime.jsx("div",{className:"w-10 sm:w-14 h-4 sm:h-6 flex items-center",children:jsxRuntime.jsx(ui.Skeleton,{className:"w-full h-3 sm:h-4 rounded-md"})}),jsxRuntime.jsx("div",{className:"w-18 sm:w-24 h-4 flex items-center",children:jsxRuntime.jsx(ui.Skeleton,{className:"w-full h-3 rounded-md"})})]})}function Ds(){return jsxRuntime.jsxs("div",{className:"w-31.5 sm:w-36 h-full px-3 py-2 flex flex-col gap-1 justify-center items-start",children:[jsxRuntime.jsx("div",{className:"w-10 sm:w-14 h-4 sm:h-6 flex items-center",children:jsxRuntime.jsx(ui.Skeleton,{className:"w-full h-3 sm:h-4 rounded-md"})}),jsxRuntime.jsx("div",{className:"w-18 sm:w-24 h-4 flex items-center",children:jsxRuntime.jsx(ui.Skeleton,{className:"w-full h-3 rounded-md"})})]})}function Os(){return jsxRuntime.jsxs("div",{className:"w-51 sm:w-56 h-full px-3 py-2 flex gap-1.5 justify-start items-center",children:[jsxRuntime.jsxs("div",{className:"flex flex-col gap-1 items-start justify-start",children:[jsxRuntime.jsx(ui.Skeleton,{className:"w-18 h-5 rounded-full"}),jsxRuntime.jsx(ui.Skeleton,{className:"w-18 h-5 rounded-full"})]}),jsxRuntime.jsxs("div",{className:"flex flex-col gap-1 items-start justify-start",children:[jsxRuntime.jsx(ui.Skeleton,{className:"w-18 h-5 rounded-full"}),jsxRuntime.jsx(ui.Skeleton,{className:"w-18 h-5 rounded-full"})]})]})}function Es(){return jsxRuntime.jsx("div",{className:"w-51 sm:w-56 h-full px-3 py-2"})}function E({tokens:e,resolution:t="24h",isLoading:o,ActionsComponent:r,onSelectToken:n,sortDirections:s,onSortChange:p,height:i=600,itemHeight:c=88,itemHeightMobile:m=72,className:a}){let{isMobile:d}=ui.useScreen(),{t:l}=i18n.useTranslation(),k=react.useCallback(h=>H=>{H.preventDefault(),H.stopPropagation(),n?.(h);},[n]),[T,v]=react.useState(s??{});react.useEffect(()=>{v(s??{});},[s]);let C=react.useCallback(h=>H=>{let U={[h]:H};v(U),p?.(U);},[p]);return jsxRuntime.jsxs(ui.StyledTable,{isHeaderSticky:true,isVirtualized:true,radius:"lg",className:ui.clsx("h-full mx-auto",a??(r?"max-w-346 sm:max-w-414":"max-w-290 sm:max-w-358")),classNames:{loadingWrapper:"flex-col justify-start items-start",emptyWrapper:"pt-30"},maxTableHeight:i,rowHeight:d?m:c,"aria-label":"Tokens",children:[jsxRuntime.jsx(ui.TableHeader,{children:[jsxRuntime.jsx(ui.TableColumn,{textValue:l("tokens.listHeader.token"),width:d?224:324,children:l("tokens.listHeader.token")},"token"),jsxRuntime.jsx(ui.TableColumn,{textValue:l("tokens.listHeader.price"),width:d?128:150,children:jsxRuntime.jsxs("div",{className:"flex items-center gap-1",children:[jsxRuntime.jsx(ui.Sortable,{sort:T.price,onSortChange:C("price"),children:l("tokens.listHeader.price")}),jsxRuntime.jsx("span",{children:"/"}),jsxRuntime.jsx(ui.Sortable,{sort:T[`priceChange${t}`],onSortChange:C(`priceChange${t}`),children:l("tokens.listHeader.priceChange",{resolution:t})})]})},"price"),jsxRuntime.jsx(ui.TableColumn,{textValue:l("tokens.listHeader.marketCap"),width:d?106:144,children:jsxRuntime.jsx(ui.Sortable,{sort:T.marketCap,onSortChange:C("marketCap"),children:l("tokens.listHeader.marketCap")})},"marketCap"),jsxRuntime.jsx(ui.TableColumn,{textValue:l("tokens.listHeader.liquidity"),width:d?106:144,children:jsxRuntime.jsx(ui.Sortable,{sort:T.tvl,onSortChange:C("tvl"),children:l("tokens.listHeader.liquidity")})},"liquidity"),jsxRuntime.jsx(ui.TableColumn,{textValue:l("tokens.listHeader.volumes",{resolution:t}),width:d?138:156,children:jsxRuntime.jsx(ui.Sortable,{sort:T[`volumes${t}`],onSortChange:C(`volumes${t}`),children:l("tokens.listHeader.volumes",{resolution:t})})},"volumes"),jsxRuntime.jsx(ui.TableColumn,{textValue:l("tokens.listHeader.txs",{resolution:t}),width:d?126:144,children:jsxRuntime.jsx(ui.Sortable,{sort:T[`trades${t}`],onSortChange:C(`trades${t}`),children:l("tokens.listHeader.txs",{resolution:t})})},"txs"),jsxRuntime.jsx(ui.TableColumn,{textValue:l("tokens.listHeader.traders",{resolution:t}),width:d?126:144,children:jsxRuntime.jsx(ui.Sortable,{sort:T[`traders${t}`],onSortChange:C(`traders${t}`),children:l("tokens.listHeader.traders",{resolution:t})})},"traders"),jsxRuntime.jsx(ui.TableColumn,{textValue:l("tokens.listHeader.tokenInfo"),width:d?204:224,children:l("tokens.listHeader.tokenInfo")},"tokenInfo"),r?jsxRuntime.jsx(ui.TableColumn,{textValue:l("tokens.listHeader.actions"),minWidth:224,children:l("tokens.listHeader.actions")},"actions"):void 0].filter(Boolean)}),jsxRuntime.jsx(ui.TableBody,{items:o?[]:e,isLoading:o,loadingContent:jsxRuntime.jsx(wt,{rowHeight:d?m:c,hasActions:!!r}),emptyContent:jsxRuntime.jsxs("div",{children:[jsxRuntime.jsx(ui.EmptyIcon,{className:"w-10 h-10 mx-auto text-neutral"}),jsxRuntime.jsx("p",{className:"mt-2 text-sm text-neutral text-center",children:l("common.empty")})]}),children:h=>jsxRuntime.jsx(ui.TableRow,{onClick:n?k(h):void 0,children:[jsxRuntime.jsx(ui.TableCell,{children:jsxRuntime.jsx(lt,{token:h,resolution:t})},"token"),jsxRuntime.jsx(ui.TableCell,{children:jsxRuntime.jsx(ft,{token:h,resolution:t})},"price"),jsxRuntime.jsx(ui.TableCell,{children:jsxRuntime.jsx(ct,{token:h,resolution:t})},"marketCap"),jsxRuntime.jsx(ui.TableCell,{children:jsxRuntime.jsx(dt,{token:h,resolution:t})},"liquidity"),jsxRuntime.jsx(ui.TableCell,{children:jsxRuntime.jsx(xt,{token:h,resolution:t})},"volumes"),jsxRuntime.jsx(ui.TableCell,{children:jsxRuntime.jsx(gt,{token:h,resolution:t})},"trades"),jsxRuntime.jsx(ui.TableCell,{children:jsxRuntime.jsx(ht,{token:h,resolution:t})},"traders"),jsxRuntime.jsx(ui.TableCell,{children:jsxRuntime.jsx(mt,{token:h,resolution:t})},"info"),r?jsxRuntime.jsx(ui.TableCell,{children:jsxRuntime.jsx(r,{token:h,resolution:t})},"actions"):void 0].filter(Boolean)},h.address)})]})}function Nt({chain:e,resolution:t,options:o,refetchInterval:r=12e3}){let n=react.useMemo(()=>({chain:e,resolution:t,...o}),[e,t,o]),s=react.useRef(n),[p,i]=react.useState(true);react.useEffect(()=>{JSON.stringify(n)!==JSON.stringify(s.current)&&(i(true),s.current=n);},[n]);let[c,m]=react.useState([]),{data:a,isPending:d}=hooks.useNewTokensQuery(n,{refetchInterval:r});react.useEffect(()=>{a&&(m(a),i(false));},[a]);let l=react.useMemo(()=>!!(d||p),[d,p]);return {tokens:c,isLoading:l}}function ia({chain:e,resolution:t,filters:o,ActionsComponent:r,onSelectToken:n,height:s,itemHeight:p,itemHeightMobile:i,className:c}){let[m,a]=react.useState(),d=react.useMemo(()=>{let T=Object.keys(m??{})[0],v=m?.[T];return {...o,...T&&v?{sortBy:T,sortDirection:v}:void 0}},[o,m]),{tokens:l,isLoading:k}=Nt({chain:e,resolution:t,options:d});return jsxRuntime.jsx(E,{tokens:l,isLoading:k,resolution:t,height:s,itemHeight:p,itemHeightMobile:i,ActionsComponent:r,onSelectToken:n,sortDirections:m,onSortChange:a,className:c})}function It({chain:e,resolution:t,options:o,refetchInterval:r=12e3}){let n=react.useMemo(()=>({chain:e,resolution:t,...o}),[e,t,o]),s=react.useRef(n),[p,i]=react.useState(true);react.useEffect(()=>{JSON.stringify(n)!==JSON.stringify(s.current)&&(i(true),s.current=n);},[n]);let[c,m]=react.useState([]),{data:a,isPending:d}=hooks.useStockTokensQuery(n,{refetchInterval:r});react.useEffect(()=>{a&&(m(a),i(false));},[a]);let l=react.useMemo(()=>!!(d||p),[d,p]);return {tokens:c,isLoading:l}}function Ta({chain:e,resolution:t,filters:o,ActionsComponent:r,onSelectToken:n,height:s,itemHeight:p,itemHeightMobile:i,className:c}){let[m,a]=react.useState(),d=react.useMemo(()=>{let T=Object.keys(m??{})[0],v=m?.[T];return {...o,...T&&v?{sortBy:T,sortDirection:v}:void 0}},[o,m]),{tokens:l,isLoading:k}=It({chain:e,resolution:t,options:d});return jsxRuntime.jsx(E,{tokens:l,isLoading:k,resolution:t,height:s,itemHeight:p,itemHeightMobile:i,ActionsComponent:r,onSelectToken:n,sortDirections:m,onSortChange:a,className:c})}function Dt({chain:e,resolution:t,options:o,refetchInterval:r=12e3}){let n=react.useMemo(()=>({chain:e,resolution:t,...o}),[e,t,o]),s=react.useRef(n),[p,i]=react.useState(true);react.useEffect(()=>{JSON.stringify(n)!==JSON.stringify(s.current)&&(i(true),s.current=n);},[n]);let[c,m]=react.useState([]),{data:a,isPending:d}=hooks.useTrendingTokensQuery(n,{refetchInterval:r});react.useEffect(()=>{a&&(m(a),i(false));},[a]);let l=react.useMemo(()=>!!(d||p),[d,p]);return {tokens:c,isLoading:l}}function La({chain:e,resolution:t,filters:o,ActionsComponent:r,onSelectToken:n,height:s,itemHeight:p,itemHeightMobile:i,className:c}){let[m,a]=react.useState(),d=react.useMemo(()=>{let T=Object.keys(m??{})[0],v=m?.[T];return {...o,...T&&v?{sortBy:T,sortDirection:v}:void 0}},[o,m]),{tokens:l,isLoading:k}=Dt({chain:e,resolution:t,options:d});return jsxRuntime.jsx(E,{tokens:l,isLoading:k,resolution:t,height:s,itemHeight:p,itemHeightMobile:i,ActionsComponent:r,onSelectToken:n,sortDirections:m,onSortChange:a,className:c})}exports.NewTokenListWidget=ia;exports.StockTokenListWidget=Ta;exports.TokenAvatar=Ae;exports.TokenList=E;exports.TokenListFilter=Y;exports.TokenListFilterModal=gn;exports.TokenListFilterPopover=Ln;exports.TokenListResolutionSelector=Dn;exports.TrendingTokenListWidget=La;exports.useNewTokensScript=Nt;exports.useStockTokensScript=It;exports.useTrendingTokensScript=Dt;exports.version=Ot;//# sourceMappingURL=index.js.map
|
|
22
|
+
//# sourceMappingURL=index.js.map
|