fix react-toastify with setTimeout

src/components/views/Catalog.jsx

@@ -2,7 +2,7 @@ import React, { Fragment, useCallback, useEffect, useRef, useState } from 'react
 import { Helmet } from 'react-helmet-async';
 import InfiniteScroll from 'react-infinite-scroller';
 import { Link, useNavigate, useParams } from 'react-router-dom';
-import { useAccount, useFeed, usePublishComment, useSubscribe } from '@plebbit/plebbit-react-hooks';
+import { useFeed, usePublishComment, useSubscribe } from '@plebbit/plebbit-react-hooks';
 import { debounce } from 'lodash';
 import useGeneralStore from '../../hooks/stores/useGeneralStore';
 import { Container, NavBar, Header, Break, PostForm, PostFormLink, PostFormTable } from '../styled/Board.styled';
@@ -38,8 +38,6 @@ const Catalog = () => {
     showPostFormLink,
   } = useGeneralStore(state => state);
 
-  const account = useAccount();
-
   const nameRef = useRef();
   const subjectRef = useRef();
   const commentRef = useRef();

src/components/views/Subscriptions.jsx

@@ -30,7 +30,7 @@ const Subscriptions = () => {
   const {
     defaultSubplebbits,
     isSettingsOpen, setIsSettingsOpen,
-    selectedAddress, setSelectedAddress,
+    setSelectedAddress,
     setSelectedParentCid,
     setSelectedShortCid,
     selectedStyle,

src/hooks/useError.js

@@ -3,20 +3,28 @@ import { toast } from "react-toastify";
 
 const useError = (message) => {
   useEffect(() => {
-    if (message) {
-      const toastId = toast.error(message.toString(), {
-        position: "top-right",
-        autoClose: false,
-        hideProgressBar: false,
-        closeOnClick: false,
-        pauseOnHover: true,
-        draggable: false,
-        progress: undefined,
-        theme: "dark",
-      });
+    if (message && message.length > 0) {
+      const showErrorToast = () => {
+        const toastId = toast.error(message.toString(), {
+          position: "top-right",
+          autoClose: false,
+          hideProgressBar: true,
+          closeOnClick: false,
+          pauseOnHover: false,
+          draggable: false,
+          progress: undefined,
+          theme: "dark",
+        });
+
+        return () => {
+          toast.dismiss(toastId);
+        };
+      };
+
+      const timeoutId = setTimeout(showErrorToast, 500);
 
       return () => {
-        toast.dismiss(toastId);
+        clearTimeout(timeoutId);
       };
     }
   }, [message]);

src/hooks/useSuccess.js

@@ -3,20 +3,28 @@ import { toast } from "react-toastify";
 
 const useSuccess = (message) => {
   useEffect(() => {
-    if (message) {
-      const toastId = toast.success(message.toString(), {
-        position: "top-right",
-        autoClose: 3000,
-        hideProgressBar: false,
-        closeOnClick: false,
-        pauseOnHover: false,
-        draggable: false,
-        progress: undefined,
-        theme: "dark",
-      });
+    if (message && message.length > 0) {
+      const showSuccessToast = () => {
+        const toastId = toast.success(message.toString(), {
+          position: "top-right",
+          autoClose: 3000,
+          hideProgressBar: false,
+          closeOnClick: false,
+          pauseOnHover: false,
+          draggable: false,
+          progress: undefined,
+          theme: "dark",
+        });
+
+        return () => {
+          toast.dismiss(toastId);
+        };
+      };
+
+      const timeoutId = setTimeout(showSuccessToast, 500);
 
       return () => {
-        toast.dismiss(toastId);
+        clearTimeout(timeoutId);
       };
     }
   }, [message]);