Merge pull request #1055 from Samuel1505/memo

Pull Request: Frontend Bug Fixes — Memory Leaks, CSV Export, WebSocket Reconnect, Search Debounce

Author: leojay-net

Dechat/dex_with_fiat_frontend/src/components/AuditTable.tsx

@@ -40,6 +40,7 @@ export default function AuditTable({}: AuditTableProps) {
     endDate: '',
   });
   const [retryQueueCount, setRetryQueueCount] = useState(0);
+  const [isExporting, setIsExporting] = useState(false);
 
   const pageSize = 20;
   const fetchAbortRef = useRef<AbortController | null>(null);
@@ -149,6 +150,76 @@ export default function AuditTable({}: AuditTableProps) {
     wasOnlineRef.current = isOnline;
   }, [isOnline, wasOffline, addToast, resetWasOffline, fetchAuditEntries]);
 
+  const handleExportCSV = useCallback(async () => {
+    setIsExporting(true);
+    try {
+      const params = new URLSearchParams();
+      if (filters.actionType) params.append('actionType', filters.actionType);
+      if (filters.status) params.append('status', filters.status);
+      if (filters.adminAddress) params.append('adminAddress', filters.adminAddress);
+      if (filters.txHash) params.append('txHash', filters.txHash);
+      if (filters.startDate) params.append('startDate', filters.startDate);
+      if (filters.endDate) params.append('endDate', filters.endDate);
+      params.append('limit', '10000');
+      params.append('offset', '0');
+      params.append('sortKey', sortKey);
+      params.append('sortOrder', sortOrder);
+
+      const response = await fetch(`/api/admin-audit?${params.toString()}`);
+      if (!response.ok) throw new Error(`Export failed: ${response.statusText}`);
+      const data = await response.json() as { entries: AuditEntry[]; total: number };
+
+      const CHUNK_SIZE = 500;
+      const csvRows: string[] = [
+        ['Timestamp', 'Admin Address', 'Action Type', 'Description', 'TX Hash', 'Status'].join(','),
+      ];
+
+      const processChunk = (start: number): Promise<void> =>
+        new Promise((resolve) => {
+          setTimeout(() => {
+            const end = Math.min(start + CHUNK_SIZE, data.entries.length);
+            for (let i = start; i < end; i++) {
+              const e = data.entries[i];
+              csvRows.push([
+                `"${formatTimestamp(new Date(e.timestamp))}"`,
+                `"${e.adminAddress}"`,
+                `"${getActionTypeDisplay(e.actionType)}"`,
+                `"${(e.actionDescription ?? '').replace(/"/g, '""')}"`,
+                `"${e.txHash ?? ''}"`,
+                `"${e.status}"`,
+              ].join(','));
+            }
+            resolve();
+          }, 0);
+        });
+
+      for (let i = 0; i < data.entries.length; i += CHUNK_SIZE) {
+        await processChunk(i);
+      }
+
+      const dateLabel =
+        filters.startDate && filters.endDate
+          ? `${filters.startDate}_to_${filters.endDate}`
+          : filters.startDate
+            ? `from_${filters.startDate}`
+            : filters.endDate
+              ? `to_${filters.endDate}`
+              : new Date().toISOString().slice(0, 10);
+
+      const blob = new Blob([csvRows.join('\n')], { type: 'text/csv;charset=utf-8;' });
+      const url = URL.createObjectURL(blob);
+      const link = document.createElement('a');
+      link.href = url;
+      link.download = `audit-log_${dateLabel}.csv`;
+      link.click();
+      URL.revokeObjectURL(url);
+    } catch (err) {
+      console.error('CSV export error:', err);
+    } finally {
+      setIsExporting(false);
+    }
+  }, [filters, sortKey, sortOrder]);
+
   const handleFilterChange = (key: keyof FilterState, value: string) => {
     setFilters((prev) => ({ ...prev, [key]: value }));
     setCurrentPage(0); // Reset to first page when filtering
@@ -389,6 +460,14 @@ export default function AuditTable({}: AuditTableProps) {
           >
             {loading ? 'Loading...' : 'Refresh'}
           </button>
+          <button
+            onClick={handleExportCSV}
+            disabled={isExporting || loading}
+            className="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 disabled:opacity-50 font-medium"
+            aria-label="Export filtered audit entries as CSV"
+          >
+            {isExporting ? 'Exporting…' : 'Export CSV'}
+          </button>
         </div>
       </div>
 

Dechat/dex_with_fiat_frontend/src/components/PriceTicker.tsx

@@ -18,7 +18,12 @@ export default function PriceTicker({
   const [prices, setPrices] = useState<TickerData>({});
   const [error, setError] = useState(false);
   const [isLoading, setIsLoading] = useState(true);
+  const [isStale, setIsStale] = useState(false);
   const refreshTimeoutRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const retryTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const retryCountRef = useRef(0);
+  const hasPreviousDataRef = useRef(false);
+  const fetchPricesRef = useRef<(() => Promise<void>) | null>(null);
   const isMounted = useRef(true);
   const kbHelpId = useId();
 
@@ -56,42 +61,65 @@ export default function PriceTicker({
     return `${change >= 0 ? '+' : ''}${formatted}%`;
   };
 
-  // Fetch prices
+  // Fetch prices with exponential backoff retry on failure
   const fetchPrices = useCallback(async () => {
+    if (retryTimeoutRef.current) {
+      clearTimeout(retryTimeoutRef.current);
+      retryTimeoutRef.current = null;
+    }
+
     try {
       if (isMounted.current) setError(false);
       const newPrices = await fetchTickerData(symbols, currency);
-
       if (!isMounted.current) return;
 
-      if (Object.keys(newPrices).length === 0) {
-        setError(true);
-      } else {
+      if (Object.keys(newPrices).length > 0) {
         setPrices(newPrices);
+        hasPreviousDataRef.current = true;
+        setIsStale(false);
+        retryCountRef.current = 0;
+      } else {
+        setError(true);
+        if (hasPreviousDataRef.current) setIsStale(true);
+        const delay = Math.min(1000 * Math.pow(2, retryCountRef.current), 30000);
+        retryCountRef.current++;
+        retryTimeoutRef.current = setTimeout(() => {
+          if (isMounted.current && fetchPricesRef.current) void fetchPricesRef.current();
+        }, delay);
       }
     } catch (err) {
       console.error('Failed to fetch ticker data:', err);
-      if (isMounted.current) setError(true);
+      if (!isMounted.current) return;
+      setError(true);
+      if (hasPreviousDataRef.current) setIsStale(true);
+      const delay = Math.min(1000 * Math.pow(2, retryCountRef.current), 30000);
+      retryCountRef.current++;
+      retryTimeoutRef.current = setTimeout(() => {
+        if (isMounted.current && fetchPricesRef.current) void fetchPricesRef.current();
+      }, delay);
     } finally {
       if (isMounted.current) setIsLoading(false);
     }
   }, [symbols, currency]);
 
+  // Keep ref in sync so retry timeouts always call the latest version
+  useEffect(() => {
+    fetchPricesRef.current = fetchPrices;
+  }, [fetchPrices]);
+
   // Initial fetch and setup refresh interval
   useEffect(() => {
-    fetchPrices();
+    void fetchPrices();
 
-    // Setup auto-refresh
     refreshTimeoutRef.current = setInterval(() => {
       if (isMounted.current) {
         void fetchPrices();
       }
     }, refreshInterval);
 
     return () => {
-      if (refreshTimeoutRef.current) {
-        clearInterval(refreshTimeoutRef.current);
-      }
+      if (refreshTimeoutRef.current) clearInterval(refreshTimeoutRef.current);
+      if (retryTimeoutRef.current) clearTimeout(retryTimeoutRef.current);
     };
   }, [fetchPrices, refreshInterval]);
 
@@ -167,9 +195,9 @@ export default function PriceTicker({
         </h3>
         <div
           className={`w-2 h-2 rounded-full transition-colors duration-300 ${
-            error ? 'bg-red-500' : 'bg-green-500'
+            isStale ? 'bg-yellow-400' : error ? 'bg-red-500' : 'bg-green-500'
           }`}
-          aria-hidden
+          aria-label={isStale ? 'Stale data — reconnecting' : error ? 'Data unavailable' : 'Live'}
         />
       </div>
 
@@ -284,7 +312,12 @@ export default function PriceTicker({
         </div>
       )}
 
-      {error && Object.keys(prices).length > 0 && (
+      {isStale && (
+        <p className="text-yellow-500 dark:text-yellow-400 text-[10px] mt-2 text-center" aria-live="polite">
+          Prices may be stale — retrying&hellip;
+        </p>
+      )}
+      {error && !isStale && Object.keys(prices).length > 0 && (
         <p className="theme-text-secondary text-[10px] mt-2 text-center opacity-60">
           Last updated • Focus this panel and press R to refresh
         </p>

Dechat/dex_with_fiat_frontend/src/hooks/useBridgeStats.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import {
   clearCache,
   getContractBalance,
@@ -22,8 +22,17 @@ export default function useBridgeStats(): BridgeStats {
   const [totalDeposited, setTotalDeposited] = useState<bigint | null>(null);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const isMountedRef = useRef(true);
+
+  useEffect(() => {
+    isMountedRef.current = true;
+    return () => {
+      isMountedRef.current = false;
+    };
+  }, []);
 
   const refetchStats = useCallback(async () => {
+    if (!isMountedRef.current) return;
     setLoading(true);
     setError(null);
     try {
@@ -32,13 +41,15 @@ export default function useBridgeStats(): BridgeStats {
         getBridgeLimit(),
         getTotalDeposited(),
       ]);
+      if (!isMountedRef.current) return;
       setBalance(b);
       setLimit(l);
       setTotalDeposited(t);
     } catch (err) {
+      if (!isMountedRef.current) return;
       setError(err instanceof Error ? err.message : String(err));
     } finally {
-      setLoading(false);
+      if (isMountedRef.current) setLoading(false);
     }
   }, []);
 

Dechat/dex_with_fiat_frontend/src/hooks/useChatHistory.ts

@@ -12,6 +12,8 @@ export const useChatHistory = () => {
     sessions: [],
   });
   const [isHistoryOpen, setIsHistoryOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [searchResults, setSearchResults] = useState<ChatSession[]>([]);
 
   // Load history from localStorage on mount
   useEffect(() => {
@@ -30,6 +32,20 @@ export const useChatHistory = () => {
     }
   }, [historyState]);
 
+  // Debounced search — avoids triggering a lookup on every keystroke
+  useEffect(() => {
+    if (!searchQuery.trim()) {
+      setSearchResults([]);
+      return;
+    }
+    const timeoutId = setTimeout(() => {
+      setSearchResults(
+        ChatHistoryManager.searchSessions(historyState.sessions, searchQuery),
+      );
+    }, 300);
+    return () => clearTimeout(timeoutId);
+  }, [searchQuery, historyState.sessions]);
+
   const createNewSession = useCallback(
     (initialMessages: ChatMessage[] = []): string => {
       const newSession = ChatHistoryManager.createNewSession(
@@ -256,5 +272,10 @@ export const useChatHistory = () => {
 
     // Utils
     hasHistory: historyState.sessions.length > 0,
+
+    // Debounced search
+    searchQuery,
+    setSearchQuery,
+    searchResults,
   };
 };