pezkuwichain/pwap
1
0
Fork 0
mirror of https://github.com/pezkuwichain/pwap.git synced 2026-05-06 15:57:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
- 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
This commit is contained in:
Kurdistan Tech Ministry
2026-04-27 15:00:58 +03:00
parent 86ff43e206
commit 69789548e7
2 changed files with 48 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/components/wallet/WalletModal.tsx
+26 -5
View File
@@ -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" />
{t('walletModal.extensionConnect')}
{isApiInitializing ? (
<>
<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" />
{t('walletModal.mobileConnect')}
{isApiInitializing ? (
<>
<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
+22 -2
View File
@@ -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,