feat(settings): add anon mode - automatically use a different user ID in each thread

src/components/reply-modal/reply-modal.tsx

@@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from 'react';
 import { useLocation, useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import Draggable from 'react-draggable';
-import { setAccount, useAccount, useSubplebbit } from '@plebbit/plebbit-react-hooks';
+import { setAccount, useAccount, useComment, useSubplebbit } from '@plebbit/plebbit-react-hooks';
 import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
 import { getFormattedTimeAgo } from '../../lib/utils/time-utils';
 import { isValidURL } from '../../lib/utils/url-utils';
@@ -13,17 +13,19 @@ import useIsMobile from '../../hooks/use-is-mobile';
 import styles from './reply-modal.module.css';
 import { LinkTypePreviewer } from '../post-form';
 import _ from 'lodash';
+import useAnonMode from '../../hooks/use-anon-mode';
 
 interface ReplyModalProps {
   closeModal: () => void;
   parentCid: string;
+  postCid: string;
   scrollY: number;
 }
 
-const ReplyModal = ({ closeModal, parentCid, scrollY }: ReplyModalProps) => {
+const ReplyModal = ({ closeModal, parentCid, postCid, scrollY }: ReplyModalProps) => {
   const { t } = useTranslation();
   const { subplebbitAddress } = useParams() as { subplebbitAddress: string };
-  const { setContent, publishReply } = useReply({ cid: parentCid, subplebbitAddress });
+  const { setPublishReplyOptions, publishReply } = useReply({ cid: parentCid, subplebbitAddress });
   const account = useAccount();
   const { displayName } = account?.author || {};
   const [url, setUrl] = useState('');
@@ -31,7 +33,35 @@ const ReplyModal = ({ closeModal, parentCid, scrollY }: ReplyModalProps) => {
   const urlRef = useRef<HTMLInputElement>(null);
   const { selectedText } = useSelectedTextStore();
 
-  const onPublishReply = () => {
+  const { anonMode, getNewSigner, getExistingSigner } = useAnonMode(postCid);
+  const comment = useComment({ commentCid: postCid });
+  const address = comment?.author?.address;
+
+  const getAnonAddressForReply = async () => {
+    if (anonMode) {
+      const existingSigner = getExistingSigner(address);
+      if (existingSigner) {
+        setPublishReplyOptions({
+          signer: existingSigner,
+          author: {
+            displayName,
+            address: existingSigner.address,
+          },
+        });
+      } else {
+        const newSigner = (await getNewSigner()) || {};
+        setPublishReplyOptions({
+          signer: newSigner,
+          author: {
+            displayName,
+            address: newSigner.address,
+          },
+        });
+      }
+    }
+  };
+
+  const onPublishReply = async () => {
     const currentContent = textRef.current?.value || '';
     const currentUrl = urlRef.current?.value || '';
 
@@ -44,8 +74,11 @@ const ReplyModal = ({ closeModal, parentCid, scrollY }: ReplyModalProps) => {
       alert('The provided link is not a valid URL.');
       return;
     }
-    publishReply();
-    closeModal();
+
+    getAnonAddressForReply().then(() => {
+      publishReply();
+      closeModal();
+    });
   };
 
   const nodeRef = useRef<HTMLDivElement>(null);
@@ -109,7 +142,7 @@ const ReplyModal = ({ closeModal, parentCid, scrollY }: ReplyModalProps) => {
     // remove the prefix from the content to publish, and also add newlines for markdown
     const contentWithoutPrefix = e.target.value.slice(contentPrefix.length).replace(/\n/g, '\n\n');
     if (textRef.current && textRef.current.value !== contentWithoutPrefix) {
-      setContent.content(contentWithoutPrefix);
+      setPublishReplyOptions({ content: contentWithoutPrefix });
     }
   };
 
@@ -142,7 +175,7 @@ const ReplyModal = ({ closeModal, parentCid, scrollY }: ReplyModalProps) => {
             placeholder={_.capitalize(t('link'))}
             onChange={(e) => {
               setUrl(e.target.value);
-              setContent.link(e.target.value);
+              setPublishReplyOptions({ link: e.target.value });
             }}
           />
         </div>
@@ -169,7 +202,7 @@ const ReplyModal = ({ closeModal, parentCid, scrollY }: ReplyModalProps) => {
           <span className={styles.spoilerButton}>
             [
             <label>
-              <input type='checkbox' onChange={(e) => setContent.spoiler(e.target.checked)} />
+              <input type='checkbox' onChange={(e) => setPublishReplyOptions({ spoiler: e.target.checked })} />
               {_.capitalize(t('spoiler'))}?
             </label>
             ]