Merged conflict

package.json

@@ -9,7 +9,7 @@
     "@babel/plugin-transform-react-jsx": "7.21.0",
     "@capacitor/android": "3.6.0",
     "@capacitor/core": "3.6.0",
-    "@plebbit/plebbit-react-hooks": "https://github.com/plebbit/plebbit-react-hooks.git#5c5521672fac68ab00c83b96614445f7ccfd5b04",
+    "@plebbit/plebbit-react-hooks": "https://github.com/plebbit/plebbit-react-hooks.git#e741b0dad5bba65cf1f0896053f25cd91ed55cf1",
     "@testing-library/dom": "9.0.1",
     "@testing-library/jest-dom": "5.14.1",
     "@testing-library/react": "14.0.0",

src/components/BoardStats.jsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { useSubplebbitStats } from "@plebbit/plebbit-react-hooks/dist";
+import { BoardStatsContainer } from "./styled/BoardStats.styled";
+import { Break } from "./styled/views/Board.styled";
+import useGeneralStore from '../hooks/stores/useGeneralStore';
+
+
+const BoardStats = ({ subplebbitAddress }) => {
+  const { selectedStyle } = useGeneralStore(state => state);
+  const stats = useSubplebbitStats({subplebbitAddress});
+
+  return (
+    <BoardStatsContainer>
+      <Break selectedStyle={selectedStyle} style={{width: '468px'}}/>
+      <table id="blotter">
+        <tbody id="blotter-msgs">
+          <tr>
+            <td>In the past hour: <strong>{stats.hourActiveUserCount}</strong> users, <strong>{stats.hourPostCount}</strong> posts.&nbsp;&nbsp;Past day: <strong>{stats.dayActiveUserCount}</strong> users, <strong>{stats.dayPostCount}</strong> posts.</td>
+          </tr>
+          <tr>
+            <td></td>
+          </tr>
+          <tr>
+            <td>Past week: <strong>{stats.weekActiveUserCount}</strong> users, <strong>{stats.weekPostCount}</strong> posts.&nbsp;&nbsp;Past month: <strong>{stats.monthActiveUserCount}</strong> users, <strong>{stats.monthPostCount}</strong> posts.</td>
+          </tr>
+          <tr>
+            <td></td>
+          </tr>
+          <tr>
+            <td>Since inception: <strong>{stats.allActiveUserCount}</strong> users browsed; <strong>{stats.allPostCount}</strong> posts made.</td>
+          </tr>
+        </tbody>
+      </table>
+    </BoardStatsContainer>
+  );  
+};
+
+export default BoardStats;

src/components/ForwardRefLink.jsx

@@ -4,6 +4,15 @@ import { Link } from "react-router-dom";
 const ForwardRefLink = React.forwardRef((props, ref) => {
   const { children, setRefAndCid, onMouseOver, onMouseLeave, onClick, ...otherProps } = props;
 
+  const handleClick = (event) => {
+    if (otherProps.to === "#void") {
+      event.preventDefault();
+    }
+    if (onClick) {
+      onClick(event);
+    }
+  };
+
   useEffect(() => {
     if (ref.current && typeof setRefAndCid === 'function') {
       setRefAndCid(ref.current);
@@ -16,7 +25,7 @@ const ForwardRefLink = React.forwardRef((props, ref) => {
       {...otherProps}
       onMouseOver={onMouseOver}
       onMouseLeave={onMouseLeave}
-      onClick={onClick}
+      onClick={handleClick}
     >
       {children}
     </Link>

src/components/Post.jsx

@@ -74,7 +74,7 @@ const Post = ({ content, postQuoteOnClick, postQuoteOnOver, postQuoteOnLeave, po
         const linkTarget = matchedText.startsWith('u/') ? "_blank" : "_self";
   
         if (matchedText.startsWith('u/')) {
-          linkTo =  () => {};
+          linkTo =  "#void";
         } else if (matchedText.startsWith('p/') || matchedText.startsWith('p/')) {
           linkTo = `/${matchedText}`;
         }

src/components/StateLabel.jsx

@@ -6,11 +6,11 @@ const StateLabel = ({ commentIndex, className }) => {
   const comment = useAccountComment({commentIndex: commentIndex});
   const stateString = useStateString(comment);
 
-  if (comment.updatedAt !== undefined) {
+  if (comment.updatedAt !== undefined || comment.index === undefined) {
     return null;
   }
 
-  if (comment.state === "failed") {
+  if (comment.state === "failed" || comment.state === "succeeded") {
     return null;
   }
 

src/components/modals/SettingsModal.jsx

@@ -1,7 +1,7 @@
-import React, { useState, useEffect, useRef } from "react";
+import React, { useState, useEffect, useMemo, useRef } from "react";
 import { Link, useLocation, useNavigate } from "react-router-dom";
 import Modal from "react-modal";
-import { deleteAccount, deleteCaches, exportAccount, importAccount, setAccount, setActiveAccount, useAccount, useAccounts, useResolvedAuthorAddress } from "@plebbit/plebbit-react-hooks";
+import { deleteAccount, deleteCaches, importAccount, setAccount, setActiveAccount, useAccount, useAccounts, useResolvedAuthorAddress } from "@plebbit/plebbit-react-hooks";
 import stringify from "json-stringify-pretty-compact"
 import { StyledModal } from "../styled/modals/SettingsModal.styled";
 import useError from "../../hooks/useError";
@@ -13,16 +13,12 @@ const {version} = packageJson;
 
 
 const SettingsModal = ({ isOpen, closeModal }) => {
-  const {
+  const { selectedStyle } = useGeneralStore(state => state);
-    selectedStyle,
-  } = useGeneralStore(state => state);
-  
   const { anonymousMode, setAnonymousMode } = useAnonModeStore();
-
   const navigate = useNavigate();
   const location = useLocation();
+  
   const [expanded, setExpanded] = useState([]);
-  const [accountJson, setAccountJson] = useState("");
   const [copyStatus, setCopyStatus] = useState(false);
   const [ensName, setEnsName] = useState('');
   const [checkedENS, setCheckedENS] = useState(false);
@@ -32,6 +28,9 @@ const SettingsModal = ({ isOpen, closeModal }) => {
 
   const account = useAccount();
   const { accounts } = useAccounts();
+  const accountJson = useMemo(() => stringify({...account}), [account])
+  const [editedAccountJson, setEditedAccountJson] = useState(accountJson);
+  useEffect(() => { setEditedAccountJson(accountJson)}, [accountJson])
 
   const gatewayRef = useRef();
   const ipfsRef = useRef();
@@ -47,7 +46,6 @@ const SettingsModal = ({ isOpen, closeModal }) => {
   const author = {...account?.author, address: ensName};
   const { resolvedAddress, state } = useResolvedAuthorAddress({ author, cache: false });
 
-
   const defaultGatewayUrls = isElectron ? undefined : [
     'https://ipfs.io',
     'https://ipfsgateway.xyz',
@@ -71,36 +69,6 @@ const SettingsModal = ({ isOpen, closeModal }) => {
   ];
 
 
-  useEffect(() => {
-    if (account) {
-      const fetchAccountData = async () => {
-        const data = await exportAccount();
-        try {
-          const parsedData = JSON.parse(data);
-          setAccountJson(stringify(parsedData));
-        } catch (error) {
-          console.error("Failed to pretty-print the JSON:", error);
-          setAccountJson(data);
-        }
-      };
-      fetchAccountData();
-    }
-  }, [account]);
-  
-
-
-  const handleAccountJsonChange = (e) => {
-    try {
-      const parsedData = JSON.parse(e.target.value);
-      setAccountJson(stringify(parsedData));
-    } catch (error) {
-      console.error("Failed to pretty-print the JSON:", error);
-      setAccountJson(e.target.value);
-    }
-  };
-  
-  
-
   useEffect(() => {
     if (checkedENS && resolvedAddress && state === 'succeeded') {
       setCheckedENS(false);
@@ -130,7 +98,7 @@ const SettingsModal = ({ isOpen, closeModal }) => {
             address: ensName,
           },
         });
-        setNewSuccessMessage("ENS Name Saved");
+        setNewSuccessMessage("ENS name saved successfully.");
   
       } catch (error) {
         setNewErrorMessage(error.message);
@@ -214,7 +182,7 @@ const SettingsModal = ({ isOpen, closeModal }) => {
 
     try {
       await setAccount({ ...account, plebbitOptions });
-      localStorage.setItem("successToast", "Settings Saved");
+      localStorage.setItem("successToast", "Settings saved successfully.");
       window.location.reload();
     } catch (error) {
       setNewErrorMessage(error.message); console.log(error);
@@ -263,7 +231,7 @@ const SettingsModal = ({ isOpen, closeModal }) => {
           chainProviders,
         },
       });
-      localStorage.setItem("successToast", "Blockchain Options Saved");
+      localStorage.setItem("successToast", "Blockchain options saved successfully.");
       window.location.reload();
     } catch (error) {
       setNewErrorMessage(error.message); console.log(error);
@@ -289,7 +257,7 @@ const SettingsModal = ({ isOpen, closeModal }) => {
           pubsubHttpClientsOptions: defaultPubsubHttpClientsOptions,
         },
       });
-      localStorage.setItem("successToast", "Settings Reset");
+      localStorage.setItem("successToast", "Settings reset successfully.");
       window.location.reload();
     } catch (error) {
       setNewErrorMessage(error.message); console.log(error);
@@ -323,7 +291,7 @@ const SettingsModal = ({ isOpen, closeModal }) => {
           chainProviders,
         },
       });
-      localStorage.setItem("successToast", "Blockchain Options Reset");
+      localStorage.setItem("successToast", "Blockchain options reset successfully.");
       window.location.reload();
     } catch (error) {
       setNewErrorMessage(error.message); console.log(error);
@@ -367,7 +335,7 @@ const SettingsModal = ({ isOpen, closeModal }) => {
   
   useEffect(() => {
     if (localStorage.getItem("cacheCleared") === "true") {
-      setNewSuccessMessage("Cache Cleared");
+      setNewSuccessMessage("Cache cleared successfully.");
       localStorage.removeItem("cacheCleared");
     }
   }, [setNewSuccessMessage]);
@@ -375,9 +343,9 @@ const SettingsModal = ({ isOpen, closeModal }) => {
 
   const handleSaveAccount = async () => {
     try {
-      const parsedJson = JSON.parse(accountJson);
+      const parsedJson = JSON.parse(editedAccountJson);
       await setAccount(parsedJson);
-      setNewSuccessMessage("Account Data Saved Successfully");
+      setNewSuccessMessage("Account data saved successfully.");
     } catch (error) {
       setNewErrorMessage("Error saving account data: " + error.message);
       console.error(error);
@@ -385,25 +353,14 @@ const SettingsModal = ({ isOpen, closeModal }) => {
   };
 
 
-  const handleResetAccount = async () => {
-    try {
-      const data = await exportAccount();
-      setAccountJson(data);
-    } catch (error) {
-      setNewErrorMessage("Error resetting account data: " + error.message);
-      console.error(error);
-    }
-  };
-
-
   const handleImportAccount = async () => {
-    const accountJson = importRef.current.value;
+    const data = importRef.current.value;
 
     try {
-      const parsedJson = JSON.parse(accountJson);
+      const parsedJson = JSON.parse(data);
-      await importAccount(accountJson);
+      await importAccount(data);
       setActiveAccount(parsedJson.account?.name);
-      setNewSuccessMessage("Account Imported");
+      setNewSuccessMessage("Account imported successfully.");
       
     } catch (error) {
       setNewErrorMessage(error.message); console.log(error);
@@ -415,7 +372,7 @@ const SettingsModal = ({ isOpen, closeModal }) => {
     if (window.confirm("Are you sure you want to delete this account?")) {
       try {
         await deleteAccount(account?.name);
-        localStorage.setItem("successToast", "Account Deleted Successfully");
+        localStorage.setItem("successToast", "Account deleted successfully.");
         window.location.reload();
       } catch (error) {
         setNewErrorMessage("Error deleting account: " + error.message);
@@ -440,7 +397,7 @@ const SettingsModal = ({ isOpen, closeModal }) => {
           ...account?.author,
           displayName: name,
      }});
-      setNewSuccessMessage("Account Name Saved");
+      setNewSuccessMessage("Account name saved successfully.");
     } catch (error) {
       setNewErrorMessage(error.message); console.log(error);
     }
@@ -514,9 +471,9 @@ const SettingsModal = ({ isOpen, closeModal }) => {
             </li>
             <div className="settings-input">
               <textarea id="account-data-text" 
-              value={accountJson} 
+              value={editedAccountJson || accountJson} 
               ref={importRef} 
-              onChange={handleAccountJsonChange}
+              onChange={(e) => setEditedAccountJson(e.target.value)}
               autoComplete="off"
               autoCorrect="off"
               spellCheck="false" />
@@ -524,7 +481,7 @@ const SettingsModal = ({ isOpen, closeModal }) => {
                 <button onClick={handleSaveAccount}>
                   Save
                 </button>
-                <button onClick={handleResetAccount}>
+                <button onClick={() => setEditedAccountJson(accountJson)}>
                   Reset
                 </button>
                 <button onClick={handleImportAccount}>

src/components/styled/BoardStats.styled.jsx

@@ -0,0 +1,23 @@
+import styled from "styled-components";
+
+export const BoardStatsContainer = styled.div`
+  @media (max-width: 480px) {
+    display: none;
+  }
+
+  @media (min-width: 480px) {
+    width: 468px;
+    margin: auto;
+  
+    table {
+      border-spacing: 0px;
+      text-align: center;
+      width: 100%;
+    }
+  
+    tr {
+      vertical-align: top;
+      font-size: 11px;
+    }
+  }
+`;

src/components/styled/views/Thread.styled.jsx

@@ -3134,7 +3134,7 @@ export const Footer = styled.div`
     }
 
     #version {
-      margin-top: 13px;
+      margin-top: 15px;
     }
   }
 

src/components/views/All.jsx

@@ -34,6 +34,7 @@ import handleAddressClick from '../../utils/handleAddressClick';
 import handleImageClick from '../../utils/handleImageClick';
 import handleQuoteClick from '../../utils/handleQuoteClick';
 import handleQuoteHover from '../../utils/handleQuoteHover';
+import handleShareClick from '../../utils/handleShareClick';
 import handleStyleChange from '../../utils/handleStyleChange';
 import removeHighlight from '../../utils/removeHighlight';
 import useAnonModeRef from '../../hooks/useAnonModeRef';
@@ -926,7 +927,10 @@ const All = () => {
                               style={{ display: openMenuCid === thread.cid ? 'block' : 'none' }}
                               >
                                 <ul className="post-menu-catalog">
-                                  <li onClick={() => handleOptionClick(thread.cid)}>Hide thread</li>
+                                  <li onClick={() => {
+                                    handleOptionClick(thread.cid);
+                                    handleShareClick(selectedAddress, thread.cid);
+                                  }}>Share thread</li>
                                   <VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => (
                                     <>
                                       {authorAddress === account?.author.address || 
@@ -1258,7 +1262,10 @@ const All = () => {
                               style={{ display: openMenuCid === reply.cid ? 'block' : 'none' }}
                               >
                                 <ul className="post-menu-catalog">
-                                  <li onClick={() => handleOptionClick(reply.cid)}>Hide post</li>
+                                  <li onClick={() => {
+                                    handleOptionClick(reply.cid);
+                                    handleShareClick(selectedAddress, thread.cid);
+                                  }}>Share thread</li>
                                   <VerifiedAuthor commentCid={reply.cid}>{({ authorAddress }) => (
                                     <>
                                       {authorAddress === account?.author.address ||

src/components/views/AllCatalog.jsx

@@ -21,6 +21,7 @@ import OfflineIndicator from '../OfflineIndicator';
 import SettingsModal from '../modals/SettingsModal';
 import countLinks from '../../utils/countLinks';
 import getCommentMediaInfo from '../../utils/getCommentMediaInfo';
+import handleShareClick from '../../utils/handleShareClick';
 import handleStyleChange from '../../utils/handleStyleChange';
 import useError from '../../hooks/useError';
 import useFeedRows from '../../hooks/useFeedRows';
@@ -383,7 +384,10 @@ const CatalogPost = ({post}) => {
             style={{ display: openMenuCid === thread.cid ? 'block' : 'none' }}
             >
               <ul className="post-menu-catalog">
-                <li onClick={() => handleOptionClick(thread.cid)}>Hide thread</li>
+                <li onClick={() => {
+                  handleOptionClick(thread.cid);
+                  handleShareClick(selectedAddress, thread.cid);
+                }}>Share thread</li>
                 <VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => (
                   <>
                     {authorAddress === account?.author.address || 

src/components/views/Board.jsx

@@ -13,11 +13,12 @@ import { Footer } from '../styled/views/Thread.styled';
 import { AlertModal } from '../styled/modals/AlertModal.styled';
 import { PostMenuCatalog } from '../styled/views/Catalog.styled';
 import EditModal from '../modals/EditModal';
-import EditLabel from '../EditLabel';
-import ImageBanner from '../ImageBanner';
 import AdminListModal from '../modals/AdminListModal';
 import ModerationModal from '../modals/ModerationModal';
 import BoardSettings from '../BoardSettings';
+import BoardStats from '../BoardStats';
+import EditLabel from '../EditLabel';
+import ImageBanner from '../ImageBanner';
 import OfflineIndicator from '../OfflineIndicator';
 import PendingLabel from '../PendingLabel';
 import Post from '../Post';
@@ -36,6 +37,7 @@ import handleAddressClick from '../../utils/handleAddressClick';
 import handleImageClick from '../../utils/handleImageClick';
 import handleQuoteClick from '../../utils/handleQuoteClick';
 import handleQuoteHover from '../../utils/handleQuoteHover';
+import handleShareClick from '../../utils/handleShareClick';
 import handleStyleChange from '../../utils/handleStyleChange';
 import removeHighlight from '../../utils/removeHighlight';
 import useAnonModeRef from '../../hooks/useAnonModeRef';
@@ -835,56 +837,57 @@ const Board = () => {
         </Header>
         <Break selectedStyle={selectedStyle} />
         <PostForm selectedStyle={selectedStyle}>
-        <PostFormLink id="post-form-link" showPostFormLink={showPostFormLink} selectedStyle={selectedStyle} >
+          <PostFormLink id="post-form-link" showPostFormLink={showPostFormLink} selectedStyle={selectedStyle} >
-          <div id="post-form-link-desktop">
+            <div id="post-form-link-desktop">
-            [
+              [
-              <Link to={`/p/${subplebbitAddress}/post`} onClick={useClickForm()} style={{cursor: 'pointer'}}>Start a New Thread</Link>
+                <Link to={`/p/${subplebbitAddress}/post`} onClick={useClickForm()} style={{cursor: 'pointer'}}>Start a New Thread</Link>
-            ]
+              ]
-          </div>
+            </div>
-          <div id="post-form-link-mobile">
+            <div id="post-form-link-mobile">
-            <span className="btn-wrap">
+              <span className="btn-wrap">
-              <Link to={`/p/${subplebbitAddress}/post`} onClick={useClickForm()} style={{cursor: 'pointer'}}>Start a New Thread</Link>
+                <Link to={`/p/${subplebbitAddress}/post`} onClick={useClickForm()} style={{cursor: 'pointer'}}>Start a New Thread</Link>
-            </span>
+              </span>
-          </div>
+            </div>
-        </PostFormLink>
+          </PostFormLink>
-        <PostFormTable id="post-form" showPostForm={showPostForm} selectedStyle={selectedStyle} className="post-form">
+          <PostFormTable id="post-form" showPostForm={showPostForm} selectedStyle={selectedStyle} className="post-form">
-          <tbody>
+            <tbody>
-            <tr data-type="Name">
+              <tr data-type="Name">
-              <td id="td-name">Name</td>
+                <td id="td-name">Name</td>
-              <td>
+                <td>
-                {account && account?.author && account?.author.displayName ? (
+                  {account && account?.author && account?.author.displayName ? (
-                  <input name="name" type="text" tabIndex={1} value={account?.author?.displayName} ref={nameRef} disabled />
+                    <input name="name" type="text" tabIndex={1} value={account?.author?.displayName} ref={nameRef} disabled />
-                ) : (
+                  ) : (
-                  <input name="name" type="text" placeholder="Anonymous" tabIndex={1} ref={nameRef} />
+                    <input name="name" type="text" placeholder="Anonymous" tabIndex={1} ref={nameRef} />
-                )}
+                  )}
-              </td>
+                </td>
-            </tr>
+              </tr>
-            <tr data-type="Subject">
+              <tr data-type="Subject">
-              <td>Subject</td>
+                <td>Subject</td>
-              <td>
+                <td>
-                <input name="sub" type="text" tabIndex={3} ref={subjectRef}/>
+                  <input name="sub" type="text" tabIndex={3} ref={subjectRef}/>
-                <input id="post-button" type="submit" value="Post" tabIndex={6} 
+                  <input id="post-button" type="submit" value="Post" tabIndex={6} 
-                onClick={handleSubmit} />
+                  onClick={handleSubmit} />
-              </td>
+                </td>
-            </tr>
+              </tr>
-            <tr data-type="Comment">
+              <tr data-type="Comment">
-              <td>Comment</td>
+                <td>Comment</td>
-              <td>
+                <td>
-                <textarea name="com" cols="48" rows="4" tabIndex={4} wrap="soft" ref={commentRef} />
+                  <textarea name="com" cols="48" rows="4" tabIndex={4} wrap="soft" ref={commentRef} />
-              </td>
+                </td>
-            </tr>
+              </tr>
-            <tr data-type="File">
+              <tr data-type="File">
-              <td>Embed File</td>
+                <td>Embed File</td>
-              <td>
+                <td>
-                <input name="embed" type="text" tabIndex={7} placeholder="Paste link" ref={linkRef} />
+                  <input name="embed" type="text" tabIndex={7} placeholder="Paste link" ref={linkRef} />
-                <button id="t-help" type="button" onClick={
+                  <button id="t-help" type="button" onClick={
-                  () => alert("- Embedding media is optional, posts can be text-only. \n- A CAPTCHA challenge will appear after posting. \n- The CAPTCHA is case-sensitive.")
+                    () => alert("- Embedding media is optional, posts can be text-only. \n- A CAPTCHA challenge will appear after posting. \n- The CAPTCHA is case-sensitive.")
-                } data-tip="Help">?</button>
+                  } data-tip="Help">?</button>
-              </td>
+                </td>
-            </tr>
+              </tr>
-          </tbody>
+            </tbody>
-        </PostFormTable>
+          </PostFormTable>
         </PostForm>
+        <BoardStats subplebbitAddress={subplebbitAddress} />
         <TopBar selectedStyle={selectedStyle}>
           <hr />
           <span className="style-changer">
@@ -1000,7 +1003,12 @@ const Board = () => {
                                   style={{ display: openMenuCid === "rules" ? 'block' : 'none' }}
                                   >
                                     <ul className="post-menu-catalog">
-                                      <li onClick={() => handleOptionClick("rules")}>Hide thread</li>
+                                      <li onClick={() => {
+                                        handleOptionClick("rules");
+                                        handleShareClick(selectedAddress, "rules");
+                                      }}>
+                                        Share thread
+                                      </li>
                                       {/* {isModerator ? (
                                         <>
                                           change rules
@@ -1131,7 +1139,10 @@ const Board = () => {
                                   style={{ display: openMenuCid === "rules" ? 'block' : 'none' }}
                                   >
                                     <ul className="post-menu-catalog">
-                                      <li onClick={() => handleOptionClick("rules")}>Hide thread</li>
+                                      <li onClick={() => {
+                                        handleOptionClick("rules");
+                                        handleShareClick(selectedAddress, "rules");
+                                      }}>Share thread</li>
                                       {/* {isModerator ? (
                                         <>
                                           change rules
@@ -1284,7 +1295,10 @@ const Board = () => {
                                   style={{ display: openMenuCid === subplebbit.pubsubTopic ? 'block' : 'none' }}
                                   >
                                     <ul className="post-menu-catalog">
-                                      <li onClick={() => handleOptionClick(subplebbit.pubsubTopic)}>Hide thread</li>
+                                      <li onClick={() => {
+                                        handleOptionClick("description");
+                                        handleShareClick(selectedAddress, "description");
+                                      }}>Share thread</li>
                                       {/* {isModerator ? (
                                         <>
                                           change description
@@ -1615,7 +1629,10 @@ const Board = () => {
                                     style={{ display: openMenuCid === thread.cid ? 'block' : 'none' }}
                                     >
                                       <ul className="post-menu-catalog">
-                                        <li onClick={() => handleOptionClick(thread.cid)}>Hide thread</li>
+                                        <li onClick={() => {
+                                          handleOptionClick(thread.cid);
+                                          handleShareClick(selectedAddress, thread.cid);
+                                        }}>Share thread</li>
                                         <VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => (
                                           <>
                                             {authorAddress === account?.author.address || 
@@ -1941,7 +1958,10 @@ const Board = () => {
                                       style={{ display: openMenuCid === reply.cid ? 'block' : 'none' }}
                                       >
                                         <ul className="post-menu-catalog">
-                                          <li onClick={() => handleOptionClick(reply.cid)}>Hide post</li>
+                                          <li onClick={() => {
+                                            handleOptionClick(reply.cid);
+                                            handleShareClick(selectedAddress, thread.cid);
+                                          }}>Share thread</li>
                                           <VerifiedAuthor commentCid={reply.cid}>{({ authorAddress }) => (
                                             <>
                                               {authorAddress === account?.author.address ||
@@ -2460,11 +2480,13 @@ const Board = () => {
                                     </span>) 
                                   : null}
                                 </span>
-                                <span key={`mob-dt-${index}`} className="date-time-mobile post-number-mobile"
+                                <span key={`mob-dt-${index}`} className="date-time-mobile post-number-mobile">
+                                  <span key={`tooltip-fix-mob-${index}`}
                                   data-tooltip-id="tooltip"
                                   data-tooltip-content={getFormattedTime(thread.timestamp)}
                                   data-tooltip-place="top">
-                                  {getDate(thread.timestamp)}
+                                    {getDate(thread.timestamp)}
+                                  </span>
                                   &nbsp;
                                   <span key={`mob-no-${index}`}>c/</span>
                                   <Link to={`/p/${selectedAddress}/c/${thread.cid}`} id="reply-button" key={`mob-no2-${index}`} 
@@ -2690,11 +2712,13 @@ const Board = () => {
                                     </span>
                                     <br key={`mob-br-${index}`} />
                                   </span>
-                                  <span key={`mob-dt-${index}`} className="date-time-mobile post-number-mobile"
+                                  <span key={`mob-dt-${index}`} className="date-time-mobile post-number-mobile">
-                                  data-tooltip-id="tooltip"
+                                    <span key={`tooltip-fix-mob-reply-${index}`}
-                                  data-tooltip-content={getFormattedTime(reply.timestamp)}
+                                    data-tooltip-id="tooltip"
-                                  data-tooltip-place="top">
+                                    data-tooltip-content={getFormattedTime(reply.timestamp)}
-                                  {getDate(reply.timestamp)}&nbsp;
+                                    data-tooltip-place="top">
+                                      {getDate(reply.timestamp)}&nbsp;
+                                    </span>
                                     <span key={`mob-pl1-${index}`}>c/</span>
                                     {reply.shortCid ? (
                                       <Link to={`/p/${selectedAddress}/c/${thread.cid}`} id="reply-button" key={`mob-pl2-${index}`} 

src/components/views/Catalog.jsx

@@ -11,17 +11,19 @@ import { Container, NavBar, Header, Break, PostForm, PostFormLink, PostFormTable
 import { Threads, PostMenuCatalog } from '../styled/views/Catalog.styled';
 import { TopBar, Footer } from '../styled/views/Thread.styled';
 import { AlertModal } from '../styled/modals/AlertModal.styled';
-import CatalogLoader from '../CatalogLoader';
 import EditModal from '../modals/EditModal';
-import ImageBanner from '../ImageBanner';
-import VerifiedAuthor from '../VerifiedAuthor';
 import CreateBoardModal from '../modals/CreateBoardModal';
 import ModerationModal from '../modals/ModerationModal';
-import BoardSettings from '../BoardSettings';
-import OfflineIndicator from '../OfflineIndicator';
 import SettingsModal from '../modals/SettingsModal';
+import BoardSettings from '../BoardSettings';
+import BoardStats from '../BoardStats';
+import CatalogLoader from '../CatalogLoader';
+import ImageBanner from '../ImageBanner';
+import OfflineIndicator from '../OfflineIndicator';
+import VerifiedAuthor from '../VerifiedAuthor';
 import countLinks from '../../utils/countLinks';
 import getCommentMediaInfo from '../../utils/getCommentMediaInfo';
+import handleShareClick from '../../utils/handleShareClick';
 import handleStyleChange from '../../utils/handleStyleChange';
 import useAnonModeRef from '../../hooks/useAnonModeRef';
 import useClickForm from '../../hooks/useClickForm';
@@ -332,7 +334,7 @@ const CatalogPost = ({post}) => {
       <div className='thread'
       onMouseOver={() => setIsHoveringOnThread("rules")}
       onMouseLeave={()=>{handleMouseOnLeaveThread()}}>
-        {isHoveringOnThread == 'rules' ? 
+        {isHoveringOnThread === 'rules' ? 
         <div style={{left:"100%"}}
         className={"thread_popup"}>
           <p className="thread_popup_content" style={{color:"white"}}>
@@ -391,7 +393,10 @@ const CatalogPost = ({post}) => {
               style={{ display: openMenuCid === "rules" ? 'block' : 'none' }}
               >
                 <ul className="post-menu-catalog">
-                  <li onClick={() => handleOptionClick("rules")}>Hide thread</li>
+                  <li onClick={() => {
+                    handleOptionClick("rules");
+                    handleShareClick(selectedAddress, "rules");
+                  }}>Share thread</li>
                   {/* {isModerator ? (
                     <>
                       change rules
@@ -417,7 +422,7 @@ const CatalogPost = ({post}) => {
         onMouseOver={() => setIsHoveringOnThread("description")}
         onMouseLeave={()=>{handleMouseOnLeaveThread()}}>
           {/* <!-- hovering div --> */}
-          {isHoveringOnThread == 'description' ? 
+          {isHoveringOnThread === 'description' ? 
           <div style={{left:"100%"}}
           className={"thread_popup"}>
             <p className="thread_popup_content" style={{color:"white"}}>
@@ -494,7 +499,10 @@ const CatalogPost = ({post}) => {
                 style={{ display: openMenuCid === "description" ? 'block' : 'none' }}
                 >
                   <ul className="post-menu-catalog">
-                    <li onClick={() => handleOptionClick("description")}>Hide thread</li>
+                    <li onClick={() => {
+                      handleOptionClick("description");
+                      handleShareClick(selectedAddress, "description");
+                    }}>Share thread</li>
                     {/* {isModerator ? (
                       <>
                         change description
@@ -707,7 +715,10 @@ const CatalogPost = ({post}) => {
               style={{ display: openMenuCid === thread.cid ? 'block' : 'none' }}
               >
                 <ul className="post-menu-catalog">
-                  <li onClick={() => handleOptionClick(thread.cid)}>Hide thread</li>
+                  <li onClick={() => {
+                    handleOptionClick(thread.cid);
+                    handleShareClick(selectedAddress, thread.cid);
+                  }}>Share thread</li>
                   <VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => (
                     <>
                       {authorAddress === account?.author.address || 
@@ -1374,6 +1385,7 @@ const Catalog = () => {
             </tbody>
           </PostFormTable>
         </PostForm>
+        <BoardStats subplebbitAddress={subplebbitAddress} />
         <TopBar selectedStyle={selectedStyle}>
           <hr />
           <span className="style-changer">

src/components/views/Description.jsx

@@ -8,6 +8,7 @@ import { debounce } from 'lodash';
 import { Container, NavBar, Header, Break, PostMenu, PostForm } from '../styled/views/Board.styled';
 import { TopBar, BoardForm, Footer, ReplyFormLink} from '../styled/views/Thread.styled';
 import { PostMenuCatalog } from '../styled/views/Catalog.styled';
+import BoardStats from '../BoardStats';
 import ImageBanner from '../ImageBanner';
 import Post from '../Post';
 import CreateBoardModal from '../modals/CreateBoardModal';
@@ -16,6 +17,7 @@ import OfflineIndicator from '../OfflineIndicator';
 import SettingsModal from '../modals/SettingsModal';
 import getDate from '../../utils/getDate';
 import handleImageClick from '../../utils/handleImageClick';
+import handleShareClick from '../../utils/handleShareClick';
 import handleStyleChange from '../../utils/handleStyleChange';
 import useGeneralStore from '../../hooks/stores/useGeneralStore';
 import packageJson from '../../../package.json';
@@ -255,6 +257,7 @@ const Description = () => {
             </div>
           </ReplyFormLink>
         </PostForm>
+        <BoardStats subplebbitAddress={selectedAddress} />
         <TopBar selectedStyle={selectedStyle}>
           <span className="style-changer">
             Style:
@@ -363,7 +366,10 @@ const Description = () => {
                         style={{ display: openMenuCid === subplebbit.pubsubTopic ? 'block' : 'none' }}
                         >
                           <ul className="post-menu-catalog">
-                            <li onClick={() => handleOptionClick(subplebbit.pubsubTopic)}>Hide thread</li>
+                            <li onClick={() => {
+                              handleOptionClick("description");
+                              handleShareClick(selectedAddress, "description");
+                            }}>Share thread</li>
                             {/* {isModerator ? (
                               <>
                                 change description

src/components/views/Pending.jsx

@@ -6,6 +6,7 @@ import { useAccount, useAccountComment, useSubplebbit } from '@plebbit/plebbit-r
 import useGeneralStore from '../../hooks/stores/useGeneralStore';
 import { Container, NavBar, Header, Break, PostForm, BoardForm } from '../styled/views/Board.styled';
 import { ReplyFormLink, TopBar, BottomBar } from '../styled/views/Thread.styled';
+import BoardStats from '../BoardStats';
 import ImageBanner from '../ImageBanner';
 import Post from '../Post';
 import PostLoader from '../PostLoader';
@@ -41,7 +42,9 @@ const Pending = () => {
   const [isMobileThumbnailClicked, setIsMobileThumbnailClicked] = useState({});
   const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false);
 
-  const subplebbit = useSubplebbit({subplebbitAddress: comment?.subplebbitAddress})
+  const subplebbitAddress = comment?.subplebbitAddress;
+
+  const subplebbit = useSubplebbit({subplebbitAddress})
   const selectedTitle = subplebbit?.title;
 
   const handleThumbnailClick = (index, isMobile=false) => {
@@ -229,6 +232,7 @@ const Pending = () => {
             <div>&nbsp;</div>
           </ReplyFormLink>
         </PostForm>
+        <BoardStats subplebbitAddress={subplebbitAddress} />
         <TopBar selectedStyle={selectedStyle}>
           <hr />
           <span className="style-changer">

src/components/views/Rules.jsx

@@ -8,12 +8,14 @@ import { debounce } from 'lodash';
 import { Container, NavBar, Header, Break, PostMenu, PostForm } from '../styled/views/Board.styled';
 import { TopBar, BoardForm, Footer, ReplyFormLink} from '../styled/views/Thread.styled';
 import { PostMenuCatalog } from '../styled/views/Catalog.styled';
+import BoardStats from '../BoardStats';
 import ImageBanner from '../ImageBanner';
 import CreateBoardModal from '../modals/CreateBoardModal';
 import AdminListModal from '../modals/AdminListModal';
 import OfflineIndicator from '../OfflineIndicator';
 import SettingsModal from '../modals/SettingsModal';
 import getDate from '../../utils/getDate';
+import handleShareClick from '../../utils/handleShareClick';
 import handleStyleChange from '../../utils/handleStyleChange';
 import useGeneralStore from '../../hooks/stores/useGeneralStore';
 import packageJson from '../../../package.json';
@@ -261,6 +263,7 @@ const Rules = () => {
             </div>
           </ReplyFormLink>
         </PostForm>
+        <BoardStats subplebbitAddress={selectedAddress} />
         <TopBar selectedStyle={selectedStyle}>
           <span className="style-changer">
             Style:
@@ -345,7 +348,10 @@ const Rules = () => {
                         style={{ display: openMenuCid === "rules" ? 'block' : 'none' }}
                         >
                           <ul className="post-menu-catalog">
-                            <li onClick={() => handleOptionClick("rules")}>Hide thread</li>
+                            <li onClick={() => {
+                              handleOptionClick("rules");
+                              handleShareClick(selectedAddress, "rules");
+                            }}>Share thread</li>
                             {/* {isModerator ? (
                               <>
                                 change rules

src/components/views/Subscriptions.jsx

@@ -35,6 +35,7 @@ import handleAddressClick from '../../utils/handleAddressClick';
 import handleImageClick from '../../utils/handleImageClick';
 import handleQuoteClick from '../../utils/handleQuoteClick';
 import handleQuoteHover from '../../utils/handleQuoteHover';
+import handleShareClick from '../../utils/handleShareClick';
 import handleStyleChange from '../../utils/handleStyleChange';
 import removeHighlight from '../../utils/removeHighlight';
 import useAnonModeRef from '../../hooks/useAnonModeRef';
@@ -937,7 +938,10 @@ const Subscriptions = () => {
                               style={{ display: openMenuCid === thread.cid ? 'block' : 'none' }}
                               >
                                 <ul className="post-menu-catalog">
-                                  <li onClick={() => handleOptionClick(thread.cid)}>Hide thread</li>
+                                  <li onClick={() => {
+                                    handleOptionClick(thread.cid);
+                                    handleShareClick(selectedAddress, thread.cid);
+                                  }}>Share thread</li>
                                   <VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => (
                                     <>
                                       {authorAddress === account?.author.address || 
@@ -1269,7 +1273,10 @@ const Subscriptions = () => {
                               style={{ display: openMenuCid === reply.cid ? 'block' : 'none' }}
                               >
                                 <ul className="post-menu-catalog">
-                                  <li onClick={() => handleOptionClick(reply.cid)}>Hide post</li>
+                                  <li onClick={() => {
+                                    handleOptionClick(reply.cid);
+                                    handleShareClick(selectedAddress, thread.cid);
+                                  }}>Share thread</li>
                                   <VerifiedAuthor commentCid={reply.cid}>{({ authorAddress }) => (
                                     <>
                                       {authorAddress === account?.author.address ||

src/components/views/SubscriptionsCatalog.jsx

@@ -21,6 +21,7 @@ import OfflineIndicator from '../OfflineIndicator';
 import SettingsModal from '../modals/SettingsModal';
 import countLinks from '../../utils/countLinks';
 import getCommentMediaInfo from '../../utils/getCommentMediaInfo';
+import handleShareClick from '../../utils/handleShareClick';
 import handleStyleChange from '../../utils/handleStyleChange';
 import useError from '../../hooks/useError';
 import useFeedRows from '../../hooks/useFeedRows';
@@ -383,7 +384,10 @@ const CatalogPost = ({post}) => {
             style={{ display: openMenuCid === thread.cid ? 'block' : 'none' }}
             >
               <ul className="post-menu-catalog">
-                <li onClick={() => handleOptionClick(thread.cid)}>Hide thread</li>
+                <li onClick={() => {
+                  handleOptionClick(thread.cid);
+                  handleShareClick(selectedAddress, thread.cid);
+                }}>Share thread</li>
                 <VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => (
                   <>
                     {authorAddress === account?.author.address || 

src/components/views/Thread.jsx

@@ -11,10 +11,9 @@ import { Container, NavBar, Header, Break, PostForm, PostFormTable, PostMenu } f
 import { ReplyFormLink, TopBar, BottomBar, BoardForm, Footer } from '../styled/views/Thread.styled';
 import { AlertModal } from '../styled/modals/AlertModal.styled';
 import { PostMenuCatalog } from '../styled/views/Catalog.styled';
-import EditModal from '../modals/EditModal';
+import BoardStats from '../BoardStats';
 import EditLabel from '../EditLabel';
 import ImageBanner from '../ImageBanner';
-import ModerationModal from '../modals/ModerationModal';
 import OfflineIndicator from '../OfflineIndicator';
 import PendingLabel from '../PendingLabel';
 import Post from '../Post';
@@ -23,6 +22,8 @@ import PostOnHover from '../PostOnHover';
 import StateLabel from '../StateLabel';
 import VerifiedAuthor from '../VerifiedAuthor';
 import CreateBoardModal from '../modals/CreateBoardModal';
+import EditModal from '../modals/EditModal';
+import ModerationModal from '../modals/ModerationModal';
 import ReplyModal from '../modals/ReplyModal';
 import SettingsModal from '../modals/SettingsModal';
 import findShortParentCid from '../../utils/findShortParentCid';
@@ -33,6 +34,7 @@ import handleAddressClick from '../../utils/handleAddressClick';
 import handleImageClick from '../../utils/handleImageClick';
 import handleQuoteClick from '../../utils/handleQuoteClick';
 import handleQuoteHover from '../../utils/handleQuoteHover';
+import handleShareClick from '../../utils/handleShareClick';
 import handleStyleChange from '../../utils/handleStyleChange';
 import removeHighlight from '../../utils/removeHighlight';
 import useAnonMode from '../../hooks/useAnonMode';
@@ -792,6 +794,7 @@ const Thread = () => {
             </tbody>
           </PostFormTable>
         </PostForm>
+        <BoardStats subplebbitAddress={subplebbitAddress} />
         <TopBar selectedStyle={selectedStyle}>
           <hr />
           <span className="style-changer">
@@ -1067,7 +1070,10 @@ const Thread = () => {
                           style={{ display: openMenuCid === comment.cid ? 'block' : 'none' }}
                           >
                             <ul className="post-menu-catalog">
-                              <li onClick={() => handleOptionClick(comment.cid)}>Hide thread</li>
+                              <li onClick={() => {
+                                handleOptionClick(comment.cid);
+                                handleShareClick(selectedAddress, comment.cid);
+                              }}>Share thread</li>
                               <VerifiedAuthor commentCid={comment.cid}>{({ authorAddress }) => (
                                 <>
                                   {authorAddress === account?.author.address || 
@@ -1301,12 +1307,15 @@ const Thread = () => {
                               </span>
                             </span>
                             &nbsp;
-                            <span key={`dt-${index}`} className="date-time"
+                            <span key={`dt-${index}`} className="date-time">
-                            data-tooltip-id="tooltip"
+                              <span key={`tooltip-fix-${index}`} 
-                            data-tooltip-content={getFormattedTime(reply?.timestamp)}
+                              data-tooltip-id="tooltip"
-                            data-tooltip-place="top">
+                              data-tooltip-content={getFormattedTime(reply?.timestamp)}
+                              data-tooltip-place="top"
+                              >
                               {getDate(reply?.timestamp)}&nbsp;
-                            <span key={`pn-${index}`} className="post-number post-number-desktop">
+                              </span>
+                              <span key={`pn-${index}`} className="post-number post-number-desktop">
                               <span key={`pl1-${index}`}>c/</span>
                               {reply.shortCid ? (
                                 <Link id="reply-button" key={`pl2-${index}`}
@@ -1357,7 +1366,10 @@ const Thread = () => {
                               style={{ display: openMenuCid === reply.cid ? 'block' : 'none' }}
                               >
                                 <ul className="post-menu-catalog">
-                                  <li onClick={() => handleOptionClick(reply.cid)}>Hide post</li>
+                                <li onClick={() => {
+                                  handleOptionClick(reply.cid);
+                                  handleShareClick(selectedAddress, comment.cid);
+                                }}>Share thread</li>
                                   <VerifiedAuthor commentCid={reply.cid}>{({ authorAddress }) => (
                                     <>
                                       {authorAddress === account?.author.address ||
@@ -1759,11 +1771,13 @@ const Thread = () => {
                                 {comment.title}
                               </span>) : null}
                         </span>
-                        <span key={`mob-dt-${comment.cid}`} className="date-time-mobile post-number-mobile"
+                        <span key={`mob-dt-${comment.cid}`} className="date-time-mobile post-number-mobile">
-                        data-tooltip-id="tooltip"
+                          <span key={`tooltip-fix-${comment.cid}`}
-                        data-tooltip-content={getFormattedTime(comment?.timestamp)}
+                          data-tooltip-id="tooltip"
-                        data-tooltip-place="top">
+                          data-tooltip-content={getFormattedTime(comment?.timestamp)}
-                          {getDate(comment?.timestamp)}
+                          data-tooltip-place="top">
+                            {getDate(comment?.timestamp)}
+                          </span>
                           &nbsp;
                           <span key={`mob-no-${comment.cid}`}>c/</span>
                           <Link to={() => {}} id="reply-button" key={`mob-no2-${comment.cid}`} title="Reply to this post"
@@ -1955,11 +1969,13 @@ const Thread = () => {
                             </span>
                             <br key={`mob-br-${index}`} />
                           </span>
-                          <span key={`mob-dt-${index}`} className="date-time-mobile post-number-mobile"
+                          <span key={`mob-dt-${index}`} className="date-time-mobile post-number-mobile">
-                          data-tooltip-id="tooltip"
+                            <span key={`tooltip-fix-mob-${index}`}                            
-                          data-tooltip-content={getFormattedTime(reply?.timestamp)}
+                            data-tooltip-id="tooltip"
-                          data-tooltip-place="top">
+                            data-tooltip-content={getFormattedTime(reply?.timestamp)}
-                            {getDate(reply?.timestamp)}&nbsp;
+                            data-tooltip-place="top">
+                              {getDate(reply?.timestamp)}&nbsp;
+                            </span>
                             <span key={`mob-pl1-${index}`}>c/</span>
                             {reply.shortCid ? (
                               <Link id="reply-button" key={`mob-pl2-${index}`} 

src/utils/handleShareClick.js

@@ -0,0 +1,25 @@
+function handleShareClick(selectedAddress, cid) {
+  const plebBzBaseURL = "https://pleb.bz/p/";
+
+  let shareLink = `${plebBzBaseURL}${selectedAddress}/`;
+
+  if (cid === "rules" || cid === "description") {
+    shareLink += cid;
+  } else {
+    shareLink += `c/${cid}`;
+  }
+
+  shareLink += `?redirect=plebchan.eth.limo`;
+
+  if (navigator.clipboard) {
+    navigator.clipboard.writeText(shareLink).then(() => {
+      console.log("Link copied to clipboard!");
+    }).catch(err => {
+      console.error('Could not copy text: ', err);
+    });
+  } else {
+    return;
+  }
+}
+
+export default handleShareClick;

yarn.lock

@@ -2200,7 +2200,7 @@
   "resolved" "https://registry.npmjs.org/@jest/types/-/types-29.6.1.tgz"
   "version" "29.6.1"
   dependencies:
-    "@jest/schemas" "^29.6.0"
+    "@jest/schemas" "^29.6.3"
     "@types/istanbul-lib-coverage" "^2.0.0"
     "@types/istanbul-reports" "^3.0.0"
     "@types/node" "*"
@@ -8918,7 +8918,7 @@
   "version" "29.6.2"
   dependencies:
     "@babel/code-frame" "^7.12.13"
-    "@jest/types" "^29.6.1"
+    "@jest/types" "^29.6.3"
     "@types/stack-utils" "^2.0.0"
     "chalk" "^4.0.0"
     "graceful-fs" "^4.2.9"
@@ -9095,7 +9095,7 @@
   "resolved" "https://registry.npmjs.org/jest-util/-/jest-util-29.6.2.tgz"
   "version" "29.6.2"
   dependencies:
-    "@jest/types" "^29.6.1"
+    "@jest/types" "^29.6.3"
     "@types/node" "*"
     "chalk" "^4.0.0"
     "ci-info" "^3.2.0"