@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/README.md +81 -84
- package/dist/WalletInfoModal-BcTPDgW_.d.cts +568 -0
- package/dist/WalletInfoModal-BcTPDgW_.d.ts +568 -0
- package/dist/index.cjs +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +5 -21
- package/dist/index.d.cts +32 -138
- package/dist/index.d.ts +32 -138
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/providers/index.cjs +1 -1
- package/dist/providers/index.cjs.map +1 -1
- package/dist/providers/index.d.cts +6 -39
- package/dist/providers/index.d.ts +6 -39
- package/dist/providers/index.js +1 -1
- package/dist/providers/index.js.map +1 -1
- package/package.json +13 -15
- package/dist/types-bqi7UbSO.d.cts +0 -625
- package/dist/types-bqi7UbSO.d.ts +0 -625
package/dist/index.css
CHANGED
@@ -1,7 +1,10 @@
|
|
1
|
-
/*! tailwindcss v4.1.
|
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,
|
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 './
|
2
|
-
export {
|
3
|
-
import
|
4
|
-
import { Transaction,
|
5
|
-
import {
|
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
|
8
|
+
import 'react-toastify';
|
12
9
|
|
13
10
|
/**
|
14
|
-
* @file This file contains a reusable close button component,
|
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
|
-
*
|
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
|
-
|
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
|
41
|
-
*
|
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
|
-
|
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
|
-
*
|
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
|
27
|
+
declare function ToastCloseButton({ closeToast }: ToastCloseButtonProps): react_jsx_runtime.JSX.Element;
|
124
28
|
|
125
|
-
|
126
|
-
|
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
|
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
|
34
|
+
/** A function that returns the unique key of the most recently initiated transaction. */
|
137
35
|
getLastTxKey: () => string | undefined;
|
138
|
-
/**
|
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
|
42
|
+
/** Optional custom content for the 'succeed' state. */
|
141
43
|
succeedContent?: ReactNode;
|
142
|
-
/** Optional custom content
|
44
|
+
/** Optional custom content for the 'failed' state. */
|
143
45
|
failedContent?: ReactNode;
|
144
|
-
/** Optional custom content
|
46
|
+
/** Optional custom content for the 'replaced' state. */
|
145
47
|
replacedContent?: ReactNode;
|
146
|
-
/** The duration (in
|
48
|
+
/** The duration (in ms) to display a final state before resetting to 'idle'. Defaults to 2500ms. */
|
147
49
|
resetTimeout?: number;
|
148
|
-
|
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
|
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,
|
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,
|
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 './
|
2
|
-
export {
|
3
|
-
import
|
4
|
-
import { Transaction,
|
5
|
-
import {
|
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
|
8
|
+
import 'react-toastify';
|
12
9
|
|
13
10
|
/**
|
14
|
-
* @file This file contains a reusable close button component,
|
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
|
-
*
|
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
|
-
|
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
|
41
|
-
*
|
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
|
-
|
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
|
-
*
|
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
|
27
|
+
declare function ToastCloseButton({ closeToast }: ToastCloseButtonProps): react_jsx_runtime.JSX.Element;
|
124
28
|
|
125
|
-
|
126
|
-
|
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
|
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
|
34
|
+
/** A function that returns the unique key of the most recently initiated transaction. */
|
137
35
|
getLastTxKey: () => string | undefined;
|
138
|
-
/**
|
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
|
42
|
+
/** Optional custom content for the 'succeed' state. */
|
141
43
|
succeedContent?: ReactNode;
|
142
|
-
/** Optional custom content
|
44
|
+
/** Optional custom content for the 'failed' state. */
|
143
45
|
failedContent?: ReactNode;
|
144
|
-
/** Optional custom content
|
46
|
+
/** Optional custom content for the 'replaced' state. */
|
145
47
|
replacedContent?: ReactNode;
|
146
|
-
/** The duration (in
|
48
|
+
/** The duration (in ms) to display a final state before resetting to 'idle'. Defaults to 2500ms. */
|
147
49
|
resetTimeout?: number;
|
148
|
-
|
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
|
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,
|
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,
|
69
|
+
export { ToastCloseButton, type ToastCloseButtonProps, TuwaLabels, TxActionButton, type TxActionButtonProps, defaultLabels };
|