display anon mode address immediately upon publishing

src/components/post-desktop/post-desktop.tsx

@@ -9,6 +9,8 @@ import { hashStringToColor, getTextColorForBackground } from '../../lib/utils/po
 import { getFormattedDate, getFormattedTimeAgo } from '../../lib/utils/time-utils';
 import { isValidURL } from '../../lib/utils/url-utils';
 import { isAllView, isPendingPostView, isPostPageView, isSubscriptionsView } from '../../lib/utils/view-utils';
+import useAnonModeStore from '../../stores/use-anon-mode-store';
+import useAnonMode from '../../hooks/use-anon-mode';
 import useAuthorAddressClick from '../../hooks/use-author-address-click';
 import useEditCommentPrivileges from '../../hooks/use-author-privileges';
 import useCountLinksInReplies from '../../hooks/use-count-links-in-replies';
@@ -64,8 +66,12 @@ const PostInfo = ({ openReplyModal, post, postReplyCount = 0, roles, isHidden }:
   const isInPostPageView = isPostPageView(location.pathname, params);
   const isInSubscriptionsView = isSubscriptionsView(location.pathname, params);
 
+  // comment.author.shortAddress is undefined while the comment publishing state is pending, use account instead
+  // in anon mode, use the newly generated signer.address instead, which will be comment.author.address
+  const { anonMode } = useAnonMode();
+  const { currentAnonSignerAddress } = useAnonModeStore();
   const account = useAccount();
-  const accountShortAddress = account?.author?.shortAddress; // if reply by account is pending, it doesn't have an author yet
+  const accountShortAddress = anonMode ? currentAnonSignerAddress && Plebbit.getShortAddress(currentAnonSignerAddress) : account?.author?.shortAddress;
 
   const { isCommentAuthorMod, isAccountMod, isAccountCommentAuthor } = useEditCommentPrivileges({ commentAuthorAddress: address, subplebbitAddress });
 

src/components/post-mobile/post-mobile.tsx

@@ -8,6 +8,8 @@ import { getCommentMediaInfo, getHasThumbnail } from '../../lib/utils/media-util
 import { getTextColorForBackground, hashStringToColor } from '../../lib/utils/post-utils';
 import { getFormattedDate, getFormattedTimeAgo } from '../../lib/utils/time-utils';
 import { isAllView, isPendingPostView, isPostPageView, isSubscriptionsView } from '../../lib/utils/view-utils';
+import useAnonModeStore from '../../stores/use-anon-mode-store';
+import useAnonMode from '../../hooks/use-anon-mode';
 import useAuthorAddressClick from '../../hooks/use-author-address-click';
 import useCountLinksInReplies from '../../hooks/use-count-links-in-replies';
 import useHide from '../../hooks/use-hide';
@@ -44,9 +46,12 @@ const PostInfoAndMedia = ({ openReplyModal, post, postReplyCount = 0, roles }: P
 
   const isReply = parentCid;
 
-  // pending reply by account is not yet published
+  // comment.author.shortAddress is undefined while the comment publishing state is pending, use account instead
+  // in anon mode, use the newly generated signer.address instead, which will be comment.author.address
+  const { anonMode } = useAnonMode();
+  const { currentAnonSignerAddress } = useAnonModeStore();
   const account = useAccount();
-  const accountShortAddress = account?.author?.shortAddress;
+  const accountShortAddress = anonMode ? currentAnonSignerAddress && Plebbit.getShortAddress(currentAnonSignerAddress) : account?.author?.shortAddress;
 
   const stateString = useStateString(post);
 

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

@@ -15,6 +15,7 @@ import styles from './reply-modal.module.css';
 import { LinkTypePreviewer } from '../post-form';
 import _ from 'lodash';
 import useAnonMode from '../../hooks/use-anon-mode';
+import useAnonModeStore from '../../stores/use-anon-mode-store';
 
 interface ReplyModalProps {
   closeModal: () => void;
@@ -40,6 +41,8 @@ const ReplyModal = ({ closeModal, showReplyModal, parentCid, postCid, scrollY, s
   const address = comment?.author?.address;
 
   const hasCalledAnonAddressRef = useRef(false);
+  const { setCurrentAnonSignerAddress } = useAnonModeStore();
+
   const getAnonAddressForReply = useCallback(async () => {
     if (anonMode && !hasCalledAnonAddressRef.current) {
       hasCalledAnonAddressRef.current = true;
@@ -52,18 +55,22 @@ const ReplyModal = ({ closeModal, showReplyModal, parentCid, postCid, scrollY, s
             displayName: displayName || undefined,
           },
         });
+        setCurrentAnonSignerAddress(existingSigner.address);
       } else {
         const newSigner = await getNewSigner();
-        setPublishReplyOptions({
-          signer: newSigner,
-          author: {
-            address: newSigner.address,
-            displayName: displayName || undefined,
-          },
-        });
+        if (newSigner) {
+          setPublishReplyOptions({
+            signer: newSigner,
+            author: {
+              address: newSigner.address,
+              displayName: displayName || undefined,
+            },
+          });
+          setCurrentAnonSignerAddress(newSigner.address);
+        }
       }
     }
-  }, [address, getExistingSigner, getNewSigner, setPublishReplyOptions, anonMode, displayName]);
+  }, [address, getExistingSigner, getNewSigner, setPublishReplyOptions, anonMode, displayName, setCurrentAnonSignerAddress]);
 
   const onPublishReply = () => {
     const currentContent = textRef.current?.value.slice(contentPrefix.length).trim() || '';

src/hooks/use-anon-mode.ts

@@ -2,12 +2,13 @@ import { useAccount } from '@plebbit/plebbit-react-hooks';
 import useAnonModeStore from '../stores/use-anon-mode-store';
 
 const useAnonMode = (postCid?: string) => {
-  const { anonMode, threadSigners, setThreadSigner, setAddressSigner, getAddressSigner } = useAnonModeStore((state) => ({
+  const { anonMode, threadSigners, setThreadSigner, setAddressSigner, getAddressSigner, setCurrentAnonSignerAddress } = useAnonModeStore((state) => ({
     anonMode: state.anonMode,
     threadSigners: state.threadSigners,
     setThreadSigner: state.setThreadSigner,
     setAddressSigner: state.setAddressSigner,
     getAddressSigner: state.getAddressSigner,
+    setCurrentAnonSignerAddress: state.setCurrentAnonSignerAddress,
   }));
 
   const threadSigner = postCid ? threadSigners[postCid] : undefined;
@@ -25,6 +26,7 @@ const useAnonMode = (postCid?: string) => {
             } else {
               setAddressSigner(signer);
             }
+            setCurrentAnonSignerAddress(signer.address);
           }
           return signer;
         } catch (error) {
@@ -33,6 +35,7 @@ const useAnonMode = (postCid?: string) => {
       } else {
         try {
           const signer = await account?.plebbit.createSigner({ type: 'ed25519', privateKey: threadSigner?.privateKey });
+          setCurrentAnonSignerAddress(signer.address);
           return signer;
         } catch (error) {
           console.error('Failed to retrieve anonymous signer:', error);
@@ -43,7 +46,11 @@ const useAnonMode = (postCid?: string) => {
   };
 
   const getExistingSigner = (address: string) => {
-    return getAddressSigner(address);
+    const signer = getAddressSigner(address);
+    if (signer) {
+      setCurrentAnonSignerAddress(signer.address);
+    }
+    return signer;
   };
 
   return { anonMode, getNewSigner, getExistingSigner };

src/stores/use-anon-mode-store.ts

@@ -10,6 +10,8 @@ interface AnonModeState {
   getThreadSigner: (postCid: string) => any | undefined;
   setAddressSigner: (signer: any) => void;
   getAddressSigner: (address: string) => any | undefined;
+  currentAnonSignerAddress: string | null;
+  setCurrentAnonSignerAddress: (address: string | null) => void;
 }
 
 const anonModeStore = localForageLru.createInstance({
@@ -39,6 +41,11 @@ const useAnonModeStore = create<AnonModeState>((set, get) => ({
     anonModeStore.setItem(signer.address, signer);
   },
   getAddressSigner: (address: string) => get().addressSigners[address],
+  currentAnonSignerAddress: null,
+  setCurrentAnonSignerAddress: (address: string | null) => {
+    set({ currentAnonSignerAddress: address });
+    anonModeStore.setItem('currentAnonSignerAddress', address);
+  },
 }));
 
 const initializeAnonModeStore = async () => {
@@ -57,10 +64,13 @@ const initializeAnonModeStore = async () => {
     }
   });
 
+  const currentAnonSignerAddress = await anonModeStore.getItem('currentAnonSignerAddress');
+
   useAnonModeStore.setState((state) => ({
     anonMode, // Set the retrieved anonMode state
     threadSigners: { ...threadSigners, ...state.threadSigners },
     addressSigners: { ...addressSigners, ...state.addressSigners },
+    currentAnonSignerAddress: currentAnonSignerAddress || null,
   }));
 };