Merge pull request #189 from plebbit/development

Development

src/components/StateLabel.jsx

@@ -11,12 +11,10 @@ const StateLabel = ({ commentIndex, className }) => {
   useEffect(() => {
     const timer = setTimeout(() => setIsLoading(false), 2000);
     return () => clearTimeout(timer);
-  }, []);
+  }, [commentIndex]);
-
-  if (commentIndex === undefined) return null;
 
   return (
-    commentIndex && stateString !== "Succeeded" ? (
+    commentIndex !== undefined && stateString !== "Succeeded" ? (
       (comment.state === "failed") ? (
         null
       ) : (

src/components/modals/CaptchaModal.jsx

@@ -20,6 +20,7 @@ const CaptchaModal = () => {
    } = useGeneralStore(state => state);
 
   const [imageSources, setImageSources] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
   const [currentChallengeIndex, setCurrentChallengeIndex] = useState(0);
   const [totalChallenges, setTotalChallenges] = useState(0);
   const [isMobile, setIsMobile] = useState(window.innerWidth <= 480);
@@ -49,7 +50,8 @@ const CaptchaModal = () => {
 
 
   useEffect(() => {
-    if (challengesArray) {
+    if (isCaptchaOpen && challengesArray) {
+      setIsLoading(true);
       const challenges = challengesArray.challenges;
       const decryptedChallenges = [];
 
@@ -61,8 +63,9 @@ const CaptchaModal = () => {
 
       setImageSources(decryptedChallenges);
       setTotalChallenges(decryptedChallenges.length);
+      setIsLoading(false);
     }
-  }, [challengesArray]);
+  }, [challengesArray, isCaptchaOpen]);
 
 
   const handleKeyDown = (event) => {
@@ -157,7 +160,11 @@ const CaptchaModal = () => {
               ref={responseRef}
               onKeyDown={handleKeyDown}
               autoFocus />
-              <img src={imageSources[currentChallengeIndex]} alt="captcha" />
+              {isLoading ? (
+                <img src="" alt="loading..." style={{ visibility: "hidden" }} /> 
+              ) : (
+                imageSources[currentChallengeIndex] && <img src={imageSources[currentChallengeIndex]} alt="captcha" />
+              )}
             </div>
             <div>
               <span style={{lineHeight: '1.7'}}>

src/components/modals/SettingsModal.jsx

@@ -1,14 +1,15 @@
 import React, { useState, useEffect, useRef } from "react";
 import { Link, useLocation, useNavigate } from "react-router-dom";
 import Modal from "react-modal";
-import { deleteCaches, exportAccount, importAccount, setAccount, setActiveAccount, useAccount, useAccounts, useResolvedAuthorAddress } from "@plebbit/plebbit-react-hooks";
+import { confirmAlert } from "react-confirm-alert";
+import { deleteAccount, deleteCaches, exportAccount, importAccount, setAccount, setActiveAccount, useAccount, useAccounts, useResolvedAuthorAddress } from "@plebbit/plebbit-react-hooks";
 import { StyledModal } from "../styled/modals/SettingsModal.styled";
 import useError from "../../hooks/useError";
 import useSuccess from "../../hooks/useSuccess";
 import useAnonModeStore from '../../hooks/stores/useAnonModeStore';
 import useGeneralStore from '../../hooks/stores/useGeneralStore';
-import packageJson from '../../../package.json'
+import packageJson from '../../../package.json';
-const {version} = packageJson
+const {version} = packageJson;
 
 
 const SettingsModal = ({ isOpen, closeModal }) => {
@@ -21,7 +22,7 @@ const SettingsModal = ({ isOpen, closeModal }) => {
   const navigate = useNavigate();
   const location = useLocation();
   const [expanded, setExpanded] = useState([]);
-  const [accountJson, setAccountJson] = useState(null);
+  const [accountJson, setAccountJson] = useState("");
   const [copyStatus, setCopyStatus] = useState(false);
   const [ensName, setEnsName] = useState('');
   const [checkedENS, setCheckedENS] = useState(false);
@@ -42,10 +43,10 @@ const SettingsModal = ({ isOpen, closeModal }) => {
   const nameRef = useRef();
   const ensRef = useRef();
 
+  const isElectron = window.electron && window.electron.isElectron;
   const author = {...account?.author, address: ensName};
   const { resolvedAddress, state } = useResolvedAuthorAddress({ author, cache: false });
 
-  const isElectron = window.electron && window.electron.isElectron;
 
   const defaultGatewayUrls = isElectron ? undefined : [
     'https://ipfs.io',
@@ -70,6 +71,23 @@ const SettingsModal = ({ isOpen, closeModal }) => {
   ];
 
 
+  useEffect(() => {
+    if (account) {
+      const fetchAccountData = async () => {
+        const data = await exportAccount();
+        setAccountJson(data);
+      };
+    
+      fetchAccountData();
+    }
+  }, [account]);  
+
+
+  const handleAccountJsonChange = (e) => {
+    setAccountJson(e.target.value);
+  };
+  
+
   useEffect(() => {
     if (checkedENS && resolvedAddress && state === 'succeeded') {
       setCheckedENS(false);
@@ -302,8 +320,6 @@ const SettingsModal = ({ isOpen, closeModal }) => {
 
 
   const handleCloseModal = () => {
-    setAccountJson(null);
-    
     if (location.pathname.endsWith("/settings")) {
       const newPath = location.pathname.slice(0, -9);
       closeModal();
@@ -344,13 +360,31 @@ const SettingsModal = ({ isOpen, closeModal }) => {
   }, [setNewSuccessMessage]);
 
 
-  const handleExport = async () => {
+  const handleSaveAccount = async () => {
-    const activeAccountJson = await exportAccount();
+    try {
-    setAccountJson(activeAccountJson);
+      const parsedJson = JSON.parse(accountJson);
+      await setAccount(parsedJson);
+      setNewSuccessMessage("Account Data Saved Successfully");
+    } catch (error) {
+      setNewErrorMessage("Error saving account data: " + error.message);
+      console.error(error);
+    }
   };
 
 
-  const handleImport = async () => {
+  const handleResetAccount = async () => {
+    try {
+      const data = await exportAccount();
+      setAccountJson(data);
+      setNewSuccessMessage("Account Data Reset Successfully");
+    } catch (error) {
+      setNewErrorMessage("Error resetting account data: " + error.message);
+      console.error(error);
+    }
+  };
+
+
+  const handleImportAccount = async () => {
     const accountJson = importRef.current.value;
 
     try {
@@ -364,6 +398,21 @@ const SettingsModal = ({ isOpen, closeModal }) => {
     }
   };
 
+
+  const handleDeleteAccount = async () => {
+    if (window.confirm("Are you sure you want to delete this account?")) {
+      try {
+        await deleteAccount(account?.name);
+        localStorage.setItem("successToast", "Account Deleted Successfully");
+        window.location.reload();
+      } catch (error) {
+        setNewErrorMessage("Error deleting account: " + error.message);
+        console.error(error);
+      }
+    }
+  };
+
+
   const handleAccountChange = (e) => {
     setActiveAccount(e.target.value);
   };
@@ -427,15 +476,6 @@ const SettingsModal = ({ isOpen, closeModal }) => {
           <span className="settings-pointer" style={{cursor: "pointer"}}
             onClick={() => toggleExpanded(1)}
           >Account</span>
-          <div className="plebbit-options-buttons"
-          style={{ display: expanded.includes(1) ? 'block' : 'none' }}
-          >
-          <button className="save-button"
-            onClick={handleExport}>Export</button>
-            <button className="reset-button" 
-            onClick={handleImport}
-            >Import</button> 
-          </div>
           </li>
           <ul className="settings-cat" style={{ display: expanded.includes(1) ? 'block' : 'none' }}>
             <li className="anon-off">
@@ -458,14 +498,27 @@ const SettingsModal = ({ isOpen, closeModal }) => {
               Account Data
             </li>
             <li className="settings-tip">
-              To export, click "Export", then save your account data displayed below in a safe place. To import,  paste your account data into the box below, then click "Import".
+              To save manual changes, click "Save". To undo changes, click "Reset". To delete the account and create a new one, click "Delete". To add another account, paste its data and click "Import".
             </li>
             <div className="settings-input">
-              {accountJson ? (
+              <textarea id="account-data-text" 
-                <textarea value={accountJson} readOnly />
+              value={accountJson} 
-                ): (
+              ref={importRef} 
-                <textarea ref={importRef} />
+              onChange={handleAccountJsonChange} />
-              )}
+              <div className="account-buttons">
+                <button onClick={handleSaveAccount}>
+                  Save
+                </button>
+                <button onClick={handleResetAccount}>
+                  Reset
+                </button>
+                <button onClick={handleImportAccount}>
+                  Import
+                </button> 
+                <button onClick={handleDeleteAccount}>
+                  Delete
+                </button>
+              </div>
             </div>
             <li className="settings-option disc">
               Account Address: u/{account?.author.shortAddress}
@@ -634,14 +687,14 @@ const SettingsModal = ({ isOpen, closeModal }) => {
                 ref={ethereumRpcRef} 
               />
             </div>
-            {/* <li className="settings-option disc">Polygon RPC</li>
+            <li className="settings-option disc">Polygon RPC</li>
             <li className="settings-tip">Needed for XPLEB NFTs.</li>
             <div className="settings-input">
               <textarea placeholder="Polygon RPC URLs" 
                 defaultValue={account?.plebbitOptions?.chainProviders?.['matic']?.urls.join("\n")}
                 ref={polygonRpcRef} 
               />
-            </div> */}
+            </div>
           </ul>
         </ul>
         <div>

src/components/styled/modals/AlertModal.styled.jsx

@@ -0,0 +1,77 @@
+import styled from 'styled-components';
+
+export const AlertModal = styled.div`
+  .author-delete-alert {
+    padding: 20px;
+    border: 1px solid #ccc;
+    position: fixed;
+    top: 40%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+
+    .author-delete-buttons {
+      display: flex;
+      justify-content: center;
+
+      & > button {
+        margin-top: 10px;
+      }
+    
+      & > button:first-child {
+        margin-right: 20px;
+      }
+    }
+  }
+
+
+  
+
+  ${({ selectedStyle }) => {
+    switch (selectedStyle) {
+      case 'Yotsuba':
+        return `
+        .author-delete-alert {
+          background-color: #f0e0d6;
+          border: 1px solid #d9bfb7;
+        }`;
+
+      case 'Yotsuba-B':
+        return `
+        .author-delete-alert {
+          background-color: #d6daf0;
+          border: 1px solid #b7c5d9;
+        }`;
+
+      case 'Futaba':
+        return `
+        .author-delete-alert {
+          background-color: #f0e0d6;
+          border: 1px solid #d9bfb7;
+        }`;
+
+      case 'Burichan':
+        return `
+        .author-delete-alert {
+          background-color: #d6daf0;
+          border: 1px solid #b7c5d9;
+        }`;
+
+      case 'Tomorrow':
+        return `
+        .author-delete-alert {
+          background-color: #282a2e;
+          border: 1px solid #111;
+        }`;
+
+      case 'Photon':
+        return `
+        .author-delete-alert {
+          background-color: #ddd;
+          border: 1px solid #ccc;
+        }`; 
+        
+        default:
+          return '';
+      }
+  }}
+`;

src/components/styled/modals/CaptchaModal.styled.jsx

@@ -58,6 +58,7 @@ export const StyledModal = styled(Modal)`
     position: relative;
     clear: both;
     width: 302px;
+    height: 100px;
     overflow: hidden;
     margin-bottom: 3px;
   }

src/components/styled/modals/SettingsModal.styled.jsx

@@ -87,9 +87,24 @@ export const StyledModal = styled(Modal)`
   }
 
   textarea {
-    width: 80%;
+    min-width: 80%;
-    margin-left: 7%;
     min-height: 50px;
+    margin-left: 7%;
+  }
+
+  #account-data-text {
+    min-width: 70%;
+    min-height: 105px;
+  }
+
+  .account-buttons {
+    display: inline-block;
+    position: absolute;
+    margin: 5px 5px 5px 10px;
+
+    button {
+      margin-bottom: 5px;
+    }
   }
 
   .all-div {

src/components/styled/views/Catalog.styled.jsx

@@ -23,6 +23,11 @@ export const Threads = styled.div`
     max-height: 150px;
   }
 
+  .file-thumb {
+    background-color: rgba(0, 0, 0, 0.05);
+    display: inline-block;
+  }
+
   .card {
     display: inline;
     margin: auto;
@@ -87,6 +92,19 @@ export const Threads = styled.div`
     display: block;
     padding: 0 15px;
   }
+
+  ${({ selectedStyle }) => {
+    switch (selectedStyle) {
+      case 'Tomorrow':
+        return `
+          .file-thumb {
+            background-color: rgba(255, 255, 255, 0.01) !important;
+          }
+        `;
+      default:
+        return '';
+    }
+  }}
 `;
 
 export const PostMenuCatalog = styled.div`

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

@@ -3240,79 +3240,3 @@ export const Footer = styled.div`
       }
   }}
 `;
-
-export const AuthorDeleteAlert = styled.div`
-  .author-delete-alert {
-    padding: 20px;
-    border: 1px solid #ccc;
-    position: fixed;
-    top: 40%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-
-    .author-delete-buttons {
-      display: flex;
-      justify-content: center;
-
-      & > button {
-        margin-top: 10px;
-      }
-    
-      & > button:first-child {
-        margin-right: 20px;
-      }
-    }
-  }
-
-
-  
-
-  ${({ selectedStyle }) => {
-    switch (selectedStyle) {
-      case 'Yotsuba':
-        return `
-        .author-delete-alert {
-          background-color: #f0e0d6;
-          border: 1px solid #d9bfb7;
-        }`;
-
-      case 'Yotsuba-B':
-        return `
-        .author-delete-alert {
-          background-color: #d6daf0;
-          border: 1px solid #b7c5d9;
-        }`;
-
-      case 'Futaba':
-        return `
-        .author-delete-alert {
-          background-color: #f0e0d6;
-          border: 1px solid #d9bfb7;
-        }`;
-
-      case 'Burichan':
-        return `
-        .author-delete-alert {
-          background-color: #d6daf0;
-          border: 1px solid #b7c5d9;
-        }`;
-
-      case 'Tomorrow':
-        return `
-        .author-delete-alert {
-          background-color: #282a2e;
-          border: 1px solid #111;
-        }`;
-
-      case 'Photon':
-        return `
-        .author-delete-alert {
-          background-color: #ddd;
-          border: 1px solid #ccc;
-        }`; 
-        
-        default:
-          return '';
-      }
-  }}
-`;

src/components/views/All.jsx

@@ -9,8 +9,9 @@ import { useAccount, useAccountComments, useFeed, usePublishCommentEdit, useSubp
 import { flattenCommentsPages } from '@plebbit/plebbit-react-hooks/dist/lib/utils'
 import { debounce } from 'lodash';
 import { Container, NavBar, Header, Break, TopBar, BoardForm, PostMenu } from '../styled/views/Board.styled';
-import { AuthorDeleteAlert, Footer } from '../styled/views/Thread.styled';
+import { Footer } from '../styled/views/Thread.styled';
 import { PostMenuCatalog } from '../styled/views/Catalog.styled';
+import { AlertModal } from '../styled/modals/AlertModal.styled';
 import EditModal from '../modals/EditModal';
 import EditLabel from '../EditLabel';
 import ImageBanner from '../ImageBanner';
@@ -40,8 +41,8 @@ import useFeedStateString from '../../hooks/useFeedStateString';
 import useSuccess from '../../hooks/useSuccess';
 import useAnonModeStore from '../../hooks/stores/useAnonModeStore';
 import useGeneralStore from '../../hooks/stores/useGeneralStore';
-import packageJson from '../../../package.json'
+import packageJson from '../../../package.json';
-const {version} = packageJson
+const {version} = packageJson;
 let lastVirtuosoStates = {};
 
 
@@ -419,7 +420,7 @@ const All = () => {
     confirmAlert({
       customUI: ({ onClose }) => {
         return (
-          <AuthorDeleteAlert selectedStyle={selectedStyle}>
+          <AlertModal selectedStyle={selectedStyle}>
             <div className='author-delete-alert'>
               <p>Are you sure you want to delete this post?</p>
               <div className="author-delete-buttons">
@@ -442,7 +443,7 @@ const All = () => {
                 </button>
               </div>
             </div>
-          </AuthorDeleteAlert>
+          </AlertModal>
         );
       }
     });

src/components/views/AllCatalog.jsx

@@ -9,7 +9,8 @@ import { useAccount, useFeed, usePublishCommentEdit, useSubplebbit, useSubplebbi
 import { debounce } from 'lodash';
 import { Container, NavBar, Header, Break, PostMenu, BoardForm } from '../styled/views/Board.styled';
 import { Threads, PostMenuCatalog } from '../styled/views/Catalog.styled';
-import { TopBar, Footer, AuthorDeleteAlert } from '../styled/views/Thread.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';
@@ -27,9 +28,9 @@ import useFeedStateString from '../../hooks/useFeedStateString';
 import useSuccess from '../../hooks/useSuccess';
 import useWindowWidth from '../../hooks/useWindowWidth';
 import useGeneralStore from '../../hooks/stores/useGeneralStore';
-import packageJson from '../../../package.json'
+import packageJson from '../../../package.json';
-const {version} = packageJson
+const {version} = packageJson;
-let lastVirtuosoStates = {}
+let lastVirtuosoStates = {};
 
 
 const CatalogPost = ({post}) => {
@@ -116,7 +117,7 @@ const CatalogPost = ({post}) => {
     confirmAlert({
       customUI: ({ onClose }) => {
         return (
-          <AuthorDeleteAlert selectedStyle={selectedStyle}>
+          <AlertModal selectedStyle={selectedStyle}>
             <div className='author-delete-alert'>
               <p>Are you sure you want to delete this post?</p>
               <div className="author-delete-buttons">
@@ -139,7 +140,7 @@ const CatalogPost = ({post}) => {
                 </button>
               </div>
             </div>
-          </AuthorDeleteAlert>
+          </AlertModal>
         );
       }
     });
@@ -265,6 +266,17 @@ const CatalogPost = ({post}) => {
   }, [triggerPublishCommentEdit, publishCommentEdit, publishCommentEditOptions]);
 
 
+  let displayWidth, displayHeight;
+  if (thread.linkWidth && thread.linkHeight) {
+    let scale = Math.min(1, 150 / Math.max(thread.linkWidth, thread.linkHeight));
+    displayWidth = `${thread.linkWidth * scale}px`;
+    displayHeight = `${thread.linkHeight * scale}px`;
+  } else {
+    displayWidth = '150px';
+    displayHeight = '150px';
+  }
+
+
   return (
     <div key={`thread-`} className="thread" 
     onMouseOver={() => {setIsHoveringOnThread(thread.cid)}} 
@@ -274,26 +286,32 @@ const CatalogPost = ({post}) => {
         onClick={() => setSelectedThread(thread.cid)}>
           {commentMediaInfo?.type === "webpage" ? (
             thread.thumbnailUrl ? (
+              <span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
                 <img className="card" key={`img-`}
                 src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type}
                 onError={(e) => {
                   e.target.src = fallbackImgUrl
                   e.target.onerror = null;
                 }}  />
+              </span>
             ) : null
           ) : null}
           {commentMediaInfo?.type === "image" ? (
+            <span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
               <img className="card" key={`img-`}
               src={commentMediaInfo.url} alt={commentMediaInfo.type} 
               onError={(e) => {
                 e.target.src = fallbackImgUrl
                 e.target.onerror = null;}}  />
+            </span>
           ) : null}
           {commentMediaInfo?.type === "video" ? (
+            <span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
               <video className="card" key={`fti-`} 
               src={commentMediaInfo.url} 
               alt={commentMediaInfo.type} 
               onError={(e) => e.target.src = fallbackImgUrl} /> 
+            </span>
           ) : null}
           {commentMediaInfo?.type === "audio" ? (
               <audio className="card" controls 

src/components/views/Board.jsx

@@ -9,7 +9,8 @@ import { useAccount, useAccountComments, useFeed, usePublishComment, usePublishC
 import { flattenCommentsPages } from '@plebbit/plebbit-react-hooks/dist/lib/utils'
 import { debounce } from 'lodash';
 import { Container, NavBar, Header, Break, PostFormLink, PostFormTable, PostForm, TopBar, BoardForm, PostMenu } from '../styled/views/Board.styled';
-import { Footer, AuthorDeleteAlert } from '../styled/views/Thread.styled';
+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';
@@ -42,8 +43,8 @@ import useStateString from '../../hooks/useStateString';
 import useSuccess from '../../hooks/useSuccess';
 import useAnonModeStore from '../../hooks/stores/useAnonModeStore';
 import useGeneralStore from '../../hooks/stores/useGeneralStore';
-import packageJson from '../../../package.json'
+import packageJson from '../../../package.json';
-const {version} = packageJson
+const {version} = packageJson;
 let lastVirtuosoStates = {};
 
 
@@ -573,7 +574,7 @@ const Board = () => {
     confirmAlert({
       customUI: ({ onClose }) => {
         return (
-          <AuthorDeleteAlert selectedStyle={selectedStyle}>
+          <AlertModal selectedStyle={selectedStyle}>
             <div className='author-delete-alert'>
               <p>Are you sure you want to delete this post?</p>
               <div className="author-delete-buttons">
@@ -596,7 +597,7 @@ const Board = () => {
                 </button>
               </div>
             </div>
-          </AuthorDeleteAlert>
+          </AlertModal>
         );
       }
     });

src/components/views/Catalog.jsx

@@ -9,7 +9,8 @@ import { useAccount, useFeed, usePublishComment, usePublishCommentEdit, useSubpl
 import { debounce } from 'lodash';
 import { Container, NavBar, Header, Break, PostForm, PostFormLink, PostFormTable, PostMenu, BoardForm } from '../styled/views/Board.styled';
 import { Threads, PostMenuCatalog } from '../styled/views/Catalog.styled';
-import { TopBar, Footer, AuthorDeleteAlert } from '../styled/views/Thread.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';
@@ -30,9 +31,9 @@ import useAnonModeStore from '../../hooks/stores/useAnonModeStore';
 import useFeedRows from '../../hooks/useFeedRows';
 import useGeneralStore from '../../hooks/stores/useGeneralStore';
 import useWindowWidth from '../../hooks/useWindowWidth';
-import packageJson from '../../../package.json'
+import packageJson from '../../../package.json';
-const {version} = packageJson
+const {version} = packageJson;
-let lastVirtuosoStates = {}
+let lastVirtuosoStates = {};
 
 
 const CatalogPost = ({post}) => {
@@ -111,7 +112,7 @@ const CatalogPost = ({post}) => {
     confirmAlert({
       customUI: ({ onClose }) => {
         return (
-          <AuthorDeleteAlert selectedStyle={selectedStyle}>
+          <AlertModal selectedStyle={selectedStyle}>
             <div className='author-delete-alert'>
               <p>Are you sure you want to delete this post?</p>
               <div className="author-delete-buttons">
@@ -134,7 +135,7 @@ const CatalogPost = ({post}) => {
                 </button>
               </div>
             </div>
-          </AuthorDeleteAlert>
+          </AlertModal>
         );
       }
     });
@@ -254,6 +255,16 @@ const CatalogPost = ({post}) => {
   };
   
 
+  let displayWidth, displayHeight;
+  if (thread.linkWidth && thread.linkHeight) {
+    let scale = Math.min(1, 150 / Math.max(thread.linkWidth, thread.linkHeight));
+    displayWidth = `${thread.linkWidth * scale}px`;
+    displayHeight = `${thread.linkHeight * scale}px`;
+  } else {
+    displayWidth = '150px';
+    displayHeight = '150px';
+  }
+
 
   if (post.type === 'rules') {
     return (
@@ -452,26 +463,32 @@ const CatalogPost = ({post}) => {
           onClick={() => setSelectedThread(thread.cid)}>
             {commentMediaInfo?.type === "webpage" ? (
               thread.thumbnailUrl ? (
+                <span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
                   <img className="card" key={`img-`}
                   src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type}
                   onError={(e) => {
                     e.target.src = fallbackImgUrl
                     e.target.onerror = null;
                   }}  />
+                </span>
               ) : null
             ) : null}
             {commentMediaInfo?.type === "image" ? (
+              <span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
                 <img className="card" key={`img-`}
                 src={commentMediaInfo.url} alt={commentMediaInfo.type} 
                 onError={(e) => {
                   e.target.src = fallbackImgUrl
                   e.target.onerror = null;}}  />
+              </span>
             ) : null}
             {commentMediaInfo?.type === "video" ? (
+              <span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
                 <video className="card" key={`fti-`} 
                 src={commentMediaInfo.url} 
                 alt={commentMediaInfo.type} 
                 onError={(e) => e.target.src = fallbackImgUrl} /> 
+              </span>
             ) : null}
             {commentMediaInfo?.type === "audio" ? (
               <audio className="card" controls 

src/components/views/Description.jsx

@@ -18,8 +18,8 @@ import getDate from '../../utils/getDate';
 import handleImageClick from '../../utils/handleImageClick';
 import handleStyleChange from '../../utils/handleStyleChange';
 import useGeneralStore from '../../hooks/stores/useGeneralStore';
-import packageJson from '../../../package.json'
+import packageJson from '../../../package.json';
-const {version} = packageJson
+const {version} = packageJson;
 
 
 const Description = () => {

src/components/views/Home.jsx

@@ -7,9 +7,9 @@ import BoardAvatar from '../BoardAvatar';
 import OfflineIndicator from '../OfflineIndicator';
 import CreateBoardModal from '../modals/CreateBoardModal';
 import useGeneralStore from '../../hooks/stores/useGeneralStore';
-import packageJson from '../../../package.json'
+import packageJson from '../../../package.json';
 import { Tooltip } from 'react-tooltip';
-const {version} = packageJson
+const {version} = packageJson;
 // show commit ref on netlify to know which commit is being served for debugging
 const commitRef = process?.env?.REACT_APP_COMMIT_REF ? ` ${process.env.REACT_APP_COMMIT_REF.slice(0, 7)}` : ''
 
@@ -85,7 +85,7 @@ const Home = () => {
               (event) => {
                 if (event.key === "Enter") {
                   event.preventDefault();
-                  const address = inputRef.current.value;
+                  const address = inputRef.current.value.toLowerCase();;
                   if (address) {
                     setSelectedAddress(address);
                     navigate(`/p/${address}`)
@@ -94,7 +94,7 @@ const Home = () => {
             }} />
             <input type="submit" value="Search" onClick={
               () => {
-                const address = inputRef.current.value;
+                const address = inputRef.current.value.toLowerCase();;
                 if (address) {
                   setSelectedAddress(address);
                   navigate(`/p/${address}`)

src/components/views/NotFound.jsx

@@ -2,8 +2,8 @@ import React, { useEffect } from 'react';
 import { Helmet } from 'react-helmet-async';
 import { Link } from "react-router-dom";
 import { Container, Header, Logo, Page, Boards, BoardsTitle } from '../styled/views/Home.styled';
-import packageJson from '../../../package.json'
+import packageJson from '../../../package.json';
-const {version} = packageJson
+const {version} = packageJson;
 
 
 const NotFound = () => {

src/components/views/Pending.jsx

@@ -18,8 +18,8 @@ import handleQuoteClick from '../../utils/handleQuoteClick';
 import handleStyleChange from '../../utils/handleStyleChange';
 import useError from '../../hooks/useError';
 import useStateString from '../../hooks/useStateString';
-import packageJson from '../../../package.json'
+import packageJson from '../../../package.json';
-const {version} = packageJson
+const {version} = packageJson;
 
 
 const Pending = () => {

src/components/views/Rules.jsx

@@ -16,8 +16,8 @@ import SettingsModal from '../modals/SettingsModal';
 import getDate from '../../utils/getDate';
 import handleStyleChange from '../../utils/handleStyleChange';
 import useGeneralStore from '../../hooks/stores/useGeneralStore';
-import packageJson from '../../../package.json'
+import packageJson from '../../../package.json';
-const {version} = packageJson
+const {version} = packageJson;
 
 
 const Rules = () => {

src/components/views/Subscriptions.jsx

@@ -10,7 +10,8 @@ import { flattenCommentsPages } from '@plebbit/plebbit-react-hooks/dist/lib/util
 import { debounce } from 'lodash';
 import useGeneralStore from '../../hooks/stores/useGeneralStore';
 import { Container, NavBar, Header, Break, TopBar, BoardForm, PostMenu } from '../styled/views/Board.styled';
-import { AuthorDeleteAlert, Footer } from '../styled/views/Thread.styled';
+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';
@@ -40,8 +41,8 @@ import useError from '../../hooks/useError';
 import useFeedStateString from '../../hooks/useFeedStateString';
 import useSuccess from '../../hooks/useSuccess';
 import useAnonModeStore from '../../hooks/stores/useAnonModeStore';
-import packageJson from '../../../package.json'
+import packageJson from '../../../package.json';
-const {version} = packageJson
+const {version} = packageJson;
 let lastVirtuosoStates = {};
 
 
@@ -421,7 +422,7 @@ const Subscriptions = () => {
     confirmAlert({
       customUI: ({ onClose }) => {
         return (
-          <AuthorDeleteAlert selectedStyle={selectedStyle}>
+          <AlertModal selectedStyle={selectedStyle}>
             <div className='author-delete-alert'>
               <p>Are you sure you want to delete this post?</p>
               <div className="author-delete-buttons">
@@ -444,7 +445,7 @@ const Subscriptions = () => {
                 </button>
               </div>
             </div>
-          </AuthorDeleteAlert>
+          </AlertModal>
         );
       }
     });

src/components/views/SubscriptionsCatalog.jsx

@@ -9,7 +9,8 @@ import { useAccount, useFeed, usePublishCommentEdit, useSubplebbit, useSubplebbi
 import { debounce } from 'lodash';
 import { Container, NavBar, Header, Break, PostMenu, BoardForm } from '../styled/views/Board.styled';
 import { Threads, PostMenuCatalog } from '../styled/views/Catalog.styled';
-import { TopBar, Footer, AuthorDeleteAlert } from '../styled/views/Thread.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';
@@ -28,8 +29,8 @@ import useGeneralStore from '../../hooks/stores/useGeneralStore';
 import useSuccess from '../../hooks/useSuccess';
 import useWindowWidth from '../../hooks/useWindowWidth';
 import packageJson from '../../../package.json';
-const {version} = packageJson
+const {version} = packageJson;
-let lastVirtuosoStates = {}
+let lastVirtuosoStates = {};
 
 
 const CatalogPost = ({post}) => {
@@ -116,7 +117,7 @@ const CatalogPost = ({post}) => {
     confirmAlert({
       customUI: ({ onClose }) => {
         return (
-          <AuthorDeleteAlert selectedStyle={selectedStyle}>
+          <AlertModal selectedStyle={selectedStyle}>
             <div className='author-delete-alert'>
               <p>Are you sure you want to delete this post?</p>
               <div className="author-delete-buttons">
@@ -139,7 +140,7 @@ const CatalogPost = ({post}) => {
                 </button>
               </div>
             </div>
-          </AuthorDeleteAlert>
+          </AlertModal>
         );
       }
     });
@@ -265,6 +266,17 @@ const CatalogPost = ({post}) => {
   }, [triggerPublishCommentEdit, publishCommentEdit, publishCommentEditOptions]);
 
 
+  let displayWidth, displayHeight;
+  if (thread.linkWidth && thread.linkHeight) {
+    let scale = Math.min(1, 150 / Math.max(thread.linkWidth, thread.linkHeight));
+    displayWidth = `${thread.linkWidth * scale}px`;
+    displayHeight = `${thread.linkHeight * scale}px`;
+  } else {
+    displayWidth = '150px';
+    displayHeight = '150px';
+  }
+
+
   return (
     <div key={`thread-`} className="thread" 
     onMouseOver={() => {setIsHoveringOnThread(thread.cid)}} 
@@ -274,26 +286,32 @@ const CatalogPost = ({post}) => {
         onClick={() => setSelectedThread(thread.cid)}>
           {commentMediaInfo?.type === "webpage" ? (
             thread.thumbnailUrl ? (
+              <span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
                 <img className="card" key={`img-`}
                 src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type}
                 onError={(e) => {
                   e.target.src = fallbackImgUrl
                   e.target.onerror = null;
                 }}  />
+              </span>
             ) : null
           ) : null}
           {commentMediaInfo?.type === "image" ? (
+            <span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
               <img className="card" key={`img-`}
               src={commentMediaInfo.url} alt={commentMediaInfo.type} 
               onError={(e) => {
                 e.target.src = fallbackImgUrl
                 e.target.onerror = null;}}  />
+            </span>
           ) : null}              
           {commentMediaInfo?.type === "video" ? (
+            <span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
               <video className="card" key={`fti-`} 
               src={commentMediaInfo.url} 
               alt={commentMediaInfo.type} 
               onError={(e) => e.target.src = fallbackImgUrl} /> 
+            </span>
           ) : null}
           {commentMediaInfo?.type === "audio" ? (
               <audio className="card" controls 
@@ -729,7 +747,7 @@ const SubscriptionsCatalog = () => {
         </TopBar>
         <Tooltip id="tooltip" className="tooltip" />
         <Threads selectedStyle={selectedStyle}>
-          {feed.length > 1 ? (
+          {account.subscriptions.length > 0 ? (
             <Virtuoso
               increaseViewportBy={{bottom: 600, top: 600}}
               totalCount={rows?.length || 0}
@@ -743,7 +761,9 @@ const SubscriptionsCatalog = () => {
               restoreStateFrom={lastVirtuosoState}
               initialScrollTop={lastVirtuosoState?.scrollTop}
             />
-          ) : (<CatalogLoader />)}
+          ) : (
+          account.subscriptions.length !== 0 ?
+          <CatalogLoader /> : null)}
         </Threads>
         <Footer selectedStyle={selectedStyle}>
           <Break id="break" selectedStyle={selectedStyle} style={{

src/components/views/Thread.jsx

@@ -8,7 +8,8 @@ import { useAccount, useAccountComments, useComment, usePublishComment, usePubli
 import { flattenCommentsPages } from '@plebbit/plebbit-react-hooks/dist/lib/utils'
 import { debounce } from 'lodash';
 import { Container, NavBar, Header, Break, PostForm, PostFormTable, PostMenu } from '../styled/views/Board.styled';
-import { ReplyFormLink, TopBar, BottomBar, BoardForm, Footer, AuthorDeleteAlert } from '../styled/views/Thread.styled';
+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 EditLabel from '../EditLabel';
@@ -40,8 +41,8 @@ import useStateString from '../../hooks/useStateString';
 import useSuccess from '../../hooks/useSuccess';
 import useAnonModeStore from '../../hooks/stores/useAnonModeStore';
 import useGeneralStore from '../../hooks/stores/useGeneralStore';
-import packageJson from '../../../package.json'
+import packageJson from '../../../package.json';
-const {version} = packageJson
+const {version} = packageJson;
 
 
 const Thread = () => {
@@ -513,7 +514,7 @@ const Thread = () => {
     confirmAlert({
       customUI: ({ onClose }) => {
         return (
-          <AuthorDeleteAlert selectedStyle={selectedStyle}>
+          <AlertModal selectedStyle={selectedStyle}>
             <div className='author-delete-alert'>
               <p>Are you sure you want to delete this post?</p>
               <div className="author-delete-buttons">
@@ -536,7 +537,7 @@ const Thread = () => {
                 </button>
               </div>
             </div>
-          </AuthorDeleteAlert>
+          </AlertModal>
         );
       }
     });

yarn.lock

@@ -1445,10 +1445,10 @@
   resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.6.2.tgz#1816b5f6948029c5eaacb0703b850ee0cb37d8f8"
   integrity sha512-pPTNuaAG3QMH+buKyBIGJs3g/S5y0caxw0ygM3YyE6yJFySwiGGSzA+mM3KJ8QQvzeLh3blwgSonkFjgQdxzMw==
 
-"@eslint/eslintrc@^2.0.1", "@eslint/eslintrc@^2.1.1":
+"@eslint/eslintrc@^2.0.1", "@eslint/eslintrc@^2.1.2":
-  version "2.1.1"
+  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-2.1.1.tgz#18d635e24ad35f7276e8a49d135c7d3ca6a46f93"
+  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-2.1.2.tgz#c6936b4b328c64496692f76944e755738be62396"
-  integrity sha512-9t7ZA7NGGK8ckelF0PQCfcxIUzs1Md5rrO6U/c+FIQNanea5UZC0wqKXH4vHBccmu4ZJgZ2idtPeW7+Q2npOEA==
+  integrity sha512-+wvgpDsrB1YqAMdEUCcnTlpfVBH7Vqn6A/NT3D8WVXFIaKMlErPIZT3oCIAVCOtarRpMtelZLqJeU3t7WY6X6g==
   dependencies:
     ajv "^6.12.4"
     debug "^4.3.2"
@@ -1465,10 +1465,10 @@
   resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.36.0.tgz#9837f768c03a1e4a30bd304a64fb8844f0e72efe"
   integrity sha512-lxJ9R5ygVm8ZWgYdUweoq5ownDlJ4upvoWmO4eLxBYHdMo+vZ/Rx0EN6MbKWDJOSUGrqJy2Gt+Dyv/VKml0fjg==
 
-"@eslint/js@^8.46.0":
+"@eslint/js@^8.47.0":
-  version "8.46.0"
+  version "8.47.0"
-  resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.46.0.tgz#3f7802972e8b6fe3f88ed1aabc74ec596c456db6"
+  resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.47.0.tgz#5478fdf443ff8158f9de171c704ae45308696c7d"
-  integrity sha512-a8TLtmPi8xzPkCbp/OGFUo5yhRkHM2Ko9kOWP4znJr0WAhWyThaw3PnwX4vOTWOAMsV2uRt32PPDcEz63esSaA==
+  integrity sha512-P6omY1zv5MItm93kLM8s2vr1HICJH8v0dvddDhysbIuZ+vcjOHg5Zbkf1mTkcmi2JA9oBG2anOkRnW8WJTS8Og==
 
 "@ethersproject/abi@5.6.4":
   version "5.6.4"
@@ -3391,9 +3391,9 @@
     form-data "^3.0.0"
 
 "@types/node@*", "@types/node@>=13.7.0":
-  version "20.4.9"
+  version "20.4.10"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.4.9.tgz#c7164e0f8d3f12dfae336af0b1f7fdec8c6b204f"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.4.10.tgz#73c9480791e3ddeb4887a660fc93a7f59353ad45"
-  integrity sha512-8e2HYcg7ohnTUbHk8focoklEQYvemQmu9M/f43DZVx43kHn0tE3BY/6gSDxS7k0SprtS0NHvj+L80cGLnoOUcQ==
+  integrity sha512-vwzFiiy8Rn6E0MtA13/Cxxgpan/N6UeNYR9oUu6kuJWxu6zCk98trcDp8CBhbtaeuq9SykCmXkFr2lWLoPcvLg==
 
 "@types/node@18.15.13":
   version "18.15.13"
@@ -4963,9 +4963,9 @@ caniuse-api@^3.0.0:
     lodash.uniq "^4.5.0"
 
 caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001464, caniuse-lite@^1.0.30001517:
-  version "1.0.30001519"
+  version "1.0.30001520"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001519.tgz#3e7b8b8a7077e78b0eb054d69e6edf5c7df35601"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001520.tgz#62e2b7a1c7b35269594cf296a80bdf8cb9565006"
-  integrity sha512-0QHgqR+Jv4bxHMp8kZ1Kn8CH55OikjKJ6JmKkZYP1F3D7w+lnFXF70nG5eNfsZS89jadi5Ywy5UCSKLAglIRkg==
+  integrity sha512-tahF5O9EiiTzwTUqAeFjIZbn4Dnqxzz7ktrgGlMYNLH43Ul26IgTMH/zvL3DG0lZxBYnlT04axvInszUsZULdA==
 
 captcha-canvas@3.2.1:
   version "3.2.1"
@@ -6854,10 +6854,10 @@ eslint-visitor-keys@^2.1.0:
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz#f65328259305927392c938ed44eb0a5c9b2bd303"
   integrity sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==
 
-eslint-visitor-keys@^3.3.0, eslint-visitor-keys@^3.4.1, eslint-visitor-keys@^3.4.2:
+eslint-visitor-keys@^3.3.0, eslint-visitor-keys@^3.4.1, eslint-visitor-keys@^3.4.3:
-  version "3.4.2"
+  version "3.4.3"
-  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.2.tgz#8c2095440eca8c933bedcadf16fefa44dbe9ba5f"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz#0cd72fe8550e3c2eae156a96a4dddcd1c8ac5800"
-  integrity sha512-8drBzUEyZ2llkpCA67iYrgEssKDUu68V8ChqqOfFupIaG/LCVPUT+CoGJpT77zJprs4T/W7p07LP7zAIMuweVw==
+  integrity sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==
 
 eslint-webpack-plugin@^3.1.1:
   version "3.2.0"
@@ -6917,14 +6917,14 @@ eslint@8.36.0:
     text-table "^0.2.0"
 
 eslint@^8.3.0:
-  version "8.46.0"
+  version "8.47.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.46.0.tgz#a06a0ff6974e53e643acc42d1dcf2e7f797b3552"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.47.0.tgz#c95f9b935463fb4fad7005e626c7621052e90806"
-  integrity sha512-cIO74PvbW0qU8e0mIvk5IV3ToWdCq5FYG6gWPHHkx6gNdjlbAYvtfHmlCMXxjcoVaIdwy/IAt3+mDkZkfvb2Dg==
+  integrity sha512-spUQWrdPt+pRVP1TTJLmfRNJJHHZryFmptzcafwSvHsceV81djHOdnEeDmkdotZyLNjDhrOasNK8nikkoG1O8Q==
   dependencies:
     "@eslint-community/eslint-utils" "^4.2.0"
     "@eslint-community/regexpp" "^4.6.1"
-    "@eslint/eslintrc" "^2.1.1"
+    "@eslint/eslintrc" "^2.1.2"
-    "@eslint/js" "^8.46.0"
+    "@eslint/js" "^8.47.0"
     "@humanwhocodes/config-array" "^0.11.10"
     "@humanwhocodes/module-importer" "^1.0.1"
     "@nodelib/fs.walk" "^1.2.8"
@@ -6935,7 +6935,7 @@ eslint@^8.3.0:
     doctrine "^3.0.0"
     escape-string-regexp "^4.0.0"
     eslint-scope "^7.2.2"
-    eslint-visitor-keys "^3.4.2"
+    eslint-visitor-keys "^3.4.3"
     espree "^9.6.1"
     esquery "^1.4.2"
     esutils "^2.0.2"
@@ -7753,9 +7753,9 @@ globals@^11.1.0:
   integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
 
 globals@^13.19.0:
-  version "13.20.0"
+  version "13.21.0"
-  resolved "https://registry.yarnpkg.com/globals/-/globals-13.20.0.tgz#ea276a1e508ffd4f1612888f9d1bad1e2717bf82"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-13.21.0.tgz#163aae12f34ef502f5153cfbdd3600f36c63c571"
-  integrity sha512-Qg5QtVkCy/kv3FUSlu4ukeZDVf9ee0iXLAUYX13gbR17bnejFTzr4iS9bY7kwCf1NztRNm1t91fjOiyx4CSwPQ==
+  integrity sha512-ybyme3s4yy/t/3s35bewwXKOf7cvzfreG2lH0lZl0JB7I4GxRP2ghxOK/Nb9EkRXdbBXZLfq/p/0W2JUONB/Gg==
   dependencies:
     type-fest "^0.20.2"
 
@@ -12118,9 +12118,9 @@ proto-list@~1.2.1:
   integrity sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==
 
 protobufjs@^6.10.2, protobufjs@^6.11.2:
-  version "6.11.3"
+  version "6.11.4"
-  resolved "https://registry.yarnpkg.com/protobufjs/-/protobufjs-6.11.3.tgz#637a527205a35caa4f3e2a9a4a13ddffe0e7af74"
+  resolved "https://registry.yarnpkg.com/protobufjs/-/protobufjs-6.11.4.tgz#29a412c38bf70d89e537b6d02d904a6f448173aa"
-  integrity sha512-xL96WDdCZYdU7Slin569tFX712BxsxslWwAfAhCYjQKGTq7dAU91Lomy6nLLhh/dyGhk/YH4TwTSRxTzhuHyZg==
+  integrity sha512-5kQWPaJHi1WoCpjTGszzQ32PG2F4+wRY6BmAT4Vfw56Q2FZ4YZzK20xUYQH4YkfehY1e6QSICrJquM6xXZNcrw==
   dependencies:
     "@protobufjs/aspromise" "^1.1.2"
     "@protobufjs/base64" "^1.1.2"