fix: resolve race conditions and add toast telemetry (#1209, #1211, #1212, #1214)

- useChatPagination (#1214): store setTimeout return in timerRef and clear
  on unmount to prevent state updates on unmounted components
- useBeneficiaries (#1211): replace isMounted useState with useRef to
  eliminate the extra render cycle and the state-update-after-unmount
  race when components unmount before the mounted flag effect runs
- useToast (#1209): wrap addToast/dismissToast/clearToasts with
  structured CustomEvent('toast_telemetry') dispatches so consumers can
  observe toast lifecycle events
- useBridgeStats (#1212): add fetchIdRef generation counter so stale
  concurrent fetch results are discarded when a newer call supersedes them

Add unit tests for each fix covering the unmount and concurrency paths.

Closes #1209, #1211, #1212, #1214

Author: anuoluwaponiorimi

Dechat/dex_with_fiat_frontend/src/hooks/useBeneficiaries.test.ts

@@ -1,4 +1,4 @@
-import { renderHook, act } from '@testing-library/react';
+import { renderHook, act, waitFor } from '@testing-library/react';
 import { beforeEach, afterEach, describe, expect, it, vi } from 'vitest';
 import { useBeneficiaries } from './useBeneficiaries';
 
@@ -21,7 +21,7 @@ describe('useBeneficiaries', () => {
   });
 
   afterEach(() => {
-    // No timer cleanup needed for this hook
+    vi.restoreAllMocks();
   });
 
   it('loads beneficiaries from localStorage on mount', () => {
@@ -156,4 +156,65 @@ describe('useBeneficiaries', () => {
     expect(result.current.beneficiaries).toEqual(mockBeneficiaries);
     expect(result.current.isLoaded).toBe(true);
   });
+
+  it('does not update state after unmount when API fetch completes', async () => {
+    let resolveFetch!: (value: Response) => void;
+    const fetchPromise = new Promise<Response>((resolve) => {
+      resolveFetch = resolve;
+    });
+
+    vi.spyOn(global, 'fetch').mockReturnValue(fetchPromise);
+
+    const { result, unmount } = renderHook(() =>
+      useBeneficiaries({ fetchFromApi: true, userId: 'user-1' }),
+    );
+
+    expect(result.current.isLoaded).toBe(false);
+
+    // Unmount before the fetch resolves
+    unmount();
+
+    // Resolve the fetch after unmount — should not update state
+    resolveFetch(
+      new Response(JSON.stringify([]), { status: 200 }),
+    );
+
+    await waitFor(() => {
+      // After resolving, state should remain unchanged (not loaded)
+      // since the component was already unmounted
+      expect(result.current.beneficiaries).toHaveLength(0);
+    });
+  });
+
+  it('cancels in-flight request when userId changes', async () => {
+    let resolveFirst!: (value: Response) => void;
+    const firstFetch = new Promise<Response>((resolve) => { resolveFirst = resolve; });
+    let resolveSecond!: (value: Response) => void;
+    const secondFetch = new Promise<Response>((resolve) => { resolveSecond = resolve; });
+
+    const fetchSpy = vi.spyOn(global, 'fetch')
+      .mockReturnValueOnce(firstFetch)
+      .mockReturnValueOnce(secondFetch);
+
+    let userId = 'user-a';
+    const { result, rerender } = renderHook(() =>
+      useBeneficiaries({ fetchFromApi: true, userId }),
+    );
+
+    expect(fetchSpy).toHaveBeenCalledTimes(1);
+
+    userId = 'user-b';
+    rerender();
+
+    // Resolve stale request after userId change — state should reflect second request result
+    const firstData = [{ id: '1', name: 'Old', bankId: 1, bankName: 'B', bankCode: 'B', accountNumber: '1', accountName: 'A', createdAt: 0 }];
+    resolveFirst(new Response(JSON.stringify(firstData), { status: 200 }));
+
+    const secondData = [{ id: '2', name: 'New', bankId: 2, bankName: 'C', bankCode: 'C', accountNumber: '2', accountName: 'B', createdAt: 0 }];
+    resolveSecond(new Response(JSON.stringify(secondData), { status: 200 }));
+
+    await waitFor(() => {
+      expect(result.current.isLoaded).toBe(true);
+    });
+  });
 });

Dechat/dex_with_fiat_frontend/src/hooks/useBeneficiaries.ts

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useRef } from 'react';
 
 const KEYBOARD_SHORTCUTS = {
   ADD_BENEFICIARY: 'Ctrl+B',
@@ -95,28 +95,31 @@ export function useBeneficiaries(options?: { fetchFromApi?: boolean; userId?: st
   const [beneficiaries, setBeneficiaries] = useState<Beneficiary[]>([]);
   const [isLoaded, setIsLoaded] = useState(false);
   const [selectedIndex, setSelectedIndex] = useState<number>(-1);
-  const [isMounted, setIsMounted] = useState(false);
+  const isMountedRef = useRef(false);
 
   useEffect(() => {
-    setIsMounted(true);
+    isMountedRef.current = true;
+    return () => {
+      isMountedRef.current = false;
+    };
   }, []);
 
   // Fetch from API with deduplication if enabled
   useEffect(() => {
-    if (!isMounted || !fetchFromApi || typeof window === 'undefined') return;
+    if (!fetchFromApi || typeof window === 'undefined') return;
 
     let cancelled = false;
 
     (async () => {
       try {
         const data = await fetchBeneficiariesWithDedup(userId);
-        if (!cancelled) {
+        if (!cancelled && isMountedRef.current) {
           setBeneficiaries(Array.isArray(data) ? data : []);
           setIsLoaded(true);
         }
       } catch (error) {
         console.error('Error loading beneficiaries:', error);
-        if (!cancelled) {
+        if (!cancelled && isMountedRef.current) {
           setIsLoaded(true);
         }
       }
@@ -125,11 +128,11 @@ export function useBeneficiaries(options?: { fetchFromApi?: boolean; userId?: st
     return () => {
       cancelled = true;
     };
-  }, [isMounted, fetchFromApi, userId]);
+  }, [fetchFromApi, userId]);
 
   // Load from localStorage if not fetching from API
   useEffect(() => {
-    if (!isMounted || fetchFromApi || typeof window === 'undefined') return;
+    if (fetchFromApi || typeof window === 'undefined') return;
     try {
       const stored = localStorage.getItem(STORAGE_KEY);
       if (stored) {
@@ -140,7 +143,7 @@ export function useBeneficiaries(options?: { fetchFromApi?: boolean; userId?: st
       setBeneficiaries([]);
     }
     setIsLoaded(true);
-  }, [isMounted, fetchFromApi]);
+  }, [fetchFromApi]);
 
   useEffect(() => {
     if (!isLoaded || typeof window === 'undefined') return;

Dechat/dex_with_fiat_frontend/src/hooks/useBridgeStats.test.ts

@@ -0,0 +1,136 @@
+import { renderHook, act, waitFor } from '@testing-library/react';
+import { beforeEach, afterEach, describe, expect, it, vi } from 'vitest';
+import useBridgeStats from './useBridgeStats';
+
+vi.mock('@/lib/stellarContract', () => ({
+  getContractBalance: vi.fn(),
+  getBridgeLimit: vi.fn(),
+  getTotalDeposited: vi.fn(),
+  clearCache: vi.fn(),
+}));
+
+import {
+  getContractBalance,
+  getBridgeLimit,
+  getTotalDeposited,
+} from '@/lib/stellarContract';
+
+const mockGetContractBalance = vi.mocked(getContractBalance);
+const mockGetBridgeLimit = vi.mocked(getBridgeLimit);
+const mockGetTotalDeposited = vi.mocked(getTotalDeposited);
+
+describe('useBridgeStats', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    mockGetContractBalance.mockResolvedValue(100n);
+    mockGetBridgeLimit.mockResolvedValue(1000n);
+    mockGetTotalDeposited.mockResolvedValue(500n);
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.clearAllMocks();
+  });
+
+  it('fetches stats on mount and sets state', async () => {
+    const { result } = renderHook(() => useBridgeStats());
+
+    await waitFor(() => {
+      expect(result.current.loading).toBe(false);
+    });
+
+    expect(result.current.balance).toBe(100n);
+    expect(result.current.limit).toBe(1000n);
+    expect(result.current.totalDeposited).toBe(500n);
+    expect(result.current.fetchCount).toBe(1);
+    expect(result.current.error).toBeNull();
+  });
+
+  it('does not update state after unmount', async () => {
+    let resolveBalance!: (v: bigint) => void;
+    mockGetContractBalance.mockReturnValue(
+      new Promise<bigint>((resolve) => { resolveBalance = resolve; }),
+    );
+    mockGetBridgeLimit.mockResolvedValue(1000n);
+    mockGetTotalDeposited.mockResolvedValue(500n);
+
+    const { result, unmount } = renderHook(() => useBridgeStats());
+
+    unmount();
+
+    // Resolve after unmount — should not throw or update state
+    expect(() => { resolveBalance(200n); }).not.toThrow();
+
+    await vi.runAllTimersAsync();
+
+    // State should remain at initial values since component was unmounted
+    expect(result.current.balance).toBeNull();
+  });
+
+  it('discards stale concurrent fetch result when a newer fetch supersedes it', async () => {
+    let resolveFirst!: (v: bigint) => void;
+    let resolveSecond!: (v: bigint) => void;
+
+    mockGetContractBalance
+      .mockReturnValueOnce(new Promise<bigint>((r) => { resolveFirst = r; }))
+      .mockReturnValueOnce(new Promise<bigint>((r) => { resolveSecond = r; }));
+    mockGetBridgeLimit.mockResolvedValue(1000n);
+    mockGetTotalDeposited.mockResolvedValue(500n);
+
+    const { result } = renderHook(() => useBridgeStats());
+
+    // Trigger a second fetch (manual refresh) before the first completes
+    act(() => {
+      void result.current.refetchStats();
+    });
+
+    // Resolve the second (newer) fetch first
+    resolveSecond(999n);
+
+    await waitFor(() => {
+      expect(result.current.loading).toBe(false);
+    });
+
+    // Now resolve the first (stale) fetch — its result should be discarded
+    resolveFirst(111n);
+    await vi.runAllTimersAsync();
+
+    // The newer fetch result (999n) should be preserved
+    expect(result.current.balance).toBe(999n);
+  });
+
+  it('sets error state when fetch fails', async () => {
+    mockGetContractBalance.mockRejectedValue(new Error('Network error'));
+
+    const { result } = renderHook(() => useBridgeStats());
+
+    await waitFor(() => {
+      expect(result.current.loading).toBe(false);
+    });
+
+    expect(result.current.error).toBe('Network error');
+    expect(result.current.balance).toBeNull();
+  });
+
+  it('dispatches bridge_stats_telemetry events', async () => {
+    const events: CustomEvent[] = [];
+    window.addEventListener('bridge_stats_telemetry', (e) => {
+      events.push(e as CustomEvent);
+    });
+
+    const { unmount } = renderHook(() => useBridgeStats());
+
+    await waitFor(() => {
+      expect(events.some((e) => e.detail?.event === 'bridge_stats_mounted')).toBe(true);
+    });
+
+    await waitFor(() => {
+      expect(events.some((e) => e.detail?.event === 'bridge_stats_fetch_success')).toBe(true);
+    });
+
+    unmount();
+    window.removeEventListener('bridge_stats_telemetry', (e) => {
+      events.push(e as CustomEvent);
+    });
+  });
+});

Dechat/dex_with_fiat_frontend/src/hooks/useBridgeStats.ts

@@ -37,6 +37,7 @@ export default function useBridgeStats(): BridgeStats {
   const [fetchCount, setFetchCount] = useState(0);
   const [lastFetchedAt, setLastFetchedAt] = useState<Date | null>(null);
   const isMountedRef = useRef(true);
+  const fetchIdRef = useRef(0);
 
   useEffect(() => {
     isMountedRef.current = true;
@@ -48,6 +49,7 @@ export default function useBridgeStats(): BridgeStats {
 
   const refetchStats = useCallback(async () => {
     if (!isMountedRef.current) return;
+    const fetchId = ++fetchIdRef.current;
     setLoading(true);
     setError(null);
     try {
@@ -56,20 +58,20 @@ export default function useBridgeStats(): BridgeStats {
         getBridgeLimit(),
         getTotalDeposited(),
       ]);
-      if (!isMountedRef.current) return;
+      if (!isMountedRef.current || fetchId !== fetchIdRef.current) return;
       setBalance(b);
       setLimit(l);
       setTotalDeposited(t);
       setFetchCount((c) => c + 1);
       setLastFetchedAt(new Date());
       dispatchTelemetry('bridge_stats_fetch_success', { balance: b, limit: l });
     } catch (err) {
-      if (!isMountedRef.current) return;
+      if (!isMountedRef.current || fetchId !== fetchIdRef.current) return;
       const msg = err instanceof Error ? err.message : String(err);
       setError(msg);
       dispatchTelemetry('bridge_stats_fetch_error', { error: msg });
     } finally {
-      if (isMountedRef.current) setLoading(false);
+      if (isMountedRef.current && fetchId === fetchIdRef.current) setLoading(false);
     }
   }, []);
 

Dechat/dex_with_fiat_frontend/src/hooks/useChatPagination.test.ts

@@ -57,4 +57,40 @@ describe('useChatPagination', () => {
     expect(result.current.visibleMessages).toHaveLength(10);
     expect(result.current.hasMore).toBe(false);
   });
+
+  it('does not update state after unmount when setTimeout fires', () => {
+    const messages = createMessages(50);
+    const { result, unmount } = renderHook(() => useChatPagination(messages, 20));
+
+    act(() => {
+      result.current.loadMore();
+    });
+
+    // Unmount before the 400ms timer fires
+    unmount();
+
+    // Advancing the timer should not throw or warn about state updates on unmounted component
+    expect(() => {
+      act(() => {
+        vi.advanceTimersByTime(500);
+      });
+    }).not.toThrow();
+  });
+
+  it('isLoadingMore resets to false after loadMore completes', () => {
+    const messages = createMessages(50);
+    const { result } = renderHook(() => useChatPagination(messages, 20));
+
+    act(() => {
+      result.current.loadMore();
+    });
+
+    expect(result.current.isLoadingMore).toBe(true);
+
+    act(() => {
+      vi.advanceTimersByTime(400);
+    });
+
+    expect(result.current.isLoadingMore).toBe(false);
+  });
 });