diff --git a/examples/keystore-management/src/components/Tabs/KeystoreTab/KeystoreManagement.tsx b/examples/keystore-management/src/components/Tabs/KeystoreTab/KeystoreManagement.tsx index 99849d4..00f3b6f 100644 --- a/examples/keystore-management/src/components/Tabs/KeystoreTab/KeystoreManagement.tsx +++ b/examples/keystore-management/src/components/Tabs/KeystoreTab/KeystoreManagement.tsx @@ -1,10 +1,11 @@ "use client"; import React, { useState } from 'react'; -import { useKeystore } from '../../../contexts/keystore'; -import { useAppState } from '../../../contexts/AppStateContext'; -import { useRLN } from '../../../contexts/rln'; +import { useKeystore } from '@/contexts/keystore'; +import { useRLN } from '@/contexts/rln'; import { saveKeystoreToFile, readKeystoreFromFile } from '../../../utils/fileUtils'; +import { KeystoreEntity } from '@waku/rln'; +import { useAppState } from '@/contexts/AppStateContext'; export function KeystoreManagement() { const { @@ -13,12 +14,17 @@ export function KeystoreManagement() { error, exportCredential, importKeystore, - removeCredential + removeCredential, + getDecryptedCredential } = useKeystore(); const { setGlobalError } = useAppState(); const { isInitialized, isStarted } = useRLN(); const [exportPassword, setExportPassword] = useState(''); const [selectedCredential, setSelectedCredential] = useState(null); + const [viewPassword, setViewPassword] = useState(''); + const [viewingCredential, setViewingCredential] = useState(null); + const [decryptedInfo, setDecryptedInfo] = useState(null); + const [isDecrypting, setIsDecrypting] = useState(false); React.useEffect(() => { if (error) { @@ -61,6 +67,36 @@ export function KeystoreManagement() { } }; + const handleViewCredential = async (hash: string) => { + if (!viewPassword) { + setGlobalError('Please enter your keystore password to view credential'); + return; + } + + setIsDecrypting(true); + + try { + const credential = await getDecryptedCredential(hash, viewPassword); + setIsDecrypting(false); + + if (credential) { + setDecryptedInfo(credential); + } else { + setGlobalError('Could not decrypt credential. Please check your password and try again.'); + } + } catch (err) { + setIsDecrypting(false); + setGlobalError(err instanceof Error ? err.message : 'Failed to decrypt credential'); + } + }; + + // Reset view state when changing credentials + React.useEffect(() => { + if (viewingCredential !== selectedCredential) { + setDecryptedInfo(null); + } + }, [viewingCredential, selectedCredential]); + return (
@@ -108,7 +144,22 @@ export function KeystoreManagement() {
+
+ {/* View Credential Section */} + {viewingCredential === hash && ( +
+
+ setViewPassword(e.target.value)} + placeholder="Enter keystore password" + className="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100" + disabled={isDecrypting} + /> + +
+ + {/* Decrypted Information Display */} + {decryptedInfo && ( +
+

+ Decrypted Credential Information +

+
+
+                                  {JSON.stringify(decryptedInfo, null, 2)}
+                                
+ +
+
+ )} +
+ )} + + {/* Export Credential Section */} {selectedCredential === hash && (
Promise; importKeystore: (keystoreJson: string) => boolean; removeCredential: (hash: string) => void; + getDecryptedCredential: (hash: string, password: string) => Promise; } // Create the context @@ -82,6 +83,21 @@ export function KeystoreProvider({ children }: { children: ReactNode }) { } }; + const getDecryptedCredential = async (hash: string, password: string): Promise => { + if (!keystore) { + throw new Error("Keystore not initialized"); + } + + try { + // Get the credential from the keystore + const credential = await keystore.readCredential(hash, password); + return credential || null; + } catch (err) { + console.error("Error reading credential:", err); + throw err; + } + }; + const exportCredential = async (hash: string, password: string): Promise => { if (!keystore) { throw new Error("Keystore not initialized"); @@ -138,7 +154,8 @@ export function KeystoreProvider({ children }: { children: ReactNode }) { saveCredentials, exportCredential, importKeystore, - removeCredential + removeCredential, + getDecryptedCredential }; return (