@tuwaio/nova-transactions 0.6.0 → 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 +48 -110
- package/dist/{TransactionsInfoModal-BotDng6i.d.cts → TransactionsInfoModal-B91DxCMH.d.cts} +441 -53
- package/dist/{TransactionsInfoModal-BotDng6i.d.ts → TransactionsInfoModal-B91DxCMH.d.ts} +441 -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 +13 -16
- package/dist/chunk-A2RUB4BK.js +0 -2
- package/dist/chunk-TPO53DJ7.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;
|
|
@@ -289,9 +308,14 @@ type NovaTransactionsLabels = {
|
|
|
289
308
|
replaced: string;
|
|
290
309
|
/** Default label for a standard transaction hash. */
|
|
291
310
|
default: string;
|
|
292
|
-
/**
|
|
311
|
+
/**
|
|
312
|
+
* Special label for the most recent blockhash. This is used for the "Recent Blockhash" field in the transaction
|
|
313
|
+
* details modal.
|
|
314
|
+
*/
|
|
293
315
|
recentBlockhash: string;
|
|
294
|
-
/**
|
|
316
|
+
/**
|
|
317
|
+
* Special label for the Solana signature. This is used for the "Signature" field in the transaction details modal.
|
|
318
|
+
*/
|
|
295
319
|
solana: string;
|
|
296
320
|
};
|
|
297
321
|
/** Labels for the transaction information block. */
|
|
@@ -443,15 +467,17 @@ type NovaTransactionsLabels = {
|
|
|
443
467
|
errorContext: string;
|
|
444
468
|
/** Label for the Full Payload. */
|
|
445
469
|
fullPayload: string;
|
|
446
|
-
/** Label for the RPC URL. */
|
|
447
|
-
rpcUrl: string;
|
|
448
470
|
/** Label for the Replaced Hash. */
|
|
449
471
|
replacedHash: string;
|
|
450
472
|
/** Labels for the sync status indicator. */
|
|
451
473
|
syncStatus: {
|
|
474
|
+
/** Badge shown while the transaction is not yet saved on the server (`syncStatus: 'pending-sync'`). */
|
|
452
475
|
pending: string;
|
|
476
|
+
/** Tooltip of the `pending` badge. */
|
|
453
477
|
pendingTooltip: string;
|
|
478
|
+
/** Badge shown when the transaction is saved on the server (`syncStatus: 'synced'`). */
|
|
454
479
|
synced: string;
|
|
480
|
+
/** Tooltip of the `synced` badge. */
|
|
455
481
|
syncedTooltip: string;
|
|
456
482
|
};
|
|
457
483
|
};
|
|
@@ -529,21 +555,53 @@ type NovaTransactionsProviderProps<T extends Transaction> = {
|
|
|
529
555
|
*/
|
|
530
556
|
declare function NovaTransactionsProvider<T extends Transaction>({ adapter, connectedWalletAddress, connectedAdapterType, transactionsPool, initialTx, executeTxAction, closeTxTrackedModal, labels, features, customization, pagination, ...toastProps }: NovaTransactionsProviderProps<T>): react.JSX.Element;
|
|
531
557
|
|
|
558
|
+
/**
|
|
559
|
+
* Props of {@link TransactionKey}.
|
|
560
|
+
*
|
|
561
|
+
* @typeParam T - The transaction type of the Pulsar store.
|
|
562
|
+
*/
|
|
532
563
|
type TransactionKeyProps<T extends Transaction> = Pick<NovaTransactionsProviderProps<T>, 'adapter'> & {
|
|
564
|
+
/** The transaction. */
|
|
533
565
|
tx: T;
|
|
566
|
+
/** Layout: `'toast'` adds a top border and spacing. Defaults to `'toast'`. */
|
|
534
567
|
variant?: 'toast' | 'history';
|
|
568
|
+
/** Classes of the container. */
|
|
535
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
|
+
*/
|
|
536
576
|
renderHashLink?: (props: HashLinkProps) => ReactNode;
|
|
577
|
+
/** Number of confirmations, shown below the hashes when it is above 0. */
|
|
537
578
|
confirmations?: number;
|
|
538
579
|
/** ClassNames to pass to HashLink components (default and replaced hash) */
|
|
539
580
|
hashLinkClassNames?: HashLinkProps['classNames'];
|
|
540
581
|
/** ClassNames for original hash link in replaced transactions (falls back to hashLinkClassNames) */
|
|
541
582
|
originalHashLinkClassNames?: HashLinkProps['classNames'];
|
|
542
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
|
+
*/
|
|
543
594
|
declare function TransactionKey<T extends Transaction>({ tx, adapter, variant, className, renderHashLink, confirmations, hashLinkClassNames, originalHashLinkClassNames, }: TransactionKeyProps<T>): react.JSX.Element | null;
|
|
544
595
|
|
|
596
|
+
/**
|
|
597
|
+
* Props of {@link TransactionStatusBadge}.
|
|
598
|
+
*
|
|
599
|
+
* @typeParam T - The transaction type of the Pulsar store.
|
|
600
|
+
*/
|
|
545
601
|
type TransactionStatusBadgeProps<T extends Transaction> = {
|
|
602
|
+
/** The transaction whose status is shown. */
|
|
546
603
|
tx: T;
|
|
604
|
+
/** Classes of the badge. */
|
|
547
605
|
className?: string;
|
|
548
606
|
/** Granular class names for sub-elements */
|
|
549
607
|
classNames?: {
|
|
@@ -555,26 +613,54 @@ type TransactionStatusBadgeProps<T extends Transaction> = {
|
|
|
555
613
|
label?: string;
|
|
556
614
|
};
|
|
557
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
|
+
*/
|
|
558
624
|
declare function TransactionStatusBadge<T extends Transaction>({ tx, className, classNames, }: TransactionStatusBadgeProps<T>): react.JSX.Element;
|
|
559
625
|
|
|
560
626
|
/**
|
|
561
|
-
* @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.
|
|
562
629
|
*/
|
|
563
630
|
|
|
564
|
-
|
|
631
|
+
/** Props of an action button of {@link ToastTransaction} (speed up, cancel, open transaction). */
|
|
632
|
+
type ToastTransactionActionButtonProps = {
|
|
633
|
+
/** Runs the action. */
|
|
565
634
|
onClick: () => void;
|
|
635
|
+
/** The button label. */
|
|
566
636
|
children: ReactNode;
|
|
637
|
+
/** Classes from `customization.classNames`. */
|
|
567
638
|
className?: string;
|
|
568
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
|
+
*/
|
|
569
645
|
type ToastTransactionCustomization<T extends Transaction> = {
|
|
570
|
-
/**
|
|
646
|
+
/** Components that replace the default parts. */
|
|
571
647
|
components?: {
|
|
648
|
+
/** The title and the description. */
|
|
572
649
|
StatusAwareText?: ComponentType<StatusAwareTextProps>;
|
|
650
|
+
/** The hashes of the transaction. */
|
|
573
651
|
TransactionKey?: ComponentType<TransactionKeyProps<T>>;
|
|
652
|
+
/** The status badge. */
|
|
574
653
|
StatusBadge?: ComponentType<TransactionStatusBadgeProps<T>>;
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
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
|
+
*/
|
|
578
664
|
ConfirmationsBadge?: ComponentType<{
|
|
579
665
|
count: number | string;
|
|
580
666
|
className?: string;
|
|
@@ -628,42 +714,100 @@ type ToastTransactionCustomization<T extends Transaction> = {
|
|
|
628
714
|
confirmationsBadge?: string;
|
|
629
715
|
};
|
|
630
716
|
};
|
|
717
|
+
/**
|
|
718
|
+
* Props of {@link ToastTransaction}.
|
|
719
|
+
*
|
|
720
|
+
* @typeParam T - The transaction type of the Pulsar store.
|
|
721
|
+
*/
|
|
631
722
|
type ToastTransactionProps<T extends Transaction> = {
|
|
723
|
+
/** The transaction to show. */
|
|
632
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
|
+
*/
|
|
633
731
|
openTxInfoModal?: (txKey?: string) => void;
|
|
732
|
+
/** Icon shown on the left. Defaults to the icon of the transaction's network. */
|
|
634
733
|
icon?: ReactNode;
|
|
734
|
+
/** Classes of the toast body. */
|
|
635
735
|
className?: string;
|
|
736
|
+
/** Class names and replacement components for the parts of the toast. */
|
|
636
737
|
customization?: ToastTransactionCustomization<T>;
|
|
738
|
+
/** Accepted because `react-toastify` passes it to toast content; not used by the component. */
|
|
637
739
|
closeToast?: ToastContentProps['closeToast'];
|
|
740
|
+
/** Accepted for compatibility; not used by the component. */
|
|
638
741
|
toastProps?: ToastContainerProps;
|
|
639
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
|
+
*/
|
|
640
755
|
declare function ToastTransaction<T extends Transaction>({ openTxInfoModal, tx, icon, className, customization, connectedWalletAddress, adapter, }: ToastTransactionProps<T>): JSX.Element;
|
|
641
756
|
|
|
642
|
-
|
|
757
|
+
/** Props of the header of {@link TrackingTxModal} (`customization.components.Header`). */
|
|
758
|
+
type TrackingTxModalHeaderProps = {
|
|
759
|
+
/** Closes the modal. */
|
|
643
760
|
onClose: () => void;
|
|
761
|
+
/** The title: the transaction title, or its type, colored by status. */
|
|
644
762
|
title: ReactNode;
|
|
645
763
|
};
|
|
646
|
-
|
|
764
|
+
/** Props of the footer of {@link TrackingTxModal} (`customization.components.Footer`). */
|
|
765
|
+
type TrackingTxModalFooterProps = {
|
|
766
|
+
/** Closes the modal. */
|
|
647
767
|
onClose: () => void;
|
|
768
|
+
/** Opens the transaction history modal. */
|
|
648
769
|
onOpenAllTransactions: () => void;
|
|
770
|
+
/** Retries the failed submission; set only when retry is possible. */
|
|
649
771
|
onRetry?: () => void;
|
|
772
|
+
/** Speeds up the pending transaction; set only when it can be replaced. */
|
|
650
773
|
onSpeedUp?: () => void;
|
|
774
|
+
/** Cancels the pending transaction; set only when it can be replaced. */
|
|
651
775
|
onCancel?: () => void;
|
|
776
|
+
/** Whether the transaction is being submitted or is pending. */
|
|
652
777
|
isProcessing?: boolean;
|
|
778
|
+
/** Whether the submission or the transaction failed. */
|
|
653
779
|
isFailed?: boolean;
|
|
780
|
+
/** Whether the pending transaction can be sped up or canceled. */
|
|
654
781
|
canReplace?: boolean;
|
|
782
|
+
/** Address of the connected wallet. */
|
|
655
783
|
connectedWalletAddress?: string;
|
|
656
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
|
+
*/
|
|
657
790
|
type TrackingTxModalCustomization<T extends Transaction> = {
|
|
791
|
+
/** Props passed to the dialog panel (`DialogContent` from `@tuwaio/nova-core`). */
|
|
658
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
|
+
*/
|
|
659
797
|
motionProps?: MotionProps;
|
|
660
|
-
/**
|
|
798
|
+
/** Components that replace the default parts. */
|
|
661
799
|
components?: {
|
|
662
|
-
|
|
663
|
-
|
|
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. */
|
|
664
805
|
StatusVisual?: ComponentType<TxStatusVisualProps>;
|
|
806
|
+
/** The steps of the transaction lifecycle. */
|
|
665
807
|
ProgressIndicator?: ComponentType<TxProgressIndicatorProps>;
|
|
808
|
+
/** The block with the network, time and hashes of the transaction. */
|
|
666
809
|
InfoBlock?: ComponentType<TxInfoBlockProps<T>>;
|
|
810
|
+
/** The error message block. */
|
|
667
811
|
ErrorBlock?: ComponentType<TxErrorBlockProps>;
|
|
668
812
|
};
|
|
669
813
|
/** Granular classNames for all sub-elements */
|
|
@@ -719,14 +863,41 @@ type TrackingTxModalCustomization<T extends Transaction> = {
|
|
|
719
863
|
classNames?: TxErrorBlockClassNames;
|
|
720
864
|
};
|
|
721
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
|
+
*/
|
|
722
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
|
+
*/
|
|
723
877
|
onClose: (txKey?: string) => void;
|
|
878
|
+
/** Opens the transaction history modal. */
|
|
724
879
|
onOpenAllTransactions: () => void;
|
|
880
|
+
/** Classes of the modal content. */
|
|
725
881
|
className?: string;
|
|
882
|
+
/** Props, class names and replacement components for the parts of the modal. */
|
|
726
883
|
customization?: TrackingTxModalCustomization<T>;
|
|
727
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
|
+
*/
|
|
728
898
|
declare function TrackingTxModal<T extends Transaction>({ adapter, onClose, onOpenAllTransactions, className, customization, transactionsPool, executeTxAction, initialTx, connectedWalletAddress, }: TrackingTxModalProps<T>): react.JSX.Element | null;
|
|
729
899
|
|
|
900
|
+
/** Class names of the parts of {@link TxErrorBlock}. */
|
|
730
901
|
type TxErrorBlockClassNames = {
|
|
731
902
|
/** Classes for the container */
|
|
732
903
|
container?: string;
|
|
@@ -743,8 +914,11 @@ type TxErrorBlockClassNames = {
|
|
|
743
914
|
/** Classes for the message text */
|
|
744
915
|
messageText?: string;
|
|
745
916
|
};
|
|
917
|
+
/** Props of {@link TxErrorBlock}. */
|
|
746
918
|
type TxErrorBlockProps = {
|
|
747
|
-
/**
|
|
919
|
+
/**
|
|
920
|
+
* The error to display. Can be a string or a TuwaErrorState. If undefined or empty, the component renders nothing.
|
|
921
|
+
*/
|
|
748
922
|
error?: string | TuwaErrorState;
|
|
749
923
|
/** Optional additional CSS classes for the container. */
|
|
750
924
|
className?: string;
|
|
@@ -755,23 +929,41 @@ type TxErrorBlockProps = {
|
|
|
755
929
|
* A component that displays a formatted block for a transaction error message.
|
|
756
930
|
* It includes a title, an icon, the error message in a scrollable area,
|
|
757
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.
|
|
758
935
|
*/
|
|
759
936
|
declare function TxErrorBlock({ error, className, classNames }: TxErrorBlockProps): react.JSX.Element | null;
|
|
760
937
|
|
|
761
|
-
|
|
938
|
+
/** Props of a row of {@link TxInfoBlock} (`customization.components.InfoRow`). */
|
|
939
|
+
type TxInfoBlockInfoRowProps = {
|
|
940
|
+
/** Label on the left. */
|
|
762
941
|
label: ReactNode;
|
|
942
|
+
/** Value on the right. */
|
|
763
943
|
value: ReactNode;
|
|
764
|
-
|
|
944
|
+
/** Classes of the parts of the row. */
|
|
945
|
+
classNames?: TxInfoBlockInfoRowClassNames;
|
|
765
946
|
};
|
|
766
|
-
|
|
947
|
+
/** Class names of a row of {@link TxInfoBlock}. */
|
|
948
|
+
type TxInfoBlockInfoRowClassNames = {
|
|
949
|
+
/** The row (from `customization.classNames.row`). */
|
|
767
950
|
row?: string;
|
|
951
|
+
/** The label (from `customization.classNames.rowLabel`). */
|
|
768
952
|
label?: string;
|
|
953
|
+
/** The value (from `customization.classNames.rowValue`). */
|
|
769
954
|
value?: string;
|
|
770
955
|
};
|
|
956
|
+
/**
|
|
957
|
+
* Class names and replacement parts for {@link TxInfoBlock}.
|
|
958
|
+
*
|
|
959
|
+
* @typeParam T - The transaction type of the Pulsar store.
|
|
960
|
+
*/
|
|
771
961
|
type TxInfoBlockCustomization<T extends Transaction> = {
|
|
772
|
-
/**
|
|
962
|
+
/** Components that replace the default parts. */
|
|
773
963
|
components?: {
|
|
774
|
-
|
|
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`). */
|
|
775
967
|
transactionKey?: TransactionKeyProps<T>['renderHashLink'];
|
|
776
968
|
};
|
|
777
969
|
/** Granular classNames for sub-elements */
|
|
@@ -792,10 +984,17 @@ type TxInfoBlockCustomization<T extends Transaction> = {
|
|
|
792
984
|
originalHashLink?: HashLinkProps['classNames'];
|
|
793
985
|
};
|
|
794
986
|
};
|
|
987
|
+
/**
|
|
988
|
+
* Props of {@link TxInfoBlock}.
|
|
989
|
+
*
|
|
990
|
+
* @typeParam T - The transaction type of the Pulsar store.
|
|
991
|
+
*/
|
|
795
992
|
type TxInfoBlockProps<T extends Transaction> = {
|
|
796
993
|
/** The transaction object to display, which can be a full transaction or an initial one. */
|
|
797
994
|
tx: T | InitialTransaction;
|
|
995
|
+
/** Classes of the block. */
|
|
798
996
|
className?: string;
|
|
997
|
+
/** Class names and replacement parts for the block. */
|
|
799
998
|
customization?: TxInfoBlockCustomization<T>;
|
|
800
999
|
} & Pick<NovaTransactionsProviderProps<T>, 'adapter'>;
|
|
801
1000
|
/**
|
|
@@ -804,6 +1003,7 @@ type TxInfoBlockProps<T extends Transaction> = {
|
|
|
804
1003
|
*/
|
|
805
1004
|
declare function TxInfoBlock<T extends Transaction>({ tx, adapter, className, customization }: TxInfoBlockProps<T>): react.JSX.Element | null;
|
|
806
1005
|
|
|
1006
|
+
/** State of a step of {@link TxProgressIndicator}, which sets its colors and icon. */
|
|
807
1007
|
type StepStatus = 'active' | 'completed' | 'error' | 'inactive' | 'replaced';
|
|
808
1008
|
/** ClassNames for step styling overrides */
|
|
809
1009
|
type StepClassNames = {
|
|
@@ -822,35 +1022,62 @@ type StepClassNames = {
|
|
|
822
1022
|
label?: string;
|
|
823
1023
|
}>>;
|
|
824
1024
|
};
|
|
1025
|
+
/** Props of a step of {@link TxProgressIndicator} (`StepComponent`). */
|
|
825
1026
|
type StepProps = {
|
|
1027
|
+
/** State of the step. */
|
|
826
1028
|
status: StepStatus;
|
|
1029
|
+
/** Label under the step. */
|
|
827
1030
|
label: string;
|
|
1031
|
+
/** Whether it is the first step; the default step draws no line before it. */
|
|
828
1032
|
isFirst?: boolean;
|
|
1033
|
+
/** Whether it is the last step (not used by the default step). */
|
|
829
1034
|
isLast?: boolean;
|
|
1035
|
+
/** Class names of the step (`stepClassNames` of the indicator). */
|
|
830
1036
|
classNames?: StepClassNames;
|
|
831
1037
|
};
|
|
1038
|
+
/** Props of {@link TxProgressIndicator}. */
|
|
832
1039
|
interface TxProgressIndicatorProps {
|
|
1040
|
+
/** Whether the transaction is being submitted or is pending. */
|
|
833
1041
|
isProcessing?: boolean;
|
|
1042
|
+
/** Whether the transaction succeeded. */
|
|
834
1043
|
isSucceed?: boolean;
|
|
1044
|
+
/** Whether the submission or the transaction failed. */
|
|
835
1045
|
isFailed?: boolean;
|
|
1046
|
+
/** Whether the transaction was replaced (sped up or canceled). */
|
|
836
1047
|
isReplaced?: boolean;
|
|
1048
|
+
/** Classes of the indicator. */
|
|
837
1049
|
className?: string;
|
|
1050
|
+
/** Component that renders each step. */
|
|
838
1051
|
StepComponent?: ComponentType<StepProps>;
|
|
839
1052
|
/** ClassNames for step customization */
|
|
840
1053
|
stepClassNames?: StepClassNames;
|
|
841
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
|
+
*/
|
|
842
1062
|
declare function TxProgressIndicator({ isProcessing, isSucceed, isFailed, isReplaced, className, StepComponent, stepClassNames, }: TxProgressIndicatorProps): react.JSX.Element;
|
|
843
1063
|
|
|
844
1064
|
/**
|
|
845
|
-
* @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.
|
|
846
1071
|
*/
|
|
847
|
-
type
|
|
1072
|
+
type TxStatusVisualStatusKey = 'succeed' | 'failed' | 'replaced' | 'processing' | 'initializing';
|
|
1073
|
+
/** Class names of the icon of {@link TxStatusVisual}. */
|
|
848
1074
|
type TxStatusVisualClassNames = {
|
|
849
1075
|
/** Base icon className applied to all statuses */
|
|
850
1076
|
icon?: string;
|
|
851
1077
|
/** Status-specific icon overrides */
|
|
852
|
-
statusOverrides?: Partial<Record<
|
|
1078
|
+
statusOverrides?: Partial<Record<TxStatusVisualStatusKey, string>>;
|
|
853
1079
|
};
|
|
1080
|
+
/** Props of {@link TxStatusVisual}. */
|
|
854
1081
|
type TxStatusVisualProps = {
|
|
855
1082
|
/** True if the transaction is currently being processed (e.g., in the mempool). */
|
|
856
1083
|
isProcessing?: boolean;
|
|
@@ -868,100 +1095,179 @@ type TxStatusVisualProps = {
|
|
|
868
1095
|
/**
|
|
869
1096
|
* A component that renders a large, animated icon to visually represent the
|
|
870
1097
|
* current state of a transaction within the tracking modal.
|
|
1098
|
+
*
|
|
1099
|
+
* @param props - See {@link TxStatusVisualProps}.
|
|
1100
|
+
* @returns The icon in its container.
|
|
871
1101
|
*/
|
|
872
1102
|
declare function TxStatusVisual({ isProcessing, isSucceed, isFailed, isReplaced, className: containerClassName, iconClassNames, }: TxStatusVisualProps): react.JSX.Element;
|
|
873
1103
|
|
|
874
|
-
/** Props
|
|
1104
|
+
/** Props of a field with a copy button in {@link TransactionDetails} (hash, sender, recipient, replaced hash). */
|
|
875
1105
|
type CopyableFieldProps = {
|
|
1106
|
+
/** Label shown above the field. */
|
|
876
1107
|
label: string;
|
|
1108
|
+
/** Value shown in the field and copied to the clipboard by the copy button. */
|
|
877
1109
|
value: string;
|
|
1110
|
+
/** Whether the value uses a monospace font. Defaults to `true`. */
|
|
878
1111
|
mono?: boolean;
|
|
1112
|
+
/** Classes of the field. */
|
|
879
1113
|
className?: string;
|
|
1114
|
+
/** Content shown instead of the value (the copy button still copies `value`); used for the explorer link. */
|
|
880
1115
|
children?: ReactNode;
|
|
1116
|
+
/** Classes of the parts of the field. */
|
|
881
1117
|
classNames?: {
|
|
1118
|
+
/** The label. */
|
|
882
1119
|
label?: string;
|
|
1120
|
+
/** The row with the value and the copy button. */
|
|
883
1121
|
container?: string;
|
|
1122
|
+
/** The value. */
|
|
884
1123
|
code?: string;
|
|
1124
|
+
/** The copy button. */
|
|
885
1125
|
copyButton?: string;
|
|
886
1126
|
};
|
|
887
1127
|
};
|
|
888
|
-
/** Props
|
|
1128
|
+
/** Props of a label and value pair in the execution data of {@link TransactionDetails}. */
|
|
889
1129
|
type DetailItemProps = {
|
|
1130
|
+
/** Label shown above the value. */
|
|
890
1131
|
label: string;
|
|
1132
|
+
/** The value. The default item renders nothing when it is `null`, `undefined` or an empty string. */
|
|
891
1133
|
value: string | number | null | undefined;
|
|
1134
|
+
/** Whether the value uses a smaller monospace font. Defaults to `false`. */
|
|
892
1135
|
mono?: boolean;
|
|
1136
|
+
/** Classes of the item. */
|
|
893
1137
|
className?: string;
|
|
1138
|
+
/** Classes of the parts of the item. */
|
|
894
1139
|
classNames?: {
|
|
1140
|
+
/** The label. */
|
|
895
1141
|
label?: string;
|
|
1142
|
+
/** The value. */
|
|
896
1143
|
value?: string;
|
|
897
1144
|
};
|
|
898
1145
|
};
|
|
899
|
-
/** Props
|
|
1146
|
+
/** Props of a row of the metadata section of {@link TransactionDetails} (adapter, times, tracker, connector…). */
|
|
900
1147
|
type MetadataRowProps = {
|
|
1148
|
+
/** Icon component (a Heroicons icon by default), rendered with a `className`. */
|
|
901
1149
|
icon: ComponentType<{
|
|
902
1150
|
className?: string;
|
|
903
1151
|
}>;
|
|
1152
|
+
/** Label shown on the left. */
|
|
904
1153
|
label: string;
|
|
1154
|
+
/** Value shown on the right. */
|
|
905
1155
|
children: ReactNode;
|
|
1156
|
+
/** Classes of the row. */
|
|
906
1157
|
className?: string;
|
|
1158
|
+
/** Classes of the parts of the row. */
|
|
907
1159
|
classNames?: {
|
|
1160
|
+
/** The icon. */
|
|
908
1161
|
icon?: string;
|
|
1162
|
+
/** The label. */
|
|
909
1163
|
label?: string;
|
|
1164
|
+
/** The value. */
|
|
910
1165
|
value?: string;
|
|
911
1166
|
};
|
|
912
1167
|
};
|
|
913
|
-
/**
|
|
1168
|
+
/**
|
|
1169
|
+
* Props of a code block with a copy button in {@link TransactionDetails} (input data, instructions, payload, error).
|
|
1170
|
+
*/
|
|
914
1171
|
type JsonBlockProps = {
|
|
1172
|
+
/** Label shown above the block. */
|
|
915
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
|
+
*/
|
|
916
1178
|
data: unknown;
|
|
1179
|
+
/** Classes of the block. */
|
|
917
1180
|
className?: string;
|
|
1181
|
+
/** Classes of the parts of the block. */
|
|
918
1182
|
classNames?: {
|
|
1183
|
+
/** The row with the label and the copy button. */
|
|
919
1184
|
header?: string;
|
|
1185
|
+
/** The label. */
|
|
920
1186
|
label?: string;
|
|
1187
|
+
/** The copy button. */
|
|
921
1188
|
copyButton?: string;
|
|
1189
|
+
/** The scrollable container of the code. */
|
|
922
1190
|
container?: string;
|
|
1191
|
+
/** The `<pre>` element with the code. */
|
|
923
1192
|
pre?: string;
|
|
924
1193
|
};
|
|
925
1194
|
};
|
|
1195
|
+
/** Class names and replacement components for the parts of {@link TransactionDetails}. */
|
|
926
1196
|
type TransactionDetailsCustomization = {
|
|
927
|
-
/**
|
|
1197
|
+
/** Classes added to the parts of the view. */
|
|
928
1198
|
classNames?: {
|
|
1199
|
+
/** The whole view. */
|
|
929
1200
|
container?: string;
|
|
1201
|
+
/** The header row with the back button and the title. */
|
|
930
1202
|
header?: string;
|
|
1203
|
+
/** The back button. */
|
|
931
1204
|
backButton?: string;
|
|
1205
|
+
/** The status icon in the main card. */
|
|
932
1206
|
statusIconContainer?: string;
|
|
1207
|
+
/** The title (the `transactionDetails.title` label). */
|
|
933
1208
|
title?: string;
|
|
1209
|
+
/** The subtitle under the title (the `transactionDetails.subtitle` label). */
|
|
934
1210
|
subtitle?: string;
|
|
1211
|
+
/** The headings of the metadata and execution data sections. */
|
|
935
1212
|
sectionHeader?: string;
|
|
1213
|
+
/** The main card with the status, hash, network, sender and recipient. */
|
|
936
1214
|
coreInfoCard?: string;
|
|
1215
|
+
/** The network badge in the main card. */
|
|
937
1216
|
networkBadge?: string;
|
|
1217
|
+
/** The metadata section. */
|
|
938
1218
|
metadataSection?: string;
|
|
1219
|
+
/** The execution data section. */
|
|
939
1220
|
executionSection?: string;
|
|
940
1221
|
};
|
|
941
|
-
/**
|
|
1222
|
+
/** Components that replace the default parts. */
|
|
942
1223
|
components?: {
|
|
1224
|
+
/** A card around a section (props: `children`, `className`). */
|
|
943
1225
|
SectionCard?: ComponentType<{
|
|
944
1226
|
children: ReactNode;
|
|
945
1227
|
className?: string;
|
|
946
1228
|
}>;
|
|
1229
|
+
/** A section heading (props: `children`, `className`). */
|
|
947
1230
|
SectionHeading?: ComponentType<{
|
|
948
1231
|
children: ReactNode;
|
|
949
1232
|
className?: string;
|
|
950
1233
|
}>;
|
|
1234
|
+
/** A field with a copy button. */
|
|
951
1235
|
CopyableField?: ComponentType<CopyableFieldProps>;
|
|
1236
|
+
/** A label and value pair. */
|
|
952
1237
|
DetailItem?: ComponentType<DetailItemProps>;
|
|
1238
|
+
/** A row of the metadata section. */
|
|
953
1239
|
MetadataRow?: ComponentType<MetadataRowProps>;
|
|
1240
|
+
/** A code block with a copy button. */
|
|
954
1241
|
JsonBlock?: ComponentType<JsonBlockProps>;
|
|
955
1242
|
};
|
|
956
1243
|
};
|
|
1244
|
+
/**
|
|
1245
|
+
* Props of {@link TransactionDetails}.
|
|
1246
|
+
*
|
|
1247
|
+
* @typeParam T - The transaction type of the Pulsar store.
|
|
1248
|
+
*/
|
|
957
1249
|
type TransactionDetailsProps<T extends Transaction> = Pick<NovaTransactionsProviderProps<T>, 'adapter'> & {
|
|
1250
|
+
/** The transaction to show. */
|
|
958
1251
|
tx: T;
|
|
1252
|
+
/** Called by the back button. */
|
|
959
1253
|
onBack: () => void;
|
|
1254
|
+
/** Classes of the view. */
|
|
960
1255
|
className?: string;
|
|
1256
|
+
/** Class names and replacement components for the parts of the view. */
|
|
961
1257
|
customization?: TransactionDetailsCustomization;
|
|
962
1258
|
};
|
|
963
1259
|
/**
|
|
964
|
-
*
|
|
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.
|
|
965
1271
|
*/
|
|
966
1272
|
declare function TransactionDetails<T extends Transaction>({ tx, onBack, adapter, className, customization, }: TransactionDetailsProps<T>): react.JSX.Element;
|
|
967
1273
|
|
|
@@ -970,12 +1276,18 @@ declare function TransactionDetails<T extends Transaction>({ tx, onBack, adapter
|
|
|
970
1276
|
* in a list format for the transaction history view.
|
|
971
1277
|
*/
|
|
972
1278
|
|
|
973
|
-
|
|
1279
|
+
/** Props of the icon of {@link TransactionHistoryItem} (`customization.components.Icon`). */
|
|
1280
|
+
type TransactionHistoryItemIconProps = {
|
|
1281
|
+
/** Chain of the transaction. */
|
|
974
1282
|
chainId: number | string;
|
|
1283
|
+
/** Classes from `customization.classNames.icon`. */
|
|
975
1284
|
className?: string;
|
|
976
1285
|
};
|
|
977
|
-
|
|
1286
|
+
/** Props of the timestamp of {@link TransactionHistoryItem} (`customization.components.Timestamp`). */
|
|
1287
|
+
type TransactionHistoryItemTimestampProps = {
|
|
1288
|
+
/** Submission time of the transaction, in seconds (`localTimestamp`). */
|
|
978
1289
|
timestamp?: number;
|
|
1290
|
+
/** Classes from `customization.classNames.timestamp`. */
|
|
979
1291
|
className?: string;
|
|
980
1292
|
};
|
|
981
1293
|
/**
|
|
@@ -983,13 +1295,19 @@ type CustomTimestampProps = {
|
|
|
983
1295
|
* Allows styling of all sub-elements including icon, text, badge, and hash link.
|
|
984
1296
|
*/
|
|
985
1297
|
type TransactionHistoryItemCustomization<T extends Transaction> = {
|
|
986
|
-
/**
|
|
1298
|
+
/** Components that replace the default parts. */
|
|
987
1299
|
components?: {
|
|
988
|
-
|
|
1300
|
+
/** The network icon. */
|
|
1301
|
+
Icon?: ComponentType<TransactionHistoryItemIconProps>;
|
|
1302
|
+
/** The title (the transaction title, or its type). */
|
|
989
1303
|
Title?: ComponentType<StatusAwareTextProps>;
|
|
1304
|
+
/** The description. */
|
|
990
1305
|
Description?: ComponentType<StatusAwareTextProps>;
|
|
991
|
-
|
|
1306
|
+
/** The relative submission time ("5 minutes ago"). */
|
|
1307
|
+
Timestamp?: ComponentType<TransactionHistoryItemTimestampProps>;
|
|
1308
|
+
/** The status badge. */
|
|
992
1309
|
StatusBadge?: ComponentType<TransactionStatusBadgeProps<T>>;
|
|
1310
|
+
/** The hashes of the transaction. */
|
|
993
1311
|
TransactionKey?: ComponentType<TransactionKeyProps<T>>;
|
|
994
1312
|
};
|
|
995
1313
|
/** Custom class name generators for all sub-elements */
|
|
@@ -1030,6 +1348,11 @@ type TransactionHistoryItemCustomization<T extends Transaction> = {
|
|
|
1030
1348
|
originalHashCopyButton?: string;
|
|
1031
1349
|
};
|
|
1032
1350
|
};
|
|
1351
|
+
/**
|
|
1352
|
+
* Props of {@link TransactionHistoryItem}.
|
|
1353
|
+
*
|
|
1354
|
+
* @typeParam T - The transaction type of the Pulsar store.
|
|
1355
|
+
*/
|
|
1033
1356
|
type TransactionHistoryItemProps<T extends Transaction> = {
|
|
1034
1357
|
/** The transaction object to display. */
|
|
1035
1358
|
tx: T;
|
|
@@ -1042,16 +1365,31 @@ type TransactionHistoryItemProps<T extends Transaction> = {
|
|
|
1042
1365
|
/** Whether transaction details can be viewed by clicking on history items. */
|
|
1043
1366
|
canViewDetails?: boolean;
|
|
1044
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
|
+
*/
|
|
1045
1377
|
declare function TransactionHistoryItem<T extends Transaction>({ tx, adapter, className, customization, onSelectTx, canViewDetails, }: TransactionHistoryItemProps<T>): JSX.Element;
|
|
1046
1378
|
|
|
1047
|
-
|
|
1379
|
+
/** Props of the placeholder of {@link TransactionsHistory} (no wallet connected, or no transactions). */
|
|
1380
|
+
type TransactionsHistoryPlaceholderProps = {
|
|
1381
|
+
/** The placeholder title. */
|
|
1048
1382
|
title: string;
|
|
1383
|
+
/** The placeholder message. */
|
|
1049
1384
|
message: string;
|
|
1385
|
+
/** Classes of the placeholder. */
|
|
1050
1386
|
className?: string;
|
|
1051
1387
|
};
|
|
1052
1388
|
/** Props exposed to a custom Loader component */
|
|
1053
1389
|
type TransactionsHistoryLoaderProps = {
|
|
1390
|
+
/** Classes from `customization.classNames.loaderContainer`. */
|
|
1054
1391
|
className?: string;
|
|
1392
|
+
/** Classes from `customization.classNames.loaderIcon`. */
|
|
1055
1393
|
iconClassName?: string;
|
|
1056
1394
|
};
|
|
1057
1395
|
/**
|
|
@@ -1121,7 +1459,7 @@ type TransactionsHistoryCustomization<T extends Transaction> = {
|
|
|
1121
1459
|
/** Custom components */
|
|
1122
1460
|
components?: {
|
|
1123
1461
|
/** Custom placeholder component */
|
|
1124
|
-
Placeholder?: ComponentType<
|
|
1462
|
+
Placeholder?: ComponentType<TransactionsHistoryPlaceholderProps>;
|
|
1125
1463
|
/** Custom history item component */
|
|
1126
1464
|
HistoryItem?: ComponentType<TransactionHistoryItemProps<T>>;
|
|
1127
1465
|
/** Custom loader component rendered at the bottom during pagination loading */
|
|
@@ -1130,8 +1468,15 @@ type TransactionsHistoryCustomization<T extends Transaction> = {
|
|
|
1130
1468
|
/** Customization for the detailed transaction view */
|
|
1131
1469
|
detailsCustomization?: TransactionDetailsCustomization;
|
|
1132
1470
|
};
|
|
1471
|
+
/**
|
|
1472
|
+
* Props of {@link TransactionsHistory}.
|
|
1473
|
+
*
|
|
1474
|
+
* @typeParam T - The transaction type of the Pulsar store.
|
|
1475
|
+
*/
|
|
1133
1476
|
type TransactionsHistoryProps<T extends Transaction> = Pick<NovaTransactionsProviderProps<T>, 'adapter' | 'transactionsPool' | 'connectedWalletAddress'> & {
|
|
1477
|
+
/** Classes of the list. */
|
|
1134
1478
|
className?: string;
|
|
1479
|
+
/** Class names and replacement components for the parts of the list and of the details view. */
|
|
1135
1480
|
customization?: TransactionsHistoryCustomization<T>;
|
|
1136
1481
|
/** Pagination state for infinite scroll. Uses TxInMemoryPagination from @tuwaio/pulsar-core. */
|
|
1137
1482
|
pagination?: TxInMemoryPagination;
|
|
@@ -1140,12 +1485,32 @@ type TransactionsHistoryProps<T extends Transaction> = Pick<NovaTransactionsProv
|
|
|
1140
1485
|
/** Whether transaction details can be viewed by clicking on history items. Defaults to true. */
|
|
1141
1486
|
canViewDetails?: boolean;
|
|
1142
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
|
+
*/
|
|
1143
1500
|
declare function TransactionsHistory<T extends Transaction>({ adapter, connectedWalletAddress, transactionsPool, className, customization, pagination, initialTxKey, canViewDetails, }: TransactionsHistoryProps<T>): react.JSX.Element;
|
|
1144
1501
|
|
|
1145
|
-
|
|
1502
|
+
/** Props of the header of {@link TransactionsInfoModal} (`customization.components.Header`). */
|
|
1503
|
+
type TransactionsInfoModalHeaderProps = {
|
|
1504
|
+
/** Closes the modal. */
|
|
1146
1505
|
closeModal: () => void;
|
|
1147
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
|
+
*/
|
|
1148
1512
|
type TransactionsInfoModalCustomization<T extends Transaction> = {
|
|
1513
|
+
/** Props passed to the dialog panel (`DialogContent` from `@tuwaio/nova-core`). */
|
|
1149
1514
|
modalProps?: Partial<ComponentPropsWithoutRef<typeof DialogContent>>;
|
|
1150
1515
|
/** Granular classNames for modal elements */
|
|
1151
1516
|
classNames?: {
|
|
@@ -1160,21 +1525,44 @@ type TransactionsInfoModalCustomization<T extends Transaction> = {
|
|
|
1160
1525
|
};
|
|
1161
1526
|
/** Customization for TransactionsHistory component */
|
|
1162
1527
|
historyCustomization?: TransactionsHistoryProps<T>['customization'];
|
|
1163
|
-
/**
|
|
1528
|
+
/** Components that replace the default parts. */
|
|
1164
1529
|
components?: {
|
|
1165
|
-
|
|
1530
|
+
/** The header with the title and the close button. */
|
|
1531
|
+
Header?: ComponentType<TransactionsInfoModalHeaderProps>;
|
|
1532
|
+
/** The transaction list. */
|
|
1166
1533
|
History?: ComponentType<TransactionsHistoryProps<T>>;
|
|
1167
1534
|
};
|
|
1168
1535
|
};
|
|
1536
|
+
/**
|
|
1537
|
+
* Props of {@link TransactionsInfoModal}.
|
|
1538
|
+
*
|
|
1539
|
+
* @typeParam T - The transaction type of the Pulsar store.
|
|
1540
|
+
*/
|
|
1169
1541
|
type TransactionsInfoModalProps<T extends Transaction> = Pick<NovaTransactionsProviderProps<T>, 'adapter' | 'connectedAdapterType' | 'connectedWalletAddress' | 'transactionsPool'> & {
|
|
1542
|
+
/** Whether the modal is open. */
|
|
1170
1543
|
isOpen?: boolean;
|
|
1544
|
+
/**
|
|
1545
|
+
* Opens or closes the modal.
|
|
1546
|
+
*
|
|
1547
|
+
* @param value - `false` when the modal is closed.
|
|
1548
|
+
*/
|
|
1171
1549
|
setIsOpen: (value: boolean) => void;
|
|
1550
|
+
/** Props, class names and replacement components for the parts of the modal. */
|
|
1172
1551
|
customization?: TransactionsInfoModalCustomization<T>;
|
|
1173
1552
|
/** Pagination state for infinite scroll, forwarded to TransactionsHistory. */
|
|
1174
1553
|
pagination?: TxInMemoryPagination;
|
|
1175
1554
|
/** Optional transaction key to open directly in detail view */
|
|
1176
1555
|
selectedTxKey?: string | null;
|
|
1177
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
|
+
*/
|
|
1178
1566
|
declare function TransactionsInfoModal<T extends Transaction>({ isOpen, setIsOpen, customization, adapter, connectedWalletAddress, transactionsPool, pagination, selectedTxKey, }: TransactionsInfoModalProps<T>): react.JSX.Element;
|
|
1179
1567
|
|
|
1180
|
-
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 };
|