@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.
@@ -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 };