refactor(frontend): decouple wallet logic into useWalletManager hook

frontend/src/__tests__/hooks/useWalletManager.test.ts

@@ -0,0 +1,115 @@
+import { renderHook, act, waitFor } from '@testing-library/react';
+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 {};
+  }),
+  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(),
+  }),
+}));
+
+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: MockKitInstance;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    localStorage.clear();
+    mockKitInstance = {
+      setWallet: vi.fn(),
+      getAddress: vi.fn(),
+      getSupportedWallets: vi.fn().mockResolvedValue([]),
+      disconnect: vi.fn(),
+      signTransaction: vi.fn(),
+    };
+    vi.mocked(StellarWalletsKit).mockImplementation(
+      () => mockKitInstance as unknown as StellarWalletsKit
+    );
+  });
+
+  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());
+
+    await act(async () => {
+      await result.current.connect();
+    });
+
+    await waitFor(() => {
+      expect(result.current.walletModalOpen).toBe(true);
+    });
+    expect(result.current.walletOptions.length).toBe(1);
+
+    mockKitInstance.getAddress.mockResolvedValue({ address: 'G456' });
+
+    await act(async () => {
+      await 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', () => {
+    const { result } = renderHook(() => useWalletManager());
+
+    act(() => {
+      result.current.disconnect();
+    });
+
+    expect(result.current.address).toBeNull();
+    expect(result.current.walletName).toBeNull();
+    expect(localStorage.getItem('payd:last_wallet_name')).toBeNull();
+  });
+});

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 ───────────────────────

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>
             ) : (

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

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 () => {

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');
   });
 });

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) => {

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();
   });
 });