@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.
- package/README.md +0 -1
- package/dist/{types-bqi7UbSO.d.cts → TransactionsHistory-Bz0XaDda.d.cts} +326 -322
- package/dist/{types-bqi7UbSO.d.ts → TransactionsHistory-Bz0XaDda.d.ts} +326 -322
- package/dist/index.cjs +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +9 -21
- package/dist/index.d.ts +9 -21
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/providers/index.cjs +1 -1
- package/dist/providers/index.cjs.map +1 -1
- package/dist/providers/index.d.cts +6 -39
- package/dist/providers/index.d.ts +6 -39
- package/dist/providers/index.js +1 -1
- package/dist/providers/index.js.map +1 -1
- package/package.json +4 -4
@@ -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 {
|
5
|
-
import
|
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
|
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
|
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
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
|
114
|
-
|
115
|
-
|
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
|
-
|
119
|
-
|
120
|
-
|
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
|
-
|
156
|
-
|
157
|
-
|
158
|
-
|
159
|
-
|
160
|
-
|
161
|
-
/**
|
162
|
-
|
163
|
-
|
164
|
-
|
165
|
-
|
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 `
|
189
|
+
* @file This file contains the main `NovaProvider` component, the primary entry point for the UI library.
|
182
190
|
*/
|
183
191
|
|
184
|
-
type
|
185
|
-
|
186
|
-
|
187
|
-
|
188
|
-
|
189
|
-
|
190
|
-
|
191
|
-
|
192
|
-
|
193
|
-
|
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
|
-
/**
|
205
|
-
|
206
|
-
|
207
|
-
|
208
|
-
|
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
|
-
|
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
|
-
|
225
|
-
appChains: Chain[];
|
226
|
-
}
|
214
|
+
} & Pick<IInitializeTxTrackingStore<TR, T>, 'closeTxTrackedModal'> & Partial<Pick<ITxTrackingStore<TR, T, A>, 'handleTransaction' | 'initialTx'>> & ToastContainerProps;
|
227
215
|
/**
|
228
|
-
* The main
|
229
|
-
* It
|
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 {
|
232
|
-
* @returns {JSX.Element
|
219
|
+
* @param {NovaProviderProps<TR, T>} props - The component props.
|
220
|
+
* @returns {JSX.Element} The rendered provider.
|
233
221
|
*/
|
234
|
-
declare function
|
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
|
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
|
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
|
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<
|
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
|
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
|
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
|
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
|
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
|
501
|
-
*
|
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
|
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
|
507
|
-
|
508
|
-
|
509
|
-
|
510
|
-
title
|
511
|
-
|
512
|
-
|
513
|
-
|
514
|
-
|
515
|
-
|
516
|
-
|
517
|
-
|
518
|
-
|
519
|
-
|
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
|
-
|
571
|
-
|
572
|
-
|
573
|
-
|
574
|
-
|
575
|
-
|
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
|
-
/**
|
578
|
-
|
579
|
-
/**
|
580
|
-
|
581
|
-
/**
|
582
|
-
|
583
|
-
/**
|
584
|
-
|
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
|
-
|
600
|
-
|
601
|
-
|
602
|
-
|
603
|
-
|
604
|
-
|
605
|
-
|
606
|
-
|
607
|
-
|
608
|
-
|
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
|
-
|
611
|
-
|
612
|
-
|
613
|
-
|
614
|
-
|
615
|
-
|
616
|
-
/**
|
617
|
-
|
618
|
-
|
619
|
-
|
620
|
-
|
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 {
|
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 };
|