add anon mode u/address randomization

src/components/modals/ReplyModal.jsx

@@ -4,11 +4,13 @@ import { StyledModal } from '../styled/modals/ReplyModal.styled';
 import useGeneralStore from '../../hooks/stores/useGeneralStore';
 import Modal from 'react-modal';
 import Draggable from 'react-draggable';
+import useAnonMode from '../../hooks/useAnonMode';
 import useError from '../../hooks/useError';
 
 
 const ReplyModal = ({ isOpen, closeModal }) => {
   const {
+    anonymousMode,
     captchaResponse, setCaptchaResponse,
     setChallengesArray,
     setIsCaptchaOpen,
@@ -19,6 +21,7 @@ const ReplyModal = ({ isOpen, closeModal }) => {
     selectedParentCid,
     selectedShortCid,
     selectedStyle,
+    selectedThread,
   } = useGeneralStore(state => state);
 
   const account = useAccount();
@@ -33,6 +36,9 @@ const ReplyModal = ({ isOpen, closeModal }) => {
   const [triggerPublishComment, setTriggerPublishComment] = useState(false);
   const [selectedText, setSelectedText] = useState('');
   const [isMobile, setIsMobile] = useState(window.innerWidth <= 480);
+  const [executeAnonMode, setExecuteAnonMode] = useState(false);
+
+  useAnonMode(selectedThread, anonymousMode && executeAnonMode);
   
 
   useEffect(() => {
@@ -157,6 +163,13 @@ const ReplyModal = ({ isOpen, closeModal }) => {
   
     setTriggerPublishComment(true);
   };
+
+
+  useEffect(() => {
+    if (anonymousMode) {
+      setExecuteAnonMode(true);
+    }
+  }, [anonymousMode, selectedThread]);
   
   
   useEffect(() => {

src/components/views/Board.jsx

@@ -33,6 +33,7 @@ import handleQuoteClick from '../../utils/handleQuoteClick';
 import handleQuoteHover from '../../utils/handleQuoteHover';
 import handleStyleChange from '../../utils/handleStyleChange';
 import removeHighlight from '../../utils/removeHighlight';
+import useAnonMode from '../../hooks/useAnonMode';
 import useClickForm from '../../hooks/useClickForm';
 import useError from '../../hooks/useError';
 import useStateString from '../../hooks/useStateString';
@@ -43,6 +44,7 @@ const {version} = packageJson
 
 const Board = () => {
   const {
+    anonymousMode,
     setCaptchaResponse,
     setChallengesArray,
     defaultSubplebbits,
@@ -60,7 +62,7 @@ const Board = () => {
     setSelectedParentCid,
     setSelectedShortCid,
     selectedStyle,
-    setSelectedThread,
+    selectedThread, setSelectedThread,
     selectedTitle, setSelectedTitle,
     showPostForm,
     showPostFormLink,
@@ -108,6 +110,9 @@ const Board = () => {
   const [outOfViewCid, setOutOfViewCid] = useState(null);
   const [outOfViewPosition, setOutOfViewPosition] = useState({top: 0, left: 0});
   const [postOnHoverHeight, setPostOnHoverHeight] = useState(0);
+  const [executeAnonMode, setExecuteAnonMode] = useState(false);
+
+  useAnonMode(selectedThread, anonymousMode && executeAnonMode);
 
 
   useEffect(() => {
@@ -351,6 +356,13 @@ const Board = () => {
 
     setTriggerPublishComment(true);
   };
+
+
+  useEffect(() => {
+    if (anonymousMode) {
+      setExecuteAnonMode(true);
+    }
+  }, [anonymousMode, selectedThread]);
   
   
   useEffect(() => {

src/components/views/Catalog.jsx

@@ -19,6 +19,7 @@ import OfflineIndicator from '../OfflineIndicator';
 import SettingsModal from '../modals/SettingsModal';
 import getCommentMediaInfo from '../../utils/getCommentMediaInfo';
 import handleStyleChange from '../../utils/handleStyleChange';
+import useAnonMode from '../../hooks/useAnonMode';
 import useClickForm from '../../hooks/useClickForm';
 import useError from '../../hooks/useError';
 import useStateString from '../../hooks/useStateString';
@@ -29,6 +30,7 @@ const {version} = packageJson
 
 const Catalog = () => {
   const {
+    anonymousMode,
     captchaResponse, setCaptchaResponse,
     setChallengesArray,
     defaultSubplebbits,
@@ -44,7 +46,7 @@ const Catalog = () => {
     setResolveCaptchaPromise,
     selectedAddress, setSelectedAddress,
     selectedStyle,
-    setSelectedThread,
+    selectedThread, setSelectedThread,
     selectedTitle, setSelectedTitle,
     showPostForm,
     showPostFormLink,
@@ -76,6 +78,10 @@ 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);
+
+  useAnonMode(selectedThread, anonymousMode && executeAnonMode);
+
 
 
   const { feed, hasMore, loadMore } = useFeed({subplebbitAddresses: [`${selectedAddress}`], sortType: 'active'});
@@ -273,6 +279,13 @@ const Catalog = () => {
 
     setTriggerPublishComment(true);
   };
+
+
+  useEffect(() => {
+    if (anonymousMode) {
+      setExecuteAnonMode(true);
+    }
+  }, [anonymousMode, selectedThread]);
   
   
   useEffect(() => {

src/components/views/Thread.jsx

@@ -32,6 +32,7 @@ import handleQuoteClick from '../../utils/handleQuoteClick';
 import handleQuoteHover from '../../utils/handleQuoteHover';
 import handleStyleChange from '../../utils/handleStyleChange';
 import removeHighlight from '../../utils/removeHighlight';
+import useAnonMode from '../../hooks/useAnonMode';
 import useClickForm from '../../hooks/useClickForm';
 import useError from '../../hooks/useError';
 import useStateString from '../../hooks/useStateString';
@@ -42,6 +43,7 @@ const {version} = packageJson
 
 const Thread = () => {
   const {
+    anonymousMode,
     captchaResponse, setCaptchaResponse,
     setChallengesArray,
     defaultSubplebbits,
@@ -82,6 +84,8 @@ const Thread = () => {
   const backlinkRefs = useRef({});
   const quoteRefs = useRef({});
   const postOnHoverRef = useRef(null);
+  const backlinkRefsMobile = useRef({});
+  const quoteRefsMobile = useRef({});
 
   const [triggerPublishComment, setTriggerPublishComment] = useState(false);
   const [triggerPublishCommentEdit, setTriggerPublishCommentEdit] = useState(false);
@@ -99,9 +103,9 @@ const Thread = () => {
   const [outOfViewCid, setOutOfViewCid] = useState(null);
   const [outOfViewPosition, setOutOfViewPosition] = useState({top: 0, left: 0});
   const [postOnHoverHeight, setPostOnHoverHeight] = useState(0);
-  const backlinkRefsMobile = useRef({});
+  const [executeAnonMode, setExecuteAnonMode] = useState(false);
-  const quoteRefsMobile = useRef({});
+
-  
+  useAnonMode(selectedThread, anonymousMode && executeAnonMode);
 
   const comment = useComment({commentCid: selectedThread});
   const { subplebbitAddress, threadCid } = useParams();
@@ -323,7 +327,15 @@ const Thread = () => {
     }));
 
     setTriggerPublishComment(true);
+    setExecuteAnonMode(false);
   };
+
+
+  useEffect(() => {
+    if (anonymousMode) {
+      setExecuteAnonMode(true);
+    }
+  }, [anonymousMode, selectedThread]);
   
   
   useEffect(() => {

src/hooks/useAnonMode.js

@@ -0,0 +1,28 @@
+import { useEffect } from "react";
+import { createAccount, setActiveAccount, useAccounts } from "@plebbit/plebbit-react-hooks";
+
+const useAnonMode = (threadCid, execute) => {
+  const {accounts} = useAccounts();
+
+  useEffect(() => {
+    const handleAnonMode = async () => {
+      let storedAccounts = JSON.parse(localStorage.getItem('storedAccounts')) || {};
+
+      if (!storedAccounts[threadCid] && execute) {
+        await createAccount();
+        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, accounts]);
+
+  return;
+}
+export default useAnonMode;