From 6e1d72259278785dbc4f4186baf9d6369e86bb3e Mon Sep 17 00:00:00 2001
From: 0xMosas <tosinolosasa@gmail.com>
Date: Fri, 27 Mar 2026 18:51:04 +0100
Subject: [PATCH 1/3] refactor(frontend): decouple wallet logic into
 useWalletManager hook

---
 .../__tests__/hooks/useWalletManager.test.ts  |  97 +++++++++
 frontend/src/hooks/useWalletManager.ts        | 198 ++++++++++++++++++
 frontend/src/providers/WalletProvider.tsx     | 194 ++---------------
 3 files changed, 316 insertions(+), 173 deletions(-)
 create mode 100644 frontend/src/__tests__/hooks/useWalletManager.test.ts
 create mode 100644 frontend/src/hooks/useWalletManager.ts

diff --git a/frontend/src/__tests__/hooks/useWalletManager.test.ts b/frontend/src/__tests__/hooks/useWalletManager.test.ts
new file mode 100644
index 00000000..62634fa0
--- /dev/null
+++ b/frontend/src/__tests__/hooks/useWalletManager.test.ts
@@ -0,0 +1,97 @@
+import { renderHook, act, waitFor } from '@testing-library/react';
+import { describe, expect, it, vi, beforeEach, MockedFunction } from 'vitest';
+import { useWalletManager } from '../../hooks/useWalletManager';
+import { StellarWalletsKit } from '@creit.tech/stellar-wallets-kit';
+
+vi.mock('@creit.tech/stellar-wallets-kit', () => ({
+  StellarWalletsKit: vi.fn(function() { return {}; }),
+  WalletNetwork: { TESTNET: 'TESTNET', PUBLIC: 'PUBLIC' },
+  FreighterModule: vi.fn(function() { return {}; }),
+  xBullModule: vi.fn(function() { return {}; }),
+  LobstrModule: vi.fn(function() { return {}; }),
+  FREIGHTER_ID: 'freighter',
+  LOBSTR_ID: 'lobstr',
+}));
+
+vi.mock('../../hooks/useNotification', () => ({
+  useNotification: () => ({
+    notifyWalletEvent: vi.fn(),
+  }),
+}));
+
+describe('useWalletManager', () => {
+  let mockKitInstance: any;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    localStorage.clear();
+    mockKitInstance = {
+      setWallet: vi.fn(),
+      getAddress: vi.fn(),
+      getSupportedWallets: vi.fn().mockResolvedValue([]),
+      disconnect: vi.fn(),
+      signTransaction: vi.fn(),
+    };
+    (StellarWalletsKit as unknown as ReturnType<typeof vi.fn>).mockImplementation(function() { return mockKitInstance; });
+  });
+
+  it('initializes and attempts silent reconnect if wallet in localStorage', async () => {
+    localStorage.setItem('payd:last_wallet_name', 'freighter');
+    mockKitInstance.getAddress.mockResolvedValue({ address: 'G123' });
+
+    const { result } = renderHook(() => useWalletManager());
+    
+    // Initially connecting
+    expect(result.current.isConnecting).toBe(true);
+    expect(result.current.isInitialized).toBe(false);
+
+    await waitFor(() => {
+      expect(result.current.isInitialized).toBe(true);
+    });
+
+    expect(result.current.address).toBe('G123');
+    expect(result.current.walletName).toBe('freighter');
+    expect(result.current.isConnecting).toBe(false);
+  });
+
+  it('handles manual connect sequence appropriately', async () => {
+    mockKitInstance.getSupportedWallets.mockResolvedValue([
+      { id: 'freighter', name: 'Freighter', isAvailable: true }
+    ]);
+    
+    const { result } = renderHook(() => useWalletManager());
+
+    act(() => {
+      result.current.connect();
+    });
+
+    await waitFor(() => {
+      expect(result.current.walletModalOpen).toBe(true);
+    });
+    expect(result.current.walletOptions.length).toBe(1);
+
+    mockKitInstance.getAddress.mockResolvedValue({ address: 'G456' });
+
+    act(() => {
+      result.current.connectWithWallet('freighter');
+    });
+
+    await waitFor(() => {
+      expect(result.current.walletModalOpen).toBe(false);
+    });
+    expect(result.current.address).toBe('G456');
+    expect(result.current.walletName).toBe('freighter');
+  });
+
+  it('handles disconnect', async () => {
+    const { result } = renderHook(() => useWalletManager());
+
+    await act(async () => {
+      result.current.disconnect();
+    });
+
+    expect(result.current.address).toBeNull();
+    expect(result.current.walletName).toBeNull();
+    expect(localStorage.getItem('payd:last_wallet_name')).toBeNull();
+  });
+});
diff --git a/frontend/src/hooks/useWalletManager.ts b/frontend/src/hooks/useWalletManager.ts
new file mode 100644
index 00000000..6e58eec3
--- /dev/null
+++ b/frontend/src/hooks/useWalletManager.ts
@@ -0,0 +1,198 @@
+import { useEffect, useState, useRef, useCallback } from 'react';
+import {
+  StellarWalletsKit,
+  WalletNetwork,
+  FreighterModule,
+  FREIGHTER_ID,
+  xBullModule,
+  LobstrModule,
+  LOBSTR_ID,
+} from '@creit.tech/stellar-wallets-kit';
+import { useNotification } from './useNotification';
+
+const LAST_WALLET_STORAGE_KEY = 'payd:last_wallet_name';
+const SUPPORTED_MODAL_WALLETS = [FREIGHTER_ID, LOBSTR_ID] as const;
+
+export type SelectableWallet = {
+  id: string;
+  name: string;
+  icon?: string;
+  isAvailable: boolean;
+};
+
+function hasAnyWalletExtension(): boolean {
+  if (typeof window === 'undefined') return true;
+  const extendedWindow = window as Window &
+    typeof globalThis & {
+      freighterApi?: unknown;
+      xBullSDK?: unknown;
+      lobstr?: unknown;
+    };
+
+  return Boolean(extendedWindow.freighterApi || extendedWindow.xBullSDK || extendedWindow.lobstr);
+}
+
+export function useWalletManager() {
+  const [address, setAddress] = useState<string | null>(null);
+  const [walletName, setWalletName] = useState<string | null>(null);
+  const [isConnecting, setIsConnecting] = useState(false);
+  const [isInitialized, setIsInitialized] = useState(false);
+  const [walletExtensionAvailable, setWalletExtensionAvailable] = useState(true);
+  const [network, setNetwork] = useState<'TESTNET' | 'PUBLIC'>('TESTNET');
+  const [walletModalOpen, setWalletModalOpen] = useState(false);
+  const [walletOptions, setWalletOptions] = useState<SelectableWallet[]>([]);
+  const kitRef = useRef<StellarWalletsKit | null>(null);
+  
+  const { notifyWalletEvent } = useNotification();
+
+  useEffect(() => {
+    setWalletExtensionAvailable(hasAnyWalletExtension());
+
+    const newKit = new StellarWalletsKit({
+      network: network === 'TESTNET' ? WalletNetwork.TESTNET : WalletNetwork.PUBLIC,
+      modules: [new FreighterModule(), new xBullModule(), new LobstrModule()],
+    });
+    kitRef.current = newKit;
+
+    const attemptSilentReconnect = async () => {
+      const lastWalletName = localStorage.getItem(LAST_WALLET_STORAGE_KEY);
+      if (!lastWalletName) {
+        setIsInitialized(true);
+        return;
+      }
+
+      setWalletName(lastWalletName);
+      setIsConnecting(true);
+
+      try {
+        newKit.setWallet(lastWalletName);
+        const account = await newKit.getAddress();
+        if (account?.address) {
+          setAddress(account.address);
+          notifyWalletEvent(
+            'reconnected',
+            `${account.address.slice(0, 6)}...${account.address.slice(-4)} via ${lastWalletName}`
+          );
+        }
+      } catch {
+        // Silent reconnection should not block app flow.
+      } finally {
+        setIsConnecting(false);
+        setIsInitialized(true);
+      }
+    };
+
+    void attemptSilentReconnect();
+  }, [notifyWalletEvent, network]);
+
+  const loadWalletOptions = useCallback(async (): Promise<SelectableWallet[]> => {
+    const kit = kitRef.current;
+    if (!kit) return [];
+    const supported = await kit.getSupportedWallets();
+    const options = supported
+      .filter((wallet) =>
+        SUPPORTED_MODAL_WALLETS.includes(wallet.id as (typeof SUPPORTED_MODAL_WALLETS)[number])
+      )
+      .map((wallet) => ({
+        id: wallet.id,
+        name: wallet.name,
+        icon: wallet.icon,
+        isAvailable: wallet.isAvailable,
+      }));
+    setWalletOptions(options);
+    setWalletExtensionAvailable(options.some((wallet) => wallet.isAvailable));
+    return options;
+  }, []);
+
+  const connectWithWallet = useCallback(async (selectedWalletId: string): Promise<string | null> => {
+    const kit = kitRef.current;
+    if (!kit) return null;
+
+    setIsConnecting(true);
+    try {
+      kit.setWallet(selectedWalletId);
+
+      let timeoutId: ReturnType<typeof setTimeout>;
+      const timeoutPromise = new Promise<{ address: string }>((_, reject) => {
+        timeoutId = setTimeout(() => reject(new Error('Connection timed out after 15 seconds.')), 15000);
+      });
+
+      const { address: newAddress } = await Promise.race([
+        kit.getAddress(),
+        timeoutPromise,
+      ]);
+      clearTimeout(timeoutId!);
+
+      setAddress(newAddress);
+      setWalletName(selectedWalletId);
+      localStorage.setItem(LAST_WALLET_STORAGE_KEY, selectedWalletId);
+      notifyWalletEvent(
+        'connected',
+        `${newAddress.slice(0, 6)}...${newAddress.slice(-4)} via ${selectedWalletId}`
+      );
+      return newAddress;
+    } catch (error) {
+      console.error('Failed to connect wallet:', error);
+      notifyWalletEvent(
+        'connection_failed',
+        error instanceof Error ? error.message : 'Please try again.'
+      );
+      return null;
+    } finally {
+      setIsConnecting(false);
+      setWalletModalOpen(false);
+    }
+  }, [notifyWalletEvent]);
+
+  const connect = useCallback(async (): Promise<string | null> => {
+    const options = await loadWalletOptions();
+    if (options.length === 0) {
+      notifyWalletEvent('connection_failed', 'No supported wallet providers were found.');
+      return null;
+    }
+    setWalletModalOpen(true);
+    return null;
+  }, [loadWalletOptions, notifyWalletEvent]);
+
+  const requireWallet = useCallback(async (): Promise<string | null> => {
+    if (address) return address;
+    notifyWalletEvent('required', 'Connect your wallet to continue with this contract action.');
+    return connect();
+  }, [address, connect, notifyWalletEvent]);
+
+  const disconnect = useCallback(() => {
+    const kit = kitRef.current;
+    if (kit) {
+      void kit.disconnect();
+    }
+    setAddress(null);
+    setWalletName(null);
+    localStorage.removeItem(LAST_WALLET_STORAGE_KEY);
+    notifyWalletEvent('disconnected');
+  }, [notifyWalletEvent]);
+
+  const signTransaction = useCallback(async (xdr: string) => {
+    const kit = kitRef.current;
+    if (!kit) throw new Error('Wallet kit not initialized');
+    const result = await kit.signTransaction(xdr);
+    return result.signedTxXdr;
+  }, []);
+
+  return {
+    address,
+    walletName,
+    network,
+    setNetwork,
+    isConnecting,
+    isInitialized,
+    walletExtensionAvailable,
+    connect,
+    requireWallet,
+    disconnect,
+    signTransaction,
+    walletModalOpen,
+    setWalletModalOpen,
+    walletOptions,
+    connectWithWallet,
+  };
+}
diff --git a/frontend/src/providers/WalletProvider.tsx b/frontend/src/providers/WalletProvider.tsx
index 82ca9063..b4a4dcfe 100644
--- a/frontend/src/providers/WalletProvider.tsx
+++ b/frontend/src/providers/WalletProvider.tsx
@@ -1,180 +1,28 @@
-import React, { useEffect, useState, useRef } from 'react';
-import {
-  StellarWalletsKit,
-  WalletNetwork,
-  FreighterModule,
-  FREIGHTER_ID,
-  xBullModule,
-  LobstrModule,
-  LOBSTR_ID,
-} from '@creit.tech/stellar-wallets-kit';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { useNotification } from '../hooks/useNotification';
 import { WalletContext } from '../hooks/useWallet';
-
-const LAST_WALLET_STORAGE_KEY = 'payd:last_wallet_name';
-const SUPPORTED_MODAL_WALLETS = [FREIGHTER_ID, LOBSTR_ID] as const;
-
-type SelectableWallet = {
-  id: string;
-  name: string;
-  icon?: string;
-  isAvailable: boolean;
-};
-
-function hasAnyWalletExtension(): boolean {
-  if (typeof window === 'undefined') return true;
-  const extendedWindow = window as Window &
-    typeof globalThis & {
-      freighterApi?: unknown;
-      xBullSDK?: unknown;
-      lobstr?: unknown;
-    };
-
-  return Boolean(extendedWindow.freighterApi || extendedWindow.xBullSDK || extendedWindow.lobstr);
-}
+import { useWalletManager } from '../hooks/useWalletManager';
 
 export const WalletProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  const [address, setAddress] = useState<string | null>(null);
-  const [walletName, setWalletName] = useState<string | null>(null);
-  const [isConnecting, setIsConnecting] = useState(false);
-  const [isInitialized, setIsInitialized] = useState(false);
-  const [walletExtensionAvailable, setWalletExtensionAvailable] = useState(true);
-  const [network, setNetwork] = useState<'TESTNET' | 'PUBLIC'>('TESTNET');
-  const [walletModalOpen, setWalletModalOpen] = useState(false);
-  const [walletOptions, setWalletOptions] = useState<SelectableWallet[]>([]);
-  const kitRef = useRef<StellarWalletsKit | null>(null);
   const { t } = useTranslation();
-  const { notifyWalletEvent } = useNotification();
-
-  useEffect(() => {
-    setWalletExtensionAvailable(hasAnyWalletExtension());
-
-    const newKit = new StellarWalletsKit({
-      network: network === 'TESTNET' ? WalletNetwork.TESTNET : WalletNetwork.PUBLIC,
-      modules: [new FreighterModule(), new xBullModule(), new LobstrModule()],
-    });
-    kitRef.current = newKit;
-
-    const attemptSilentReconnect = async () => {
-      const lastWalletName = localStorage.getItem(LAST_WALLET_STORAGE_KEY);
-      if (!lastWalletName) {
-        setIsInitialized(true);
-        return;
-      }
-
-      setWalletName(lastWalletName);
-      setIsConnecting(true);
-
-      try {
-        newKit.setWallet(lastWalletName);
-        const account = await newKit.getAddress();
-        if (account?.address) {
-          setAddress(account.address);
-          notifyWalletEvent(
-            'reconnected',
-            `${account.address.slice(0, 6)}...${account.address.slice(-4)} via ${lastWalletName}`
-          );
-        }
-      } catch {
-        // Silent reconnection should not block app flow.
-      } finally {
-        setIsConnecting(false);
-        setIsInitialized(true);
-      }
-    };
-
-    void attemptSilentReconnect();
-  }, [notifyWalletEvent, network]);
-
-  const loadWalletOptions = async (): Promise<SelectableWallet[]> => {
-    const kit = kitRef.current;
-    if (!kit) return [];
-    const supported = await kit.getSupportedWallets();
-    const options = supported
-      .filter((wallet) =>
-        SUPPORTED_MODAL_WALLETS.includes(wallet.id as (typeof SUPPORTED_MODAL_WALLETS)[number])
-      )
-      .map((wallet) => ({
-        id: wallet.id,
-        name: wallet.name,
-        icon: wallet.icon,
-        isAvailable: wallet.isAvailable,
-      }));
-    setWalletOptions(options);
-    setWalletExtensionAvailable(options.some((wallet) => wallet.isAvailable));
-    return options;
-  };
-
-  const connectWithWallet = async (selectedWalletId: string): Promise<string | null> => {
-    const kit = kitRef.current;
-    if (!kit) return 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)
-        ),
-      ]);
-
-      setAddress(address);
-      setWalletName(selectedWalletId);
-      localStorage.setItem(LAST_WALLET_STORAGE_KEY, selectedWalletId);
-      notifyWalletEvent(
-        'connected',
-        `${address.slice(0, 6)}...${address.slice(-4)} via ${selectedWalletId}`
-      );
-      return address;
-    } catch (error) {
-      console.error('Failed to connect wallet:', error);
-      notifyWalletEvent(
-        'connection_failed',
-        error instanceof Error ? error.message : 'Please try again.'
-      );
-      return null;
-    } finally {
-      setIsConnecting(false);
-      setWalletModalOpen(false);
-    }
-  };
-
-  const connect = async (): Promise<string | null> => {
-    const options = await loadWalletOptions();
-    if (options.length === 0) {
-      notifyWalletEvent('connection_failed', 'No supported wallet providers were found.');
-      return null;
-    }
-    setWalletModalOpen(true);
-    return null;
-  };
-
-  const requireWallet = async (): Promise<string | null> => {
-    if (address) return address;
-    notifyWalletEvent('required', 'Connect your wallet to continue with this contract action.');
-    return connect();
-  };
-
-  const disconnect = () => {
-    const kit = kitRef.current;
-    if (kit) {
-      void kit.disconnect();
-    }
-    setAddress(null);
-    setWalletName(null);
-    localStorage.removeItem(LAST_WALLET_STORAGE_KEY);
-    notifyWalletEvent('disconnected');
-  };
-
-  const signTransaction = async (xdr: string) => {
-    const kit = kitRef.current;
-    if (!kit) throw new Error('Wallet kit not initialized');
-    const result = await kit.signTransaction(xdr);
-    return result.signedTxXdr;
-  };
+  const walletManager = useWalletManager();
+  const {
+    address,
+    walletName,
+    network,
+    setNetwork,
+    isConnecting,
+    isInitialized,
+    walletExtensionAvailable,
+    connect,
+    requireWallet,
+    disconnect,
+    signTransaction,
+    walletModalOpen,
+    setWalletModalOpen,
+    walletOptions,
+    connectWithWallet,
+  } = walletManager;
 
   return (
     <>
@@ -188,7 +36,7 @@ export const WalletProvider: React.FC<{ children: React.ReactNode }> = ({ childr
         <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="mb-4 flex items-center justify-between">
-              <h3 className="text-lg font-black">{t('wallet.modalTitle') || 'Select a wallet'}</h3>
+              <h3 className="text-lg font-black">{t('wallet.modalTitle')}</h3>
               <button
                 onClick={() => setWalletModalOpen(false)}
                 className="rounded-lg border border-hi px-2 py-1 text-xs text-muted hover:text-text"

From cc234771b8f44ddb9ea6314f526e6991d0a32797 Mon Sep 17 00:00:00 2001
From: 0xMosas <tosinolosasa@gmail.com>
Date: Fri, 3 Apr 2026 12:00:52 +0100
Subject: [PATCH 2/3] fix: resolve lint errors in useWalletManager tests

- Replace 'any' type with properly typed MockKitInstance interface
- Fix floating promises by properly awaiting async operations
- Remove unused MockedFunction import
- Use vi.mocked() for cleaner mock implementations

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 .../__tests__/hooks/useWalletManager.test.ts  | 50 +++++++++++++------
 1 file changed, 34 insertions(+), 16 deletions(-)

diff --git a/frontend/src/__tests__/hooks/useWalletManager.test.ts b/frontend/src/__tests__/hooks/useWalletManager.test.ts
index 62634fa0..b6666c30 100644
--- a/frontend/src/__tests__/hooks/useWalletManager.test.ts
+++ b/frontend/src/__tests__/hooks/useWalletManager.test.ts
@@ -1,14 +1,22 @@
 import { renderHook, act, waitFor } from '@testing-library/react';
-import { describe, expect, it, vi, beforeEach, MockedFunction } from 'vitest';
+import { describe, expect, it, vi, beforeEach } from 'vitest';
 import { useWalletManager } from '../../hooks/useWalletManager';
 import { StellarWalletsKit } from '@creit.tech/stellar-wallets-kit';
 
 vi.mock('@creit.tech/stellar-wallets-kit', () => ({
-  StellarWalletsKit: vi.fn(function() { return {}; }),
+  StellarWalletsKit: vi.fn(function () {
+    return {};
+  }),
   WalletNetwork: { TESTNET: 'TESTNET', PUBLIC: 'PUBLIC' },
-  FreighterModule: vi.fn(function() { return {}; }),
-  xBullModule: vi.fn(function() { return {}; }),
-  LobstrModule: vi.fn(function() { return {}; }),
+  FreighterModule: vi.fn(function () {
+    return {};
+  }),
+  xBullModule: vi.fn(function () {
+    return {};
+  }),
+  LobstrModule: vi.fn(function () {
+    return {};
+  }),
   FREIGHTER_ID: 'freighter',
   LOBSTR_ID: 'lobstr',
 }));
@@ -19,8 +27,16 @@ vi.mock('../../hooks/useNotification', () => ({
   }),
 }));
 
+interface MockKitInstance {
+  setWallet: ReturnType<typeof vi.fn>;
+  getAddress: ReturnType<typeof vi.fn>;
+  getSupportedWallets: ReturnType<typeof vi.fn>;
+  disconnect: ReturnType<typeof vi.fn>;
+  signTransaction: ReturnType<typeof vi.fn>;
+}
+
 describe('useWalletManager', () => {
-  let mockKitInstance: any;
+  let mockKitInstance: MockKitInstance;
 
   beforeEach(() => {
     vi.clearAllMocks();
@@ -32,7 +48,9 @@ describe('useWalletManager', () => {
       disconnect: vi.fn(),
       signTransaction: vi.fn(),
     };
-    (StellarWalletsKit as unknown as ReturnType<typeof vi.fn>).mockImplementation(function() { return mockKitInstance; });
+    vi.mocked(StellarWalletsKit).mockImplementation(
+      () => mockKitInstance as unknown as StellarWalletsKit
+    );
   });
 
   it('initializes and attempts silent reconnect if wallet in localStorage', async () => {
@@ -40,7 +58,7 @@ describe('useWalletManager', () => {
     mockKitInstance.getAddress.mockResolvedValue({ address: 'G123' });
 
     const { result } = renderHook(() => useWalletManager());
-    
+
     // Initially connecting
     expect(result.current.isConnecting).toBe(true);
     expect(result.current.isInitialized).toBe(false);
@@ -56,13 +74,13 @@ describe('useWalletManager', () => {
 
   it('handles manual connect sequence appropriately', async () => {
     mockKitInstance.getSupportedWallets.mockResolvedValue([
-      { id: 'freighter', name: 'Freighter', isAvailable: true }
+      { id: 'freighter', name: 'Freighter', isAvailable: true },
     ]);
-    
+
     const { result } = renderHook(() => useWalletManager());
 
-    act(() => {
-      result.current.connect();
+    await act(async () => {
+      await result.current.connect();
     });
 
     await waitFor(() => {
@@ -72,8 +90,8 @@ describe('useWalletManager', () => {
 
     mockKitInstance.getAddress.mockResolvedValue({ address: 'G456' });
 
-    act(() => {
-      result.current.connectWithWallet('freighter');
+    await act(async () => {
+      await result.current.connectWithWallet('freighter');
     });
 
     await waitFor(() => {
@@ -83,10 +101,10 @@ describe('useWalletManager', () => {
     expect(result.current.walletName).toBe('freighter');
   });
 
-  it('handles disconnect', async () => {
+  it('handles disconnect', () => {
     const { result } = renderHook(() => useWalletManager());
 
-    await act(async () => {
+    act(() => {
       result.current.disconnect();
     });
 

From 189065ac589d9f00c9cda88e70ca0be6e4b958c5 Mon Sep 17 00:00:00 2001
From: 0xMosas <tosinolosasa@gmail.com>
Date: Fri, 3 Apr 2026 12:23:10 +0100
Subject: [PATCH 3/3] style: fix prettier formatting in all files

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 frontend/src/components/AppLayout.tsx         |  3 +-
 frontend/src/components/Breadcrumb.tsx        | 13 +--
 frontend/src/components/EmployeeList.tsx      |  9 +-
 .../src/components/__tests__/AppNav.test.tsx  |  3 +-
 .../components/__tests__/Breadcrumb.test.tsx  |  5 +-
 .../__tests__/EmployeeListHover.test.tsx      |  8 +-
 .../__tests__/NetworkSwitcher.test.tsx        |  8 +-
 frontend/src/hooks/useWalletManager.ts        | 83 ++++++++++---------
 .../__tests__/WalletProvider.test.tsx         |  5 +-
 frontend/src/stores/networkStore.ts           |  4 +-
 10 files changed, 57 insertions(+), 84 deletions(-)

diff --git a/frontend/src/components/AppLayout.tsx b/frontend/src/components/AppLayout.tsx
index bd2cb62e..192bce22 100644
--- a/frontend/src/components/AppLayout.tsx
+++ b/frontend/src/components/AppLayout.tsx
@@ -9,8 +9,7 @@ import { Breadcrumb } from './Breadcrumb';
 import { NetworkSwitcher } from './NetworkSwitcher';
 import { useNetworkStore } from '../stores/networkStore';
 
-const APP_VERSION =
-  (import.meta.env.PUBLIC_APP_VERSION as string | undefined)?.trim() ?? '0.0.1';
+const APP_VERSION = (import.meta.env.PUBLIC_APP_VERSION as string | undefined)?.trim() ?? '0.0.1';
 const APP_ENV = import.meta.env.MODE;
 
 // ── Page Wrapper ───────────────────────
diff --git a/frontend/src/components/Breadcrumb.tsx b/frontend/src/components/Breadcrumb.tsx
index 3472fa25..2d9aac5d 100644
--- a/frontend/src/components/Breadcrumb.tsx
+++ b/frontend/src/components/Breadcrumb.tsx
@@ -34,8 +34,7 @@ export function buildCrumbs(pathname: string): Crumb[] {
   let accumulated = '';
   for (const segment of segments) {
     accumulated += `/${segment}`;
-    const label =
-      ROUTE_LABELS[segment] ?? segment.charAt(0).toUpperCase() + segment.slice(1);
+    const label = ROUTE_LABELS[segment] ?? segment.charAt(0).toUpperCase() + segment.slice(1);
     crumbs.push({ label, href: accumulated });
   }
 
@@ -61,15 +60,9 @@ export const Breadcrumb: React.FC = () => {
         const isLast = i === crumbs.length - 1;
         return (
           <React.Fragment key={crumb.href}>
-            {i > 0 && (
-              <ChevronRight className="h-3 w-3 shrink-0 opacity-50" aria-hidden />
-            )}
+            {i > 0 && <ChevronRight className="h-3 w-3 shrink-0 opacity-50" aria-hidden />}
             {isLast ? (
-              <span
-                className="font-medium"
-                style={{ color: 'var(--text)' }}
-                aria-current="page"
-              >
+              <span className="font-medium" style={{ color: 'var(--text)' }} aria-current="page">
                 {crumb.label}
               </span>
             ) : (
diff --git a/frontend/src/components/EmployeeList.tsx b/frontend/src/components/EmployeeList.tsx
index c0d98a0e..75645bd1 100644
--- a/frontend/src/components/EmployeeList.tsx
+++ b/frontend/src/components/EmployeeList.tsx
@@ -255,9 +255,7 @@ export const EmployeeList: React.FC<EmployeeListProps> = ({
         </thead>
         <tbody className="divide-y divide-gray-200">
           {isLoading ? (
-            Array.from({ length: SKELETON_ROW_COUNT }, (_, i) => (
-              <EmployeeSkeletonRow key={i} />
-            ))
+            Array.from({ length: SKELETON_ROW_COUNT }, (_, i) => <EmployeeSkeletonRow key={i} />)
           ) : sortedEmployees.length === 0 ? (
             <tr>
               <td colSpan={6} className="p-6 text-center text-gray-500">
@@ -266,10 +264,7 @@ export const EmployeeList: React.FC<EmployeeListProps> = ({
             </tr>
           ) : (
             sortedEmployees.map((employee) => (
-              <tr
-                key={employee.id}
-                className="cursor-pointer transition-colors hover:bg-white/5"
-              >
+              <tr key={employee.id} className="cursor-pointer transition-colors hover:bg-white/5">
                 <td className="p-6">
                   <div className="flex items-center gap-3">
                     <Avatar
diff --git a/frontend/src/components/__tests__/AppNav.test.tsx b/frontend/src/components/__tests__/AppNav.test.tsx
index 64db1def..e0d210ac 100644
--- a/frontend/src/components/__tests__/AppNav.test.tsx
+++ b/frontend/src/components/__tests__/AppNav.test.tsx
@@ -16,8 +16,7 @@ vi.mock('../../hooks/useWallet', () => ({
 }));
 
 // Dynamic import so mocks are registered first
-const importNav = () =>
-  import('../AppNav').then((m) => m.default);
+const importNav = () => import('../AppNav').then((m) => m.default);
 
 describe('AppNav — mobile drawer', () => {
   test('hamburger button is present and drawer is hidden initially', async () => {
diff --git a/frontend/src/components/__tests__/Breadcrumb.test.tsx b/frontend/src/components/__tests__/Breadcrumb.test.tsx
index a4736209..35393297 100644
--- a/frontend/src/components/__tests__/Breadcrumb.test.tsx
+++ b/frontend/src/components/__tests__/Breadcrumb.test.tsx
@@ -97,10 +97,7 @@ describe('Breadcrumb component', () => {
       </MemoryRouter>
     );
     expect(screen.getByRole('link', { name: /home/i })).toHaveAttribute('href', '/');
-    expect(screen.getByRole('link', { name: /employer/i })).toHaveAttribute(
-      'href',
-      '/employer'
-    );
+    expect(screen.getByRole('link', { name: /employer/i })).toHaveAttribute('href', '/employer');
     expect(screen.getByText('Payroll')).toHaveAttribute('aria-current', 'page');
   });
 });
diff --git a/frontend/src/components/__tests__/EmployeeListHover.test.tsx b/frontend/src/components/__tests__/EmployeeListHover.test.tsx
index c2b0bb09..78fbee3c 100644
--- a/frontend/src/components/__tests__/EmployeeListHover.test.tsx
+++ b/frontend/src/components/__tests__/EmployeeListHover.test.tsx
@@ -23,9 +23,7 @@ const employee = {
 
 describe('EmployeeList row hover effects', () => {
   test('data rows include hover background class', () => {
-    const { container } = render(
-      <EmployeeList employees={[employee]} onAddEmployee={vi.fn()} />
-    );
+    const { container } = render(<EmployeeList employees={[employee]} onAddEmployee={vi.fn()} />);
 
     const rows = container.querySelectorAll('tbody tr');
     expect(rows.length).toBeGreaterThan(0);
@@ -36,9 +34,7 @@ describe('EmployeeList row hover effects', () => {
   });
 
   test('data rows include transition class for smooth hover animation', () => {
-    const { container } = render(
-      <EmployeeList employees={[employee]} onAddEmployee={vi.fn()} />
-    );
+    const { container } = render(<EmployeeList employees={[employee]} onAddEmployee={vi.fn()} />);
 
     const rows = container.querySelectorAll('tbody tr');
     rows.forEach((row) => {
diff --git a/frontend/src/components/__tests__/NetworkSwitcher.test.tsx b/frontend/src/components/__tests__/NetworkSwitcher.test.tsx
index e68dc461..33d7b5a0 100644
--- a/frontend/src/components/__tests__/NetworkSwitcher.test.tsx
+++ b/frontend/src/components/__tests__/NetworkSwitcher.test.tsx
@@ -25,9 +25,7 @@ describe('NetworkSwitcher', () => {
 
   test('renders a select element with an accessible label', () => {
     render(<NetworkSwitcher />);
-    expect(
-      screen.getByRole('combobox', { name: /select stellar network/i })
-    ).toBeInTheDocument();
+    expect(screen.getByRole('combobox', { name: /select stellar network/i })).toBeInTheDocument();
   });
 
   test('shows MAINNET as the default selected option', () => {
@@ -66,8 +64,6 @@ describe('NetworkSwitcher', () => {
 
   test('wraps select in a group with an accessible label', () => {
     render(<NetworkSwitcher />);
-    expect(
-      screen.getByRole('group', { name: /stellar network selector/i })
-    ).toBeInTheDocument();
+    expect(screen.getByRole('group', { name: /stellar network selector/i })).toBeInTheDocument();
   });
 });
diff --git a/frontend/src/hooks/useWalletManager.ts b/frontend/src/hooks/useWalletManager.ts
index 6e58eec3..491855b9 100644
--- a/frontend/src/hooks/useWalletManager.ts
+++ b/frontend/src/hooks/useWalletManager.ts
@@ -42,7 +42,7 @@ export function useWalletManager() {
   const [walletModalOpen, setWalletModalOpen] = useState(false);
   const [walletOptions, setWalletOptions] = useState<SelectableWallet[]>([]);
   const kitRef = useRef<StellarWalletsKit | null>(null);
-  
+
   const { notifyWalletEvent } = useNotification();
 
   useEffect(() => {
@@ -104,45 +104,48 @@ export function useWalletManager() {
     return options;
   }, []);
 
-  const connectWithWallet = useCallback(async (selectedWalletId: string): Promise<string | null> => {
-    const kit = kitRef.current;
-    if (!kit) return null;
-
-    setIsConnecting(true);
-    try {
-      kit.setWallet(selectedWalletId);
-
-      let timeoutId: ReturnType<typeof setTimeout>;
-      const timeoutPromise = new Promise<{ address: string }>((_, reject) => {
-        timeoutId = setTimeout(() => reject(new Error('Connection timed out after 15 seconds.')), 15000);
-      });
-
-      const { address: newAddress } = await Promise.race([
-        kit.getAddress(),
-        timeoutPromise,
-      ]);
-      clearTimeout(timeoutId!);
-
-      setAddress(newAddress);
-      setWalletName(selectedWalletId);
-      localStorage.setItem(LAST_WALLET_STORAGE_KEY, selectedWalletId);
-      notifyWalletEvent(
-        'connected',
-        `${newAddress.slice(0, 6)}...${newAddress.slice(-4)} via ${selectedWalletId}`
-      );
-      return newAddress;
-    } catch (error) {
-      console.error('Failed to connect wallet:', error);
-      notifyWalletEvent(
-        'connection_failed',
-        error instanceof Error ? error.message : 'Please try again.'
-      );
-      return null;
-    } finally {
-      setIsConnecting(false);
-      setWalletModalOpen(false);
-    }
-  }, [notifyWalletEvent]);
+  const connectWithWallet = useCallback(
+    async (selectedWalletId: string): Promise<string | null> => {
+      const kit = kitRef.current;
+      if (!kit) return null;
+
+      setIsConnecting(true);
+      try {
+        kit.setWallet(selectedWalletId);
+
+        let timeoutId: ReturnType<typeof setTimeout>;
+        const timeoutPromise = new Promise<{ address: string }>((_, reject) => {
+          timeoutId = setTimeout(
+            () => reject(new Error('Connection timed out after 15 seconds.')),
+            15000
+          );
+        });
+
+        const { address: newAddress } = await Promise.race([kit.getAddress(), timeoutPromise]);
+        clearTimeout(timeoutId!);
+
+        setAddress(newAddress);
+        setWalletName(selectedWalletId);
+        localStorage.setItem(LAST_WALLET_STORAGE_KEY, selectedWalletId);
+        notifyWalletEvent(
+          'connected',
+          `${newAddress.slice(0, 6)}...${newAddress.slice(-4)} via ${selectedWalletId}`
+        );
+        return newAddress;
+      } catch (error) {
+        console.error('Failed to connect wallet:', error);
+        notifyWalletEvent(
+          'connection_failed',
+          error instanceof Error ? error.message : 'Please try again.'
+        );
+        return null;
+      } finally {
+        setIsConnecting(false);
+        setWalletModalOpen(false);
+      }
+    },
+    [notifyWalletEvent]
+  );
 
   const connect = useCallback(async (): Promise<string | null> => {
     const options = await loadWalletOptions();
diff --git a/frontend/src/providers/__tests__/WalletProvider.test.tsx b/frontend/src/providers/__tests__/WalletProvider.test.tsx
index 4e6e9ac5..6b6837c7 100644
--- a/frontend/src/providers/__tests__/WalletProvider.test.tsx
+++ b/frontend/src/providers/__tests__/WalletProvider.test.tsx
@@ -145,10 +145,7 @@ describe('WalletProvider', () => {
     });
 
     expect(screen.queryByRole('dialog', { name: /connect to payd/i })).not.toBeInTheDocument();
-    expect(mockNotifyWalletEvent).toHaveBeenCalledWith(
-      'connected',
-      'GABCD1...LLET via freighter'
-    );
+    expect(mockNotifyWalletEvent).toHaveBeenCalledWith('connected', 'GABCD1...LLET via freighter');
   });
 
   it('finishes initialization when silent reconnect hangs', async () => {
diff --git a/frontend/src/stores/networkStore.ts b/frontend/src/stores/networkStore.ts
index 875295c4..764749ed 100644
--- a/frontend/src/stores/networkStore.ts
+++ b/frontend/src/stores/networkStore.ts
@@ -4,9 +4,7 @@ import { persist } from 'zustand/middleware';
 export type StellarNetwork = 'TESTNET' | 'MAINNET';
 
 function getDefaultNetwork(): StellarNetwork {
-  const env = (import.meta.env.PUBLIC_STELLAR_NETWORK as string | undefined)
-    ?.toUpperCase()
-    ?.trim();
+  const env = (import.meta.env.PUBLIC_STELLAR_NETWORK as string | undefined)?.toUpperCase()?.trim();
   return env === 'TESTNET' ? 'TESTNET' : 'MAINNET';
 }