Merge branch 'main' into feat/accessible-color-contrast

Author: Litezy

README.md

@@ -103,6 +103,8 @@ DEX-CHAT converts crypto to fiat through an AI-guided conversation flow. The end
 
 The user connects their Freighter wallet and tells the AI assistant they want to offramp a token amount. The frontend builds a Soroban `deposit` transaction that transfers the specified token from the user's Stellar account into the `FiatBridge` contract. The contract validates the deposit against oracle-sourced prices, enforces slippage limits, checks per-token and daily deposit caps, and records a `Receipt` with a unique memo hash.
 
+For maintainers: how slippage BPS and the on-chain threshold interact is documented in [docs/slippage-threshold.md](docs/slippage-threshold.md).
+
 ### 2. Escrow (on-chain hold)
 
 Deposited funds are held in the smart contract's escrow. A withdrawal request is queued with a risk tier that determines the timelock duration — higher-value or higher-risk withdrawals wait longer before they can be executed. During this period the admin dashboard provides real-time metrics (queue depth, oldest request age, accrued fees) so operators can monitor the pipeline.

dex_with_fiat_frontend/src/app/admin/__tests__/page.test.tsx

@@ -99,4 +99,40 @@ describe('AdminDashboard - Dark Mode Support', () => {
     const loadingText = screen.getByText('Loading metrics...');
     expect(loadingText.className).toContain('theme-text-muted');
   });
+
+  it('includes proper ARIA accessibility labels', async () => {
+    render(<AdminDashboard />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Admin Dashboard')).toBeInTheDocument();
+    });
+
+    // Check chart has ARIA label
+    const chartContainer = screen.getByRole('img', { name: /transaction volume chart/i });
+    expect(chartContainer).toBeInTheDocument();
+
+    // Check volume display has ARIA label
+    const volumeDisplay = screen.getByLabelText(/30-day transaction volume/i);
+    expect(volumeDisplay).toBeInTheDocument();
+
+    // Check export button has ARIA label
+    const exportButton = screen.getByRole('button', { name: /export audit log to csv file/i });
+    expect(exportButton).toBeInTheDocument();
+
+    // Check table has ARIA label
+    const auditTable = screen.getByRole('table', { name: /admin audit log entries/i });
+    expect(auditTable).toBeInTheDocument();
+
+    // Check pagination buttons have ARIA labels
+    const prevButton = screen.getByRole('button', { name: /go to previous page/i });
+    const nextButton = screen.getByRole('button', { name: /go to next page/i });
+    expect(prevButton).toBeInTheDocument();
+    expect(nextButton).toBeInTheDocument();
+
+    // Check table headers have scope
+    const headers = screen.getAllByRole('columnheader');
+    headers.forEach(header => {
+      expect(header).toHaveAttribute('scope', 'col');
+    });
+  });
 });

dex_with_fiat_frontend/src/app/admin/page.tsx

@@ -347,12 +347,13 @@ export default function AdminDashboard() {
               <h2 className="text-xl font-semibold theme-text-primary mb-6">
                 Daily Transaction Volume
               </h2>
-              <div className="h-80 w-full relative">
+              <div className="h-80 w-full relative" role="img" aria-label="Transaction volume chart showing volume over time in XLM">
                 {maxVolume > 0 ? (
                   <ResponsiveContainer width="100%" height="100%">
                     <AreaChart
                       data={metrics}
                       margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
+                      aria-hidden="true"
                     >
                       <defs>
                         <linearGradient
@@ -448,7 +449,7 @@ export default function AdminDashboard() {
               <h2 className="text-lg font-medium theme-text-secondary mb-2">
                 30-Day Volume (XLM)
               </h2>
-              <div className="text-4xl font-bold theme-text-primary">
+              <div className="text-4xl font-bold theme-text-primary" aria-label={`30-day transaction volume: ${totalVolume.toLocaleString(undefined, { maximumFractionDigits: 2 })} XLM`}>
                 {totalVolume.toLocaleString(undefined, {
                   maximumFractionDigits: 2,
                 })}
@@ -503,6 +504,8 @@ export default function AdminDashboard() {
                       backgroundColor: 'var(--color-success)',
                       color: '#fff',
                     }}
+                    aria-label={exportingCsv ? 'Exporting audit log to CSV file' : 'Export audit log to CSV file'}
+                    aria-describedby="audit-action-filter"
                   >
                     {exportingCsv ? 'Exporting...' : 'Export CSV'}
                   </button>
@@ -523,22 +526,22 @@ export default function AdminDashboard() {
             )}
 
             <div className="overflow-x-auto">
-              <table className="min-w-full">
+              <table className="min-w-full" role="table" aria-label="Admin audit log entries">
                 <thead className="theme-surface-muted">
                   <tr>
-                    <th className="px-6 py-3 text-left text-xs font-semibold theme-text-secondary uppercase tracking-wider">
+                    <th className="px-6 py-3 text-left text-xs font-semibold theme-text-secondary uppercase tracking-wider" scope="col">
                       Timestamp
                     </th>
-                    <th className="px-6 py-3 text-left text-xs font-semibold theme-text-secondary uppercase tracking-wider">
+                    <th className="px-6 py-3 text-left text-xs font-semibold theme-text-secondary uppercase tracking-wider" scope="col">
                       Action
                     </th>
-                    <th className="px-6 py-3 text-left text-xs font-semibold theme-text-secondary uppercase tracking-wider">
+                    <th className="px-6 py-3 text-left text-xs font-semibold theme-text-secondary uppercase tracking-wider" scope="col">
                       Admin Address
                     </th>
-                    <th className="px-6 py-3 text-left text-xs font-semibold theme-text-secondary uppercase tracking-wider">
+                    <th className="px-6 py-3 text-left text-xs font-semibold theme-text-secondary uppercase tracking-wider" scope="col">
                       Parameters
                     </th>
-                    <th className="px-6 py-3 text-left text-xs font-semibold theme-text-secondary uppercase tracking-wider">
+                    <th className="px-6 py-3 text-left text-xs font-semibold theme-text-secondary uppercase tracking-wider" scope="col">
                       Result
                     </th>
                   </tr>
@@ -612,10 +615,11 @@ export default function AdminDashboard() {
                   }
                   disabled={auditPage <= 1 || auditLoading}
                   className="px-3 py-2 text-sm theme-border border rounded-md theme-text-primary theme-surface-muted hover:opacity-80 disabled:opacity-50 disabled:cursor-not-allowed"
+                  aria-label={`Go to previous page. Current page is ${auditPage} of ${auditTotalPages}`}
                 >
                   Previous
                 </button>
-                <span className="text-sm theme-text-secondary">
+                <span className="text-sm theme-text-secondary" aria-live="polite" aria-atomic="true">
                   Page {auditPage} of {auditTotalPages}
                 </span>
                 <button
@@ -627,6 +631,7 @@ export default function AdminDashboard() {
                   }
                   disabled={auditPage >= auditTotalPages || auditLoading}
                   className="px-3 py-2 text-sm theme-border border rounded-md theme-text-primary theme-surface-muted hover:opacity-80 disabled:opacity-50 disabled:cursor-not-allowed"
+                  aria-label={`Go to next page. Current page is ${auditPage} of ${auditTotalPages}`}
                 >
                   Next
                 </button>

dex_with_fiat_frontend/src/components/AuditTable.test.tsx

@@ -0,0 +1,87 @@
+import '@testing-library/jest-dom/vitest';
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { render, screen, waitFor, fireEvent } from '@testing-library/react';
+import AuditTable from './AuditTable';
+
+describe('AuditTable', () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('does not apply stale fetch results after a newer request (abort)', async () => {
+    vi.stubGlobal(
+      'fetch',
+      vi.fn((url: string | URL, init?: RequestInit) => {
+        const u = typeof url === 'string' ? url : url.toString();
+        const signal = init?.signal;
+        const isDeposit = u.includes('actionType=deposit');
+
+        return new Promise<Response>((resolve, reject) => {
+          const delayMs = isDeposit ? 200 : 0;
+          const t = setTimeout(() => {
+            if (signal?.aborted) {
+              reject(new DOMException('Aborted', 'AbortError'));
+              return;
+            }
+            resolve({
+              ok: true,
+              status: 200,
+              json: async () => ({
+                entries: isDeposit
+                  ? [
+                      {
+                        id: 'stale',
+                        timestamp: new Date().toISOString(),
+                        adminAddress:
+                          'GAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAWHF',
+                        actionType: 'deposit',
+                        actionDescription: 'stale-row',
+                        txHash: 'abc',
+                        status: 'success',
+                      },
+                    ]
+                  : [
+                      {
+                        id: 'fresh',
+                        timestamp: new Date().toISOString(),
+                        adminAddress:
+                          'GAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAWHF',
+                        actionType: 'payout',
+                        actionDescription: 'fresh-row',
+                        txHash: 'def',
+                        status: 'success',
+                      },
+                    ],
+                total: 1,
+              }),
+            } as Response);
+          }, delayMs);
+
+          signal?.addEventListener('abort', () => {
+            clearTimeout(t);
+            reject(new DOMException('Aborted', 'AbortError'));
+          });
+        });
+      }),
+    );
+
+    render(<AuditTable />);
+
+    await waitFor(() => {
+      expect(screen.getByText('fresh-row')).toBeInTheDocument();
+    });
+
+    const actionSelect = screen.getAllByRole('combobox')[0];
+    fireEvent.change(actionSelect, { target: { value: 'deposit' } });
+    fireEvent.change(actionSelect, { target: { value: '' } });
+
+    await waitFor(
+      () => {
+        expect(screen.getByText('fresh-row')).toBeInTheDocument();
+      },
+      { timeout: 4000 },
+    );
+
+    expect(screen.queryByText('stale-row')).not.toBeInTheDocument();
+  });
+});

dex_with_fiat_frontend/src/components/AuditTable.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useRef } from 'react';
 import { AuditEntry } from '@/types';
 
 interface AuditTableProps {
@@ -32,8 +32,14 @@ export default function AuditTable({}: AuditTableProps) {
   });
 
   const pageSize = 20;
+  const fetchAbortRef = useRef<AbortController | null>(null);
 
   const fetchAuditEntries = useCallback(async () => {
+    fetchAbortRef.current?.abort();
+    const controller = new AbortController();
+    fetchAbortRef.current = controller;
+    const { signal } = controller;
+
     setLoading(true);
     setError(null);
 
@@ -50,7 +56,9 @@ export default function AuditTable({}: AuditTableProps) {
       params.append('limit', pageSize.toString());
       params.append('offset', (currentPage * pageSize).toString());
 
-      const response = await fetch(`/api/admin-audit?${params.toString()}`);
+      const response = await fetch(`/api/admin-audit?${params.toString()}`, {
+        signal,
+      });
 
       if (!response.ok) {
         throw new Error(`API error: ${response.statusText}`);
@@ -63,15 +71,23 @@ export default function AuditTable({}: AuditTableProps) {
       })));
       setTotalEntries(data.total);
     } catch (err) {
+      if (err instanceof DOMException && err.name === 'AbortError') {
+        return;
+      }
       setError(err instanceof Error ? err.message : 'Failed to fetch audit entries');
       console.error('Audit fetch error:', err);
     } finally {
-      setLoading(false);
+      if (!signal.aborted) {
+        setLoading(false);
+      }
     }
   }, [filters, currentPage]);
 
   useEffect(() => {
-    fetchAuditEntries();
+    void fetchAuditEntries();
+    return () => {
+      fetchAbortRef.current?.abort();
+    };
   }, [fetchAuditEntries]);
 
   const handleFilterChange = (key: keyof FilterState, value: string) => {

dex_with_fiat_frontend/src/components/BankDetailsModal.tsx

@@ -30,6 +30,7 @@ import CopyButton from '@/components/ui/CopyButton';
 import { useAccessibleModal } from '@/hooks/useAccessibleModal';
 import { useIdempotentAction } from '@/hooks/useIdempotentAction';
 import { getOrCreateClientSessionId } from '@/lib/clientSession';
+import { chatTelemetry } from '@/lib/chatTelemetry';
 
 interface Bank {
   id: number;
@@ -140,6 +141,19 @@ export default function BankDetailsModal({
     ]);
   };
 
+  const wasOpenRef = useRef(false);
+  useEffect(() => {
+    if (isOpen && !wasOpenRef.current) {
+      chatTelemetry.fiatPayoutStep({ action: 'open', step: 1, xlmAmount });
+    }
+    wasOpenRef.current = isOpen;
+  }, [isOpen, xlmAmount]);
+
+  useEffect(() => {
+    if (!isOpen) return;
+    chatTelemetry.fiatPayoutStep({ action: 'step_change', step, xlmAmount });
+  }, [step, isOpen, xlmAmount]);
+
   // Fetch banks when modal opens
   useEffect(() => {
     if (!isOpen) return;
@@ -245,11 +259,28 @@ export default function BankDetailsModal({
       } = await res.json();
       if (json.success) {
         setVerifiedAccount(json.data);
+        chatTelemetry.fiatPayoutStep({
+          action: 'account_verify_success',
+          step: 2,
+          xlmAmount,
+        });
       } else {
         setVerifyError(json.message ?? 'Account verification failed');
+        chatTelemetry.fiatPayoutStep({
+          action: 'account_verify_fail',
+          step: 2,
+          xlmAmount,
+          errorMessage: json.message ?? 'Account verification failed',
+        });
       }
     } catch {
       setVerifyError('Account verification failed. Please try again.');
+      chatTelemetry.fiatPayoutStep({
+        action: 'account_verify_fail',
+        step: 2,
+        xlmAmount,
+        errorMessage: 'network_error',
+      });
     } finally {
       setVerifying(false);
     }
@@ -266,6 +297,11 @@ export default function BankDetailsModal({
       return;
 
     await executePayoutConfirm(async (idempotencyKey) => {
+      chatTelemetry.fiatPayoutStep({
+        action: 'confirm_attempt',
+        step: 3,
+        xlmAmount,
+      });
       setPayoutLoading(true);
       setPayoutError('');
       setStatusEvents([]);
@@ -355,6 +391,11 @@ export default function BankDetailsModal({
         setIsPollingStatus(false);
         pushStatusEvent('success', 'Bank transfer confirmed');
         setStep(4);
+        chatTelemetry.fiatPayoutStep({
+          action: 'confirm_success',
+          step: 4,
+          xlmAmount,
+        });
         addNotification(
           'payout_success',
           'Fiat payout successfully completed!',
@@ -364,6 +405,12 @@ export default function BankDetailsModal({
           err instanceof Error
             ? err.message
             : 'Payout failed. Please try again.';
+        chatTelemetry.fiatPayoutStep({
+          action: 'confirm_error',
+          step: 3,
+          xlmAmount,
+          errorMessage: errorMsg,
+        });
         setPayoutError(errorMsg);
         setIsPollingStatus(false);
         pushStatusEvent('failed', `Transfer failed: ${errorMsg}`);
@@ -375,6 +422,7 @@ export default function BankDetailsModal({
   };
 
   const handleClose = () => {
+    chatTelemetry.fiatPayoutStep({ action: 'close', step, xlmAmount });
     // Reset all state before closing
     setStep(1);
     setBanks([]);
@@ -626,7 +674,15 @@ export default function BankDetailsModal({
                       <button
                         key={bank.id}
                         type="button"
-                        onClick={() => setSelectedBank(bank)}
+                        onClick={() => {
+                          setSelectedBank(bank);
+                          chatTelemetry.fiatPayoutStep({
+                            action: 'bank_selected',
+                            step: 1,
+                            xlmAmount,
+                            bankCode: bank.code,
+                          });
+                        }}
                         className={`w-full text-left px-3 py-2 rounded-lg text-sm transition-colors ${
                           selectedBank?.id === bank.id
                             ? 'bg-blue-600 text-white'