@tuwaio/nova-transactions 0.0.14 → 1.0.0-alpha.1.72f68be

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,12 +1,9 @@
1
- import { TransactionStatus, Transaction, TransactionPool, ITxTrackingStore } from '@tuwaio/pulsar-core';
2
- import { Config } from '@wagmi/core';
1
+ import { TransactionStatus, Transaction, TxAdapter, TransactionAdapter, TxActions, TransactionPool, IInitializeTxTrackingStore, ITxTrackingStore } from '@tuwaio/pulsar-core';
3
2
  import { ReactNode, JSX, ComponentType, ComponentPropsWithoutRef } from 'react';
4
- import { ToastContentProps, ToastContainerProps } from 'react-toastify';
5
- import { Chain, Address } from 'viem';
3
+ import { ToastContainerProps, ToastContentProps } from 'react-toastify';
4
+ import * as react_jsx_runtime from 'react/jsx-runtime';
6
5
  import * as Dialog from '@radix-ui/react-dialog';
7
- import { ActionTxKey } from '@tuwaio/pulsar-evm';
8
6
  import { MotionProps } from 'framer-motion';
9
- import * as react_jsx_runtime from 'react/jsx-runtime';
10
7
 
11
8
  /**
12
9
  * @file This file contains the `HashLink` component, a UI element for displaying hashes with copy and explorer link functionality.
@@ -63,186 +60,171 @@ type StatusAwareTextProps = {
63
60
  declare function StatusAwareText({ txStatus, source, fallback, variant, className, applyColor, }: StatusAwareTextProps): ReactNode;
64
61
 
65
62
  /**
66
- * @file This file contains the `TransactionStatusBadge` component for visually displaying a transaction's status.
67
- */
68
-
69
- type TransactionStatusBadgeProps<TR, T extends Transaction<TR>> = {
70
- /** The transaction object whose status will be displayed. */
71
- tx: T;
72
- /** Optional additional CSS classes to apply to the badge container. */
73
- className?: string;
74
- };
75
- /**
76
- * A component that displays a transaction's status as a styled badge
77
- * with a corresponding icon, color, and label.
78
- *
79
- * @param {TransactionStatusBadgeProps<TR, T>} props - The component props.
80
- * @returns {JSX.Element} The rendered status badge.
81
- */
82
- declare function TransactionStatusBadge<TR, T extends Transaction<TR>>({ tx, className, }: TransactionStatusBadgeProps<TR, T>): JSX.Element;
83
-
84
- /**
85
- * @file This file contains the `TransactionHistoryItem` component, which renders a single transaction
86
- * in a list format for the transaction history view.
63
+ * @file This file defines the TypeScript type for the library's internationalization (i18n) labels.
64
+ * It provides a strict structure for all text used in the UI components, ensuring type safety for different languages.
87
65
  */
88
-
89
- type CustomIconProps = {
90
- chainId: number;
91
- };
92
- type CustomStatusAwareTextProps$1 = Parameters<typeof StatusAwareText>[0];
93
- type CustomTimestampProps = {
94
- timestamp?: number;
95
- };
96
- type CustomStatusBadgeProps$1<TR, T extends Transaction<TR>> = Parameters<typeof TransactionStatusBadge<TR, T>>[0];
97
- type CustomTransactionKeyProps$1<TR, T extends Transaction<TR>> = Parameters<typeof TransactionKey<TR, T>>[0];
98
66
  /**
99
- * Defines the structure for the `customization` prop, allowing users to override
100
- * default sub-components with their own implementations for a history item.
67
+ * Defines the complete structure for all customizable text labels used throughout the transaction tracking UI components.
101
68
  */
102
- type TransactionHistoryItemCustomization<TR, T extends Transaction<TR>> = {
103
- components?: {
104
- /** Override the default chain icon. */
105
- icon?: (props: CustomIconProps) => ReactNode;
106
- /** Override the default title component. */
107
- title?: (props: CustomStatusAwareTextProps$1) => ReactNode;
108
- /** Override the default description component. */
109
- description?: (props: CustomStatusAwareTextProps$1) => ReactNode;
110
- /** Override the default timestamp component. */
111
- timestamp?: (props: CustomTimestampProps) => ReactNode;
112
- /** Override the default status badge component. */
113
- statusBadge?: (props: CustomStatusBadgeProps$1<TR, T>) => ReactNode;
114
- /** Override the default component for displaying transaction keys/hashes. */
115
- transactionKey?: (props: CustomTransactionKeyProps$1<TR, T>) => ReactNode;
69
+ type TuwaLabels = {
70
+ /** Labels for the main wallet information modal. */
71
+ walletModal: {
72
+ /** The title displayed at the top of the wallet modal. */
73
+ title: string;
74
+ header: {
75
+ /** Text displayed when no wallet is connected. */
76
+ notConnected: string;
77
+ /** Alt text for the wallet's avatar image. */
78
+ avatarAlt: string;
79
+ };
80
+ history: {
81
+ /** The title for the transaction history section. */
82
+ title: string;
83
+ /** The title displayed when the user needs to connect a wallet to see history. */
84
+ connectWalletTitle: string;
85
+ /** The message displayed when the user needs to connect a wallet. */
86
+ connectWalletMessage: string;
87
+ /** The title displayed when the connected wallet has no transaction history. */
88
+ noTransactionsTitle: string;
89
+ /** The message displayed when there are no transactions to show. */
90
+ noTransactionsMessage: string;
91
+ };
116
92
  };
117
- };
118
- type TransactionHistoryItemProps<TR, T extends Transaction<TR>> = {
119
- /** The transaction object to display. */
120
- tx: T;
121
- /** An array of supported chain objects. */
122
- appChains: Chain[];
123
- /** The entire pool of transactions. */
124
- transactionsPool: TransactionPool<TR, T>;
125
- /** Optional additional CSS classes for the container. */
126
- className?: string;
127
- /** An object to customize and override the default internal components. */
128
- customization?: TransactionHistoryItemCustomization<TR, T>;
129
- };
130
- /**
131
- * A component that renders a single row in the transaction history list.
132
- * It is highly customizable via the `customization` prop.
133
- *
134
- * @param {TransactionHistoryItemProps<TR, T>} props - The component props.
135
- * @returns {JSX.Element} The rendered history item.
136
- */
137
- declare function TransactionHistoryItem<TR, T extends Transaction<TR>>({ tx, appChains, transactionsPool, className, customization, }: TransactionHistoryItemProps<TR, T>): JSX.Element;
138
-
139
- /**
140
- * @file This file contains the `TransactionsHistory` component, which displays a list of past and pending transactions.
141
- */
142
-
143
- type CustomPlaceholderProps = {
144
- title: string;
145
- message: string;
146
- };
147
- /**
148
- * Defines the customization options for the TransactionsHistory component.
149
- */
150
- type TransactionsHistoryCustomization<TR, T extends Transaction<TR>> = {
151
- classNames?: {
152
- /** CSS classes for the list's wrapper `div`. */
153
- listWrapper?: string;
93
+ /** Labels related to toast notifications. */
94
+ toast: {
95
+ /** Text for the button/link within a toast to open the wallet modal. */
96
+ openWalletInfo: string;
154
97
  };
155
- components?: {
156
- /**
157
- * A render prop to replace the default placeholder component
158
- * (e.g., for "Connect Wallet" or "No Transactions").
159
- */
160
- placeholder?: (props: CustomPlaceholderProps) => ReactNode;
161
- /**
162
- * A custom component to use instead of the default `TransactionHistoryItem`.
163
- * This should be a component type, not a render function.
164
- */
165
- HistoryItem?: ComponentType<TransactionHistoryItemProps<TR, T>>;
98
+ /** Standard labels for transaction statuses. */
99
+ statuses: {
100
+ /** Text for a pending transaction. */
101
+ pending: string;
102
+ /** Text for a successful transaction. */
103
+ success: string;
104
+ /** Text for a failed transaction. */
105
+ failed: string;
106
+ /** Text for a reverted transaction. */
107
+ reverted: string;
108
+ /** Text for a replaced transaction (e.g., sped up). */
109
+ replaced: string;
110
+ /** Text for an unknown or indeterminate status. */
111
+ unknown: string;
112
+ };
113
+ /** Labels for different types of transaction hashes/keys. */
114
+ hashLabels: {
115
+ /** Label for a Gelato Task ID. */
116
+ gelato: string;
117
+ /** Label for a Safe Transaction Hash. */
118
+ safe: string;
119
+ /** Label for the original transaction hash (before replacement). */
120
+ original: string;
121
+ /** Label for the new transaction hash that replaced the original. */
122
+ replaced: string;
123
+ /** Default label for a standard transaction hash. */
124
+ default: string;
125
+ };
126
+ /** Labels for the transaction information block. */
127
+ txInfo: {
128
+ /** Label indicating when the transaction was started. */
129
+ started: string;
130
+ /** Label for the network name. */
131
+ network: string;
132
+ };
133
+ /** Labels for the transaction error block. */
134
+ txError: {
135
+ /** The title for the error details section. */
136
+ title: string;
137
+ /** Confirmation text shown after copying an error message. */
138
+ copied: string;
139
+ };
140
+ /** Labels for the detailed transaction tracking modal. */
141
+ trackingModal: {
142
+ /** The main title of the tracking modal. */
143
+ title: string;
144
+ /** Text indicating that the transaction is being processed. */
145
+ processing: string;
146
+ /** Label for the close button. */
147
+ close: string;
148
+ /** Label for the button to open the main wallet info modal. */
149
+ walletInfo: string;
150
+ /** Label for a button to retry a transaction. */
151
+ retry: string;
152
+ /** Labels for the step-by-step progress indicator. */
153
+ progressIndicator: {
154
+ /** Label for the "transaction created" step. */
155
+ created: string;
156
+ /** Label for the "processing" step. */
157
+ processing: string;
158
+ /** Label for the "succeed" or final step. */
159
+ succeed: string;
160
+ };
161
+ };
162
+ /** Labels for the main transaction action button. */
163
+ trackedTxButton: {
164
+ /** Text shown on the button while the transaction is initializing. */
165
+ loading: string;
166
+ /** Text shown on the button after the transaction succeeds. */
167
+ succeed: string;
168
+ /** Text shown on the button if the transaction fails to initialize. */
169
+ failed: string;
170
+ /** Text shown on the button if the transaction replaced to initialize. */
171
+ replaced: string;
172
+ };
173
+ /** Labels for common action buttons/links. */
174
+ actions: {
175
+ /** Text for a "Copy" action (e.g., copy address or hash). */
176
+ copy: string;
177
+ /** Text for a link to view the transaction on a block explorer. */
178
+ viewOnExplorer: string;
179
+ /** Text for a generic "Close" action. */
180
+ close: string;
181
+ /** Text for a generic "Cancel" action. */
182
+ cancel: string;
183
+ /** Text for a generic "Speed up" action. */
184
+ speedUp: string;
166
185
  };
167
186
  };
168
- /**
169
- * A component that displays a scrollable list of transactions for the connected wallet.
170
- * It handles states for when a wallet is not connected or when there is no history.
171
- *
172
- * @param {WalletInfoModalProps<TR, T> & { customization?: TransactionsHistoryCustomization<TR, T> }} props
173
- * @returns {JSX.Element} The rendered transaction history section.
174
- */
175
- declare function TransactionsHistory<TR, T extends Transaction<TR>>({ walletAddress, transactionsPool, appChains, className, customization, }: WalletInfoModalProps<TR, T> & {
176
- className?: string;
177
- customization?: TransactionsHistoryCustomization<TR, T>;
178
- }): JSX.Element;
179
187
 
180
188
  /**
181
- * @file This file contains the main `WalletInfoModal` component, which serves as the primary UI for viewing wallet details and transaction history.
189
+ * @file This file contains the main `NovaProvider` component, the primary entry point for the UI library.
182
190
  */
183
191
 
184
- type CustomHeaderProps$1 = {
185
- closeModal: () => void;
186
- };
187
- type CustomWalletInfoProps<TR, T extends Transaction<TR>> = WalletInfoModalProps<TR, T>;
188
- type CustomHistoryProps<TR, T extends Transaction<TR>> = WalletInfoModalProps<TR, T> & {
189
- customization?: TransactionsHistoryCustomization<TR, T>;
190
- };
191
- /**
192
- * Defines the customization options for the WalletInfoModal.
193
- * Allows customization of modal behavior, animations, and individual UI components.
194
- */
195
- type WalletInfoModalCustomization<TR, T extends Transaction<TR>> = {
196
- /** Custom props to pass to the underlying Radix UI Dialog.Content component */
197
- modalProps?: Partial<ComponentPropsWithoutRef<typeof Dialog.Content>>;
198
- /** Custom Framer Motion animation properties */
199
- motionProps?: MotionProps;
200
- classNames?: {
201
- /** CSS classes for the main content wrapper div. */
202
- contentWrapper?: string;
192
+ type NovaProviderProps<TR, T extends Transaction<TR>, A> = {
193
+ adapters: TxAdapter<TR, T, A>[];
194
+ connectedWalletAddress?: string;
195
+ connectedAdapterType?: TransactionAdapter;
196
+ /** A partial object of labels to override the default English text. */
197
+ labels?: Partial<TuwaLabels>;
198
+ /** An object to enable or disable major UI features. All are enabled by default. */
199
+ features?: {
200
+ toasts?: boolean;
201
+ walletInfoModal?: boolean;
202
+ trackingTxModal?: boolean;
203
203
  };
204
- /** Custom component overrides for different parts of the modal */
205
- components?: {
206
- /** A render prop to replace the entire modal header. */
207
- header?: (props: CustomHeaderProps$1) => ReactNode;
208
- /** A render prop to replace the `WalletHeader` component. */
209
- walletInfo?: (props: CustomWalletInfoProps<TR, T>) => ReactNode;
210
- /** A render prop to replace the `TransactionsHistory` component. */
211
- history?: (props: CustomHistoryProps<TR, T>) => ReactNode;
204
+ /** A single object to pass down deep customization options to all child components. */
205
+ customization?: {
206
+ toast?: ToastTransactionCustomization<TR, T, A>;
207
+ walletInfoModal?: WalletInfoModalCustomization<TR, T, A>;
208
+ trackingTxModal?: TrackingTxModalCustomization<TR, T, A>;
212
209
  };
213
- };
214
- /**
215
- * Defines the core props for the WalletInfoModal and its children.
216
- */
217
- interface WalletInfoModalProps<TR, T extends Transaction<TR>> {
218
- /** The connected wallet's address. */
219
- walletAddress?: Address;
220
- /** The viem `Chain` object for the currently connected network. */
221
- chain?: Chain;
222
- /** The entire pool of transactions from the store. */
210
+ /** A registry of retryable actions, keyed by `actionKey`. */
211
+ actions?: TxActions;
212
+ /** The global transaction pool from the tracking store. */
223
213
  transactionsPool: TransactionPool<TR, T>;
224
- /** An array of all chains supported by the application. */
225
- appChains: Chain[];
226
- }
214
+ } & Pick<IInitializeTxTrackingStore<TR, T>, 'closeTxTrackedModal'> & Partial<Pick<ITxTrackingStore<TR, T, A>, 'handleTransaction' | 'initialTx'>> & ToastContainerProps;
227
215
  /**
228
- * The main modal component for displaying wallet information and transaction history.
229
- * It is highly customizable through the `customization` prop and supports full Radix UI Dialog customization.
216
+ * The main provider for the Nova UI ecosystem.
217
+ * It orchestrates toasts, modals, and the i18n context for the entire application.
230
218
  *
231
- * @param {WalletInfoModalProps<TR, T> & { ... }} props - The component props.
232
- * @returns {JSX.Element | null} The rendered modal or null if not open.
219
+ * @param {NovaProviderProps<TR, T>} props - The component props.
220
+ * @returns {JSX.Element} The rendered provider.
233
221
  */
234
- declare function WalletInfoModal<TR, T extends Transaction<TR>>({ isOpen, setIsOpen, customization, ...props }: WalletInfoModalProps<TR, T> & {
235
- isOpen: boolean;
236
- setIsOpen: (value: boolean) => void;
237
- customization?: WalletInfoModalCustomization<TR, T>;
238
- }): JSX.Element | null;
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;
239
223
 
240
224
  type CustomHashLinkProps = Parameters<typeof HashLink>[0];
241
- interface ToastTransactionKeyProps<TR, T extends Transaction<TR>> extends Pick<WalletInfoModalProps<TR, T>, 'transactionsPool'> {
225
+ interface ToastTransactionKeyProps<TR, T extends Transaction<TR>, A> extends Pick<NovaProviderProps<TR, T, A>, 'adapters' | 'transactionsPool'> {
242
226
  /** The transaction object to display identifiers for. */
243
227
  tx: T;
244
- /** An array of supported chain objects, used for generating explorer links. */
245
- appChains: Chain[];
246
228
  /** The visual variant, which applies different container styles. */
247
229
  variant?: 'toast' | 'history';
248
230
  /** Optional additional CSS classes for the container. */
@@ -260,15 +242,34 @@ interface ToastTransactionKeyProps<TR, T extends Transaction<TR>> extends Pick<W
260
242
  * @param {ToastTransactionKeyProps<TR, T>} props - The component props.
261
243
  * @returns {JSX.Element} The rendered component.
262
244
  */
263
- declare function TransactionKey<TR, T extends Transaction<TR>>({ tx, appChains, transactionsPool, variant, className, renderHashLink, }: ToastTransactionKeyProps<TR, T>): react_jsx_runtime.JSX.Element | null;
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;
246
+
247
+ /**
248
+ * @file This file contains the `TransactionStatusBadge` component for visually displaying a transaction's status.
249
+ */
250
+
251
+ type TransactionStatusBadgeProps<TR, T extends Transaction<TR>> = {
252
+ /** The transaction object whose status will be displayed. */
253
+ tx: T;
254
+ /** Optional additional CSS classes to apply to the badge container. */
255
+ className?: string;
256
+ };
257
+ /**
258
+ * A component that displays a transaction's status as a styled badge
259
+ * 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
+ declare function TransactionStatusBadge<TR, T extends Transaction<TR>>({ tx, className, }: TransactionStatusBadgeProps<TR, T>): JSX.Element;
264
265
 
265
266
  /**
266
267
  * @file This file contains the `ToastTransaction` component, which serves as the main body for a transaction notification toast.
267
268
  */
268
269
 
269
- type CustomStatusAwareTextProps = Parameters<typeof StatusAwareText>[0];
270
- type CustomTransactionKeyProps<TR, T extends Transaction<TR>> = Parameters<typeof TransactionKey<TR, T>>[0];
271
- type CustomStatusBadgeProps<TR, T extends Transaction<TR>> = Parameters<typeof TransactionStatusBadge<TR, T>>[0];
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];
272
273
  /** Props provided to custom action buttons like 'Wallet Info', 'Speed Up', or 'Cancel'. */
273
274
  type CustomActionButtonProps = {
274
275
  onClick: () => void;
@@ -278,14 +279,14 @@ type CustomActionButtonProps = {
278
279
  * Defines the structure for the `customization` prop, allowing users to override
279
280
  * default sub-components with their own implementations.
280
281
  */
281
- type ToastTransactionCustomization<TR, T extends Transaction<TR>> = {
282
+ type ToastTransactionCustomization<TR, T extends Transaction<TR>, A> = {
282
283
  components?: {
283
284
  /** Override the default title/description component. */
284
- statusAwareText?: (props: CustomStatusAwareTextProps) => ReactNode;
285
+ statusAwareText?: (props: CustomStatusAwareTextProps$1) => ReactNode;
285
286
  /** Override the default component for displaying transaction keys/hashes. */
286
- transactionKey?: (props: CustomTransactionKeyProps<TR, T>) => ReactNode;
287
+ transactionKey?: (props: CustomTransactionKeyProps$1<TR, T, A>) => ReactNode;
287
288
  /** Override the default status badge component. */
288
- statusBadge?: (props: CustomStatusBadgeProps<TR, T>) => ReactNode;
289
+ statusBadge?: (props: CustomStatusBadgeProps$1<TR, T>) => ReactNode;
289
290
  /** Override the default "Open wallet info" button. */
290
291
  walletInfoButton?: (props: CustomActionButtonProps) => ReactNode;
291
292
  /** Override the default "Speed Up" button. */
@@ -294,25 +295,21 @@ type ToastTransactionCustomization<TR, T extends Transaction<TR>> = {
294
295
  cancelButton?: (props: CustomActionButtonProps) => ReactNode;
295
296
  };
296
297
  };
297
- type ToastTransactionProps<TR, T extends Transaction<TR>> = {
298
+ type ToastTransactionProps<TR, T extends Transaction<TR>, A> = {
298
299
  /** The transaction object to display in the toast. */
299
300
  tx: T;
300
301
  /** A function to open the main wallet info modal. If not provided, the button will not be rendered. */
301
302
  openWalletInfoModal?: (value: boolean) => void;
302
- /** An array of supported chain objects, used for displaying network information. */
303
- appChains: Chain[];
304
303
  /** An optional custom icon to display instead of the default chain icon. */
305
304
  icon?: ReactNode;
306
305
  /** Optional additional CSS classes for the toast container. */
307
306
  className?: string;
308
307
  /** An object to customize and override the default internal components. */
309
- customization?: ToastTransactionCustomization<TR, T>;
310
- /** The wagmi config object, required for Speed Up and Cancel functionality. */
311
- config?: Config;
308
+ customization?: ToastTransactionCustomization<TR, T, A>;
312
309
  /** Props from `react-toastify` to control the toast itself. */
313
310
  closeToast?: ToastContentProps['closeToast'];
314
311
  toastProps?: ToastContainerProps;
315
- } & Pick<WalletInfoModalProps<TR, T>, 'transactionsPool'>;
312
+ } & Pick<NovaProviderProps<TR, T, A>, 'transactionsPool' | 'adapters' | 'connectedWalletAddress'>;
316
313
  /**
317
314
  * A composite component that renders the content for a transaction toast notification.
318
315
  * It is highly customizable and includes actions for speeding up or canceling transactions
@@ -323,7 +320,7 @@ type ToastTransactionProps<TR, T extends Transaction<TR>> = {
323
320
  * @param {ToastTransactionProps<TR, T>} props The component props.
324
321
  * @returns {JSX.Element} The rendered toast body.
325
322
  */
326
- declare function ToastTransaction<TR, T extends Transaction<TR>>({ openWalletInfoModal, tx, transactionsPool, appChains, icon, className, customization, config, }: ToastTransactionProps<TR, T>): JSX.Element;
323
+ declare function ToastTransaction<TR, T extends Transaction<TR>, A>({ openWalletInfoModal, tx, transactionsPool, icon, className, customization, connectedWalletAddress, adapters, }: ToastTransactionProps<TR, T, A>): JSX.Element;
327
324
 
328
325
  type TxErrorBlockProps = {
329
326
  /** The error message string to display. If undefined, the component renders nothing. */
@@ -352,7 +349,7 @@ type CustomInfoRowProps = {
352
349
  /**
353
350
  * Defines the customization options for the `TxInfoBlock` component.
354
351
  */
355
- type TxInfoBlockCustomization<TR, T extends Transaction<TR>> = {
352
+ type TxInfoBlockCustomization<TR, T extends Transaction<TR>, A> = {
356
353
  components?: {
357
354
  /** A render prop to replace the default label-value row component. */
358
355
  infoRow?: (props: CustomInfoRowProps) => ReactNode;
@@ -360,18 +357,16 @@ type TxInfoBlockCustomization<TR, T extends Transaction<TR>> = {
360
357
  * A render prop to customize the rendering of the transaction keys/hashes.
361
358
  * This is passed down to the underlying `TransactionKey` component.
362
359
  */
363
- transactionKey?: ToastTransactionKeyProps<TR, T>['renderHashLink'];
360
+ transactionKey?: ToastTransactionKeyProps<TR, T, A>['renderHashLink'];
364
361
  };
365
362
  };
366
- type TxInfoBlockProps<TR, T extends Transaction<TR>> = {
363
+ type TxInfoBlockProps<TR, T extends Transaction<TR>, A> = {
367
364
  tx: T & {
368
365
  desiredChainID?: number;
369
366
  };
370
- appChains: Chain[];
371
- transactionsPool: TransactionPool<TR, T>;
372
367
  className?: string;
373
- customization?: TxInfoBlockCustomization<TR, T>;
374
- };
368
+ customization?: TxInfoBlockCustomization<TR, T, A>;
369
+ } & Pick<NovaProviderProps<TR, T, A>, 'adapters' | 'transactionsPool'>;
375
370
  /**
376
371
  * A component that displays a block of essential transaction details,
377
372
  * such as network, start time, and relevant hashes/keys.
@@ -379,7 +374,7 @@ type TxInfoBlockProps<TR, T extends Transaction<TR>> = {
379
374
  * @param {object} props - The component props.
380
375
  * @returns {JSX.Element} The rendered info block.
381
376
  */
382
- declare function TxInfoBlock<TR, T extends Transaction<TR>>({ tx, appChains, transactionsPool, className, customization, }: TxInfoBlockProps<TR, T>): JSX.Element;
377
+ declare function TxInfoBlock<TR, T extends Transaction<TR>, A>({ tx, adapters, transactionsPool, className, customization, }: TxInfoBlockProps<TR, T, A>): JSX.Element;
383
378
 
384
379
  /**
385
380
  * @file This file contains the `TxProgressIndicator` component, a visual step-by-step progress bar for transactions.
@@ -434,7 +429,7 @@ type TxStatusVisualProps = {
434
429
  declare function TxStatusVisual({ isProcessing, isSucceed, isFailed, isReplaced }: TxStatusVisualProps): JSX.Element;
435
430
 
436
431
  /** Props provided to a custom header component. */
437
- type CustomHeaderProps = {
432
+ type CustomHeaderProps$1 = {
438
433
  onClose: (txKey?: string) => void;
439
434
  };
440
435
  /** Props provided to a custom footer component. */
@@ -446,28 +441,26 @@ type CustomFooterProps = {
446
441
  onCancel?: () => void;
447
442
  isProcessing?: boolean;
448
443
  };
449
- /** A registry of functions that can be re-executed via the 'Retry' button. The key should match `actionKey` on a transaction. */
450
- type TxActions = Record<string, (...args: any[]) => Promise<unknown>>;
451
444
  /**
452
445
  * Defines the customization options for the TrackingTxModal.
453
446
  * Allows overriding modal behavior, animations, and individual UI components.
454
447
  */
455
- type TrackingTxModalCustomization<TR, T extends Transaction<TR>> = {
448
+ type TrackingTxModalCustomization<TR, T extends Transaction<TR>, A> = {
456
449
  /** Custom props to pass to the underlying Radix UI `Dialog.Content` component. */
457
450
  modalProps?: Partial<ComponentPropsWithoutRef<typeof Dialog.Content>>;
458
451
  /** Custom Framer Motion animation properties for the modal's entrance and exit. */
459
452
  motionProps?: MotionProps;
460
453
  /** A record of custom components to override parts of the modal's UI. */
461
454
  components?: {
462
- header?: (props: CustomHeaderProps) => ReactNode;
455
+ header?: (props: CustomHeaderProps$1) => ReactNode;
463
456
  footer?: (props: CustomFooterProps) => ReactNode;
464
457
  statusVisual?: (props: TxStatusVisualProps) => ReactNode;
465
458
  progressIndicator?: (props: TxProgressIndicatorProps) => ReactNode;
466
- infoBlock?: (props: TxInfoBlockProps<TR, T>) => ReactNode;
459
+ infoBlock?: (props: TxInfoBlockProps<TR, T, A>) => ReactNode;
467
460
  errorBlock?: (props: TxErrorBlockProps) => ReactNode;
468
461
  };
469
462
  };
470
- interface TrackingTxModalProps<TR, T extends Transaction<TR>> extends Partial<Pick<ITxTrackingStore<TR, T, ActionTxKey>, 'handleTransaction' | 'initialTx'>> {
463
+ interface TrackingTxModalProps<TR, T extends Transaction<TR>, A> extends Pick<NovaProviderProps<TR, T, A>, 'handleTransaction' | 'initialTx' | 'actions' | 'transactionsPool' | 'adapters' | 'connectedAdapterType'> {
471
464
  /** A function to close the modal. */
472
465
  onClose: (txKey?: string) => void;
473
466
  /** A function to open the main wallet info modal. */
@@ -475,15 +468,7 @@ interface TrackingTxModalProps<TR, T extends Transaction<TR>> extends Partial<Pi
475
468
  /** Optional additional CSS classes for the modal's container. */
476
469
  className?: string;
477
470
  /** An object containing all customization options for the modal. */
478
- customization?: TrackingTxModalCustomization<TR, T>;
479
- /** An array of `viem` chain objects supported by the application. */
480
- appChains: Chain[];
481
- /** The global transaction pool from the tracking store. */
482
- transactionsPool: TransactionPool<TR, T>;
483
- /** A registry of retryable actions, keyed by `actionKey`. */
484
- actions?: TxActions;
485
- /** The wagmi config object, required for retry, cancel, and speed up functionality. */
486
- config?: Config;
471
+ customization?: TrackingTxModalCustomization<TR, T, A>;
487
472
  }
488
473
  /**
489
474
  * A detailed modal that displays the real-time status and lifecycle of a transaction.
@@ -494,132 +479,151 @@ interface TrackingTxModalProps<TR, T extends Transaction<TR>> extends Partial<Pi
494
479
  * @param {TrackingTxModalProps<TR, T>} props - The component props.
495
480
  * @returns {JSX.Element} The rendered tracking modal.
496
481
  */
497
- declare function TrackingTxModal<TR, T extends Transaction<TR>>({ onClose, onOpenWalletInfo, className, customization, appChains, transactionsPool, actions, handleTransaction, config, initialTx, }: TrackingTxModalProps<TR, T>): JSX.Element;
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;
498
483
 
499
484
  /**
500
- * @file This file defines the TypeScript type for the library's internationalization (i18n) labels.
501
- * It provides a strict structure for all text used in the UI components, ensuring type safety for different languages.
485
+ * @file This file contains the `TransactionHistoryItem` component, which renders a single transaction
486
+ * in a list format for the transaction history view.
502
487
  */
488
+
489
+ type CustomIconProps = {
490
+ chainId: number;
491
+ };
492
+ type CustomStatusAwareTextProps = Parameters<typeof StatusAwareText>[0];
493
+ type CustomTimestampProps = {
494
+ timestamp?: number;
495
+ };
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];
503
498
  /**
504
- * Defines the complete structure for all customizable text labels used throughout the transaction tracking UI components.
499
+ * Defines the structure for the `customization` prop, allowing users to override
500
+ * default sub-components with their own implementations for a history item.
505
501
  */
506
- type TuwaLabels = {
507
- /** Labels for the main wallet information modal. */
508
- walletModal: {
509
- /** The title displayed at the top of the wallet modal. */
510
- title: string;
511
- header: {
512
- /** Text displayed when no wallet is connected. */
513
- notConnected: string;
514
- /** Alt text for the wallet's avatar image. */
515
- avatarAlt: string;
516
- };
517
- history: {
518
- /** The title for the transaction history section. */
519
- title: string;
520
- /** The title displayed when the user needs to connect a wallet to see history. */
521
- connectWalletTitle: string;
522
- /** The message displayed when the user needs to connect a wallet. */
523
- connectWalletMessage: string;
524
- /** The title displayed when the connected wallet has no transaction history. */
525
- noTransactionsTitle: string;
526
- /** The message displayed when there are no transactions to show. */
527
- noTransactionsMessage: string;
528
- };
529
- };
530
- /** Labels related to toast notifications. */
531
- toast: {
532
- /** Text for the button/link within a toast to open the wallet modal. */
533
- openWalletInfo: string;
534
- };
535
- /** Standard labels for transaction statuses. */
536
- statuses: {
537
- /** Text for a pending transaction. */
538
- pending: string;
539
- /** Text for a successful transaction. */
540
- success: string;
541
- /** Text for a failed transaction. */
542
- failed: string;
543
- /** Text for a reverted transaction. */
544
- reverted: string;
545
- /** Text for a replaced transaction (e.g., sped up). */
546
- replaced: string;
547
- /** Text for an unknown or indeterminate status. */
548
- unknown: string;
549
- };
550
- /** Labels for different types of transaction hashes/keys. */
551
- hashLabels: {
552
- /** Label for a Gelato Task ID. */
553
- gelato: string;
554
- /** Label for a Safe Transaction Hash. */
555
- safe: string;
556
- /** Label for the original transaction hash (before replacement). */
557
- original: string;
558
- /** Label for the new transaction hash that replaced the original. */
559
- replaced: string;
560
- /** Default label for a standard transaction hash. */
561
- default: string;
562
- };
563
- /** Labels for the transaction information block. */
564
- txInfo: {
565
- /** Label indicating when the transaction was started. */
566
- started: string;
567
- /** Label for the network name. */
568
- network: string;
502
+ type TransactionHistoryItemCustomization<TR, T extends Transaction<TR>, A> = {
503
+ 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;
569
516
  };
570
- /** Labels for the transaction error block. */
571
- txError: {
572
- /** The title for the error details section. */
573
- title: string;
574
- /** Confirmation text shown after copying an error message. */
575
- copied: string;
517
+ };
518
+ type TransactionHistoryItemProps<TR, T extends Transaction<TR>, A> = {
519
+ /** The transaction object to display. */
520
+ 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
+ /** An object to customize and override the default internal components. */
526
+ customization?: TransactionHistoryItemCustomization<TR, T, A>;
527
+ } & Pick<NovaProviderProps<TR, T, A>, 'adapters'>;
528
+ /**
529
+ * 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.
534
+ */
535
+ declare function TransactionHistoryItem<TR, T extends Transaction<TR>, A>({ tx, adapters, transactionsPool, className, customization, }: TransactionHistoryItemProps<TR, T, A>): JSX.Element;
536
+
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>;
547
+ };
548
+ /**
549
+ * Defines the customization options for the WalletInfoModal.
550
+ * Allows customization of modal behavior, animations, and individual UI components.
551
+ */
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;
557
+ classNames?: {
558
+ /** CSS classes for the main content wrapper div. */
559
+ contentWrapper?: string;
576
560
  };
577
- /** Labels for the detailed transaction tracking modal. */
578
- trackingModal: {
579
- /** The main title of the tracking modal. */
580
- title: string;
581
- /** Text indicating that the transaction is being processed. */
582
- processing: string;
583
- /** Label for the close button. */
584
- close: string;
585
- /** Label for the button to open the main wallet info modal. */
586
- walletInfo: string;
587
- /** Label for a button to retry a transaction. */
588
- retry: string;
589
- /** Labels for the step-by-step progress indicator. */
590
- progressIndicator: {
591
- /** Label for the "transaction created" step. */
592
- created: string;
593
- /** Label for the "processing" step. */
594
- processing: string;
595
- /** Label for the "succeed" or final step. */
596
- succeed: string;
597
- };
561
+ /** Custom component overrides for different parts of the modal */
562
+ 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;
598
569
  };
599
- /** Labels for the main transaction action button. */
600
- trackedTxButton: {
601
- /** Text shown on the button while the transaction is initializing. */
602
- loading: string;
603
- /** Text shown on the button after the transaction succeeds. */
604
- succeed: string;
605
- /** Text shown on the button if the transaction fails to initialize. */
606
- failed: string;
607
- /** Text shown on the button if the transaction replaced to initialize. */
608
- replaced: string;
570
+ };
571
+ /**
572
+ * Defines the core props for the WalletInfoModal and its children.
573
+ */
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
+ }
579
+ /**
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.
582
+ *
583
+ * @param {WalletInfoModalProps<TR, T> & { ... }} props - The component props.
584
+ * @returns {JSX.Element | null} The rendered modal or null if not open.
585
+ */
586
+ declare function WalletInfoModal<TR, T extends Transaction<TR>, A>({ isOpen, setIsOpen, customization, ...props }: WalletInfoModalProps<TR, T, A>): JSX.Element | null;
587
+
588
+ /**
589
+ * @file This file contains the `TransactionsHistory` component, which displays a list of past and pending transactions.
590
+ */
591
+
592
+ type CustomPlaceholderProps = {
593
+ title: string;
594
+ message: string;
595
+ };
596
+ /**
597
+ * Defines the customization options for the TransactionsHistory component.
598
+ */
599
+ type TransactionsHistoryCustomization<TR, T extends Transaction<TR>, A> = {
600
+ classNames?: {
601
+ /** CSS classes for the list's wrapper `div`. */
602
+ listWrapper?: string;
609
603
  };
610
- /** Labels for common action buttons/links. */
611
- actions: {
612
- /** Text for a "Copy" action (e.g., copy address or hash). */
613
- copy: string;
614
- /** Text for a link to view the transaction on a block explorer. */
615
- viewOnExplorer: string;
616
- /** Text for a generic "Close" action. */
617
- close: string;
618
- /** Text for a generic "Cancel" action. */
619
- cancel: string;
620
- /** Text for a generic "Speed up" action. */
621
- speedUp: string;
604
+ 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>>;
622
615
  };
623
616
  };
617
+ /**
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.
623
+ */
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;
624
628
 
625
- export { type WalletInfoModalProps as A, WalletInfoModal as B, HashLink as H, StatusAwareText as S, type TuwaLabels as T, type WalletInfoModalCustomization as W, type ToastTransactionCustomization as a, type ToastTransactionProps as b, ToastTransaction as c, type TxActions as d, type TrackingTxModalCustomization as e, type TrackingTxModalProps as f, TrackingTxModal as g, type TxErrorBlockProps as h, TxErrorBlock as i, type TxInfoBlockCustomization as j, type TxInfoBlockProps as k, TxInfoBlock as l, type StepStatus as m, type StepProps as n, type TxProgressIndicatorProps as o, TxProgressIndicator as p, type TxStatusVisualProps as q, TxStatusVisual as r, type TransactionHistoryItemCustomization as s, type TransactionHistoryItemProps as t, TransactionHistoryItem as u, type ToastTransactionKeyProps as v, TransactionKey as w, type TransactionsHistoryCustomization as x, TransactionsHistory as y, TransactionStatusBadge as z };
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 };