@tuwaio/nova-transactions 0.5.3 → 0.7.0
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 +47 -107
- package/dist/{TransactionsInfoModal-DQqtLb9z.d.cts → TransactionsInfoModal-B91DxCMH.d.cts} +443 -53
- package/dist/{TransactionsInfoModal-DQqtLb9z.d.ts → TransactionsInfoModal-B91DxCMH.d.ts} +443 -53
- package/dist/chunk-AIK4Z25Y.cjs +2 -0
- package/dist/chunk-IREUZCOG.js +2 -0
- package/dist/index.cjs +1 -1
- package/dist/index.css +0 -3
- package/dist/index.d.cts +2 -2
- package/dist/index.d.ts +2 -2
- package/dist/index.js +1 -1
- package/dist/providers/index.cjs +1 -1
- package/dist/providers/index.d.cts +16 -11
- package/dist/providers/index.d.ts +16 -11
- package/dist/providers/index.js +1 -1
- package/package.json +27 -28
- package/dist/chunk-2FWAGZOY.js +0 -2
- package/dist/chunk-BJO47ZBY.cjs +0 -2
|
@@ -10,6 +10,7 @@ import { MotionProps } from 'framer-motion';
|
|
|
10
10
|
* @file This file contains the `HashLink` component, a UI element for displaying
|
|
11
11
|
* blockchain hashes with copy-to-clipboard and block explorer link functionality.
|
|
12
12
|
*/
|
|
13
|
+
/** Props of {@link HashLink}. */
|
|
13
14
|
type HashLinkProps = {
|
|
14
15
|
/** The full hash string to display and copy (e.g., a transaction hash or wallet address). */
|
|
15
16
|
hash: string;
|
|
@@ -35,12 +36,20 @@ type HashLinkProps = {
|
|
|
35
36
|
linkIcon?: string;
|
|
36
37
|
};
|
|
37
38
|
};
|
|
39
|
+
/**
|
|
40
|
+
* A shortened hash with a copy button, linked to `explorerUrl` (opened in a new tab) when it is set.
|
|
41
|
+
*
|
|
42
|
+
* @param props - See {@link HashLinkProps}.
|
|
43
|
+
* @returns The hash element.
|
|
44
|
+
*/
|
|
38
45
|
declare function HashLink({ label, hash, explorerUrl, variant, className, classNames }: HashLinkProps): react.JSX.Element;
|
|
39
46
|
|
|
40
47
|
/**
|
|
41
|
-
* @file This file contains the `StatusAwareText` component, which displays different text based on a transaction's
|
|
48
|
+
* @file This file contains the `StatusAwareText` component, which displays different text based on a transaction's
|
|
49
|
+
* status.
|
|
42
50
|
*/
|
|
43
51
|
|
|
52
|
+
/** Props of {@link StatusAwareText}. */
|
|
44
53
|
type StatusAwareTextProps = {
|
|
45
54
|
/** The current status of the transaction, used to select the correct text and color. */
|
|
46
55
|
txStatus?: TransactionStatus;
|
|
@@ -61,6 +70,9 @@ type StatusAwareTextProps = {
|
|
|
61
70
|
/**
|
|
62
71
|
* A component that renders text conditionally based on a transaction's status.
|
|
63
72
|
* It's designed to work with the `title` and `description` fields of a transaction object.
|
|
73
|
+
*
|
|
74
|
+
* @param props - See {@link StatusAwareTextProps}.
|
|
75
|
+
* @returns The text, or `null` when there is neither `source` nor `fallback`.
|
|
64
76
|
*/
|
|
65
77
|
declare function StatusAwareText({ txStatus, source, fallback, variant, className, applyColor, }: StatusAwareTextProps): ReactNode;
|
|
66
78
|
|
|
@@ -213,18 +225,24 @@ type ToastValidationErrorProps = {
|
|
|
213
225
|
* - Scrollable monospace message body
|
|
214
226
|
* - One-click copy-to-clipboard with feedback
|
|
215
227
|
*
|
|
228
|
+
* `useNovaTransactionsError` (from `@tuwaio/nova-transactions/providers`) shows it for you; render it yourself only for a
|
|
229
|
+
* custom toast.
|
|
230
|
+
*
|
|
231
|
+
* @param props - See {@link ToastValidationErrorProps}.
|
|
232
|
+
* @returns The toast body.
|
|
233
|
+
*
|
|
216
234
|
* @example
|
|
217
235
|
* ```tsx
|
|
218
|
-
*
|
|
219
|
-
*
|
|
220
|
-
*
|
|
221
|
-
*
|
|
222
|
-
*
|
|
223
|
-
*
|
|
224
|
-
*
|
|
225
|
-
*
|
|
226
|
-
*
|
|
227
|
-
*
|
|
236
|
+
* import { ToastValidationError } from '@tuwaio/nova-transactions';
|
|
237
|
+
* import { VALIDATION_ERROR_CONTAINER_ID } from '@tuwaio/nova-transactions/providers';
|
|
238
|
+
* import { toast } from 'react-toastify';
|
|
239
|
+
*
|
|
240
|
+
* export function showValidationError(error: Error & { field?: string }) {
|
|
241
|
+
* toast(() => <ToastValidationError message={error.message} fieldName={error.field} />, {
|
|
242
|
+
* containerId: VALIDATION_ERROR_CONTAINER_ID,
|
|
243
|
+
* type: 'error',
|
|
244
|
+
* });
|
|
245
|
+
* }
|
|
228
246
|
* ```
|
|
229
247
|
*/
|
|
230
248
|
declare function ToastValidationError({ message, rawError, fieldName, className, customization, }: ToastValidationErrorProps): JSX.Element;
|
|
@@ -240,6 +258,7 @@ declare function ToastValidationError({ message, rawError, fieldName, className,
|
|
|
240
258
|
type NovaTransactionsLabels = {
|
|
241
259
|
/** Labels for the main wallet information modal. */
|
|
242
260
|
transactionsModal: {
|
|
261
|
+
/** Labels of the transaction history. */
|
|
243
262
|
history: {
|
|
244
263
|
/** The title for the transaction history section. */
|
|
245
264
|
title: string;
|
|
@@ -281,15 +300,22 @@ type NovaTransactionsLabels = {
|
|
|
281
300
|
gelato: string;
|
|
282
301
|
/** Label for a Safe Transaction Hash. */
|
|
283
302
|
safe: string;
|
|
303
|
+
/** Label for an ERC-4337 UserOperation Hash. */
|
|
304
|
+
erc4337: string;
|
|
284
305
|
/** Label for the original transaction hash (before replacement). */
|
|
285
306
|
original: string;
|
|
286
307
|
/** Label for the new transaction hash that replaced the original. */
|
|
287
308
|
replaced: string;
|
|
288
309
|
/** Default label for a standard transaction hash. */
|
|
289
310
|
default: string;
|
|
290
|
-
/**
|
|
311
|
+
/**
|
|
312
|
+
* Special label for the most recent blockhash. This is used for the "Recent Blockhash" field in the transaction
|
|
313
|
+
* details modal.
|
|
314
|
+
*/
|
|
291
315
|
recentBlockhash: string;
|
|
292
|
-
/**
|
|
316
|
+
/**
|
|
317
|
+
* Special label for the Solana signature. This is used for the "Signature" field in the transaction details modal.
|
|
318
|
+
*/
|
|
293
319
|
solana: string;
|
|
294
320
|
};
|
|
295
321
|
/** Labels for the transaction information block. */
|
|
@@ -441,15 +467,17 @@ type NovaTransactionsLabels = {
|
|
|
441
467
|
errorContext: string;
|
|
442
468
|
/** Label for the Full Payload. */
|
|
443
469
|
fullPayload: string;
|
|
444
|
-
/** Label for the RPC URL. */
|
|
445
|
-
rpcUrl: string;
|
|
446
470
|
/** Label for the Replaced Hash. */
|
|
447
471
|
replacedHash: string;
|
|
448
472
|
/** Labels for the sync status indicator. */
|
|
449
473
|
syncStatus: {
|
|
474
|
+
/** Badge shown while the transaction is not yet saved on the server (`syncStatus: 'pending-sync'`). */
|
|
450
475
|
pending: string;
|
|
476
|
+
/** Tooltip of the `pending` badge. */
|
|
451
477
|
pendingTooltip: string;
|
|
478
|
+
/** Badge shown when the transaction is saved on the server (`syncStatus: 'synced'`). */
|
|
452
479
|
synced: string;
|
|
480
|
+
/** Tooltip of the `synced` badge. */
|
|
453
481
|
syncedTooltip: string;
|
|
454
482
|
};
|
|
455
483
|
};
|
|
@@ -527,21 +555,53 @@ type NovaTransactionsProviderProps<T extends Transaction> = {
|
|
|
527
555
|
*/
|
|
528
556
|
declare function NovaTransactionsProvider<T extends Transaction>({ adapter, connectedWalletAddress, connectedAdapterType, transactionsPool, initialTx, executeTxAction, closeTxTrackedModal, labels, features, customization, pagination, ...toastProps }: NovaTransactionsProviderProps<T>): react.JSX.Element;
|
|
529
557
|
|
|
558
|
+
/**
|
|
559
|
+
* Props of {@link TransactionKey}.
|
|
560
|
+
*
|
|
561
|
+
* @typeParam T - The transaction type of the Pulsar store.
|
|
562
|
+
*/
|
|
530
563
|
type TransactionKeyProps<T extends Transaction> = Pick<NovaTransactionsProviderProps<T>, 'adapter'> & {
|
|
564
|
+
/** The transaction. */
|
|
531
565
|
tx: T;
|
|
566
|
+
/** Layout: `'toast'` adds a top border and spacing. Defaults to `'toast'`. */
|
|
532
567
|
variant?: 'toast' | 'history';
|
|
568
|
+
/** Classes of the container. */
|
|
533
569
|
className?: string;
|
|
570
|
+
/**
|
|
571
|
+
* Renders each hash instead of {@link HashLink}.
|
|
572
|
+
*
|
|
573
|
+
* @param props - The props the default `HashLink` would receive.
|
|
574
|
+
* @returns The rendered hash.
|
|
575
|
+
*/
|
|
534
576
|
renderHashLink?: (props: HashLinkProps) => ReactNode;
|
|
577
|
+
/** Number of confirmations, shown below the hashes when it is above 0. */
|
|
535
578
|
confirmations?: number;
|
|
536
579
|
/** ClassNames to pass to HashLink components (default and replaced hash) */
|
|
537
580
|
hashLinkClassNames?: HashLinkProps['classNames'];
|
|
538
581
|
/** ClassNames for original hash link in replaced transactions (falls back to hashLinkClassNames) */
|
|
539
582
|
originalHashLinkClassNames?: HashLinkProps['classNames'];
|
|
540
583
|
};
|
|
584
|
+
/**
|
|
585
|
+
* The identifiers of a transaction: the key of its tracker when it differs from the on-chain hash (Safe transaction
|
|
586
|
+
* hash, Gelato task ID, ERC-4337 user operation hash, Solana signature), and the on-chain hash; for a replaced
|
|
587
|
+
* transaction, the original and the replacing hash. Hashes link to the explorer URL of the adapter's
|
|
588
|
+
* `getExplorerTxUrl` when there is one.
|
|
589
|
+
*
|
|
590
|
+
* @typeParam T - The transaction type of the Pulsar store.
|
|
591
|
+
* @param props - See {@link TransactionKeyProps}.
|
|
592
|
+
* @returns The identifiers, or `null` when no adapter matches the transaction.
|
|
593
|
+
*/
|
|
541
594
|
declare function TransactionKey<T extends Transaction>({ tx, adapter, variant, className, renderHashLink, confirmations, hashLinkClassNames, originalHashLinkClassNames, }: TransactionKeyProps<T>): react.JSX.Element | null;
|
|
542
595
|
|
|
596
|
+
/**
|
|
597
|
+
* Props of {@link TransactionStatusBadge}.
|
|
598
|
+
*
|
|
599
|
+
* @typeParam T - The transaction type of the Pulsar store.
|
|
600
|
+
*/
|
|
543
601
|
type TransactionStatusBadgeProps<T extends Transaction> = {
|
|
602
|
+
/** The transaction whose status is shown. */
|
|
544
603
|
tx: T;
|
|
604
|
+
/** Classes of the badge. */
|
|
545
605
|
className?: string;
|
|
546
606
|
/** Granular class names for sub-elements */
|
|
547
607
|
classNames?: {
|
|
@@ -553,26 +613,54 @@ type TransactionStatusBadgeProps<T extends Transaction> = {
|
|
|
553
613
|
label?: string;
|
|
554
614
|
};
|
|
555
615
|
};
|
|
616
|
+
/**
|
|
617
|
+
* A colored badge with an icon and the label of the transaction status: pending (while `tx.pending`), success, failed
|
|
618
|
+
* or replaced, or a neutral badge when the status is not set.
|
|
619
|
+
*
|
|
620
|
+
* @typeParam T - The transaction type of the Pulsar store.
|
|
621
|
+
* @param props - See {@link TransactionStatusBadgeProps}.
|
|
622
|
+
* @returns The badge.
|
|
623
|
+
*/
|
|
556
624
|
declare function TransactionStatusBadge<T extends Transaction>({ tx, className, classNames, }: TransactionStatusBadgeProps<T>): react.JSX.Element;
|
|
557
625
|
|
|
558
626
|
/**
|
|
559
|
-
* @file This file contains the `ToastTransaction` component, which serves as the main body for a transaction
|
|
627
|
+
* @file This file contains the `ToastTransaction` component, which serves as the main body for a transaction
|
|
628
|
+
* notification toast.
|
|
560
629
|
*/
|
|
561
630
|
|
|
562
|
-
|
|
631
|
+
/** Props of an action button of {@link ToastTransaction} (speed up, cancel, open transaction). */
|
|
632
|
+
type ToastTransactionActionButtonProps = {
|
|
633
|
+
/** Runs the action. */
|
|
563
634
|
onClick: () => void;
|
|
635
|
+
/** The button label. */
|
|
564
636
|
children: ReactNode;
|
|
637
|
+
/** Classes from `customization.classNames`. */
|
|
565
638
|
className?: string;
|
|
566
639
|
};
|
|
640
|
+
/**
|
|
641
|
+
* Class names and replacement components for the parts of {@link ToastTransaction}.
|
|
642
|
+
*
|
|
643
|
+
* @typeParam T - The transaction type of the Pulsar store.
|
|
644
|
+
*/
|
|
567
645
|
type ToastTransactionCustomization<T extends Transaction> = {
|
|
568
|
-
/**
|
|
646
|
+
/** Components that replace the default parts. */
|
|
569
647
|
components?: {
|
|
648
|
+
/** The title and the description. */
|
|
570
649
|
StatusAwareText?: ComponentType<StatusAwareTextProps>;
|
|
650
|
+
/** The hashes of the transaction. */
|
|
571
651
|
TransactionKey?: ComponentType<TransactionKeyProps<T>>;
|
|
652
|
+
/** The status badge. */
|
|
572
653
|
StatusBadge?: ComponentType<TransactionStatusBadgeProps<T>>;
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
654
|
+
/** The button that opens the transaction in the history modal. */
|
|
655
|
+
TxInfoButton?: ComponentType<ToastTransactionActionButtonProps>;
|
|
656
|
+
/** The speed-up button. */
|
|
657
|
+
SpeedUpButton?: ComponentType<ToastTransactionActionButtonProps>;
|
|
658
|
+
/** The cancel button. */
|
|
659
|
+
CancelButton?: ComponentType<ToastTransactionActionButtonProps>;
|
|
660
|
+
/**
|
|
661
|
+
* The badge with the number of confirmations, shown when it is above 0. It also receives `required` (the required
|
|
662
|
+
* confirmations) and `isSuccess`.
|
|
663
|
+
*/
|
|
576
664
|
ConfirmationsBadge?: ComponentType<{
|
|
577
665
|
count: number | string;
|
|
578
666
|
className?: string;
|
|
@@ -626,42 +714,100 @@ type ToastTransactionCustomization<T extends Transaction> = {
|
|
|
626
714
|
confirmationsBadge?: string;
|
|
627
715
|
};
|
|
628
716
|
};
|
|
717
|
+
/**
|
|
718
|
+
* Props of {@link ToastTransaction}.
|
|
719
|
+
*
|
|
720
|
+
* @typeParam T - The transaction type of the Pulsar store.
|
|
721
|
+
*/
|
|
629
722
|
type ToastTransactionProps<T extends Transaction> = {
|
|
723
|
+
/** The transaction to show. */
|
|
630
724
|
tx: T;
|
|
725
|
+
/**
|
|
726
|
+
* Opens the transaction history modal. The "open transaction" button is shown only when it is set and the connected
|
|
727
|
+
* wallet sent the transaction.
|
|
728
|
+
*
|
|
729
|
+
* @param txKey - Key of the transaction to open.
|
|
730
|
+
*/
|
|
631
731
|
openTxInfoModal?: (txKey?: string) => void;
|
|
732
|
+
/** Icon shown on the left. Defaults to the icon of the transaction's network. */
|
|
632
733
|
icon?: ReactNode;
|
|
734
|
+
/** Classes of the toast body. */
|
|
633
735
|
className?: string;
|
|
736
|
+
/** Class names and replacement components for the parts of the toast. */
|
|
634
737
|
customization?: ToastTransactionCustomization<T>;
|
|
738
|
+
/** Accepted because `react-toastify` passes it to toast content; not used by the component. */
|
|
635
739
|
closeToast?: ToastContentProps['closeToast'];
|
|
740
|
+
/** Accepted for compatibility; not used by the component. */
|
|
636
741
|
toastProps?: ToastContainerProps;
|
|
637
742
|
} & Pick<NovaTransactionsProviderProps<T>, 'adapter' | 'connectedWalletAddress'>;
|
|
743
|
+
/**
|
|
744
|
+
* The body of a transaction toast: the network icon, the title and description (colored by status), the hashes with
|
|
745
|
+
* explorer links, the status badge and the number of confirmations. For a pending, unconfirmed EVM transaction sent
|
|
746
|
+
* with
|
|
747
|
+
* MetaMask by the connected wallet, it offers speed-up and cancel (when the adapter has `speedUpTxAction` and
|
|
748
|
+
* `cancelTxAction`); otherwise, for transactions of the connected wallet, a button that opens the transaction in the
|
|
749
|
+
* history modal. `NovaTransactionsProvider` shows one for every tracked transaction.
|
|
750
|
+
*
|
|
751
|
+
* @typeParam T - The transaction type of the Pulsar store.
|
|
752
|
+
* @param props - See {@link ToastTransactionProps}.
|
|
753
|
+
* @returns The toast body.
|
|
754
|
+
*/
|
|
638
755
|
declare function ToastTransaction<T extends Transaction>({ openTxInfoModal, tx, icon, className, customization, connectedWalletAddress, adapter, }: ToastTransactionProps<T>): JSX.Element;
|
|
639
756
|
|
|
640
|
-
|
|
757
|
+
/** Props of the header of {@link TrackingTxModal} (`customization.components.Header`). */
|
|
758
|
+
type TrackingTxModalHeaderProps = {
|
|
759
|
+
/** Closes the modal. */
|
|
641
760
|
onClose: () => void;
|
|
761
|
+
/** The title: the transaction title, or its type, colored by status. */
|
|
642
762
|
title: ReactNode;
|
|
643
763
|
};
|
|
644
|
-
|
|
764
|
+
/** Props of the footer of {@link TrackingTxModal} (`customization.components.Footer`). */
|
|
765
|
+
type TrackingTxModalFooterProps = {
|
|
766
|
+
/** Closes the modal. */
|
|
645
767
|
onClose: () => void;
|
|
768
|
+
/** Opens the transaction history modal. */
|
|
646
769
|
onOpenAllTransactions: () => void;
|
|
770
|
+
/** Retries the failed submission; set only when retry is possible. */
|
|
647
771
|
onRetry?: () => void;
|
|
772
|
+
/** Speeds up the pending transaction; set only when it can be replaced. */
|
|
648
773
|
onSpeedUp?: () => void;
|
|
774
|
+
/** Cancels the pending transaction; set only when it can be replaced. */
|
|
649
775
|
onCancel?: () => void;
|
|
776
|
+
/** Whether the transaction is being submitted or is pending. */
|
|
650
777
|
isProcessing?: boolean;
|
|
778
|
+
/** Whether the submission or the transaction failed. */
|
|
651
779
|
isFailed?: boolean;
|
|
780
|
+
/** Whether the pending transaction can be sped up or canceled. */
|
|
652
781
|
canReplace?: boolean;
|
|
782
|
+
/** Address of the connected wallet. */
|
|
653
783
|
connectedWalletAddress?: string;
|
|
654
784
|
};
|
|
785
|
+
/**
|
|
786
|
+
* Props, class names and replacement components for the parts of {@link TrackingTxModal}.
|
|
787
|
+
*
|
|
788
|
+
* @typeParam T - The transaction type of the Pulsar store.
|
|
789
|
+
*/
|
|
655
790
|
type TrackingTxModalCustomization<T extends Transaction> = {
|
|
791
|
+
/** Props passed to the dialog panel (`DialogContent` from `@tuwaio/nova-core`). */
|
|
656
792
|
modalProps?: Partial<ComponentPropsWithoutRef<typeof DialogContent>>;
|
|
793
|
+
/**
|
|
794
|
+
* `framer-motion` props of the content container inside the dialog panel (for example `initial`, `animate` and
|
|
795
|
+
* `transition`). The panel itself animates with `modalAnimation` of `modalProps`.
|
|
796
|
+
*/
|
|
657
797
|
motionProps?: MotionProps;
|
|
658
|
-
/**
|
|
798
|
+
/** Components that replace the default parts. */
|
|
659
799
|
components?: {
|
|
660
|
-
|
|
661
|
-
|
|
800
|
+
/** The header with the title and the close button. */
|
|
801
|
+
Header?: ComponentType<TrackingTxModalHeaderProps>;
|
|
802
|
+
/** The footer with the action buttons. */
|
|
803
|
+
Footer?: ComponentType<TrackingTxModalFooterProps>;
|
|
804
|
+
/** The large status icon. */
|
|
662
805
|
StatusVisual?: ComponentType<TxStatusVisualProps>;
|
|
806
|
+
/** The steps of the transaction lifecycle. */
|
|
663
807
|
ProgressIndicator?: ComponentType<TxProgressIndicatorProps>;
|
|
808
|
+
/** The block with the network, time and hashes of the transaction. */
|
|
664
809
|
InfoBlock?: ComponentType<TxInfoBlockProps<T>>;
|
|
810
|
+
/** The error message block. */
|
|
665
811
|
ErrorBlock?: ComponentType<TxErrorBlockProps>;
|
|
666
812
|
};
|
|
667
813
|
/** Granular classNames for all sub-elements */
|
|
@@ -717,14 +863,41 @@ type TrackingTxModalCustomization<T extends Transaction> = {
|
|
|
717
863
|
classNames?: TxErrorBlockClassNames;
|
|
718
864
|
};
|
|
719
865
|
};
|
|
866
|
+
/**
|
|
867
|
+
* Props of {@link TrackingTxModal}. The Pulsar values come from `NovaTransactionsProvider`.
|
|
868
|
+
*
|
|
869
|
+
* @typeParam T - The transaction type of the Pulsar store.
|
|
870
|
+
*/
|
|
720
871
|
type TrackingTxModalProps<T extends Transaction> = Pick<NovaTransactionsProviderProps<T>, 'executeTxAction' | 'initialTx' | 'transactionsPool' | 'adapter' | 'connectedWalletAddress'> & {
|
|
872
|
+
/**
|
|
873
|
+
* Closes the modal.
|
|
874
|
+
*
|
|
875
|
+
* @param txKey - Key of the shown transaction, when it is in the pool.
|
|
876
|
+
*/
|
|
721
877
|
onClose: (txKey?: string) => void;
|
|
878
|
+
/** Opens the transaction history modal. */
|
|
722
879
|
onOpenAllTransactions: () => void;
|
|
880
|
+
/** Classes of the modal content. */
|
|
723
881
|
className?: string;
|
|
882
|
+
/** Props, class names and replacement components for the parts of the modal. */
|
|
724
883
|
customization?: TrackingTxModalCustomization<T>;
|
|
725
884
|
};
|
|
885
|
+
/**
|
|
886
|
+
* A modal that follows the latest submitted transaction step by step: it shows `initialTx` of the Pulsar store while
|
|
887
|
+
* the transaction is being submitted, then the transaction of the pool that `initialTx.lastTxKey` points to. It is
|
|
888
|
+
* open while `initialTx.withTrackedModal` is set and the transaction is not yet in the pool, and then while the
|
|
889
|
+
* transaction's `isTrackedModalOpen` is `true`. It shows the status, the lifecycle steps, the network, time and hashes,
|
|
890
|
+
* and the error, and offers speed-up and cancel (pending, unconfirmed EVM transactions sent with MetaMask, when the
|
|
891
|
+
* adapter has `speedUpTxAction` and `cancelTxAction`) and retry (after a failure, while `initialTx` has its
|
|
892
|
+
* `actionFunction`, through the adapter's `retryTxAction`). `NovaTransactionsProvider` renders it.
|
|
893
|
+
*
|
|
894
|
+
* @typeParam T - The transaction type of the Pulsar store.
|
|
895
|
+
* @param props - See {@link TrackingTxModalProps}.
|
|
896
|
+
* @returns The modal, or `null` when there is no transaction to show.
|
|
897
|
+
*/
|
|
726
898
|
declare function TrackingTxModal<T extends Transaction>({ adapter, onClose, onOpenAllTransactions, className, customization, transactionsPool, executeTxAction, initialTx, connectedWalletAddress, }: TrackingTxModalProps<T>): react.JSX.Element | null;
|
|
727
899
|
|
|
900
|
+
/** Class names of the parts of {@link TxErrorBlock}. */
|
|
728
901
|
type TxErrorBlockClassNames = {
|
|
729
902
|
/** Classes for the container */
|
|
730
903
|
container?: string;
|
|
@@ -741,8 +914,11 @@ type TxErrorBlockClassNames = {
|
|
|
741
914
|
/** Classes for the message text */
|
|
742
915
|
messageText?: string;
|
|
743
916
|
};
|
|
917
|
+
/** Props of {@link TxErrorBlock}. */
|
|
744
918
|
type TxErrorBlockProps = {
|
|
745
|
-
/**
|
|
919
|
+
/**
|
|
920
|
+
* The error to display. Can be a string or a TuwaErrorState. If undefined or empty, the component renders nothing.
|
|
921
|
+
*/
|
|
746
922
|
error?: string | TuwaErrorState;
|
|
747
923
|
/** Optional additional CSS classes for the container. */
|
|
748
924
|
className?: string;
|
|
@@ -753,23 +929,41 @@ type TxErrorBlockProps = {
|
|
|
753
929
|
* A component that displays a formatted block for a transaction error message.
|
|
754
930
|
* It includes a title, an icon, the error message in a scrollable area,
|
|
755
931
|
* and a button to copy the message to the clipboard.
|
|
932
|
+
*
|
|
933
|
+
* @param props - See {@link TxErrorBlockProps}.
|
|
934
|
+
* @returns The block, or `null` without an error.
|
|
756
935
|
*/
|
|
757
936
|
declare function TxErrorBlock({ error, className, classNames }: TxErrorBlockProps): react.JSX.Element | null;
|
|
758
937
|
|
|
759
|
-
|
|
938
|
+
/** Props of a row of {@link TxInfoBlock} (`customization.components.InfoRow`). */
|
|
939
|
+
type TxInfoBlockInfoRowProps = {
|
|
940
|
+
/** Label on the left. */
|
|
760
941
|
label: ReactNode;
|
|
942
|
+
/** Value on the right. */
|
|
761
943
|
value: ReactNode;
|
|
762
|
-
|
|
944
|
+
/** Classes of the parts of the row. */
|
|
945
|
+
classNames?: TxInfoBlockInfoRowClassNames;
|
|
763
946
|
};
|
|
764
|
-
|
|
947
|
+
/** Class names of a row of {@link TxInfoBlock}. */
|
|
948
|
+
type TxInfoBlockInfoRowClassNames = {
|
|
949
|
+
/** The row (from `customization.classNames.row`). */
|
|
765
950
|
row?: string;
|
|
951
|
+
/** The label (from `customization.classNames.rowLabel`). */
|
|
766
952
|
label?: string;
|
|
953
|
+
/** The value (from `customization.classNames.rowValue`). */
|
|
767
954
|
value?: string;
|
|
768
955
|
};
|
|
956
|
+
/**
|
|
957
|
+
* Class names and replacement parts for {@link TxInfoBlock}.
|
|
958
|
+
*
|
|
959
|
+
* @typeParam T - The transaction type of the Pulsar store.
|
|
960
|
+
*/
|
|
769
961
|
type TxInfoBlockCustomization<T extends Transaction> = {
|
|
770
|
-
/**
|
|
962
|
+
/** Components that replace the default parts. */
|
|
771
963
|
components?: {
|
|
772
|
-
|
|
964
|
+
/** A row with a label and a value (network, start time, slot…). */
|
|
965
|
+
InfoRow?: ComponentType<TxInfoBlockInfoRowProps>;
|
|
966
|
+
/** Renders each hash of the transaction key section (`renderHashLink` of `TransactionKey`). */
|
|
773
967
|
transactionKey?: TransactionKeyProps<T>['renderHashLink'];
|
|
774
968
|
};
|
|
775
969
|
/** Granular classNames for sub-elements */
|
|
@@ -790,10 +984,17 @@ type TxInfoBlockCustomization<T extends Transaction> = {
|
|
|
790
984
|
originalHashLink?: HashLinkProps['classNames'];
|
|
791
985
|
};
|
|
792
986
|
};
|
|
987
|
+
/**
|
|
988
|
+
* Props of {@link TxInfoBlock}.
|
|
989
|
+
*
|
|
990
|
+
* @typeParam T - The transaction type of the Pulsar store.
|
|
991
|
+
*/
|
|
793
992
|
type TxInfoBlockProps<T extends Transaction> = {
|
|
794
993
|
/** The transaction object to display, which can be a full transaction or an initial one. */
|
|
795
994
|
tx: T | InitialTransaction;
|
|
995
|
+
/** Classes of the block. */
|
|
796
996
|
className?: string;
|
|
997
|
+
/** Class names and replacement parts for the block. */
|
|
797
998
|
customization?: TxInfoBlockCustomization<T>;
|
|
798
999
|
} & Pick<NovaTransactionsProviderProps<T>, 'adapter'>;
|
|
799
1000
|
/**
|
|
@@ -802,6 +1003,7 @@ type TxInfoBlockProps<T extends Transaction> = {
|
|
|
802
1003
|
*/
|
|
803
1004
|
declare function TxInfoBlock<T extends Transaction>({ tx, adapter, className, customization }: TxInfoBlockProps<T>): react.JSX.Element | null;
|
|
804
1005
|
|
|
1006
|
+
/** State of a step of {@link TxProgressIndicator}, which sets its colors and icon. */
|
|
805
1007
|
type StepStatus = 'active' | 'completed' | 'error' | 'inactive' | 'replaced';
|
|
806
1008
|
/** ClassNames for step styling overrides */
|
|
807
1009
|
type StepClassNames = {
|
|
@@ -820,35 +1022,62 @@ type StepClassNames = {
|
|
|
820
1022
|
label?: string;
|
|
821
1023
|
}>>;
|
|
822
1024
|
};
|
|
1025
|
+
/** Props of a step of {@link TxProgressIndicator} (`StepComponent`). */
|
|
823
1026
|
type StepProps = {
|
|
1027
|
+
/** State of the step. */
|
|
824
1028
|
status: StepStatus;
|
|
1029
|
+
/** Label under the step. */
|
|
825
1030
|
label: string;
|
|
1031
|
+
/** Whether it is the first step; the default step draws no line before it. */
|
|
826
1032
|
isFirst?: boolean;
|
|
1033
|
+
/** Whether it is the last step (not used by the default step). */
|
|
827
1034
|
isLast?: boolean;
|
|
1035
|
+
/** Class names of the step (`stepClassNames` of the indicator). */
|
|
828
1036
|
classNames?: StepClassNames;
|
|
829
1037
|
};
|
|
1038
|
+
/** Props of {@link TxProgressIndicator}. */
|
|
830
1039
|
interface TxProgressIndicatorProps {
|
|
1040
|
+
/** Whether the transaction is being submitted or is pending. */
|
|
831
1041
|
isProcessing?: boolean;
|
|
1042
|
+
/** Whether the transaction succeeded. */
|
|
832
1043
|
isSucceed?: boolean;
|
|
1044
|
+
/** Whether the submission or the transaction failed. */
|
|
833
1045
|
isFailed?: boolean;
|
|
1046
|
+
/** Whether the transaction was replaced (sped up or canceled). */
|
|
834
1047
|
isReplaced?: boolean;
|
|
1048
|
+
/** Classes of the indicator. */
|
|
835
1049
|
className?: string;
|
|
1050
|
+
/** Component that renders each step. */
|
|
836
1051
|
StepComponent?: ComponentType<StepProps>;
|
|
837
1052
|
/** ClassNames for step customization */
|
|
838
1053
|
stepClassNames?: StepClassNames;
|
|
839
1054
|
}
|
|
1055
|
+
/**
|
|
1056
|
+
* Three steps of the transaction lifecycle, used by the tracking modal: "created" (always completed), "processing"
|
|
1057
|
+
* (active while processing, completed after) and a final step that shows success, failure or replacement.
|
|
1058
|
+
*
|
|
1059
|
+
* @param props - See {@link TxProgressIndicatorProps}.
|
|
1060
|
+
* @returns The indicator.
|
|
1061
|
+
*/
|
|
840
1062
|
declare function TxProgressIndicator({ isProcessing, isSucceed, isFailed, isReplaced, className, StepComponent, stepClassNames, }: TxProgressIndicatorProps): react.JSX.Element;
|
|
841
1063
|
|
|
842
1064
|
/**
|
|
843
|
-
* @file This file contains the `TxStatusVisual` component, which displays a large icon representing the transaction's
|
|
1065
|
+
* @file This file contains the `TxStatusVisual` component, which displays a large icon representing the transaction's
|
|
1066
|
+
* status.
|
|
1067
|
+
*/
|
|
1068
|
+
/**
|
|
1069
|
+
* State shown by {@link TxStatusVisual}: the first that applies of succeed, failed, replaced and processing, else
|
|
1070
|
+
* initializing.
|
|
844
1071
|
*/
|
|
845
|
-
type
|
|
1072
|
+
type TxStatusVisualStatusKey = 'succeed' | 'failed' | 'replaced' | 'processing' | 'initializing';
|
|
1073
|
+
/** Class names of the icon of {@link TxStatusVisual}. */
|
|
846
1074
|
type TxStatusVisualClassNames = {
|
|
847
1075
|
/** Base icon className applied to all statuses */
|
|
848
1076
|
icon?: string;
|
|
849
1077
|
/** Status-specific icon overrides */
|
|
850
|
-
statusOverrides?: Partial<Record<
|
|
1078
|
+
statusOverrides?: Partial<Record<TxStatusVisualStatusKey, string>>;
|
|
851
1079
|
};
|
|
1080
|
+
/** Props of {@link TxStatusVisual}. */
|
|
852
1081
|
type TxStatusVisualProps = {
|
|
853
1082
|
/** True if the transaction is currently being processed (e.g., in the mempool). */
|
|
854
1083
|
isProcessing?: boolean;
|
|
@@ -866,100 +1095,179 @@ type TxStatusVisualProps = {
|
|
|
866
1095
|
/**
|
|
867
1096
|
* A component that renders a large, animated icon to visually represent the
|
|
868
1097
|
* current state of a transaction within the tracking modal.
|
|
1098
|
+
*
|
|
1099
|
+
* @param props - See {@link TxStatusVisualProps}.
|
|
1100
|
+
* @returns The icon in its container.
|
|
869
1101
|
*/
|
|
870
1102
|
declare function TxStatusVisual({ isProcessing, isSucceed, isFailed, isReplaced, className: containerClassName, iconClassNames, }: TxStatusVisualProps): react.JSX.Element;
|
|
871
1103
|
|
|
872
|
-
/** Props
|
|
1104
|
+
/** Props of a field with a copy button in {@link TransactionDetails} (hash, sender, recipient, replaced hash). */
|
|
873
1105
|
type CopyableFieldProps = {
|
|
1106
|
+
/** Label shown above the field. */
|
|
874
1107
|
label: string;
|
|
1108
|
+
/** Value shown in the field and copied to the clipboard by the copy button. */
|
|
875
1109
|
value: string;
|
|
1110
|
+
/** Whether the value uses a monospace font. Defaults to `true`. */
|
|
876
1111
|
mono?: boolean;
|
|
1112
|
+
/** Classes of the field. */
|
|
877
1113
|
className?: string;
|
|
1114
|
+
/** Content shown instead of the value (the copy button still copies `value`); used for the explorer link. */
|
|
878
1115
|
children?: ReactNode;
|
|
1116
|
+
/** Classes of the parts of the field. */
|
|
879
1117
|
classNames?: {
|
|
1118
|
+
/** The label. */
|
|
880
1119
|
label?: string;
|
|
1120
|
+
/** The row with the value and the copy button. */
|
|
881
1121
|
container?: string;
|
|
1122
|
+
/** The value. */
|
|
882
1123
|
code?: string;
|
|
1124
|
+
/** The copy button. */
|
|
883
1125
|
copyButton?: string;
|
|
884
1126
|
};
|
|
885
1127
|
};
|
|
886
|
-
/** Props
|
|
1128
|
+
/** Props of a label and value pair in the execution data of {@link TransactionDetails}. */
|
|
887
1129
|
type DetailItemProps = {
|
|
1130
|
+
/** Label shown above the value. */
|
|
888
1131
|
label: string;
|
|
1132
|
+
/** The value. The default item renders nothing when it is `null`, `undefined` or an empty string. */
|
|
889
1133
|
value: string | number | null | undefined;
|
|
1134
|
+
/** Whether the value uses a smaller monospace font. Defaults to `false`. */
|
|
890
1135
|
mono?: boolean;
|
|
1136
|
+
/** Classes of the item. */
|
|
891
1137
|
className?: string;
|
|
1138
|
+
/** Classes of the parts of the item. */
|
|
892
1139
|
classNames?: {
|
|
1140
|
+
/** The label. */
|
|
893
1141
|
label?: string;
|
|
1142
|
+
/** The value. */
|
|
894
1143
|
value?: string;
|
|
895
1144
|
};
|
|
896
1145
|
};
|
|
897
|
-
/** Props
|
|
1146
|
+
/** Props of a row of the metadata section of {@link TransactionDetails} (adapter, times, tracker, connector…). */
|
|
898
1147
|
type MetadataRowProps = {
|
|
1148
|
+
/** Icon component (a Heroicons icon by default), rendered with a `className`. */
|
|
899
1149
|
icon: ComponentType<{
|
|
900
1150
|
className?: string;
|
|
901
1151
|
}>;
|
|
1152
|
+
/** Label shown on the left. */
|
|
902
1153
|
label: string;
|
|
1154
|
+
/** Value shown on the right. */
|
|
903
1155
|
children: ReactNode;
|
|
1156
|
+
/** Classes of the row. */
|
|
904
1157
|
className?: string;
|
|
1158
|
+
/** Classes of the parts of the row. */
|
|
905
1159
|
classNames?: {
|
|
1160
|
+
/** The icon. */
|
|
906
1161
|
icon?: string;
|
|
1162
|
+
/** The label. */
|
|
907
1163
|
label?: string;
|
|
1164
|
+
/** The value. */
|
|
908
1165
|
value?: string;
|
|
909
1166
|
};
|
|
910
1167
|
};
|
|
911
|
-
/**
|
|
1168
|
+
/**
|
|
1169
|
+
* Props of a code block with a copy button in {@link TransactionDetails} (input data, instructions, payload, error).
|
|
1170
|
+
*/
|
|
912
1171
|
type JsonBlockProps = {
|
|
1172
|
+
/** Label shown above the block. */
|
|
913
1173
|
label: string;
|
|
1174
|
+
/**
|
|
1175
|
+
* Data to show: strings as they are, other values as formatted JSON. The default block renders nothing for empty
|
|
1176
|
+
* values and empty objects.
|
|
1177
|
+
*/
|
|
914
1178
|
data: unknown;
|
|
1179
|
+
/** Classes of the block. */
|
|
915
1180
|
className?: string;
|
|
1181
|
+
/** Classes of the parts of the block. */
|
|
916
1182
|
classNames?: {
|
|
1183
|
+
/** The row with the label and the copy button. */
|
|
917
1184
|
header?: string;
|
|
1185
|
+
/** The label. */
|
|
918
1186
|
label?: string;
|
|
1187
|
+
/** The copy button. */
|
|
919
1188
|
copyButton?: string;
|
|
1189
|
+
/** The scrollable container of the code. */
|
|
920
1190
|
container?: string;
|
|
1191
|
+
/** The `<pre>` element with the code. */
|
|
921
1192
|
pre?: string;
|
|
922
1193
|
};
|
|
923
1194
|
};
|
|
1195
|
+
/** Class names and replacement components for the parts of {@link TransactionDetails}. */
|
|
924
1196
|
type TransactionDetailsCustomization = {
|
|
925
|
-
/**
|
|
1197
|
+
/** Classes added to the parts of the view. */
|
|
926
1198
|
classNames?: {
|
|
1199
|
+
/** The whole view. */
|
|
927
1200
|
container?: string;
|
|
1201
|
+
/** The header row with the back button and the title. */
|
|
928
1202
|
header?: string;
|
|
1203
|
+
/** The back button. */
|
|
929
1204
|
backButton?: string;
|
|
1205
|
+
/** The status icon in the main card. */
|
|
930
1206
|
statusIconContainer?: string;
|
|
1207
|
+
/** The title (the `transactionDetails.title` label). */
|
|
931
1208
|
title?: string;
|
|
1209
|
+
/** The subtitle under the title (the `transactionDetails.subtitle` label). */
|
|
932
1210
|
subtitle?: string;
|
|
1211
|
+
/** The headings of the metadata and execution data sections. */
|
|
933
1212
|
sectionHeader?: string;
|
|
1213
|
+
/** The main card with the status, hash, network, sender and recipient. */
|
|
934
1214
|
coreInfoCard?: string;
|
|
1215
|
+
/** The network badge in the main card. */
|
|
935
1216
|
networkBadge?: string;
|
|
1217
|
+
/** The metadata section. */
|
|
936
1218
|
metadataSection?: string;
|
|
1219
|
+
/** The execution data section. */
|
|
937
1220
|
executionSection?: string;
|
|
938
1221
|
};
|
|
939
|
-
/**
|
|
1222
|
+
/** Components that replace the default parts. */
|
|
940
1223
|
components?: {
|
|
1224
|
+
/** A card around a section (props: `children`, `className`). */
|
|
941
1225
|
SectionCard?: ComponentType<{
|
|
942
1226
|
children: ReactNode;
|
|
943
1227
|
className?: string;
|
|
944
1228
|
}>;
|
|
1229
|
+
/** A section heading (props: `children`, `className`). */
|
|
945
1230
|
SectionHeading?: ComponentType<{
|
|
946
1231
|
children: ReactNode;
|
|
947
1232
|
className?: string;
|
|
948
1233
|
}>;
|
|
1234
|
+
/** A field with a copy button. */
|
|
949
1235
|
CopyableField?: ComponentType<CopyableFieldProps>;
|
|
1236
|
+
/** A label and value pair. */
|
|
950
1237
|
DetailItem?: ComponentType<DetailItemProps>;
|
|
1238
|
+
/** A row of the metadata section. */
|
|
951
1239
|
MetadataRow?: ComponentType<MetadataRowProps>;
|
|
1240
|
+
/** A code block with a copy button. */
|
|
952
1241
|
JsonBlock?: ComponentType<JsonBlockProps>;
|
|
953
1242
|
};
|
|
954
1243
|
};
|
|
1244
|
+
/**
|
|
1245
|
+
* Props of {@link TransactionDetails}.
|
|
1246
|
+
*
|
|
1247
|
+
* @typeParam T - The transaction type of the Pulsar store.
|
|
1248
|
+
*/
|
|
955
1249
|
type TransactionDetailsProps<T extends Transaction> = Pick<NovaTransactionsProviderProps<T>, 'adapter'> & {
|
|
1250
|
+
/** The transaction to show. */
|
|
956
1251
|
tx: T;
|
|
1252
|
+
/** Called by the back button. */
|
|
957
1253
|
onBack: () => void;
|
|
1254
|
+
/** Classes of the view. */
|
|
958
1255
|
className?: string;
|
|
1256
|
+
/** Class names and replacement components for the parts of the view. */
|
|
959
1257
|
customization?: TransactionDetailsCustomization;
|
|
960
1258
|
};
|
|
961
1259
|
/**
|
|
962
|
-
*
|
|
1260
|
+
* A detailed view of one transaction, shown by {@link TransactionsHistory} when a transaction is selected: the status,
|
|
1261
|
+
* hash (linked to the explorer URL of the adapter's `getExplorerTxUrl`, when there is one), network, sender and
|
|
1262
|
+
* recipient; the metadata (adapter, submission and finish times, tracker, connector, confirmations, transaction key;
|
|
1263
|
+
* the RPC URL of the transaction is not shown, since it may contain an API key); and the execution data of the chain
|
|
1264
|
+
* (EVM: nonce, fees, value, replaced hash, input data; Solana: fee, slot, recent blockhash, instructions; Starknet:
|
|
1265
|
+
* contract address, actual fee), the payload and the error, and whether the transaction is saved on the server of the
|
|
1266
|
+
* Pulsar store (`syncStatus`). Values can be copied to the clipboard.
|
|
1267
|
+
*
|
|
1268
|
+
* @typeParam T - The transaction type of the Pulsar store.
|
|
1269
|
+
* @param props - See {@link TransactionDetailsProps}.
|
|
1270
|
+
* @returns The view.
|
|
963
1271
|
*/
|
|
964
1272
|
declare function TransactionDetails<T extends Transaction>({ tx, onBack, adapter, className, customization, }: TransactionDetailsProps<T>): react.JSX.Element;
|
|
965
1273
|
|
|
@@ -968,12 +1276,18 @@ declare function TransactionDetails<T extends Transaction>({ tx, onBack, adapter
|
|
|
968
1276
|
* in a list format for the transaction history view.
|
|
969
1277
|
*/
|
|
970
1278
|
|
|
971
|
-
|
|
1279
|
+
/** Props of the icon of {@link TransactionHistoryItem} (`customization.components.Icon`). */
|
|
1280
|
+
type TransactionHistoryItemIconProps = {
|
|
1281
|
+
/** Chain of the transaction. */
|
|
972
1282
|
chainId: number | string;
|
|
1283
|
+
/** Classes from `customization.classNames.icon`. */
|
|
973
1284
|
className?: string;
|
|
974
1285
|
};
|
|
975
|
-
|
|
1286
|
+
/** Props of the timestamp of {@link TransactionHistoryItem} (`customization.components.Timestamp`). */
|
|
1287
|
+
type TransactionHistoryItemTimestampProps = {
|
|
1288
|
+
/** Submission time of the transaction, in seconds (`localTimestamp`). */
|
|
976
1289
|
timestamp?: number;
|
|
1290
|
+
/** Classes from `customization.classNames.timestamp`. */
|
|
977
1291
|
className?: string;
|
|
978
1292
|
};
|
|
979
1293
|
/**
|
|
@@ -981,13 +1295,19 @@ type CustomTimestampProps = {
|
|
|
981
1295
|
* Allows styling of all sub-elements including icon, text, badge, and hash link.
|
|
982
1296
|
*/
|
|
983
1297
|
type TransactionHistoryItemCustomization<T extends Transaction> = {
|
|
984
|
-
/**
|
|
1298
|
+
/** Components that replace the default parts. */
|
|
985
1299
|
components?: {
|
|
986
|
-
|
|
1300
|
+
/** The network icon. */
|
|
1301
|
+
Icon?: ComponentType<TransactionHistoryItemIconProps>;
|
|
1302
|
+
/** The title (the transaction title, or its type). */
|
|
987
1303
|
Title?: ComponentType<StatusAwareTextProps>;
|
|
1304
|
+
/** The description. */
|
|
988
1305
|
Description?: ComponentType<StatusAwareTextProps>;
|
|
989
|
-
|
|
1306
|
+
/** The relative submission time ("5 minutes ago"). */
|
|
1307
|
+
Timestamp?: ComponentType<TransactionHistoryItemTimestampProps>;
|
|
1308
|
+
/** The status badge. */
|
|
990
1309
|
StatusBadge?: ComponentType<TransactionStatusBadgeProps<T>>;
|
|
1310
|
+
/** The hashes of the transaction. */
|
|
991
1311
|
TransactionKey?: ComponentType<TransactionKeyProps<T>>;
|
|
992
1312
|
};
|
|
993
1313
|
/** Custom class name generators for all sub-elements */
|
|
@@ -1028,6 +1348,11 @@ type TransactionHistoryItemCustomization<T extends Transaction> = {
|
|
|
1028
1348
|
originalHashCopyButton?: string;
|
|
1029
1349
|
};
|
|
1030
1350
|
};
|
|
1351
|
+
/**
|
|
1352
|
+
* Props of {@link TransactionHistoryItem}.
|
|
1353
|
+
*
|
|
1354
|
+
* @typeParam T - The transaction type of the Pulsar store.
|
|
1355
|
+
*/
|
|
1031
1356
|
type TransactionHistoryItemProps<T extends Transaction> = {
|
|
1032
1357
|
/** The transaction object to display. */
|
|
1033
1358
|
tx: T;
|
|
@@ -1040,16 +1365,31 @@ type TransactionHistoryItemProps<T extends Transaction> = {
|
|
|
1040
1365
|
/** Whether transaction details can be viewed by clicking on history items. */
|
|
1041
1366
|
canViewDetails?: boolean;
|
|
1042
1367
|
} & Pick<NovaTransactionsProviderProps<T>, 'adapter'>;
|
|
1368
|
+
/**
|
|
1369
|
+
* One transaction of the history list: the network icon, title, relative submission time (`dayjs` with the
|
|
1370
|
+
* `relativeTime` plugin, which this module adds to `dayjs` when it is imported), description, status badge and hashes.
|
|
1371
|
+
* Clicking the item (outside its links and buttons) calls `onSelectTx` when `canViewDetails` is `true`.
|
|
1372
|
+
*
|
|
1373
|
+
* @typeParam T - The transaction type of the Pulsar store.
|
|
1374
|
+
* @param props - See {@link TransactionHistoryItemProps}.
|
|
1375
|
+
* @returns The item.
|
|
1376
|
+
*/
|
|
1043
1377
|
declare function TransactionHistoryItem<T extends Transaction>({ tx, adapter, className, customization, onSelectTx, canViewDetails, }: TransactionHistoryItemProps<T>): JSX.Element;
|
|
1044
1378
|
|
|
1045
|
-
|
|
1379
|
+
/** Props of the placeholder of {@link TransactionsHistory} (no wallet connected, or no transactions). */
|
|
1380
|
+
type TransactionsHistoryPlaceholderProps = {
|
|
1381
|
+
/** The placeholder title. */
|
|
1046
1382
|
title: string;
|
|
1383
|
+
/** The placeholder message. */
|
|
1047
1384
|
message: string;
|
|
1385
|
+
/** Classes of the placeholder. */
|
|
1048
1386
|
className?: string;
|
|
1049
1387
|
};
|
|
1050
1388
|
/** Props exposed to a custom Loader component */
|
|
1051
1389
|
type TransactionsHistoryLoaderProps = {
|
|
1390
|
+
/** Classes from `customization.classNames.loaderContainer`. */
|
|
1052
1391
|
className?: string;
|
|
1392
|
+
/** Classes from `customization.classNames.loaderIcon`. */
|
|
1053
1393
|
iconClassName?: string;
|
|
1054
1394
|
};
|
|
1055
1395
|
/**
|
|
@@ -1119,7 +1459,7 @@ type TransactionsHistoryCustomization<T extends Transaction> = {
|
|
|
1119
1459
|
/** Custom components */
|
|
1120
1460
|
components?: {
|
|
1121
1461
|
/** Custom placeholder component */
|
|
1122
|
-
Placeholder?: ComponentType<
|
|
1462
|
+
Placeholder?: ComponentType<TransactionsHistoryPlaceholderProps>;
|
|
1123
1463
|
/** Custom history item component */
|
|
1124
1464
|
HistoryItem?: ComponentType<TransactionHistoryItemProps<T>>;
|
|
1125
1465
|
/** Custom loader component rendered at the bottom during pagination loading */
|
|
@@ -1128,8 +1468,15 @@ type TransactionsHistoryCustomization<T extends Transaction> = {
|
|
|
1128
1468
|
/** Customization for the detailed transaction view */
|
|
1129
1469
|
detailsCustomization?: TransactionDetailsCustomization;
|
|
1130
1470
|
};
|
|
1471
|
+
/**
|
|
1472
|
+
* Props of {@link TransactionsHistory}.
|
|
1473
|
+
*
|
|
1474
|
+
* @typeParam T - The transaction type of the Pulsar store.
|
|
1475
|
+
*/
|
|
1131
1476
|
type TransactionsHistoryProps<T extends Transaction> = Pick<NovaTransactionsProviderProps<T>, 'adapter' | 'transactionsPool' | 'connectedWalletAddress'> & {
|
|
1477
|
+
/** Classes of the list. */
|
|
1132
1478
|
className?: string;
|
|
1479
|
+
/** Class names and replacement components for the parts of the list and of the details view. */
|
|
1133
1480
|
customization?: TransactionsHistoryCustomization<T>;
|
|
1134
1481
|
/** Pagination state for infinite scroll. Uses TxInMemoryPagination from @tuwaio/pulsar-core. */
|
|
1135
1482
|
pagination?: TxInMemoryPagination;
|
|
@@ -1138,12 +1485,32 @@ type TransactionsHistoryProps<T extends Transaction> = Pick<NovaTransactionsProv
|
|
|
1138
1485
|
/** Whether transaction details can be viewed by clicking on history items. Defaults to true. */
|
|
1139
1486
|
canViewDetails?: boolean;
|
|
1140
1487
|
};
|
|
1488
|
+
/**
|
|
1489
|
+
* The transactions of the connected wallet (`selectAllTransactionsByActiveWallet` from `@tuwaio/pulsar-core`), newest
|
|
1490
|
+
* first, with a placeholder when no wallet is connected or there are no transactions. Selecting an item opens
|
|
1491
|
+
* {@link TransactionDetails} (when `canViewDetails` is `true`; `initialTxKey` opens one directly). With `pagination`,
|
|
1492
|
+
* it
|
|
1493
|
+
* calls `pagination.fetchNextPage(connectedWalletAddress)` when the end of the list becomes visible (an
|
|
1494
|
+
* `IntersectionObserver`) and shows a short error indicator when loading a page fails.
|
|
1495
|
+
*
|
|
1496
|
+
* @typeParam T - The transaction type of the Pulsar store.
|
|
1497
|
+
* @param props - See {@link TransactionsHistoryProps}.
|
|
1498
|
+
* @returns The list, or the details of the selected transaction.
|
|
1499
|
+
*/
|
|
1141
1500
|
declare function TransactionsHistory<T extends Transaction>({ adapter, connectedWalletAddress, transactionsPool, className, customization, pagination, initialTxKey, canViewDetails, }: TransactionsHistoryProps<T>): react.JSX.Element;
|
|
1142
1501
|
|
|
1143
|
-
|
|
1502
|
+
/** Props of the header of {@link TransactionsInfoModal} (`customization.components.Header`). */
|
|
1503
|
+
type TransactionsInfoModalHeaderProps = {
|
|
1504
|
+
/** Closes the modal. */
|
|
1144
1505
|
closeModal: () => void;
|
|
1145
1506
|
};
|
|
1507
|
+
/**
|
|
1508
|
+
* Props, class names and replacement components for the parts of {@link TransactionsInfoModal}.
|
|
1509
|
+
*
|
|
1510
|
+
* @typeParam T - The transaction type of the Pulsar store.
|
|
1511
|
+
*/
|
|
1146
1512
|
type TransactionsInfoModalCustomization<T extends Transaction> = {
|
|
1513
|
+
/** Props passed to the dialog panel (`DialogContent` from `@tuwaio/nova-core`). */
|
|
1147
1514
|
modalProps?: Partial<ComponentPropsWithoutRef<typeof DialogContent>>;
|
|
1148
1515
|
/** Granular classNames for modal elements */
|
|
1149
1516
|
classNames?: {
|
|
@@ -1158,21 +1525,44 @@ type TransactionsInfoModalCustomization<T extends Transaction> = {
|
|
|
1158
1525
|
};
|
|
1159
1526
|
/** Customization for TransactionsHistory component */
|
|
1160
1527
|
historyCustomization?: TransactionsHistoryProps<T>['customization'];
|
|
1161
|
-
/**
|
|
1528
|
+
/** Components that replace the default parts. */
|
|
1162
1529
|
components?: {
|
|
1163
|
-
|
|
1530
|
+
/** The header with the title and the close button. */
|
|
1531
|
+
Header?: ComponentType<TransactionsInfoModalHeaderProps>;
|
|
1532
|
+
/** The transaction list. */
|
|
1164
1533
|
History?: ComponentType<TransactionsHistoryProps<T>>;
|
|
1165
1534
|
};
|
|
1166
1535
|
};
|
|
1536
|
+
/**
|
|
1537
|
+
* Props of {@link TransactionsInfoModal}.
|
|
1538
|
+
*
|
|
1539
|
+
* @typeParam T - The transaction type of the Pulsar store.
|
|
1540
|
+
*/
|
|
1167
1541
|
type TransactionsInfoModalProps<T extends Transaction> = Pick<NovaTransactionsProviderProps<T>, 'adapter' | 'connectedAdapterType' | 'connectedWalletAddress' | 'transactionsPool'> & {
|
|
1542
|
+
/** Whether the modal is open. */
|
|
1168
1543
|
isOpen?: boolean;
|
|
1544
|
+
/**
|
|
1545
|
+
* Opens or closes the modal.
|
|
1546
|
+
*
|
|
1547
|
+
* @param value - `false` when the modal is closed.
|
|
1548
|
+
*/
|
|
1169
1549
|
setIsOpen: (value: boolean) => void;
|
|
1550
|
+
/** Props, class names and replacement components for the parts of the modal. */
|
|
1170
1551
|
customization?: TransactionsInfoModalCustomization<T>;
|
|
1171
1552
|
/** Pagination state for infinite scroll, forwarded to TransactionsHistory. */
|
|
1172
1553
|
pagination?: TxInMemoryPagination;
|
|
1173
1554
|
/** Optional transaction key to open directly in detail view */
|
|
1174
1555
|
selectedTxKey?: string | null;
|
|
1175
1556
|
};
|
|
1557
|
+
/**
|
|
1558
|
+
* A modal with the transaction history of the connected wallet ({@link TransactionsHistory}).
|
|
1559
|
+
* `NovaTransactionsProvider`
|
|
1560
|
+
* opens it from the toasts and the tracking modal.
|
|
1561
|
+
*
|
|
1562
|
+
* @typeParam T - The transaction type of the Pulsar store.
|
|
1563
|
+
* @param props - See {@link TransactionsInfoModalProps}.
|
|
1564
|
+
* @returns The modal.
|
|
1565
|
+
*/
|
|
1176
1566
|
declare function TransactionsInfoModal<T extends Transaction>({ isOpen, setIsOpen, customization, adapter, connectedWalletAddress, transactionsPool, pagination, selectedTxKey, }: TransactionsInfoModalProps<T>): react.JSX.Element;
|
|
1177
1567
|
|
|
1178
|
-
export { type
|
|
1568
|
+
export { type TxErrorBlockProps as $, type TransactionHistoryItemCustomization as A, type TransactionHistoryItemIconProps as B, type CopyableFieldProps as C, type DetailItemProps as D, type TransactionHistoryItemProps as E, type TransactionHistoryItemTimestampProps as F, TransactionKey as G, HashLink as H, type TransactionKeyProps as I, type JsonBlockProps as J, TransactionStatusBadge as K, type TransactionStatusBadgeProps as L, type MetadataRowProps as M, type NovaTransactionsLabels as N, TransactionsHistory as O, type TransactionsHistoryCustomization as P, type TransactionsHistoryLoaderProps as Q, type TransactionsHistoryPlaceholderProps as R, StatusAwareText as S, ToastTransaction as T, type TransactionsHistoryProps as U, TransactionsInfoModal as V, type TransactionsInfoModalCustomization as W, type TransactionsInfoModalHeaderProps as X, type TransactionsInfoModalProps as Y, TxErrorBlock as Z, type TxErrorBlockClassNames as _, type HashLinkProps as a, TxInfoBlock as a0, type TxInfoBlockCustomization as a1, type TxInfoBlockInfoRowClassNames as a2, type TxInfoBlockInfoRowProps as a3, type TxInfoBlockProps as a4, TxProgressIndicator as a5, type TxProgressIndicatorProps as a6, TxStatusVisual as a7, type TxStatusVisualClassNames as a8, type TxStatusVisualProps as a9, type TxStatusVisualStatusKey as aa, NovaTransactionsProvider as ab, type NovaTransactionsProviderProps as ac, type StatusAwareTextProps as b, type StepClassNames as c, type StepProps as d, type StepStatus as e, type ToastTransactionActionButtonProps as f, type ToastTransactionCustomization as g, type ToastTransactionProps as h, ToastValidationError as i, type ToastValidationErrorClassNames as j, type ToastValidationErrorCopyContentProps as k, type ToastValidationErrorCustomization as l, type ToastValidationErrorFieldProps as m, type ToastValidationErrorIconProps as n, type ToastValidationErrorMessageProps as o, type ToastValidationErrorProps as p, type ToastValidationErrorTitleProps as q, TrackingTxModal as r, type TrackingTxModalCustomization as s, type TrackingTxModalFooterProps as t, type TrackingTxModalHeaderProps as u, type TrackingTxModalProps as v, TransactionDetails as w, type TransactionDetailsCustomization as x, type TransactionDetailsProps as y, TransactionHistoryItem as z };
|