diff --git a/examples/keystore-management/src/components/RLNImplementationToggle.tsx b/examples/keystore-management/src/components/RLNImplementationToggle.tsx index d5aedf8..d6cef20 100644 --- a/examples/keystore-management/src/components/RLNImplementationToggle.tsx +++ b/examples/keystore-management/src/components/RLNImplementationToggle.tsx @@ -12,16 +12,6 @@ export function RLNImplementationToggle() { RLN Implementation
- +

- {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' }

diff --git a/examples/keystore-management/src/components/RLNInitButton.tsx b/examples/keystore-management/src/components/RLNInitButton.tsx index 4b0f3e9..c918a05 100644 --- a/examples/keystore-management/src/components/RLNInitButton.tsx +++ b/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 (
{error && (

diff --git a/examples/keystore-management/src/components/Tabs/KeystoreTab/KeystoreManagement.tsx b/examples/keystore-management/src/components/Tabs/KeystoreTab/KeystoreManagement.tsx index 026e1e6..36e5d02 100644 --- a/examples/keystore-management/src/components/Tabs/KeystoreTab/KeystoreManagement.tsx +++ b/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(null); - const [password, setPassword] = useState(''); - const [loadingCredential, setLoadingCredential] = useState(false); - const [loadError, setLoadError] = useState(null); - const [loadedCredential, setLoadedCredential] = useState(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 (

@@ -131,39 +81,11 @@ export function KeystoreManagement() { {!isInitialized || !isStarted ? (

- ⚠️ Please initialize RLN before loading credentials + ⚠️ Please initialize RLN before managing credentials

) : null} - {/* Loaded Credential Info */} - {loadedCredential && ( -
-

- Currently Loaded Credential -

-
-

- Hash:{' '} - {selectedHash} -

-

- Status:{' '} - Active -

-
-
- )} - - {/* Success Message */} - {showSuccess && ( -
-

- ✓ Credential loaded successfully -

-
- )} - {/* Stored Credentials */}

@@ -175,73 +97,25 @@ export function KeystoreManagement() { {storedCredentialsHashes.map((hash) => (
-
- - {hash} - - {selectedHash === hash && ( -
- 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 && ( -

- {loadError} -

- )} -
- )} -
-
- - {selectedHash === hash && ( - - )} - -
+ + {hash} + +
))}

) : (

- No credentials stored yet. + No credentials stored

)}
diff --git a/examples/keystore-management/src/components/Tabs/MembershipTab/MembershipRegistration.tsx b/examples/keystore-management/src/components/Tabs/MembershipTab/MembershipRegistration.tsx index 00b2aaf..845c1d8 100644 --- a/examples/keystore-management/src/components/Tabs/MembershipTab/MembershipRegistration.tsx +++ b/examples/keystore-management/src/components/Tabs/MembershipTab/MembershipRegistration.tsx @@ -139,11 +139,6 @@ export function MembershipRegistration() {
- {isInitialized && isStarted && ( - - ✓ RLN Initialized - - )}
{!isConnected ? ( diff --git a/examples/keystore-management/src/contexts/keystore/KeystoreContext.tsx b/examples/keystore-management/src/contexts/keystore/KeystoreContext.tsx index 98746e4..260443c 100644 --- a/examples/keystore-management/src/contexts/keystore/KeystoreContext.tsx +++ b/examples/keystore-management/src/contexts/keystore/KeystoreContext.tsx @@ -11,7 +11,6 @@ interface KeystoreContextType { hasStoredCredentials: boolean; storedCredentialsHashes: string[]; saveCredentials: (credentials: KeystoreEntity, password: string) => Promise; - loadCredential: (hash: string, password: string) => Promise; 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 => { - 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 diff --git a/examples/keystore-management/src/contexts/rln/RLNContext.tsx b/examples/keystore-management/src/contexts/rln/RLNContext.tsx index 9dfefb0..b3bbc5e 100644 --- a/examples/keystore-management/src/contexts/rln/RLNContext.tsx +++ b/examples/keystore-management/src/contexts/rln/RLNContext.tsx @@ -25,6 +25,7 @@ interface RLNContextType { getCurrentRateLimit: () => Promise; getRateLimitsBounds: () => Promise<{ success: boolean; rateMinLimit: number; rateMaxLimit: number; error?: string }>; saveCredentialsToKeystore: (credentials: KeystoreEntity, password: string) => Promise; + isLoading: boolean; } const RLNContext = createContext(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(null); + const [isLoading, setIsLoading] = useState(false); // Get the signer from window.ethereum const [signer, setSigner] = useState(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 => { try { if (!rln || !rln.contract || !isStarted) { @@ -339,7 +352,8 @@ export function RLNProvider({ children }: { children: ReactNode }) { rateMaxLimit, getCurrentRateLimit, getRateLimitsBounds, - saveCredentialsToKeystore + saveCredentialsToKeystore: saveToKeystore, + isLoading }} > {children} diff --git a/examples/keystore-management/src/contexts/rln/RLNImplementationContext.tsx b/examples/keystore-management/src/contexts/rln/RLNImplementationContext.tsx index e151deb..222181f 100644 --- a/examples/keystore-management/src/contexts/rln/RLNImplementationContext.tsx +++ b/examples/keystore-management/src/contexts/rln/RLNImplementationContext.tsx @@ -12,7 +12,7 @@ interface RLNImplementationContextType { const RLNImplementationContext = createContext(undefined); export function RLNImplementationProvider({ children }: { children: ReactNode }) { - const [implementation, setImplementation] = useState('standard'); + const [implementation, setImplementation] = useState('light'); return (