@abstraxn/signer-react 1.0.14 → 1.0.16

package/CHANGELOG.md

@@ -5,6 +5,19 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.0.16] - 2026-02-23
+
+### Fixed
+
+- **External wallet disconnect from extension** – When the user disconnects from an external wallet (e.g. MetaMask) via the extension ("Disconnect this site"), the app now updates `isConnected` to false immediately without requiring a page refresh. Previously the sync effect returned early when the user had explicitly connected, so state was never reset until refresh. The fix: (1) allow the sync effect to run the existing reset when wagmi reports disconnected; (2) use wagmi’s `useConnectionEffect(onDisconnect)` to clear external wallet state as soon as wagmi reports disconnect; (3) subscribe to the connector provider’s `accountsChanged` and `disconnect` events so state clears even if wagmi is slow or stale.
+
+## [1.0.15] - 2026-02-20
+
+### Added
+
+- **`useEmailForOtp` hook** – Hook to get and set the email used to pre-fill the email-OTP form in onboarding. When the app calls `setEmailForOtp(email)`, the onboarding email field shows that value and is read-only (user cannot edit it). The same prefill and read-only behavior applies in both React onboarding (OnboardingUIReact) and Web onboarding (OnboardingUIWeb), including when opening the modal via ConnectButton. Exported from the package as `useEmailForOtp`.
+- **Pre-fill email context** – Provider now exposes `emailForOtp` and `setEmailForOtp` on context. When `emailForOtp` is set, the email input is read-only and shows `cursor: not-allowed` for clearer UX.
+
 ## [1.0.14] - 2026-02-20
 
 ### Fixed

package/dist/src/components/AbstraxnProvider/AbstraxnProviderInner.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * AbstraxnProviderInner - Core provider logic
  * This component contains all the wallet state management and operations
@@ -6,15 +6,22 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useState, useRef, useCallback, useMemo, } from "react";
 import { AbstraxnWallet, AuthenticationError, } from "@abstraxn/signer-core";
 import { OnboardingUIWeb } from "../OnboardingUI";
+import { useConnectionEffect, } from "wagmi";
 import { parseEther, createPublicClient, http } from "viem";
 import { ExternalWalletButtons } from "../../ExternalWalletButtons";
 import { EVM_CHAINS, SOLANA_CHAINS, getChainById, toCoreChain, } from "../../chains";
 import { AbstraxnContext } from "./context";
+/** Syncs wagmi disconnect to external wallet state; only rendered when wagmi is available (under WagmiProvider). */
+function WagmiConnectionEffectSync({ onDisconnect, }) {
+    useConnectionEffect({ onDisconnect });
+    return null;
+}
 export function AbstraxnProviderInner({ config, children, base, wagmi, }) {
     const { isInitialized, setIsInitialized, isConnected, setIsConnected, address, setAddress, user, setUser, whoami, setWhoami, chainId, setChainId, error, setError, loading, setLoading, resending, setResending, walletBalance, setWalletBalance, onboardingRef, otpIdRef, walletRef, googleCallbackHandledRef, twitterCallbackHandledRef, discordCallbackHandledRef, } = base;
     const externalWalletsEnabled = config.externalWallets?.enabled ?? false;
     // Keep a ref to avoid re-creating callbacks when toggling config (prevents flicker)
     const externalWalletsEnabledRef = useRef(externalWalletsEnabled);
+    const isExternalWalletConnectedRef = useRef(false);
     useEffect(() => {
         externalWalletsEnabledRef.current = externalWalletsEnabled;
     }, [externalWalletsEnabled]);
@@ -34,8 +41,12 @@ export function AbstraxnProviderInner({ config, children, base, wagmi, }) {
     // Connection type tracking: 'google' | 'email' | 'discord' | 'x' | 'passkey' | 'metamask' | 'walletconnect' | 'coinbase' | 'phantom' | 'injected' | null
     const [connectionType, setConnectionType] = useState(null);
     const [disconnecting, setDisconnecting] = useState(false);
+    const [emailForOtp, setEmailForOtpState] = useState("");
     const explicitConnectionRef = useRef(false);
     const autoDisconnectHandledRef = useRef(false);
+    useEffect(() => {
+        isExternalWalletConnectedRef.current = isExternalWalletConnected;
+    }, [isExternalWalletConnected]);
     // Track when we last connected to prevent premature reset
     const lastConnectionTimeRef = useRef(0);
     // Refs to track previous values and prevent unnecessary updates
@@ -1016,6 +1027,9 @@ export function AbstraxnProviderInner({ config, children, base, wagmi, }) {
                             onboarding.modalOverlay.classList.add("onboarding-modal-open");
                             onboarding.modalOverlay.style.display = "flex";
                             document.body.style.overflow = "hidden";
+                            if (emailForOtp && typeof onboarding.setPreFillEmail === "function") {
+                                onboarding.setPreFillEmail(emailForOtp, { readOnly: true });
+                            }
                             // Ensure external wallet container is visible when modal opens
                             if (externalWalletsEnabledRef.current &&
                                 onboarding.externalWalletContainer) {
@@ -1078,6 +1092,9 @@ export function AbstraxnProviderInner({ config, children, base, wagmi, }) {
                         onboarding.rootElement.style.display = "";
                     }
                     document.body.style.overflow = "hidden";
+                    if (emailForOtp && typeof onboarding.setPreFillEmail === "function") {
+                        onboarding.setPreFillEmail(emailForOtp, { readOnly: true });
+                    }
                     // If on OTP screen, ensure all login elements (social buttons, etc.) are hidden
                     if (isOtpScreen) {
                         // On OTP screen - ensure all login elements are hidden
@@ -1155,7 +1172,7 @@ export function AbstraxnProviderInner({ config, children, base, wagmi, }) {
             }
         }
         // Note: externalWalletsEnabled is accessed via ref to keep this callback stable
-    }, []);
+    }, [emailForOtp]);
     // Initialize IndexedDB
     const init = useCallback(async () => {
         if (!walletRef.current || isInitialized)
@@ -1977,12 +1994,6 @@ export function AbstraxnProviderInner({ config, children, base, wagmi, }) {
                 isUpdatingRef.current = false;
                 return;
             }
-            // If we're not connected but explicitConnectionRef is true, it means we're trying to reconnect
-            // Don't reset state in this case - wait for the connection to complete
-            if (!wagmiAccount.isConnected && explicitConnectionRef.current) {
-                // Connection is in progress, don't interfere
-                return;
-            }
         }
         // Check if external wallet is connected
         if (wagmiAccount.isConnected && wagmiAccount.address) {
@@ -2476,6 +2487,95 @@ export function AbstraxnProviderInner({ config, children, base, wagmi, }) {
             setLoading(false);
         }
     }, [externalWalletsEnabled, wagmiDisconnect, wagmiAccount?.connector]);
+    // When wagmi reports disconnect (e.g. user disconnected in extension), clear external wallet state immediately
+    const handleWagmiDisconnect = useCallback(() => {
+        if (!externalWalletsEnabledRef.current)
+            return;
+        setIsExternalWalletConnected(false);
+        setExternalWalletAddress(null);
+        setExternalWalletChainId(null);
+        setConnectionType(null);
+        try {
+            localStorage.removeItem("abstraxn_connection_type");
+        }
+        catch (e) {
+            // Ignore
+        }
+        explicitConnectionRef.current = false;
+        lastConnectionTimeRef.current = 0;
+        lastAddressRef.current = null;
+        lastChainIdRef.current = null;
+        if (!walletRef.current?.isConnected) {
+            setIsConnected(false);
+            setAddress(null);
+            setChainId(null);
+        }
+    }, [
+        setIsExternalWalletConnected,
+        setExternalWalletAddress,
+        setExternalWalletChainId,
+        setConnectionType,
+        setIsConnected,
+        setAddress,
+        setChainId,
+    ]);
+    // When user disconnects in the extension, provider may emit before wagmi updates; listen so we clear state even if wagmi is stale
+    const providerListenerCleanupRef = useRef(null);
+    useEffect(() => {
+        if (!externalWalletsEnabled ||
+            !isExternalWalletConnected ||
+            !wagmiAccount?.connector) {
+            return;
+        }
+        const connector = wagmiAccount.connector;
+        let mounted = true;
+        const setup = async () => {
+            try {
+                const getProvider = connector.getProvider ?? connector.getEthereumProvider;
+                if (typeof getProvider !== "function")
+                    return;
+                const p = await getProvider();
+                if (!mounted || !p)
+                    return;
+                const onDisconnectFromProvider = () => {
+                    if (!isExternalWalletConnectedRef.current)
+                        return;
+                    handleWagmiDisconnect();
+                };
+                const onAccountsChanged = (accounts) => {
+                    const list = Array.isArray(accounts) ? accounts : [];
+                    if (list.length === 0)
+                        onDisconnectFromProvider();
+                };
+                p.on?.("accountsChanged", onAccountsChanged);
+                p.on?.("disconnect", onDisconnectFromProvider);
+                return () => {
+                    p.removeListener?.("accountsChanged", onAccountsChanged);
+                    p.removeListener?.("disconnect", onDisconnectFromProvider);
+                };
+            }
+            catch {
+                // Connector may not support getProvider (e.g. some injected)
+                return undefined;
+            }
+        };
+        setup().then((cleanup) => {
+            if (mounted)
+                providerListenerCleanupRef.current = cleanup ?? null;
+        });
+        return () => {
+            mounted = false;
+            const cleanup = providerListenerCleanupRef.current;
+            providerListenerCleanupRef.current = null;
+            if (typeof cleanup === "function")
+                cleanup();
+        };
+    }, [
+        externalWalletsEnabled,
+        isExternalWalletConnected,
+        wagmiAccount?.connector,
+        handleWagmiDisconnect,
+    ]);
     // Helper function to get network name from chain ID
     const getNetworkName = useCallback((chainId) => {
         const chainNames = {
@@ -2728,6 +2828,9 @@ export function AbstraxnProviderInner({ config, children, base, wagmi, }) {
             setLoading(false);
         }
     }, [isExternalWalletConnected, wagmiSwitchChain, switchChain, availableChains]);
+    const setEmailForOtp = useCallback((email) => {
+        setEmailForOtpState(email);
+    }, []);
     const value = {
         wallet: walletRef.current,
         isInitialized,
@@ -2800,6 +2903,9 @@ export function AbstraxnProviderInner({ config, children, base, wagmi, }) {
         walletBalance: !isExternalWalletConnected ? walletBalance : undefined,
         // Connection type
         connectionType,
+        // Pre-fill email for email-OTP flow
+        emailForOtp,
+        setEmailForOtp: setEmailForOtp,
     };
     // Ref to store latest value to avoid dependency issues (defined after value)
     const valueRef = useRef(value);
@@ -3338,6 +3444,6 @@ export function AbstraxnProviderInner({ config, children, base, wagmi, }) {
             console.warn("Failed to update ExternalWalletButtons:", error);
         }
     }, [value, externalWalletsEnabled]);
-    return (_jsx(AbstraxnContext.Provider, { value: value, children: children }));
+    return (_jsxs(AbstraxnContext.Provider, { value: value, children: [wagmi ? (_jsx(WagmiConnectionEffectSync, { onDisconnect: handleWagmiDisconnect })) : null, children] }));
 }
 //# sourceMappingURL=AbstraxnProviderInner.js.map