anons and email login users can now comment

src/components/ZapThreadsWrapper.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef } from 'react';
 
-const ZapThreadsWrapper = ({ anchor, relays, disable }) => {
+const ZapThreadsWrapper = ({ anchor, user, relays, disable }) => {
   // Create a ref to store the reference to the <div> element
   const zapRef = useRef(null);
 
@@ -17,8 +17,9 @@ const ZapThreadsWrapper = ({ anchor, relays, disable }) => {
       // Create a new <zap-threads> element
       const zapElement = document.createElement('zap-threads');
       zapElement.setAttribute('anchor', anchor);
-      zapElement.setAttribute('relays', relays);
+      if (user) zapElement.setAttribute('user', user);
-      zapElement.setAttribute('disable', disable);
+      zapElement.setAttribute('relays', relays.replace(/\s/g, ''));
+      if (disable) zapElement.setAttribute('disable', disable);
 
       // Remove any existing <zap-threads> element before appending a new one
       if (zapRef.current && zapRef.current.firstChild) {
@@ -48,7 +49,7 @@ const ZapThreadsWrapper = ({ anchor, relays, disable }) => {
       // Remove the load event listener from the script
       script.removeEventListener('load', handleScriptLoad);
     };
-  }, [anchor, relays, disable]);
+  }, [anchor, user, relays, disable]);
 
   // Render a <div> element and attach the zapRef to it
   return <div className="overflow-x-hidden" ref={zapRef} />;

src/components/feeds/messages/CommunityMessage.js

@@ -10,7 +10,6 @@ import NostrIcon from '../../../../public/images/nostr.png';
 import Image from 'next/image';
 import { nip19 } from 'nostr-tools';
 import ZapThreadsWrapper from '@/components/ZapThreadsWrapper';
-import useWindowWidth from '@/hooks/useWindowWidth';
 
 const StackerNewsIconComponent = () => (
     <svg width="16" height="16" className='mr-2' viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -38,13 +37,19 @@ const headerTemplate = (options, windowWidth, platform, id) => {
 
 const CommunityMessage = ({ message, searchQuery, windowWidth, platform }) => {
     const [npub, setNpub] = useState(null);
+    const [nsec, setNsec] = useState(null);
     const [collapsed, setCollapsed] = useState(true);
     const { data: session } = useSession();
-    const isMobileView = windowWidth <= 768;
 
     useEffect(() => {
-        if (session?.user?.pubkey) {
+        if (session?.user?.pubkey || session?.user?.privkey) {
-            setNpub(nip19.npubEncode(session.user.pubkey));
+            let privkeyBuffer;
+            if (session.user.privkey) {
+                privkeyBuffer = Buffer.from(session.user.privkey, 'hex');
+                setNsec(nip19.nsecEncode(privkeyBuffer));
+            } else {
+                setNpub(nip19.npubEncode(session.user.pubkey));
+            }
         }
     }, [session]);
 
@@ -83,12 +88,14 @@ const CommunityMessage = ({ message, searchQuery, windowWidth, platform }) => {
                             className="w-full"
                         >
                             <div className="max-w-[100vw]">
-                                <ZapThreadsWrapper
+                                {nsec || npub ? (
-                                    anchor={nip19.noteEncode(message.id)}
+                                    <ZapThreadsWrapper
-                                    user={npub || null}
+                                        anchor={nip19.noteEncode(message.id)}
-                                    relays="wss://nos.lol/, wss://relay.damus.io/, wss://relay.snort.social/, wss://relay.nostr.band/, wss://relay.mutinywallet.com/, wss://relay.primal.net/"
+                                        user={nsec || npub || null}
-                                    disable="zaps"
+                                        relays="wss://nos.lol/, wss://relay.damus.io/, wss://relay.snort.social/, wss://relay.nostr.band/, wss://relay.mutinywallet.com/, wss://relay.primal.net/"
-                                />
+                                        disable={nsec ? "zaps,login" : "zaps"}
+                                    />
+                                ) : null}
                             </div>
                         </Panel>
                     ) : (

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

@@ -21,6 +21,8 @@ const Details = () => {
     const [authorView, setAuthorView] = useState(false);
     const [loading, setLoading] = useState(true);
     const [lessons, setLessons] = useState([]);
+    const [npub, setNpub] = useState(null);
+    const [nsec, setNsec] = useState(null);
     const { data: session, update } = useSession();
     const { ndk } = useNDKContext();
     const { decryptContent } = useDecryptContent();
@@ -68,6 +70,15 @@ const Details = () => {
         }
     }, [author, event, fetchAuthor]);
 
+    useEffect(() => {
+        if (session?.user?.privkey) {
+            const privkeyBuffer = Buffer.from(session.user.privkey, 'hex');
+            setNsec(nip19.nsecEncode(privkeyBuffer));
+        } else if (session?.user?.pubkey) {
+            setNpub(nip19.npubEncode(session.user.pubkey));
+        }
+    }, [session]);
+
     useEffect(() => {
         const fetchAndProcessEvent = async () => {
             if (!router.isReady || !router.query.slug) return;