chore: remove loading credentials

examples/keystore-management/src/components/RLNImplementationToggle.tsx

@@ -12,16 +12,6 @@ export function RLNImplementationToggle() {
         RLN Implementation
       </label>
       <div className="flex space-x-4">
-        <button
-          onClick={() => setImplementation('standard')}
-          className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
-            implementation === 'standard'
-              ? 'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300'
-              : 'bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700'
-          }`}
-        >
-          Standard
-        </button>
         <button
           onClick={() => setImplementation('light')}
           className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
@@ -32,11 +22,21 @@ export function RLNImplementationToggle() {
         >
           Light
         </button>
+        <button
+          onClick={() => setImplementation('standard')}
+          className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+            implementation === 'standard'
+              ? 'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300'
+              : 'bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700'
+          }`}
+        >
+          Standard
+        </button>
       </div>
       <p className="text-xs text-gray-500 dark:text-gray-400">
-        {implementation === 'standard' 
-          ? 'Standard implementation with full security features'
-          : 'Light implementation with optimized performance'
+        {implementation === 'light'
+          ? 'Light implementation, without Zerokit. Instant initalisation.'
+          : 'Standard implementation, with Zerokit. Initialisation takes 10-15 seconds for WASM module'
         }
       </p>
     </div>

examples/keystore-management/src/components/RLNInitButton.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import { useRLN } from '../contexts/rln';
 
 export function RLNInitButton() {
-  const { initializeRLN, isInitialized, isStarted, error } = useRLN();
+  const { initializeRLN, isInitialized, isStarted, error, isLoading } = useRLN();
 
   const handleInitialize = async () => {
     try {
@@ -14,18 +14,46 @@ export function RLNInitButton() {
     }
   };
 
+  const getButtonText = () => {
+    if (isLoading) return 'Initializing...';
+    if (isInitialized && isStarted) return 'RLN Initialized';
+    return 'Initialize RLN';
+  };
+
   return (
     <div className="flex flex-col items-start gap-2">
       <button
         onClick={handleInitialize}
-        disabled={isInitialized && isStarted}
-        className={`px-4 py-2 rounded-lg font-medium transition-colors ${
-          isInitialized && isStarted
-            ? 'bg-gray-200 text-gray-500 cursor-not-allowed dark:bg-gray-700 dark:text-gray-400'
-            : 'bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600'
-        }`}
+        disabled={isLoading || (isInitialized && isStarted)}
+        className={`
+          px-4 py-2 rounded-lg font-medium transition-colors relative
+          ${
+            isLoading 
+              ? 'bg-gray-200 text-gray-500 cursor-not-allowed dark:bg-gray-700 dark:text-gray-400'
+              : isInitialized && isStarted
+                ? 'bg-green-600 text-white cursor-default dark:bg-green-500'
+                : 'bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600'
+          }
+        `}
       >
-        {isInitialized && isStarted ? 'RLN Initialized' : 'Initialize RLN'}
+        {isLoading && (
+          <span className="absolute left-2 top-1/2 -translate-y-1/2">
+            <svg className="animate-spin h-5 w-5 text-current" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+            </svg>
+          </span>
+        )}
+        {isInitialized && isStarted && (
+          <span className="absolute left-2 top-1/2 -translate-y-1/2">
+            <svg className="h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+            </svg>
+          </span>
+        )}
+        <span className={(isLoading || (isInitialized && isStarted)) ? 'pl-7' : ''}>
+          {getButtonText()}
+        </span>
       </button>
       {error && (
         <p className="text-sm text-red-600 dark:text-red-400">

examples/keystore-management/src/components/Tabs/KeystoreTab/KeystoreManagement.tsx

@@ -1,11 +1,10 @@
 "use client";
 
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { useKeystore } from '../../../contexts/keystore';
 import { useAppState } from '../../../contexts/AppStateContext';
 import { useRLN } from '../../../contexts/rln';
 import { saveKeystoreToFile, readKeystoreFromFile } from '../../../utils/fileUtils';
-import { KeystoreEntity } from '@waku/rln';
 
 export function KeystoreManagement() {
   const { 
@@ -14,20 +13,12 @@ export function KeystoreManagement() {
     error,
     exportKeystore,
     importKeystore,
-    removeCredential,
-    loadCredential
+    removeCredential
   } = useKeystore();
   const { setGlobalError } = useAppState();
   const { isInitialized, isStarted } = useRLN();
 
-  const [selectedHash, setSelectedHash] = useState<string | null>(null);
-  const [password, setPassword] = useState('');
-  const [loadingCredential, setLoadingCredential] = useState(false);
-  const [loadError, setLoadError] = useState<string | null>(null);
-  const [loadedCredential, setLoadedCredential] = useState<KeystoreEntity | null>(null);
-  const [showSuccess, setShowSuccess] = useState(false);
-
-  useEffect(() => {
+  React.useEffect(() => {
     if (error) {
       setGlobalError(error);
     }
@@ -57,52 +48,11 @@ export function KeystoreManagement() {
   const handleRemoveCredential = (hash: string) => {
     try {
       removeCredential(hash);
-      if (selectedHash === hash) {
-        setSelectedHash(null);
-        setPassword('');
-        setLoadedCredential(null);
-      }
     } catch (err) {
       setGlobalError(err instanceof Error ? err.message : 'Failed to remove credential');
     }
   };
 
-  const handleLoadCredential = async (hash: string) => {
-    if (!password) {
-      setLoadError('Please enter a password');
-      return;
-    }
-
-    if (!isInitialized || !isStarted) {
-      setLoadError('Please initialize RLN first');
-      return;
-    }
-
-    setLoadingCredential(true);
-    setLoadError(null);
-    setShowSuccess(false);
-
-    try {
-      const credential = await loadCredential(hash, password);
-      if (credential) {
-        setLoadedCredential(credential);
-        setLoadError(null);
-        setPassword('');
-        setShowSuccess(true);
-        // Auto-hide success message after 3 seconds
-        setTimeout(() => setShowSuccess(false), 3000);
-      } else {
-        setLoadError('Failed to load credential');
-        setLoadedCredential(null);
-      }
-    } catch (err) {
-      setLoadError(err instanceof Error ? err.message : 'Failed to load credential');
-      setLoadedCredential(null);
-    } finally {
-      setLoadingCredential(false);
-    }
-  };
-
   return (
     <div className="space-y-6">
       <div className="bg-white dark:bg-gray-800 shadow sm:rounded-lg p-6">
@@ -131,39 +81,11 @@ export function KeystoreManagement() {
           {!isInitialized || !isStarted ? (
             <div className="bg-yellow-50 dark:bg-yellow-900 p-4 rounded-lg">
               <p className="text-sm text-yellow-700 dark:text-yellow-300">
-                ⚠️ Please initialize RLN before loading credentials
+                ⚠️ Please initialize RLN before managing credentials
               </p>
             </div>
           ) : null}
 
-          {/* Loaded Credential Info */}
-          {loadedCredential && (
-            <div className="bg-gray-50 dark:bg-gray-900 p-4 rounded-lg border border-gray-200 dark:border-gray-700">
-              <h4 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                Currently Loaded Credential
-              </h4>
-              <div className="space-y-2">
-                <p className="text-sm text-gray-600 dark:text-gray-400">
-                  <span className="font-medium">Hash:</span>{' '}
-                  <code className="break-all">{selectedHash}</code>
-                </p>
-                <p className="text-sm text-gray-600 dark:text-gray-400">
-                  <span className="font-medium">Status:</span>{' '}
-                  <span className="text-green-600 dark:text-green-400">Active</span>
-                </p>
-              </div>
-            </div>
-          )}
-
-          {/* Success Message */}
-          {showSuccess && (
-            <div className="bg-green-50 dark:bg-green-900 p-4 rounded-lg">
-              <p className="text-sm text-green-700 dark:text-green-300">
-                ✓ Credential loaded successfully
-              </p>
-            </div>
-          )}
-
           {/* Stored Credentials */}
           <div className="border-t border-gray-200 dark:border-gray-700 pt-6">
             <h3 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-4">
@@ -175,73 +97,25 @@ export function KeystoreManagement() {
                 {storedCredentialsHashes.map((hash) => (
                   <div 
                     key={hash} 
-                    className={`p-4 rounded-lg border ${
-                      selectedHash === hash 
-                        ? 'border-blue-500 dark:border-blue-400' 
-                        : 'border-gray-200 dark:border-gray-700'
-                    }`}
+                    className="p-4 rounded-lg border border-gray-200 dark:border-gray-700"
                   >
                     <div className="flex items-start justify-between">
-                      <div className="space-y-1">
-                        <code className="text-sm text-gray-600 dark:text-gray-400 break-all">
-                          {hash}
-                        </code>
-                        {selectedHash === hash && (
-                          <div className="pt-3 space-y-3">
-                            <input
-                              type="password"
-                              value={password}
-                              onChange={(e) => setPassword(e.target.value)}
-                              placeholder="Enter password to load credential"
-                              className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
-                            />
-                            {loadError && (
-                              <p className="text-sm text-red-600 dark:text-red-400">
-                                {loadError}
-                              </p>
-                            )}
-                          </div>
-                        )}
-                      </div>
-                      <div className="flex space-x-2">
-                        <button
-                          onClick={() => {
-                            if (selectedHash === hash) {
-                              setSelectedHash(null);
-                              setPassword('');
-                              setLoadedCredential(null);
-                            } else {
-                              setSelectedHash(hash);
-                              setPassword('');
-                            }
-                          }}
-                          className="px-3 py-1 text-sm bg-blue-100 text-blue-700 rounded-md hover:bg-blue-200 dark:bg-blue-900 dark:text-blue-300 dark:hover:bg-blue-800"
-                        >
-                          {selectedHash === hash ? 'Cancel' : 'Load'}
-                        </button>
-                        {selectedHash === hash && (
-                          <button
-                            onClick={() => handleLoadCredential(hash)}
-                            disabled={loadingCredential || !isInitialized || !isStarted}
-                            className="px-3 py-1 text-sm bg-green-100 text-green-700 rounded-md hover:bg-green-200 dark:bg-green-900 dark:text-green-300 dark:hover:bg-green-800 disabled:opacity-50 disabled:cursor-not-allowed"
-                          >
-                            {loadingCredential ? 'Loading...' : 'Confirm'}
-                          </button>
-                        )}
-                        <button
-                          onClick={() => handleRemoveCredential(hash)}
-                          className="px-3 py-1 text-sm bg-red-100 text-red-700 rounded-md hover:bg-red-200 dark:bg-red-900 dark:text-red-300 dark:hover:bg-red-800"
-                        >
-                          Remove
-                        </button>
-                      </div>
+                      <code className="text-sm text-gray-600 dark:text-gray-400 break-all">
+                        {hash}
+                      </code>
+                      <button
+                        onClick={() => handleRemoveCredential(hash)}
+                        className="ml-4 text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300"
+                      >
+                        Remove
+                      </button>
                     </div>
                   </div>
                 ))}
               </div>
             ) : (
               <p className="text-sm text-gray-500 dark:text-gray-400">
-                No credentials stored yet.
+                No credentials stored
               </p>
             )}
           </div>

examples/keystore-management/src/components/Tabs/MembershipTab/MembershipRegistration.tsx

@@ -139,11 +139,6 @@ export function MembershipRegistration() {
 
           <div className="flex items-center space-x-2">
             <RLNInitButton />
-            {isInitialized && isStarted && (
-              <span className="text-sm text-green-600 dark:text-green-400">
-                ✓ RLN Initialized
-              </span>
-            )}
           </div>
 
           {!isConnected ? (

examples/keystore-management/src/contexts/keystore/KeystoreContext.tsx

@@ -11,7 +11,6 @@ interface KeystoreContextType {
   hasStoredCredentials: boolean;
   storedCredentialsHashes: string[];
   saveCredentials: (credentials: KeystoreEntity, password: string) => Promise<string>;
-  loadCredential: (hash: string, password: string) => Promise<KeystoreEntity | undefined>;
   exportKeystore: () => string;
   importKeystore: (keystoreJson: string) => boolean;
   removeCredential: (hash: string) => void;
@@ -83,19 +82,6 @@ export function KeystoreProvider({ children }: { children: ReactNode }) {
     }
   };
 
-  const loadCredential = async (hash: string, password: string): Promise<KeystoreEntity | undefined> => {
-    if (!keystore) {
-      throw new Error("Keystore not initialized");
-    }
-
-    try {
-      return await keystore.readCredential(hash, password);
-    } catch (err) {
-      console.error("Error loading credential:", err);
-      throw err;
-    }
-  };
-
   const exportKeystore = (): string => {
     if (!keystore) {
       throw new Error("Keystore not initialized");
@@ -138,7 +124,6 @@ export function KeystoreProvider({ children }: { children: ReactNode }) {
     hasStoredCredentials: storedCredentialsHashes.length > 0,
     storedCredentialsHashes,
     saveCredentials,
-    loadCredential,
     exportKeystore,
     importKeystore,
     removeCredential

examples/keystore-management/src/contexts/rln/RLNContext.tsx

@@ -25,6 +25,7 @@ interface RLNContextType {
   getCurrentRateLimit: () => Promise<number | null>;
   getRateLimitsBounds: () => Promise<{ success: boolean; rateMinLimit: number; rateMaxLimit: number; error?: string }>;
   saveCredentialsToKeystore: (credentials: KeystoreEntity, password: string) => Promise<string>;
+  isLoading: boolean;
 }
 
 const RLNContext = createContext<RLNContextType | undefined>(undefined);
@@ -35,6 +36,7 @@ export function RLNProvider({ children }: { children: ReactNode }) {
   const [isInitialized, setIsInitialized] = useState(false);
   const [isStarted, setIsStarted] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
   
   // Get the signer from window.ethereum
   const [signer, setSigner] = useState<ethers.Signer | null>(null);
@@ -98,6 +100,7 @@ export function RLNProvider({ children }: { children: ReactNode }) {
     
     try {
       setError(null);
+      setIsLoading(true);
       
       if (!rln) {
         console.log(`Creating RLN ${implementation} instance...`);
@@ -150,9 +153,19 @@ export function RLNProvider({ children }: { children: ReactNode }) {
     } catch (err) {
       console.error('Error in initializeRLN:', err);
       setError(err instanceof Error ? err.message : 'Failed to initialize RLN');
+    } finally {
+      setIsLoading(false);
     }
   }, [isConnected, signer, implementation, rln, isStarted]);
 
+  // Auto-initialize effect for Light implementation
+  useEffect(() => {
+    if (implementation === 'light' && isConnected && signer && !isInitialized && !isStarted && !isLoading) {
+      console.log('Auto-initializing Light RLN implementation...');
+      initializeRLN();
+    }
+  }, [implementation, isConnected, signer, isInitialized, isStarted, isLoading, initializeRLN]);
+
   const getCurrentRateLimit = async (): Promise<number | null> => {
     try {
       if (!rln || !rln.contract || !isStarted) {
@@ -339,7 +352,8 @@ export function RLNProvider({ children }: { children: ReactNode }) {
         rateMaxLimit,
         getCurrentRateLimit,
         getRateLimitsBounds,
-        saveCredentialsToKeystore
+        saveCredentialsToKeystore: saveToKeystore,
+        isLoading
       }}
     >
       {children}

examples/keystore-management/src/contexts/rln/RLNImplementationContext.tsx

@@ -12,7 +12,7 @@ interface RLNImplementationContextType {
 const RLNImplementationContext = createContext<RLNImplementationContextType | undefined>(undefined);
 
 export function RLNImplementationProvider({ children }: { children: ReactNode }) {
-  const [implementation, setImplementation] = useState<RLNImplementationType>('standard');
+  const [implementation, setImplementation] = useState<RLNImplementationType>('light');
 
   return (
     <RLNImplementationContext.Provider value={{ implementation, setImplementation }}>