improve account import

src/App.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Route, Routes, useLocation } from 'react-router-dom';
 import { Helmet } from 'react-helmet-async';
 import { useAccount, useBufferedFeeds } from '@plebbit/plebbit-react-hooks';
@@ -18,6 +18,8 @@ import Thread from './components/views/Thread';
 import CaptchaModal from './components/CaptchaModal';
 import { importAll } from './components/ImageBanner';
 import preloadImages from './utils/preloadImages';
+import useError from "./hooks/useError";
+import useSuccess from "./hooks/useSuccess";
 
 
 export default function App() {
@@ -36,6 +38,26 @@ export default function App() {
 
   const account = useAccount();
 
+  const [errorMessage, setErrorMessage] = useState(null);
+  const [successMessage, setSuccessMessage] = useState(null);
+  useError(errorMessage, [errorMessage]);
+  useSuccess(successMessage, [successMessage]);
+
+
+  useEffect(() => {
+    const successToast = localStorage.getItem("successToast");
+    const errorToast = localStorage.getItem("errorToast");
+    if (successToast) {
+      setSuccessMessage(successToast);
+      localStorage.removeItem("successToast");
+    } else if (errorToast) {
+      setErrorMessage(errorToast);
+      localStorage.removeItem("errorToast");
+    } else {
+      return;
+    }
+  }, [setErrorMessage, setSuccessMessage]);
+
   // preload default subs and subscriptions
   useBufferedFeeds({
     feedsOptions: [

src/components/SettingsModal.jsx

@@ -64,7 +64,7 @@ const SettingsModal = ({ isOpen, closeModal }) => {
 
     try {
       await setAccount({ ...account, plebbitOptions });
-      localStorage.setItem("toastMessage", "Settings Saved");
+      localStorage.setItem("successToast", "Settings Saved");
       window.location.reload();
     } catch (error) {
       setErrorMessage(error.message);
@@ -97,7 +97,7 @@ const SettingsModal = ({ isOpen, closeModal }) => {
           pubsubHttpClientsOptions: defaultPubsubHttpClientsOptions,
         },
       });
-      localStorage.setItem("toastMessage", "Settings Reset");
+      localStorage.setItem("successToast", "Settings Reset");
       window.location.reload();
     } catch (error) {
       setErrorMessage(error.message);
@@ -158,9 +158,10 @@ const SettingsModal = ({ isOpen, closeModal }) => {
     const accountJson = importRef.current.value;
 
     try {
+      const parsedJson = JSON.parse(accountJson);
       await importAccount(accountJson);
-      localStorage.setItem("toastMessage", "Account Imported");
+      setActiveAccount(parsedJson.account?.name);
-      window.location.reload();
+      setSuccessMessage("Account Imported");
       
     } catch (error) {
       setErrorMessage(error.message);

src/components/views/SubscriptionsCatalog.jsx

@@ -120,7 +120,7 @@ const SubscriptionsCatalog = () => {
               }>Create Board</button>
               ]
               [
-              <Link to={`/p/${selectedAddress}/catalog/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
+              <Link to={`/p/subscriptions/catalog/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
               ]
               [
               <Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}
@@ -145,7 +145,7 @@ const SubscriptionsCatalog = () => {
                   }>Create Board</button>
               </div>
               <div className="page-jump">
-                <Link to={`/p/${selectedAddress}/catalog/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
+                <Link to={`/p/subscriptions/catalog/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
                 &nbsp;
                 <Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}
                   )}>Home</Link>