added success toast

src/App.js

@@ -38,6 +38,7 @@ const StyledContainer = styled(ToastContainer)`
     font-size: 11pt;
     animation-duration: 0s;
     border: 1px solid #fee9cd;
+    color: #c5c8c6;
   }
 `;
 

src/components/Board.jsx

@@ -8,6 +8,7 @@ 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 onSuccess from '../utils/onSuccess';
 import getDate from '../utils/getDate';
 import renderComments from '../utils/renderComments';
 import SettingsModal from './SettingsModal';
@@ -169,11 +170,11 @@ const Board = ({ setBodyStyle }) => {
 
   const onChallengeVerification = (challengeVerification) => {
     if (challengeVerification.challengeSuccess === true) {
-      console.log('challenge success', {publishedCid: challengeVerification.publication.cid})
+      onSuccess('challenge success', {publishedCid: challengeVerification.publication.cid})
     }
     else if (challengeVerification.challengeSuccess === false) {
-      console.error('challenge failed', {reason: challengeVerification.reason, errors: challengeVerification.errors});
+      onError('challenge failed', {reason: challengeVerification.reason, errors: challengeVerification.errors});
-      alert("Error: You seem to have mistyped the CAPTCHA. Please try again.");
+      onError("Error: You seem to have mistyped the CAPTCHA. Please try again.");
     }
   }
 
@@ -184,7 +185,7 @@ const Board = ({ setBodyStyle }) => {
       challengeAnswers = await getChallengeAnswersFromUser(challenges)
     }
     catch (error) {
-      console.log(error);
+      onError(error);
     }
     if (challengeAnswers) {
       await comment.publishChallengeAnswers(challengeAnswers)
@@ -217,7 +218,7 @@ const Board = ({ setBodyStyle }) => {
       };
   
       challengeImg.onerror = () => {
-        reject(new Error('Could not load challenge image'));
+        reject(onError('Could not load challenge image'));
       };
     });
   };

src/components/Catalog.jsx

@@ -8,6 +8,7 @@ import { useFeed, useAccountsActions } from '@plebbit/plebbit-react-hooks';
 import ImageBanner from './ImageBanner';
 import CaptchaModal from './CaptchaModal';
 import onError from '../utils/onError';
+import onSuccess from '../utils/onSuccess';
 import InfiniteScroll from 'react-infinite-scroller';
 
 
@@ -140,11 +141,11 @@ const Catalog = ({ setBodyStyle }) => {
 
   const onChallengeVerification = (challengeVerification) => {
     if (challengeVerification.challengeSuccess === true) {
-      console.log('challenge success', {publishedCid: challengeVerification.publication.cid})
+      onSuccess('challenge success', {publishedCid: challengeVerification.publication.cid})
     }
     else if (challengeVerification.challengeSuccess === false) {
-      console.error('challenge failed', {reason: challengeVerification.reason, errors: challengeVerification.errors});
+      onError('challenge failed', {reason: challengeVerification.reason, errors: challengeVerification.errors});
-      alert("Error: You seem to have mistyped the CAPTCHA. Please try again.");
+      onError("Error: You seem to have mistyped the CAPTCHA. Please try again.");
     }
   }
 
@@ -155,7 +156,7 @@ const Catalog = ({ setBodyStyle }) => {
       challengeAnswers = await getChallengeAnswersFromUser(challenges)
     }
     catch (error) {
-      console.log(error);
+      onError(error);
     }
     if (challengeAnswers) {
       await comment.publishChallengeAnswers(challengeAnswers)
@@ -188,7 +189,7 @@ const Catalog = ({ setBodyStyle }) => {
       };
   
       challengeImg.onerror = () => {
-        reject(new Error('Could not load challenge image'));
+        reject(onError('Could not load challenge image'));
       };
     });
   };

src/components/Thread.jsx

@@ -8,6 +8,7 @@ import ImageBanner from './ImageBanner';
 import CaptchaModal from './CaptchaModal';
 import { Tooltip } from 'react-tooltip';
 import onError from '../utils/onError';
+import onSuccess from '../utils/onSuccess';
 import getDate from '../utils/getDate';
 import renderThreadComments from '../utils/renderThreadComments';
 
@@ -136,11 +137,11 @@ const Thread = ({ setBodyStyle }) => {
 
   const onChallengeVerification = (challengeVerification) => {
     if (challengeVerification.challengeSuccess === true) {
-      console.log('challenge success', {publishedCid: challengeVerification.publication.cid})
+      onSuccess('challenge success', {publishedCid: challengeVerification.publication.cid})
     }
     else if (challengeVerification.challengeSuccess === false) {
-      console.error('challenge failed', {reason: challengeVerification.reason, errors: challengeVerification.errors});
+      onError('challenge failed', {reason: challengeVerification.reason, errors: challengeVerification.errors});
-      alert("Error: You seem to have mistyped the CAPTCHA. Please try again.");
+      onError("Error: You seem to have mistyped the CAPTCHA. Please try again.");
     }
   }
 
@@ -151,7 +152,7 @@ const Thread = ({ setBodyStyle }) => {
       challengeAnswers = await getChallengeAnswersFromUser(challenges)
     }
     catch (error) {
-      console.log(error);
+      onError(error);
     }
     if (challengeAnswers) {
       await comment.publishChallengeAnswers(challengeAnswers)
@@ -184,7 +185,7 @@ const Thread = ({ setBodyStyle }) => {
       };
   
       challengeImg.onerror = () => {
-        reject(new Error('Could not load challenge image'));
+        reject(onError('Could not load challenge image'));
       };
     });
   };

src/utils/onSuccess.js

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