fix: add 10-second timeout to prevent infinite loading

Author: andreabadesso

packages/web-wallet/src/contexts/WalletContext.tsx

@@ -363,21 +363,41 @@ export const WalletProvider: React.FC<WalletProviderProps> = ({ children }) => {
 
   // Check for existing connection on mount
   React.useEffect(() => {
+    let timeoutId: NodeJS.Timeout;
+
     // Add a small delay to avoid race condition with React StrictMode double-mount
     const timer = setTimeout(() => {
-      checkExistingConnection().catch((error) => {
-        console.error('Connection check failed:', error);
-        // Ensure we reset the checking state on error
+      // Set a timeout to prevent infinite hanging
+      timeoutId = setTimeout(() => {
+        console.error('Connection check timed out after 10 seconds');
         setState(prev => ({
           ...prev,
           isCheckingConnection: false,
           loadingStep: '',
-          error: 'Failed to check connection',
+          error: null,
         }));
-      });
+      }, 10000);
+
+      checkExistingConnection()
+        .catch((error) => {
+          console.error('Connection check failed:', error);
+          // Ensure we reset the checking state on error
+          setState(prev => ({
+            ...prev,
+            isCheckingConnection: false,
+            loadingStep: '',
+            error: 'Failed to check connection',
+          }));
+        })
+        .finally(() => {
+          clearTimeout(timeoutId);
+        });
     }, 100);
 
-    return () => clearTimeout(timer);
+    return () => {
+      clearTimeout(timer);
+      if (timeoutId) clearTimeout(timeoutId);
+    };
   }, []);
 
   // Sync MetaMask errors to wallet state