Merge pull request #548 from UgoxyFavour/main

I implemented the add wallet connection timeout logic

Author: Wilfred007

frontend/src/data/documentation.ts

@@ -335,6 +335,7 @@ If issues persist, check the transaction simulation panel for specific error det
 - Check that you're logged into Freighter
 - Try refreshing the page and reconnecting
 - Verify you're on the correct network (Mainnet/Testnet)
+- If the approval prompt does not appear within 15 seconds, PayD will show a timeout error so you can retry safely
 
 **xBull:**
 - Make sure xBull mobile app is installed
@@ -344,6 +345,7 @@ If issues persist, check the transaction simulation panel for specific error det
 **Lobstr:**
 - Verify Lobstr extension/app is active
 - Ensure you've approved the connection request
+- If the approval prompt stalls for more than 15 seconds, close the request, reopen the wallet, and try again
 
 **General fixes:**
 - Clear browser cache and cookies

frontend/src/providers/WalletProvider.tsx

@@ -14,6 +14,9 @@ import { WalletContext } from '../hooks/useWallet';
 
 const LAST_WALLET_STORAGE_KEY = 'payd:last_wallet_name';
 const SUPPORTED_MODAL_WALLETS = [FREIGHTER_ID, LOBSTR_ID] as const;
+const WALLET_CONNECTION_TIMEOUT_MS = 15000;
+const WALLET_CONNECTION_TIMEOUT_MESSAGE =
+  'Wallet connection timed out after 15 seconds. Confirm the request in your wallet and try again.';
 
 type SelectableWallet = {
   id: string;
@@ -22,6 +25,25 @@ type SelectableWallet = {
   isAvailable: boolean;
 };
 
+function withWalletConnectionTimeout<T>(promise: Promise<T>, timeoutMs: number): Promise<T> {
+  return new Promise<T>((resolve, reject) => {
+    const timeoutId = window.setTimeout(() => {
+      reject(new Error(WALLET_CONNECTION_TIMEOUT_MESSAGE));
+    }, timeoutMs);
+
+    promise.then(
+      (value) => {
+        window.clearTimeout(timeoutId);
+        resolve(value);
+      },
+      (error: unknown) => {
+        window.clearTimeout(timeoutId);
+        reject(error instanceof Error ? error : new Error(String(error)));
+      }
+    );
+  });
+}
+
 function hasAnyWalletExtension(): boolean {
   if (typeof window === 'undefined') return true;
   const extendedWindow = window as Window &
@@ -34,7 +56,10 @@ function hasAnyWalletExtension(): boolean {
   return Boolean(extendedWindow.freighterApi || extendedWindow.xBullSDK || extendedWindow.lobstr);
 }
 
-export const WalletProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+export const WalletProvider: React.FC<{
+  children: React.ReactNode;
+  connectionTimeoutMs?: number;
+}> = ({ children, connectionTimeoutMs = WALLET_CONNECTION_TIMEOUT_MS }) => {
   const [address, setAddress] = useState<string | null>(null);
   const [walletName, setWalletName] = useState<string | null>(null);
   const [isConnecting, setIsConnecting] = useState(false);
@@ -43,6 +68,7 @@ export const WalletProvider: React.FC<{ children: React.ReactNode }> = ({ childr
   const [network, setNetwork] = useState<'TESTNET' | 'PUBLIC'>('TESTNET');
   const [walletModalOpen, setWalletModalOpen] = useState(false);
   const [walletOptions, setWalletOptions] = useState<SelectableWallet[]>([]);
+  const [connectionError, setConnectionError] = useState<string | null>(null);
   const kitRef = useRef<StellarWalletsKit | null>(null);
   const { t } = useTranslation();
   const { notifyWalletEvent } = useNotification();
@@ -68,7 +94,7 @@ export const WalletProvider: React.FC<{ children: React.ReactNode }> = ({ childr
 
       try {
         newKit.setWallet(lastWalletName);
-        const account = await newKit.getAddress();
+        const account = await withWalletConnectionTimeout(newKit.getAddress(), connectionTimeoutMs);
         if (account?.address) {
           setAddress(account.address);
           notifyWalletEvent(
@@ -85,7 +111,7 @@ export const WalletProvider: React.FC<{ children: React.ReactNode }> = ({ childr
     };
 
     void attemptSilentReconnect();
-  }, [notifyWalletEvent, network]);
+  }, [connectionTimeoutMs, notifyWalletEvent, network]);
 
   const loadWalletOptions = async (): Promise<SelectableWallet[]> => {
     const kit = kitRef.current;
@@ -110,35 +136,34 @@ export const WalletProvider: React.FC<{ children: React.ReactNode }> = ({ childr
     const kit = kitRef.current;
     if (!kit) return null;
 
+    setConnectionError(null);
     setIsConnecting(true);
     try {
       kit.setWallet(selectedWalletId);
-
-      const { address } = await Promise.race([
-        kit.getAddress(),
-        new Promise<{ address: string }>((_, reject) =>
-          setTimeout(() => reject(new Error('Connection timed out after 15 seconds.')), 15000)
-        ),
-      ]);
+      const { address } = await withWalletConnectionTimeout(kit.getAddress(), connectionTimeoutMs);
 
       setAddress(address);
       setWalletName(selectedWalletId);
       localStorage.setItem(LAST_WALLET_STORAGE_KEY, selectedWalletId);
+      setConnectionError(null);
+      setWalletModalOpen(false);
       notifyWalletEvent(
         'connected',
         `${address.slice(0, 6)}...${address.slice(-4)} via ${selectedWalletId}`
       );
       return address;
     } catch (error) {
       console.error('Failed to connect wallet:', error);
+      const message =
+        error instanceof Error ? error.message : 'Unable to connect to the selected wallet.';
+      setConnectionError(message);
       notifyWalletEvent(
         'connection_failed',
-        error instanceof Error ? error.message : 'Please try again.'
+        message
       );
       return null;
     } finally {
       setIsConnecting(false);
-      setWalletModalOpen(false);
     }
   };
 
@@ -148,6 +173,7 @@ export const WalletProvider: React.FC<{ children: React.ReactNode }> = ({ childr
       notifyWalletEvent('connection_failed', 'No supported wallet providers were found.');
       return null;
     }
+    setConnectionError(null);
     setWalletModalOpen(true);
     return null;
   };
@@ -186,20 +212,43 @@ export const WalletProvider: React.FC<{ children: React.ReactNode }> = ({ childr
 
       {walletModalOpen && (
         <div className="fixed inset-0 z-[80] grid place-items-center bg-black/70 px-4">
-          <div className="w-full max-w-md rounded-2xl border border-hi bg-surface p-6 shadow-2xl">
+          <div
+            className="w-full max-w-md rounded-2xl border border-hi bg-surface p-6 shadow-2xl"
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="wallet-modal-title"
+            aria-describedby={connectionError ? 'wallet-connection-error' : undefined}
+          >
             <div className="mb-4 flex items-center justify-between">
-              <h3 className="text-lg font-black">{t('wallet.modalTitle') || 'Select a wallet'}</h3>
+              <h3 id="wallet-modal-title" className="text-lg font-black">
+                {t('wallet.modalTitle') || 'Select a wallet'}
+              </h3>
               <button
-                onClick={() => setWalletModalOpen(false)}
+                type="button"
+                onClick={() => {
+                  setWalletModalOpen(false);
+                  setConnectionError(null);
+                }}
                 className="rounded-lg border border-hi px-2 py-1 text-xs text-muted hover:text-text"
               >
                 Close
               </button>
             </div>
+            {connectionError && (
+              <div
+                id="wallet-connection-error"
+                role="alert"
+                aria-live="assertive"
+                className="mb-4 rounded-xl border border-red-500/40 bg-red-500/10 px-4 py-3 text-sm text-red-200"
+              >
+                {connectionError}
+              </div>
+            )}
             <div className="space-y-2">
               {walletOptions.map((wallet) => (
                 <button
                   key={wallet.id}
+                  type="button"
                   onClick={() => void connectWithWallet(wallet.id)}
                   disabled={!wallet.isAvailable || isConnecting}
                   className="flex w-full items-center justify-between rounded-xl border border-hi bg-black/20 px-4 py-3 text-left transition hover:bg-black/30 disabled:cursor-not-allowed disabled:opacity-50"

frontend/src/providers/__tests__/WalletProvider.test.tsx

@@ -0,0 +1,172 @@
+import React from 'react';
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { WalletProvider } from '../WalletProvider';
+import { useWallet } from '../../hooks/useWallet';
+
+const mockNotifyWalletEvent = vi.fn();
+const mockGetSupportedWallets = vi.fn();
+const mockGetAddress = vi.fn();
+const mockSetWallet = vi.fn();
+const mockDisconnect = vi.fn();
+const mockSignTransaction = vi.fn();
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => {
+      if (key === 'wallet.modalTitle') return 'Connect to PayD';
+      return key;
+    },
+  }),
+}));
+
+vi.mock('../../hooks/useNotification', () => ({
+  useNotification: () => ({
+    notifyWalletEvent: mockNotifyWalletEvent,
+  }),
+}));
+
+vi.mock('@creit.tech/stellar-wallets-kit', () => ({
+  StellarWalletsKit: class {
+    setWallet = mockSetWallet;
+    getAddress = mockGetAddress;
+    getSupportedWallets = mockGetSupportedWallets;
+    disconnect = mockDisconnect;
+    signTransaction = mockSignTransaction;
+  },
+  WalletNetwork: {
+    TESTNET: 'TESTNET',
+    PUBLIC: 'PUBLIC',
+  },
+  FreighterModule: class {},
+  xBullModule: class {},
+  LobstrModule: class {},
+  FREIGHTER_ID: 'freighter',
+  LOBSTR_ID: 'lobstr',
+}));
+
+function createDeferredPromise<T>() {
+  let resolve!: (value: T) => void;
+  let reject!: (reason?: unknown) => void;
+  const promise = new Promise<T>((res, rej) => {
+    resolve = res;
+    reject = rej;
+  });
+
+  return { promise, resolve, reject };
+}
+
+function WalletHarness() {
+  const { address, connect } = useWallet();
+
+  return (
+    <div>
+      <button type="button" onClick={() => void connect()}>
+        Open wallet modal
+      </button>
+      <div>{address ?? 'No wallet connected'}</div>
+    </div>
+  );
+}
+
+describe('WalletProvider', () => {
+  beforeEach(() => {
+    localStorage.clear();
+    mockNotifyWalletEvent.mockReset();
+    mockGetSupportedWallets.mockReset();
+    mockGetAddress.mockReset();
+    mockSetWallet.mockReset();
+    mockDisconnect.mockReset();
+    mockSignTransaction.mockReset();
+    mockGetSupportedWallets.mockResolvedValue([
+      {
+        id: 'freighter',
+        name: 'Freighter',
+        icon: undefined,
+        isAvailable: true,
+      },
+    ]);
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('shows an inline error when wallet connection takes longer than 15 seconds', async () => {
+    const hangingConnection = createDeferredPromise<{ address: string }>();
+    mockGetAddress.mockReturnValue(hangingConnection.promise);
+
+    render(
+      <WalletProvider connectionTimeoutMs={5}>
+        <WalletHarness />
+      </WalletProvider>
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: /open wallet modal/i }));
+
+    await act(async () => {
+      await Promise.resolve();
+    });
+
+    fireEvent.click(screen.getByRole('button', { name: /freighter/i }));
+
+    await waitFor(() => {
+      expect(screen.getByRole('alert')).toHaveTextContent(
+        'Wallet connection timed out after 15 seconds. Confirm the request in your wallet and try again.'
+      );
+    });
+
+    expect(screen.getByRole('dialog', { name: /connect to payd/i })).toBeInTheDocument();
+    expect(mockNotifyWalletEvent).toHaveBeenCalledWith(
+      'connection_failed',
+      'Wallet connection timed out after 15 seconds. Confirm the request in your wallet and try again.'
+    );
+  });
+
+  it('closes the modal and updates wallet state after a successful connection', async () => {
+    mockGetAddress.mockResolvedValue({ address: 'GABCD1234567890TESTWALLET' });
+
+    render(
+      <WalletProvider connectionTimeoutMs={50}>
+        <WalletHarness />
+      </WalletProvider>
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: /open wallet modal/i }));
+
+    await act(async () => {
+      await Promise.resolve();
+    });
+
+    fireEvent.click(screen.getByRole('button', { name: /freighter/i }));
+
+    await waitFor(() => {
+      expect(screen.getByText('GABCD1234567890TESTWALLET')).toBeInTheDocument();
+    });
+
+    expect(screen.queryByRole('dialog', { name: /connect to payd/i })).not.toBeInTheDocument();
+    expect(mockNotifyWalletEvent).toHaveBeenCalledWith(
+      'connected',
+      'GABCD1...LLET via freighter'
+    );
+  });
+
+  it('finishes initialization when silent reconnect hangs', async () => {
+    localStorage.setItem('payd:last_wallet_name', 'freighter');
+    const hangingReconnect = createDeferredPromise<{ address: string }>();
+    mockGetAddress.mockReturnValue(hangingReconnect.promise);
+
+    render(
+      <WalletProvider connectionTimeoutMs={5}>
+        <div>Wallet-ready app</div>
+      </WalletProvider>
+    );
+
+    expect(screen.getByText(/restoring wallet session/i)).toBeInTheDocument();
+
+    await waitFor(() => {
+      expect(screen.getByText('Wallet-ready app')).toBeInTheDocument();
+    });
+    expect(screen.queryByText(/restoring wallet session/i)).not.toBeInTheDocument();
+  });
+});