From 51e3ef8506bb8288281995a2d9f2e0abed1f34a1 Mon Sep 17 00:00:00 2001 From: "Tom (plebeius.eth)" Date: Fri, 30 Aug 2024 21:18:39 +0200 Subject: [PATCH] display anon mode address immediately upon publishing --- src/components/post-desktop/post-desktop.tsx | 8 ++++++- src/components/post-mobile/post-mobile.tsx | 9 ++++++-- src/components/reply-modal/reply-modal.tsx | 23 +++++++++++++------- src/hooks/use-anon-mode.ts | 11 ++++++++-- src/stores/use-anon-mode-store.ts | 10 +++++++++ 5 files changed, 48 insertions(+), 13 deletions(-) diff --git a/src/components/post-desktop/post-desktop.tsx b/src/components/post-desktop/post-desktop.tsx index 972d2e41..11ac1e86 100644 --- a/src/components/post-desktop/post-desktop.tsx +++ b/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 }); diff --git a/src/components/post-mobile/post-mobile.tsx b/src/components/post-mobile/post-mobile.tsx index 3d6bfcf6..430dbe00 100644 --- a/src/components/post-mobile/post-mobile.tsx +++ b/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); diff --git a/src/components/reply-modal/reply-modal.tsx b/src/components/reply-modal/reply-modal.tsx index 1bae61b3..f053f365 100644 --- a/src/components/reply-modal/reply-modal.tsx +++ b/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() || ''; diff --git a/src/hooks/use-anon-mode.ts b/src/hooks/use-anon-mode.ts index e932ded5..22f0bc65 100644 --- a/src/hooks/use-anon-mode.ts +++ b/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 }; diff --git a/src/stores/use-anon-mode-store.ts b/src/stores/use-anon-mode-store.ts index 2d35667c..e9448766 100644 --- a/src/stores/use-anon-mode-store.ts +++ b/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((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, })); };