fix: prevent 'API not ready' on mobile by blocking wallet connect until blockchain initializes

- Add isApiInitializing state (true during WS connect, false on ready/fail)
- Add isApiReadyRef for closure-safe polling in connectWalletConnect
- connectWalletConnect now waits up to 30s for API instead of throwing immediately
- WalletModal connect buttons disabled + show spinner while blockchain is initializing

web/src/components/wallet/WalletModal.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Wallet, Chrome, ExternalLink, Copy, Check, LogOut, Award, Users, TrendingUp, Shield, Smartphone } from 'lucide-react';
+import { Wallet, Chrome, ExternalLink, Copy, Check, LogOut, Award, Users, TrendingUp, Shield, Smartphone, Loader2 } from 'lucide-react';
 import { useIsMobile } from '@/hooks/use-mobile';
 import {
   Dialog,
@@ -29,6 +29,7 @@ export const WalletModal: React.FC<WalletModalProps> = ({ isOpen, onClose }) =>
     disconnectWallet,
     api,
     isApiReady,
+    isApiInitializing,
     peopleApi,
     walletSource,
     wcPeerName,
@@ -350,9 +351,19 @@ export const WalletModal: React.FC<WalletModalProps> = ({ isOpen, onClose }) =>
                     onClick={handleConnect}
                     className="w-full bg-gradient-to-r from-purple-600 to-cyan-400 hover:from-purple-700 hover:to-cyan-500"
                     size="sm"
+                    disabled={isApiInitializing}
                   >
-                    <Wallet className="mr-2 h-4 w-4" />
+                    {isApiInitializing ? (
-                    {t('walletModal.extensionConnect')}
+                      <>
+                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                        {t('walletModal.connectingBlockchain', 'Connecting to blockchain...')}
+                      </>
+                    ) : (
+                      <>
+                        <Wallet className="mr-2 h-4 w-4" />
+                        {t('walletModal.extensionConnect')}
+                      </>
+                    )}
                   </Button>
                   <a
                     href="https://chromewebstore.google.com/search/pezkuwi%7B.js%7D%20extension?hl=en-GB&utm_source=ext_sidebar"
@@ -380,9 +391,19 @@ export const WalletModal: React.FC<WalletModalProps> = ({ isOpen, onClose }) =>
                     variant="outline"
                     className="w-full border-purple-500/30 hover:border-purple-500/60 hover:bg-purple-500/10"
                     size="sm"
+                    disabled={isApiInitializing}
                   >
-                    <Smartphone className="mr-2 h-4 w-4" />
+                    {isApiInitializing ? (
-                    {t('walletModal.mobileConnect')}
+                      <>
+                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                        {t('walletModal.connectingBlockchain', 'Connecting to blockchain...')}
+                      </>
+                    ) : (
+                      <>
+                        <Smartphone className="mr-2 h-4 w-4" />
+                        {t('walletModal.mobileConnect')}
+                      </>
+                    )}
                   </Button>
                   <div className="flex items-center justify-center gap-1 text-xs text-gray-400">
                     {t('walletModal.mobileComingSoon')}

web/src/contexts/PezkuwiContext.tsx

@@ -19,7 +19,7 @@ if (typeof window !== 'undefined' && !import.meta.env.DEV) {
   };
 }
 
-import React, { createContext, useContext, useEffect, useState, ReactNode } from 'react';
+import React, { createContext, useContext, useEffect, useState, useRef, ReactNode } from 'react';
 import { ApiPromise, WsProvider } from '@pezkuwi/api';
 import { web3Accounts, web3Enable } from '@pezkuwi/extension-dapp';
 import type { InjectedAccountWithMeta } from '@pezkuwi/extension-inject/types';
@@ -49,6 +49,7 @@ interface PezkuwiContextType {
   assetHubApi: ApiPromise | null;
   peopleApi: ApiPromise | null;
   isApiReady: boolean;
+  isApiInitializing: boolean;
   isAssetHubReady: boolean;
   isPeopleReady: boolean;
   isConnected: boolean;
@@ -79,6 +80,8 @@ export const PezkuwiProvider: React.FC<PezkuwiProviderProps> = ({
   const [assetHubApi, setAssetHubApi] = useState<ApiPromise | null>(null);
   const [peopleApi, setPeopleApi] = useState<ApiPromise | null>(null);
   const [isApiReady, setIsApiReady] = useState(false);
+  const isApiReadyRef = useRef(false);
+  const [isApiInitializing, setIsApiInitializing] = useState(true);
   const [isAssetHubReady, setIsAssetHubReady] = useState(false);
   const [isPeopleReady, setIsPeopleReady] = useState(false);
   const [accounts, setAccounts] = useState<InjectedAccountWithMeta[]>([]);
@@ -120,6 +123,7 @@ export const PezkuwiProvider: React.FC<PezkuwiProviderProps> = ({
 
     const initApi = async () => {
       let lastError: unknown = null;
+      setIsApiInitializing(true);
 
       for (const currentEndpoint of FALLBACK_ENDPOINTS) {
         try {
@@ -146,7 +150,9 @@ export const PezkuwiProvider: React.FC<PezkuwiProviderProps> = ({
           await apiInstance.isReady;
 
           setApi(apiInstance);
+          isApiReadyRef.current = true;
           setIsApiReady(true);
+          setIsApiInitializing(false);
           setError(null);
 
           if (import.meta.env.DEV) {
@@ -200,6 +206,7 @@ export const PezkuwiProvider: React.FC<PezkuwiProviderProps> = ({
       }
       setError('Failed to connect to blockchain network. Please try again later.');
       setIsApiReady(false);
+      setIsApiInitializing(false);
     };
 
     // Initialize Asset Hub API for PEZ token
@@ -489,8 +496,20 @@ export const PezkuwiProvider: React.FC<PezkuwiProviderProps> = ({
 
   // Connect via WalletConnect v2 - returns pairing URI for QR code
   const connectWalletConnect = async (): Promise<string> => {
+    // Wait up to 30s for API to finish initializing instead of failing immediately
+    if (!isApiReady) {
+      await new Promise<void>((resolve, reject) => {
+        const deadline = Date.now() + 30_000;
+        const check = () => {
+          if (isApiReadyRef.current) return resolve();
+          if (Date.now() >= deadline) return reject(new Error('Blockchain connection timed out. Please refresh and try again.'));
+          setTimeout(check, 300);
+        };
+        check();
+      });
+    }
     if (!api || !isApiReady) {
-      throw new Error('API not ready. Please wait for blockchain connection.');
+      throw new Error('Blockchain connection failed. Please refresh and try again.');
     }
 
     setError(null);
@@ -581,6 +600,7 @@ export const PezkuwiProvider: React.FC<PezkuwiProviderProps> = ({
     assetHubApi,
     peopleApi,
     isApiReady,
+    isApiInitializing,
     isAssetHubReady,
     isPeopleReady,
     isConnected: isApiReady,