added error pop-up

src/App.js

@@ -7,9 +7,11 @@ import Board from './components/Board';
 import Thread from './components/Thread';
 import Catalog from './components/Catalog';
 import NotFound from './components/NotFound';
-import { createGlobalStyle } from 'styled-components';
+import styled, { createGlobalStyle } from 'styled-components';
 import 'react-tooltip/dist/react-tooltip.css';
+import 'react-toastify/dist/ReactToastify.css';
 import preloadImages from './utils/preloadImages';
+import { ToastContainer } from 'react-toastify';
 
 
 const GlobalStyle = createGlobalStyle`
@@ -30,6 +32,13 @@ const GlobalStyle = createGlobalStyle`
   }
 `;
 
+const StyledContainer = styled(ToastContainer)`
+  .Toastify__toast {
+    border-radius: 0px;
+    font-size: 11pt;
+  }
+`;
+
 
 export default function App() {
   const { bodyStyle, setBodyStyle } = useBoardStore(state => state);
@@ -69,5 +78,6 @@ export default function App() {
         </Route>
         <Route path='*' element={<NotFound />} />
       </Routes>
+      <StyledContainer />
   </div>
 )}

src/components/Board.jsx

@@ -7,6 +7,7 @@ import CaptchaModal from './CaptchaModal';
 import { useFeed, useAccountsActions } from '@plebbit/plebbit-react-hooks';
 import InfiniteScroll from 'react-infinite-scroller';
 import { Tooltip } from 'react-tooltip';
+import onError from '../utils/onError';
 import getDate from '../utils/getDate';
 import renderComments from '../utils/renderComments';
 
@@ -181,9 +182,6 @@ const Board = ({ setBodyStyle }) => {
   }
   
 
-  const onError = (error) => console.error(error)
-
-
   const getChallengeAnswersFromUser = async (challenges) => {
     return new Promise((resolve, reject) => {
       const imageString = challenges?.challenges[0].challenge;
@@ -268,14 +266,14 @@ const Board = ({ setBodyStyle }) => {
         subplebbitAddress: selectedAddress,
         onChallengeVerification,
         onChallenge,
-        onError,
+        onError: onError,
       });
       console.log(`Comment pending with index: ${pendingComment.index}`);
       setName('');
       setSubject('');
       setComment('');
     } catch (error) {
-      console.error(error);
+      onError(error);
     }
   };
 

src/components/Catalog.jsx

@@ -7,6 +7,7 @@ import { Threads } from './styles/Catalog.styled';
 import { useFeed, useAccountsActions } from '@plebbit/plebbit-react-hooks';
 import ImageBanner from './ImageBanner';
 import CaptchaModal from './CaptchaModal';
+import onError from '../utils/onError';
 import InfiniteScroll from 'react-infinite-scroller';
 
 
@@ -241,14 +242,14 @@ const Catalog = ({ setBodyStyle }) => {
         subplebbitAddress: selectedAddress,
         onChallengeVerification,
         onChallenge,
-        onError,
+        onError: onError,
       });
       console.log(`Comment pending with index: ${pendingComment.index}`);
       setName('');
       setSubject('');
       setComment('');
     } catch (error) {
-      console.error(error);
+      onError(error);
     }
   };
 

src/components/Thread.jsx

@@ -7,6 +7,7 @@ import { useComment, useAccountsActions } from '@plebbit/plebbit-react-hooks';
 import ImageBanner from './ImageBanner';
 import CaptchaModal from './CaptchaModal';
 import { Tooltip } from 'react-tooltip';
+import onError from '../utils/onError';
 import getDate from '../utils/getDate';
 import renderThreadComments from '../utils/renderThreadComments';
 
@@ -156,9 +157,6 @@ const Thread = ({ setBodyStyle }) => {
       await comment.publishChallengeAnswers(challengeAnswers)
     }
   }
-  
-
-  const onError = (error) => console.error(error)
 
 
   const getChallengeAnswersFromUser = async (challenges) => {
@@ -241,14 +239,14 @@ const Thread = ({ setBodyStyle }) => {
         subplebbitAddress: selectedAddress,
         onChallengeVerification,
         onChallenge,
-        onError,
+        onError: onError,
       });
       console.log(`Comment pending with index: ${pendingComment.index}`);
       setName('');
       setSubject('');
       setCommentContent('');
     } catch (error) {
-      console.error(error);
+      onError(error);
     }
   };
 

src/utils/onError.js

@@ -0,0 +1,16 @@
+import { toast } from 'react-toastify';
+
+const onError = (error) => {
+  return toast.error(error.toString(), {
+    position: "bottom-center",
+    autoClose: false,
+    hideProgressBar: false,
+    closeOnClick: false,
+    pauseOnHover: true,
+    draggable: false,
+    progress: undefined,
+    theme: "dark",
+  });
+};
+
+export default onError;