Real-time Monitoring

1import { usePaymentDetection } from 'pyhard-vendor-sdk';
2import { useEffect, useState } from 'react';
3
4function PaymentMonitor({ subscriptionId, smartWalletAddress }) {
5  const { newPayments, isPolling, startPolling, stopPolling } = usePaymentDetection(
6    subscriptionId, 
7    smartWalletAddress, 
8    5000 // Poll every 5 seconds
9  );
10  
11  const [notifications, setNotifications] = useState([]);
12  
13  useEffect(() => {
14    if (newPayments.length > 0) {
15      const newNotifications = newPayments.map(payment => ({
16        id: payment.id,
17        amount: payment.amount,
18        timestamp: Date.now()
19      }));
20      
21      setNotifications(prev => [...newNotifications, ...prev]);
22      
23      // Show browser notification
24      if (Notification.permission === 'granted') {
25        new Notification('New Payment Received!', {
26          body: `${payment.amount} PYUSD received`
27        });
28      }
29    }
30  }, [newPayments]);
31  
32  return (
33    <div className="space-y-4">
34      <div className="flex gap-2">
35        <button 
36          onClick={isPolling ? stopPolling : startPolling}
37          className={`px-4 py-2 rounded ${
38            isPolling ? 'bg-red-500' : 'bg-green-500'
39          } text-white`}
40        >
41          {isPolling ? 'Stop Monitoring' : 'Start Monitoring'}
42        </button>
43      </div>
44      
45      {notifications.length > 0 && (
46        <div className="bg-green-50 border border-green-200 rounded-lg p-4">
47          <h3 className="font-semibold text-green-800 mb-2">
48            Recent Payments ({notifications.length})
49          </h3>
50          <div className="space-y-2">
51            {notifications.slice(0, 5).map(notification => (
52              <div key={notification.id} className="text-sm text-green-700">
53                {notification.amount} PYUSD - {new Date(notification.timestamp).toLocaleTimeString()}
54              </div>
55            ))}
56          </div>
57        </div>
58      )}
59    </div>
60  );
61}