External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

implement signers in anon mode

Browse Source
This commit is contained in:
plebeius.eth
2023-06-26 21:55:26 +02:00
parent af7fbda8cf
commit c630d08acf
5 changed files with 214 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/modals/ReplyModal.jsx
+49 -2
View File
@@ -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]);
src/components/views/Board.jsx
+70 -14
View File
@@ -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 (
<div key={`rc-${index}`} className="reply-container">
<div key={`sa-${index}`} className="side-arrows">{'>>'}</div>
@@ -1418,9 +1456,16 @@ const Board = () => {
{reply.author?.shortAddress}
</span>
) : (
<span key={`mob-ha-${index}`}>
{account?.author?.shortAddress}
</span>
anonymousMode ? (
<span key={`mob-ha-${index}`}>
{signerAddress?.slice(8, 20)}
</span>
) : (
<span key={`mob-ha-${index}`}
>
{account?.author?.shortAddress}
</span>
)
)
}
)
@@ -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 (
<div key={`mob-rc-${index}`} className="reply-container">
<div key={`mob-pr-${index}`} className="post-reply post-reply-mobile">
@@ -2083,13 +2133,19 @@ const Board = () => {
(u/
{reply.author?.shortAddress ?
(
<span key={`mob-ha-${index}`} className="highlight-address-mobile">
{reply.author?.shortAddress}
</span>
) : (
<span key={`mob-ha-${index}`}>
{account?.author?.shortAddress}
<span key={`mob-ha-${index}`} className="highlight-address-mobile">
{reply.author?.shortAddress}
</span>
) : (
anonymousMode ? (
<span key={`mob-ha-${index}`}>
{signerAddress?.slice(8, 20)}
</span>
) : (
<span key={`mob-ha-${index}`}>
{account?.author?.shortAddress}
</span>
)
)
}
)&nbsp;
src/components/views/Thread.jsx
+70 -16
View File
@@ -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 (
<div key={`pc-${index}`} className="reply-container">
<div key={`sa-${index}`} className="side-arrows">{'>>'}</div>
@@ -1072,10 +1109,16 @@ const Thread = () => {
{reply.author?.shortAddress}
</span>
) : (
<span key={`mob-ha-${index}`}
>
{account?.author?.shortAddress}
</span>
anonymousMode ? (
<span key={`mob-ha-${index}`}>
{signerAddress?.slice(8, 20)}
</span>
) : (
<span key={`mob-ha-${index}`}
>
{account?.author?.shortAddress}
</span>
)
)
}
)
@@ -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 (
<div key={`mob-rc-${index}`} className="reply-container">
<div key={`mob-pr-${index}`} className="post-reply post-reply-mobile">
@@ -1579,13 +1627,19 @@ const Thread = () => {
(u/
{reply.author?.shortAddress ?
(
<span key={`mob-ha-${index}`} className="highlight-address-mobile">
{reply.author?.shortAddress}
</span>
) : (
<span key={`mob-ha-${index}`}>
{account?.author?.shortAddress}
<span key={`mob-ha-${index}`} className="highlight-address-mobile">
{reply.author?.shortAddress}
</span>
) : (
anonymousMode ? (
<span key={`mob-ha-${index}`}>
{signerAddress?.slice(8, 20)}
</span>
) : (
<span key={`mob-ha-${index}`}>
{account?.author?.shortAddress}
</span>
)
)
}
)
src/hooks/useAnonMode.js
+14 -24
View File
@@ -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;
src/hooks/useAnonModeRef.js
+11 -11
View File
@@ -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;
}