@tuwaio/nova-transactions 1.0.0-alpha.2.cdce32a → 1.0.0-alpha.4.a67b545

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.
@@ -1,61 +1,59 @@
1
- import { TransactionStatus, Transaction, TxAdapter, TransactionAdapter, TxActions, TransactionPool, IInitializeTxTrackingStore, ITxTrackingStore } from '@tuwaio/pulsar-core';
2
- import { ReactNode, JSX, ComponentType, ComponentPropsWithoutRef } from 'react';
3
- import { ToastContainerProps, ToastContentProps } from 'react-toastify';
4
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
5
2
  import * as Dialog from '@radix-ui/react-dialog';
3
+ import { TransactionStatus, Transaction, TxAdapter, TransactionAdapter, TransactionPool, TxActions, ITxTrackingStore, InitialTransaction } from '@tuwaio/pulsar-core';
6
4
  import { MotionProps } from 'framer-motion';
5
+ import { ReactNode, ComponentType, JSX, ComponentPropsWithoutRef } from 'react';
6
+ import { ToastContainerProps, ToastContentProps } from 'react-toastify';
7
7
 
8
8
  /**
9
- * @file This file contains the `HashLink` component, a UI element for displaying hashes with copy and explorer link functionality.
9
+ * @file This file contains the `HashLink` component, a UI element for displaying
10
+ * blockchain hashes with copy-to-clipboard and block explorer link functionality.
10
11
  */
11
12
  /**
12
- * A component to display a hash string (e.g., transaction hash or address)
13
- * with an optional label, a link to a block explorer, and a copy-to-clipboard button.
14
- *
15
- * @param {object} props - The component props.
16
- * @param {string} [props.label] - An optional label to display before the hash (e.g., "Tx Hash").
17
- * @param {string} props.hash - The full hash string to display and copy.
18
- * @param {string} [props.explorerUrl] - An optional URL to a block explorer. If provided, the hash becomes a link.
19
- * @param {'default' | 'compact'} [props.variant='default'] - The visual style of the component.
20
- * @param {string} [props.className] - Additional CSS classes to apply to the container element.
21
- * @returns {JSX.Element} The rendered HashLink component.
22
- */
23
- declare function HashLink({ label, hash, explorerUrl, variant, className, }: {
24
- label?: string;
13
+ * Defines the props for the HashLink component.
14
+ */
15
+ type HashLinkProps = {
16
+ /** The full hash string to display and copy (e.g., a transaction hash or wallet address). */
25
17
  hash: string;
18
+ /** An optional label to display before the hash (e.g., "From", "Tx Hash"). */
19
+ label?: string;
20
+ /** An optional URL to a block explorer. If provided, the hash becomes a clickable link. */
26
21
  explorerUrl?: string;
22
+ /** The visual style of the component. 'default' is larger, 'compact' is smaller. */
27
23
  variant?: 'default' | 'compact';
24
+ /** Additional CSS classes to apply to the container element for custom styling. */
28
25
  className?: string;
29
- }): react_jsx_runtime.JSX.Element;
26
+ };
27
+ /**
28
+ * A component to display a hash string with an optional label, a link to a block explorer,
29
+ * and a copy-to-clipboard button. It automatically ellipsizes the hash for readability.
30
+ */
31
+ declare function HashLink({ label, hash, explorerUrl, variant, className }: HashLinkProps): react_jsx_runtime.JSX.Element;
30
32
 
31
33
  /**
32
34
  * @file This file contains the `StatusAwareText` component, which displays different text based on a transaction's status.
33
35
  */
34
36
 
35
37
  type StatusAwareTextProps = {
36
- /** The current status of the transaction. */
38
+ /** The current status of the transaction, used to select the correct text and color. */
37
39
  txStatus?: TransactionStatus;
38
40
  /**
39
- * The source for the text. Can be a single string, or an array of strings
40
- * corresponding to different statuses in the format: `[pending, success, error, replaced]`.
41
+ * The source for the text. Can be a single string for static text, or an array of strings
42
+ * for dynamic text based on status. The array format must be: `[pending, success, error, replaced]`.
41
43
  */
42
- source?: string | string[];
43
- /** A fallback string to display if `source` is not provided. */
44
+ source?: string | readonly string[];
45
+ /** A fallback string to display if `source` is not provided or is invalid. */
44
46
  fallback?: string;
45
- /** The visual variant, determines the base text style ('title' or 'description'). */
47
+ /** The visual variant, which determines the base text style ('title' or 'description'). */
46
48
  variant: 'title' | 'description';
47
- /** Optional additional CSS classes. */
48
- className?: string;
49
- /** If true, applies a status-specific color to the text. */
49
+ /** If true, applies a status-specific color to the text. Defaults to false. */
50
50
  applyColor?: boolean;
51
+ /** Optional additional CSS classes for custom styling. */
52
+ className?: string;
51
53
  };
52
54
  /**
53
55
  * A component that renders text conditionally based on a transaction's status.
54
- * It's designed to work with the `title` and `description` fields of a transaction,
55
- * which can be a single string or a status-dependent array of strings.
56
- *
57
- * @param {StatusAwareTextProps} props - The component props.
58
- * @returns {ReactNode} The rendered text element or null.
56
+ * It's designed to work with the `title` and `description` fields of a transaction object.
59
57
  */
60
58
  declare function StatusAwareText({ txStatus, source, fallback, variant, className, applyColor, }: StatusAwareTextProps): ReactNode;
61
59
 
@@ -186,13 +184,22 @@ type TuwaLabels = {
186
184
  };
187
185
 
188
186
  /**
189
- * @file This file contains the main `NovaProvider` component, the primary entry point for the UI library.
187
+ * Defines the props for the NovaProvider component.
188
+ * @template TR - The type of the tracker identifier.
189
+ * @template T - The transaction type.
190
+ * @template A - The type of the key returned by an action function.
190
191
  */
191
-
192
192
  type NovaProviderProps<TR, T extends Transaction<TR>, A> = {
193
+ /** An array of configured adapters for different blockchain ecosystems. */
193
194
  adapters: TxAdapter<TR, T, A>[];
195
+ /** The address of the currently connected wallet. */
194
196
  connectedWalletAddress?: string;
197
+ /** The adapter type of the currently connected wallet. */
195
198
  connectedAdapterType?: TransactionAdapter;
199
+ /** The global transaction pool from the Pulsar store. */
200
+ transactionsPool: TransactionPool<TR, T>;
201
+ /** A registry of retryable actions, keyed by `actionKey`. */
202
+ actions?: TxActions;
196
203
  /** A partial object of labels to override the default English text. */
197
204
  labels?: Partial<TuwaLabels>;
198
205
  /** An object to enable or disable major UI features. All are enabled by default. */
@@ -207,22 +214,21 @@ type NovaProviderProps<TR, T extends Transaction<TR>, A> = {
207
214
  walletInfoModal?: WalletInfoModalCustomization<TR, T, A>;
208
215
  trackingTxModal?: TrackingTxModalCustomization<TR, T, A>;
209
216
  };
210
- /** A registry of retryable actions, keyed by `actionKey`. */
211
- actions?: TxActions;
212
- /** The global transaction pool from the tracking store. */
213
- transactionsPool: TransactionPool<TR, T>;
214
- } & Pick<IInitializeTxTrackingStore<TR, T>, 'closeTxTrackedModal'> & Partial<Pick<ITxTrackingStore<TR, T, A>, 'handleTransaction' | 'initialTx'>> & ToastContainerProps;
217
+ } & Pick<ITxTrackingStore<TR, T, A>, 'closeTxTrackedModal' | 'handleTransaction' | 'initialTx'> & ToastContainerProps;
215
218
  /**
216
- * The main provider for the Nova UI ecosystem.
217
- * It orchestrates toasts, modals, and the i18n context for the entire application.
218
- *
219
- * @param {NovaProviderProps<TR, T>} props - The component props.
220
- * @returns {JSX.Element} The rendered provider.
219
+ * The main component for the Nova UI ecosystem. It renders and orchestrates all
220
+ * UI elements like toasts and modals, and provides the i18n context.
221
+ * This component does not wrap any children.
221
222
  */
222
- declare function NovaProvider<TR, T extends Transaction<TR>, A>({ adapters, connectedWalletAddress, connectedAdapterType, labels, features, customization, closeTxTrackedModal, actions, handleTransaction, initialTx, transactionsPool, ...toastProps }: NovaProviderProps<TR, T, A>): JSX.Element;
223
+ declare function NovaProvider<TR, T extends Transaction<TR>, A>({ adapters, connectedWalletAddress, connectedAdapterType, transactionsPool, initialTx, handleTransaction, closeTxTrackedModal, actions, labels, features, customization, ...toastProps }: NovaProviderProps<TR, T, A>): react_jsx_runtime.JSX.Element;
223
224
 
224
- type CustomHashLinkProps = Parameters<typeof HashLink>[0];
225
- interface ToastTransactionKeyProps<TR, T extends Transaction<TR>, A> extends Pick<NovaProviderProps<TR, T, A>, 'adapters' | 'transactionsPool'> {
225
+ /**
226
+ * Defines the props for the TransactionKey component.
227
+ * @template TR - The type of the tracker identifier.
228
+ * @template T - The transaction type.
229
+ * @template A - The type of the key returned by an action function.
230
+ */
231
+ type TransactionKeyProps<TR, T extends Transaction<TR>, A> = Pick<NovaProviderProps<TR, T, A>, 'adapters' | 'transactionsPool'> & {
226
232
  /** The transaction object to display identifiers for. */
227
233
  tx: T;
228
234
  /** The visual variant, which applies different container styles. */
@@ -233,21 +239,19 @@ interface ToastTransactionKeyProps<TR, T extends Transaction<TR>, A> extends Pic
233
239
  * An optional render prop to allow for complete customization of how the hash link is rendered.
234
240
  * If not provided, the default `HashLink` component will be used.
235
241
  */
236
- renderHashLink?: (props: CustomHashLinkProps) => ReactNode;
237
- }
242
+ renderHashLink?: (props: HashLinkProps) => ReactNode;
243
+ };
238
244
  /**
239
245
  * A component that intelligently displays the relevant keys and hashes for a transaction.
240
- * It handles different tracker types (EVM, Gelato, Safe) and statuses (e.g., replaced transactions).
241
- *
242
- * @param {ToastTransactionKeyProps<TR, T>} props - The component props.
243
- * @returns {JSX.Element} The rendered component.
246
+ * It leverages the adapter system to show chain-specific identifiers and explorer links.
244
247
  */
245
- declare function TransactionKey<TR, T extends Transaction<TR>, A>({ tx, adapters, transactionsPool, variant, className, renderHashLink, }: ToastTransactionKeyProps<TR, T, A>): react_jsx_runtime.JSX.Element | null;
248
+ declare function TransactionKey<TR, T extends Transaction<TR>, A>({ tx, adapters, transactionsPool, variant, className, renderHashLink, }: TransactionKeyProps<TR, T, A>): react_jsx_runtime.JSX.Element | null;
246
249
 
247
250
  /**
248
- * @file This file contains the `TransactionStatusBadge` component for visually displaying a transaction's status.
251
+ * Defines the props for the TransactionStatusBadge component.
252
+ * @template TR - The type of the tracker identifier.
253
+ * @template T - The transaction type.
249
254
  */
250
-
251
255
  type TransactionStatusBadgeProps<TR, T extends Transaction<TR>> = {
252
256
  /** The transaction object whose status will be displayed. */
253
257
  tx: T;
@@ -257,73 +261,47 @@ type TransactionStatusBadgeProps<TR, T extends Transaction<TR>> = {
257
261
  /**
258
262
  * A component that displays a transaction's status as a styled badge
259
263
  * with a corresponding icon, color, and label.
260
- *
261
- * @param {TransactionStatusBadgeProps<TR, T>} props - The component props.
262
- * @returns {JSX.Element} The rendered status badge.
263
264
  */
264
- declare function TransactionStatusBadge<TR, T extends Transaction<TR>>({ tx, className, }: TransactionStatusBadgeProps<TR, T>): JSX.Element;
265
+ declare function TransactionStatusBadge<TR, T extends Transaction<TR>>({ tx, className, }: TransactionStatusBadgeProps<TR, T>): react_jsx_runtime.JSX.Element;
265
266
 
266
267
  /**
267
268
  * @file This file contains the `ToastTransaction` component, which serves as the main body for a transaction notification toast.
268
269
  */
269
270
 
270
- type CustomStatusAwareTextProps$1 = Parameters<typeof StatusAwareText>[0];
271
- type CustomTransactionKeyProps$1<TR, T extends Transaction<TR>, A> = Parameters<typeof TransactionKey<TR, T, A>>[0];
272
- type CustomStatusBadgeProps$1<TR, T extends Transaction<TR>> = Parameters<typeof TransactionStatusBadge<TR, T>>[0];
273
- /** Props provided to custom action buttons like 'Wallet Info', 'Speed Up', or 'Cancel'. */
274
271
  type CustomActionButtonProps = {
275
272
  onClick: () => void;
276
273
  children: ReactNode;
277
274
  };
278
- /**
279
- * Defines the structure for the `customization` prop, allowing users to override
280
- * default sub-components with their own implementations.
281
- */
282
275
  type ToastTransactionCustomization<TR, T extends Transaction<TR>, A> = {
283
276
  components?: {
284
- /** Override the default title/description component. */
285
- statusAwareText?: (props: CustomStatusAwareTextProps$1) => ReactNode;
286
- /** Override the default component for displaying transaction keys/hashes. */
287
- transactionKey?: (props: CustomTransactionKeyProps$1<TR, T, A>) => ReactNode;
288
- /** Override the default status badge component. */
289
- statusBadge?: (props: CustomStatusBadgeProps$1<TR, T>) => ReactNode;
290
- /** Override the default "Open wallet info" button. */
291
- walletInfoButton?: (props: CustomActionButtonProps) => ReactNode;
292
- /** Override the default "Speed Up" button. */
293
- speedUpButton?: (props: CustomActionButtonProps) => ReactNode;
294
- /** Override the default "Cancel" button. */
295
- cancelButton?: (props: CustomActionButtonProps) => ReactNode;
277
+ StatusAwareText?: ComponentType<StatusAwareTextProps>;
278
+ TransactionKey?: ComponentType<TransactionKeyProps<TR, T, A>>;
279
+ StatusBadge?: ComponentType<TransactionStatusBadgeProps<TR, T>>;
280
+ WalletInfoButton?: ComponentType<CustomActionButtonProps>;
281
+ SpeedUpButton?: ComponentType<CustomActionButtonProps>;
282
+ CancelButton?: ComponentType<CustomActionButtonProps>;
296
283
  };
297
284
  };
298
285
  type ToastTransactionProps<TR, T extends Transaction<TR>, A> = {
299
- /** The transaction object to display in the toast. */
300
286
  tx: T;
301
- /** A function to open the main wallet info modal. If not provided, the button will not be rendered. */
302
- openWalletInfoModal?: (value: boolean) => void;
303
- /** An optional custom icon to display instead of the default chain icon. */
287
+ openWalletInfoModal?: () => void;
304
288
  icon?: ReactNode;
305
- /** Optional additional CSS classes for the toast container. */
306
289
  className?: string;
307
- /** An object to customize and override the default internal components. */
308
290
  customization?: ToastTransactionCustomization<TR, T, A>;
309
- /** Props from `react-toastify` to control the toast itself. */
310
291
  closeToast?: ToastContentProps['closeToast'];
311
292
  toastProps?: ToastContainerProps;
312
293
  } & Pick<NovaProviderProps<TR, T, A>, 'transactionsPool' | 'adapters' | 'connectedWalletAddress'>;
313
294
  /**
314
295
  * A composite component that renders the content for a transaction toast notification.
315
- * It is highly customizable and includes actions for speeding up or canceling transactions
316
- * when they are in a pending state.
317
- *
318
- * @template TR The generic type for the transaction tracker registry.
319
- * @template T The generic type for the transaction object.
320
- * @param {ToastTransactionProps<TR, T>} props The component props.
321
- * @returns {JSX.Element} The rendered toast body.
296
+ * It is highly customizable and leverages the adapter to show relevant actions like "Speed Up".
322
297
  */
323
298
  declare function ToastTransaction<TR, T extends Transaction<TR>, A>({ openWalletInfoModal, tx, transactionsPool, icon, className, customization, connectedWalletAddress, adapters, }: ToastTransactionProps<TR, T, A>): JSX.Element;
324
299
 
300
+ /**
301
+ * @file This file contains the `TxErrorBlock` component for displaying transaction error messages.
302
+ */
325
303
  type TxErrorBlockProps = {
326
- /** The error message string to display. If undefined, the component renders nothing. */
304
+ /** The error message string to display. If undefined or empty, the component renders nothing. */
327
305
  error?: string;
328
306
  /** Optional additional CSS classes for the container. */
329
307
  className?: string;
@@ -332,53 +310,30 @@ type TxErrorBlockProps = {
332
310
  * A component that displays a formatted block for a transaction error message.
333
311
  * It includes a title, an icon, the error message in a scrollable area,
334
312
  * and a button to copy the message to the clipboard.
335
- *
336
- * @param {TxErrorBlockProps} props - The component props.
337
- * @returns {JSX.Element | null} The rendered error block, or null if no error is provided.
338
- */
339
- declare function TxErrorBlock({ error, className }: TxErrorBlockProps): JSX.Element | null;
340
-
341
- /**
342
- * @file This file contains the `TxInfoBlock` component, which displays key details about a transaction.
343
313
  */
314
+ declare function TxErrorBlock({ error, className }: TxErrorBlockProps): react_jsx_runtime.JSX.Element | null;
344
315
 
345
316
  type CustomInfoRowProps = {
346
317
  label: ReactNode;
347
318
  value: ReactNode;
348
319
  };
349
- /**
350
- * Defines the customization options for the `TxInfoBlock` component.
351
- */
352
320
  type TxInfoBlockCustomization<TR, T extends Transaction<TR>, A> = {
353
321
  components?: {
354
- /** A render prop to replace the default label-value row component. */
355
- infoRow?: (props: CustomInfoRowProps) => ReactNode;
356
- /**
357
- * A render prop to customize the rendering of the transaction keys/hashes.
358
- * This is passed down to the underlying `TransactionKey` component.
359
- */
360
- transactionKey?: ToastTransactionKeyProps<TR, T, A>['renderHashLink'];
322
+ InfoRow?: ComponentType<CustomInfoRowProps>;
323
+ transactionKey?: TransactionKeyProps<TR, T, A>['renderHashLink'];
361
324
  };
362
325
  };
363
326
  type TxInfoBlockProps<TR, T extends Transaction<TR>, A> = {
364
- tx: T & {
365
- desiredChainID?: number;
366
- };
327
+ /** The transaction object to display, which can be a full transaction or an initial one. */
328
+ tx: T | InitialTransaction;
367
329
  className?: string;
368
330
  customization?: TxInfoBlockCustomization<TR, T, A>;
369
331
  } & Pick<NovaProviderProps<TR, T, A>, 'adapters' | 'transactionsPool'>;
370
332
  /**
371
333
  * A component that displays a block of essential transaction details,
372
334
  * such as network, start time, and relevant hashes/keys.
373
- *
374
- * @param {object} props - The component props.
375
- * @returns {JSX.Element} The rendered info block.
376
- */
377
- declare function TxInfoBlock<TR, T extends Transaction<TR>, A>({ tx, adapters, transactionsPool, className, customization, }: TxInfoBlockProps<TR, T, A>): JSX.Element;
378
-
379
- /**
380
- * @file This file contains the `TxProgressIndicator` component, a visual step-by-step progress bar for transactions.
381
335
  */
336
+ declare function TxInfoBlock<TR, T extends Transaction<TR>, A>({ tx, adapters, transactionsPool, className, customization, }: TxInfoBlockProps<TR, T, A>): react_jsx_runtime.JSX.Element;
382
337
 
383
338
  type StepStatus = 'active' | 'completed' | 'error' | 'inactive' | 'replaced';
384
339
  type StepProps = {
@@ -386,7 +341,6 @@ type StepProps = {
386
341
  label: string;
387
342
  isFirst?: boolean;
388
343
  isLast?: boolean;
389
- className?: string;
390
344
  };
391
345
  interface TxProgressIndicatorProps {
392
346
  isProcessing?: boolean;
@@ -394,21 +348,16 @@ interface TxProgressIndicatorProps {
394
348
  isFailed?: boolean;
395
349
  isReplaced?: boolean;
396
350
  className?: string;
397
- /** A custom component to use instead of the default `Step`. */
398
351
  StepComponent?: ComponentType<StepProps>;
399
352
  }
400
353
  /**
401
354
  * A 3-step progress indicator that visually represents the lifecycle of a transaction.
402
- *
403
- * @param {TxProgressIndicatorProps} props - The component props.
404
- * @returns {JSX.Element} The rendered progress indicator.
405
355
  */
406
- declare function TxProgressIndicator({ isProcessing, isSucceed, isFailed, isReplaced, className, StepComponent, }: TxProgressIndicatorProps): JSX.Element;
356
+ declare function TxProgressIndicator({ isProcessing, isSucceed, isFailed, isReplaced, className, StepComponent, }: TxProgressIndicatorProps): react_jsx_runtime.JSX.Element;
407
357
 
408
358
  /**
409
359
  * @file This file contains the `TxStatusVisual` component, which displays a large icon representing the transaction's status.
410
360
  */
411
-
412
361
  type TxStatusVisualProps = {
413
362
  /** True if the transaction is currently being processed (e.g., in the mempool). */
414
363
  isProcessing?: boolean;
@@ -422,64 +371,46 @@ type TxStatusVisualProps = {
422
371
  /**
423
372
  * A component that renders a large, animated icon to visually represent the
424
373
  * current state of a transaction within the tracking modal.
425
- *
426
- * @param {TxStatusVisualProps} props - The component props.
427
- * @returns {JSX.Element} The rendered visual status indicator.
428
374
  */
429
- declare function TxStatusVisual({ isProcessing, isSucceed, isFailed, isReplaced }: TxStatusVisualProps): JSX.Element;
375
+ declare function TxStatusVisual({ isProcessing, isSucceed, isFailed, isReplaced }: TxStatusVisualProps): react_jsx_runtime.JSX.Element;
430
376
 
431
- /** Props provided to a custom header component. */
432
377
  type CustomHeaderProps$1 = {
433
- onClose: (txKey?: string) => void;
378
+ onClose: () => void;
379
+ title: ReactNode;
434
380
  };
435
- /** Props provided to a custom footer component. */
436
381
  type CustomFooterProps = {
437
- onClose: (txKey?: string) => void;
382
+ onClose: () => void;
438
383
  onOpenWalletInfo: () => void;
439
384
  onRetry?: () => void;
440
385
  onSpeedUp?: () => void;
441
386
  onCancel?: () => void;
442
387
  isProcessing?: boolean;
388
+ isFailed?: boolean;
389
+ canReplace?: boolean;
443
390
  };
444
- /**
445
- * Defines the customization options for the TrackingTxModal.
446
- * Allows overriding modal behavior, animations, and individual UI components.
447
- */
448
391
  type TrackingTxModalCustomization<TR, T extends Transaction<TR>, A> = {
449
- /** Custom props to pass to the underlying Radix UI `Dialog.Content` component. */
450
392
  modalProps?: Partial<ComponentPropsWithoutRef<typeof Dialog.Content>>;
451
- /** Custom Framer Motion animation properties for the modal's entrance and exit. */
452
393
  motionProps?: MotionProps;
453
- /** A record of custom components to override parts of the modal's UI. */
454
394
  components?: {
455
- header?: (props: CustomHeaderProps$1) => ReactNode;
456
- footer?: (props: CustomFooterProps) => ReactNode;
457
- statusVisual?: (props: TxStatusVisualProps) => ReactNode;
458
- progressIndicator?: (props: TxProgressIndicatorProps) => ReactNode;
459
- infoBlock?: (props: TxInfoBlockProps<TR, T, A>) => ReactNode;
460
- errorBlock?: (props: TxErrorBlockProps) => ReactNode;
395
+ Header?: ComponentType<CustomHeaderProps$1>;
396
+ Footer?: ComponentType<CustomFooterProps>;
397
+ StatusVisual?: ComponentType<TxStatusVisualProps>;
398
+ ProgressIndicator?: ComponentType<TxProgressIndicatorProps>;
399
+ InfoBlock?: ComponentType<TxInfoBlockProps<TR, T, A>>;
400
+ ErrorBlock?: ComponentType<TxErrorBlockProps>;
461
401
  };
462
402
  };
463
- interface TrackingTxModalProps<TR, T extends Transaction<TR>, A> extends Pick<NovaProviderProps<TR, T, A>, 'handleTransaction' | 'initialTx' | 'actions' | 'transactionsPool' | 'adapters' | 'connectedAdapterType'> {
464
- /** A function to close the modal. */
403
+ type TrackingTxModalProps<TR, T extends Transaction<TR>, A> = Pick<NovaProviderProps<TR, T, A>, 'handleTransaction' | 'initialTx' | 'actions' | 'transactionsPool' | 'adapters'> & {
465
404
  onClose: (txKey?: string) => void;
466
- /** A function to open the main wallet info modal. */
467
405
  onOpenWalletInfo: () => void;
468
- /** Optional additional CSS classes for the modal's container. */
469
406
  className?: string;
470
- /** An object containing all customization options for the modal. */
471
407
  customization?: TrackingTxModalCustomization<TR, T, A>;
472
- }
408
+ };
473
409
  /**
474
410
  * A detailed modal that displays the real-time status and lifecycle of a transaction.
475
411
  * It opens automatically for transactions initiated with `withTrackedModal: true`.
476
- *
477
- * @template TR - The generic type for the transaction tracker registry.
478
- * @template T - The generic type for the transaction object.
479
- * @param {TrackingTxModalProps<TR, T>} props - The component props.
480
- * @returns {JSX.Element} The rendered tracking modal.
481
412
  */
482
- declare function TrackingTxModal<TR, T extends Transaction<TR>, A>({ adapters, onClose, onOpenWalletInfo, className, customization, transactionsPool, actions, handleTransaction, initialTx, connectedAdapterType, }: TrackingTxModalProps<TR, T, A>): JSX.Element;
413
+ declare function TrackingTxModal<TR, T extends Transaction<TR>, A>({ adapters, onClose, onOpenWalletInfo, className, customization, transactionsPool, actions, handleTransaction, initialTx, }: TrackingTxModalProps<TR, T, A>): react_jsx_runtime.JSX.Element | null;
483
414
 
484
415
  /**
485
416
  * @file This file contains the `TransactionHistoryItem` component, which renders a single transaction
@@ -489,141 +420,160 @@ declare function TrackingTxModal<TR, T extends Transaction<TR>, A>({ adapters, o
489
420
  type CustomIconProps = {
490
421
  chainId: number;
491
422
  };
492
- type CustomStatusAwareTextProps = Parameters<typeof StatusAwareText>[0];
493
423
  type CustomTimestampProps = {
494
424
  timestamp?: number;
495
425
  };
496
- type CustomStatusBadgeProps<TR, T extends Transaction<TR>> = Parameters<typeof TransactionStatusBadge<TR, T>>[0];
497
- type CustomTransactionKeyProps<TR, T extends Transaction<TR>, A> = Parameters<typeof TransactionKey<TR, T, A>>[0];
498
426
  /**
499
427
  * Defines the structure for the `customization` prop, allowing users to override
500
428
  * default sub-components with their own implementations for a history item.
501
429
  */
502
430
  type TransactionHistoryItemCustomization<TR, T extends Transaction<TR>, A> = {
503
431
  components?: {
504
- /** Override the default chain icon. */
505
- icon?: (props: CustomIconProps) => ReactNode;
506
- /** Override the default title component. */
507
- title?: (props: CustomStatusAwareTextProps) => ReactNode;
508
- /** Override the default description component. */
509
- description?: (props: CustomStatusAwareTextProps) => ReactNode;
510
- /** Override the default timestamp component. */
511
- timestamp?: (props: CustomTimestampProps) => ReactNode;
512
- /** Override the default status badge component. */
513
- statusBadge?: (props: CustomStatusBadgeProps<TR, T>) => ReactNode;
514
- /** Override the default component for displaying transaction keys/hashes. */
515
- transactionKey?: (props: CustomTransactionKeyProps<TR, T, A>) => ReactNode;
432
+ Icon?: ComponentType<CustomIconProps>;
433
+ Title?: ComponentType<StatusAwareTextProps>;
434
+ Description?: ComponentType<StatusAwareTextProps>;
435
+ Timestamp?: ComponentType<CustomTimestampProps>;
436
+ StatusBadge?: ComponentType<TransactionStatusBadgeProps<TR, T>>;
437
+ TransactionKey?: ComponentType<TransactionKeyProps<TR, T, A>>;
516
438
  };
517
439
  };
518
440
  type TransactionHistoryItemProps<TR, T extends Transaction<TR>, A> = {
519
441
  /** The transaction object to display. */
520
442
  tx: T;
521
- /** The entire pool of transactions. */
522
- transactionsPool: TransactionPool<TR, T>;
523
- /** Optional additional CSS classes for the container. */
524
- className?: string;
525
443
  /** An object to customize and override the default internal components. */
526
444
  customization?: TransactionHistoryItemCustomization<TR, T, A>;
527
- } & Pick<NovaProviderProps<TR, T, A>, 'adapters'>;
445
+ /** Optional additional CSS classes for the container. */
446
+ className?: string;
447
+ } & Pick<NovaProviderProps<TR, T, A>, 'adapters' | 'transactionsPool'>;
528
448
  /**
529
449
  * A component that renders a single row in the transaction history list.
530
- * It is highly customizable via the `customization` prop.
531
- *
532
- * @param {TransactionHistoryItemProps<TR, T>} props - The component props.
533
- * @returns {JSX.Element} The rendered history item.
450
+ * It is highly customizable via the `customization` prop, allowing developers
451
+ * to override any of its internal parts with their own components.
534
452
  */
535
453
  declare function TransactionHistoryItem<TR, T extends Transaction<TR>, A>({ tx, adapters, transactionsPool, className, customization, }: TransactionHistoryItemProps<TR, T, A>): JSX.Element;
536
454
 
537
- /**
538
- * @file This file contains the main `WalletInfoModal` component, which serves as the primary UI for viewing wallet details and transaction history.
539
- */
540
-
541
- type CustomHeaderProps = {
542
- closeModal: () => void;
543
- };
544
- type CustomWalletInfoProps<TR, T extends Transaction<TR>, A> = WalletInfoModalProps<TR, T, A>;
545
- type CustomHistoryProps<TR, T extends Transaction<TR>, A> = WalletInfoModalProps<TR, T, A> & {
546
- customization?: TransactionsHistoryCustomization<TR, T, A>;
455
+ type CustomPlaceholderProps = {
456
+ title: string;
457
+ message: string;
547
458
  };
548
459
  /**
549
- * Defines the customization options for the WalletInfoModal.
550
- * Allows customization of modal behavior, animations, and individual UI components.
460
+ * Defines the customization options for the TransactionsHistory component.
551
461
  */
552
- type WalletInfoModalCustomization<TR, T extends Transaction<TR>, A> = {
553
- /** Custom props to pass to the underlying Radix UI Dialog.Content component */
554
- modalProps?: Partial<ComponentPropsWithoutRef<typeof Dialog.Content>>;
555
- /** Custom Framer Motion animation properties */
556
- motionProps?: MotionProps;
462
+ type TransactionsHistoryCustomization<TR, T extends Transaction<TR>, A> = {
557
463
  classNames?: {
558
- /** CSS classes for the main content wrapper div. */
559
- contentWrapper?: string;
464
+ listWrapper?: string;
560
465
  };
561
- /** Custom component overrides for different parts of the modal */
562
466
  components?: {
563
- /** A render prop to replace the entire modal header. */
564
- header?: (props: CustomHeaderProps) => ReactNode;
565
- /** A render prop to replace the `WalletHeader` component. */
566
- walletInfo?: (props: CustomWalletInfoProps<TR, T, A>) => ReactNode;
567
- /** A render prop to replace the `TransactionsHistory` component. */
568
- history?: (props: CustomHistoryProps<TR, T, A>) => ReactNode;
467
+ Placeholder?: ComponentType<CustomPlaceholderProps>;
468
+ HistoryItem?: ComponentType<TransactionHistoryItemProps<TR, T, A>>;
569
469
  };
570
470
  };
571
471
  /**
572
- * Defines the core props for the WalletInfoModal and its children.
472
+ * Defines the props for the TransactionsHistory component.
473
+ * @template TR - The type of the tracker identifier.
474
+ * @template T - The transaction type.
475
+ * @template A - The type of the key returned by an action function.
573
476
  */
574
- interface WalletInfoModalProps<TR, T extends Transaction<TR>, A> extends Pick<NovaProviderProps<TR, T, A>, 'adapters' | 'connectedAdapterType' | 'connectedWalletAddress' | 'transactionsPool'> {
575
- isOpen?: boolean;
576
- setIsOpen?: (value: boolean) => void;
577
- customization?: WalletInfoModalCustomization<TR, T, A>;
578
- }
477
+ type TransactionsHistoryProps<TR, T extends Transaction<TR>, A> = Pick<NovaProviderProps<TR, T, A>, 'adapters' | 'transactionsPool' | 'connectedWalletAddress'> & {
478
+ className?: string;
479
+ customization?: TransactionsHistoryCustomization<TR, T, A>;
480
+ };
579
481
  /**
580
- * The main modal component for displaying wallet information and transaction history.
581
- * It is highly customizable through the `customization` prop and supports full Radix UI Dialog customization.
482
+ * A component that displays a scrollable list of transactions for the connected wallet.
483
+ * It handles states for when a wallet is not connected or when the history is empty.
484
+ */
485
+ declare function TransactionsHistory<TR, T extends Transaction<TR>, A>({ adapters, connectedWalletAddress, transactionsPool, className, customization, }: TransactionsHistoryProps<TR, T, A>): react_jsx_runtime.JSX.Element;
486
+
487
+ /**
488
+ * @file This file contains the `WalletAddressDisplay` component, a UI element for showing a wallet address.
489
+ */
490
+ type WalletAddressDisplayProps = {
491
+ /** The full wallet address to display. */
492
+ address: string;
493
+ /** The base URL for the block explorer. If not provided, the explorer link will not be rendered. */
494
+ explorerUrl?: string;
495
+ /** Optional additional CSS classes for the container. */
496
+ className?: string;
497
+ };
498
+ /**
499
+ * A component that renders a wallet address in a styled "pill" format,
500
+ * including a copy button and an optional link to the appropriate block explorer.
501
+ */
502
+ declare function WalletAddressDisplay({ address, explorerUrl, className }: WalletAddressDisplayProps): react_jsx_runtime.JSX.Element;
503
+
504
+ /**
505
+ * @file This file contains the `WalletAvatar` component for displaying a user's avatar.
506
+ */
507
+ type WalletAvatarProps = {
508
+ /** The user's wallet address, used for the blockie fallback and background color. */
509
+ address: string;
510
+ /** An optional URL for the user's ENS avatar image. */
511
+ ensAvatar?: string | null;
512
+ /** Optional additional CSS classes for the container. */
513
+ className?: string;
514
+ };
515
+ /**
516
+ * A component that displays a user's avatar.
582
517
  *
583
- * @param {WalletInfoModalProps<TR, T> & { ... }} props - The component props.
584
- * @returns {JSX.Element | null} The rendered modal or null if not open.
518
+ * It prioritizes showing the provided `ensAvatar`. If unavailable or if the image fails to load,
519
+ * it falls back to a procedurally generated "blockie" based on the user's address.
520
+ * It also generates a unique background color from the address as a placeholder.
585
521
  */
586
- declare function WalletInfoModal<TR, T extends Transaction<TR>, A>({ isOpen, setIsOpen, customization, ...props }: WalletInfoModalProps<TR, T, A>): JSX.Element | null;
522
+ declare function WalletAvatar({ address, ensAvatar, className }: WalletAvatarProps): react_jsx_runtime.JSX.Element;
587
523
 
524
+ type NameRenderProps = {
525
+ ensName?: string;
526
+ isLoading: boolean;
527
+ address: string;
528
+ };
588
529
  /**
589
- * @file This file contains the `TransactionsHistory` component, which displays a list of past and pending transactions.
530
+ * Defines the props for the `WalletHeader` component, including extensive customization options.
590
531
  */
532
+ type WalletHeaderProps<TR, T extends Transaction<TR>, A> = Pick<NovaProviderProps<TR, T, A>, 'adapters' | 'connectedAdapterType'> & {
533
+ walletAddress?: string;
534
+ explorerUrl?: string;
535
+ className?: string;
536
+ renderAvatar?: (props: WalletAvatarProps) => ReactNode;
537
+ renderName?: (props: NameRenderProps) => ReactNode;
538
+ renderAddressDisplay?: (props: WalletAddressDisplayProps) => ReactNode;
539
+ renderNoWalletContent?: () => ReactNode;
540
+ };
541
+ /**
542
+ * A component that displays the header for the wallet modal, including the user's avatar,
543
+ * name (if available), and address. It leverages the active adapter to fetch name service data.
544
+ */
545
+ declare function WalletHeader<TR, T extends Transaction<TR>, A>({ walletAddress, adapters, connectedAdapterType, className, renderAvatar, renderName, renderAddressDisplay, renderNoWalletContent, explorerUrl, }: WalletHeaderProps<TR, T, A>): react_jsx_runtime.JSX.Element;
591
546
 
592
- type CustomPlaceholderProps = {
593
- title: string;
594
- message: string;
547
+ type CustomHeaderProps = {
548
+ closeModal: () => void;
595
549
  };
596
550
  /**
597
- * Defines the customization options for the TransactionsHistory component.
551
+ * Defines the customization options for the WalletInfoModal.
598
552
  */
599
- type TransactionsHistoryCustomization<TR, T extends Transaction<TR>, A> = {
553
+ type WalletInfoModalCustomization<TR, T extends Transaction<TR>, A> = {
554
+ modalProps?: Partial<ComponentPropsWithoutRef<typeof Dialog.Content>>;
555
+ motionProps?: MotionProps;
600
556
  classNames?: {
601
- /** CSS classes for the list's wrapper `div`. */
602
- listWrapper?: string;
557
+ contentWrapper?: string;
603
558
  };
604
559
  components?: {
605
- /**
606
- * A render prop to replace the default placeholder component
607
- * (e.g., for "Connect Wallet" or "No Transactions").
608
- */
609
- placeholder?: (props: CustomPlaceholderProps) => ReactNode;
610
- /**
611
- * A custom component to use instead of the default `TransactionHistoryItem`.
612
- * This should be a component type, not a render function.
613
- */
614
- HistoryItem?: ComponentType<TransactionHistoryItemProps<TR, T, A>>;
560
+ Header?: ComponentType<CustomHeaderProps>;
561
+ WalletInfo?: ComponentType<WalletHeaderProps<TR, T, A>>;
562
+ History?: ComponentType<TransactionsHistoryProps<TR, T, A>>;
615
563
  };
616
564
  };
617
565
  /**
618
- * A component that displays a scrollable list of transactions for the connected wallet.
619
- * It handles states for when a wallet is not connected or when there is no history.
620
- *
621
- * @param {WalletInfoModalProps<TR, T> & { customization?: TransactionsHistoryCustomization<TR, T> }} props
622
- * @returns {JSX.Element} The rendered transaction history section.
566
+ * Defines the core props for the WalletInfoModal.
623
567
  */
624
- declare function TransactionsHistory<TR, T extends Transaction<TR>, A>({ adapters, connectedWalletAddress, transactionsPool, className, customization, }: WalletInfoModalProps<TR, T, A> & Pick<NovaProviderProps<TR, T, A>, 'adapters'> & {
625
- className?: string;
626
- customization?: TransactionsHistoryCustomization<TR, T, A>;
627
- }): JSX.Element;
568
+ type WalletInfoModalProps<TR, T extends Transaction<TR>, A> = Pick<NovaProviderProps<TR, T, A>, 'adapters' | 'connectedAdapterType' | 'connectedWalletAddress' | 'transactionsPool'> & {
569
+ isOpen?: boolean;
570
+ setIsOpen: (value: boolean) => void;
571
+ customization?: WalletInfoModalCustomization<TR, T, A>;
572
+ };
573
+ /**
574
+ * The main modal component for displaying wallet information and transaction history.
575
+ * It is highly customizable and built with accessibility in mind using Radix UI.
576
+ */
577
+ declare function WalletInfoModal<TR, T extends Transaction<TR>, A>({ isOpen, setIsOpen, customization, adapters, connectedAdapterType, connectedWalletAddress, transactionsPool, }: WalletInfoModalProps<TR, T, A>): react_jsx_runtime.JSX.Element;
628
578
 
629
- export { WalletInfoModal as A, NovaProvider as B, HashLink as H, type NovaProviderProps as N, StatusAwareText as S, type TuwaLabels as T, type WalletInfoModalCustomization as W, type ToastTransactionCustomization as a, type ToastTransactionProps as b, ToastTransaction as c, type TrackingTxModalCustomization as d, type TrackingTxModalProps as e, TrackingTxModal as f, type TxErrorBlockProps as g, TxErrorBlock as h, type TxInfoBlockCustomization as i, type TxInfoBlockProps as j, TxInfoBlock as k, type StepStatus as l, type StepProps as m, type TxProgressIndicatorProps as n, TxProgressIndicator as o, type TxStatusVisualProps as p, TxStatusVisual as q, type TransactionHistoryItemCustomization as r, type TransactionHistoryItemProps as s, TransactionHistoryItem as t, type ToastTransactionKeyProps as u, TransactionKey as v, type TransactionsHistoryCustomization as w, TransactionsHistory as x, TransactionStatusBadge as y, type WalletInfoModalProps as z };
579
+ export { TransactionsHistory as A, type TransactionStatusBadgeProps as B, TransactionStatusBadge as C, WalletAddressDisplay as D, type WalletAvatarProps as E, WalletAvatar as F, type WalletHeaderProps as G, type HashLinkProps as H, WalletHeader as I, type WalletInfoModalCustomization as J, type WalletInfoModalProps as K, WalletInfoModal as L, NovaProvider as M, type NovaProviderProps as N, type StatusAwareTextProps as S, type TuwaLabels as T, type WalletAddressDisplayProps as W, HashLink as a, StatusAwareText as b, type ToastTransactionCustomization as c, type ToastTransactionProps as d, ToastTransaction as e, type TrackingTxModalCustomization as f, type TrackingTxModalProps as g, TrackingTxModal as h, type TxErrorBlockProps as i, TxErrorBlock as j, type TxInfoBlockCustomization as k, type TxInfoBlockProps as l, TxInfoBlock as m, type StepStatus as n, type StepProps as o, type TxProgressIndicatorProps as p, TxProgressIndicator as q, type TxStatusVisualProps as r, TxStatusVisual as s, type TransactionHistoryItemCustomization as t, type TransactionHistoryItemProps as u, TransactionHistoryItem as v, type TransactionKeyProps as w, TransactionKey as x, type TransactionsHistoryCustomization as y, type TransactionsHistoryProps as z };