diff --git a/package.json b/package.json
index 79ba5142..42e7ca66 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
"react-modal": "^3.16.1",
"react-router-dom": "^6.8.0",
"react-scripts": "5.0.1",
+ "react-toastify": "^9.1.1",
"react-tooltip": "^5.8.3",
"styled-components": "^5.3.6",
"web-vitals": "^2.1.0",
diff --git a/src/App.js b/src/App.js
index 39d4a49a..c374e497 100644
--- a/src/App.js
+++ b/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() {
} />
+
)}
\ No newline at end of file
diff --git a/src/components/Board.jsx b/src/components/Board.jsx
index b22d5a07..91935474 100644
--- a/src/components/Board.jsx
+++ b/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);
}
};
diff --git a/src/components/Catalog.jsx b/src/components/Catalog.jsx
index d25cc568..47191a62 100644
--- a/src/components/Catalog.jsx
+++ b/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);
}
};
diff --git a/src/components/Thread.jsx b/src/components/Thread.jsx
index 28f0061d..3e0a890e 100644
--- a/src/components/Thread.jsx
+++ b/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);
}
};
diff --git a/src/utils/onError.js b/src/utils/onError.js
new file mode 100644
index 00000000..81d9f07d
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index f13c97d9..5da3e39f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4344,6 +4344,11 @@ clone-deep@^4.0.1:
kind-of "^6.0.2"
shallow-clone "^3.0.0"
+clsx@^1.1.1:
+ version "1.2.1"
+ resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
+ integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
+
co@^4.6.0:
version "4.6.0"
resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
@@ -10159,6 +10164,13 @@ react-scripts@5.0.1:
optionalDependencies:
fsevents "^2.3.2"
+react-toastify@^9.1.1:
+ version "9.1.1"
+ resolved "https://registry.yarnpkg.com/react-toastify/-/react-toastify-9.1.1.tgz#9280caea4a13dc1739c350d90660a630807bf10b"
+ integrity sha512-pkFCla1z3ve045qvjEmn2xOJOy4ZciwRXm1oMPULVkELi5aJdHCN/FHnuqXq8IwGDLB7PPk2/J6uP9D8ejuiRw==
+ dependencies:
+ clsx "^1.1.1"
+
react-tooltip@^5.8.3:
version "5.8.3"
resolved "https://registry.yarnpkg.com/react-tooltip/-/react-tooltip-5.8.3.tgz#d9c94eafb6c3d4d7be43b4acfe6f3cbde82df9ab"