diff --git a/src/components/modals/ReplyModal.jsx b/src/components/modals/ReplyModal.jsx
index 46c28adc..34a79580 100755
--- a/src/components/modals/ReplyModal.jsx
+++ b/src/components/modals/ReplyModal.jsx
@@ -8,332 +8,310 @@ import useError from '../../hooks/useError';
import useAnonModeStore from '../../hooks/stores/useAnonModeStore';
import useGeneralStore from '../../hooks/stores/useGeneralStore';
-
const ReplyModal = ({ isOpen, closeModal }) => {
- const {
- captchaResponse, setCaptchaResponse,
- setChallengesArray,
- setIsCaptchaOpen,
- setPendingComment,
- setPendingCommentIndex,
- replyQuoteCid,
- setResolveCaptchaPromise,
- selectedAddress,
- selectedParentCid,
- selectedShortCid,
- selectedStyle,
- selectedText, setSelectedText,
- triggerInsertion,
- } = useGeneralStore(state => state);
+ const {
+ captchaResponse,
+ setCaptchaResponse,
+ setChallengesArray,
+ setIsCaptchaOpen,
+ setPendingComment,
+ setPendingCommentIndex,
+ replyQuoteCid,
+ setResolveCaptchaPromise,
+ selectedAddress,
+ selectedParentCid,
+ selectedShortCid,
+ selectedStyle,
+ selectedText,
+ setSelectedText,
+ triggerInsertion,
+ } = useGeneralStore((state) => state);
- const { anonymousMode } = useAnonModeStore();
+ const { anonymousMode } = useAnonModeStore();
- const account = useAccount();
+ const account = useAccount();
- const [, setNewErrorMessage] = useError();
-
- const nodeRef = useRef(null);
- const nameRef = useRef();
- const commentRef = useRef();
- const linkRef = useRef();
+ const [, setNewErrorMessage] = useError();
- const [triggerPublishComment, setTriggerPublishComment] = useState(false);
- const [isMobile, setIsMobile] = useState(window.innerWidth <= 480);
- const [executeAnonMode, setExecuteAnonMode] = useState(false);
-
- useAnonMode(selectedParentCid, anonymousMode && executeAnonMode);
+ const nodeRef = useRef(null);
+ const nameRef = useRef();
+ const commentRef = useRef();
+ const linkRef = useRef();
+ const [triggerPublishComment, setTriggerPublishComment] = useState(false);
+ const [isMobile, setIsMobile] = useState(window.innerWidth <= 480);
+ const [executeAnonMode, setExecuteAnonMode] = useState(false);
- useEffect(() => {
- const handleResize = () => setIsMobile(window.innerWidth <= 480);
- window.addEventListener('resize', handleResize);
+ useAnonMode(selectedParentCid, anonymousMode && executeAnonMode);
- // Cleanup function
- return () => {
- window.removeEventListener('resize', handleResize);
- };
- }, [setIsMobile]);
+ useEffect(() => {
+ const handleResize = () => setIsMobile(window.innerWidth <= 480);
+ window.addEventListener('resize', handleResize);
-
- const onModalOpen = () => {
- if (commentRef.current) {
- if (selectedText) {
- commentRef.current.value += '\n';
- }
- commentRef.current.focus();
- const len = commentRef.current.value.length;
- commentRef.current.setSelectionRange(len, len);
- }
- };
-
+ // Cleanup function
+ return () => {
+ window.removeEventListener('resize', handleResize);
+ };
+ }, [setIsMobile]);
- const insertAtCursor = (inputElement, valueToInsert) => {
- const startPos = inputElement.selectionStart || inputElement.value.length;
- const endPos = startPos + valueToInsert.length;
- inputElement.setRangeText(valueToInsert, startPos, startPos, 'end');
- inputElement.setSelectionRange(endPos, endPos);
- }
+ const onModalOpen = () => {
+ if (commentRef.current) {
+ if (selectedText) {
+ commentRef.current.value += '\n';
+ }
+ commentRef.current.focus();
+ const len = commentRef.current.value.length;
+ commentRef.current.setSelectionRange(len, len);
+ }
+ };
- useEffect(() => {
- if (replyQuoteCid && commentRef.current) {
- const prefixedReplyQuoteCid = `c/${replyQuoteCid}\n`;
- insertAtCursor(commentRef.current, prefixedReplyQuoteCid);
- }
- }, [triggerInsertion, replyQuoteCid]);
-
+ const insertAtCursor = (inputElement, valueToInsert) => {
+ const startPos = inputElement.selectionStart || inputElement.value.length;
+ const endPos = startPos + valueToInsert.length;
+ inputElement.setRangeText(valueToInsert, startPos, startPos, 'end');
+ inputElement.setSelectionRange(endPos, endPos);
+ };
- const getSelectedText = useCallback(() => {
- const text = document.getSelection().toString();
- setSelectedText(text ? `>${text}\n` : '');
- }, [setSelectedText]);
+ useEffect(() => {
+ if (replyQuoteCid && commentRef.current) {
+ const prefixedReplyQuoteCid = `c/${replyQuoteCid}\n`;
+ insertAtCursor(commentRef.current, prefixedReplyQuoteCid);
+ }
+ }, [triggerInsertion, replyQuoteCid]);
+ const getSelectedText = useCallback(() => {
+ const text = document.getSelection().toString();
+ setSelectedText(text ? `>${text}\n` : '');
+ }, [setSelectedText]);
- useEffect(() => {
- if (isOpen) {
- setTimeout(getSelectedText, 0);
- } else {
- setSelectedText('');
- }
- }, [isOpen, getSelectedText, setSelectedText]);
-
+ useEffect(() => {
+ if (isOpen) {
+ setTimeout(getSelectedText, 0);
+ } else {
+ setSelectedText('');
+ }
+ }, [isOpen, getSelectedText, setSelectedText]);
- const onChallengeVerification = (challengeVerification) => {
- if (challengeVerification.challengeSuccess === true) {
- return;
- } else if (challengeVerification.challengeSuccess === false) {
- setNewErrorMessage(`Challenge Failed, reason: ${challengeVerification.reason}. Errors: ${challengeVerification.errors}`);
- console.log('challenge failed', challengeVerification);
- }
- };
+ const onChallengeVerification = (challengeVerification) => {
+ if (challengeVerification.challengeSuccess === true) {
+ return;
+ } else if (challengeVerification.challengeSuccess === false) {
+ setNewErrorMessage(`Challenge Failed, reason: ${challengeVerification.reason}. Errors: ${challengeVerification.errors}`);
+ console.log('challenge failed', challengeVerification);
+ }
+ };
+ const onChallenge = async (challenges, comment) => {
+ setPendingComment(comment);
+ let challengeAnswers = [];
- const onChallenge = async (challenges, comment) => {
- setPendingComment(comment);
- let challengeAnswers = [];
-
- try {
- challengeAnswers = await getChallengeAnswersFromUser(challenges)
- }
- catch (error) {
- setNewErrorMessage(error.message); console.log(error);
- }
- if (challengeAnswers) {
- await comment.publishChallengeAnswers(challengeAnswers)
- }
- };
+ try {
+ challengeAnswers = await getChallengeAnswersFromUser(challenges);
+ } catch (error) {
+ setNewErrorMessage(error.message);
+ console.log(error);
+ }
+ if (challengeAnswers) {
+ await comment.publishChallengeAnswers(challengeAnswers);
+ }
+ };
-
- useEffect(() => {
- setPublishCommentOptions((prevPublishCommentOptions) => ({
- ...prevPublishCommentOptions,
- subplebbitAddress: selectedAddress,
- }));
- }, [selectedAddress]);
-
-
- const [publishCommentOptions, setPublishCommentOptions] = useState({
- subplebbitAddress: selectedAddress,
- onChallenge,
- onChallengeVerification,
- onError: (error) => {
- setNewErrorMessage(error.message); console.log(error);
- },
- });
+ useEffect(() => {
+ setPublishCommentOptions((prevPublishCommentOptions) => ({
+ ...prevPublishCommentOptions,
+ subplebbitAddress: selectedAddress,
+ }));
+ }, [selectedAddress]);
+ const [publishCommentOptions, setPublishCommentOptions] = useState({
+ subplebbitAddress: selectedAddress,
+ onChallenge,
+ onChallengeVerification,
+ onError: (error) => {
+ setNewErrorMessage(error.message);
+ console.log(error);
+ },
+ });
- const { publishComment, index } = usePublishComment(publishCommentOptions);
+ const { publishComment, index } = usePublishComment(publishCommentOptions);
- useEffect(() => {
- if (index !== undefined) {
- setPendingCommentIndex(index);
- }
- }, [index, setPendingCommentIndex]);
+ useEffect(() => {
+ if (index !== undefined) {
+ setPendingCommentIndex(index);
+ }
+ }, [index, setPendingCommentIndex]);
-
- const resetFields = useCallback(() => {
- if (nameRef.current) {
- nameRef.current.value = '';
- }
- if (commentRef.current) {
- commentRef.current.value = '';
- }
- if (linkRef.current) {
- linkRef.current.value = '';
- }
- }, []);
+ const resetFields = useCallback(() => {
+ if (nameRef.current) {
+ nameRef.current.value = '';
+ }
+ if (commentRef.current) {
+ commentRef.current.value = '';
+ }
+ if (linkRef.current) {
+ linkRef.current.value = '';
+ }
+ }, []);
+ const handleSubmit = async (event) => {
+ event.preventDefault();
- const handleSubmit = async (event) => {
- event.preventDefault();
+ if (commentRef.current.value === '' && linkRef.current.value === '') {
+ setNewErrorMessage('Please enter a comment or link.');
+ return;
+ }
- if (
- commentRef.current.value === "" &&
- linkRef.current.value === ""
- ) {
- setNewErrorMessage("Please enter a comment or link.");
- return;
- }
+ setPublishCommentOptions((prevPublishCommentOptions) => ({
+ ...prevPublishCommentOptions,
+ author: {
+ displayName: nameRef.current.value || undefined,
+ ...(anonymousMode ? {} : { address: account?.author.address }),
+ },
+ content: commentRef.current.value || undefined,
+ link: linkRef.current.value || undefined,
+ parentCid: selectedParentCid,
+ }));
- setPublishCommentOptions((prevPublishCommentOptions) => ({
- ...prevPublishCommentOptions,
- author: {
- displayName: nameRef.current.value || undefined,
- ...(anonymousMode ? {} : {address: account?.author.address}),
- },
- content: commentRef.current.value || undefined,
- link: linkRef.current.value || undefined,
- parentCid: selectedParentCid,
- }));
-
- setTriggerPublishComment(true);
- };
+ setTriggerPublishComment(true);
+ };
-
- const updateSigner = useCallback(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) {
- console.log(error);
- }
- }
-
- setPublishCommentOptions(prevPublishCommentOptions => {
- const newPublishCommentOptions = {
- ...prevPublishCommentOptions,
- signer,
- author: {
- ...prevPublishCommentOptions.author,
- address: signer?.address,
- },
- };
-
- if (JSON.stringify(prevPublishCommentOptions) !== JSON.stringify(newPublishCommentOptions)) {
- return newPublishCommentOptions;
- }
-
- return prevPublishCommentOptions;
- });
- }
- }, [selectedParentCid, anonymousMode, account]);
-
- useEffect(() => {
- if (anonymousMode) {
- updateSigner();
- }
- }, [updateSigner, anonymousMode]);
-
-
- useEffect(() => {
- if (publishCommentOptions && triggerPublishComment) {
- (async () => {
- await publishComment();
- resetFields();
- closeModal();
- })();
- setTriggerPublishComment(false);
- setExecuteAnonMode(false);
- }
- }, [publishCommentOptions, triggerPublishComment, publishComment, resetFields, closeModal]);
+ const updateSigner = useCallback(async () => {
+ if (anonymousMode) {
+ setExecuteAnonMode(true);
+ let storedSigners = JSON.parse(localStorage.getItem('storedSigners')) || {};
+ let signer;
- const getChallengeAnswersFromUser = async (challenges) => {
- setChallengesArray(challenges);
-
- return new Promise((resolve, reject) => {
- const imageString = challenges?.challenges[0].challenge;
- const imageSource = `data:image/png;base64,${imageString}`;
- const challengeImg = new Image();
- challengeImg.src = imageSource;
-
- challengeImg.onload = () => {
- setIsCaptchaOpen(true);
-
- const handleKeyDown = async (event) => {
- if (event.key === 'Enter') {
- const currentCaptchaResponse = captchaResponse;
- resolve(currentCaptchaResponse);
- setIsCaptchaOpen(false);
- document.removeEventListener('keydown', handleKeyDown);
- event.preventDefault();
- }
- };
+ 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;
- setCaptchaResponse('');
- document.addEventListener('keydown', handleKeyDown);
+ try {
+ signer = await account?.plebbit.createSigner({ type: 'ed25519', privateKey: signerPrivateKey });
+ } catch (error) {
+ console.log(error);
+ }
+ }
- setResolveCaptchaPromise(resolve);
- };
-
- challengeImg.onerror = () => {
- reject(setNewErrorMessage('Could not load challenges'));
- };
- });
- };
+ setPublishCommentOptions((prevPublishCommentOptions) => {
+ const newPublishCommentOptions = {
+ ...prevPublishCommentOptions,
+ signer,
+ author: {
+ ...prevPublishCommentOptions.author,
+ address: signer?.address,
+ },
+ };
+ if (JSON.stringify(prevPublishCommentOptions) !== JSON.stringify(newPublishCommentOptions)) {
+ return newPublishCommentOptions;
+ }
- return (
-