@liberfi.io/ui-tokens 0.1.55 → 0.1.57
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/README.md +145 -0
- package/dist/index.d.mts +110 -6
- package/dist/index.d.ts +110 -6
- package/dist/index.js +2 -2
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +2 -2
- package/dist/index.mjs.map +1 -1
- package/package.json +17 -10
package/README.md
ADDED
|
@@ -0,0 +1,145 @@
|
|
|
1
|
+
# @liberfi.io/ui-tokens
|
|
2
|
+
|
|
3
|
+
Token-related UI components for the Liberfi React SDK. Provides token lists, search, avatars, and pulse (real-time new/migrated token) widgets consumed by downstream applications.
|
|
4
|
+
|
|
5
|
+
## Design Philosophy
|
|
6
|
+
|
|
7
|
+
- **Script / UI / Widget layering** — `.script.ts` files encapsulate data-fetching and business logic as hooks; `.ui.tsx` files are pure presentational components driven by props; `.widget.tsx` files compose scripts and UI together.
|
|
8
|
+
- **No built-in global state** — Data flows through props and lightweight React contexts scoped to individual features (e.g. `SearchProvider`). Persistent state uses `atomWithStorage` (jotai) so the storage backend can be swapped.
|
|
9
|
+
- **Callbacks over side effects** — Selection, navigation, and feedback (toast, analytics) are surfaced via `onSelectToken`, `onResult`, etc. rather than hard-coded inside the library.
|
|
10
|
+
- **Mobile-first search** — The search module targets constrained-width containers (modals, sidebars) and uses a compact mobile layout exclusively.
|
|
11
|
+
|
|
12
|
+
## Installation
|
|
13
|
+
|
|
14
|
+
```bash
|
|
15
|
+
pnpm add @liberfi.io/ui-tokens
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
### Peer dependencies
|
|
19
|
+
|
|
20
|
+
The consumer must provide:
|
|
21
|
+
|
|
22
|
+
- `react` >= 18
|
|
23
|
+
- `react-dom` >= 18
|
|
24
|
+
- `jotai` >= 2.15.1
|
|
25
|
+
|
|
26
|
+
## API Reference
|
|
27
|
+
|
|
28
|
+
### Components — Search
|
|
29
|
+
|
|
30
|
+
| Export | Kind | Description |
|
|
31
|
+
| ------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------- |
|
|
32
|
+
| `SearchTokensButton` | Widget | Button that opens the search modal (supports `/` keyboard shortcut). |
|
|
33
|
+
| `SearchModal` | Widget | `AsyncModal` wrapper; renders `SearchWidget` inside a `StyledModal`. |
|
|
34
|
+
| `SearchWidget` | Widget | Standalone search experience (input + history + result list). Accepts `chains?: Chain[]` and `onSelectToken`. |
|
|
35
|
+
| `SearchInputUI` | UI | Search input with 500ms debounce, paste, and clear buttons. |
|
|
36
|
+
| `SearchContentUI` | UI | Conditional renderer — shows history + hint when idle, search results when a keyword is set. |
|
|
37
|
+
| `SearchHistoryUI` | UI | Chips displaying persisted search history with a clear button. |
|
|
38
|
+
| `SearchResultListWidget` | Widget | Virtualized infinite-scroll result list (`react-window` + `react-window-infinite-loader`). |
|
|
39
|
+
| `SearchResultListHeader` | UI | Static column headers (Token/Age/MCap/Liq \| Price/24h%). |
|
|
40
|
+
| `SearchResultItemUI` | UI | Compact token row — avatar, symbol, age, market cap, TVL, price, and price change. |
|
|
41
|
+
| `SearchResultListSkeleton` | UI | Skeleton placeholder for initial loading state. |
|
|
42
|
+
| `SearchProvider` / `useSearchContext` | Context | Manages the current search keyword. |
|
|
43
|
+
| `useSearchHistory` | Hook | Read/write persisted search history (backed by `atomWithStorage`). |
|
|
44
|
+
| `useSearchResultListScript` | Hook | Connects `useSearchTokensInfiniteQuery` to the search context. |
|
|
45
|
+
|
|
46
|
+
#### SearchModal
|
|
47
|
+
|
|
48
|
+
Wraps `AsyncModal` with `id="search_tokens"`. Open it from anywhere via:
|
|
49
|
+
|
|
50
|
+
```tsx
|
|
51
|
+
import { useAsyncModal } from "@liberfi.io/ui-scaffold";
|
|
52
|
+
|
|
53
|
+
const { onOpen } = useAsyncModal<SearchModalParams, SearchModalResult>(
|
|
54
|
+
"search_tokens",
|
|
55
|
+
);
|
|
56
|
+
await onOpen({ params: { chains: [Chain.SOLANA] } });
|
|
57
|
+
// resolves with Token on selection, undefined on dismiss
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
#### SearchWidget (standalone)
|
|
61
|
+
|
|
62
|
+
```tsx
|
|
63
|
+
import { SearchWidget } from "@liberfi.io/ui-tokens";
|
|
64
|
+
|
|
65
|
+
<SearchWidget
|
|
66
|
+
chains={[Chain.SOLANA]}
|
|
67
|
+
onSelectToken={(token) => navigate(`/token/${token.chain}/${token.address}`)}
|
|
68
|
+
/>;
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
### Components — Token Avatar
|
|
72
|
+
|
|
73
|
+
| Export | Kind | Description |
|
|
74
|
+
| ------------- | ---- | ------------------------------------------------------------------------------------------- |
|
|
75
|
+
| `TokenAvatar` | UI | Token avatar with optional protocol family icon, bonding-curve progress, and image preview. |
|
|
76
|
+
|
|
77
|
+
### Components — Token List
|
|
78
|
+
|
|
79
|
+
| Export | Kind | Description |
|
|
80
|
+
| ------------------------- | ------ | -------------------------------------------- |
|
|
81
|
+
| `NewTokenListWidget` | Widget | New tokens list with real-time subscription. |
|
|
82
|
+
| `TrendingTokenListWidget` | Widget | Trending tokens list. |
|
|
83
|
+
| `StockTokenListWidget` | Widget | Stock tokens list. |
|
|
84
|
+
| `TokenListFilterModal` | UI | Filter modal for token list columns. |
|
|
85
|
+
|
|
86
|
+
### Components — Pulse
|
|
87
|
+
|
|
88
|
+
| Export | Kind | Description |
|
|
89
|
+
| ----------------------------- | ------ | -------------------------------- |
|
|
90
|
+
| `PulseNewListWidget` | Widget | Real-time new token pulse feed. |
|
|
91
|
+
| `PulseMigratedListWidget` | Widget | Migrated tokens pulse feed. |
|
|
92
|
+
| `PulseFinalStretchListWidget` | Widget | Final-stretch tokens pulse feed. |
|
|
93
|
+
|
|
94
|
+
### Hooks
|
|
95
|
+
|
|
96
|
+
| Export | Description |
|
|
97
|
+
| ------------------- | ------------------------------------------------------------------------------------------------- |
|
|
98
|
+
| `useTokens(params)` | Fetches and subscribes to a set of tokens by chain + addresses, with polling and WebSocket merge. |
|
|
99
|
+
|
|
100
|
+
## Usage Examples
|
|
101
|
+
|
|
102
|
+
### Full search modal setup
|
|
103
|
+
|
|
104
|
+
```tsx
|
|
105
|
+
import { SearchModal, SearchTokensButton } from "@liberfi.io/ui-tokens";
|
|
106
|
+
|
|
107
|
+
function App() {
|
|
108
|
+
return (
|
|
109
|
+
<>
|
|
110
|
+
{/* Trigger button */}
|
|
111
|
+
<SearchTokensButton />
|
|
112
|
+
|
|
113
|
+
{/* Modal definition — render once at app root */}
|
|
114
|
+
<SearchModal />
|
|
115
|
+
</>
|
|
116
|
+
);
|
|
117
|
+
}
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
### Standalone search widget inside a sidebar
|
|
121
|
+
|
|
122
|
+
```tsx
|
|
123
|
+
import { Chain } from "@liberfi.io/types";
|
|
124
|
+
import { SearchWidget } from "@liberfi.io/ui-tokens";
|
|
125
|
+
|
|
126
|
+
function Sidebar() {
|
|
127
|
+
return (
|
|
128
|
+
<div className="w-80 h-screen">
|
|
129
|
+
<SearchWidget
|
|
130
|
+
chains={[Chain.SOLANA, Chain.ETHEREUM]}
|
|
131
|
+
onSelectToken={(token) => {
|
|
132
|
+
console.log("Selected:", token.chain, token.address);
|
|
133
|
+
}}
|
|
134
|
+
/>
|
|
135
|
+
</div>
|
|
136
|
+
);
|
|
137
|
+
}
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
## Future Improvements
|
|
141
|
+
|
|
142
|
+
- Add tab system (Discover / Favorite / View) for the empty-state content when no keyword is entered.
|
|
143
|
+
- Support sort and filter controls in search result headers.
|
|
144
|
+
- Add chain selector to scope search to a specific chain.
|
|
145
|
+
- Support custom `atomWithStorage` storage adapter for search history (e.g. server-side persistence).
|
package/dist/index.d.mts
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import { ReactNode, ComponentType } from 'react';
|
|
3
|
+
import * as _liberfi_io_types from '@liberfi.io/types';
|
|
3
4
|
import { Token, Chain, TokenProtocol, API } from '@liberfi.io/types';
|
|
5
|
+
import * as _tanstack_react_query from '@tanstack/react-query';
|
|
4
6
|
import { PopoverProps } from '@liberfi.io/ui';
|
|
5
7
|
|
|
6
8
|
declare global {
|
|
@@ -10,7 +12,7 @@ declare global {
|
|
|
10
12
|
};
|
|
11
13
|
}
|
|
12
14
|
}
|
|
13
|
-
declare const _default: "0.1.
|
|
15
|
+
declare const _default: "0.1.57";
|
|
14
16
|
|
|
15
17
|
interface PulseListProps {
|
|
16
18
|
/** list title */
|
|
@@ -164,12 +166,114 @@ interface PulseListItemActionProps {
|
|
|
164
166
|
}
|
|
165
167
|
type PulseListItemActionComponent = ComponentType<PulseListItemActionProps>;
|
|
166
168
|
|
|
169
|
+
type SearchModalParams = {
|
|
170
|
+
chains?: Chain[];
|
|
171
|
+
};
|
|
172
|
+
type SearchModalResult = Token;
|
|
173
|
+
declare const SEARCH_MODAL_ID = "search";
|
|
174
|
+
declare function SearchModal({ id }: {
|
|
175
|
+
id?: string;
|
|
176
|
+
}): react_jsx_runtime.JSX.Element;
|
|
177
|
+
|
|
167
178
|
type SearchTokensButtonProps = {
|
|
168
|
-
/**
|
|
169
|
-
|
|
170
|
-
|
|
179
|
+
/** Chains to filter the search */
|
|
180
|
+
chains?: SearchModalParams["chains"];
|
|
181
|
+
/** Callback when a token is selected from the search modal */
|
|
182
|
+
onSelectToken?: (token: Token) => void;
|
|
183
|
+
};
|
|
184
|
+
declare function SearchTokensButton({ chains, onSelectToken, }: SearchTokensButtonProps): react_jsx_runtime.JSX.Element;
|
|
185
|
+
|
|
186
|
+
declare function useSearchHistory(): {
|
|
187
|
+
histories: string[];
|
|
188
|
+
addHistory: (keyword: string) => void;
|
|
189
|
+
clearHistories: () => void;
|
|
190
|
+
};
|
|
191
|
+
|
|
192
|
+
type SearchHistoryUIProps = {
|
|
193
|
+
histories: string[];
|
|
194
|
+
onSelect?: (keyword: string) => void;
|
|
195
|
+
onClear?: () => void;
|
|
196
|
+
className?: string;
|
|
197
|
+
};
|
|
198
|
+
declare function SearchHistoryUI({ histories, onSelect, onClear, className, }: SearchHistoryUIProps): react_jsx_runtime.JSX.Element | null;
|
|
199
|
+
|
|
200
|
+
type SearchHistoryWidgetProps = {
|
|
201
|
+
/** Callback when a history keyword is selected */
|
|
202
|
+
onSelect?: (keyword: string) => void;
|
|
203
|
+
className?: string;
|
|
204
|
+
};
|
|
205
|
+
declare function SearchHistoryWidget({ onSelect, className, }: SearchHistoryWidgetProps): react_jsx_runtime.JSX.Element;
|
|
206
|
+
|
|
207
|
+
type SearchInputUIProps = {
|
|
208
|
+
/** Controlled input value */
|
|
209
|
+
value: string;
|
|
210
|
+
/** Called on every keystroke */
|
|
211
|
+
onValueChange: (value: string) => void;
|
|
212
|
+
/** Called when clear button is pressed */
|
|
213
|
+
onClear?: () => void;
|
|
214
|
+
/** Called with clipboard text when paste button is pressed */
|
|
215
|
+
onPaste?: (text: string) => void;
|
|
216
|
+
className?: string;
|
|
217
|
+
};
|
|
218
|
+
declare function SearchInputUI({ value, onValueChange, onClear, onPaste, className, }: SearchInputUIProps): react_jsx_runtime.JSX.Element;
|
|
219
|
+
|
|
220
|
+
type SearchResultItemUIProps = {
|
|
221
|
+
token: Token;
|
|
222
|
+
className?: string;
|
|
223
|
+
};
|
|
224
|
+
declare function SearchResultItemUI({ token, className, }: SearchResultItemUIProps): react_jsx_runtime.JSX.Element;
|
|
225
|
+
|
|
226
|
+
interface SearchResultListSkeletonProps {
|
|
227
|
+
rows?: number;
|
|
228
|
+
className?: string;
|
|
229
|
+
}
|
|
230
|
+
declare function SearchResultListSkeleton({ rows, className, }: SearchResultListSkeletonProps): react_jsx_runtime.JSX.Element;
|
|
231
|
+
|
|
232
|
+
interface SearchResultListHeaderProps {
|
|
233
|
+
className?: string;
|
|
234
|
+
}
|
|
235
|
+
declare function SearchResultListHeader({ className, }: SearchResultListHeaderProps): react_jsx_runtime.JSX.Element;
|
|
236
|
+
|
|
237
|
+
interface UseSearchResultListScriptParams {
|
|
238
|
+
keyword: string;
|
|
239
|
+
chains?: Chain[];
|
|
240
|
+
limit?: number;
|
|
241
|
+
}
|
|
242
|
+
declare function useSearchResultListScript({ keyword, chains, limit, }: UseSearchResultListScriptParams): {
|
|
243
|
+
tokens: Token[];
|
|
244
|
+
isLoading: boolean;
|
|
245
|
+
isFetchingNextPage: boolean;
|
|
246
|
+
hasNextPage: boolean;
|
|
247
|
+
fetchNextPage: (options?: _tanstack_react_query.FetchNextPageOptions) => Promise<_tanstack_react_query.InfiniteQueryObserverResult<_tanstack_react_query.InfiniteData<_liberfi_io_types.SearchTokenCursorList, unknown>, Error>>;
|
|
248
|
+
};
|
|
249
|
+
|
|
250
|
+
type SearchResultListWidgetProps = {
|
|
251
|
+
onSelectToken?: (token: Token) => void;
|
|
252
|
+
className?: string;
|
|
253
|
+
} & UseSearchResultListScriptParams;
|
|
254
|
+
declare function SearchResultListWidget({ onSelectToken, className, ...scriptParams }: SearchResultListWidgetProps): react_jsx_runtime.JSX.Element;
|
|
255
|
+
|
|
256
|
+
interface UseSearchScriptParams {
|
|
257
|
+
/** Callback when the debounced keyword changes */
|
|
258
|
+
onKeywordChange?: (keyword: string) => void;
|
|
259
|
+
}
|
|
260
|
+
declare function useSearchScript({ onKeywordChange }: UseSearchScriptParams): {
|
|
261
|
+
text: string;
|
|
262
|
+
keyword: string;
|
|
263
|
+
setText: (v: string) => void;
|
|
264
|
+
setKeyword: (value: string) => void;
|
|
265
|
+
clearKeyword: () => void;
|
|
266
|
+
};
|
|
267
|
+
|
|
268
|
+
type SearchWidgetProps = {
|
|
269
|
+
/** Chains to search within */
|
|
270
|
+
chains?: Chain[];
|
|
271
|
+
/** Callback when the debounced keyword changes */
|
|
272
|
+
onKeywordChange?: (keyword: string) => void;
|
|
273
|
+
/** Callback when a token is selected */
|
|
274
|
+
onSelectToken?: (token: Token) => void;
|
|
171
275
|
};
|
|
172
|
-
declare function
|
|
276
|
+
declare function SearchWidget({ chains, onKeywordChange, onSelectToken, }: SearchWidgetProps): react_jsx_runtime.JSX.Element;
|
|
173
277
|
|
|
174
278
|
type TokenAvatarProps = {
|
|
175
279
|
/** token data to display */
|
|
@@ -440,4 +544,4 @@ declare function useTokens({ chain, addresses, pollMs, }: UseTokensParams): {
|
|
|
440
544
|
refetch: () => Promise<void>;
|
|
441
545
|
};
|
|
442
546
|
|
|
443
|
-
export { NewTokenListWidget, type NewTokenListWidgetProps, PulseFinalStretchListWidget, type PulseFinalStretchListWidgetProps, PulseList, PulseListHeader, type PulseListHeaderProps, PulseListItem, type PulseListItemActionComponent, type PulseListItemActionProps, type PulseListItemProps, PulseListItemSkeleton, type PulseListItemSkeletonProps, type PulseListProps, type PulseListType, PulseMigratedListWidget, type PulseMigratedListWidgetProps, PulseNewListWidget, type PulseNewListWidgetProps, SearchTokensButton, type SearchTokensButtonProps, 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 UsePulseFinalStretchListScriptParams, type UsePulseFinalStretchListScriptResult, type UsePulseMigratedListScriptParams, type UsePulseMigratedListScriptResult, type UsePulseNewListScriptParams, type UsePulseNewListScriptResult, type UseStockTokensScriptParams, type UseStockTokensScriptResult, type UseTokensParams, type UseTrendingTokensScriptParams, type UseTrendingTokensScriptResult, useNewTokensScript, usePulseFinalStretchListScript, usePulseMigratedListScript, usePulseNewListScript, useStockTokensScript, useTokens, useTrendingTokensScript, _default as version };
|
|
547
|
+
export { NewTokenListWidget, type NewTokenListWidgetProps, PulseFinalStretchListWidget, type PulseFinalStretchListWidgetProps, PulseList, PulseListHeader, type PulseListHeaderProps, PulseListItem, type PulseListItemActionComponent, type PulseListItemActionProps, type PulseListItemProps, PulseListItemSkeleton, type PulseListItemSkeletonProps, type PulseListProps, type PulseListType, PulseMigratedListWidget, type PulseMigratedListWidgetProps, PulseNewListWidget, type PulseNewListWidgetProps, SEARCH_MODAL_ID, SearchHistoryUI, type SearchHistoryUIProps, SearchHistoryWidget, type SearchHistoryWidgetProps, SearchInputUI, type SearchInputUIProps, SearchModal, type SearchModalParams, type SearchModalResult, SearchResultItemUI, type SearchResultItemUIProps, SearchResultListHeader, type SearchResultListHeaderProps, SearchResultListSkeleton, type SearchResultListSkeletonProps, SearchResultListWidget, type SearchResultListWidgetProps, SearchTokensButton, type SearchTokensButtonProps, SearchWidget, type SearchWidgetProps, 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 UsePulseFinalStretchListScriptParams, type UsePulseFinalStretchListScriptResult, type UsePulseMigratedListScriptParams, type UsePulseMigratedListScriptResult, type UsePulseNewListScriptParams, type UsePulseNewListScriptResult, type UseSearchResultListScriptParams, type UseSearchScriptParams, type UseStockTokensScriptParams, type UseStockTokensScriptResult, type UseTokensParams, type UseTrendingTokensScriptParams, type UseTrendingTokensScriptResult, useNewTokensScript, usePulseFinalStretchListScript, usePulseMigratedListScript, usePulseNewListScript, useSearchHistory, useSearchResultListScript, useSearchScript, useStockTokensScript, useTokens, useTrendingTokensScript, _default as version };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import { ReactNode, ComponentType } from 'react';
|
|
3
|
+
import * as _liberfi_io_types from '@liberfi.io/types';
|
|
3
4
|
import { Token, Chain, TokenProtocol, API } from '@liberfi.io/types';
|
|
5
|
+
import * as _tanstack_react_query from '@tanstack/react-query';
|
|
4
6
|
import { PopoverProps } from '@liberfi.io/ui';
|
|
5
7
|
|
|
6
8
|
declare global {
|
|
@@ -10,7 +12,7 @@ declare global {
|
|
|
10
12
|
};
|
|
11
13
|
}
|
|
12
14
|
}
|
|
13
|
-
declare const _default: "0.1.
|
|
15
|
+
declare const _default: "0.1.57";
|
|
14
16
|
|
|
15
17
|
interface PulseListProps {
|
|
16
18
|
/** list title */
|
|
@@ -164,12 +166,114 @@ interface PulseListItemActionProps {
|
|
|
164
166
|
}
|
|
165
167
|
type PulseListItemActionComponent = ComponentType<PulseListItemActionProps>;
|
|
166
168
|
|
|
169
|
+
type SearchModalParams = {
|
|
170
|
+
chains?: Chain[];
|
|
171
|
+
};
|
|
172
|
+
type SearchModalResult = Token;
|
|
173
|
+
declare const SEARCH_MODAL_ID = "search";
|
|
174
|
+
declare function SearchModal({ id }: {
|
|
175
|
+
id?: string;
|
|
176
|
+
}): react_jsx_runtime.JSX.Element;
|
|
177
|
+
|
|
167
178
|
type SearchTokensButtonProps = {
|
|
168
|
-
/**
|
|
169
|
-
|
|
170
|
-
|
|
179
|
+
/** Chains to filter the search */
|
|
180
|
+
chains?: SearchModalParams["chains"];
|
|
181
|
+
/** Callback when a token is selected from the search modal */
|
|
182
|
+
onSelectToken?: (token: Token) => void;
|
|
183
|
+
};
|
|
184
|
+
declare function SearchTokensButton({ chains, onSelectToken, }: SearchTokensButtonProps): react_jsx_runtime.JSX.Element;
|
|
185
|
+
|
|
186
|
+
declare function useSearchHistory(): {
|
|
187
|
+
histories: string[];
|
|
188
|
+
addHistory: (keyword: string) => void;
|
|
189
|
+
clearHistories: () => void;
|
|
190
|
+
};
|
|
191
|
+
|
|
192
|
+
type SearchHistoryUIProps = {
|
|
193
|
+
histories: string[];
|
|
194
|
+
onSelect?: (keyword: string) => void;
|
|
195
|
+
onClear?: () => void;
|
|
196
|
+
className?: string;
|
|
197
|
+
};
|
|
198
|
+
declare function SearchHistoryUI({ histories, onSelect, onClear, className, }: SearchHistoryUIProps): react_jsx_runtime.JSX.Element | null;
|
|
199
|
+
|
|
200
|
+
type SearchHistoryWidgetProps = {
|
|
201
|
+
/** Callback when a history keyword is selected */
|
|
202
|
+
onSelect?: (keyword: string) => void;
|
|
203
|
+
className?: string;
|
|
204
|
+
};
|
|
205
|
+
declare function SearchHistoryWidget({ onSelect, className, }: SearchHistoryWidgetProps): react_jsx_runtime.JSX.Element;
|
|
206
|
+
|
|
207
|
+
type SearchInputUIProps = {
|
|
208
|
+
/** Controlled input value */
|
|
209
|
+
value: string;
|
|
210
|
+
/** Called on every keystroke */
|
|
211
|
+
onValueChange: (value: string) => void;
|
|
212
|
+
/** Called when clear button is pressed */
|
|
213
|
+
onClear?: () => void;
|
|
214
|
+
/** Called with clipboard text when paste button is pressed */
|
|
215
|
+
onPaste?: (text: string) => void;
|
|
216
|
+
className?: string;
|
|
217
|
+
};
|
|
218
|
+
declare function SearchInputUI({ value, onValueChange, onClear, onPaste, className, }: SearchInputUIProps): react_jsx_runtime.JSX.Element;
|
|
219
|
+
|
|
220
|
+
type SearchResultItemUIProps = {
|
|
221
|
+
token: Token;
|
|
222
|
+
className?: string;
|
|
223
|
+
};
|
|
224
|
+
declare function SearchResultItemUI({ token, className, }: SearchResultItemUIProps): react_jsx_runtime.JSX.Element;
|
|
225
|
+
|
|
226
|
+
interface SearchResultListSkeletonProps {
|
|
227
|
+
rows?: number;
|
|
228
|
+
className?: string;
|
|
229
|
+
}
|
|
230
|
+
declare function SearchResultListSkeleton({ rows, className, }: SearchResultListSkeletonProps): react_jsx_runtime.JSX.Element;
|
|
231
|
+
|
|
232
|
+
interface SearchResultListHeaderProps {
|
|
233
|
+
className?: string;
|
|
234
|
+
}
|
|
235
|
+
declare function SearchResultListHeader({ className, }: SearchResultListHeaderProps): react_jsx_runtime.JSX.Element;
|
|
236
|
+
|
|
237
|
+
interface UseSearchResultListScriptParams {
|
|
238
|
+
keyword: string;
|
|
239
|
+
chains?: Chain[];
|
|
240
|
+
limit?: number;
|
|
241
|
+
}
|
|
242
|
+
declare function useSearchResultListScript({ keyword, chains, limit, }: UseSearchResultListScriptParams): {
|
|
243
|
+
tokens: Token[];
|
|
244
|
+
isLoading: boolean;
|
|
245
|
+
isFetchingNextPage: boolean;
|
|
246
|
+
hasNextPage: boolean;
|
|
247
|
+
fetchNextPage: (options?: _tanstack_react_query.FetchNextPageOptions) => Promise<_tanstack_react_query.InfiniteQueryObserverResult<_tanstack_react_query.InfiniteData<_liberfi_io_types.SearchTokenCursorList, unknown>, Error>>;
|
|
248
|
+
};
|
|
249
|
+
|
|
250
|
+
type SearchResultListWidgetProps = {
|
|
251
|
+
onSelectToken?: (token: Token) => void;
|
|
252
|
+
className?: string;
|
|
253
|
+
} & UseSearchResultListScriptParams;
|
|
254
|
+
declare function SearchResultListWidget({ onSelectToken, className, ...scriptParams }: SearchResultListWidgetProps): react_jsx_runtime.JSX.Element;
|
|
255
|
+
|
|
256
|
+
interface UseSearchScriptParams {
|
|
257
|
+
/** Callback when the debounced keyword changes */
|
|
258
|
+
onKeywordChange?: (keyword: string) => void;
|
|
259
|
+
}
|
|
260
|
+
declare function useSearchScript({ onKeywordChange }: UseSearchScriptParams): {
|
|
261
|
+
text: string;
|
|
262
|
+
keyword: string;
|
|
263
|
+
setText: (v: string) => void;
|
|
264
|
+
setKeyword: (value: string) => void;
|
|
265
|
+
clearKeyword: () => void;
|
|
266
|
+
};
|
|
267
|
+
|
|
268
|
+
type SearchWidgetProps = {
|
|
269
|
+
/** Chains to search within */
|
|
270
|
+
chains?: Chain[];
|
|
271
|
+
/** Callback when the debounced keyword changes */
|
|
272
|
+
onKeywordChange?: (keyword: string) => void;
|
|
273
|
+
/** Callback when a token is selected */
|
|
274
|
+
onSelectToken?: (token: Token) => void;
|
|
171
275
|
};
|
|
172
|
-
declare function
|
|
276
|
+
declare function SearchWidget({ chains, onKeywordChange, onSelectToken, }: SearchWidgetProps): react_jsx_runtime.JSX.Element;
|
|
173
277
|
|
|
174
278
|
type TokenAvatarProps = {
|
|
175
279
|
/** token data to display */
|
|
@@ -440,4 +544,4 @@ declare function useTokens({ chain, addresses, pollMs, }: UseTokensParams): {
|
|
|
440
544
|
refetch: () => Promise<void>;
|
|
441
545
|
};
|
|
442
546
|
|
|
443
|
-
export { NewTokenListWidget, type NewTokenListWidgetProps, PulseFinalStretchListWidget, type PulseFinalStretchListWidgetProps, PulseList, PulseListHeader, type PulseListHeaderProps, PulseListItem, type PulseListItemActionComponent, type PulseListItemActionProps, type PulseListItemProps, PulseListItemSkeleton, type PulseListItemSkeletonProps, type PulseListProps, type PulseListType, PulseMigratedListWidget, type PulseMigratedListWidgetProps, PulseNewListWidget, type PulseNewListWidgetProps, SearchTokensButton, type SearchTokensButtonProps, 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 UsePulseFinalStretchListScriptParams, type UsePulseFinalStretchListScriptResult, type UsePulseMigratedListScriptParams, type UsePulseMigratedListScriptResult, type UsePulseNewListScriptParams, type UsePulseNewListScriptResult, type UseStockTokensScriptParams, type UseStockTokensScriptResult, type UseTokensParams, type UseTrendingTokensScriptParams, type UseTrendingTokensScriptResult, useNewTokensScript, usePulseFinalStretchListScript, usePulseMigratedListScript, usePulseNewListScript, useStockTokensScript, useTokens, useTrendingTokensScript, _default as version };
|
|
547
|
+
export { NewTokenListWidget, type NewTokenListWidgetProps, PulseFinalStretchListWidget, type PulseFinalStretchListWidgetProps, PulseList, PulseListHeader, type PulseListHeaderProps, PulseListItem, type PulseListItemActionComponent, type PulseListItemActionProps, type PulseListItemProps, PulseListItemSkeleton, type PulseListItemSkeletonProps, type PulseListProps, type PulseListType, PulseMigratedListWidget, type PulseMigratedListWidgetProps, PulseNewListWidget, type PulseNewListWidgetProps, SEARCH_MODAL_ID, SearchHistoryUI, type SearchHistoryUIProps, SearchHistoryWidget, type SearchHistoryWidgetProps, SearchInputUI, type SearchInputUIProps, SearchModal, type SearchModalParams, type SearchModalResult, SearchResultItemUI, type SearchResultItemUIProps, SearchResultListHeader, type SearchResultListHeaderProps, SearchResultListSkeleton, type SearchResultListSkeletonProps, SearchResultListWidget, type SearchResultListWidgetProps, SearchTokensButton, type SearchTokensButtonProps, SearchWidget, type SearchWidgetProps, 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 UsePulseFinalStretchListScriptParams, type UsePulseFinalStretchListScriptResult, type UsePulseMigratedListScriptParams, type UsePulseMigratedListScriptResult, type UsePulseNewListScriptParams, type UsePulseNewListScriptResult, type UseSearchResultListScriptParams, type UseSearchScriptParams, type UseStockTokensScriptParams, type UseStockTokensScriptResult, type UseTokensParams, type UseTrendingTokensScriptParams, type UseTrendingTokensScriptResult, useNewTokensScript, usePulseFinalStretchListScript, usePulseMigratedListScript, usePulseNewListScript, useSearchHistory, useSearchResultListScript, useSearchScript, useStockTokensScript, useTokens, useTrendingTokensScript, _default as version };
|