implement signers in anon mode

src/components/modals/ReplyModal.jsx

@@ -1,10 +1,12 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useAccount, usePublishComment } from '@plebbit/plebbit-react-hooks';
-import { StyledModal } from '../styled/modals/ReplyModal.styled';
-import useGeneralStore from '../../hooks/stores/useGeneralStore';
 import Modal from 'react-modal';
 import Draggable from 'react-draggable';
+import { StyledModal } from '../styled/modals/ReplyModal.styled';
+import useAnonMode from '../../hooks/useAnonMode';
 import useError from '../../hooks/useError';
+import useAnonModeStore from '../../hooks/stores/useAnonModeStore';
+import useGeneralStore from '../../hooks/stores/useGeneralStore';
 
 
 const ReplyModal = ({ isOpen, closeModal }) => {
@@ -24,6 +26,8 @@ const ReplyModal = ({ isOpen, closeModal }) => {
     triggerInsertion,
   } = useGeneralStore(state => state);
 
+  const { anonymousMode } = useAnonModeStore();
+
   const account = useAccount();
 
   const [, setNewErrorMessage] = useError();
@@ -35,7 +39,10 @@ const ReplyModal = ({ isOpen, closeModal }) => {
 
   const [triggerPublishComment, setTriggerPublishComment] = useState(false);
   const [isMobile, setIsMobile] = useState(window.innerWidth <= 480);
+  const [executeAnonMode, setExecuteAnonMode] = useState(false);
   
+  useAnonMode(selectedParentCid, anonymousMode && executeAnonMode);
+
 
   useEffect(() => {
     const handleResize = () => setIsMobile(window.innerWidth <= 480);
@@ -179,6 +186,45 @@ const ReplyModal = ({ isOpen, closeModal }) => {
   
     setTriggerPublishComment(true);
   };
+
+  
+  useEffect(() => {
+    const updateSigner = async () => {
+      if (anonymousMode) {
+        setExecuteAnonMode(true);
+  
+        let storedSigners = JSON.parse(localStorage.getItem('storedSigners')) || {};
+        let signer;
+  
+        if (!storedSigners[selectedParentCid]) {
+          signer = await account.plebbit.createSigner();
+          storedSigners[selectedParentCid] = { privateKey: signer.privateKey, address: signer.address };
+          localStorage.setItem('storedSigners', JSON.stringify(storedSigners));
+          
+        } else {
+          const signerPrivateKey = storedSigners[selectedParentCid].privateKey;
+          
+          try {
+            signer = await account.plebbit.createSigner({type: 'ed25519', privateKey: signerPrivateKey});
+          } catch (error) {
+            setNewErrorMessage(error);
+          }
+        }
+        
+        setPublishCommentOptions((prevPublishCommentOptions) => ({
+          ...prevPublishCommentOptions,
+          signer,
+          author: {
+            ...prevPublishCommentOptions.author,
+            address: signer.address
+          },
+        }));
+  
+      }
+    };
+  
+    updateSigner();
+  }, [selectedParentCid, anonymousMode, account, setPublishCommentOptions, setNewErrorMessage]);
   
   
   useEffect(() => {
@@ -189,6 +235,7 @@ const ReplyModal = ({ isOpen, closeModal }) => {
         closeModal();
       })();
       setTriggerPublishComment(false);
+      setExecuteAnonMode(false);
     }
   }, [publishCommentOptions, triggerPublishComment, publishComment, resetFields, closeModal]);
 

src/components/views/Board.jsx

@@ -377,15 +377,47 @@ const Board = () => {
     }));
 
     setTriggerPublishComment(true);
-    setExecuteAnonMode(false);
   };
 
 
   useEffect(() => {
-    if (anonymousMode) {
+    const updateSigner = async () => {
-      setExecuteAnonMode(true);
+      if (anonymousMode) {
-    }
+        setExecuteAnonMode(true);
-  }, [anonymousMode, selectedThreadCidRef]);
+  
+        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) {
+            setNewErrorMessage(error);
+          }
+        }
+        
+        setPublishCommentOptions((prevPublishCommentOptions) => ({
+          ...prevPublishCommentOptions,
+          signer,
+          author: {
+            ...prevPublishCommentOptions.author,
+            address: signer.address
+          },
+        }));
+  
+      }
+    };
+  
+    updateSigner();
+  }, [selectedThreadCidRef, anonymousMode, account, setPublishCommentOptions, setNewErrorMessage]);
+  
 
 
   useEffect(() => {
@@ -395,6 +427,7 @@ const Board = () => {
         resetFields();
       })();
       setTriggerPublishComment(false);
+      setExecuteAnonMode(false);
     }
   }, [publishCommentOptions, triggerPublishComment, publishComment, resetFields]);
   
@@ -1386,6 +1419,11 @@ const Board = () => {
                         const replyMediaInfo = getCommentMediaInfo(reply);
                         const fallbackImgUrl = "assets/filedeleted-res.gif";
                         const shortParentCid = findShortParentCid(reply.parentCid, selectedFeed);
+                        let storedSigners = JSON.parse(localStorage.getItem('storedSigners')) || {};
+                        let signerAddress;
+                        if (storedSigners[reply.parentCid]) {
+                          signerAddress = storedSigners[reply.parentCid].address;
+                        }
                         return (
                           <div key={`rc-${index}`} className="reply-container">
                             <div key={`sa-${index}`} className="side-arrows">{'>>'}</div>
@@ -1418,9 +1456,16 @@ const Board = () => {
                                             {reply.author?.shortAddress}
                                           </span>
                                         ) : (
-                                          <span key={`mob-ha-${index}`}>
+                                          anonymousMode ? (
-                                            {account?.author?.shortAddress}
+                                            <span key={`mob-ha-${index}`}>
-                                          </span>
+                                              {signerAddress?.slice(8, 20)}
+                                            </span>
+                                          ) : (
+                                            <span key={`mob-ha-${index}`}
+                                            >
+                                              {account?.author?.shortAddress}
+                                            </span>
+                                          )
                                         )
                                       }
                                     )
@@ -2055,6 +2100,11 @@ const Board = () => {
                       {displayedReplies?.map((reply, index) => {
                         const replyMediaInfo = getCommentMediaInfo(reply);
                         const shortParentCid = findShortParentCid(reply.parentCid, selectedFeed);
+                        let storedSigners = JSON.parse(localStorage.getItem('storedSigners')) || {};
+                        let signerAddress;
+                        if (storedSigners[selectedThreadCidRef]) {
+                          signerAddress = storedSigners[selectedThreadCidRef].address;
+                        }
                         return (
                         <div key={`mob-rc-${index}`} className="reply-container">
                           <div key={`mob-pr-${index}`} className="post-reply post-reply-mobile">
@@ -2083,13 +2133,19 @@ const Board = () => {
                                   (u/
                                     {reply.author?.shortAddress ?
                                       (
-                                      <span key={`mob-ha-${index}`} className="highlight-address-mobile">
+                                        <span key={`mob-ha-${index}`} className="highlight-address-mobile">
-                                        {reply.author?.shortAddress}
+                                          {reply.author?.shortAddress}
-                                      </span>
-                                      ) : (
-                                        <span key={`mob-ha-${index}`}>
-                                          {account?.author?.shortAddress}
                                         </span>
+                                      ) : (
+                                        anonymousMode ? (
+                                          <span key={`mob-ha-${index}`}>
+                                            {signerAddress?.slice(8, 20)}
+                                          </span>
+                                          ) : (
+                                          <span key={`mob-ha-${index}`}>
+                                            {account?.author?.shortAddress}
+                                          </span>
+                                        )
                                       )
                                     }
                                   )&nbsp;

src/components/views/Thread.jsx

@@ -344,15 +344,46 @@ const Thread = () => {
     }));
 
     setTriggerPublishComment(true);
-    setExecuteAnonMode(false);
   };
 
-
+  
   useEffect(() => {
-    if (anonymousMode) {
+    const updateSigner = async () => {
-      setExecuteAnonMode(true);
+      if (anonymousMode) {
-    }
+        setExecuteAnonMode(true);
-  }, [anonymousMode, selectedThread]);
+  
+        let storedSigners = JSON.parse(localStorage.getItem('storedSigners')) || {};
+        let signer;
+  
+        if (!storedSigners[selectedThread]) {
+          signer = await account.plebbit.createSigner();
+          storedSigners[selectedThread] = { privateKey: signer.privateKey, address: signer.address };
+          localStorage.setItem('storedSigners', JSON.stringify(storedSigners));
+          
+        } else {
+          const signerPrivateKey = storedSigners[selectedThread].privateKey;
+          
+          try {
+            signer = await account.plebbit.createSigner({type: 'ed25519', privateKey: signerPrivateKey});
+          } catch (error) {
+            setNewErrorMessage(error);
+          }
+        }
+        
+        setPublishCommentOptions((prevPublishCommentOptions) => ({
+          ...prevPublishCommentOptions,
+          signer,
+          author: {
+            ...prevPublishCommentOptions.author,
+            address: signer.address
+          },
+        }));
+  
+      }
+    };
+  
+    updateSigner();
+  }, [selectedThread, anonymousMode, account, setPublishCommentOptions, setNewErrorMessage]);
   
   
   useEffect(() => {
@@ -362,6 +393,7 @@ const Thread = () => {
         resetFields();
       })();
       setTriggerPublishComment(false);
+      setExecuteAnonMode(false);
     }
   }, [publishCommentOptions, triggerPublishComment, publishComment, resetFields]);
 
@@ -1039,6 +1071,11 @@ const Thread = () => {
                     const replyMediaInfo = getCommentMediaInfo(reply);
                     const fallbackImgUrl = "assets/filedeleted-res.gif";
                     const shortParentCid = findShortParentCid(reply.parentCid, comment);
+                    let storedSigners = JSON.parse(localStorage.getItem('storedSigners')) || {};
+                    let signerAddress;
+                    if (storedSigners[selectedThread]) {
+                      signerAddress = storedSigners[selectedThread].address;
+                    }
                     return (
                       <div key={`pc-${index}`} className="reply-container">
                         <div key={`sa-${index}`} className="side-arrows">{'>>'}</div>
@@ -1072,10 +1109,16 @@ const Thread = () => {
                                         {reply.author?.shortAddress}
                                       </span>
                                     ) : (
-                                      <span key={`mob-ha-${index}`}
+                                      anonymousMode ? (
-                                      >
+                                        <span key={`mob-ha-${index}`}>
-                                        {account?.author?.shortAddress}
+                                          {signerAddress?.slice(8, 20)}
-                                      </span>
+                                        </span>
+                                      ) : (
+                                        <span key={`mob-ha-${index}`}
+                                        >
+                                          {account?.author?.shortAddress}
+                                        </span>
+                                      )
                                     )
                                   }
                                 )
@@ -1551,6 +1594,11 @@ const Thread = () => {
                   {sortedReplies.map((reply, index) => {
                     const replyMediaInfo = getCommentMediaInfo(reply);
                     const shortParentCid = findShortParentCid(reply.parentCid, comment);
+                    let storedSigners = JSON.parse(localStorage.getItem('storedSigners')) || {};
+                    let signerAddress;
+                    if (storedSigners[selectedThread]) {
+                      signerAddress = storedSigners[selectedThread].address;
+                    }
                     return (
                     <div key={`mob-rc-${index}`} className="reply-container">
                       <div key={`mob-pr-${index}`} className="post-reply post-reply-mobile">
@@ -1579,13 +1627,19 @@ const Thread = () => {
                               (u/
                                 {reply.author?.shortAddress ?
                                   (
-                                  <span key={`mob-ha-${index}`} className="highlight-address-mobile">
+                                    <span key={`mob-ha-${index}`} className="highlight-address-mobile">
-                                    {reply.author?.shortAddress}
+                                      {reply.author?.shortAddress}
-                                  </span>
-                                  ) : (
-                                    <span key={`mob-ha-${index}`}>
-                                      {account?.author?.shortAddress}
                                     </span>
+                                  ) : (
+                                    anonymousMode ? (
+                                      <span key={`mob-ha-${index}`}>
+                                        {signerAddress?.slice(8, 20)}
+                                      </span>
+                                      ) : (
+                                      <span key={`mob-ha-${index}`}>
+                                        {account?.author?.shortAddress}
+                                      </span>
+                                    )
                                   )
                                 }
                               )

src/hooks/useAnonMode.js

@@ -1,38 +1,28 @@
 import { useEffect } from "react";
-import { createAccount, setActiveAccount, useAccounts } from "@plebbit/plebbit-react-hooks";
+import { useAccount } from "@plebbit/plebbit-react-hooks";
 import useAnonModeStore from "./stores/useAnonModeStore";
 
 const useAnonMode = (threadCid, execute) => {
-  const { accounts } = useAccounts();
+  const { account } = useAccount();
   const { anonymousMode } = useAnonModeStore();
 
-  useEffect(() => {
+useEffect(() => {
-    const handleAnonMode = async () => {
+  const handleAnonMode = async () => {
-      let storedAccounts = JSON.parse(localStorage.getItem('storedAccounts')) || {};
+    let storedSigners = JSON.parse(localStorage.getItem('storedSigners')) || {};
 
-      if (!anonymousMode) return;
+    if (!anonymousMode) {
-
+      if (execute && storedSigners[threadCid]) {
-      if (!storedAccounts[threadCid] && execute) {
+        const signerPrivateKey = storedSigners[threadCid];
-        await createAccount();
+        await account.plebbit.createSigner({privateKey: signerPrivateKey});
-
-        if(accounts.length === 0) {
-          console.log("No accounts available");
-          return;
-        }
-        
-        const lastAccount = accounts[accounts.length - 1];
-        await setActiveAccount(lastAccount.name);
-        storedAccounts[threadCid] = lastAccount.name;
-
-        localStorage.setItem('storedAccounts', JSON.stringify(storedAccounts));
-      } else {
-        await setActiveAccount(storedAccounts[threadCid]);
       }
     }
+  }
+
+  handleAnonMode();
+}, [threadCid, execute, account, anonymousMode]);
 
-    handleAnonMode();
-  }, [threadCid, execute, accounts, anonymousMode]);
 
   return;
 }
+
 export default useAnonMode;

src/hooks/useAnonModeRef.js

@@ -1,31 +1,31 @@
 import { useEffect } from "react";
-import { createAccount, setActiveAccount, useAccounts } from "@plebbit/plebbit-react-hooks";
+import { setActiveAccount, useAccount } from "@plebbit/plebbit-react-hooks";
 import useAnonModeStore from "./stores/useAnonModeStore";
 
 const useAnonModeRef = (threadCidRef, execute) => {
-  const {accounts} = useAccounts();
+  const { account } = useAccount();
   const { anonymousMode } = useAnonModeStore();
 
   useEffect(() => {
     const handleAnonMode = async () => {
-      let storedAccounts = JSON.parse(localStorage.getItem('storedAccounts')) || {};
+      let storedSigners = JSON.parse(localStorage.getItem('storedSigners')) || {};
 
       if (!anonymousMode) return;
 
-      if (!storedAccounts[threadCidRef.current] && execute) {
+      if (!storedSigners[threadCidRef] && execute) {
-        await createAccount();
+        const signer = await account.plebbit.createSigner();
-        const lastAccount = accounts[accounts.length - 1];
+        storedSigners[threadCidRef] = signer.privateKey;
-        await setActiveAccount(lastAccount.name);
-        storedAccounts[threadCidRef.current] = lastAccount.name;
 
-        localStorage.setItem('storedAccounts', JSON.stringify(storedAccounts));
+        localStorage.setItem('storedSigners', JSON.stringify(storedSigners));
       } else {
-        await setActiveAccount(storedAccounts[threadCidRef.current]);
+        const signerPrivateKey = storedSigners[threadCidRef];
+        const signer = await account.plebbit.createSigner({privateKey: signerPrivateKey});
+        await setActiveAccount(account, {signer});
       }
     }
 
     handleAnonMode();
-  }, [threadCidRef, execute, accounts, anonymousMode]);
+  }, [threadCidRef, execute, account, anonymousMode]);
 
   return;
 }