fix(anon mode): refreshing page could generate a new anon address for thread

src/hooks/use-anon-mode.ts

@@ -1,47 +1,42 @@
 import { useAccount } from '@plebbit/plebbit-react-hooks';
 import useAnonModeStore from '../stores/use-anon-mode-store';
-import { useCallback, useMemo } from 'react';
+import { useCallback } from 'react';
 
 const useAnonMode = (postCid?: string) => {
-  const { anonMode, threadSigners, setThreadSigner, setAddressSigner, getAddressSigner } = useAnonModeStore((state) => ({
+  const { anonMode, getThreadSigner, setThreadSigner, setAddressSigner, getAddressSigner } = useAnonModeStore((state) => ({
     anonMode: state.anonMode,
-    threadSigners: state.threadSigners,
+    getThreadSigner: state.getThreadSigner,
     setThreadSigner: state.setThreadSigner,
     setAddressSigner: state.setAddressSigner,
     getAddressSigner: state.getAddressSigner,
   }));
 
-  const threadSigner = useMemo(() => (postCid ? threadSigners[postCid] : undefined), [postCid, threadSigners]);
-
   const account = useAccount();
 
   const getNewSigner = useCallback(async () => {
     if (anonMode) {
-      if (!postCid || !threadSigner) {
-        try {
-          const signer = await account?.plebbit.createSigner();
-          if (signer) {
-            if (postCid) {
-              setThreadSigner(postCid, signer);
-            } else {
-              setAddressSigner(signer);
-            }
+      if (postCid) {
+        const existingSigner = getThreadSigner(postCid);
+        if (existingSigner) {
+          return existingSigner;
+        }
+      }
+      try {
+        const signer = await account?.plebbit.createSigner();
+        if (signer) {
+          if (postCid) {
+            setThreadSigner(postCid, signer);
+          } else {
+            setAddressSigner(signer);
           }
-          return signer;
-        } catch (error) {
-          console.error('Failed to create anonymous signer:', error);
-        }
-      } else {
-        try {
-          const signer = await account?.plebbit.createSigner({ type: 'ed25519', privateKey: threadSigner?.privateKey });
-          return signer;
-        } catch (error) {
-          console.error('Failed to retrieve anonymous signer:', error);
         }
+        return signer;
+      } catch (error) {
+        console.error('Failed to create anonymous signer:', error);
       }
     }
     return null;
-  }, [anonMode, postCid, threadSigner, account, setThreadSigner, setAddressSigner]);
+  }, [anonMode, postCid, account, getThreadSigner, setThreadSigner, setAddressSigner]);
 
   const getExistingSigner = useCallback(
     (address: string) => {

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

@@ -29,40 +29,53 @@ const useAnonModeStore = create<AnonModeState>((set, get) => ({
     set((state) => ({
       threadSigners: { ...state.threadSigners, [postCid]: signer },
     }));
-    anonModeStore.setItem(postCid, signer);
+    anonModeStore.setItem(`threadSigner_${postCid}`, signer);
+  },
+  getThreadSigner: (postCid: string) => {
+    const state = get();
+    if (state.threadSigners[postCid]) {
+      return state.threadSigners[postCid];
+    }
+    return null;
   },
-  getThreadSigner: (postCid: string) => get().threadSigners[postCid],
   setAddressSigner: (signer: any) => {
     set((state) => ({
       addressSigners: { ...state.addressSigners, [signer.address]: signer },
     }));
-    anonModeStore.setItem(signer.address, signer);
+    anonModeStore.setItem(`addressSigner_${signer.address}`, signer);
+  },
+  getAddressSigner: (address: string) => {
+    const state = get();
+    if (state.addressSigners[address]) {
+      return state.addressSigners[address];
+    }
+    return null;
   },
-  getAddressSigner: (address: string) => get().addressSigners[address],
-  currentAnonSignerAddress: null,
 }));
 
 const initializeAnonModeStore = async () => {
   const entries: [string, any][] = await anonModeStore.entries();
   const threadSigners: { [key: string]: any } = {};
   const addressSigners: { [key: string]: any } = {};
-  let anonMode = true; // Default value
+  let anonMode = true;
 
   entries.forEach(([key, value]) => {
     if (key === 'anonMode') {
       anonMode = value;
-    } else if (value.address) {
-      addressSigners[value.address] = value;
-    } else {
-      threadSigners[key] = value;
+    } else if (key.startsWith('threadSigner_')) {
+      const postCid = key.replace('threadSigner_', '');
+      threadSigners[postCid] = value;
+    } else if (key.startsWith('addressSigner_')) {
+      const address = key.replace('addressSigner_', '');
+      addressSigners[address] = value;
     }
   });
 
-  useAnonModeStore.setState((state) => ({
-    anonMode, // Set the retrieved anonMode state
-    threadSigners: { ...threadSigners, ...state.threadSigners },
-    addressSigners: { ...addressSigners, ...state.addressSigners },
-  }));
+  useAnonModeStore.setState({
+    anonMode,
+    threadSigners,
+    addressSigners,
+  });
 };
 
 initializeAnonModeStore();