Merge pull request #1677 from floraispretty/feature/fe-implement-optimistic-state-rollback-with-toast-feedback-upon-network-failure-in-activity-feed-component

[Frontend] Implement optimistic state rollback with toast feedback upon network failure in Activity Feed Component

Author: emdevelopa

frontend/src/components/ActivityFeed.tsx

@@ -1,8 +1,9 @@
 "use client";
 
-import { useEffect, useState, useCallback, useMemo, memo } from "react";
+import { useEffect, useState, useCallback, useMemo, memo, useRef } from "react";
 import Link from "next/link";
 import { useLocale } from "next-intl";
+import { toast, Toaster } from "sonner";
 import {
   useHydrateMerchantStore,
   useMerchantApiKey,
@@ -19,6 +20,7 @@ interface Payment {
   status: string;
   description: string | null;
   created_at: string;
+  isOptimistic?: boolean;
 }
 
 interface PaymentRowProps {
@@ -42,7 +44,7 @@ const PaymentRow = memo(function PaymentRow({
     () => formatAmount(payment.amount, locale, hideCents),
     [payment.amount, locale, hideCents],
   );
-  const rowClassName = `group cursor-pointer outline-none transition-all duration-200 ease-in-out hover:bg-pluto-50 hover:shadow-sm active:bg-pluto-100 active:scale-[0.985] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-pluto-500 ${index % 2 === 0 ? "bg-white" : "bg-[#F9F9F9]"}`;
+  const rowClassName = `group cursor-pointer outline-none transition-all duration-200 ease-in-out hover:bg-pluto-50 hover:shadow-sm active:bg-pluto-100 active:scale-[0.985] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-pluto-500 ${index % 2 === 0 ? "bg-white" : "bg-[#F9F9F9]"} ${payment.isOptimistic ? "animate-pulse" : ""}`;
   const statusClassName = `inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-[10px] font-bold uppercase tracking-tight ${
     payment.status === "confirmed"
       ? "bg-[#0A0A0A] text-white"
@@ -55,11 +57,14 @@ const PaymentRow = memo(function PaymentRow({
       role="row"
       tabIndex={0}
       className={rowClassName}
-      aria-label={`Payment ${payment.description || "Transaction"} for ${formattedAmount} ${payment.asset}`}
+      aria-label={`Payment ${payment.description || "Transaction"} for ${formattedAmount} ${payment.asset}${payment.isOptimistic ? " (Verifying)" : ""}`}
     >
       <td className="border-l-0 border-transparent px-6 py-4 transition-all duration-200 group-hover:border-l-2 group-hover:border-l-pluto-500">
-        <div className={statusClassName} aria-label={`Status: ${payment.status}`}>
+        <div className={statusClassName} aria-label={`Status: ${payment.status}${payment.isOptimistic ? " (Verifying)" : ""}`}>
           {payment.status}
+          {payment.isOptimistic && (
+            <span className="h-1 w-1 rounded-full bg-current animate-pulse" />
+          )}
         </div>
       </td>
       <td className="px-6 py-4">
@@ -88,6 +93,7 @@ export default function ActivityFeed() {
   const [payments, setPayments] = useState<Payment[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const verificationTimeouts = useRef<Map<string, NodeJS.Timeout>>(new Map());
 
   const apiKey = useMerchantApiKey();
   const hydrated = useMerchantHydrated();
@@ -97,6 +103,53 @@ export default function ActivityFeed() {
 
   useHydrateMerchantStore();
 
+  // Verify optimistic payment with backend
+  const verifyPayment = useCallback(
+    async (paymentId: string) => {
+      try {
+        if (!apiKey) return;
+
+        const apiUrl =
+          process.env.NEXT_PUBLIC_API_URL || "http://localhost:4000";
+        const response = await fetch(`${apiUrl}/api/payments/${paymentId}`, {
+          headers: { "x-api-key": apiKey },
+          signal: AbortSignal.timeout(5000), // 5s timeout
+        });
+
+        if (!response.ok) {
+          throw new Error("Verification failed");
+        }
+
+        const data = await response.json();
+
+        // Update payment to confirmed if verified
+        setPayments((prev) =>
+          prev.map((p) =>
+            p.id === paymentId
+              ? { ...p, status: data.status || "confirmed", isOptimistic: false }
+              : p,
+          ),
+        );
+      } catch (err) {
+        // Rollback on verification failure
+        setPayments((prev) => {
+          const payment = prev.find((p) => p.id === paymentId);
+          if (payment?.isOptimistic) {
+            toast.error("Payment verification failed", {
+              description: `${formatAmount(payment.amount, locale, hideCents)} ${payment.asset} - Network error, update rolled back`,
+              duration: 5000,
+            });
+            return prev.filter((p) => p.id !== paymentId);
+          }
+          return prev;
+        });
+      } finally {
+        verificationTimeouts.current.delete(paymentId);
+      }
+    },
+    [apiKey, locale, hideCents],
+  );
+
   const handleConfirmed = useCallback(
     (event: {
       id: string;
@@ -111,21 +164,39 @@ export default function ActivityFeed() {
 
         if (exists) {
           updatedList = prev.map((p) =>
-            p.id === event.id ? { ...p, status: "confirmed" } : p,
+            p.id === event.id ? { ...p, status: "confirmed", isOptimistic: false } : p,
           );
+          // Clear verification timeout if exists
+          const timeout = verificationTimeouts.current.get(event.id);
+          if (timeout) {
+            clearTimeout(timeout);
+            verificationTimeouts.current.delete(event.id);
+          }
         } else {
-          // Brand new payment arrived confirmed
-          updatedList = [
-            {
-              id: event.id,
-              amount: event.amount,
-              asset: event.asset,
-              status: "confirmed",
-              description: "Real-time payment",
-              created_at: event.confirmed_at,
-            },
-            ...prev,
-          ];
+          // Brand new payment arrived - add optimistically
+          const newPayment: Payment = {
+            id: event.id,
+            amount: event.amount,
+            asset: event.asset,
+            status: "confirmed",
+            description: "Real-time payment",
+            created_at: event.confirmed_at,
+            isOptimistic: true,
+          };
+
+          updatedList = [newPayment, ...prev];
+
+          // Schedule verification in 3 seconds
+          const timeout = setTimeout(() => {
+            verifyPayment(event.id);
+          }, 3000);
+          verificationTimeouts.current.set(event.id, timeout);
+
+          // Show optimistic toast
+          toast.success("New payment received", {
+            description: `${formatAmount(event.amount, locale, hideCents)} ${event.asset}`,
+            duration: 3000,
+          });
         }
 
         // Sort to ensure highest items are top
@@ -138,9 +209,17 @@ export default function ActivityFeed() {
           .slice(0, 10);
       });
     },
-    [],
+    [locale, hideCents, verifyPayment],
   );
 
+  // Cleanup verification timeouts on unmount
+  useEffect(() => {
+    return () => {
+      verificationTimeouts.current.forEach((timeout) => clearTimeout(timeout));
+      verificationTimeouts.current.clear();
+    };
+  }, []);
+
   usePaymentSocket(merchantId, handleConfirmed);
 
   useEffect(() => {
@@ -166,11 +245,26 @@ export default function ActivityFeed() {
 
         const data = await response.json();
         setPayments(data.payments ?? []);
+        setError(null);
       } catch (err) {
         if (err instanceof Error && err.name === "AbortError") return;
-        setError(
-          err instanceof Error ? err.message : "Failed to load activity",
-        );
+        const errorMessage =
+          err instanceof Error ? err.message : "Failed to load activity";
+        setError(errorMessage);
+
+        // Show toast for network failures
+        toast.error("Network error", {
+          description: errorMessage,
+          action: {
+            label: "Retry",
+            onClick: () => {
+              setLoading(true);
+              setError(null);
+              fetchPayments();
+            },
+          },
+          duration: 10000,
+        });
       } finally {
         setLoading(false);
       }
@@ -182,51 +276,62 @@ export default function ActivityFeed() {
 
   if (loading) {
     return (
-      <div className="space-y-4 animate-pulse">
-        {[...Array(3)].map((_, i) => (
-          <div key={i} className="h-14 w-full rounded-lg bg-[#F5F5F5] sm:h-16" />
-        ))}
-      </div>
+      <>
+        <Toaster position="top-right" richColors closeButton />
+        <div className="space-y-4 animate-pulse">
+          {[...Array(3)].map((_, i) => (
+            <div key={i} className="h-14 w-full rounded-lg bg-[#F5F5F5] sm:h-16" />
+          ))}
+        </div>
+      </>
     );
   }
 
   if (error) {
     return (
-      <div className="rounded-xl border border-red-500/30 p-4 text-red-400">
-        {error}
-      </div>
+      <>
+        <Toaster position="top-right" richColors closeButton />
+        <div className="rounded-xl border border-red-500/30 p-4 text-red-400">
+          {error}
+        </div>
+      </>
     );
   }
 
   if (payments.length === 0) {
     return (
-      <div className="flex flex-col items-center justify-center rounded-lg border border-[#E8E8E8] bg-[#F9F9F9] p-8 text-center sm:p-16">
-        <h3 className="mb-3 text-lg font-bold text-[#0A0A0A] sm:text-xl">
-          No activity detected
-        </h3>
-        <p className="mb-8 max-w-sm text-sm font-medium text-[#6B6B6B] sm:text-base">
-          Your live feed will populate here once you start receiving payments.
-          Create a link to get started.
-        </p>
-        <Link
-          href="/dashboard/create"
-          className="w-full rounded-[6px] bg-[#0A0A0A] px-6 py-3 text-sm font-semibold text-white transition-all hover:bg-[#222] sm:w-auto"
-        >
-          Create First Payment
-        </Link>
-      </div>
+      <>
+        <Toaster position="top-right" richColors closeButton />
+        <div className="flex flex-col items-center justify-center rounded-lg border border-[#E8E8E8] bg-[#F9F9F9] p-8 text-center sm:p-16">
+          <h3 className="mb-3 text-lg font-bold text-[#0A0A0A] sm:text-xl">
+            No activity detected
+          </h3>
+          <p className="mb-8 max-w-sm text-sm font-medium text-[#6B6B6B] sm:text-base">
+            Your live feed will populate here once you start receiving payments.
+            Create a link to get started.
+          </p>
+          <Link
+            href="/dashboard/create"
+            className="w-full rounded-[6px] bg-[#0A0A0A] px-6 py-3 text-sm font-semibold text-white transition-all hover:bg-[#222] sm:w-auto"
+          >
+            Create First Payment
+          </Link>
+        </div>
+      </>
     );
   }
 
   return (
-    <div className="rounded-lg border border-[#E8E8E8] bg-white overflow-hidden">
-      <div className="flex items-center justify-between border-b border-[#E8E8E8] bg-[#0A0A0A] px-4 py-4 sm:px-6">
-        <h3 className="font-semibold text-white text-sm">Live Activity Feed</h3>
-        <div className="flex items-center gap-2 text-[10px] font-bold text-white/70 uppercase tracking-widest">
-          <span className="h-1.5 w-1.5 rounded-full bg-white animate-pulse" />
-          Live
+    <>
+      <Toaster position="top-right" richColors closeButton />
+      <div className="rounded-lg border border-[#E8E8E8] bg-white overflow-hidden">
+        <div className="flex items-center justify-between border-b border-[#E8E8E8] bg-[#0A0A0A] px-4 py-4 sm:px-6">
+          <h3 className="font-semibold text-white text-sm">Live Activity Feed</h3>
+          <div className="flex items-center gap-2 text-[10px] font-bold text-white/70 uppercase tracking-widest">
+            <span className="h-1.5 w-1.5 rounded-full bg-white animate-pulse" />
+            Live
+          </div>
         </div>
-      </div>
 
       {/* ── Mobile card list (visible below sm breakpoint) ── */}
       <div className="space-y-3 p-4 sm:hidden">
@@ -238,14 +343,15 @@ export default function ActivityFeed() {
                Focus-visible: keyboard-navigable with Pluto-500 ring. */
             tabIndex={0}
             role="row"
-            aria-label={`Payment ${payment.description || "Transaction"} for ${formatAmount(payment.amount, locale, hideCents)} ${payment.asset}`}
+            aria-label={`Payment ${payment.description || "Transaction"} for ${formatAmount(payment.amount, locale, hideCents)} ${payment.asset}${payment.isOptimistic ? " (Verifying)" : ""}`}
             className={`rounded-lg border p-3 outline-none
               transition-all duration-200 ease-in-out
               hover:border-l-2 hover:border-l-pluto-500 hover:bg-pluto-50 hover:shadow-sm
               active:scale-[0.985] active:bg-pluto-100
               focus-visible:ring-2 focus-visible:ring-pluto-500 focus-visible:ring-offset-2
               cursor-pointer
-              ${i % 2 === 0 ? "border-[#E8E8E8] bg-white" : "border-[#ECECEC] bg-[#F9F9F9]"}`}
+              ${i % 2 === 0 ? "border-[#E8E8E8] bg-white" : "border-[#ECECEC] bg-[#F9F9F9]"}
+              ${payment.isOptimistic ? "animate-pulse" : ""}`}
           >
             <div className="mb-2 flex items-start justify-between gap-3">
               <p className="truncate text-sm font-semibold text-[#0A0A0A]">
@@ -258,9 +364,12 @@ export default function ActivityFeed() {
                       ? "bg-[#F5F5F5] text-[#6B6B6B] border border-[#E8E8E8]"
                       : "bg-red-50 text-red-600 border border-red-100"
                   }`}
-                aria-label={`Status: ${payment.status}`}
+                aria-label={`Status: ${payment.status}${payment.isOptimistic ? " (Verifying)" : ""}`}
               >
                 {payment.status}
+                {payment.isOptimistic && (
+                  <span className="h-1 w-1 rounded-full bg-current animate-pulse" />
+                )}
               </div>
             </div>
             <div className="flex items-center justify-between gap-3">
@@ -310,5 +419,6 @@ export default function ActivityFeed() {
         </table>
       </div>
     </div>
+    </>
   );
 }