sort errors with toasts

src/components/Tabs/KeystoreTab/KeystoreManagement.tsx

@@ -47,7 +47,6 @@ export function KeystoreManagement() {
     getMembershipInfo
   } = useRLN();
 
-  const { setGlobalError } = useAppState();
   const [exportPassword, setExportPassword] = useState<string>('');
   const [selectedCredential, setSelectedCredential] = useState<string | null>(null);
   const [viewPassword, setViewPassword] = useState<string>('');
@@ -59,14 +58,14 @@ export function KeystoreManagement() {
 
   React.useEffect(() => {
     if (error) {
-      setGlobalError(error);
+      toast.error(error);
     }
-  }, [error, setGlobalError]);
+  }, [error]);
 
   const handleExportKeystoreCredential = async (hash: string) => {
     try {
       if (!exportPassword) {
-        setGlobalError('Please enter your keystore password to export');
+        toast.error('Please enter your keystore password to export');
         return;
       }
       const keystore = await exportCredential(hash, exportPassword);
@@ -74,7 +73,7 @@ export function KeystoreManagement() {
       setExportPassword('');
       setSelectedCredential(null);
     } catch (err) {
-      setGlobalError(err instanceof Error ? err.message : 'Failed to export credential');
+      toast.error(err instanceof Error ? err.message : 'Failed to export credential');
     }
   };
 
@@ -83,10 +82,10 @@ export function KeystoreManagement() {
       const keystore = await readKeystoreFromFile();
       const success = importKeystore(keystore);
       if (!success) {
-        setGlobalError('Failed to import keystore');
+        toast.error('Failed to import keystore');
       }
     } catch (err) {
-      setGlobalError(err instanceof Error ? err.message : 'Failed to import keystore');
+      toast.error(err instanceof Error ? err.message : 'Failed to import keystore');
     }
   };
 
@@ -94,7 +93,7 @@ export function KeystoreManagement() {
     try {
       removeCredential(hash);
     } catch (err) {
-      setGlobalError(err instanceof Error ? err.message : 'Failed to remove credential');
+      toast.error(err instanceof Error ? err.message : 'Failed to remove credential');
     }
   };
 

src/components/Tabs/MembershipTab/MembershipRegistration.tsx

@@ -3,7 +3,6 @@
 import React, { useState, useEffect } from 'react';
 import { RLNImplementationToggle } from '../../RLNImplementationToggle';
 import { KeystoreEntity } from '@waku/rln';
-import { useAppState } from '../../../contexts/AppStateContext';
 import { useRLN } from '../../../contexts/rln/RLNContext';
 import { useWallet } from '../../../contexts/wallet';
 import { RLNInitButton } from '../../RLNinitButton';
@@ -11,9 +10,9 @@ import { TerminalWindow } from '../../ui/terminal-window';
 import { Slider } from '../../ui/slider';
 import { Button } from '../../ui/button';
 import { membershipRegistration, type ContentSegment } from '../../../content/index';
+import { toast } from 'sonner';
 
 export function MembershipRegistration() {
-  const { setGlobalError } = useAppState();
   const { registerMembership, isInitialized, isStarted, rateMinLimit, rateMaxLimit, error } = useRLN();
   const { isConnected, chainId } = useWallet();
 
@@ -34,9 +33,9 @@ export function MembershipRegistration() {
 
   useEffect(() => {
     if (error) {
-      setGlobalError(error);
+      toast.error(error);
     }
-  }, [error, setGlobalError]);
+  }, [error]);
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();

src/contexts/AppStateContext.tsx

@@ -4,9 +4,7 @@ import React, { createContext, useContext, useState, ReactNode } from 'react';
 
 interface AppState {
   isLoading: boolean;
-  globalError: string | null;
   setIsLoading: (loading: boolean) => void;
-  setGlobalError: (error: string | null) => void;
   activeTab: string;
   setActiveTab: (tab: string) => void;
 }
@@ -15,14 +13,11 @@ const AppStateContext = createContext<AppState | undefined>(undefined);
 
 export function AppStateProvider({ children }: { children: ReactNode }) {
   const [isLoading, setIsLoading] = useState(false);
-  const [globalError, setGlobalError] = useState<string | null>(null);
   const [activeTab, setActiveTab] = useState<string>('membership');
 
   const value = {
     isLoading,
     setIsLoading,
-    globalError,
-    setGlobalError,
     activeTab,
     setActiveTab,
   };
@@ -38,17 +33,6 @@ export function AppStateProvider({ children }: { children: ReactNode }) {
           </div>
         </div>
       )}
-      {globalError && (
-        <div className="fixed bottom-4 right-4 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded z-50 flex items-center">
-          <span>{globalError}</span>
-          <button
-            onClick={() => setGlobalError(null)}
-            className="ml-3 text-red-700 hover:text-red-900"
-          >
-            ✕
-          </button>
-        </div>
-      )}
     </AppStateContext.Provider>
   );
 }