Merge pull request #423 from JSE19/main

Author: therealjhay

components/shared/PageTransition.tsx

@@ -11,10 +11,10 @@ export function PageTransition({ children }: { children: React.ReactNode }) {
     <AnimatePresence mode="wait">
       <motion.div
         key={pathname}
-        initial={prefersReducedMotion ? {} : { opacity: 0, y: 4 }}
+        initial={prefersReducedMotion ? {} : { opacity: 0, y: 3 }}
         animate={{ opacity: 1, y: 0 }}
-        exit={prefersReducedMotion ? {} : { opacity: 0, y: -4 }}
-        transition={{ duration: prefersReducedMotion ? 0 : 0.2, ease: "easeInOut" }}
+        exit={prefersReducedMotion ? {} : { opacity: 0, y: -3 }}
+        transition={{ duration: prefersReducedMotion ? 0 : 0.12, ease: "easeOut" }}
       >
         {children}
       </motion.div>

lib/api/axios.ts

@@ -10,6 +10,16 @@ import { getAppRouter } from '../navigation/appRouter';
 // Deduplication: avoid showing multiple toasts for simultaneous errors
 const recentErrors = new Map<string, number>();
 const ERROR_DEDUP_WINDOW_MS = 3000;
+let pendingErrorBatch: {
+  count: number;
+  message?: string;
+  timer: ReturnType<typeof setTimeout> | null;
+} | null = null;
+
+function showErrorToast(message: string) {
+  toast.error(message, { duration: 5000 });
+  announce(message);
+}
 
 function notifyError(message: string, key?: string) {
   const dedupKey = key || message;
@@ -21,8 +31,25 @@ function notifyError(message: string, key?: string) {
   }
 
   recentErrors.set(dedupKey, now);
-  toast.error(message, { duration: 5000 });
-  announce(message);
+
+  if (pendingErrorBatch) {
+    pendingErrorBatch.count += 1;
+    return;
+  }
+
+  pendingErrorBatch = {
+    count: 1,
+    message,
+    timer: setTimeout(() => {
+      if (!pendingErrorBatch) {
+        return;
+      }
+
+      const summaryMessage = pendingErrorBatch.count > 1 ? 'Multiple errors occurred' : pendingErrorBatch.message || message;
+      showErrorToast(summaryMessage);
+      pendingErrorBatch = null;
+    }, 150),
+  };
 
   // Clean up old entries
   if (recentErrors.size > 50) {
@@ -164,15 +191,16 @@ apiClient.interceptors.response.use(
     if (error.response?.status === 429) {
       const retryAfter = error.response?.headers?.['retry-after'];
       const seconds = parseInt(String(retryAfter), 10) || 30;
-      const endpoint = originalRequest?.url || error.config?.url;
+      const endpoint = originalRequest?.url || error.config?.url || 'unknown';
       const rawLimit = error.response?.headers?.['x-ratelimit-limit'] || error.response?.headers?.['X-RateLimit-Limit'];
       const limit = rawLimit ? parseInt(String(rawLimit), 10) : undefined;
       useRateLimitStore.getState().setRateLimited(seconds, endpoint, limit);
-      notifyError(`Too many attempts. Please try again in ${seconds} seconds.`);
+      notifyError(`Too many attempts. Please try again in ${seconds} seconds.`, `429_${endpoint}`);
     } else if (!error.response) {
       notifyError('Network error. Please check your connection.', 'network_error');
     } else if (error.response?.status >= 500) {
-      notifyError('A server error occurred. Please try again later.', `5xx_${error.response.status}`);
+      const endpoint = originalRequest?.url || error.config?.url || 'unknown';
+      notifyError('A server error occurred. Please try again later.', `5xx_${error.response.status}_${endpoint}`);
     }
 
     return Promise.reject(parseApiError(error));

lib/mock/README.md

@@ -0,0 +1,37 @@
+# Mock Data Notes
+
+These files in this directory are mock API responses used to support UI development and local testing.
+
+## What this directory is for
+
+- The files under this folder simulate backend data for dashboard, transactions, settlements, wallet, payment links, FX, and developer-related views.
+- They are intended for frontend development when the real API is unavailable, slow, or not yet wired up.
+- Mock data should help contributors build and review UI flows without requiring a live backend.
+
+## When to use the mocks
+
+Use these mocks as a fallback when:
+
+- the backend service is down or unreachable,
+- a feature is being built before API integration is ready,
+- you need predictable sample data for demos, screenshots, or local testing.
+
+## How to add new mock data
+
+1. Create a new file in this directory with a descriptive name, for example `orders.ts`.
+2. Export one or more data objects or arrays that match the shape expected by the UI.
+3. Keep the data realistic and consistent with the existing mock style.
+4. Import the new mock from the relevant feature module or fallback layer.
+
+## Contract for replacing mocks with real API data
+
+When the backend becomes available, the UI should be able to swap from mock data to real API data without changing the feature contract.
+
+Follow these rules:
+
+- Keep the same data shape and field names expected by the component.
+- Preserve the same response structure used by the UI layer (for example, arrays, objects, pagination fields, and status values).
+- Treat the mock as a temporary stand-in, not as the final source of truth.
+- Replace the mock import or fallback logic with the real API fetch/update flow once the backend contract is confirmed.
+
+In short, mocks should be easy to recognize, easy to replace, and easy to evolve into real API integrations.

lib/utils/retry.ts

@@ -1,10 +1,17 @@
+import { ApiError } from './apiError';
+
 export interface RetryOptions {
   maxRetries?: number;
   baseDelay?: number;
   maxDelay?: number;
   onRetry?: (error: unknown, attempt: number) => void;
+  isRetryable?: (error: unknown) => boolean;
 }
 
+const defaultIsRetryable = (error: unknown): boolean => {
+  return error instanceof ApiError && (error.status ?? 0) >= 500;
+};
+
 export async function retryWithBackoff<T>(
   fn: () => Promise<T>,
   options?: RetryOptions,
@@ -14,6 +21,7 @@ export async function retryWithBackoff<T>(
     baseDelay = 1000,
     maxDelay = 30000,
     onRetry,
+    isRetryable = defaultIsRetryable,
   } = options || {};
 
   let attempt = 0;
@@ -22,6 +30,10 @@ export async function retryWithBackoff<T>(
     try {
       return await fn();
     } catch (error) {
+      if (!isRetryable(error)) {
+        throw error;
+      }
+
       attempt++;
 
       if (attempt > maxRetries) {

pnpm-lock.yaml

@@ -0,0 +1,3 @@
+allowBuilds:
+  core-js: set this to true or false
+  unrs-resolver: set this to true or false