@tuwaio/nova-transactions 0.0.15 → 0.0.16
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 +82 -84
- package/dist/WalletInfoModal-BcTPDgW_.d.cts +568 -0
- package/dist/WalletInfoModal-BcTPDgW_.d.ts +568 -0
- package/dist/index.cjs +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +5 -21
- package/dist/index.d.cts +32 -138
- package/dist/index.d.ts +32 -138
- 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 +13 -15
- package/dist/types-bqi7UbSO.d.cts +0 -625
- package/dist/types-bqi7UbSO.d.ts +0 -625
package/dist/types-bqi7UbSO.d.ts
DELETED
@@ -1,625 +0,0 @@
|
|
1
|
-
import { TransactionStatus, Transaction, TransactionPool, ITxTrackingStore } from '@tuwaio/pulsar-core';
|
2
|
-
import { Config } from '@wagmi/core';
|
3
|
-
import { ReactNode, JSX, ComponentType, ComponentPropsWithoutRef } from 'react';
|
4
|
-
import { ToastContentProps, ToastContainerProps } from 'react-toastify';
|
5
|
-
import { Chain, Address } from 'viem';
|
6
|
-
import * as Dialog from '@radix-ui/react-dialog';
|
7
|
-
import { ActionTxKey } from '@tuwaio/pulsar-evm';
|
8
|
-
import { MotionProps } from 'framer-motion';
|
9
|
-
import * as react_jsx_runtime from 'react/jsx-runtime';
|
10
|
-
|
11
|
-
/**
|
12
|
-
* @file This file contains the `HashLink` component, a UI element for displaying hashes with copy and explorer link functionality.
|
13
|
-
*/
|
14
|
-
/**
|
15
|
-
* A component to display a hash string (e.g., transaction hash or address)
|
16
|
-
* with an optional label, a link to a block explorer, and a copy-to-clipboard button.
|
17
|
-
*
|
18
|
-
* @param {object} props - The component props.
|
19
|
-
* @param {string} [props.label] - An optional label to display before the hash (e.g., "Tx Hash").
|
20
|
-
* @param {string} props.hash - The full hash string to display and copy.
|
21
|
-
* @param {string} [props.explorerUrl] - An optional URL to a block explorer. If provided, the hash becomes a link.
|
22
|
-
* @param {'default' | 'compact'} [props.variant='default'] - The visual style of the component.
|
23
|
-
* @param {string} [props.className] - Additional CSS classes to apply to the container element.
|
24
|
-
* @returns {JSX.Element} The rendered HashLink component.
|
25
|
-
*/
|
26
|
-
declare function HashLink({ label, hash, explorerUrl, variant, className, }: {
|
27
|
-
label?: string;
|
28
|
-
hash: string;
|
29
|
-
explorerUrl?: string;
|
30
|
-
variant?: 'default' | 'compact';
|
31
|
-
className?: string;
|
32
|
-
}): react_jsx_runtime.JSX.Element;
|
33
|
-
|
34
|
-
/**
|
35
|
-
* @file This file contains the `StatusAwareText` component, which displays different text based on a transaction's status.
|
36
|
-
*/
|
37
|
-
|
38
|
-
type StatusAwareTextProps = {
|
39
|
-
/** The current status of the transaction. */
|
40
|
-
txStatus?: TransactionStatus;
|
41
|
-
/**
|
42
|
-
* The source for the text. Can be a single string, or an array of strings
|
43
|
-
* corresponding to different statuses in the format: `[pending, success, error, replaced]`.
|
44
|
-
*/
|
45
|
-
source?: string | string[];
|
46
|
-
/** A fallback string to display if `source` is not provided. */
|
47
|
-
fallback?: string;
|
48
|
-
/** The visual variant, determines the base text style ('title' or 'description'). */
|
49
|
-
variant: 'title' | 'description';
|
50
|
-
/** Optional additional CSS classes. */
|
51
|
-
className?: string;
|
52
|
-
/** If true, applies a status-specific color to the text. */
|
53
|
-
applyColor?: boolean;
|
54
|
-
};
|
55
|
-
/**
|
56
|
-
* A component that renders text conditionally based on a transaction's status.
|
57
|
-
* It's designed to work with the `title` and `description` fields of a transaction,
|
58
|
-
* which can be a single string or a status-dependent array of strings.
|
59
|
-
*
|
60
|
-
* @param {StatusAwareTextProps} props - The component props.
|
61
|
-
* @returns {ReactNode} The rendered text element or null.
|
62
|
-
*/
|
63
|
-
declare function StatusAwareText({ txStatus, source, fallback, variant, className, applyColor, }: StatusAwareTextProps): ReactNode;
|
64
|
-
|
65
|
-
/**
|
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.
|
87
|
-
*/
|
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
|
-
/**
|
99
|
-
* Defines the structure for the `customization` prop, allowing users to override
|
100
|
-
* default sub-components with their own implementations for a history item.
|
101
|
-
*/
|
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;
|
116
|
-
};
|
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;
|
154
|
-
};
|
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>>;
|
166
|
-
};
|
167
|
-
};
|
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
|
-
|
180
|
-
/**
|
181
|
-
* @file This file contains the main `WalletInfoModal` component, which serves as the primary UI for viewing wallet details and transaction history.
|
182
|
-
*/
|
183
|
-
|
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;
|
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;
|
212
|
-
};
|
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. */
|
223
|
-
transactionsPool: TransactionPool<TR, T>;
|
224
|
-
/** An array of all chains supported by the application. */
|
225
|
-
appChains: Chain[];
|
226
|
-
}
|
227
|
-
/**
|
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.
|
230
|
-
*
|
231
|
-
* @param {WalletInfoModalProps<TR, T> & { ... }} props - The component props.
|
232
|
-
* @returns {JSX.Element | null} The rendered modal or null if not open.
|
233
|
-
*/
|
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;
|
239
|
-
|
240
|
-
type CustomHashLinkProps = Parameters<typeof HashLink>[0];
|
241
|
-
interface ToastTransactionKeyProps<TR, T extends Transaction<TR>> extends Pick<WalletInfoModalProps<TR, T>, 'transactionsPool'> {
|
242
|
-
/** The transaction object to display identifiers for. */
|
243
|
-
tx: T;
|
244
|
-
/** An array of supported chain objects, used for generating explorer links. */
|
245
|
-
appChains: Chain[];
|
246
|
-
/** The visual variant, which applies different container styles. */
|
247
|
-
variant?: 'toast' | 'history';
|
248
|
-
/** Optional additional CSS classes for the container. */
|
249
|
-
className?: string;
|
250
|
-
/**
|
251
|
-
* An optional render prop to allow for complete customization of how the hash link is rendered.
|
252
|
-
* If not provided, the default `HashLink` component will be used.
|
253
|
-
*/
|
254
|
-
renderHashLink?: (props: CustomHashLinkProps) => ReactNode;
|
255
|
-
}
|
256
|
-
/**
|
257
|
-
* A component that intelligently displays the relevant keys and hashes for a transaction.
|
258
|
-
* It handles different tracker types (EVM, Gelato, Safe) and statuses (e.g., replaced transactions).
|
259
|
-
*
|
260
|
-
* @param {ToastTransactionKeyProps<TR, T>} props - The component props.
|
261
|
-
* @returns {JSX.Element} The rendered component.
|
262
|
-
*/
|
263
|
-
declare function TransactionKey<TR, T extends Transaction<TR>>({ tx, appChains, transactionsPool, variant, className, renderHashLink, }: ToastTransactionKeyProps<TR, T>): react_jsx_runtime.JSX.Element | null;
|
264
|
-
|
265
|
-
/**
|
266
|
-
* @file This file contains the `ToastTransaction` component, which serves as the main body for a transaction notification toast.
|
267
|
-
*/
|
268
|
-
|
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];
|
272
|
-
/** Props provided to custom action buttons like 'Wallet Info', 'Speed Up', or 'Cancel'. */
|
273
|
-
type CustomActionButtonProps = {
|
274
|
-
onClick: () => void;
|
275
|
-
children: ReactNode;
|
276
|
-
};
|
277
|
-
/**
|
278
|
-
* Defines the structure for the `customization` prop, allowing users to override
|
279
|
-
* default sub-components with their own implementations.
|
280
|
-
*/
|
281
|
-
type ToastTransactionCustomization<TR, T extends Transaction<TR>> = {
|
282
|
-
components?: {
|
283
|
-
/** Override the default title/description component. */
|
284
|
-
statusAwareText?: (props: CustomStatusAwareTextProps) => ReactNode;
|
285
|
-
/** Override the default component for displaying transaction keys/hashes. */
|
286
|
-
transactionKey?: (props: CustomTransactionKeyProps<TR, T>) => ReactNode;
|
287
|
-
/** Override the default status badge component. */
|
288
|
-
statusBadge?: (props: CustomStatusBadgeProps<TR, T>) => ReactNode;
|
289
|
-
/** Override the default "Open wallet info" button. */
|
290
|
-
walletInfoButton?: (props: CustomActionButtonProps) => ReactNode;
|
291
|
-
/** Override the default "Speed Up" button. */
|
292
|
-
speedUpButton?: (props: CustomActionButtonProps) => ReactNode;
|
293
|
-
/** Override the default "Cancel" button. */
|
294
|
-
cancelButton?: (props: CustomActionButtonProps) => ReactNode;
|
295
|
-
};
|
296
|
-
};
|
297
|
-
type ToastTransactionProps<TR, T extends Transaction<TR>> = {
|
298
|
-
/** The transaction object to display in the toast. */
|
299
|
-
tx: T;
|
300
|
-
/** A function to open the main wallet info modal. If not provided, the button will not be rendered. */
|
301
|
-
openWalletInfoModal?: (value: boolean) => void;
|
302
|
-
/** An array of supported chain objects, used for displaying network information. */
|
303
|
-
appChains: Chain[];
|
304
|
-
/** An optional custom icon to display instead of the default chain icon. */
|
305
|
-
icon?: ReactNode;
|
306
|
-
/** Optional additional CSS classes for the toast container. */
|
307
|
-
className?: string;
|
308
|
-
/** 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;
|
312
|
-
/** Props from `react-toastify` to control the toast itself. */
|
313
|
-
closeToast?: ToastContentProps['closeToast'];
|
314
|
-
toastProps?: ToastContainerProps;
|
315
|
-
} & Pick<WalletInfoModalProps<TR, T>, 'transactionsPool'>;
|
316
|
-
/**
|
317
|
-
* A composite component that renders the content for a transaction toast notification.
|
318
|
-
* It is highly customizable and includes actions for speeding up or canceling transactions
|
319
|
-
* when they are in a pending state.
|
320
|
-
*
|
321
|
-
* @template TR The generic type for the transaction tracker registry.
|
322
|
-
* @template T The generic type for the transaction object.
|
323
|
-
* @param {ToastTransactionProps<TR, T>} props The component props.
|
324
|
-
* @returns {JSX.Element} The rendered toast body.
|
325
|
-
*/
|
326
|
-
declare function ToastTransaction<TR, T extends Transaction<TR>>({ openWalletInfoModal, tx, transactionsPool, appChains, icon, className, customization, config, }: ToastTransactionProps<TR, T>): JSX.Element;
|
327
|
-
|
328
|
-
type TxErrorBlockProps = {
|
329
|
-
/** The error message string to display. If undefined, the component renders nothing. */
|
330
|
-
error?: string;
|
331
|
-
/** Optional additional CSS classes for the container. */
|
332
|
-
className?: string;
|
333
|
-
};
|
334
|
-
/**
|
335
|
-
* A component that displays a formatted block for a transaction error message.
|
336
|
-
* It includes a title, an icon, the error message in a scrollable area,
|
337
|
-
* and a button to copy the message to the clipboard.
|
338
|
-
*
|
339
|
-
* @param {TxErrorBlockProps} props - The component props.
|
340
|
-
* @returns {JSX.Element | null} The rendered error block, or null if no error is provided.
|
341
|
-
*/
|
342
|
-
declare function TxErrorBlock({ error, className }: TxErrorBlockProps): JSX.Element | null;
|
343
|
-
|
344
|
-
/**
|
345
|
-
* @file This file contains the `TxInfoBlock` component, which displays key details about a transaction.
|
346
|
-
*/
|
347
|
-
|
348
|
-
type CustomInfoRowProps = {
|
349
|
-
label: ReactNode;
|
350
|
-
value: ReactNode;
|
351
|
-
};
|
352
|
-
/**
|
353
|
-
* Defines the customization options for the `TxInfoBlock` component.
|
354
|
-
*/
|
355
|
-
type TxInfoBlockCustomization<TR, T extends Transaction<TR>> = {
|
356
|
-
components?: {
|
357
|
-
/** A render prop to replace the default label-value row component. */
|
358
|
-
infoRow?: (props: CustomInfoRowProps) => ReactNode;
|
359
|
-
/**
|
360
|
-
* A render prop to customize the rendering of the transaction keys/hashes.
|
361
|
-
* This is passed down to the underlying `TransactionKey` component.
|
362
|
-
*/
|
363
|
-
transactionKey?: ToastTransactionKeyProps<TR, T>['renderHashLink'];
|
364
|
-
};
|
365
|
-
};
|
366
|
-
type TxInfoBlockProps<TR, T extends Transaction<TR>> = {
|
367
|
-
tx: T & {
|
368
|
-
desiredChainID?: number;
|
369
|
-
};
|
370
|
-
appChains: Chain[];
|
371
|
-
transactionsPool: TransactionPool<TR, T>;
|
372
|
-
className?: string;
|
373
|
-
customization?: TxInfoBlockCustomization<TR, T>;
|
374
|
-
};
|
375
|
-
/**
|
376
|
-
* A component that displays a block of essential transaction details,
|
377
|
-
* such as network, start time, and relevant hashes/keys.
|
378
|
-
*
|
379
|
-
* @param {object} props - The component props.
|
380
|
-
* @returns {JSX.Element} The rendered info block.
|
381
|
-
*/
|
382
|
-
declare function TxInfoBlock<TR, T extends Transaction<TR>>({ tx, appChains, transactionsPool, className, customization, }: TxInfoBlockProps<TR, T>): JSX.Element;
|
383
|
-
|
384
|
-
/**
|
385
|
-
* @file This file contains the `TxProgressIndicator` component, a visual step-by-step progress bar for transactions.
|
386
|
-
*/
|
387
|
-
|
388
|
-
type StepStatus = 'active' | 'completed' | 'error' | 'inactive' | 'replaced';
|
389
|
-
type StepProps = {
|
390
|
-
status: StepStatus;
|
391
|
-
label: string;
|
392
|
-
isFirst?: boolean;
|
393
|
-
isLast?: boolean;
|
394
|
-
className?: string;
|
395
|
-
};
|
396
|
-
interface TxProgressIndicatorProps {
|
397
|
-
isProcessing?: boolean;
|
398
|
-
isSucceed?: boolean;
|
399
|
-
isFailed?: boolean;
|
400
|
-
isReplaced?: boolean;
|
401
|
-
className?: string;
|
402
|
-
/** A custom component to use instead of the default `Step`. */
|
403
|
-
StepComponent?: ComponentType<StepProps>;
|
404
|
-
}
|
405
|
-
/**
|
406
|
-
* A 3-step progress indicator that visually represents the lifecycle of a transaction.
|
407
|
-
*
|
408
|
-
* @param {TxProgressIndicatorProps} props - The component props.
|
409
|
-
* @returns {JSX.Element} The rendered progress indicator.
|
410
|
-
*/
|
411
|
-
declare function TxProgressIndicator({ isProcessing, isSucceed, isFailed, isReplaced, className, StepComponent, }: TxProgressIndicatorProps): JSX.Element;
|
412
|
-
|
413
|
-
/**
|
414
|
-
* @file This file contains the `TxStatusVisual` component, which displays a large icon representing the transaction's status.
|
415
|
-
*/
|
416
|
-
|
417
|
-
type TxStatusVisualProps = {
|
418
|
-
/** True if the transaction is currently being processed (e.g., in the mempool). */
|
419
|
-
isProcessing?: boolean;
|
420
|
-
/** True if the transaction has successfully completed. */
|
421
|
-
isSucceed?: boolean;
|
422
|
-
/** True if the transaction has failed or was reverted. */
|
423
|
-
isFailed?: boolean;
|
424
|
-
/** True if the transaction was replaced (e.g., sped up). */
|
425
|
-
isReplaced?: boolean;
|
426
|
-
};
|
427
|
-
/**
|
428
|
-
* A component that renders a large, animated icon to visually represent the
|
429
|
-
* current state of a transaction within the tracking modal.
|
430
|
-
*
|
431
|
-
* @param {TxStatusVisualProps} props - The component props.
|
432
|
-
* @returns {JSX.Element} The rendered visual status indicator.
|
433
|
-
*/
|
434
|
-
declare function TxStatusVisual({ isProcessing, isSucceed, isFailed, isReplaced }: TxStatusVisualProps): JSX.Element;
|
435
|
-
|
436
|
-
/** Props provided to a custom header component. */
|
437
|
-
type CustomHeaderProps = {
|
438
|
-
onClose: (txKey?: string) => void;
|
439
|
-
};
|
440
|
-
/** Props provided to a custom footer component. */
|
441
|
-
type CustomFooterProps = {
|
442
|
-
onClose: (txKey?: string) => void;
|
443
|
-
onOpenWalletInfo: () => void;
|
444
|
-
onRetry?: () => void;
|
445
|
-
onSpeedUp?: () => void;
|
446
|
-
onCancel?: () => void;
|
447
|
-
isProcessing?: boolean;
|
448
|
-
};
|
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
|
-
/**
|
452
|
-
* Defines the customization options for the TrackingTxModal.
|
453
|
-
* Allows overriding modal behavior, animations, and individual UI components.
|
454
|
-
*/
|
455
|
-
type TrackingTxModalCustomization<TR, T extends Transaction<TR>> = {
|
456
|
-
/** Custom props to pass to the underlying Radix UI `Dialog.Content` component. */
|
457
|
-
modalProps?: Partial<ComponentPropsWithoutRef<typeof Dialog.Content>>;
|
458
|
-
/** Custom Framer Motion animation properties for the modal's entrance and exit. */
|
459
|
-
motionProps?: MotionProps;
|
460
|
-
/** A record of custom components to override parts of the modal's UI. */
|
461
|
-
components?: {
|
462
|
-
header?: (props: CustomHeaderProps) => ReactNode;
|
463
|
-
footer?: (props: CustomFooterProps) => ReactNode;
|
464
|
-
statusVisual?: (props: TxStatusVisualProps) => ReactNode;
|
465
|
-
progressIndicator?: (props: TxProgressIndicatorProps) => ReactNode;
|
466
|
-
infoBlock?: (props: TxInfoBlockProps<TR, T>) => ReactNode;
|
467
|
-
errorBlock?: (props: TxErrorBlockProps) => ReactNode;
|
468
|
-
};
|
469
|
-
};
|
470
|
-
interface TrackingTxModalProps<TR, T extends Transaction<TR>> extends Partial<Pick<ITxTrackingStore<TR, T, ActionTxKey>, 'handleTransaction' | 'initialTx'>> {
|
471
|
-
/** A function to close the modal. */
|
472
|
-
onClose: (txKey?: string) => void;
|
473
|
-
/** A function to open the main wallet info modal. */
|
474
|
-
onOpenWalletInfo: () => void;
|
475
|
-
/** Optional additional CSS classes for the modal's container. */
|
476
|
-
className?: string;
|
477
|
-
/** 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;
|
487
|
-
}
|
488
|
-
/**
|
489
|
-
* A detailed modal that displays the real-time status and lifecycle of a transaction.
|
490
|
-
* It opens automatically for transactions initiated with `withTrackedModal: true`.
|
491
|
-
*
|
492
|
-
* @template TR - The generic type for the transaction tracker registry.
|
493
|
-
* @template T - The generic type for the transaction object.
|
494
|
-
* @param {TrackingTxModalProps<TR, T>} props - The component props.
|
495
|
-
* @returns {JSX.Element} The rendered tracking modal.
|
496
|
-
*/
|
497
|
-
declare function TrackingTxModal<TR, T extends Transaction<TR>>({ onClose, onOpenWalletInfo, className, customization, appChains, transactionsPool, actions, handleTransaction, config, initialTx, }: TrackingTxModalProps<TR, T>): JSX.Element;
|
498
|
-
|
499
|
-
/**
|
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.
|
502
|
-
*/
|
503
|
-
/**
|
504
|
-
* Defines the complete structure for all customizable text labels used throughout the transaction tracking UI components.
|
505
|
-
*/
|
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;
|
569
|
-
};
|
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;
|
576
|
-
};
|
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
|
-
};
|
598
|
-
};
|
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;
|
609
|
-
};
|
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;
|
622
|
-
};
|
623
|
-
};
|
624
|
-
|
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 };
|