@abstraxn/signer-react 1.0.7 → 1.0.8
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/CHANGELOG.md +12 -0
- package/dist/src/ConnectButton.css +1 -23
- package/dist/src/ConnectButton.d.ts +11 -1
- package/dist/src/ConnectButton.js +15 -8
- package/dist/src/ConnectButton.js.map +1 -1
- package/dist/src/components/AbstraxnProvider/AbstraxnProviderInner.js +38 -1
- package/dist/src/components/AbstraxnProvider/AbstraxnProviderInner.js.map +1 -1
- package/dist/src/types.d.ts +1 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,18 @@ All notable changes to this project will be documented in this file.
|
|
|
5
5
|
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
|
6
6
|
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
|
7
7
|
|
|
8
|
+
## [1.0.8] - 2026-02-09
|
|
9
|
+
|
|
10
|
+
### Added
|
|
11
|
+
|
|
12
|
+
- **ConnectButton** – New optional props `connectingText` and `disconnectingText` (defaults: `'Connecting...'`, `'Disconnecting...'`) to customize the label shown while connecting or disconnecting.
|
|
13
|
+
- **AbstraxnContextValue** – New `disconnecting` boolean in context so UI can show a dedicated disconnecting state (e.g. "Disconnecting..." on the connect button).
|
|
14
|
+
|
|
15
|
+
### Changed
|
|
16
|
+
|
|
17
|
+
- **ConnectButton loading state** – Button now shows text ("Connecting..." / "Disconnecting..."). The loading class is applied for both connecting and disconnecting; custom `children` are hidden while the button is busy.
|
|
18
|
+
- **WalletConnect reconnect** – When connecting again with WalletConnect, modal DOM nodes that were previously force-hidden after connection are reset (display style removed) so the QR modal can show again on reconnect.
|
|
19
|
+
|
|
8
20
|
## [1.0.4] - 2026-02-06
|
|
9
21
|
|
|
10
22
|
### Fixed
|
|
@@ -161,33 +161,11 @@
|
|
|
161
161
|
background: rgba(156, 163, 175, 0.2);
|
|
162
162
|
}
|
|
163
163
|
|
|
164
|
-
/* Loading State */
|
|
164
|
+
/* Loading State - show status text only (Connecting... / Disconnecting...) */
|
|
165
165
|
.abstraxn-connect-button-loading {
|
|
166
|
-
position: relative;
|
|
167
|
-
color: transparent !important;
|
|
168
166
|
pointer-events: none;
|
|
169
167
|
}
|
|
170
168
|
|
|
171
|
-
.abstraxn-connect-button-loading::after {
|
|
172
|
-
content: '';
|
|
173
|
-
position: absolute;
|
|
174
|
-
top: 50%;
|
|
175
|
-
left: 50%;
|
|
176
|
-
width: 16px;
|
|
177
|
-
height: 16px;
|
|
178
|
-
margin: -8px 0 0 -8px;
|
|
179
|
-
border: 2px solid currentColor;
|
|
180
|
-
border-top-color: transparent;
|
|
181
|
-
border-radius: 50%;
|
|
182
|
-
animation: spin 0.6s linear infinite;
|
|
183
|
-
}
|
|
184
|
-
|
|
185
|
-
@keyframes spin {
|
|
186
|
-
to {
|
|
187
|
-
transform: rotate(360deg);
|
|
188
|
-
}
|
|
189
|
-
}
|
|
190
|
-
|
|
191
169
|
/* Address Badge */
|
|
192
170
|
.abstraxn-connect-button-address {
|
|
193
171
|
display: inline-flex;
|
|
@@ -13,6 +13,16 @@ export interface ConnectButtonProps extends Omit<ButtonHTMLAttributes<HTMLButton
|
|
|
13
13
|
* @default 'Connected'
|
|
14
14
|
*/
|
|
15
15
|
connectedText?: string;
|
|
16
|
+
/**
|
|
17
|
+
* Custom button text when connecting
|
|
18
|
+
* @default 'Connecting...'
|
|
19
|
+
*/
|
|
20
|
+
connectingText?: string;
|
|
21
|
+
/**
|
|
22
|
+
* Custom button text when disconnecting
|
|
23
|
+
* @default 'Disconnecting...'
|
|
24
|
+
*/
|
|
25
|
+
disconnectingText?: string;
|
|
16
26
|
/**
|
|
17
27
|
* Show address when connected
|
|
18
28
|
* @default false
|
|
@@ -68,4 +78,4 @@ export interface ConnectButtonProps extends Omit<ButtonHTMLAttributes<HTMLButton
|
|
|
68
78
|
* }
|
|
69
79
|
* ```
|
|
70
80
|
*/
|
|
71
|
-
export declare function ConnectButton({ connectText, connectedText, showAddress, children, onClick, disabled, variant, size, className, style, disableDefaultStyles, ...props }: ConnectButtonProps): import("react/jsx-runtime").JSX.Element;
|
|
81
|
+
export declare function ConnectButton({ connectText, connectedText, connectingText, disconnectingText, showAddress, children, onClick, disabled, variant, size, className, style, disableDefaultStyles, ...props }: ConnectButtonProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -25,9 +25,10 @@ import './ConnectButton.css';
|
|
|
25
25
|
* }
|
|
26
26
|
* ```
|
|
27
27
|
*/
|
|
28
|
-
export function ConnectButton({ connectText = 'Connect Wallet', connectedText = 'Connected', showAddress = false, children, onClick, disabled, variant = 'primary', size = 'md', className = '', style, disableDefaultStyles = false, ...props }) {
|
|
29
|
-
const { isConnected, address, showOnboarding, loading, resending, uiConfig } = useAbstraxnWallet();
|
|
28
|
+
export function ConnectButton({ connectText = 'Connect Wallet', connectedText = 'Connected', connectingText = 'Connecting...', disconnectingText = 'Disconnecting...', showAddress = false, children, onClick, disabled, variant = 'primary', size = 'md', className = '', style, disableDefaultStyles = false, ...props }) {
|
|
29
|
+
const { isConnected, address, showOnboarding, loading, resending, disconnecting, uiConfig } = useAbstraxnWallet();
|
|
30
30
|
const showLoading = loading && !resending;
|
|
31
|
+
const isBusy = showLoading || (disconnecting ?? false);
|
|
31
32
|
const [isWalletModalOpen, setIsWalletModalOpen] = useState(false);
|
|
32
33
|
const handleClick = useCallback((e) => {
|
|
33
34
|
if (onClick) {
|
|
@@ -69,8 +70,8 @@ export function ConnectButton({ connectText = 'Connect Wallet', connectedText =
|
|
|
69
70
|
if (isConnected) {
|
|
70
71
|
classes.push('abstraxn-connect-button-connected');
|
|
71
72
|
}
|
|
72
|
-
// Loading state class
|
|
73
|
-
if (loading) {
|
|
73
|
+
// Loading state class (connecting or disconnecting)
|
|
74
|
+
if (loading || (disconnecting ?? false)) {
|
|
74
75
|
classes.push('abstraxn-connect-button-loading');
|
|
75
76
|
}
|
|
76
77
|
// Custom className
|
|
@@ -78,12 +79,18 @@ export function ConnectButton({ connectText = 'Connect Wallet', connectedText =
|
|
|
78
79
|
classes.push(className);
|
|
79
80
|
}
|
|
80
81
|
return classes.join(' ');
|
|
81
|
-
}, [disableDefaultStyles, isDark, size, variant, isConnected, showLoading, className]);
|
|
82
|
+
}, [disableDefaultStyles, isDark, size, variant, isConnected, showLoading, disconnecting, className]);
|
|
82
83
|
// Determine button content
|
|
83
84
|
const buttonContent = useMemo(() => {
|
|
84
|
-
if (children) {
|
|
85
|
+
if (children && !isBusy) {
|
|
85
86
|
return children;
|
|
86
87
|
}
|
|
88
|
+
if (disconnecting) {
|
|
89
|
+
return disconnectingText;
|
|
90
|
+
}
|
|
91
|
+
if (showLoading) {
|
|
92
|
+
return connectingText;
|
|
93
|
+
}
|
|
87
94
|
if (isConnected) {
|
|
88
95
|
if (showAddress && address) {
|
|
89
96
|
// Show shortened address
|
|
@@ -97,7 +104,7 @@ export function ConnectButton({ connectText = 'Connect Wallet', connectedText =
|
|
|
97
104
|
else {
|
|
98
105
|
return connectText;
|
|
99
106
|
}
|
|
100
|
-
}, [children, isConnected, showAddress, address, connectedText, connectText]);
|
|
101
|
-
return (_jsxs(_Fragment, { children: [_jsx("button", { ...props, className: buttonClasses, style: style, onClick: handleClick, disabled: disabled ||
|
|
107
|
+
}, [children, isBusy, disconnecting, showLoading, disconnectingText, connectingText, isConnected, showAddress, address, connectedText, connectText]);
|
|
108
|
+
return (_jsxs(_Fragment, { children: [_jsx("button", { ...props, className: buttonClasses, style: style, onClick: handleClick, disabled: disabled || isBusy, type: props.type || 'button', children: buttonContent }), isConnected && (_jsx(WalletModal, { isOpen: isWalletModalOpen, onClose: handleCloseModal }))] }));
|
|
102
109
|
}
|
|
103
110
|
//# sourceMappingURL=ConnectButton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ConnectButton.js","sourceRoot":"","sources":["../../src/ConnectButton.tsx"],"names":[],"mappings":";AAAA;;;GAGG;AACH,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,OAAO,qBAAqB,CAAC;
|
|
1
|
+
{"version":3,"file":"ConnectButton.js","sourceRoot":"","sources":["../../src/ConnectButton.tsx"],"names":[],"mappings":"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"}
|
|
@@ -32,6 +32,7 @@ export function AbstraxnProviderInner({ config, children, base, wagmi, }) {
|
|
|
32
32
|
const [externalWalletChainId, setExternalWalletChainId] = useState(null);
|
|
33
33
|
// Connection type tracking: 'google' | 'email' | 'discord' | 'x' | 'passkey' | 'metamask' | 'walletconnect' | 'coinbase' | 'phantom' | 'injected' | null
|
|
34
34
|
const [connectionType, setConnectionType] = useState(null);
|
|
35
|
+
const [disconnecting, setDisconnecting] = useState(false);
|
|
35
36
|
const explicitConnectionRef = useRef(false);
|
|
36
37
|
const autoDisconnectHandledRef = useRef(false);
|
|
37
38
|
// Track when we last connected to prevent premature reset
|
|
@@ -1282,6 +1283,7 @@ export function AbstraxnProviderInner({ config, children, base, wagmi, }) {
|
|
|
1282
1283
|
// Disconnect wallet
|
|
1283
1284
|
const disconnect = useCallback(async () => {
|
|
1284
1285
|
setLoading(true);
|
|
1286
|
+
setDisconnecting(true);
|
|
1285
1287
|
setError(null);
|
|
1286
1288
|
disconnectingRef.current = true; // Set flag to prevent useEffect from interfering
|
|
1287
1289
|
try {
|
|
@@ -1413,10 +1415,11 @@ export function AbstraxnProviderInner({ config, children, base, wagmi, }) {
|
|
|
1413
1415
|
}
|
|
1414
1416
|
finally {
|
|
1415
1417
|
// Clear disconnecting flag after a short delay to allow state to settle
|
|
1418
|
+
setDisconnecting(false);
|
|
1419
|
+
setLoading(false);
|
|
1416
1420
|
setTimeout(() => {
|
|
1417
1421
|
disconnectingRef.current = false;
|
|
1418
1422
|
}, 200);
|
|
1419
|
-
setLoading(false);
|
|
1420
1423
|
}
|
|
1421
1424
|
}, [isExternalWalletConnected, externalWalletsEnabled, wagmiDisconnect, wagmiAccount?.connector]);
|
|
1422
1425
|
// Hide onboarding UI
|
|
@@ -2136,6 +2139,39 @@ export function AbstraxnProviderInner({ config, children, base, wagmi, }) {
|
|
|
2136
2139
|
// This ensures that when we reconnect after a disconnect, the address change is detected
|
|
2137
2140
|
lastAddressRef.current = null;
|
|
2138
2141
|
lastChainIdRef.current = null;
|
|
2142
|
+
// For WalletConnect: reset any modal elements we previously force-hid after connection.
|
|
2143
|
+
// Otherwise on reconnect the same DOM nodes stay display:none and the QR never shows.
|
|
2144
|
+
const isWalletConnectConnector = connector &&
|
|
2145
|
+
(String(connector.id || "").toLowerCase().includes("walletconnect") ||
|
|
2146
|
+
String(connector.id || "").toLowerCase().includes("wallet_connect") ||
|
|
2147
|
+
String(connector.name || "").toLowerCase().includes("walletconnect"));
|
|
2148
|
+
if (isWalletConnectConnector && typeof document !== "undefined") {
|
|
2149
|
+
const wcModalSelectors = [
|
|
2150
|
+
"w3m-modal",
|
|
2151
|
+
"w3m-modal-backdrop",
|
|
2152
|
+
"[data-w3m-modal]",
|
|
2153
|
+
".w3m-modal",
|
|
2154
|
+
".w3m-modal-backdrop",
|
|
2155
|
+
"#w3m-modal",
|
|
2156
|
+
"[class*='w3m-modal']",
|
|
2157
|
+
"[id*='w3m-modal']",
|
|
2158
|
+
"[class*='walletconnect-qrcode']",
|
|
2159
|
+
"[id*='walletconnect']",
|
|
2160
|
+
];
|
|
2161
|
+
wcModalSelectors.forEach((sel) => {
|
|
2162
|
+
try {
|
|
2163
|
+
document.querySelectorAll(sel).forEach((el) => {
|
|
2164
|
+
const htmlEl = el;
|
|
2165
|
+
if (htmlEl?.style) {
|
|
2166
|
+
htmlEl.style.removeProperty("display");
|
|
2167
|
+
}
|
|
2168
|
+
});
|
|
2169
|
+
}
|
|
2170
|
+
catch {
|
|
2171
|
+
// Ignore
|
|
2172
|
+
}
|
|
2173
|
+
});
|
|
2174
|
+
}
|
|
2139
2175
|
try {
|
|
2140
2176
|
// Use connectAsync to properly await the connection
|
|
2141
2177
|
const result = await wagmiConnect.connectAsync({ connector });
|
|
@@ -2627,6 +2663,7 @@ export function AbstraxnProviderInner({ config, children, base, wagmi, }) {
|
|
|
2627
2663
|
error,
|
|
2628
2664
|
loading,
|
|
2629
2665
|
resending: resending ?? false,
|
|
2666
|
+
disconnecting: disconnecting ?? false,
|
|
2630
2667
|
init,
|
|
2631
2668
|
connect,
|
|
2632
2669
|
disconnect,
|