@abstraxn/signer-react 3.3.6 → 3.3.7

package/CHANGELOG.md

@@ -5,6 +5,11 @@ 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).
 
+## [3.3.7] - 2026-09-15
+
+### Fixed
+- **WalletConnect loader stuck after MetaMask approve (create proposal / deposit)** – Returning from the wallet left a zombie relay socket (`connected === true` on a dead WebSocket). The SDK skipped `restartTransport()`, so the tx hash never reached the dapp even though MetaMask confirmed on-chain. After a backgrounded deeplink the relay is now force-restarted, receipt polling retries when the tab is visible again, and React Query refetches on reconnect/focus so status can update without a manual refresh.
+
 ## [3.3.6] - 2026-09-14
 
 ### Fixed

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

@@ -68,8 +68,11 @@ export function useQueryClientSafe() {
         return new QueryClient({
             defaultOptions: {
                 queries: {
-                    refetchOnWindowFocus: false,
-                    retry: false,
+                    // Recover waitForTransactionReceipt / balance queries after returning
+                    // from a mobile wallet deeplink (tab was frozen / network dropped).
+                    refetchOnWindowFocus: true,
+                    refetchOnReconnect: true,
+                    retry: 2,
                 },
             },
         });

package/dist/src/hooks.js

@@ -12,6 +12,7 @@ import { useWalletClient as useWagmiWalletClient, useAccount, useConfig, useChai
 import { getWalletClient, switchChain } from '@wagmi/core';
 import { getConnectorMeta } from './connectors';
 import { getChainById } from './chains';
+import { waitUntilDocumentVisible } from './walletConnectMobile';
 /**
  * Hook to check if wallet is connected
  */
@@ -2064,15 +2065,40 @@ export function useWaitForTxnReceipt(provider) {
             throw new Error('Transaction hash is required');
         }
         try {
-            // waitForTransactionReceipt is a method on PublicClient
-            const receipt = await provider.waitForTransactionReceipt({
-                hash,
-                confirmations,
-                timeout,
-            });
-            return receipt;
+            // After MetaMask deeplink the tab was frozen; wait until we are visible
+            // again and retry receipt polls so the UI is not stuck on a loader.
+            await waitUntilDocumentVisible();
+            const overallTimeout = timeout ?? 180_000;
+            const startedAt = Date.now();
+            let lastError;
+            while (Date.now() - startedAt < overallTimeout) {
+                const remaining = overallTimeout - (Date.now() - startedAt);
+                try {
+                    const receipt = await provider.waitForTransactionReceipt({
+                        hash,
+                        confirmations,
+                        timeout: Math.min(20_000, remaining),
+                        pollingInterval: 1_500,
+                    });
+                    return receipt;
+                }
+                catch (error) {
+                    lastError = error;
+                    await waitUntilDocumentVisible();
+                    await new Promise((resolve) => setTimeout(resolve, 1_000));
+                }
+            }
+            if (lastError instanceof Error) {
+                throw new Error(`Failed to wait for transaction receipt: ${lastError.message}`);
+            }
+            throw lastError instanceof Error
+                ? lastError
+                : new Error('Failed to wait for transaction receipt');
         }
         catch (error) {
+            if (error instanceof Error && error.message.startsWith('Failed to wait for transaction receipt')) {
+                throw error;
+            }
             if (error instanceof Error) {
                 throw new Error(`Failed to wait for transaction receipt: ${error.message}`);
             }

package/dist/src/walletConnectMobile.d.ts

@@ -64,8 +64,16 @@ export declare function syncWalletConnectDappRedirect(provider: any): void;
 /**
  * Re-open the WalletConnect relay after the mobile browser comes back
  * from the wallet app so pending approve/reject responses can be delivered.
+ *
+ * `force` must be used after the tab was backgrounded: iOS/Android often leave
+ * `relayer.connected === true` on a dead socket, so a ping/early-return skips
+ * the restart and the in-flight tx hash never arrives (loader hangs until refresh).
  */
-export declare function resumeWalletConnectRelayer(provider: any): Promise<void>;
+export declare function resumeWalletConnectRelayer(provider: any, options?: {
+    force?: boolean;
+}): Promise<void>;
+/** Resolves when the dapp tab is in the foreground again (mobile wallet return). */
+export declare function waitUntilDocumentVisible(): Promise<void>;
 /**
  * Undo the inline `display: none !important` we apply after connect so the
  * WalletConnect modal can show "Continue in wallet" and process the response.

package/dist/src/walletConnectMobile.js

@@ -16,6 +16,8 @@
  */
 const PATCHED_FLAG = "__abstraxnWcMobilePatched";
 const PENDING_FLAG = "__abstraxnWcPendingApprovals";
+const NEEDS_RESUME_FLAG = "__abstraxnWcNeedsResume";
+const RESUME_LOCK = "__abstraxnWcResumeLock";
 const RETURN_HREF_KEY = "abstraxn_wc_return_href";
 const RETURN_AT_KEY = "abstraxn_wc_return_at";
 const RETURN_TTL_MS = 3 * 60 * 1000;
@@ -249,60 +251,102 @@ function isRelayerConnected(relayer) {
         relayer?.provider?.connected === true ||
         relayer?.provider?.connection?.connected === true);
 }
+async function restartWalletConnectTransport(relayer) {
+    if (typeof relayer.restartTransport === "function") {
+        await relayer.restartTransport();
+        return;
+    }
+    if (typeof relayer.transportOpen === "function") {
+        try {
+            await relayer.transportClose?.();
+        }
+        catch {
+            // Ignore close errors and still try to open.
+        }
+        await relayer.transportOpen();
+    }
+}
 /**
  * Re-open the WalletConnect relay after the mobile browser comes back
  * from the wallet app so pending approve/reject responses can be delivered.
+ *
+ * `force` must be used after the tab was backgrounded: iOS/Android often leave
+ * `relayer.connected === true` on a dead socket, so a ping/early-return skips
+ * the restart and the in-flight tx hash never arrives (loader hangs until refresh).
  */
-export async function resumeWalletConnectRelayer(provider) {
+export async function resumeWalletConnectRelayer(provider, options) {
     if (!provider)
         return;
     const relayer = getWalletConnectRelayer(provider);
     if (!relayer)
         return;
-    try {
-        if (isRelayerConnected(relayer)) {
-            try {
+    const existing = provider[RESUME_LOCK];
+    if (existing && !options?.force) {
+        try {
+            await existing;
+        }
+        catch {
+            // Previous resume failed.
+        }
+        return;
+    }
+    const run = (async () => {
+        try {
+            if (!options?.force && isRelayerConnected(relayer)) {
                 const ping = relayer.provider?.connection?.ping;
                 if (typeof ping === "function") {
                     await Promise.race([
                         ping.call(relayer.provider.connection),
                         new Promise((_, reject) => setTimeout(() => reject(new Error("ping timeout")), 1500)),
                     ]);
+                    return;
                 }
-                return;
-            }
-            catch {
-                // Ping failed — transport looks stale, restart below.
-            }
-        }
-        if (typeof relayer.restartTransport === "function") {
-            await relayer.restartTransport();
-        }
-        else if (typeof relayer.transportOpen === "function") {
-            try {
-                await relayer.transportClose?.();
+                // No ping API: do not assume a zombie "connected" socket is healthy.
             }
-            catch {
-                // Ignore close errors and still try to open.
+            await restartWalletConnectTransport(relayer);
+            const session = provider?.session ?? provider?.signer?.session;
+            const topic = session?.topic;
+            const client = provider?.signer?.client || provider?.client;
+            if (topic && typeof client?.ping === "function") {
+                try {
+                    await client.ping({ topic });
+                }
+                catch {
+                    // Session ping is best-effort; the request may still complete.
+                }
             }
-            await relayer.transportOpen();
         }
-        const session = provider?.session ?? provider?.signer?.session;
-        const topic = session?.topic;
-        const client = provider?.signer?.client || provider?.client;
-        if (topic && typeof client?.ping === "function") {
-            try {
-                await client.ping({ topic });
-            }
-            catch {
-                // Session ping is best-effort; the request may still complete.
-            }
+        catch {
+            // Best-effort: a failed resume should not break the original request.
         }
+    })();
+    provider[RESUME_LOCK] = run;
+    try {
+        await run;
     }
-    catch {
-        // Best-effort: a failed resume should not break the original request.
+    finally {
+        if (provider[RESUME_LOCK] === run)
+            provider[RESUME_LOCK] = null;
     }
 }
+/** Resolves when the dapp tab is in the foreground again (mobile wallet return). */
+export function waitUntilDocumentVisible() {
+    if (typeof document === "undefined")
+        return Promise.resolve();
+    if (document.visibilityState === "visible")
+        return Promise.resolve();
+    return new Promise((resolve) => {
+        const onVis = () => {
+            if (document.visibilityState === "visible") {
+                document.removeEventListener("visibilitychange", onVis);
+                window.removeEventListener("pageshow", onVis);
+                resolve();
+            }
+        };
+        document.addEventListener("visibilitychange", onVis);
+        window.addEventListener("pageshow", onVis);
+    });
+}
 /**
  * Undo the inline `display: none !important` we apply after connect so the
  * WalletConnect modal can show "Continue in wallet" and process the response.
@@ -347,18 +391,26 @@ export function patchWalletConnectProviderForMobile(provider) {
     provider[PENDING_FLAG] = 0;
     provider.request = async (...args) => {
         const method = getRequestMethod(args);
-        if (!isUserApprovalRpcMethod(method)) {
+        const isApproval = isUserApprovalRpcMethod(method);
+        const wasBackgrounded = !!provider[NEEDS_RESUME_FLAG];
+        if (!isApproval && !wasBackgrounded) {
             return originalRequest(...args);
         }
-        provider[PENDING_FLAG] = (provider[PENDING_FLAG] || 0) + 1;
-        restoreWalletConnectModal();
-        syncWalletConnectDappRedirect(provider);
+        if (isApproval) {
+            provider[PENDING_FLAG] = (provider[PENDING_FLAG] || 0) + 1;
+            restoreWalletConnectModal();
+            syncWalletConnectDappRedirect(provider);
+        }
         try {
-            await resumeWalletConnectRelayer(provider);
+            await resumeWalletConnectRelayer(provider, { force: wasBackgrounded });
+            if (wasBackgrounded)
+                provider[NEEDS_RESUME_FLAG] = false;
             return await originalRequest(...args);
         }
         finally {
-            provider[PENDING_FLAG] = Math.max(0, (provider[PENDING_FLAG] || 1) - 1);
+            if (isApproval) {
+                provider[PENDING_FLAG] = Math.max(0, (provider[PENDING_FLAG] || 1) - 1);
+            }
         }
     };
 }
@@ -370,18 +422,28 @@ export function subscribeWalletConnectForegroundResume(provider) {
     if (typeof window === "undefined" || !provider)
         return () => { };
     let timer = null;
+    let hiddenAt = 0;
     const resume = () => {
         if (timer)
             clearTimeout(timer);
+        const hiddenMs = hiddenAt ? Date.now() - hiddenAt : 0;
+        const pending = hasPendingWalletConnectApproval(provider);
+        const force = pending || hiddenMs > 400 || !!provider[NEEDS_RESUME_FLAG];
         timer = setTimeout(() => {
             clearWalletReturnIfSameDocument();
-            void resumeWalletConnectRelayer(provider);
-            if (hasPendingWalletConnectApproval(provider)) {
+            void resumeWalletConnectRelayer(provider, { force });
+            if (pending)
                 restoreWalletConnectModal();
-            }
-        }, 250);
+        }, pending || force ? 50 : 250);
     };
     const onVisibility = () => {
+        if (document.visibilityState === "hidden") {
+            hiddenAt = Date.now();
+            if (hasPendingWalletConnectApproval(provider)) {
+                provider[NEEDS_RESUME_FLAG] = true;
+            }
+            return;
+        }
         if (document.visibilityState === "visible")
             resume();
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abstraxn/signer-react",
-  "version": "3.3.6",
+  "version": "3.3.7",
   "description": "React SDK for Abstraxn Wallet - React components, hooks, and providers for seamless Web3 wallet integration",
   "main": "./dist/src/index.js",
   "module": "./dist/src/index.js",