@tuwaio/nova-connect 1.0.0-fix-test-alpha.51.1ef6db6
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/LICENSE +201 -0
- package/README.md +142 -0
- package/dist/evm/index.cjs +2 -0
- package/dist/evm/index.cjs.map +1 -0
- package/dist/evm/index.d.cts +31 -0
- package/dist/evm/index.d.ts +31 -0
- package/dist/evm/index.js +2 -0
- package/dist/evm/index.js.map +1 -0
- package/dist/hooks/index.cjs +2 -0
- package/dist/hooks/index.cjs.map +1 -0
- package/dist/hooks/index.js +2 -0
- package/dist/hooks/index.js.map +1 -0
- package/dist/index.cjs +12 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.css +2126 -0
- package/dist/index.d.cts +1607 -0
- package/dist/index.d.ts +1607 -0
- package/dist/index.js +12 -0
- package/dist/index.js.map +1 -0
- package/dist/providers/index.cjs +6 -0
- package/dist/providers/index.cjs.map +1 -0
- package/dist/providers/index.d.cts +190 -0
- package/dist/providers/index.d.ts +190 -0
- package/dist/providers/index.js +6 -0
- package/dist/providers/index.js.map +1 -0
- package/dist/solana/index.cjs +2 -0
- package/dist/solana/index.cjs.map +1 -0
- package/dist/solana/index.js +2 -0
- package/dist/solana/index.js.map +1 -0
- package/package.json +162 -0
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,1607 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import react__default, { FC, ReactNode, ComponentPropsWithoutRef } from 'react';
|
|
3
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
4
|
+
import { TransactionPool, Transaction, TxAdapter } from '@tuwaio/pulsar-core';
|
|
5
|
+
import { ISatelliteConnectStore } from '@tuwaio/satellite-core';
|
|
6
|
+
import { StoreApi } from 'zustand/index';
|
|
7
|
+
import { OrbitAdapter, WalletType } from '@tuwaio/orbit-core';
|
|
8
|
+
import { Connector as Connector$1 } from '@tuwaio/satellite-react';
|
|
9
|
+
import * as Select from '@radix-ui/react-select';
|
|
10
|
+
|
|
11
|
+
interface ChainData {
|
|
12
|
+
formattedChainId: string | number;
|
|
13
|
+
chain: string | number;
|
|
14
|
+
}
|
|
15
|
+
interface ChainListRendererProps {
|
|
16
|
+
chainsList: (string | number)[];
|
|
17
|
+
selectValue: string;
|
|
18
|
+
handleValueChange: (newChainId: string) => void;
|
|
19
|
+
getChainData: (chain: string | number) => ChainData;
|
|
20
|
+
onClose: () => void;
|
|
21
|
+
isMobile?: boolean;
|
|
22
|
+
}
|
|
23
|
+
declare const ChainListRenderer: react__default.FC<ChainListRendererProps>;
|
|
24
|
+
|
|
25
|
+
/**
|
|
26
|
+
* @description
|
|
27
|
+
* This interface provides default fallback types for chain configurations.
|
|
28
|
+
* Chain-specific packages will use module augmentation to override these
|
|
29
|
+
* with more specific types while maintaining backward compatibility.
|
|
30
|
+
*
|
|
31
|
+
* Default values are `any` to ensure the system works without specific
|
|
32
|
+
* chain packages, but gets enhanced type safety when they are installed.
|
|
33
|
+
*/
|
|
34
|
+
interface AllChainConfigs {
|
|
35
|
+
/**
|
|
36
|
+
* App chains configuration - defaults to any, gets enhanced by chain-specific packages
|
|
37
|
+
* @default any - Will be typed as `readonly [Chain, ...Chain[]]` when viem is available
|
|
38
|
+
*/
|
|
39
|
+
appChains?: any;
|
|
40
|
+
/**
|
|
41
|
+
* Solana RPC URLs configuration - defaults to any, gets enhanced by Solana packages
|
|
42
|
+
* @default any - Will be typed as `Partial<Record<SolanaClusterMoniker, string>>` when gill is available
|
|
43
|
+
*/
|
|
44
|
+
solanaRPCUrls?: any;
|
|
45
|
+
}
|
|
46
|
+
/**
|
|
47
|
+
* Union type for all supported chain configurations.
|
|
48
|
+
* Gets automatically extended when packages augment AllChainConfigs.
|
|
49
|
+
*
|
|
50
|
+
* @example
|
|
51
|
+
* ```typescript
|
|
52
|
+
* // Without specific packages - uses any types
|
|
53
|
+
* const config: InitialChains = {
|
|
54
|
+
* appChains: [], // any
|
|
55
|
+
* solanaRPCUrls: {} // any
|
|
56
|
+
* }
|
|
57
|
+
*
|
|
58
|
+
* // With viem package installed - gets proper Chain[] typing
|
|
59
|
+
* // With gill package installed - gets proper SolanaClusterMoniker typing
|
|
60
|
+
* ```
|
|
61
|
+
*/
|
|
62
|
+
type InitialChains = AllChainConfigs;
|
|
63
|
+
/**
|
|
64
|
+
* Array of chain identifiers (replaces IdentifierArray from @wallet-standard/base)
|
|
65
|
+
* Can contain strings, numbers, or other primitive types
|
|
66
|
+
*
|
|
67
|
+
* @example
|
|
68
|
+
* ```typescript
|
|
69
|
+
* const chainIds: ChainIdentifierArray = ['ethereum', 1, 'solana:mainnet-beta'];
|
|
70
|
+
* ```
|
|
71
|
+
*/
|
|
72
|
+
type ChainIdentifierArray = readonly (string | number)[];
|
|
73
|
+
/**
|
|
74
|
+
* @description
|
|
75
|
+
* This interface is intentionally left empty.
|
|
76
|
+
* Other packages (@tuwaio/satellite-*) will use module
|
|
77
|
+
* augmentation to add their specific wallet types here.
|
|
78
|
+
*/
|
|
79
|
+
interface AllWallets {
|
|
80
|
+
}
|
|
81
|
+
/**
|
|
82
|
+
* @description
|
|
83
|
+
* This interface is intentionally left empty.
|
|
84
|
+
* It will be augmented by satellite packages.
|
|
85
|
+
*/
|
|
86
|
+
interface AllConnectors {
|
|
87
|
+
}
|
|
88
|
+
/**
|
|
89
|
+
* Union type for all supported wallet types.
|
|
90
|
+
* It's created from the values of the AllWallets interface.
|
|
91
|
+
* e.g., { evm: EVMWallet, solana: SolanaWallet } -> EVMWallet | SolanaWallet
|
|
92
|
+
*/
|
|
93
|
+
type Wallet = AllWallets[keyof AllWallets];
|
|
94
|
+
/**
|
|
95
|
+
* Union type for all supported connector types.
|
|
96
|
+
*/
|
|
97
|
+
type Connector = AllConnectors[keyof AllConnectors];
|
|
98
|
+
|
|
99
|
+
/**
|
|
100
|
+
* Type definitions for NovaConnect component translations
|
|
101
|
+
* Contains all text strings for multi-language support
|
|
102
|
+
*/
|
|
103
|
+
type NovaConnectLabels = {
|
|
104
|
+
connectWallet: string;
|
|
105
|
+
disconnect: string;
|
|
106
|
+
connecting: string;
|
|
107
|
+
connected: string;
|
|
108
|
+
tryAgain: string;
|
|
109
|
+
back: string;
|
|
110
|
+
connect: string;
|
|
111
|
+
close: string;
|
|
112
|
+
all: string;
|
|
113
|
+
connectionError: string;
|
|
114
|
+
connectedSuccessfully: string;
|
|
115
|
+
connectingTo: string;
|
|
116
|
+
walletConnectionError: string;
|
|
117
|
+
errorWhenChainSwitching: string;
|
|
118
|
+
cannotConnectWallet: string;
|
|
119
|
+
success: string;
|
|
120
|
+
error: string;
|
|
121
|
+
replaced: string;
|
|
122
|
+
recent: string;
|
|
123
|
+
transactionLoading: string;
|
|
124
|
+
transactionSuccess: string;
|
|
125
|
+
transactionError: string;
|
|
126
|
+
transactionReplaced: string;
|
|
127
|
+
aboutWallets: string;
|
|
128
|
+
getWallet: string;
|
|
129
|
+
connectImpersonatedWallet: string;
|
|
130
|
+
transactionsInApp: string;
|
|
131
|
+
switchNetwork: string;
|
|
132
|
+
switchNetworks: string;
|
|
133
|
+
connectingEllipsis: string;
|
|
134
|
+
installed: string;
|
|
135
|
+
popular: string;
|
|
136
|
+
impersonate: string;
|
|
137
|
+
readOnlyMode: string;
|
|
138
|
+
whatIsWallet: string;
|
|
139
|
+
walletDescription: string;
|
|
140
|
+
whatIsNetwork: string;
|
|
141
|
+
networkDescription: string;
|
|
142
|
+
learnMore: string;
|
|
143
|
+
listOfNetworks: string;
|
|
144
|
+
viewOnExplorer: string;
|
|
145
|
+
viewTransactions: string;
|
|
146
|
+
enterWalletAddress: string;
|
|
147
|
+
walletAddressPlaceholder: string;
|
|
148
|
+
noConnectorsFound: string;
|
|
149
|
+
noConnectorsDescription: string;
|
|
150
|
+
somethingWentWrong: string;
|
|
151
|
+
networkPickingError: string;
|
|
152
|
+
pulsarAdapterRequired: string;
|
|
153
|
+
pulsarAdapterDescription: string;
|
|
154
|
+
selectAvailableNetwork: string;
|
|
155
|
+
startExploringWeb3: string;
|
|
156
|
+
walletKeyToDigitalWorld: string;
|
|
157
|
+
iDontHaveWallet: string;
|
|
158
|
+
choseWallet: string;
|
|
159
|
+
keyToNewInternet: string;
|
|
160
|
+
keyToNewInternetDescription: string;
|
|
161
|
+
logInWithoutHassle: string;
|
|
162
|
+
logInWithoutHassleDescription: string;
|
|
163
|
+
copyRawError: string;
|
|
164
|
+
copied: string;
|
|
165
|
+
chainSelector: string;
|
|
166
|
+
closeModal: string;
|
|
167
|
+
selectChain: string;
|
|
168
|
+
chainOption: string;
|
|
169
|
+
openChainSelector: string;
|
|
170
|
+
currentChain: string;
|
|
171
|
+
scrollToTop: string;
|
|
172
|
+
scrollToBottom: string;
|
|
173
|
+
chainListContainer: string;
|
|
174
|
+
walletControls: string;
|
|
175
|
+
openWalletModal: string;
|
|
176
|
+
walletConnected: string;
|
|
177
|
+
walletNotConnected: string;
|
|
178
|
+
walletBalance: string;
|
|
179
|
+
walletAddress: string;
|
|
180
|
+
transactionStatus: string;
|
|
181
|
+
successIcon: string;
|
|
182
|
+
errorIcon: string;
|
|
183
|
+
replacedIcon: string;
|
|
184
|
+
statusIcon: string;
|
|
185
|
+
loading: string;
|
|
186
|
+
idle: string;
|
|
187
|
+
unknownWallet: string;
|
|
188
|
+
walletAvatar: string;
|
|
189
|
+
ensAvatar: string;
|
|
190
|
+
walletIcon: string;
|
|
191
|
+
impersonateAddressEmpty: string;
|
|
192
|
+
impersonateAddressNotCorrect: string;
|
|
193
|
+
impersonateAddressConnected: string;
|
|
194
|
+
};
|
|
195
|
+
|
|
196
|
+
type ConnectContentType = 'network' | 'connectors' | 'about' | 'getWallet' | 'connecting' | 'impersonate';
|
|
197
|
+
interface NovaConnectProviderProps {
|
|
198
|
+
store: StoreApi<ISatelliteConnectStore<Connector, Wallet>>;
|
|
199
|
+
children: React.ReactNode;
|
|
200
|
+
labels?: Partial<NovaConnectLabels>;
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
type ConnectButtonProps = InitialChains & Pick<NovaConnectProviderProps, 'store'> & {
|
|
204
|
+
/** CSS classes to apply to the button */
|
|
205
|
+
className?: string;
|
|
206
|
+
transactionPool?: TransactionPool<Transaction>;
|
|
207
|
+
pulsarAdapter?: TxAdapter<Transaction> | TxAdapter<Transaction>[];
|
|
208
|
+
withBalance?: boolean;
|
|
209
|
+
withChain?: boolean;
|
|
210
|
+
withImpersonated?: boolean;
|
|
211
|
+
};
|
|
212
|
+
|
|
213
|
+
declare function ConnectButton({ store, labels, ...props }: Pick<NovaConnectProviderProps, 'labels'> & ConnectButtonProps): react_jsx_runtime.JSX.Element;
|
|
214
|
+
|
|
215
|
+
declare function ChainSelector({ appChains, solanaRPCUrls, store }: InitialChains & Pick<ConnectButtonProps, 'store'>): react_jsx_runtime.JSX.Element | null;
|
|
216
|
+
|
|
217
|
+
interface ChainListProps {
|
|
218
|
+
chainsList: (string | number)[];
|
|
219
|
+
selectValue: string;
|
|
220
|
+
handleValueChange: (newChainId: string) => void;
|
|
221
|
+
getChainData: (chain: string | number) => {
|
|
222
|
+
formattedChainId: string | number;
|
|
223
|
+
chain: string | number;
|
|
224
|
+
};
|
|
225
|
+
onClose: () => void;
|
|
226
|
+
}
|
|
227
|
+
declare const ScrollableChainList: react__default.FC<ChainListProps>;
|
|
228
|
+
|
|
229
|
+
declare function ConnectedContent({ transactionPool, withBalance, store, }: Pick<ConnectButtonProps, 'transactionPool' | 'store' | 'withBalance'>): react_jsx_runtime.JSX.Element | null;
|
|
230
|
+
|
|
231
|
+
interface StatusIconProps {
|
|
232
|
+
txStatus: 'succeed' | 'failed' | 'replaced';
|
|
233
|
+
colorVar: string;
|
|
234
|
+
children: ReactNode;
|
|
235
|
+
'aria-label'?: string;
|
|
236
|
+
className?: string;
|
|
237
|
+
}
|
|
238
|
+
declare const StatusIcon: FC<StatusIconProps>;
|
|
239
|
+
|
|
240
|
+
declare function WaitForConnectionContent(): react_jsx_runtime.JSX.Element | null;
|
|
241
|
+
|
|
242
|
+
/**
|
|
243
|
+
* Props for the ConnectedModal component
|
|
244
|
+
*/
|
|
245
|
+
interface ConnectedModalProps extends Omit<ConnectButtonProps, 'className'> {
|
|
246
|
+
className?: string;
|
|
247
|
+
}
|
|
248
|
+
/**
|
|
249
|
+
* Modal component that displays wallet connection status and provides access to wallet controls
|
|
250
|
+
*
|
|
251
|
+
* This modal serves as the main interface for connected wallet management, offering:
|
|
252
|
+
* - Wallet connection status and information
|
|
253
|
+
* - Network switching capabilities
|
|
254
|
+
* - Transaction history viewing
|
|
255
|
+
* - Wallet disconnection controls
|
|
256
|
+
*
|
|
257
|
+
* The modal adapts its content based on the current view state and provides
|
|
258
|
+
* full WCAG compliance with proper ARIA labels and keyboard navigation support.
|
|
259
|
+
*
|
|
260
|
+
* @param props - Component props including chain configurations and adapters
|
|
261
|
+
* @returns JSX element representing the connected wallet modal
|
|
262
|
+
*
|
|
263
|
+
* @example
|
|
264
|
+
* ```tsx
|
|
265
|
+
* <ConnectedModal
|
|
266
|
+
* solanaRPCUrls={solanaConfig}
|
|
267
|
+
* transactionPool={txPool}
|
|
268
|
+
* pulsarAdapter={adapter}
|
|
269
|
+
* appChains={chainConfig}
|
|
270
|
+
* />
|
|
271
|
+
* ```
|
|
272
|
+
*
|
|
273
|
+
* @public
|
|
274
|
+
*/
|
|
275
|
+
declare function ConnectedModal({ solanaRPCUrls, transactionPool, pulsarAdapter, appChains, className, store, }: ConnectedModalProps): react_jsx_runtime.JSX.Element | null;
|
|
276
|
+
|
|
277
|
+
/**
|
|
278
|
+
* Props for the ConnectedModalFooter component
|
|
279
|
+
*/
|
|
280
|
+
interface ConnectedModalFooterProps extends Pick<ConnectButtonProps, 'store'> {
|
|
281
|
+
/** Callback to control modal visibility */
|
|
282
|
+
setIsOpen: (isOpen: boolean) => void;
|
|
283
|
+
}
|
|
284
|
+
/**
|
|
285
|
+
* Footer component for the ConnectedModal that provides wallet control actions
|
|
286
|
+
*
|
|
287
|
+
* This component displays the main action buttons for wallet management:
|
|
288
|
+
* - Disconnect button with animated icon
|
|
289
|
+
* - View on explorer link with external indicator
|
|
290
|
+
*
|
|
291
|
+
* The footer provides full WCAG compliance with proper ARIA labels,
|
|
292
|
+
* keyboard navigation support, and semantic HTML structure.
|
|
293
|
+
*
|
|
294
|
+
* @param props - Component props containing modal control functions
|
|
295
|
+
* @returns JSX element representing the modal footer with action buttons
|
|
296
|
+
*
|
|
297
|
+
* @example
|
|
298
|
+
* ```tsx
|
|
299
|
+
* <ConnectedModalFooter
|
|
300
|
+
* setIsOpen={(open) => setModalOpen(open)}
|
|
301
|
+
* />
|
|
302
|
+
* ```
|
|
303
|
+
*
|
|
304
|
+
* @public
|
|
305
|
+
*/
|
|
306
|
+
declare function ConnectedModalFooter({ setIsOpen, store }: ConnectedModalFooterProps): react_jsx_runtime.JSX.Element | null;
|
|
307
|
+
|
|
308
|
+
/**
|
|
309
|
+
* @interface NativeBalanceResult
|
|
310
|
+
* Represents the native token balance returned by the adapter.
|
|
311
|
+
* The value is already formatted for human readability.
|
|
312
|
+
* @property {string} value The native token balance formatted to standard decimals (e.g., "1.5").
|
|
313
|
+
* @property {string} symbol The symbol of the native token (e.g., "ETH").
|
|
314
|
+
*/
|
|
315
|
+
interface NativeBalanceResult {
|
|
316
|
+
value: string;
|
|
317
|
+
symbol: string;
|
|
318
|
+
}
|
|
319
|
+
|
|
320
|
+
/**
|
|
321
|
+
* Props for the ConnectedModalMainContent component
|
|
322
|
+
*/
|
|
323
|
+
interface ConnectedModalMainContentProps extends Pick<ConnectButtonProps, 'transactionPool' | 'store'> {
|
|
324
|
+
/** List of available chains for the current wallet */
|
|
325
|
+
chainsList: (string | number)[];
|
|
326
|
+
ensAvatar: string | null;
|
|
327
|
+
avatarIsLoading: boolean;
|
|
328
|
+
balanceLoading: boolean;
|
|
329
|
+
ensNameAbbreviated: string | undefined;
|
|
330
|
+
balance: NativeBalanceResult | null;
|
|
331
|
+
}
|
|
332
|
+
/**
|
|
333
|
+
* Main content component for the connected wallet modal
|
|
334
|
+
*
|
|
335
|
+
* This component displays the primary interface for connected wallet management:
|
|
336
|
+
* - Large wallet avatar with ENS support
|
|
337
|
+
* - Wallet and network switching controls via IconButton components
|
|
338
|
+
* - Loading indicators for avatar and balance states
|
|
339
|
+
* - Transaction history access when transactions are available
|
|
340
|
+
* - Animated pending transaction indicator
|
|
341
|
+
*
|
|
342
|
+
* The component provides full WCAG compliance with proper ARIA labels,
|
|
343
|
+
* semantic HTML structure, and keyboard navigation support.
|
|
344
|
+
*
|
|
345
|
+
* @param props - Component props containing transaction pool and chains list
|
|
346
|
+
* @returns JSX element representing the main modal content with wallet controls
|
|
347
|
+
*
|
|
348
|
+
* @example
|
|
349
|
+
* ```tsx
|
|
350
|
+
* <ConnectedModalMainContent
|
|
351
|
+
* transactionPool={transactionPool}
|
|
352
|
+
* chainsList={availableChains}
|
|
353
|
+
* />
|
|
354
|
+
* ```
|
|
355
|
+
*
|
|
356
|
+
* @public
|
|
357
|
+
*/
|
|
358
|
+
declare function ConnectedModalMainContent({ transactionPool, chainsList, ensAvatar, avatarIsLoading, balanceLoading, ensNameAbbreviated, balance, store, }: ConnectedModalMainContentProps): react_jsx_runtime.JSX.Element | null;
|
|
359
|
+
|
|
360
|
+
/**
|
|
361
|
+
* Component that displays wallet name/ENS and balance information with copy functionality
|
|
362
|
+
*
|
|
363
|
+
* This component provides a comprehensive display of wallet identification and balance:
|
|
364
|
+
* - ENS name or abbreviated wallet address
|
|
365
|
+
* - Animated copy button with visual feedback
|
|
366
|
+
* - Loading states for balance information
|
|
367
|
+
* - Proper accessibility support with ARIA labels
|
|
368
|
+
* - Smooth animations for state transitions
|
|
369
|
+
*
|
|
370
|
+
* The component automatically handles wallet address copying with visual feedback
|
|
371
|
+
* and provides screen reader friendly content throughout all interactions.
|
|
372
|
+
*
|
|
373
|
+
* @returns JSX element displaying wallet name and balance with copy functionality
|
|
374
|
+
*
|
|
375
|
+
* @example
|
|
376
|
+
* ```tsx
|
|
377
|
+
* <ConnectedModalNameAndBalance />
|
|
378
|
+
* ```
|
|
379
|
+
*
|
|
380
|
+
* @public
|
|
381
|
+
*/
|
|
382
|
+
declare function ConnectedModalNameAndBalance({ ensNameAbbreviated, balanceLoading, balance, }: Pick<ConnectedModalMainContentProps, 'balanceLoading' | 'ensNameAbbreviated' | 'balance'>): react_jsx_runtime.JSX.Element | null;
|
|
383
|
+
|
|
384
|
+
/**
|
|
385
|
+
* Props for the ConnectedModalTxHistory component
|
|
386
|
+
*/
|
|
387
|
+
interface ConnectedModalTxHistoryProps extends Pick<ConnectButtonProps, 'transactionPool' | 'pulsarAdapter'> {
|
|
388
|
+
/** Additional CSS classes for the container */
|
|
389
|
+
className?: string;
|
|
390
|
+
}
|
|
391
|
+
/**
|
|
392
|
+
* Component for displaying transaction history with conditional loading
|
|
393
|
+
*
|
|
394
|
+
* This component provides comprehensive transaction history functionality:
|
|
395
|
+
* - Conditional loading of the @tuwaio/nova-transactions package
|
|
396
|
+
* - Graceful fallback when the package is not available
|
|
397
|
+
* - Loading states with proper accessibility support
|
|
398
|
+
* - Error handling for missing configuration
|
|
399
|
+
* - Full WCAG compliance with ARIA labels
|
|
400
|
+
*
|
|
401
|
+
* The component automatically detects if the required dependencies are available
|
|
402
|
+
* and provides appropriate fallbacks for different scenarios.
|
|
403
|
+
*
|
|
404
|
+
* @param props - Component props including transaction pool and adapter configuration
|
|
405
|
+
* @returns JSX element displaying transaction history or appropriate fallback
|
|
406
|
+
*
|
|
407
|
+
* @example
|
|
408
|
+
* ```tsx
|
|
409
|
+
* <ConnectedModalTxHistory
|
|
410
|
+
* transactionPool={txPool}
|
|
411
|
+
* pulsarAdapter={adapter}
|
|
412
|
+
* className="custom-styling"
|
|
413
|
+
* />
|
|
414
|
+
* ```
|
|
415
|
+
*
|
|
416
|
+
* @public
|
|
417
|
+
*/
|
|
418
|
+
declare function ConnectedModalTxHistory({ transactionPool, pulsarAdapter, className }: ConnectedModalTxHistoryProps): react_jsx_runtime.JSX.Element;
|
|
419
|
+
|
|
420
|
+
/**
|
|
421
|
+
* Props for the IconButton component
|
|
422
|
+
*/
|
|
423
|
+
interface IconButtonProps {
|
|
424
|
+
/** Custom icon URL for the wallet */
|
|
425
|
+
walletIcon?: string;
|
|
426
|
+
/** Name of the wallet */
|
|
427
|
+
walletName?: string;
|
|
428
|
+
/** Chain ID for the network icon */
|
|
429
|
+
walletChainId?: string | number;
|
|
430
|
+
/** Number of available items/options (shows chevron if > 1) */
|
|
431
|
+
items?: number;
|
|
432
|
+
/** Click handler for the button */
|
|
433
|
+
onClick?: () => void;
|
|
434
|
+
/** Additional CSS classes for styling */
|
|
435
|
+
className?: string;
|
|
436
|
+
/** Whether the button is currently disabled */
|
|
437
|
+
disabled?: boolean;
|
|
438
|
+
/** Whether to show loading state */
|
|
439
|
+
loading?: boolean;
|
|
440
|
+
/** Custom aria-label for accessibility */
|
|
441
|
+
'aria-label'?: string;
|
|
442
|
+
/** Custom tooltip text */
|
|
443
|
+
title?: string;
|
|
444
|
+
}
|
|
445
|
+
/**
|
|
446
|
+
* Multi-purpose icon button component for wallets and chains
|
|
447
|
+
*
|
|
448
|
+
* This component provides a unified interface for displaying wallet and chain information:
|
|
449
|
+
* - Displays wallet icon with fallback to Web3Icon
|
|
450
|
+
* - Shows chain/network icon when chain ID is provided
|
|
451
|
+
* - Conditional chevron arrow for dropdown indicators
|
|
452
|
+
* - Full WCAG accessibility support with proper ARIA labels
|
|
453
|
+
* - Loading and disabled states
|
|
454
|
+
* - Hover and active animations
|
|
455
|
+
* - Responsive design with consistent sizing
|
|
456
|
+
*
|
|
457
|
+
* The button automatically becomes interactive when onClick is provided and items > 1.
|
|
458
|
+
* It supports both EVM chain IDs (numbers) and Solana network identifiers (strings).
|
|
459
|
+
*
|
|
460
|
+
* @param props - Component props for icon button configuration
|
|
461
|
+
* @returns Forwardable button element with icons and accessibility support
|
|
462
|
+
*
|
|
463
|
+
* @example
|
|
464
|
+
* ```tsx
|
|
465
|
+
* // Simple wallet button
|
|
466
|
+
* <IconButton
|
|
467
|
+
* walletName="MetaMask"
|
|
468
|
+
* walletIcon="https://example.com/metamask-icon.png"
|
|
469
|
+
* />
|
|
470
|
+
* ```
|
|
471
|
+
*
|
|
472
|
+
* @example
|
|
473
|
+
* ```tsx
|
|
474
|
+
* // Interactive chain selector
|
|
475
|
+
* <IconButton
|
|
476
|
+
* walletName="Phantom"
|
|
477
|
+
* walletChainId="mainnet-beta"
|
|
478
|
+
* items={3}
|
|
479
|
+
* onClick={handleChainSelect}
|
|
480
|
+
* aria-label="Select blockchain network"
|
|
481
|
+
* />
|
|
482
|
+
* ```
|
|
483
|
+
*
|
|
484
|
+
* @example
|
|
485
|
+
* ```tsx
|
|
486
|
+
* // Loading state with disabled interaction
|
|
487
|
+
* <IconButton
|
|
488
|
+
* walletName="WalletConnect"
|
|
489
|
+
* loading={true}
|
|
490
|
+
* disabled={true}
|
|
491
|
+
* title="Connecting to wallet..."
|
|
492
|
+
* />
|
|
493
|
+
* ```
|
|
494
|
+
*
|
|
495
|
+
* @public
|
|
496
|
+
*/
|
|
497
|
+
declare const IconButton: react.ForwardRefExoticComponent<IconButtonProps & react.RefAttributes<HTMLButtonElement>>;
|
|
498
|
+
|
|
499
|
+
/**
|
|
500
|
+
* Educational carousel component about wallet functionality
|
|
501
|
+
*
|
|
502
|
+
* This component provides an interactive slideshow explaining wallet benefits:
|
|
503
|
+
* - Animated slide transitions with Framer Motion
|
|
504
|
+
* - Keyboard navigation support for accessibility
|
|
505
|
+
* - Auto-play functionality with pause on user interaction
|
|
506
|
+
* - Internationalization support with translation keys
|
|
507
|
+
* - WCAG compliant with proper ARIA labels and semantics
|
|
508
|
+
* - Responsive design with embedded base64 images
|
|
509
|
+
* - Visual indicators for current slide position
|
|
510
|
+
*
|
|
511
|
+
* The component automatically cycles through slides and pauses when users interact
|
|
512
|
+
* with navigation controls. It supports both mouse and keyboard navigation.
|
|
513
|
+
*
|
|
514
|
+
* @returns JSX element displaying educational wallet slideshow
|
|
515
|
+
*
|
|
516
|
+
* @example
|
|
517
|
+
* ```tsx
|
|
518
|
+
* <AboutWallets />
|
|
519
|
+
* ```
|
|
520
|
+
*
|
|
521
|
+
* @example
|
|
522
|
+
* ```tsx
|
|
523
|
+
* // With custom styling
|
|
524
|
+
* <div className="custom-container">
|
|
525
|
+
* <AboutWallets />
|
|
526
|
+
* </div>
|
|
527
|
+
* ```
|
|
528
|
+
*
|
|
529
|
+
* @public
|
|
530
|
+
*/
|
|
531
|
+
declare function AboutWallets(): react_jsx_runtime.JSX.Element;
|
|
532
|
+
|
|
533
|
+
/**
|
|
534
|
+
* Props for the NetworkIcons component
|
|
535
|
+
*/
|
|
536
|
+
interface NetworkIconsProps {
|
|
537
|
+
/** Array of network adapters to display as icons */
|
|
538
|
+
adapters?: OrbitAdapter[];
|
|
539
|
+
/** Whether only one network is available */
|
|
540
|
+
isOnlyOneNetwork?: boolean;
|
|
541
|
+
}
|
|
542
|
+
/**
|
|
543
|
+
* Props for the ConnectCard component
|
|
544
|
+
*/
|
|
545
|
+
interface ConnectCardProps extends NetworkIconsProps {
|
|
546
|
+
/** Click handler for the connect card */
|
|
547
|
+
onClick: () => void;
|
|
548
|
+
/** Icon element to display for the wallet/connector */
|
|
549
|
+
icon: react__default.ReactNode;
|
|
550
|
+
/** Primary title/name of the wallet/connector */
|
|
551
|
+
title: string;
|
|
552
|
+
/** Optional subtitle/description text */
|
|
553
|
+
subtitle?: string;
|
|
554
|
+
/** Optional URL for additional information */
|
|
555
|
+
infoLink?: string;
|
|
556
|
+
/** Whether this connector was recently used */
|
|
557
|
+
isRecent?: boolean;
|
|
558
|
+
}
|
|
559
|
+
/**
|
|
560
|
+
* ConnectCard component - Interactive card for wallet connection options
|
|
561
|
+
*
|
|
562
|
+
* This component provides a clickable card interface for wallet connectors with:
|
|
563
|
+
* - Responsive design adapting to touch/mouse interfaces
|
|
564
|
+
* - Network icons overlay showing supported networks
|
|
565
|
+
* - Recent usage indicator badge
|
|
566
|
+
* - Information link with external documentation
|
|
567
|
+
* - Hover animations and visual feedback
|
|
568
|
+
* - Full accessibility support with ARIA labels
|
|
569
|
+
* - Keyboard navigation support
|
|
570
|
+
*
|
|
571
|
+
* Visual features:
|
|
572
|
+
* - Touch devices: Square card layout optimized for mobile interaction
|
|
573
|
+
* - Mouse devices: Horizontal card layout with hover animations
|
|
574
|
+
* - Dynamic network icons display up to 3 supported networks
|
|
575
|
+
* - Smooth hover transitions with scale and color changes
|
|
576
|
+
* - Recent badge with fade-out on hover
|
|
577
|
+
*
|
|
578
|
+
* Accessibility features:
|
|
579
|
+
* - Proper ARIA labels for screen readers
|
|
580
|
+
* - Role attributes for semantic structure
|
|
581
|
+
* - Keyboard navigation support
|
|
582
|
+
* - Focus management with visual indicators
|
|
583
|
+
* - Screen reader announcements for state changes
|
|
584
|
+
*
|
|
585
|
+
* @param onClick - Handler function called when card is clicked
|
|
586
|
+
* @param title - Primary display name for the wallet/connector
|
|
587
|
+
* @param icon - React element containing the wallet icon
|
|
588
|
+
* @param adapters - Array of supported network adapters
|
|
589
|
+
* @param infoLink - Optional URL for additional information
|
|
590
|
+
* @param subtitle - Optional secondary description text
|
|
591
|
+
* @param isRecent - Whether to show recent usage badge
|
|
592
|
+
* @param isOnlyOneNetwork - Whether only one network is available
|
|
593
|
+
* @returns JSX element representing the interactive connect card
|
|
594
|
+
*
|
|
595
|
+
* @example
|
|
596
|
+
* ```tsx
|
|
597
|
+
* <ConnectCard
|
|
598
|
+
* onClick={() => connect('metamask')}
|
|
599
|
+
* title="MetaMask"
|
|
600
|
+
* subtitle="Browser Extension"
|
|
601
|
+
* icon={<MetaMaskIcon />}
|
|
602
|
+
* adapters={[evm]}
|
|
603
|
+
* isRecent={true}
|
|
604
|
+
* infoLink="https://metamask.io/learn"
|
|
605
|
+
* />
|
|
606
|
+
* ```
|
|
607
|
+
*
|
|
608
|
+
* @example
|
|
609
|
+
* ```tsx
|
|
610
|
+
* // Touch device optimized card
|
|
611
|
+
* <ConnectCard
|
|
612
|
+
* onClick={() => connect('walletconnect')}
|
|
613
|
+
* title="WalletConnect"
|
|
614
|
+
* icon={<WalletConnectIcon />}
|
|
615
|
+
* adapters={[ethereum, polygon]}
|
|
616
|
+
* isOnlyOneNetwork={false}
|
|
617
|
+
* />
|
|
618
|
+
* ```
|
|
619
|
+
*
|
|
620
|
+
* @public
|
|
621
|
+
*/
|
|
622
|
+
declare function ConnectCard({ onClick, title, icon, adapters, infoLink, subtitle, isRecent, isOnlyOneNetwork, }: ConnectCardProps): react_jsx_runtime.JSX.Element;
|
|
623
|
+
|
|
624
|
+
/**
|
|
625
|
+
* Interface for grouped wallet connectors
|
|
626
|
+
*/
|
|
627
|
+
interface GroupedConnector$1 {
|
|
628
|
+
/** Name of the wallet connector */
|
|
629
|
+
name: string;
|
|
630
|
+
/** Optional icon for the wallet */
|
|
631
|
+
icon?: string;
|
|
632
|
+
/** Array of supported network adapters */
|
|
633
|
+
adapters: OrbitAdapter[];
|
|
634
|
+
/** Array of connectors with their associated adapters */
|
|
635
|
+
connectors: (Connector$1 & {
|
|
636
|
+
adapter: OrbitAdapter;
|
|
637
|
+
})[];
|
|
638
|
+
}
|
|
639
|
+
|
|
640
|
+
/**
|
|
641
|
+
* Connection status component props interface
|
|
642
|
+
* Defines the required data for displaying wallet connection progress
|
|
643
|
+
*/
|
|
644
|
+
interface ConnectingProps {
|
|
645
|
+
/** Currently active connector identifier */
|
|
646
|
+
activeConnector: string | undefined;
|
|
647
|
+
/** Selected orbit adapter for the connection */
|
|
648
|
+
selectedAdapter: OrbitAdapter | undefined;
|
|
649
|
+
/** Array of available wallet connectors */
|
|
650
|
+
connectors: GroupedConnector$1[];
|
|
651
|
+
/** Whether the wallet connection is successfully established */
|
|
652
|
+
isConnected: boolean;
|
|
653
|
+
/** Optional custom error message to display */
|
|
654
|
+
customErrorMessage?: string;
|
|
655
|
+
/** Whether to show detailed error information */
|
|
656
|
+
showDetailedError?: boolean;
|
|
657
|
+
}
|
|
658
|
+
/**
|
|
659
|
+
* Connection status display component for wallet connection flow
|
|
660
|
+
*
|
|
661
|
+
* This component provides comprehensive visual feedback during wallet connection:
|
|
662
|
+
* - Animated loading spinner for connection in progress
|
|
663
|
+
* - Success state with checkmark icon for completed connections
|
|
664
|
+
* - Error state with warning icon and detailed error messages
|
|
665
|
+
* - Fully internationalized text content with translation support
|
|
666
|
+
* - WCAG compliant accessibility with proper ARIA labels and live regions
|
|
667
|
+
* - Responsive design that adapts to different screen sizes
|
|
668
|
+
* - Visual status indicators with semantic colors and icons
|
|
669
|
+
* - Screen reader announcements for state changes
|
|
670
|
+
*
|
|
671
|
+
* The component automatically detects connection state and displays appropriate
|
|
672
|
+
* visual feedback with proper semantic markup for accessibility tools.
|
|
673
|
+
*
|
|
674
|
+
* @param activeConnector - Identifier of the currently connecting wallet
|
|
675
|
+
* @param selectedAdapter - Orbit adapter instance for the connection
|
|
676
|
+
* @param connectors - Array of available wallet connector options
|
|
677
|
+
* @param isConnected - Boolean flag indicating successful connection
|
|
678
|
+
* @param customErrorMessage - Optional custom error message override
|
|
679
|
+
* @param showDetailedError - Flag to show detailed error information
|
|
680
|
+
* @returns JSX element displaying connection status with visual feedback
|
|
681
|
+
*
|
|
682
|
+
* @example
|
|
683
|
+
* ```tsx
|
|
684
|
+
* <Connecting
|
|
685
|
+
* activeConnector="metamask"
|
|
686
|
+
* selectedAdapter={ethereumAdapter}
|
|
687
|
+
* connectors={availableConnectors}
|
|
688
|
+
* isConnected={false}
|
|
689
|
+
* />
|
|
690
|
+
* ```
|
|
691
|
+
*
|
|
692
|
+
* @example
|
|
693
|
+
* ```tsx
|
|
694
|
+
* // With custom error handling
|
|
695
|
+
* <Connecting
|
|
696
|
+
* activeConnector="walletconnect"
|
|
697
|
+
* selectedAdapter={polygonAdapter}
|
|
698
|
+
* connectors={connectors}
|
|
699
|
+
* isConnected={false}
|
|
700
|
+
* customErrorMessage="Custom connection error occurred"
|
|
701
|
+
* showDetailedError={true}
|
|
702
|
+
* />
|
|
703
|
+
* ```
|
|
704
|
+
*
|
|
705
|
+
* @example
|
|
706
|
+
* ```tsx
|
|
707
|
+
* // Successful connection state
|
|
708
|
+
* <Connecting
|
|
709
|
+
* activeConnector="phantom"
|
|
710
|
+
* selectedAdapter={solanaAdapter}
|
|
711
|
+
* connectors={solanaConnectors}
|
|
712
|
+
* isConnected={true}
|
|
713
|
+
* />
|
|
714
|
+
* ```
|
|
715
|
+
*
|
|
716
|
+
* @public
|
|
717
|
+
*/
|
|
718
|
+
declare function Connecting({ activeConnector, selectedAdapter, connectors, isConnected, customErrorMessage, showDetailedError, }: ConnectingProps): react_jsx_runtime.JSX.Element;
|
|
719
|
+
|
|
720
|
+
/**
|
|
721
|
+
* Props for the ConnectorsSelections component
|
|
722
|
+
*/
|
|
723
|
+
interface ConnectorsSelectionsProps extends Pick<ConnectButtonProps, 'withImpersonated' | 'store'>, InitialChains {
|
|
724
|
+
/** Currently selected network adapter */
|
|
725
|
+
selectedAdapter: OrbitAdapter | undefined;
|
|
726
|
+
/** Array of grouped wallet connectors */
|
|
727
|
+
connectors: GroupedConnector$1[];
|
|
728
|
+
/** Click handler for connector selection */
|
|
729
|
+
onClick: (connector: GroupedConnector$1) => void;
|
|
730
|
+
/** Function to set connection status */
|
|
731
|
+
setIsConnected: (value: boolean) => void;
|
|
732
|
+
/** Function to control modal open state */
|
|
733
|
+
setIsOpen: (value: boolean) => void;
|
|
734
|
+
/** Function to wait for connection prediction */
|
|
735
|
+
waitForPredict: () => boolean | undefined;
|
|
736
|
+
/** Function to set modal content type */
|
|
737
|
+
setContentType: (contentType: ConnectContentType) => void;
|
|
738
|
+
/** Whether only one network is available */
|
|
739
|
+
isOnlyOneNetwork?: boolean;
|
|
740
|
+
}
|
|
741
|
+
/**
|
|
742
|
+
* ConnectorsSelections component - Main wallet selection interface with categorized connectors
|
|
743
|
+
*
|
|
744
|
+
* This component provides the primary wallet selection interface with:
|
|
745
|
+
* - Categorized wallet sections (Installed, Popular, Impersonate)
|
|
746
|
+
* - Responsive layout adapting to touch/mouse interfaces
|
|
747
|
+
* - Safe App environment detection and filtering
|
|
748
|
+
* - Empty state handling for missing connectors
|
|
749
|
+
* - Educational content integration for touch devices
|
|
750
|
+
* - Full accessibility support with semantic structure
|
|
751
|
+
*
|
|
752
|
+
* Wallet categorization:
|
|
753
|
+
* - Installed: Detected browser extension wallets (excluding popular ones)
|
|
754
|
+
* - Popular: Coinbase Wallet and WalletConnect for broader compatibility
|
|
755
|
+
* - Impersonate: Development/testing wallet for address simulation
|
|
756
|
+
* - Safe App filtering: Conditional Safe Wallet display based on environment
|
|
757
|
+
*
|
|
758
|
+
* Layout features:
|
|
759
|
+
* - Touch devices: Horizontal scrolling with educational disclaimer
|
|
760
|
+
* - Mouse devices: Vertical scrolling with fixed height container
|
|
761
|
+
* - Responsive grid adapting to screen size and device capabilities
|
|
762
|
+
* - Custom scrollbar styling with NovaCustomScroll class
|
|
763
|
+
*
|
|
764
|
+
* Empty state handling:
|
|
765
|
+
* - Clear error messaging when no connectors found
|
|
766
|
+
* - Contextual help text explaining the issue
|
|
767
|
+
* - Visual indicators with warning icons
|
|
768
|
+
* - Proper error state accessibility
|
|
769
|
+
*
|
|
770
|
+
* Accessibility features:
|
|
771
|
+
* - Semantic HTML structure with proper headings
|
|
772
|
+
* - ARIA labels for screen readers
|
|
773
|
+
* - Role-based navigation support
|
|
774
|
+
* - Focus management for keyboard users
|
|
775
|
+
* - Error states with descriptive messaging
|
|
776
|
+
*
|
|
777
|
+
* @param selectedAdapter - Currently selected network adapter
|
|
778
|
+
* @param connectors - Array of available wallet connectors
|
|
779
|
+
* @param onClick - Handler for wallet connector selection
|
|
780
|
+
* @param setIsConnected - Function to update connection status
|
|
781
|
+
* @param setIsOpen - Function to control modal visibility
|
|
782
|
+
* @param waitForPredict - Function for connection state prediction
|
|
783
|
+
* @param setContentType - Function to change modal content
|
|
784
|
+
* @param withImpersonated - Whether to show impersonation option
|
|
785
|
+
* @param isOnlyOneNetwork - Whether only one network is available
|
|
786
|
+
* @param appChains - Configuration for supported blockchain networks
|
|
787
|
+
* @param solanaRPCUrls - Solana RPC endpoints configuration
|
|
788
|
+
* @returns JSX element representing the connector selection interface
|
|
789
|
+
*
|
|
790
|
+
* @example
|
|
791
|
+
* ```tsx
|
|
792
|
+
* <ConnectorsSelections
|
|
793
|
+
* selectedAdapter={OrbitAdapter.EVM}
|
|
794
|
+
* connectors={availableConnectors}
|
|
795
|
+
* onClick={(connector) => handleWalletSelection(connector)}
|
|
796
|
+
* setIsConnected={setConnectionStatus}
|
|
797
|
+
* setIsOpen={setModalOpen}
|
|
798
|
+
* waitForPredict={() => checkConnectionState()}
|
|
799
|
+
* setContentType={setModalContent}
|
|
800
|
+
* withImpersonated={true}
|
|
801
|
+
* isOnlyOneNetwork={false}
|
|
802
|
+
* appChains={chainConfiguration}
|
|
803
|
+
* solanaRPCUrls={solanaConfig}
|
|
804
|
+
* />
|
|
805
|
+
* ```
|
|
806
|
+
*
|
|
807
|
+
* @example
|
|
808
|
+
* ```tsx
|
|
809
|
+
* // Touch device optimized with educational content
|
|
810
|
+
* <ConnectorsSelections
|
|
811
|
+
* selectedAdapter={undefined}
|
|
812
|
+
* connectors={allConnectors}
|
|
813
|
+
* onClick={(connector) => initiateConnection(connector)}
|
|
814
|
+
* setIsConnected={updateConnectionState}
|
|
815
|
+
* setIsOpen={toggleModal}
|
|
816
|
+
* waitForPredict={predictConnection}
|
|
817
|
+
* setContentType={changeContent}
|
|
818
|
+
* withImpersonated={false}
|
|
819
|
+
* isOnlyOneNetwork={true}
|
|
820
|
+
* />
|
|
821
|
+
* ```
|
|
822
|
+
*
|
|
823
|
+
* @public
|
|
824
|
+
*/
|
|
825
|
+
declare function ConnectorsSelections({ setIsConnected, setIsOpen, selectedAdapter, connectors, onClick, appChains, solanaRPCUrls, waitForPredict, setContentType, withImpersonated, isOnlyOneNetwork, store, }: ConnectorsSelectionsProps): react_jsx_runtime.JSX.Element;
|
|
826
|
+
|
|
827
|
+
/**
|
|
828
|
+
* Props for the ConnectorsBlock component
|
|
829
|
+
*/
|
|
830
|
+
interface ConnectorsBlockProps extends Pick<ConnectorsSelectionsProps, 'waitForPredict' | 'setIsOpen' | 'setIsConnected' | 'onClick' | 'appChains' | 'solanaRPCUrls'>, Pick<ConnectButtonProps, 'store'> {
|
|
831
|
+
/** Currently selected network adapter */
|
|
832
|
+
selectedAdapter: OrbitAdapter | undefined;
|
|
833
|
+
/** Array of grouped wallet connectors to display */
|
|
834
|
+
connectors: GroupedConnector$1[];
|
|
835
|
+
/** Title text for the connector group */
|
|
836
|
+
title: string;
|
|
837
|
+
/** Whether to render the title in bold accent color */
|
|
838
|
+
isTitleBold?: boolean;
|
|
839
|
+
/** Whether only one network is available */
|
|
840
|
+
isOnlyOneNetwork?: boolean;
|
|
841
|
+
}
|
|
842
|
+
/**
|
|
843
|
+
* ConnectorsBlock component - Displays a grouped section of wallet connectors
|
|
844
|
+
*
|
|
845
|
+
* This component renders a section of wallet connectors with:
|
|
846
|
+
* - Responsive layout adapting to touch/mouse interfaces
|
|
847
|
+
* - Support for multi-network wallet selection
|
|
848
|
+
* - Automatic connection handling for single-network wallets
|
|
849
|
+
* - Recent wallet indicators and prioritization
|
|
850
|
+
* - Full accessibility support with proper labeling
|
|
851
|
+
* - Error handling and connection retry logic
|
|
852
|
+
*
|
|
853
|
+
* Layout features:
|
|
854
|
+
* - Touch devices: Horizontal scrolling layout with cards
|
|
855
|
+
* - Mouse devices: Vertical stacked layout for better readability
|
|
856
|
+
* - Dynamic title styling based on section importance
|
|
857
|
+
* - Consistent spacing and visual hierarchy
|
|
858
|
+
*
|
|
859
|
+
* Connection flow:
|
|
860
|
+
* - Single adapter: Direct connection attempt
|
|
861
|
+
* - Multiple adapters without selection: Triggers network selection
|
|
862
|
+
* - Selected adapter: Uses specific adapter for connection
|
|
863
|
+
* - Recent wallets: Visual indicators for previously used wallets
|
|
864
|
+
*
|
|
865
|
+
* Accessibility features:
|
|
866
|
+
* - Semantic heading structure with proper levels
|
|
867
|
+
* - Group labeling for related connector sets
|
|
868
|
+
* - Screen reader friendly section descriptions
|
|
869
|
+
* - Proper focus management and keyboard navigation
|
|
870
|
+
*
|
|
871
|
+
* @param selectedAdapter - Currently selected network adapter
|
|
872
|
+
* @param connectors - Array of grouped wallet connectors
|
|
873
|
+
* @param title - Section title for the connector group
|
|
874
|
+
* @param isTitleBold - Whether to style title as accent/important
|
|
875
|
+
* @param isOnlyOneNetwork - Whether only one network is available
|
|
876
|
+
* @param waitForPredict - Function to wait for connection prediction
|
|
877
|
+
* @param setIsOpen - Function to control modal open state
|
|
878
|
+
* @param setIsConnected - Function to set connection status
|
|
879
|
+
* @param onClick - Click handler for connector selection
|
|
880
|
+
* @param appChains - Configuration for supported chains
|
|
881
|
+
* @param solanaRPCUrls - Solana RPC URL configuration
|
|
882
|
+
* @returns JSX element representing the connectors block
|
|
883
|
+
*
|
|
884
|
+
* @example
|
|
885
|
+
* ```tsx
|
|
886
|
+
* <ConnectorsBlock
|
|
887
|
+
* selectedAdapter={OrbitAdapter.EVM}
|
|
888
|
+
* connectors={installedConnectors}
|
|
889
|
+
* title="Installed"
|
|
890
|
+
* isTitleBold={true}
|
|
891
|
+
* isOnlyOneNetwork={false}
|
|
892
|
+
* onClick={(group) => handleWalletSelection(group)}
|
|
893
|
+
* appChains={appConfiguration}
|
|
894
|
+
* solanaRPCUrls={rpcConfig}
|
|
895
|
+
* />
|
|
896
|
+
* ```
|
|
897
|
+
*
|
|
898
|
+
* @example
|
|
899
|
+
* ```tsx
|
|
900
|
+
* // Popular wallets section without network selection
|
|
901
|
+
* <ConnectorsBlock
|
|
902
|
+
* selectedAdapter={undefined}
|
|
903
|
+
* connectors={popularConnectors}
|
|
904
|
+
* title="Popular"
|
|
905
|
+
* isTitleBold={false}
|
|
906
|
+
* isOnlyOneNetwork={true}
|
|
907
|
+
* onClick={(group) => initiateConnection(group)}
|
|
908
|
+
* appChains={appConfiguration}
|
|
909
|
+
* solanaRPCUrls={rpcConfig}
|
|
910
|
+
* />
|
|
911
|
+
* ```
|
|
912
|
+
*
|
|
913
|
+
* @public
|
|
914
|
+
*/
|
|
915
|
+
declare function ConnectorsBlock({ selectedAdapter, connectors, solanaRPCUrls, appChains, waitForPredict, setIsConnected, setIsOpen, onClick, title, isTitleBold, isOnlyOneNetwork, store, }: ConnectorsBlockProps): react_jsx_runtime.JSX.Element;
|
|
916
|
+
|
|
917
|
+
/**
|
|
918
|
+
* Type definition for button actions
|
|
919
|
+
* Can be either a URL string for external links or a callback function
|
|
920
|
+
*/
|
|
921
|
+
type ButtonAction = string | (() => void);
|
|
922
|
+
/**
|
|
923
|
+
* Props for the Disclaimer component
|
|
924
|
+
*/
|
|
925
|
+
interface DisclaimerProps {
|
|
926
|
+
/** Main title text for the disclaimer */
|
|
927
|
+
title: string;
|
|
928
|
+
/** Descriptive text explaining the disclaimer content */
|
|
929
|
+
description: string;
|
|
930
|
+
/** Action for the primary "Learn More" button - can be URL or callback */
|
|
931
|
+
learnMoreAction: ButtonAction;
|
|
932
|
+
/** Optional action for the secondary "List of Networks" button */
|
|
933
|
+
listAction?: ButtonAction;
|
|
934
|
+
/** Custom CSS classes for styling the disclaimer container */
|
|
935
|
+
className?: string;
|
|
936
|
+
/** Optional custom ARIA label for enhanced accessibility */
|
|
937
|
+
'aria-label'?: string;
|
|
938
|
+
/** Whether to show the disclaimer in compact mode */
|
|
939
|
+
compact?: boolean;
|
|
940
|
+
/** Additional content to display below the description */
|
|
941
|
+
children?: react__default.ReactNode;
|
|
942
|
+
/** Custom test ID for testing purposes */
|
|
943
|
+
'data-testid'?: string;
|
|
944
|
+
/** Whether the disclaimer should be announced to screen readers */
|
|
945
|
+
announceToScreenReader?: boolean;
|
|
946
|
+
}
|
|
947
|
+
/**
|
|
948
|
+
* Educational disclaimer component with call-to-action buttons
|
|
949
|
+
*
|
|
950
|
+
* This component provides educational content with actionable buttons for:
|
|
951
|
+
* - Informational disclaimers about wallets, networks, or other concepts
|
|
952
|
+
* - Educational content with "Learn More" functionality
|
|
953
|
+
* - Network information with optional "List of Networks" access
|
|
954
|
+
* - Responsive layout with proper spacing and visual hierarchy
|
|
955
|
+
* - Full WCAG accessibility compliance with screen reader support
|
|
956
|
+
* - Keyboard navigation with proper focus management
|
|
957
|
+
* - Semantic HTML structure with comprehensive ARIA labeling
|
|
958
|
+
* - Internationalization support for button labels
|
|
959
|
+
* - Support for both internal callbacks and external links
|
|
960
|
+
* - Flexible content areas with optional children support
|
|
961
|
+
*
|
|
962
|
+
* The component automatically handles different action types:
|
|
963
|
+
* - **String actions**: Rendered as external links with security attributes
|
|
964
|
+
* - **Function actions**: Rendered as buttons with callback execution
|
|
965
|
+
* - **Mixed actions**: Can combine both types for different buttons
|
|
966
|
+
*
|
|
967
|
+
* Layout features:
|
|
968
|
+
* - Responsive design with mobile-first approach
|
|
969
|
+
* - Proper visual hierarchy with title and description
|
|
970
|
+
* - Right-aligned action buttons for clear call-to-action
|
|
971
|
+
* - Compact mode for space-constrained layouts
|
|
972
|
+
* - Custom styling support via className prop
|
|
973
|
+
*
|
|
974
|
+
* Accessibility features:
|
|
975
|
+
* - Semantic HTML with proper heading structure
|
|
976
|
+
* - Comprehensive ARIA labeling for screen readers
|
|
977
|
+
* - Keyboard navigation support for all interactive elements
|
|
978
|
+
* - External link indication for screen readers
|
|
979
|
+
* - Optional live region announcements
|
|
980
|
+
* - High contrast compatible styling
|
|
981
|
+
*
|
|
982
|
+
* @param title - Main heading text for the disclaimer
|
|
983
|
+
* @param description - Explanatory text providing context
|
|
984
|
+
* @param learnMoreAction - Primary action (URL or callback) for learning more
|
|
985
|
+
* @param listAction - Optional secondary action for additional resources
|
|
986
|
+
* @param className - Custom CSS classes for container styling
|
|
987
|
+
* @param aria-label - Custom ARIA label for enhanced accessibility
|
|
988
|
+
* @param compact - Whether to use compact spacing and layout
|
|
989
|
+
* @param children - Additional content to display below description
|
|
990
|
+
* @param data-testid - Test identifier for testing purposes
|
|
991
|
+
* @param announceToScreenReader - Whether to announce content changes
|
|
992
|
+
* @returns JSX element displaying the educational disclaimer
|
|
993
|
+
*
|
|
994
|
+
* @example
|
|
995
|
+
* ```tsx
|
|
996
|
+
* <Disclaimer
|
|
997
|
+
* title="What is a wallet?"
|
|
998
|
+
* description="Wallets are essential for managing your crypto..."
|
|
999
|
+
* learnMoreAction={() => setContentType('about')}
|
|
1000
|
+
* listAction="https://example.com/networks"
|
|
1001
|
+
* />
|
|
1002
|
+
* ```
|
|
1003
|
+
*
|
|
1004
|
+
* @example
|
|
1005
|
+
* ```tsx
|
|
1006
|
+
* // With custom styling and accessibility features
|
|
1007
|
+
* <Disclaimer
|
|
1008
|
+
* title="Network Information"
|
|
1009
|
+
* description="Choose the right network for your transactions"
|
|
1010
|
+
* learnMoreAction={handleLearnMore}
|
|
1011
|
+
* compact
|
|
1012
|
+
* className="custom-disclaimer-styling"
|
|
1013
|
+
* aria-label="Network selection guidance"
|
|
1014
|
+
* data-testid="network-disclaimer"
|
|
1015
|
+
* announceToScreenReader
|
|
1016
|
+
* >
|
|
1017
|
+
* <div className="mt-2">
|
|
1018
|
+
* <p className="text-xs text-gray-500">
|
|
1019
|
+
* Additional network-specific information
|
|
1020
|
+
* </p>
|
|
1021
|
+
* </div>
|
|
1022
|
+
* </Disclaimer>
|
|
1023
|
+
* ```
|
|
1024
|
+
*
|
|
1025
|
+
* @example
|
|
1026
|
+
* ```tsx
|
|
1027
|
+
* // Educational content with external links
|
|
1028
|
+
* <Disclaimer
|
|
1029
|
+
* title="Security Notice"
|
|
1030
|
+
* description="Always verify wallet authenticity before connecting"
|
|
1031
|
+
* learnMoreAction="https://docs.example.com/security"
|
|
1032
|
+
* listAction="https://example.com/approved-wallets"
|
|
1033
|
+
* />
|
|
1034
|
+
* ```
|
|
1035
|
+
*
|
|
1036
|
+
* @public
|
|
1037
|
+
*/
|
|
1038
|
+
declare function Disclaimer({ title, description, learnMoreAction, listAction, className, 'aria-label': ariaLabel, compact, children, 'data-testid': testId, announceToScreenReader, }: DisclaimerProps): react_jsx_runtime.JSX.Element;
|
|
1039
|
+
|
|
1040
|
+
/**
|
|
1041
|
+
* Props for the GetWallet component
|
|
1042
|
+
*/
|
|
1043
|
+
interface GetWalletProps {
|
|
1044
|
+
/** Custom CSS classes for styling the container */
|
|
1045
|
+
className?: string;
|
|
1046
|
+
/** Optional custom ARIA label for enhanced accessibility */
|
|
1047
|
+
'aria-label'?: string;
|
|
1048
|
+
/** Custom test ID for testing purposes */
|
|
1049
|
+
'data-testid'?: string;
|
|
1050
|
+
/** Whether to show the component in compact mode */
|
|
1051
|
+
compact?: boolean;
|
|
1052
|
+
/** Whether animations should be enabled */
|
|
1053
|
+
enableAnimations?: boolean;
|
|
1054
|
+
/** Custom wallet icons to display instead of defaults */
|
|
1055
|
+
customWalletIcons?: WalletIconConfig[];
|
|
1056
|
+
/** Whether to show the background stars animation */
|
|
1057
|
+
showStarsBackground?: boolean;
|
|
1058
|
+
}
|
|
1059
|
+
/**
|
|
1060
|
+
* Configuration for wallet icons in the animation
|
|
1061
|
+
*/
|
|
1062
|
+
interface WalletIconConfig {
|
|
1063
|
+
/** Wallet key for Web3Icon component */
|
|
1064
|
+
walletKey: string;
|
|
1065
|
+
/** Position configuration using predefined position classes */
|
|
1066
|
+
position: {
|
|
1067
|
+
/** Top position class (e.g., 'top-[5%]', 'top-4') */
|
|
1068
|
+
top?: string;
|
|
1069
|
+
/** Bottom position class (e.g., 'bottom-[10%]', 'bottom-4') */
|
|
1070
|
+
bottom?: string;
|
|
1071
|
+
/** Left position class (e.g., 'left-[5%]', 'left-4') */
|
|
1072
|
+
left?: string;
|
|
1073
|
+
/** Right position class (e.g., 'right-[10%]', 'right-4') */
|
|
1074
|
+
right?: string;
|
|
1075
|
+
/** Transform classes for centering */
|
|
1076
|
+
transform?: string;
|
|
1077
|
+
};
|
|
1078
|
+
/** Size configuration using predefined size classes */
|
|
1079
|
+
size: {
|
|
1080
|
+
/** Width and height classes for mobile */
|
|
1081
|
+
mobile: {
|
|
1082
|
+
width: string;
|
|
1083
|
+
height: string;
|
|
1084
|
+
};
|
|
1085
|
+
/** Width and height classes for desktop */
|
|
1086
|
+
desktop: {
|
|
1087
|
+
width: string;
|
|
1088
|
+
height: string;
|
|
1089
|
+
};
|
|
1090
|
+
};
|
|
1091
|
+
/** Animation configuration */
|
|
1092
|
+
animation: {
|
|
1093
|
+
/** Animation duration in seconds */
|
|
1094
|
+
duration: string;
|
|
1095
|
+
/** Animation delay in seconds */
|
|
1096
|
+
delay: string;
|
|
1097
|
+
/** Whether to reverse animation direction */
|
|
1098
|
+
reverse?: boolean;
|
|
1099
|
+
};
|
|
1100
|
+
/** ARIA label for the wallet icon */
|
|
1101
|
+
ariaLabel?: string;
|
|
1102
|
+
}
|
|
1103
|
+
/**
|
|
1104
|
+
* GetWallet component - Educational wallet introduction with animated icons
|
|
1105
|
+
*
|
|
1106
|
+
* This component provides an engaging introduction to Web3 wallets featuring:
|
|
1107
|
+
* - Animated floating wallet icons with customizable configurations
|
|
1108
|
+
* - Educational content explaining Web3 wallet importance
|
|
1109
|
+
* - Responsive design with mobile-first approach
|
|
1110
|
+
* - Full accessibility support with proper ARIA labeling
|
|
1111
|
+
* - Internationalization support for all text content
|
|
1112
|
+
* - Performance optimizations with memoized calculations
|
|
1113
|
+
* - Customizable animations and icon configurations
|
|
1114
|
+
* - Semantic HTML structure for screen readers
|
|
1115
|
+
* - Proper focus management and keyboard navigation
|
|
1116
|
+
*
|
|
1117
|
+
* Visual features:
|
|
1118
|
+
* - Animated stars background for visual appeal
|
|
1119
|
+
* - Floating wallet icons with staggered animations
|
|
1120
|
+
* - Responsive sizing for different screen sizes
|
|
1121
|
+
* - Smooth fade-in animations for content appearance
|
|
1122
|
+
* - Customizable color scheme using CSS variables
|
|
1123
|
+
*
|
|
1124
|
+
* Accessibility features:
|
|
1125
|
+
* - Proper ARIA labels for all interactive elements
|
|
1126
|
+
* - Screen reader friendly content structure
|
|
1127
|
+
* - Keyboard navigation support
|
|
1128
|
+
* - High contrast compatible styling
|
|
1129
|
+
* - Motion reduction respect (prefers-reduced-motion)
|
|
1130
|
+
* - Semantic HTML with proper heading hierarchy
|
|
1131
|
+
*
|
|
1132
|
+
* @param className - Custom CSS classes for container styling
|
|
1133
|
+
* @param aria-label - Custom ARIA label for enhanced accessibility
|
|
1134
|
+
* @param data-testid - Test identifier for testing purposes
|
|
1135
|
+
* @param compact - Whether to show in compact mode with reduced spacing
|
|
1136
|
+
* @param enableAnimations - Whether to enable floating animations (default: true)
|
|
1137
|
+
* @param customWalletIcons - Custom wallet icons configuration to override defaults
|
|
1138
|
+
* @param showStarsBackground - Whether to show animated stars background (default: true)
|
|
1139
|
+
* @returns JSX element displaying the wallet introduction section
|
|
1140
|
+
*
|
|
1141
|
+
* @example
|
|
1142
|
+
* ```tsx
|
|
1143
|
+
* <GetWallet />
|
|
1144
|
+
* ```
|
|
1145
|
+
*
|
|
1146
|
+
* @example
|
|
1147
|
+
* ```tsx
|
|
1148
|
+
* // With custom configuration
|
|
1149
|
+
* <GetWallet
|
|
1150
|
+
* compact
|
|
1151
|
+
* className="custom-wallet-intro"
|
|
1152
|
+
* enableAnimations={!prefersReducedMotion}
|
|
1153
|
+
* showStarsBackground={!prefersReducedMotion}
|
|
1154
|
+
* data-testid="wallet-introduction"
|
|
1155
|
+
* />
|
|
1156
|
+
* ```
|
|
1157
|
+
*
|
|
1158
|
+
* @example
|
|
1159
|
+
* ```tsx
|
|
1160
|
+
* // With custom wallet icons
|
|
1161
|
+
* <GetWallet
|
|
1162
|
+
* customWalletIcons={[
|
|
1163
|
+
* {
|
|
1164
|
+
* walletKey: 'custom-wallet',
|
|
1165
|
+
* position: {
|
|
1166
|
+
* top: 'top-1/2',
|
|
1167
|
+
* left: 'left-1/2',
|
|
1168
|
+
* transform: '-translate-x-1/2 -translate-y-1/2'
|
|
1169
|
+
* },
|
|
1170
|
+
* size: {
|
|
1171
|
+
* mobile: { width: 'w-24', height: 'h-24' },
|
|
1172
|
+
* desktop: { width: 'md:w-32', height: 'md:h-32' }
|
|
1173
|
+
* },
|
|
1174
|
+
* animation: {
|
|
1175
|
+
* duration: '[2000ms]',
|
|
1176
|
+
* delay: '[0ms]'
|
|
1177
|
+
* },
|
|
1178
|
+
* ariaLabel: 'Custom Wallet icon'
|
|
1179
|
+
* }
|
|
1180
|
+
* ]}
|
|
1181
|
+
* />
|
|
1182
|
+
* ```
|
|
1183
|
+
*
|
|
1184
|
+
* @public
|
|
1185
|
+
*/
|
|
1186
|
+
declare function GetWallet({ className, 'aria-label': ariaLabel, 'data-testid': testId, compact, enableAnimations, customWalletIcons, showStarsBackground, }: GetWalletProps): react_jsx_runtime.JSX.Element;
|
|
1187
|
+
|
|
1188
|
+
/**
|
|
1189
|
+
* Props for the ImpersonateForm component
|
|
1190
|
+
*/
|
|
1191
|
+
interface ImpersonateFormProps extends Pick<ConnectButtonProps, 'store'> {
|
|
1192
|
+
/** Current impersonated wallet address value */
|
|
1193
|
+
impersonatedAddress: string;
|
|
1194
|
+
/** Callback to update the impersonated address */
|
|
1195
|
+
setImpersonatedAddress: (value: string) => void;
|
|
1196
|
+
}
|
|
1197
|
+
/**
|
|
1198
|
+
* Form component for entering wallet address to impersonate
|
|
1199
|
+
*
|
|
1200
|
+
* Validates input to prevent empty addresses and automatically sets errors in the store.
|
|
1201
|
+
* Gets labels from context and manages validation internally with debounced validation.
|
|
1202
|
+
*/
|
|
1203
|
+
declare function ImpersonateForm({ impersonatedAddress, setImpersonatedAddress, store }: ImpersonateFormProps): react_jsx_runtime.JSX.Element;
|
|
1204
|
+
|
|
1205
|
+
/**
|
|
1206
|
+
* Props for the NetworkSelections component
|
|
1207
|
+
*/
|
|
1208
|
+
interface NetworkSelectionsProps {
|
|
1209
|
+
/** Name of the currently active wallet connector */
|
|
1210
|
+
activeConnector: string | undefined;
|
|
1211
|
+
/** Array of grouped wallet connectors with their supported networks */
|
|
1212
|
+
connectors: GroupedConnector$1[];
|
|
1213
|
+
/** Click handler for network selection */
|
|
1214
|
+
onClick: (adapter: OrbitAdapter, walletType: WalletType) => Promise<void>;
|
|
1215
|
+
}
|
|
1216
|
+
/**
|
|
1217
|
+
* NetworkSelections component - Network/blockchain selection interface for multi-network wallets
|
|
1218
|
+
*
|
|
1219
|
+
* This component provides a network selection interface when a wallet supports multiple blockchains:
|
|
1220
|
+
* - Visual network cards with blockchain icons and names
|
|
1221
|
+
* - Responsive layout adapting to touch/mouse interfaces
|
|
1222
|
+
* - Error handling for invalid connector states
|
|
1223
|
+
* - Educational content about blockchain networks
|
|
1224
|
+
* - Full accessibility support with semantic structure
|
|
1225
|
+
* - External documentation links for each network
|
|
1226
|
+
*
|
|
1227
|
+
* Use cases:
|
|
1228
|
+
* - Multi-network wallets (e.g., MetaMask supporting EVM chains)
|
|
1229
|
+
* - Cross-chain wallets supporting both EVM and Solana
|
|
1230
|
+
* - Network-specific connection requirements
|
|
1231
|
+
* - User education about blockchain differences
|
|
1232
|
+
*
|
|
1233
|
+
* Layout features:
|
|
1234
|
+
* - Touch devices: Horizontal scrolling layout for easy mobile navigation
|
|
1235
|
+
* - Mouse devices: Vertical layout with fixed height scrolling
|
|
1236
|
+
* - Network icons with Web3Icon integration for consistency
|
|
1237
|
+
* - External links for additional network information
|
|
1238
|
+
*
|
|
1239
|
+
* Error handling:
|
|
1240
|
+
* - Graceful fallback when active connector is not found
|
|
1241
|
+
* - Clear error messaging with actionable guidance
|
|
1242
|
+
* - Visual error indicators with warning icons
|
|
1243
|
+
* - Accessible error state announcements
|
|
1244
|
+
*
|
|
1245
|
+
* Accessibility features:
|
|
1246
|
+
* - Semantic heading structure for network selection
|
|
1247
|
+
* - Proper ARIA labels for error states and selections
|
|
1248
|
+
* - Screen reader friendly network descriptions
|
|
1249
|
+
* - Keyboard navigation support for all interactive elements
|
|
1250
|
+
* - Error announcements with live regions
|
|
1251
|
+
*
|
|
1252
|
+
* @param activeConnector - Name of the currently selected wallet connector
|
|
1253
|
+
* @param connectors - Array of available wallet connectors with supported networks
|
|
1254
|
+
* @param onClick - Async handler for network selection with adapter and wallet type
|
|
1255
|
+
* @returns JSX element representing the network selection interface
|
|
1256
|
+
*
|
|
1257
|
+
* @example
|
|
1258
|
+
* ```tsx
|
|
1259
|
+
* <NetworkSelections
|
|
1260
|
+
* activeConnector="metamask"
|
|
1261
|
+
* connectors={multiNetworkConnectors}
|
|
1262
|
+
* onClick={async (adapter, walletType) => {
|
|
1263
|
+
* await connectToNetwork(adapter, walletType);
|
|
1264
|
+
* }}
|
|
1265
|
+
* />
|
|
1266
|
+
* ```
|
|
1267
|
+
*
|
|
1268
|
+
* @example
|
|
1269
|
+
* ```tsx
|
|
1270
|
+
* // For cross-chain wallet selection
|
|
1271
|
+
* <NetworkSelections
|
|
1272
|
+
* activeConnector="phantom"
|
|
1273
|
+
* connectors={[{
|
|
1274
|
+
* name: "Phantom",
|
|
1275
|
+
* adapters: [OrbitAdapter.SOLANA, OrbitAdapter.EVM],
|
|
1276
|
+
* connectors: phantomConnectors
|
|
1277
|
+
* }]}
|
|
1278
|
+
* onClick={(adapter, type) => handleNetworkConnection(adapter, type)}
|
|
1279
|
+
* />
|
|
1280
|
+
* ```
|
|
1281
|
+
*
|
|
1282
|
+
* @public
|
|
1283
|
+
*/
|
|
1284
|
+
declare function NetworkSelections({ connectors, onClick, activeConnector }: NetworkSelectionsProps): react_jsx_runtime.JSX.Element;
|
|
1285
|
+
|
|
1286
|
+
/**
|
|
1287
|
+
* Props for the NetworkTabs component
|
|
1288
|
+
*/
|
|
1289
|
+
interface NetworkTabsProps {
|
|
1290
|
+
/** Array of available network adapters */
|
|
1291
|
+
networks: OrbitAdapter[];
|
|
1292
|
+
/** Currently selected network adapter (undefined means "All" is selected) */
|
|
1293
|
+
selectedAdapter: OrbitAdapter | undefined;
|
|
1294
|
+
/** Handler for network selection changes */
|
|
1295
|
+
onSelect: (adapter: OrbitAdapter | undefined) => void;
|
|
1296
|
+
}
|
|
1297
|
+
/**
|
|
1298
|
+
* NetworkTabs component - Animated tab navigation for network selection
|
|
1299
|
+
*
|
|
1300
|
+
* This component provides an animated tab interface for selecting blockchain networks:
|
|
1301
|
+
* - Animated tab transitions with smooth layouts
|
|
1302
|
+
* - Visual network icons with Web3Icon integration
|
|
1303
|
+
* - "All networks" option for viewing all connectors
|
|
1304
|
+
* - Responsive horizontal scrolling for mobile devices
|
|
1305
|
+
* - Full accessibility support with keyboard navigation
|
|
1306
|
+
* - Motion-based UI feedback for better user experience
|
|
1307
|
+
*
|
|
1308
|
+
* Key features:
|
|
1309
|
+
* - Framer Motion powered animations with layout transitions
|
|
1310
|
+
* - Dynamic tab indicator that smoothly moves between selections
|
|
1311
|
+
* - Network icons with proper fallbacks and sizing
|
|
1312
|
+
* - Conditional rendering - hidden when only one network available
|
|
1313
|
+
* - Touch-friendly interface with horizontal scrolling
|
|
1314
|
+
*
|
|
1315
|
+
* Animation system:
|
|
1316
|
+
* - Layout animations for smooth tab movement
|
|
1317
|
+
* - Text fade transitions when switching between tabs
|
|
1318
|
+
* - Morphing background indicator following active selection
|
|
1319
|
+
* - Optimized animation durations for natural feel
|
|
1320
|
+
*
|
|
1321
|
+
* Accessibility features:
|
|
1322
|
+
* - Proper button semantics with ARIA labels
|
|
1323
|
+
* - Keyboard navigation support (Space, Enter)
|
|
1324
|
+
* - Screen reader friendly tab descriptions
|
|
1325
|
+
* - Focus management with visible focus indicators
|
|
1326
|
+
* - Meaningful tooltips for each network option
|
|
1327
|
+
*
|
|
1328
|
+
* @param networks - Array of available network adapters to display as tabs
|
|
1329
|
+
* @param selectedAdapter - Currently active network (undefined for "All")
|
|
1330
|
+
* @param onSelect - Callback function when user selects a different network
|
|
1331
|
+
* @returns JSX element representing animated network tabs, or null if ≤1 networks
|
|
1332
|
+
*
|
|
1333
|
+
* @example
|
|
1334
|
+
* ```tsx
|
|
1335
|
+
* <NetworkTabs
|
|
1336
|
+
* networks={[OrbitAdapter.EVM, OrbitAdapter.SOLANA]}
|
|
1337
|
+
* selectedAdapter={OrbitAdapter.EVM}
|
|
1338
|
+
* onSelect={(adapter) => handleNetworkChange(adapter)}
|
|
1339
|
+
* />
|
|
1340
|
+
* ```
|
|
1341
|
+
*
|
|
1342
|
+
* @example
|
|
1343
|
+
* ```tsx
|
|
1344
|
+
* // Single network scenario - component renders nothing
|
|
1345
|
+
* <NetworkTabs
|
|
1346
|
+
* networks={[OrbitAdapter.EVM]}
|
|
1347
|
+
* selectedAdapter={OrbitAdapter.EVM}
|
|
1348
|
+
* onSelect={(adapter) => setSelectedNetwork(adapter)}
|
|
1349
|
+
* />
|
|
1350
|
+
* // Returns null - no tabs needed for single network
|
|
1351
|
+
* ```
|
|
1352
|
+
*
|
|
1353
|
+
* @example
|
|
1354
|
+
* ```tsx
|
|
1355
|
+
* // Multi-network with "All" option selected
|
|
1356
|
+
* <NetworkTabs
|
|
1357
|
+
* networks={[OrbitAdapter.EVM, OrbitAdapter.SOLANA, OrbitAdapter.BITCOIN]}
|
|
1358
|
+
* selectedAdapter={undefined} // "All" networks selected
|
|
1359
|
+
* onSelect={(adapter) => filterByNetwork(adapter)}
|
|
1360
|
+
* />
|
|
1361
|
+
* ```
|
|
1362
|
+
*
|
|
1363
|
+
* @public
|
|
1364
|
+
*/
|
|
1365
|
+
declare function NetworkTabs({ networks, selectedAdapter, onSelect }: NetworkTabsProps): react_jsx_runtime.JSX.Element | null;
|
|
1366
|
+
|
|
1367
|
+
interface RecentBadgeProps {
|
|
1368
|
+
className?: string;
|
|
1369
|
+
children?: react__default.ReactNode;
|
|
1370
|
+
animated?: boolean;
|
|
1371
|
+
}
|
|
1372
|
+
/**
|
|
1373
|
+
* Badge component with animated gradient border effect
|
|
1374
|
+
*/
|
|
1375
|
+
declare const RecentBadge: react__default.NamedExoticComponent<RecentBadgeProps>;
|
|
1376
|
+
|
|
1377
|
+
interface SelectContentAnimatedProps extends ComponentPropsWithoutRef<typeof Select.Content> {
|
|
1378
|
+
/** Custom CSS classes to apply to the content container */
|
|
1379
|
+
className?: string;
|
|
1380
|
+
/** ARIA label for the select content */
|
|
1381
|
+
'aria-label'?: string;
|
|
1382
|
+
/** Whether the select content should have reduced motion for accessibility */
|
|
1383
|
+
reduceMotion?: boolean;
|
|
1384
|
+
}
|
|
1385
|
+
declare const SelectContentAnimated: react.ForwardRefExoticComponent<SelectContentAnimatedProps & react.RefAttributes<HTMLDivElement>>;
|
|
1386
|
+
|
|
1387
|
+
interface ToastErrorProps {
|
|
1388
|
+
/** Error title to display */
|
|
1389
|
+
title: string;
|
|
1390
|
+
/** Raw error message to display and copy */
|
|
1391
|
+
rawError: string;
|
|
1392
|
+
/** Custom CSS classes for the container */
|
|
1393
|
+
className?: string;
|
|
1394
|
+
/** Custom ARIA label for the error container */
|
|
1395
|
+
'aria-label'?: string;
|
|
1396
|
+
/** Callback fired when copy operation completes */
|
|
1397
|
+
onCopyComplete?: (success: boolean) => void;
|
|
1398
|
+
}
|
|
1399
|
+
declare function ToastError({ title, rawError, className, 'aria-label': ariaLabel, onCopyComplete }: ToastErrorProps): react_jsx_runtime.JSX.Element;
|
|
1400
|
+
|
|
1401
|
+
interface ToBottomButtonProps {
|
|
1402
|
+
/** Custom CSS classes for the button */
|
|
1403
|
+
className?: string;
|
|
1404
|
+
/** Custom aria-label for the button */
|
|
1405
|
+
'aria-label'?: string;
|
|
1406
|
+
/** Callback fired when button is clicked */
|
|
1407
|
+
onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
|
|
1408
|
+
/** Whether the button is disabled */
|
|
1409
|
+
disabled?: boolean;
|
|
1410
|
+
}
|
|
1411
|
+
declare const ToBottomButton: react.ForwardRefExoticComponent<ToBottomButtonProps & react.RefAttributes<HTMLButtonElement>>;
|
|
1412
|
+
|
|
1413
|
+
interface ToTopButtonProps {
|
|
1414
|
+
/** Custom CSS classes for the button */
|
|
1415
|
+
className?: string;
|
|
1416
|
+
/** Custom aria-label for the button */
|
|
1417
|
+
'aria-label'?: string;
|
|
1418
|
+
/** Callback fired when button is clicked */
|
|
1419
|
+
onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
|
|
1420
|
+
/** Whether the button is disabled */
|
|
1421
|
+
disabled?: boolean;
|
|
1422
|
+
}
|
|
1423
|
+
declare const ToTopButton: react.ForwardRefExoticComponent<ToTopButtonProps & react.RefAttributes<HTMLButtonElement>>;
|
|
1424
|
+
|
|
1425
|
+
/**
|
|
1426
|
+
* @file This file contains the `WalletAvatar` component for displaying a user's avatar.
|
|
1427
|
+
*/
|
|
1428
|
+
type WalletAvatarProps = {
|
|
1429
|
+
/** The user's wallet address, used for the blockie fallback and background color. */
|
|
1430
|
+
address: string;
|
|
1431
|
+
/** An optional URL for the user's ENS avatar image. */
|
|
1432
|
+
ensAvatar?: string | null;
|
|
1433
|
+
/** Optional additional CSS classes for the container. */
|
|
1434
|
+
className?: string;
|
|
1435
|
+
/** Custom alt text for the avatar image */
|
|
1436
|
+
altText?: string;
|
|
1437
|
+
/** Size variant for the avatar */
|
|
1438
|
+
size?: 'sm' | 'md' | 'lg' | 'xl';
|
|
1439
|
+
/** Whether to show loading animation */
|
|
1440
|
+
showLoading?: boolean;
|
|
1441
|
+
/** Callback fired when image loads successfully */
|
|
1442
|
+
onImageLoad?: () => void;
|
|
1443
|
+
/** Callback fired when image fails to load */
|
|
1444
|
+
onImageError?: (error: Event) => void;
|
|
1445
|
+
/** Whether to disable the pulse animation */
|
|
1446
|
+
disableAnimation?: boolean;
|
|
1447
|
+
};
|
|
1448
|
+
/**
|
|
1449
|
+
* A component that displays a user's avatar.
|
|
1450
|
+
*
|
|
1451
|
+
* It prioritizes showing the provided `ensAvatar`. If unavailable or if the image fails to load,
|
|
1452
|
+
* it falls back to a procedurally generated "blockie" based on the user's address.
|
|
1453
|
+
* It also generates a unique background color from the address as a placeholder.
|
|
1454
|
+
*/
|
|
1455
|
+
declare const WalletAvatar: react.ForwardRefExoticComponent<WalletAvatarProps & react.RefAttributes<HTMLDivElement>>;
|
|
1456
|
+
|
|
1457
|
+
interface WalletIconProps {
|
|
1458
|
+
/** Custom icon URL for the wallet */
|
|
1459
|
+
icon?: string;
|
|
1460
|
+
/** Name of the wallet */
|
|
1461
|
+
name: string;
|
|
1462
|
+
/** Size of the icon in pixels */
|
|
1463
|
+
size?: number;
|
|
1464
|
+
/** Additional CSS classes */
|
|
1465
|
+
className?: string;
|
|
1466
|
+
/** Custom alt text for the icon */
|
|
1467
|
+
altText?: string;
|
|
1468
|
+
/** Whether to show loading state */
|
|
1469
|
+
showLoading?: boolean;
|
|
1470
|
+
/** Callback fired when image loads successfully */
|
|
1471
|
+
onImageLoad?: () => void;
|
|
1472
|
+
/** Callback fired when image fails to load */
|
|
1473
|
+
onImageError?: () => void;
|
|
1474
|
+
/** Enable lazy loading for non-critical images */
|
|
1475
|
+
lazy?: boolean;
|
|
1476
|
+
}
|
|
1477
|
+
declare const WalletIcon: react.ForwardRefExoticComponent<WalletIconProps & react.RefAttributes<HTMLDivElement>>;
|
|
1478
|
+
|
|
1479
|
+
/**
|
|
1480
|
+
* Default English translations for NovaConnect component
|
|
1481
|
+
* All text strings extracted from component files
|
|
1482
|
+
*/
|
|
1483
|
+
declare const defaultLabels: NovaConnectLabels;
|
|
1484
|
+
|
|
1485
|
+
/**
|
|
1486
|
+
* Українські переклади для компонента NovaConnect
|
|
1487
|
+
* Всі текстові рядки витягнуті з файлів компонентів
|
|
1488
|
+
*/
|
|
1489
|
+
declare const ukrainianLabels: NovaConnectLabels;
|
|
1490
|
+
|
|
1491
|
+
/**
|
|
1492
|
+
* Parameters for getting chains list by wallet type
|
|
1493
|
+
*/
|
|
1494
|
+
interface GetChainsListParams extends InitialChains {
|
|
1495
|
+
/** The wallet type to get chains for */
|
|
1496
|
+
walletType: WalletType;
|
|
1497
|
+
/** Optional array of chain identifiers to filter by */
|
|
1498
|
+
chains?: ChainIdentifierArray;
|
|
1499
|
+
}
|
|
1500
|
+
/**
|
|
1501
|
+
* Safely extracts chains from active wallet with proper type checking
|
|
1502
|
+
* @param activeWallet - The wallet object to extract chains from
|
|
1503
|
+
* @returns Array of chain identifiers or undefined if not found
|
|
1504
|
+
*/
|
|
1505
|
+
declare function getWalletChains(activeWallet: any): (string | number)[] | undefined;
|
|
1506
|
+
/**
|
|
1507
|
+
* Gets the list of available chains for a specific wallet type.
|
|
1508
|
+
* Automatically handles different blockchain adapters based on wallet type.
|
|
1509
|
+
* Now with enhanced safety for any types.
|
|
1510
|
+
*
|
|
1511
|
+
* @param params - Configuration object containing wallet type and chain information
|
|
1512
|
+
* @returns Array of chain identifiers available for the given wallet type
|
|
1513
|
+
*/
|
|
1514
|
+
declare function getChainsListByWalletType(params: GetChainsListParams): (string | number)[];
|
|
1515
|
+
|
|
1516
|
+
/**
|
|
1517
|
+
* Gets the appropriate chain ID for connecting based on the selected adapter.
|
|
1518
|
+
* Returns the first available chain for the adapter, or a sensible default.
|
|
1519
|
+
*
|
|
1520
|
+
* @param params - Configuration object
|
|
1521
|
+
* @param params.selectedAdapter - The blockchain adapter to use
|
|
1522
|
+
* @param params.appChains - Available EVM chains
|
|
1523
|
+
* @param params.solanaRPCUrls - Available Solana networks
|
|
1524
|
+
* @returns Chain ID (number for EVM/Starknet, string for Solana)
|
|
1525
|
+
*/
|
|
1526
|
+
declare function getConnectChainId({ selectedAdapter, appChains, solanaRPCUrls, }: {
|
|
1527
|
+
selectedAdapter: OrbitAdapter;
|
|
1528
|
+
} & InitialChains): number | string;
|
|
1529
|
+
/**
|
|
1530
|
+
* Helper to get all available chain IDs for an adapter
|
|
1531
|
+
*/
|
|
1532
|
+
declare function getAvailableChainIds({ selectedAdapter, appChains, solanaRPCUrls, }: {
|
|
1533
|
+
selectedAdapter: OrbitAdapter;
|
|
1534
|
+
} & InitialChains): Array<number | string>;
|
|
1535
|
+
|
|
1536
|
+
interface GroupedConnector {
|
|
1537
|
+
name: string;
|
|
1538
|
+
icon?: string;
|
|
1539
|
+
adapters: OrbitAdapter[];
|
|
1540
|
+
connectors: (Connector$1 & {
|
|
1541
|
+
adapter: OrbitAdapter;
|
|
1542
|
+
})[];
|
|
1543
|
+
}
|
|
1544
|
+
|
|
1545
|
+
interface GetFilteredConnectorsParams {
|
|
1546
|
+
connectors: Partial<Record<OrbitAdapter, Connector$1[]>>;
|
|
1547
|
+
selectedAdapter?: OrbitAdapter;
|
|
1548
|
+
}
|
|
1549
|
+
/**
|
|
1550
|
+
* Filters grouped connectors by the selected adapter.
|
|
1551
|
+
* Returns all connectors if no adapter is selected, or only connectors
|
|
1552
|
+
* that support the specified adapter if one is provided.
|
|
1553
|
+
*
|
|
1554
|
+
* @param params Configuration object with connectors and optional adapter filter
|
|
1555
|
+
* @returns Filtered array of grouped connectors
|
|
1556
|
+
*/
|
|
1557
|
+
declare function getFilteredConnectors({ connectors, selectedAdapter, }: GetFilteredConnectorsParams): GroupedConnector[];
|
|
1558
|
+
/**
|
|
1559
|
+
* Quick helper to check if any connectors exist for an adapter
|
|
1560
|
+
*/
|
|
1561
|
+
declare function hasConnectorsForAdapter(connectors: Partial<Record<OrbitAdapter, Connector$1[]>>, adapter: OrbitAdapter): boolean;
|
|
1562
|
+
|
|
1563
|
+
declare const getNetworkIcon: (adapter: OrbitAdapter) => {
|
|
1564
|
+
chainId: number;
|
|
1565
|
+
name: string;
|
|
1566
|
+
} | {
|
|
1567
|
+
chainId: string;
|
|
1568
|
+
name: string;
|
|
1569
|
+
} | undefined;
|
|
1570
|
+
|
|
1571
|
+
/**
|
|
1572
|
+
* @fileoverview Utility function to determine if the current environment supports touch input.
|
|
1573
|
+
* This is safe to use in Next.js applications as it checks for the `window` object existence.
|
|
1574
|
+
*/
|
|
1575
|
+
/**
|
|
1576
|
+
* Determines if the current browsing device supports touch input,
|
|
1577
|
+
* while also excluding large screens (typically desktop-sized touch monitors).
|
|
1578
|
+
*
|
|
1579
|
+
* It checks for:
|
|
1580
|
+
* 1. The presence of 'ontouchstart' or navigator.maxTouchPoints > 0 or '(pointer: coarse)'.
|
|
1581
|
+
* 2. ONLY returns true if the screen width is less than or equal to the specified threshold (e.g., 1200px).
|
|
1582
|
+
*
|
|
1583
|
+
* This function is safe for server-side rendering (SSR) environments like Next.js.
|
|
1584
|
+
*
|
|
1585
|
+
* @param {number} [maxWidth=1200] The maximum screen width (in pixels) for a device to be considered 'touch' (default is 1200).
|
|
1586
|
+
* @returns {boolean} Returns true if the environment is determined to support touch input AND is within the width limit, otherwise false.
|
|
1587
|
+
*/
|
|
1588
|
+
declare function isTouchDevice(maxWidth?: number): boolean;
|
|
1589
|
+
|
|
1590
|
+
declare const networksLinks: Partial<Record<OrbitAdapter, {
|
|
1591
|
+
aboutNetwork: string;
|
|
1592
|
+
choseWallet: string;
|
|
1593
|
+
about: string;
|
|
1594
|
+
}>>;
|
|
1595
|
+
|
|
1596
|
+
declare const EvmChain: any;
|
|
1597
|
+
declare const getEvmChains: any;
|
|
1598
|
+
declare const isEvmChainList: any;
|
|
1599
|
+
declare const restEvmExports: any;
|
|
1600
|
+
declare const SolanaClusterMoniker: any;
|
|
1601
|
+
declare const getSolanaClusters: any;
|
|
1602
|
+
declare const isSolanaChainList: any;
|
|
1603
|
+
declare const getAvailableSolanaClusters: any;
|
|
1604
|
+
declare const isValidSolanaCluster: any;
|
|
1605
|
+
declare const restSolanaExports: any;
|
|
1606
|
+
|
|
1607
|
+
export { AboutWallets, type AllChainConfigs, type AllConnectors, type AllWallets, type ChainIdentifierArray, ChainListRenderer, ChainSelector, ConnectButton, type ConnectButtonProps, ConnectCard, ConnectedContent, ConnectedModal, ConnectedModalFooter, ConnectedModalMainContent, type ConnectedModalMainContentProps, ConnectedModalNameAndBalance, ConnectedModalTxHistory, Connecting, type Connector, ConnectorsBlock, ConnectorsSelections, type ConnectorsSelectionsProps, Disclaimer, EvmChain, GetWallet, IconButton, ImpersonateForm, type InitialChains, NetworkSelections, NetworkTabs, type NovaConnectLabels, RecentBadge, ScrollableChainList, SelectContentAnimated, SolanaClusterMoniker, StatusIcon, ToBottomButton, ToTopButton, ToastError, WaitForConnectionContent, type Wallet, WalletAvatar, type WalletAvatarProps, WalletIcon, defaultLabels, getAvailableChainIds, getAvailableSolanaClusters, getChainsListByWalletType, getConnectChainId, getEvmChains, getFilteredConnectors, getNetworkIcon, getSolanaClusters, getWalletChains, hasConnectorsForAdapter, isEvmChainList, isSolanaChainList, isTouchDevice, isValidSolanaCluster, networksLinks, restEvmExports, restSolanaExports, ukrainianLabels };
|