diff --git a/src/components/modals/ReplyModal.jsx b/src/components/modals/ReplyModal.jsx index 328a3807..d761d328 100755 --- a/src/components/modals/ReplyModal.jsx +++ b/src/components/modals/ReplyModal.jsx @@ -1,10 +1,12 @@ import React, { useCallback, useEffect, useRef, useState } from 'react'; import { useAccount, usePublishComment } from '@plebbit/plebbit-react-hooks'; -import { StyledModal } from '../styled/modals/ReplyModal.styled'; -import useGeneralStore from '../../hooks/stores/useGeneralStore'; import Modal from 'react-modal'; import Draggable from 'react-draggable'; +import { StyledModal } from '../styled/modals/ReplyModal.styled'; +import useAnonMode from '../../hooks/useAnonMode'; import useError from '../../hooks/useError'; +import useAnonModeStore from '../../hooks/stores/useAnonModeStore'; +import useGeneralStore from '../../hooks/stores/useGeneralStore'; const ReplyModal = ({ isOpen, closeModal }) => { @@ -24,6 +26,8 @@ const ReplyModal = ({ isOpen, closeModal }) => { triggerInsertion, } = useGeneralStore(state => state); + const { anonymousMode } = useAnonModeStore(); + const account = useAccount(); const [, setNewErrorMessage] = useError(); @@ -35,7 +39,10 @@ const ReplyModal = ({ isOpen, closeModal }) => { const [triggerPublishComment, setTriggerPublishComment] = useState(false); const [isMobile, setIsMobile] = useState(window.innerWidth <= 480); + const [executeAnonMode, setExecuteAnonMode] = useState(false); + useAnonMode(selectedParentCid, anonymousMode && executeAnonMode); + useEffect(() => { const handleResize = () => setIsMobile(window.innerWidth <= 480); @@ -179,6 +186,45 @@ const ReplyModal = ({ isOpen, closeModal }) => { setTriggerPublishComment(true); }; + + + useEffect(() => { + const updateSigner = async () => { + if (anonymousMode) { + setExecuteAnonMode(true); + + let storedSigners = JSON.parse(localStorage.getItem('storedSigners')) || {}; + let signer; + + if (!storedSigners[selectedParentCid]) { + signer = await account.plebbit.createSigner(); + storedSigners[selectedParentCid] = { privateKey: signer.privateKey, address: signer.address }; + localStorage.setItem('storedSigners', JSON.stringify(storedSigners)); + + } else { + const signerPrivateKey = storedSigners[selectedParentCid].privateKey; + + try { + signer = await account.plebbit.createSigner({type: 'ed25519', privateKey: signerPrivateKey}); + } catch (error) { + setNewErrorMessage(error); + } + } + + setPublishCommentOptions((prevPublishCommentOptions) => ({ + ...prevPublishCommentOptions, + signer, + author: { + ...prevPublishCommentOptions.author, + address: signer.address + }, + })); + + } + }; + + updateSigner(); + }, [selectedParentCid, anonymousMode, account, setPublishCommentOptions, setNewErrorMessage]); useEffect(() => { @@ -189,6 +235,7 @@ const ReplyModal = ({ isOpen, closeModal }) => { closeModal(); })(); setTriggerPublishComment(false); + setExecuteAnonMode(false); } }, [publishCommentOptions, triggerPublishComment, publishComment, resetFields, closeModal]); diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx index b10a29f3..7f560256 100755 --- a/src/components/views/Board.jsx +++ b/src/components/views/Board.jsx @@ -377,15 +377,47 @@ const Board = () => { })); setTriggerPublishComment(true); - setExecuteAnonMode(false); }; useEffect(() => { - if (anonymousMode) { - setExecuteAnonMode(true); - } - }, [anonymousMode, selectedThreadCidRef]); + const updateSigner = async () => { + if (anonymousMode) { + setExecuteAnonMode(true); + + let storedSigners = JSON.parse(localStorage.getItem('storedSigners')) || {}; + let signer; + + if (!storedSigners[selectedThreadCidRef]) { + signer = await account.plebbit.createSigner(); + storedSigners[selectedThreadCidRef] = { privateKey: signer.privateKey, address: signer.address }; + localStorage.setItem('storedSigners', JSON.stringify(storedSigners)); + + } else { + const signerPrivateKey = storedSigners[selectedThreadCidRef].privateKey; + + try { + signer = await account.plebbit.createSigner({type: 'ed25519', privateKey: signerPrivateKey}); + } catch (error) { + setNewErrorMessage(error); + } + } + + setPublishCommentOptions((prevPublishCommentOptions) => ({ + ...prevPublishCommentOptions, + signer, + author: { + ...prevPublishCommentOptions.author, + address: signer.address + }, + })); + + } + }; + + updateSigner(); + }, [selectedThreadCidRef, anonymousMode, account, setPublishCommentOptions, setNewErrorMessage]); + useEffect(() => { @@ -395,6 +427,7 @@ const Board = () => { resetFields(); })(); setTriggerPublishComment(false); + setExecuteAnonMode(false); } }, [publishCommentOptions, triggerPublishComment, publishComment, resetFields]); @@ -1386,6 +1419,11 @@ const Board = () => { const replyMediaInfo = getCommentMediaInfo(reply); const fallbackImgUrl = "assets/filedeleted-res.gif"; const shortParentCid = findShortParentCid(reply.parentCid, selectedFeed); + let storedSigners = JSON.parse(localStorage.getItem('storedSigners')) || {}; + let signerAddress; + if (storedSigners[reply.parentCid]) { + signerAddress = storedSigners[reply.parentCid].address; + } return (
{'>>'}
@@ -1418,9 +1456,16 @@ const Board = () => { {reply.author?.shortAddress} ) : ( - - {account?.author?.shortAddress} - + anonymousMode ? ( + + {signerAddress?.slice(8, 20)} + + ) : ( + + {account?.author?.shortAddress} + + ) ) } ) @@ -2055,6 +2100,11 @@ const Board = () => { {displayedReplies?.map((reply, index) => { const replyMediaInfo = getCommentMediaInfo(reply); const shortParentCid = findShortParentCid(reply.parentCid, selectedFeed); + let storedSigners = JSON.parse(localStorage.getItem('storedSigners')) || {}; + let signerAddress; + if (storedSigners[selectedThreadCidRef]) { + signerAddress = storedSigners[selectedThreadCidRef].address; + } return (
@@ -2083,13 +2133,19 @@ const Board = () => { (u/ {reply.author?.shortAddress ? ( - - {reply.author?.shortAddress} - - ) : ( - - {account?.author?.shortAddress} + + {reply.author?.shortAddress} + ) : ( + anonymousMode ? ( + + {signerAddress?.slice(8, 20)} + + ) : ( + + {account?.author?.shortAddress} + + ) ) } )  diff --git a/src/components/views/Thread.jsx b/src/components/views/Thread.jsx index a84d3cfb..6a47a3bc 100755 --- a/src/components/views/Thread.jsx +++ b/src/components/views/Thread.jsx @@ -344,15 +344,46 @@ const Thread = () => { })); setTriggerPublishComment(true); - setExecuteAnonMode(false); }; - + useEffect(() => { - if (anonymousMode) { - setExecuteAnonMode(true); - } - }, [anonymousMode, selectedThread]); + const updateSigner = async () => { + if (anonymousMode) { + setExecuteAnonMode(true); + + let storedSigners = JSON.parse(localStorage.getItem('storedSigners')) || {}; + let signer; + + if (!storedSigners[selectedThread]) { + signer = await account.plebbit.createSigner(); + storedSigners[selectedThread] = { privateKey: signer.privateKey, address: signer.address }; + localStorage.setItem('storedSigners', JSON.stringify(storedSigners)); + + } else { + const signerPrivateKey = storedSigners[selectedThread].privateKey; + + try { + signer = await account.plebbit.createSigner({type: 'ed25519', privateKey: signerPrivateKey}); + } catch (error) { + setNewErrorMessage(error); + } + } + + setPublishCommentOptions((prevPublishCommentOptions) => ({ + ...prevPublishCommentOptions, + signer, + author: { + ...prevPublishCommentOptions.author, + address: signer.address + }, + })); + + } + }; + + updateSigner(); + }, [selectedThread, anonymousMode, account, setPublishCommentOptions, setNewErrorMessage]); useEffect(() => { @@ -362,6 +393,7 @@ const Thread = () => { resetFields(); })(); setTriggerPublishComment(false); + setExecuteAnonMode(false); } }, [publishCommentOptions, triggerPublishComment, publishComment, resetFields]); @@ -1039,6 +1071,11 @@ const Thread = () => { const replyMediaInfo = getCommentMediaInfo(reply); const fallbackImgUrl = "assets/filedeleted-res.gif"; const shortParentCid = findShortParentCid(reply.parentCid, comment); + let storedSigners = JSON.parse(localStorage.getItem('storedSigners')) || {}; + let signerAddress; + if (storedSigners[selectedThread]) { + signerAddress = storedSigners[selectedThread].address; + } return (
{'>>'}
@@ -1072,10 +1109,16 @@ const Thread = () => { {reply.author?.shortAddress} ) : ( - - {account?.author?.shortAddress} - + anonymousMode ? ( + + {signerAddress?.slice(8, 20)} + + ) : ( + + {account?.author?.shortAddress} + + ) ) } ) @@ -1551,6 +1594,11 @@ const Thread = () => { {sortedReplies.map((reply, index) => { const replyMediaInfo = getCommentMediaInfo(reply); const shortParentCid = findShortParentCid(reply.parentCid, comment); + let storedSigners = JSON.parse(localStorage.getItem('storedSigners')) || {}; + let signerAddress; + if (storedSigners[selectedThread]) { + signerAddress = storedSigners[selectedThread].address; + } return (
@@ -1579,13 +1627,19 @@ const Thread = () => { (u/ {reply.author?.shortAddress ? ( - - {reply.author?.shortAddress} - - ) : ( - - {account?.author?.shortAddress} + + {reply.author?.shortAddress} + ) : ( + anonymousMode ? ( + + {signerAddress?.slice(8, 20)} + + ) : ( + + {account?.author?.shortAddress} + + ) ) } ) diff --git a/src/hooks/useAnonMode.js b/src/hooks/useAnonMode.js index 03b6aa80..2d998309 100644 --- a/src/hooks/useAnonMode.js +++ b/src/hooks/useAnonMode.js @@ -1,38 +1,28 @@ import { useEffect } from "react"; -import { createAccount, setActiveAccount, useAccounts } from "@plebbit/plebbit-react-hooks"; +import { useAccount } from "@plebbit/plebbit-react-hooks"; import useAnonModeStore from "./stores/useAnonModeStore"; const useAnonMode = (threadCid, execute) => { - const { accounts } = useAccounts(); + const { account } = useAccount(); const { anonymousMode } = useAnonModeStore(); - useEffect(() => { - const handleAnonMode = async () => { - let storedAccounts = JSON.parse(localStorage.getItem('storedAccounts')) || {}; +useEffect(() => { + const handleAnonMode = async () => { + let storedSigners = JSON.parse(localStorage.getItem('storedSigners')) || {}; - if (!anonymousMode) return; - - if (!storedAccounts[threadCid] && execute) { - await createAccount(); - - if(accounts.length === 0) { - console.log("No accounts available"); - return; - } - - 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]); + if (!anonymousMode) { + if (execute && storedSigners[threadCid]) { + const signerPrivateKey = storedSigners[threadCid]; + await account.plebbit.createSigner({privateKey: signerPrivateKey}); } } + } + + handleAnonMode(); +}, [threadCid, execute, account, anonymousMode]); - handleAnonMode(); - }, [threadCid, execute, accounts, anonymousMode]); return; } + export default useAnonMode; \ No newline at end of file diff --git a/src/hooks/useAnonModeRef.js b/src/hooks/useAnonModeRef.js index ed6b12a2..adfafee9 100644 --- a/src/hooks/useAnonModeRef.js +++ b/src/hooks/useAnonModeRef.js @@ -1,31 +1,31 @@ import { useEffect } from "react"; -import { createAccount, setActiveAccount, useAccounts } from "@plebbit/plebbit-react-hooks"; +import { setActiveAccount, useAccount } from "@plebbit/plebbit-react-hooks"; import useAnonModeStore from "./stores/useAnonModeStore"; const useAnonModeRef = (threadCidRef, execute) => { - const {accounts} = useAccounts(); + const { account } = useAccount(); const { anonymousMode } = useAnonModeStore(); useEffect(() => { const handleAnonMode = async () => { - let storedAccounts = JSON.parse(localStorage.getItem('storedAccounts')) || {}; + let storedSigners = JSON.parse(localStorage.getItem('storedSigners')) || {}; if (!anonymousMode) return; - if (!storedAccounts[threadCidRef.current] && execute) { - await createAccount(); - const lastAccount = accounts[accounts.length - 1]; - await setActiveAccount(lastAccount.name); - storedAccounts[threadCidRef.current] = lastAccount.name; + if (!storedSigners[threadCidRef] && execute) { + const signer = await account.plebbit.createSigner(); + storedSigners[threadCidRef] = signer.privateKey; - localStorage.setItem('storedAccounts', JSON.stringify(storedAccounts)); + localStorage.setItem('storedSigners', JSON.stringify(storedSigners)); } else { - await setActiveAccount(storedAccounts[threadCidRef.current]); + const signerPrivateKey = storedSigners[threadCidRef]; + const signer = await account.plebbit.createSigner({privateKey: signerPrivateKey}); + await setActiveAccount(account, {signer}); } } handleAnonMode(); - }, [threadCidRef, execute, accounts, anonymousMode]); + }, [threadCidRef, execute, account, anonymousMode]); return; }