@tuwaio/nova-transactions 0.0.14 → 0.0.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.css CHANGED
@@ -1,7 +1,10 @@
1
- /*! tailwindcss v4.1.12 | MIT License | https://tailwindcss.com */
1
+ /*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */
2
2
  @layer properties;
3
3
  @layer theme, base, components, utilities;
4
4
  @layer utilities {
5
+ .visible {
6
+ visibility: visible;
7
+ }
5
8
  .absolute {
6
9
  position: absolute;
7
10
  }
@@ -71,12 +74,6 @@
71
74
  .-mt-1 {
72
75
  margin-top: calc(0.25rem * -1);
73
76
  }
74
- .-mt-2 {
75
- margin-top: calc(0.25rem * -2);
76
- }
77
- .mt-0 {
78
- margin-top: calc(0.25rem * 0);
79
- }
80
77
  .mt-1 {
81
78
  margin-top: calc(0.25rem * 1);
82
79
  }
@@ -499,9 +496,6 @@
499
496
  .text-center {
500
497
  text-align: center;
501
498
  }
502
- .text-right {
503
- text-align: right;
504
- }
505
499
  .font-mono {
506
500
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
507
501
  monospace;
@@ -585,12 +579,6 @@
585
579
  .text-white {
586
580
  color: #fff;
587
581
  }
588
- .opacity-0 {
589
- opacity: 0%;
590
- }
591
- .opacity-100 {
592
- opacity: 100%;
593
- }
594
582
  .\!shadow-none {
595
583
  --tw-shadow: 0 0 #0000 !important;
596
584
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
@@ -612,7 +600,7 @@
612
600
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
613
601
  }
614
602
  .transition {
615
- transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
603
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
616
604
  transition-timing-function: var(--tw-ease, cubic-bezier(0.4, 0, 0.2, 1));
617
605
  transition-duration: var(--tw-duration, 150ms);
618
606
  }
@@ -635,10 +623,6 @@
635
623
  --tw-duration: 200ms;
636
624
  transition-duration: 200ms;
637
625
  }
638
- .duration-300 {
639
- --tw-duration: 300ms;
640
- transition-duration: 300ms;
641
- }
642
626
  .ease-in-out {
643
627
  --tw-ease: cubic-bezier(0.4, 0, 0.2, 1);
644
628
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
package/dist/index.d.cts CHANGED
@@ -1,164 +1,58 @@
1
- import { T as TuwaLabels } from './types-bqi7UbSO.cjs';
2
- export { H as HashLink, S as StatusAwareText, n as StepProps, m as StepStatus, c as ToastTransaction, a as ToastTransactionCustomization, v as ToastTransactionKeyProps, b as ToastTransactionProps, g as TrackingTxModal, e as TrackingTxModalCustomization, f as TrackingTxModalProps, u as TransactionHistoryItem, s as TransactionHistoryItemCustomization, t as TransactionHistoryItemProps, w as TransactionKey, z as TransactionStatusBadge, y as TransactionsHistory, x as TransactionsHistoryCustomization, d as TxActions, i as TxErrorBlock, h as TxErrorBlockProps, l as TxInfoBlock, j as TxInfoBlockCustomization, k as TxInfoBlockProps, p as TxProgressIndicator, o as TxProgressIndicatorProps, r as TxStatusVisual, q as TxStatusVisualProps, B as WalletInfoModal, W as WalletInfoModalCustomization, A as WalletInfoModalProps } from './types-bqi7UbSO.cjs';
3
- import { JSX, ReactNode, ButtonHTMLAttributes } from 'react';
4
- import { Transaction, IInitializeTxTrackingStore } from '@tuwaio/pulsar-core';
5
- import { Chain, Address } from 'viem';
6
- import '@wagmi/core';
7
- import 'react-toastify';
1
+ import { T as TuwaLabels } from './WalletInfoModal-BcTPDgW_.cjs';
2
+ export { a as HashLink, H as HashLinkProps, b as StatusAwareText, S as StatusAwareTextProps, o as StepProps, n as StepStatus, e as ToastTransaction, c as ToastTransactionCustomization, d as ToastTransactionProps, h as TrackingTxModal, f as TrackingTxModalCustomization, g as TrackingTxModalProps, v as TransactionHistoryItem, t as TransactionHistoryItemCustomization, u as TransactionHistoryItemProps, x as TransactionKey, w as TransactionKeyProps, C as TransactionStatusBadge, B as TransactionStatusBadgeProps, A as TransactionsHistory, y as TransactionsHistoryCustomization, z as TransactionsHistoryProps, j as TxErrorBlock, i as TxErrorBlockProps, m as TxInfoBlock, k as TxInfoBlockCustomization, l as TxInfoBlockProps, q as TxProgressIndicator, p as TxProgressIndicatorProps, s as TxStatusVisual, r as TxStatusVisualProps, D as WalletAddressDisplay, W as WalletAddressDisplayProps, F as WalletAvatar, E as WalletAvatarProps, I as WalletHeader, G as WalletHeaderProps, L as WalletInfoModal, J as WalletInfoModalCustomization, K as WalletInfoModalProps } from './WalletInfoModal-BcTPDgW_.cjs';
3
+ import * as react_jsx_runtime from 'react/jsx-runtime';
4
+ import { Transaction, TransactionPool } from '@tuwaio/pulsar-core';
5
+ import { ButtonHTMLAttributes, ReactNode } from 'react';
8
6
  import '@radix-ui/react-dialog';
9
- import '@tuwaio/pulsar-evm';
10
7
  import 'framer-motion';
11
- import 'react/jsx-runtime';
8
+ import 'react-toastify';
12
9
 
13
10
  /**
14
- * @file This file contains a reusable close button component, typically for toast notifications.
11
+ * @file This file contains a reusable close button component, designed primarily for toast notifications.
15
12
  */
16
-
17
- type ToastCloseButtonProps = {
18
- /**
19
- * The function to call when the button is clicked.
20
- * This is typically provided by a toast library to dismiss the notification.
21
- */
22
- closeToast?: (e: React.MouseEvent<HTMLElement>) => void;
23
- };
24
13
  /**
25
- * A simple, styled close button component (X icon) designed for use within toast notifications.
26
- *
27
- * @param {ToastCloseButtonProps} props - The component props.
28
- * @returns {JSX.Element} The rendered close button.
14
+ * Defines the props for the ToastCloseButton component.
29
15
  */
30
- declare function ToastCloseButton({ closeToast }: ToastCloseButtonProps): JSX.Element;
31
-
32
- /**
33
- * @file This file contains the `WalletAddressDisplay` component, a UI element for showing a wallet address.
34
- */
35
-
36
- type WalletAddressDisplayProps = {
37
- /** The wallet address to display. */
38
- address: string;
16
+ type ToastCloseButtonProps = {
39
17
  /**
40
- * The viem `Chain` object for the network the address belongs to.
41
- * This is used to generate the correct block explorer link.
18
+ * The function to call when the button is clicked. This is typically provided by the
19
+ * toast library (e.g., react-toastify) to dismiss the notification.
42
20
  */
43
- chain?: Chain;
44
- /** Optional additional CSS classes for the container. */
45
- className?: string;
46
- };
47
- /**
48
- * A component that renders a wallet address in a styled "pill" format,
49
- * including a copy button and a link to the appropriate block explorer.
50
- *
51
- * @param {WalletAddressDisplayProps} props - The component props.
52
- * @returns {JSX.Element} The rendered component.
53
- */
54
- declare function WalletAddressDisplay({ address, chain, className }: WalletAddressDisplayProps): JSX.Element;
55
-
56
- /**
57
- * @file This file contains the `WalletAvatar` component for displaying a user's avatar.
58
- */
59
-
60
- type WalletAvatarProps = {
61
- /** The user's wallet address. Used for the blockie fallback and background color generation. */
62
- address: string;
63
- /** An optional URL for the user's ENS avatar image. */
64
- ensAvatar?: string;
65
- /** Optional additional CSS classes for the container. */
66
- className?: string;
67
- };
68
- /**
69
- * A component that displays a user's avatar.
70
- * It prioritizes showing the provided `ensAvatar`. If unavailable, it falls back
71
- * to a procedurally generated "blockie" based on the user's address.
72
- * It also generates a unique background color from the address as a placeholder.
73
- *
74
- * @param {WalletAvatarProps} props - The component props.
75
- * @returns {JSX.Element} The rendered avatar component.
76
- */
77
- declare function WalletAvatar({ address, ensAvatar, className }: WalletAvatarProps): JSX.Element;
78
-
79
- /**
80
- * @file This file contains the `WalletHeader` component, used to display user avatar, name, and address.
81
- */
82
-
83
- type AvatarRenderProps = {
84
- address: string;
85
- ensAvatar?: string;
86
- };
87
- type NameRenderProps = {
88
- ensName?: string;
89
- isLoading: boolean;
90
- address: string;
91
- };
92
- type AddressRenderProps = {
93
- address: string;
94
- chain?: Chain;
21
+ closeToast?: (e: React.MouseEvent<HTMLElement>) => void;
95
22
  };
96
23
  /**
97
- * Defines the props for the `WalletHeader` component, including extensive customization options.
98
- */
99
- interface WalletHeaderProps {
100
- /** The user's wallet address. If undefined, the 'not connected' state is shown. */
101
- walletAddress?: Address;
102
- /** The viem `Chain` object for the currently connected network. */
103
- chain?: Chain;
104
- /** Optional additional CSS classes for the container. */
105
- className?: string;
106
- /** A render prop to replace the default `WalletAvatar` component. */
107
- renderAvatar?: (props: AvatarRenderProps) => ReactNode;
108
- /** A render prop to replace the default ENS name display. */
109
- renderName?: (props: NameRenderProps) => ReactNode;
110
- /** A render prop to replace the default `WalletAddressDisplay` component. */
111
- renderAddressDisplay?: (props: AddressRenderProps) => ReactNode;
112
- /** A render prop to replace the default content shown when no wallet is connected. */
113
- renderNoWalletContent?: () => ReactNode;
114
- }
115
- /**
116
- * A component that displays the header for the wallet modal, including the user's avatar,
117
- * ENS name (if available), and address. It handles loading states for ENS data and
118
- * provides a "not connected" view.
119
- *
120
- * @param {WalletHeaderProps} props - The component props.
121
- * @returns {JSX.Element} The rendered wallet header.
24
+ * A simple, styled close button component ('X' icon) intended for use within toast notifications.
25
+ * It uses theme-aware CSS variables for styling and i18n labels for accessibility.
122
26
  */
123
- declare function WalletHeader({ walletAddress, chain, className, renderAvatar, renderName, renderAddressDisplay, renderNoWalletContent, }: WalletHeaderProps): JSX.Element;
27
+ declare function ToastCloseButton({ closeToast }: ToastCloseButtonProps): react_jsx_runtime.JSX.Element;
124
28
 
125
- /**
126
- * @file This file contains the `TxActionButton`, a stateful button for initiating and tracking transactions.
127
- * It provides users with immediate visual feedback throughout the lifecycle of a transaction,
128
- * from initiation to success, failure, or replacement.
129
- */
130
-
131
- interface TxActionButtonProps<TR, T extends Transaction<TR>> extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'>, Pick<IInitializeTxTrackingStore<TR, T>, 'transactionsPool'> {
132
- /** The default content to display when the button is in its 'idle' state. Typically the button's primary call to action text. */
29
+ type TxActionButtonProps<TR, T extends Transaction<TR>> = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> & {
30
+ /** The default content to display when the button is 'idle'. */
133
31
  children: ReactNode;
134
- /** The asynchronous function to execute when the button is clicked. This function should initiate the transaction and return a promise. */
32
+ /** The async function to execute when the button is clicked to initiate the transaction. */
135
33
  action: () => Promise<void>;
136
- /** A function that returns the unique key (e.g., transaction hash) of the most recently initiated transaction. This is used to link the button's state to a specific transaction in the pool. */
34
+ /** A function that returns the unique key of the most recently initiated transaction. */
137
35
  getLastTxKey: () => string | undefined;
138
- /** Optional custom content to display in the 'loading' state. If not provided, a default spinner and text will be used. */
36
+ /** The global transaction pool from the Pulsar store. */
37
+ transactionsPool: TransactionPool<TR, T>;
38
+ /** Optional active wallet address. If provided, the button will only track transactions from this address. */
39
+ walletAddress?: string;
40
+ /** Optional custom content for the 'loading' state. */
139
41
  loadingContent?: ReactNode;
140
- /** Optional custom content to display in the 'succeed' state. If not provided, a default success icon and text will be used. */
42
+ /** Optional custom content for the 'succeed' state. */
141
43
  succeedContent?: ReactNode;
142
- /** Optional custom content to display in the 'failed' state. If not provided, a default error icon and text will be used. */
44
+ /** Optional custom content for the 'failed' state. */
143
45
  failedContent?: ReactNode;
144
- /** Optional custom content to display in the 'replaced' state. If not provided, a default icon and text will be used. */
46
+ /** Optional custom content for the 'replaced' state. */
145
47
  replacedContent?: ReactNode;
146
- /** The duration (in milliseconds) to display the 'succeed', 'failed', or 'replaced' state before automatically resetting the button to 'idle'. Defaults to 2500ms. */
48
+ /** The duration (in ms) to display a final state before resetting to 'idle'. Defaults to 2500ms. */
147
49
  resetTimeout?: number;
148
- /** Optional active wallet address. If provided, the button will only display if the transaction was initiated by the active wallet. */
149
- walletAddress?: string;
150
- }
50
+ };
151
51
  /**
152
52
  * A stateful button that provides real-time feedback for a transaction's lifecycle.
153
- * It listens for changes in the global `transactionsPool` to automatically update its
154
- * visual state, showing loading, success, failure, and replaced statuses.
155
- *
156
- * @template TR - The generic type for the transaction tracker registry.
157
- * @template T - The generic type for the transaction object.
158
- * @param {TxActionButtonProps<TR, T>} props - The component props.
159
- * @returns {JSX.Element} The rendered stateful action button.
53
+ * It listens for changes in `transactionsPool` to automatically update its visual state.
160
54
  */
161
- declare function TxActionButton<TR, T extends Transaction<TR>>({ children, action, getLastTxKey, loadingContent, succeedContent, failedContent, replacedContent, resetTimeout, transactionsPool, className, walletAddress, ...props }: TxActionButtonProps<TR, T>): JSX.Element;
55
+ declare function TxActionButton<TR, T extends Transaction<TR>>({ children, action, getLastTxKey, transactionsPool, walletAddress, loadingContent, succeedContent, failedContent, replacedContent, resetTimeout, className, ...props }: TxActionButtonProps<TR, T>): react_jsx_runtime.JSX.Element;
162
56
 
163
57
  /**
164
58
  * @file This file contains the default English labels for all UI components.
@@ -172,4 +66,4 @@ declare function TxActionButton<TR, T extends Transaction<TR>>({ children, actio
172
66
  */
173
67
  declare const defaultLabels: TuwaLabels;
174
68
 
175
- export { ToastCloseButton, TuwaLabels, TxActionButton, type TxActionButtonProps, WalletAddressDisplay, type WalletAddressDisplayProps, WalletAvatar, type WalletAvatarProps, WalletHeader, type WalletHeaderProps, defaultLabels };
69
+ export { ToastCloseButton, type ToastCloseButtonProps, TuwaLabels, TxActionButton, type TxActionButtonProps, defaultLabels };
package/dist/index.d.ts CHANGED
@@ -1,164 +1,58 @@
1
- import { T as TuwaLabels } from './types-bqi7UbSO.js';
2
- export { H as HashLink, S as StatusAwareText, n as StepProps, m as StepStatus, c as ToastTransaction, a as ToastTransactionCustomization, v as ToastTransactionKeyProps, b as ToastTransactionProps, g as TrackingTxModal, e as TrackingTxModalCustomization, f as TrackingTxModalProps, u as TransactionHistoryItem, s as TransactionHistoryItemCustomization, t as TransactionHistoryItemProps, w as TransactionKey, z as TransactionStatusBadge, y as TransactionsHistory, x as TransactionsHistoryCustomization, d as TxActions, i as TxErrorBlock, h as TxErrorBlockProps, l as TxInfoBlock, j as TxInfoBlockCustomization, k as TxInfoBlockProps, p as TxProgressIndicator, o as TxProgressIndicatorProps, r as TxStatusVisual, q as TxStatusVisualProps, B as WalletInfoModal, W as WalletInfoModalCustomization, A as WalletInfoModalProps } from './types-bqi7UbSO.js';
3
- import { JSX, ReactNode, ButtonHTMLAttributes } from 'react';
4
- import { Transaction, IInitializeTxTrackingStore } from '@tuwaio/pulsar-core';
5
- import { Chain, Address } from 'viem';
6
- import '@wagmi/core';
7
- import 'react-toastify';
1
+ import { T as TuwaLabels } from './WalletInfoModal-BcTPDgW_.js';
2
+ export { a as HashLink, H as HashLinkProps, b as StatusAwareText, S as StatusAwareTextProps, o as StepProps, n as StepStatus, e as ToastTransaction, c as ToastTransactionCustomization, d as ToastTransactionProps, h as TrackingTxModal, f as TrackingTxModalCustomization, g as TrackingTxModalProps, v as TransactionHistoryItem, t as TransactionHistoryItemCustomization, u as TransactionHistoryItemProps, x as TransactionKey, w as TransactionKeyProps, C as TransactionStatusBadge, B as TransactionStatusBadgeProps, A as TransactionsHistory, y as TransactionsHistoryCustomization, z as TransactionsHistoryProps, j as TxErrorBlock, i as TxErrorBlockProps, m as TxInfoBlock, k as TxInfoBlockCustomization, l as TxInfoBlockProps, q as TxProgressIndicator, p as TxProgressIndicatorProps, s as TxStatusVisual, r as TxStatusVisualProps, D as WalletAddressDisplay, W as WalletAddressDisplayProps, F as WalletAvatar, E as WalletAvatarProps, I as WalletHeader, G as WalletHeaderProps, L as WalletInfoModal, J as WalletInfoModalCustomization, K as WalletInfoModalProps } from './WalletInfoModal-BcTPDgW_.js';
3
+ import * as react_jsx_runtime from 'react/jsx-runtime';
4
+ import { Transaction, TransactionPool } from '@tuwaio/pulsar-core';
5
+ import { ButtonHTMLAttributes, ReactNode } from 'react';
8
6
  import '@radix-ui/react-dialog';
9
- import '@tuwaio/pulsar-evm';
10
7
  import 'framer-motion';
11
- import 'react/jsx-runtime';
8
+ import 'react-toastify';
12
9
 
13
10
  /**
14
- * @file This file contains a reusable close button component, typically for toast notifications.
11
+ * @file This file contains a reusable close button component, designed primarily for toast notifications.
15
12
  */
16
-
17
- type ToastCloseButtonProps = {
18
- /**
19
- * The function to call when the button is clicked.
20
- * This is typically provided by a toast library to dismiss the notification.
21
- */
22
- closeToast?: (e: React.MouseEvent<HTMLElement>) => void;
23
- };
24
13
  /**
25
- * A simple, styled close button component (X icon) designed for use within toast notifications.
26
- *
27
- * @param {ToastCloseButtonProps} props - The component props.
28
- * @returns {JSX.Element} The rendered close button.
14
+ * Defines the props for the ToastCloseButton component.
29
15
  */
30
- declare function ToastCloseButton({ closeToast }: ToastCloseButtonProps): JSX.Element;
31
-
32
- /**
33
- * @file This file contains the `WalletAddressDisplay` component, a UI element for showing a wallet address.
34
- */
35
-
36
- type WalletAddressDisplayProps = {
37
- /** The wallet address to display. */
38
- address: string;
16
+ type ToastCloseButtonProps = {
39
17
  /**
40
- * The viem `Chain` object for the network the address belongs to.
41
- * This is used to generate the correct block explorer link.
18
+ * The function to call when the button is clicked. This is typically provided by the
19
+ * toast library (e.g., react-toastify) to dismiss the notification.
42
20
  */
43
- chain?: Chain;
44
- /** Optional additional CSS classes for the container. */
45
- className?: string;
46
- };
47
- /**
48
- * A component that renders a wallet address in a styled "pill" format,
49
- * including a copy button and a link to the appropriate block explorer.
50
- *
51
- * @param {WalletAddressDisplayProps} props - The component props.
52
- * @returns {JSX.Element} The rendered component.
53
- */
54
- declare function WalletAddressDisplay({ address, chain, className }: WalletAddressDisplayProps): JSX.Element;
55
-
56
- /**
57
- * @file This file contains the `WalletAvatar` component for displaying a user's avatar.
58
- */
59
-
60
- type WalletAvatarProps = {
61
- /** The user's wallet address. Used for the blockie fallback and background color generation. */
62
- address: string;
63
- /** An optional URL for the user's ENS avatar image. */
64
- ensAvatar?: string;
65
- /** Optional additional CSS classes for the container. */
66
- className?: string;
67
- };
68
- /**
69
- * A component that displays a user's avatar.
70
- * It prioritizes showing the provided `ensAvatar`. If unavailable, it falls back
71
- * to a procedurally generated "blockie" based on the user's address.
72
- * It also generates a unique background color from the address as a placeholder.
73
- *
74
- * @param {WalletAvatarProps} props - The component props.
75
- * @returns {JSX.Element} The rendered avatar component.
76
- */
77
- declare function WalletAvatar({ address, ensAvatar, className }: WalletAvatarProps): JSX.Element;
78
-
79
- /**
80
- * @file This file contains the `WalletHeader` component, used to display user avatar, name, and address.
81
- */
82
-
83
- type AvatarRenderProps = {
84
- address: string;
85
- ensAvatar?: string;
86
- };
87
- type NameRenderProps = {
88
- ensName?: string;
89
- isLoading: boolean;
90
- address: string;
91
- };
92
- type AddressRenderProps = {
93
- address: string;
94
- chain?: Chain;
21
+ closeToast?: (e: React.MouseEvent<HTMLElement>) => void;
95
22
  };
96
23
  /**
97
- * Defines the props for the `WalletHeader` component, including extensive customization options.
98
- */
99
- interface WalletHeaderProps {
100
- /** The user's wallet address. If undefined, the 'not connected' state is shown. */
101
- walletAddress?: Address;
102
- /** The viem `Chain` object for the currently connected network. */
103
- chain?: Chain;
104
- /** Optional additional CSS classes for the container. */
105
- className?: string;
106
- /** A render prop to replace the default `WalletAvatar` component. */
107
- renderAvatar?: (props: AvatarRenderProps) => ReactNode;
108
- /** A render prop to replace the default ENS name display. */
109
- renderName?: (props: NameRenderProps) => ReactNode;
110
- /** A render prop to replace the default `WalletAddressDisplay` component. */
111
- renderAddressDisplay?: (props: AddressRenderProps) => ReactNode;
112
- /** A render prop to replace the default content shown when no wallet is connected. */
113
- renderNoWalletContent?: () => ReactNode;
114
- }
115
- /**
116
- * A component that displays the header for the wallet modal, including the user's avatar,
117
- * ENS name (if available), and address. It handles loading states for ENS data and
118
- * provides a "not connected" view.
119
- *
120
- * @param {WalletHeaderProps} props - The component props.
121
- * @returns {JSX.Element} The rendered wallet header.
24
+ * A simple, styled close button component ('X' icon) intended for use within toast notifications.
25
+ * It uses theme-aware CSS variables for styling and i18n labels for accessibility.
122
26
  */
123
- declare function WalletHeader({ walletAddress, chain, className, renderAvatar, renderName, renderAddressDisplay, renderNoWalletContent, }: WalletHeaderProps): JSX.Element;
27
+ declare function ToastCloseButton({ closeToast }: ToastCloseButtonProps): react_jsx_runtime.JSX.Element;
124
28
 
125
- /**
126
- * @file This file contains the `TxActionButton`, a stateful button for initiating and tracking transactions.
127
- * It provides users with immediate visual feedback throughout the lifecycle of a transaction,
128
- * from initiation to success, failure, or replacement.
129
- */
130
-
131
- interface TxActionButtonProps<TR, T extends Transaction<TR>> extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'>, Pick<IInitializeTxTrackingStore<TR, T>, 'transactionsPool'> {
132
- /** The default content to display when the button is in its 'idle' state. Typically the button's primary call to action text. */
29
+ type TxActionButtonProps<TR, T extends Transaction<TR>> = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> & {
30
+ /** The default content to display when the button is 'idle'. */
133
31
  children: ReactNode;
134
- /** The asynchronous function to execute when the button is clicked. This function should initiate the transaction and return a promise. */
32
+ /** The async function to execute when the button is clicked to initiate the transaction. */
135
33
  action: () => Promise<void>;
136
- /** A function that returns the unique key (e.g., transaction hash) of the most recently initiated transaction. This is used to link the button's state to a specific transaction in the pool. */
34
+ /** A function that returns the unique key of the most recently initiated transaction. */
137
35
  getLastTxKey: () => string | undefined;
138
- /** Optional custom content to display in the 'loading' state. If not provided, a default spinner and text will be used. */
36
+ /** The global transaction pool from the Pulsar store. */
37
+ transactionsPool: TransactionPool<TR, T>;
38
+ /** Optional active wallet address. If provided, the button will only track transactions from this address. */
39
+ walletAddress?: string;
40
+ /** Optional custom content for the 'loading' state. */
139
41
  loadingContent?: ReactNode;
140
- /** Optional custom content to display in the 'succeed' state. If not provided, a default success icon and text will be used. */
42
+ /** Optional custom content for the 'succeed' state. */
141
43
  succeedContent?: ReactNode;
142
- /** Optional custom content to display in the 'failed' state. If not provided, a default error icon and text will be used. */
44
+ /** Optional custom content for the 'failed' state. */
143
45
  failedContent?: ReactNode;
144
- /** Optional custom content to display in the 'replaced' state. If not provided, a default icon and text will be used. */
46
+ /** Optional custom content for the 'replaced' state. */
145
47
  replacedContent?: ReactNode;
146
- /** The duration (in milliseconds) to display the 'succeed', 'failed', or 'replaced' state before automatically resetting the button to 'idle'. Defaults to 2500ms. */
48
+ /** The duration (in ms) to display a final state before resetting to 'idle'. Defaults to 2500ms. */
147
49
  resetTimeout?: number;
148
- /** Optional active wallet address. If provided, the button will only display if the transaction was initiated by the active wallet. */
149
- walletAddress?: string;
150
- }
50
+ };
151
51
  /**
152
52
  * A stateful button that provides real-time feedback for a transaction's lifecycle.
153
- * It listens for changes in the global `transactionsPool` to automatically update its
154
- * visual state, showing loading, success, failure, and replaced statuses.
155
- *
156
- * @template TR - The generic type for the transaction tracker registry.
157
- * @template T - The generic type for the transaction object.
158
- * @param {TxActionButtonProps<TR, T>} props - The component props.
159
- * @returns {JSX.Element} The rendered stateful action button.
53
+ * It listens for changes in `transactionsPool` to automatically update its visual state.
160
54
  */
161
- declare function TxActionButton<TR, T extends Transaction<TR>>({ children, action, getLastTxKey, loadingContent, succeedContent, failedContent, replacedContent, resetTimeout, transactionsPool, className, walletAddress, ...props }: TxActionButtonProps<TR, T>): JSX.Element;
55
+ declare function TxActionButton<TR, T extends Transaction<TR>>({ children, action, getLastTxKey, transactionsPool, walletAddress, loadingContent, succeedContent, failedContent, replacedContent, resetTimeout, className, ...props }: TxActionButtonProps<TR, T>): react_jsx_runtime.JSX.Element;
162
56
 
163
57
  /**
164
58
  * @file This file contains the default English labels for all UI components.
@@ -172,4 +66,4 @@ declare function TxActionButton<TR, T extends Transaction<TR>>({ children, actio
172
66
  */
173
67
  declare const defaultLabels: TuwaLabels;
174
68
 
175
- export { ToastCloseButton, TuwaLabels, TxActionButton, type TxActionButtonProps, WalletAddressDisplay, type WalletAddressDisplayProps, WalletAvatar, type WalletAvatarProps, WalletHeader, type WalletHeaderProps, defaultLabels };
69
+ export { ToastCloseButton, type ToastCloseButtonProps, TuwaLabels, TxActionButton, type TxActionButtonProps, defaultLabels };