Better zap subscriptions

src/components/content/carousels/templates/CourseTemplate.js

@@ -3,31 +3,21 @@ import Image from "next/image";
 import { useRouter } from "next/router";
 import { formatTimestampToHowLongAgo } from "@/utils/time";
 import { useImageProxy } from "@/hooks/useImageProxy";
-import { getSatAmountFromInvoice } from "@/utils/lightning";
+import { getTotalFromZaps } from "@/utils/lightning";
 import ZapDisplay from "@/components/zaps/ZapDisplay";
-import { useZapsQuery } from "@/hooks/nostrQueries/zaps/useZapsQuery";
+import { useZapsSubscription } from "@/hooks/nostrQueries/zaps/useZapsSubscription";
 
 const CourseTemplate = ({ course }) => {
   const [zapAmount, setZapAmount] = useState(null);
   const router = useRouter();
   const { returnImageProxy } = useImageProxy();
-  const { zaps, zapsLoading, zapsError } = useZapsQuery({ event: course, type: "course" });
+  const { zaps, zapsLoading, zapsError } = useZapsSubscription({ event: course });
 
   useEffect(() => {
     if (!zaps || zapsLoading || zapsError) return;
 
-    let total = 0;
+    const total = getTotalFromZaps(zaps, course);
-    zaps.forEach((zap) => {
+
-      // If the zap matches the event or the parameterized event, then add the zap to the total
-      if (zap.tags.find(tag => tag[0] === "e" && tag[1] === course.id) || zap.tags.find(tag => tag[0] === "a" && tag[1] === `${course.kind}:${course.id}:${course.d}`)) {
-        const bolt11Tag = zap.tags.find(tag => tag[0] === "bolt11");
-        const invoice = bolt11Tag ? bolt11Tag[1] : null;
-        if (invoice) {
-          const amount = getSatAmountFromInvoice(invoice);
-          total += amount;
-        }
-      }
-    });
     setZapAmount(total);
   }, [course, zaps, zapsLoading, zapsError]);
 

src/components/content/carousels/templates/ResourceTemplate.js

@@ -3,13 +3,13 @@ import Image from "next/image";
 import { useRouter } from "next/router";
 import { formatTimestampToHowLongAgo } from "@/utils/time";
 import { useImageProxy } from "@/hooks/useImageProxy";
-import { useZapsQuery } from "@/hooks/nostrQueries/zaps/useZapsQuery";
+import { getTotalFromZaps } from "@/utils/lightning";
-import { getSatAmountFromInvoice } from "@/utils/lightning";
 import ZapDisplay from "@/components/zaps/ZapDisplay";
+import { useZapsSubscription } from "@/hooks/nostrQueries/zaps/useZapsSubscription";
 
 const ResourceTemplate = ({ resource }) => {
   const [zapAmount, setZapAmount] = useState(null);
-  const { zaps, zapsLoading, zapsError } = useZapsQuery({ event: resource, type: "resource" });
+  const { zaps, zapsLoading, zapsError } = useZapsSubscription({ event: resource });
 
   const router = useRouter();
   const { returnImageProxy } = useImageProxy();
@@ -17,18 +17,8 @@ const ResourceTemplate = ({ resource }) => {
   useEffect(() => {
     if (!zaps || zapsLoading || zapsError) return;
 
-    let total = 0;
+    const total = getTotalFromZaps(zaps, resource);
-    zaps.forEach((zap) => {
+
-      // If the zap matches the event or the parameterized event, then add the zap to the total
-      if (zap.tags.find(tag => tag[0] === "e" && tag[1] === resource.id) || zap.tags.find(tag => tag[0] === "a" && tag[1] === `${resource.kind}:${resource.id}:${resource.d}`)) {
-        const bolt11Tag = zap.tags.find(tag => tag[0] === "bolt11");
-        const invoice = bolt11Tag ? bolt11Tag[1] : null;
-        if (invoice) {
-          const amount = getSatAmountFromInvoice(invoice);
-          total += amount;
-        }
-      }
-    });
     setZapAmount(total);
   }, [resource, zaps, zapsLoading, zapsError]);
 

src/components/content/carousels/templates/WorkshopTemplate.js

@@ -3,31 +3,20 @@ import Image from "next/image";
 import { useRouter } from "next/router";
 import { formatTimestampToHowLongAgo } from "@/utils/time";
 import { useImageProxy } from "@/hooks/useImageProxy";
-import { useZapsQuery } from "@/hooks/nostrQueries/zaps/useZapsQuery";
+import { getTotalFromZaps } from "@/utils/lightning";
-import { getSatAmountFromInvoice } from "@/utils/lightning";
+import { useZapsSubscription } from "@/hooks/nostrQueries/zaps/useZapsSubscription";
 import ZapDisplay from "@/components/zaps/ZapDisplay";
 
 const WorkshopTemplate = ({ workshop }) => {
     const [zapAmount, setZapAmount] = useState(null);
     const router = useRouter();
     const { returnImageProxy } = useImageProxy();
-    const { zaps, zapsLoading, zapsError } = useZapsQuery({ event: workshop, type: "workshop" });
+    const { zaps, zapsLoading, zapsError } = useZapsSubscription({ event: workshop });
 
     useEffect(() => {
         if (zapsLoading || !zaps) return;
 
-        let total = 0;
+        const total = getTotalFromZaps(zaps, workshop);
-        zaps.forEach((zap) => {
-            // If the zap matches the event or the parameterized event, then add the zap to the total
-            if (zap.tags.find(tag => tag[0] === "e" && tag[1] === workshop.id) || zap.tags.find(tag => tag[0] === "a" && tag[1] === `${workshop.kind}:${workshop.id}:${workshop.d}`)) {
-                const bolt11Tag = zap.tags.find(tag => tag[0] === "bolt11");
-                const invoice = bolt11Tag ? bolt11Tag[1] : null;
-                if (invoice) {
-                    const amount = getSatAmountFromInvoice(invoice);
-                    total += amount;
-                }
-            }
-        });
 
         setZapAmount(total);
     }, [zaps, workshop, zapsLoading, zapsError]);

src/components/content/courses/CourseDetails.js

@@ -2,7 +2,7 @@ import React, { useEffect, useState, useCallback } from 'react';
 import { useRouter } from 'next/router';
 import { useImageProxy } from '@/hooks/useImageProxy';
 import ZapDisplay from '@/components/zaps/ZapDisplay';
-import { getSatAmountFromInvoice } from '@/utils/lightning';
+import { getTotalFromZaps } from '@/utils/lightning';
 import { Tag } from 'primereact/tag';
 import { nip19 } from 'nostr-tools';
 import { useSession } from 'next-auth/react';
@@ -95,17 +95,10 @@ export default function CourseDetails({ processedEvent }) {
     useEffect(() => {
         if (!zaps || zaps.length === 0) return;
 
-        let total = 0;
+        const total = getTotalFromZaps(zaps, processedEvent);
-        zaps.forEach((zap) => {
+
-            const bolt11Tag = zap.tags.find(tag => tag[0] === "bolt11");
-            const invoice = bolt11Tag ? bolt11Tag[1] : null;
-            if (invoice) {
-                const amount = getSatAmountFromInvoice(invoice);
-                total += amount;
-            }
-        });
         setZapAmount(total);
-    }, [zaps]);
+    }, [zaps, processedEvent]);
 
     return (
         <div className='w-full px-24 pt-12 mx-auto mt-4 max-tab:px-0 max-mob:px-0 max-tab:pt-2 max-mob:pt-2'>

src/components/content/courses/CourseLesson.js

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 import { Tag } from "primereact/tag";
 import Image from "next/image";
 import { useImageProxy } from "@/hooks/useImageProxy";
-import { getSatAmountFromInvoice } from "@/utils/lightning";
+import { getTotalFromZaps } from "@/utils/lightning";
 import ZapDisplay from "@/components/zaps/ZapDisplay";
 import dynamic from "next/dynamic";
 import { useZapsQuery } from "@/hooks/nostrQueries/zaps/useZapsQuery";
@@ -45,19 +45,10 @@ const CourseLesson = ({ lesson, course }) => {
     useEffect(() => {
         if (!zaps || zapsLoading || zapsError) return;
 
-        let total = 0;
+        const total = getTotalFromZaps(zaps, lesson);
-        zaps.forEach((zap) => {
+
-            if (zap.tags.find(tag => tag[0] === "e" && tag[1] === lesson.id) || zap.tags.find(tag => tag[0] === "a" && tag[1] === `${lesson.kind}:${lesson.id}:${lesson.d}`)) {
-                const bolt11Tag = zap.tags.find(tag => tag[0] === "bolt11");
-                const invoice = bolt11Tag ? bolt11Tag[1] : null;
-                if (invoice) {
-                    const amount = getSatAmountFromInvoice(invoice);
-                    total += amount;
-                }
-            }
-        });
         setZapAmount(total);
-    }, [zaps, zapsLoading, zapsError]);
+    }, [zaps, zapsLoading, zapsError, lesson]);
 
     return (
         <div className='w-full px-24 pt-12 mx-auto mt-4 max-tab:px-0 max-mob:px-0 max-tab:pt-2 max-mob:pt-2'>

src/components/content/resources/ResourceDetails.js

@@ -5,12 +5,24 @@ import { useRouter } from "next/router";
 import ResourcePaymentButton from "@/components/bitcoinConnect/ResourcePaymentButton";
 import ZapDisplay from "@/components/zaps/ZapDisplay";
 import { useImageProxy } from "@/hooks/useImageProxy";
+import { useZapsSubscription } from "@/hooks/nostrQueries/zaps/useZapsSubscription";
+import { getTotalFromZaps } from "@/utils/lightning";
+
+const ResourceDetails = ({processedEvent, topics, title, summary, image, price, author, paidResource, decryptedContent, handlePaymentSuccess, handlePaymentError}) => {
+    const [zapAmount, setZapAmount] = useState(null);
 
-const ResourceDetails = ({processedEvent,topics, title, summary, image, price, author, paidResource, decryptedContent, zapAmount, zapsLoading, handlePaymentSuccess, handlePaymentError}) => {
     const router = useRouter();
     const { slug } = router.query;
     const { returnImageProxy } = useImageProxy();
+    const { zaps, zapsLoading, zapsError } = useZapsSubscription({ event: processedEvent });
 
+    useEffect(() => {
+        if (!zaps) return;
+
+        const total = getTotalFromZaps(zaps, processedEvent);
+
+        setZapAmount(total);
+    }, [zaps, processedEvent]);
 
     return (
         <div className='w-full flex flex-row justify-between max-tab:flex-col max-mob:flex-col'>

src/hooks/nostrQueries/zaps/useZapsSubscription.js

@@ -1,67 +1,68 @@
 import { useState, useEffect } from 'react';
-import { useNDKContext } from '@/context/NDKContext';
+import { useNDKContext } from "@/context/NDKContext";
 
 export function useZapsSubscription({event}) {
-    const [isClient, setIsClient] = useState(false);
   const [zaps, setZaps] = useState([]);
   const [zapsLoading, setZapsLoading] = useState(true);
   const [zapsError, setZapsError] = useState(null);
   const ndk = useNDKContext();
 
   useEffect(() => {
-        setIsClient(true);
+    let subscription;
-    }, []);
+    let isFirstZap = true;
+    const zapIds = new Set(); // To keep track of zap IDs we've already seen
 
-    useEffect(() => {
+    async function subscribeToZaps() {
-        if (!isClient || !ndk || !event) return;
-
-        let subscription = null;
-
-        const fetchZapsFromNDK = async () => {
       try {
-                await ndk.connect();
-                const uniqueEvents = new Set();
-
         const filters = [
           { kinds: [9735], "#e": [event.id] },
           { kinds: [9735], "#a": [`${event.kind}:${event.id}:${event.d}`] }
         ];
-
+        await ndk.connect();
+        console.log("filters", filters);
         subscription = ndk.subscribe(filters);
 
-                subscription.on('event', (zap) => {
+        subscription.on('event', (zapEvent) => {
-                    uniqueEvents.add(zap);
+          console.log("event", zapEvent);
-                    setZaps(Array.from(uniqueEvents));
+          
+          // Check if we've already seen this zap
+          if (!zapIds.has(zapEvent.id)) {
+            zapIds.add(zapEvent.id);
+            setZaps((prevZaps) => [...prevZaps, zapEvent]);
+
+            if (isFirstZap) {
               setZapsLoading(false);
+              isFirstZap = false;
+            }
+          }
         });
 
         subscription.on('eose', () => {
-                    setZaps(Array.from(uniqueEvents));
+          console.log("eose");
+          // Only set loading to false if no zaps have been received yet
+          if (isFirstZap) {
             setZapsLoading(false);
+          }
         });
 
-                // if there are no zaps for 15 seconds and no eose to stop loading
+        await subscription.start();
-                setTimeout(() => {
-                    if (uniqueEvents.size === 0) {
-                        setZapsLoading(false);
-                        setZaps(Array.from(uniqueEvents));
-                    }
-                }, 15000);
-
       } catch (error) {
-                setZapsError('Error fetching zaps from NDK: ' + error);
+        console.error("Error subscribing to zaps:", error);
+        setZapsError(error.message);
         setZapsLoading(false);
       }
-        };
+    }
 
-        fetchZapsFromNDK();
+    if (event && Object.keys(event).length > 0) {
+      subscribeToZaps();
+    }
 
     return () => {
       if (subscription) {
         subscription.stop();
       }
     };
-    }, [isClient, ndk, event]);
+  }, [event, ndk]);
 
   return { zaps, zapsLoading, zapsError };
 }

src/pages/details/[slug]/index.js

@@ -2,21 +2,14 @@ import React, { useEffect, useState } from 'react';
 import axios from 'axios';
 import { useRouter } from 'next/router';
 import { parseEvent, findKind0Fields } from '@/utils/nostr';
-import { useImageProxy } from '@/hooks/useImageProxy';
-import { getSatAmountFromInvoice } from '@/utils/lightning';
-import ZapDisplay from '@/components/zaps/ZapDisplay';
-import { Tag } from 'primereact/tag';
 import { Button } from 'primereact/button';
 import { nip19, nip04 } from 'nostr-tools';
 import { useSession } from 'next-auth/react';
-import Image from 'next/image';
 import dynamic from 'next/dynamic';
 import ZapThreadsWrapper from '@/components/ZapThreadsWrapper';
 import { useToast } from '@/hooks/useToast';
 import { useNDKContext } from '@/context/NDKContext';
 import ResourceDetails from '@/components/content/resources/ResourceDetails';
-import { useZapsSubscription } from '@/hooks/nostrQueries/zaps/useZapsSubscription';
-import ResourcePaymentButton from '@/components/bitcoinConnect/ResourcePaymentButton';
 import 'primeicons/primeicons.css';
 
 const MDDisplay = dynamic(
@@ -33,9 +26,7 @@ export default function Details() {
     const [event, setEvent] = useState(null);
     const [processedEvent, setProcessedEvent] = useState({});
     const [author, setAuthor] = useState(null);
-    const [bitcoinConnect, setBitcoinConnect] = useState(false);
     const [nAddress, setNAddress] = useState(null);
-    const [zapAmount, setZapAmount] = useState(null);
     const [paidResource, setPaidResource] = useState(false);
     const [decryptedContent, setDecryptedContent] = useState(null);
     const [authorView, setAuthorView] = useState(false);
@@ -43,9 +34,7 @@ export default function Details() {
     const ndk = useNDKContext();
     const { data: session, update } = useSession();
     const [user, setUser] = useState(null);
-    const { returnImageProxy } = useImageProxy();
     const { showToast } = useToast();
-    const { zaps, zapsLoading, zapsError } = useZapsSubscription({ event: processedEvent });
 
     const router = useRouter();
 
@@ -61,16 +50,6 @@ export default function Details() {
         }
     }, [processedEvent]);
 
-    useEffect(() => {
-        if (typeof window === 'undefined') return;
-
-        const bitcoinConnectConfig = window.localStorage.getItem('bc:config');
-
-        if (bitcoinConnectConfig) {
-            setBitcoinConnect(true);
-        }
-    }, []);
-
     useEffect(() => {
         const decryptContent = async () => {
             if (user && paidResource) {
@@ -165,22 +144,6 @@ export default function Details() {
         }
     }, [processedEvent]);
 
-    useEffect(() => {
-        if (!zaps) return;
-
-        let total = 0;
-        zaps.forEach((zap) => {
-            const bolt11Tag = zap.tags.find(tag => tag[0] === "bolt11");
-            const invoice = bolt11Tag ? bolt11Tag[1] : null;
-            if (invoice) {
-                const amount = getSatAmountFromInvoice(invoice);
-                total += amount;
-            }
-        });
-
-        setZapAmount(total);
-    }, [zaps]);
-
     const handleDelete = async () => {
         try {
             const response = await axios.delete(`/api/resources/${processedEvent.d}`);
@@ -239,8 +202,6 @@ export default function Details() {
                 author={author}
                 paidResource={paidResource}
                 decryptedContent={decryptedContent}
-                zapAmount={zapAmount}
-                zapsLoading={zapsLoading}
                 handlePaymentSuccess={handlePaymentSuccess}
                 handlePaymentError={handlePaymentError}
             />

src/utils/lightning.js

@@ -4,3 +4,21 @@ export const getSatAmountFromInvoice = (invoice) => {
     const decoded = Bolt11Decoder.decode(invoice)
     return decoded.sections[2].value / 1000;
 }
+
+export const getTotalFromZaps = (zaps, event) => {
+    let total = 0;
+    let uniqueZaps = new Set();
+    zaps.forEach((zap) => {
+      // If the zap matches the event or the parameterized event, then add the zap to the total
+      if ((zap.tags.find(tag => tag[0] === "e" && tag[1] === event.id) || zap.tags.find(tag => tag[0] === "a" && tag[1] === `${event.kind}:${event.id}:${event.d}`)) &&!uniqueZaps.has(zap.id)) {
+        uniqueZaps.add(zap.id);
+        const bolt11Tag = zap.tags.find(tag => tag[0] === "bolt11");
+        const invoice = bolt11Tag ? bolt11Tag[1] : null;
+        if (invoice) {
+          const amount = getSatAmountFromInvoice(invoice);
+          total += amount;
+        }
+      }
+    });
+    return total;
+}