Better zap subscriptions

2025-04-19 19:01:19 +00:00 · 2024-08-13 14:42:36 -05:00 · 2024-08-13 14:42:36 -05:00 · b937dd2507
commit b937dd2507
parent a85f0505d2
9 changed files with 111 additions and 166 deletions
--- a/src/components/content/carousels/templates/CourseTemplate.js
+++ b/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;
-    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;
-        }
-      }
-    });
+    const total = getTotalFromZaps(zaps, course);
+
    setZapAmount(total);
  }, [course, zaps, zapsLoading, zapsError]);

--- a/src/components/content/carousels/templates/ResourceTemplate.js
+++ b/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 { getSatAmountFromInvoice } from "@/utils/lightning";
+import { getTotalFromZaps } 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;
-    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;
-        }
-      }
-    });
+    const total = getTotalFromZaps(zaps, resource);
+
    setZapAmount(total);
  }, [resource, zaps, zapsLoading, zapsError]);

--- a/src/components/content/carousels/templates/WorkshopTemplate.js
+++ b/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 { getSatAmountFromInvoice } from "@/utils/lightning";
+import { getTotalFromZaps } 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;
-        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;
-                }
-            }
-        });
+        const total = getTotalFromZaps(zaps, workshop);

        setZapAmount(total);
    }, [zaps, workshop, zapsLoading, zapsError]);
--- a/src/components/content/courses/CourseDetails.js
+++ b/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;
-        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;
-            }
-        });
+        const total = getTotalFromZaps(zaps, processedEvent);
+
        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'>
--- a/src/components/content/courses/CourseLesson.js
+++ b/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;
-        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;
-                }
-            }
-        });
+        const total = getTotalFromZaps(zaps, lesson);
+
        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'>
--- a/src/components/content/resources/ResourceDetails.js
+++ b/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'>
--- a/src/hooks/nostrQueries/zaps/useZapsSubscription.js
+++ b/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();
+export function useZapsSubscription({event}) {
+  const [zaps, setZaps] = useState([]);
+  const [zapsLoading, setZapsLoading] = useState(true);
+  const [zapsError, setZapsError] = useState(null);
+  const ndk = useNDKContext();

-    useEffect(() => {
-        setIsClient(true);
-    }, []);
+  useEffect(() => {
+    let subscription;
+    let isFirstZap = true;
+    const zapIds = new Set(); // To keep track of zap IDs we've already seen

-    useEffect(() => {
-        if (!isClient || !ndk || !event) return;
+    async function subscribeToZaps() {
+      try {
+        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);

-        let subscription = null;
+        subscription.on('event', (zapEvent) => {
+          console.log("event", zapEvent);
+          
+          // Check if we've already seen this zap
+          if (!zapIds.has(zapEvent.id)) {
+            zapIds.add(zapEvent.id);
+            setZaps((prevZaps) => [...prevZaps, zapEvent]);

-        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}`] }
-                ];
-
-                subscription = ndk.subscribe(filters);
-
-                subscription.on('event', (zap) => {
-                    uniqueEvents.add(zap);
-                    setZaps(Array.from(uniqueEvents));
-                    setZapsLoading(false);
-                });
-
-                subscription.on('eose', () => {
-                    setZaps(Array.from(uniqueEvents));
-                    setZapsLoading(false);
-                });
-
-                // if there are no zaps for 15 seconds and no eose to stop loading
-                setTimeout(() => {
-                    if (uniqueEvents.size === 0) {
-                        setZapsLoading(false);
-                        setZaps(Array.from(uniqueEvents));
-                    }
-                }, 15000);
-
-            } catch (error) {
-                setZapsError('Error fetching zaps from NDK: ' + error);
-                setZapsLoading(false);
+            if (isFirstZap) {
+              setZapsLoading(false);
+              isFirstZap = false;
            }
-        };
+          }
+        });

-        fetchZapsFromNDK();
+        subscription.on('eose', () => {
+          console.log("eose");
+          // Only set loading to false if no zaps have been received yet
+          if (isFirstZap) {
+            setZapsLoading(false);
+          }
+        });

-        return () => {
-            if (subscription) {
-                subscription.stop();
-            }
-        };
-    }, [isClient, ndk, event]);
+        await subscription.start();
+      } catch (error) {
+        console.error("Error subscribing to zaps:", error);
+        setZapsError(error.message);
+        setZapsLoading(false);
+      }
+    }

-    return { zaps, zapsLoading, zapsError };
-}
+    if (event && Object.keys(event).length > 0) {
+      subscribeToZaps();
+    }
+
+    return () => {
+      if (subscription) {
+        subscription.stop();
+      }
+    };
+  }, [event, ndk]);
+
+  return { zaps, zapsLoading, zapsError };
+}
--- a/src/pages/details/[slug]/index.js
+++ b/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}
            />
--- a/src/utils/lightning.js
+++ b/src/utils/lightning.js
@ -3,4 +3,22 @@ import Bolt11Decoder from "light-bolt11-decoder"
 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;
 }