fix: Implement real-time notifications with WebSocket or SSE

src/app/providers.tsx

@@ -2,6 +2,7 @@
 
 import React, { createContext, useContext, useState, useCallback, useEffect } from "react";
 import { connectWallet, getPublicKey, isFreighterInstalled } from "@/lib/wallet";
+import { NotificationProvider } from "@/components/NotificationProvider";
 
 interface WalletContextType {
   address: string | null;
@@ -54,7 +55,9 @@ export function Providers({ children }: { children: React.ReactNode }) {
         disconnect,
       }}
     >
-      {children}
+      <NotificationProvider>
+        {children}
+      </NotificationProvider>
     </WalletContext.Provider>
   );
-}
+}

src/components/NotificationBell.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { useNotifications } from "./NotificationProvider";
+import { BellIcon } from "@heroicons/react/24/outline";
+
+interface NotificationBellProps {
+  className?: string;
+}
+
+export function NotificationBell({ className }: NotificationBellProps) {
+  const { notifications, unreadCount, markAllAsRead } = useNotifications();
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <div className="relative">
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className={`relative p-2 rounded-full hover:bg-gray-100 transition-colors ${className}`}
+        aria-label="Notifications"
+      >
+        <BellIcon className="h-6 w-6 text-gray-600" />
+        {unreadCount > 0 && (
+          <span className="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">
+            {unreadCount}
+          </span>
+        )}
+      </button>
+
+      {isOpen && (
+        <div className="absolute right-0 mt-2 w-80 bg-white rounded-md shadow-lg border border-gray-200 z-50">
+          <div className="p-4 border-b border-gray-200 flex justify-between items-center">
+            <h3 className="font-semibold text-gray-900">Notifications</h3>
+            {unreadCount > 0 && (
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  markAllAsRead();
+                }}
+                className="text-sm text-blue-600 hover:text-blue-800"
+              >
+                Mark all as read
+              </button>
+            )}
+          </div>
+
+          <div className="max-h-96 overflow-y-auto">
+            {notifications.length === 0 ? (
+              <div className="p-4 text-center text-gray-500">
+                No notifications
+              </div>
+            ) : (
+              notifications.map((notification) => (
+                <div
+                  key={notification.id}
+                  className={`p-4 border-b border-gray-100 hover:bg-gray-50 cursor-pointer ${
+                    !notification.read ? "bg-blue-50" : ""
+                  }`}
+                  onClick={() => {
+                    if (!notification.read) {
+                      // Mark as read when clicked
+                      // Implementation depends on your backend API
+                    }
+                  }}
+                >
+                  <div className="flex justify-between items-start">
+                    <div className="flex-1">
+                      <p className="text-sm font-medium text-gray-900">{notification.title}</p>
+                      <p className="text-sm text-gray-600 mt-1">{notification.message}</p>
+                      <p className="text-xs text-gray-400 mt-2">
+                        {new Date(notification.timestamp).toLocaleString()}
+                      </p>
+                    </div>
+                    {!notification.read && (
+                      <span className="ml-2 inline-flex h-2 w-2 rounded-full bg-blue-500 mt-1" />
+                    )}
+                  </div>
+                </div>
+              ))
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

src/components/NotificationProvider.tsx

@@ -0,0 +1,142 @@
+"use client";
+
+import React, { createContext, useContext, useState, useEffect, useCallback } from "react";
+
+interface Notification {
+  id: string;
+  type: 'contribution' | 'payout' | 'dispute';
+  title: string;
+  message: string;
+  timestamp: string;
+  read: boolean;
+  data?: {
+    groupId?: string;
+    amount?: string;
+    userId?: string;
+  };
+}
+
+interface NotificationContextType {
+  notifications: Notification[];
+  unreadCount: number;
+  addNotification: (notification: Omit<Notification, 'id' | 'read'>) => void;
+  markAsRead: (id: string) => void;
+  markAllAsRead: () => void;
+}
+
+const NotificationContext = createContext<NotificationContextType>({
+  notifications: [],
+  unreadCount: 0,
+  addNotification: () => {},
+  markAsRead: () => {},
+  markAllAsRead: () => {},
+});
+
+let eventSource: EventSource | null = null;
+let reconnectAttempts = 0;
+const maxReconnectAttempts = 5;
+
+function getNotificationType(type: string): 'contribution' | 'payout' | 'dispute' {
+  if (type.includes('contribution')) return 'contribution';
+  if (type.includes('payout')) return 'payout';
+  if (type.includes('dispute')) return 'dispute';
+  return 'contribution';
+}
+
+export function NotificationProvider({ children }: { children: React.ReactNode }) {
+  const [notifications, setNotifications] = useState<Notification[]>([]);
+
+  const addNotification = useCallback((notification: Omit<Notification, 'id' | 'read'>) => {
+    const newNotification: Notification = {
+      ...notification,
+      id: Date.now().toString(),
+      read: false,
+      timestamp: new Date().toISOString(),
+    };
+
+    setNotifications((prev) => [newNotification, ...prev]);
+
+    // Auto-mark as read after 10 seconds if not clicked
+    setTimeout(() => {
+      setNotifications((prev) => 
+        prev.map(n => n.id === newNotification.id ? { ...n, read: true } : n)
+      );
+    }, 10000);
+  }, []);
+
+  const markAsRead = useCallback((id: string) => {
+    setNotifications((prev) => 
+      prev.map(n => n.id === id ? { ...n, read: true } : n)
+    );
+  }, []);
+
+  const markAllAsRead = useCallback(() => {
+    setNotifications((prev) => prev.map(n => ({ ...n, read: true })));
+  }, []);
+
+  // Connect to SSE endpoint
+  useEffect(() => {
+    const connectSSE = () => {
+      if (typeof window === 'undefined') return;
+
+      // Replace with your actual SSE endpoint
+      const sseUrl = `${process.env.NEXT_PUBLIC_RPC_URL}/api/notifications/sse`;
+
+      eventSource = new EventSource(sseUrl);
+
+      eventSource.onopen = () => {
+        console.log('SSE connection opened');
+        reconnectAttempts = 0;
+      };
+
+      eventSource.onmessage = (event) => {
+        try {
+          const data = JSON.parse(event.data);
+
+          const notification: Notification = {
+            id: Date.now().toString(),
+            type: getNotificationType(data.type || 'contribution'),
+            title: data.title || 'New notification',
+            message: data.message || 'You have a new notification',
+            timestamp: new Date().toISOString(),
+            read: false,
+            data: data.data,
+          };
+
+          addNotification(notification);
+        } catch (error) {
+          console.error('Error parsing SSE message:', error);
+        }
+      };
+
+      eventSource.onerror = (error) => {
+        console.error('SSE connection error:', error);
+        eventSource?.close();
+
+        if (reconnectAttempts < maxReconnectAttempts) {
+          const delay = Math.min(1000 * Math.pow(2, reconnectAttempts), 30000);
+          setTimeout(connectSSE, delay);
+          reconnectAttempts++;
+        }
+      };
+    };
+
+    connectSSE();
+
+    return () => {
+      eventSource?.close();
+    };
+  }, [addNotification]);
+
+  const unreadCount = notifications.filter(n => !n.read).length;
+
+  return (
+    <NotificationContext.Provider value={{ notifications, unreadCount, addNotification, markAsRead, markAllAsRead }}>
+      {children}
+    </NotificationContext.Provider>
+  );
+}
+
+export function useNotifications() {
+  return useContext(NotificationContext);
+}