add anon mode to catalog, fix errors

src/components/modals/ReplyModal.jsx

@@ -197,7 +197,7 @@ const ReplyModal = ({ isOpen, closeModal }) => {
         let signer;
   
         if (!storedSigners[selectedParentCid]) {
-          signer = await account.plebbit.createSigner();
+          signer = await account?.plebbit.createSigner();
           storedSigners[selectedParentCid] = { privateKey: signer?.privateKey, address: signer?.address };
           localStorage.setItem('storedSigners', JSON.stringify(storedSigners));
           
@@ -205,7 +205,7 @@ const ReplyModal = ({ isOpen, closeModal }) => {
           const signerPrivateKey = storedSigners[selectedParentCid].privateKey;
           
           try {
-            signer = await account.plebbit.createSigner({type: 'ed25519', privateKey: signerPrivateKey});
+            signer = await account?.plebbit.createSigner({type: 'ed25519', privateKey: signerPrivateKey});
           } catch (error) {
             console.log(error);
           }
@@ -296,8 +296,8 @@ const ReplyModal = ({ isOpen, closeModal }) => {
           </div>
           <div id="form">
             <div>
-              {account && account.author && account.author.displayName ? (
+              {account && account?.author && account?.author.displayName ? (
-                <input id="name" type="text" value={account.author?.displayName} ref={nameRef} disabled />
+                <input id="name" type="text" value={account?.author?.displayName} ref={nameRef} disabled />
               ) : (
                 <input id="name" type="text" placeholder="Anonymous" ref={nameRef} />
               )}

src/components/views/Board.jsx

@@ -389,7 +389,7 @@ const Board = () => {
         let signer;
   
         if (!storedSigners[selectedThreadCidRef]) {
-          signer = await account.plebbit.createSigner();
+          signer = await account?.plebbit.createSigner();
           storedSigners[selectedThreadCidRef] = { privateKey: signer?.privateKey, address: signer?.address };
           localStorage.setItem('storedSigners', JSON.stringify(storedSigners));
           
@@ -397,7 +397,7 @@ const Board = () => {
           const signerPrivateKey = storedSigners[selectedThreadCidRef].privateKey;
           
           try {
-            signer = await account.plebbit.createSigner({type: 'ed25519', privateKey: signerPrivateKey});
+            signer = await account?.plebbit.createSigner({type: 'ed25519', privateKey: signerPrivateKey});
           } catch (error) {
             console.log(error);
           }
@@ -723,8 +723,8 @@ const Board = () => {
             <tr data-type="Name">
               <td id="td-name">Name</td>
               <td>
-                {account && account.author && account.author.displayName ? (
+                {account && account?.author && account?.author.displayName ? (
-                  <input name="name" type="text" tabIndex={1} value={account.author?.displayName} ref={nameRef} disabled />
+                  <input name="name" type="text" tabIndex={1} value={account?.author?.displayName} ref={nameRef} disabled />
                 ) : (
                   <input name="name" type="text" placeholder="Anonymous" tabIndex={1} ref={nameRef} />
                 )}

src/components/views/Catalog.jsx

@@ -18,10 +18,12 @@ import OfflineIndicator from '../OfflineIndicator';
 import SettingsModal from '../modals/SettingsModal';
 import getCommentMediaInfo from '../../utils/getCommentMediaInfo';
 import handleStyleChange from '../../utils/handleStyleChange';
+import useAnonModeRef from '../../hooks/useAnonModeRef';
 import useClickForm from '../../hooks/useClickForm';
 import useError from '../../hooks/useError';
 import useStateString from '../../hooks/useStateString';
 import useSuccess from '../../hooks/useSuccess';
+import useAnonModeStore from '../../hooks/stores/useAnonModeStore';
 import useGeneralStore from '../../hooks/stores/useGeneralStore';
 import packageJson from '../../../package.json'
 const {version} = packageJson
@@ -49,8 +51,9 @@ const Catalog = () => {
     showPostForm,
     showPostFormLink,
   } = useGeneralStore(state => state);
-  
 
+  const { anonymousMode } = useAnonModeStore();
+  
   const nameRef = useRef();
   const subjectRef = useRef();
   const commentRef = useRef();
@@ -58,6 +61,7 @@ const Catalog = () => {
   const threadMenuRefs = useRef({});
   const postMenuRef = useRef(null);
   const postMenuCatalogRef = useRef(null);
+  const selectedThreadCidRef = useRef(null);
 
   const navigate = useNavigate();
   
@@ -77,6 +81,7 @@ const Catalog = () => {
   const [commentCid, setCommentCid] = useState(null);
   const [menuPosition, setMenuPosition] = useState({top: 0, left: 0});
   const [openMenuCid, setOpenMenuCid] = useState(null);
+  const [executeAnonMode, setExecuteAnonMode] = useState(false);
 
   const { feed, hasMore, loadMore } = useFeed({subplebbitAddresses: [`${selectedAddress}`], sortType: 'active'});
   const { subplebbitAddress } = useParams();
@@ -85,6 +90,8 @@ const Catalog = () => {
 
   const stateString = useStateString(subplebbit);
 
+  useAnonModeRef(selectedThreadCidRef, anonymousMode && executeAnonMode);
+
 
   useEffect(() => {
     if (subplebbit.roles !== undefined) { 
@@ -275,6 +282,45 @@ const Catalog = () => {
   };
 
 
+  useEffect(() => {
+    const updateSigner = async () => {
+      if (anonymousMode) {
+        setExecuteAnonMode(true);
+  
+        let storedSigners = JSON.parse(localStorage.getItem('storedSigners')) || {};
+        let signer;
+  
+        if (!storedSigners[selectedThreadCidRef]) {
+          signer = await account?.plebbit.createSigner();
+          storedSigners[selectedThreadCidRef] = { privateKey: signer?.privateKey, address: signer?.address };
+          localStorage.setItem('storedSigners', JSON.stringify(storedSigners));
+          
+        } else {
+          const signerPrivateKey = storedSigners[selectedThreadCidRef].privateKey;
+          
+          try {
+            signer = await account?.plebbit.createSigner({type: 'ed25519', privateKey: signerPrivateKey});
+          } catch (error) {
+            console.log(error);
+          }
+        }
+        
+        setPublishCommentOptions((prevPublishCommentOptions) => ({
+          ...prevPublishCommentOptions,
+          signer,
+          author: {
+            ...prevPublishCommentOptions.author,
+            address: signer?.address
+          },
+        }));
+  
+      }
+    };
+  
+    updateSigner();
+  }, [selectedThreadCidRef, anonymousMode, account, setPublishCommentOptions, setNewErrorMessage]);
+
+
   useEffect(() => {
     if (publishCommentOptions && triggerPublishComment) {
       (async () => {
@@ -282,6 +328,7 @@ const Catalog = () => {
         resetFields();
       })();
       setTriggerPublishComment(false);
+      setExecuteAnonMode(false);
     }
   }, [publishCommentOptions, triggerPublishComment, publishComment, resetFields]);
   
@@ -558,8 +605,8 @@ const Catalog = () => {
               <tr data-type="Name">
                 <td id="td-name">Name</td>
                 <td>
-                  {account && account.author && account.author.displayName ? (
+                  {account && account?.author && account?.author.displayName ? (
-                    <input name="name" type="text" tabIndex={1} value={account.author?.displayName} ref={nameRef} disabled />
+                    <input name="name" type="text" tabIndex={1} value={account?.author?.displayName} ref={nameRef} disabled />
                   ) : (
                     <input name="name" type="text" placeholder="Anonymous" tabIndex={1} ref={nameRef} />
                   )}

src/components/views/Thread.jsx

@@ -356,7 +356,7 @@ const Thread = () => {
         let signer;
   
         if (!storedSigners[selectedThread]) {
-          signer = await account.plebbit.createSigner();
+          signer = await account?.plebbit.createSigner();
           storedSigners[selectedThread] = { privateKey: signer?.privateKey, address: signer?.address };
           localStorage.setItem('storedSigners', JSON.stringify(storedSigners));
           
@@ -364,7 +364,7 @@ const Thread = () => {
           const signerPrivateKey = storedSigners[selectedThread].privateKey;
           
           try {
-            signer = await account.plebbit.createSigner({type: 'ed25519', privateKey: signerPrivateKey});
+            signer = await account?.plebbit.createSigner({type: 'ed25519', privateKey: signerPrivateKey});
           } catch (error) {
             console.log(error);
           }
@@ -690,8 +690,8 @@ const Thread = () => {
               <tr data-type="Name">
                 <td id="td-name">Name</td>
                 <td>
-                  {account && account.author && account.author.displayName ? (
+                  {account && account?.author && account?.author.displayName ? (
-                    <input name="name" type="text" tabIndex={1} value={account.author?.displayName} ref={nameRef} disabled />
+                    <input name="name" type="text" tabIndex={1} value={account?.author?.displayName} ref={nameRef} disabled />
                   ) : (
                     <input name="name" type="text" placeholder="Anonymous" tabIndex={1} ref={nameRef} />
                   )}

src/hooks/useAnonMode.js

@@ -14,7 +14,7 @@ useEffect(() => {
       if (execute && storedSigners[threadCid]) {
         const signerPrivateKey = storedSigners[threadCid];
         if (account) {
-          await account.plebbit.createSigner({privateKey: signerPrivateKey});
+          await account.plebbit.createSigner({type: 'ed25519', privateKey: signerPrivateKey});
         }
       }
     }

src/hooks/useAnonModeRef.js

@@ -1,5 +1,5 @@
 import { useEffect } from "react";
-import { setActiveAccount, useAccount } from "@plebbit/plebbit-react-hooks";
+import { useAccount } from "@plebbit/plebbit-react-hooks";
 import useAnonModeStore from "./stores/useAnonModeStore";
 
 const useAnonModeRef = (threadCidRef, execute) => {
@@ -10,17 +10,13 @@ const useAnonModeRef = (threadCidRef, execute) => {
     const handleAnonMode = async () => {
       let storedSigners = JSON.parse(localStorage.getItem('storedSigners')) || {};
 
-      if (!anonymousMode) return;
+      if (!anonymousMode) {
-
+        if (execute && storedSigners[threadCidRef]) {
-      if (!storedSigners[threadCidRef] && execute) {
+          const signerPrivateKey = storedSigners[threadCidRef];
-        const signer = await account?.plebbit.createSigner();
+          if (account) {
-        storedSigners[threadCidRef] = signer.privateKey;
+            await account.plebbit.createSigner({type: 'ed25519', privateKey: signerPrivateKey});
-
+          }
-        localStorage.setItem('storedSigners', JSON.stringify(storedSigners));
+        }
-      } else {
-        const signerPrivateKey = storedSigners[threadCidRef];
-        const signer = await account?.plebbit.createSigner({privateKey: signerPrivateKey});
-        await setActiveAccount(account, {signer});
       }
     }