chore: dont auto start RLN init

examples/keystore-management/src/app/page.tsx

@@ -2,6 +2,7 @@ import RLNMembershipRegistration from '../components/RLNMembershipRegistration';
 import { WalletInfo } from '../components/WalletInfo';
 import { RLNImplementationToggle } from '../components/RLNImplementationToggle';
 import KeystoreManager from '../components/KeystoreManager';
+import { RLNInitButton } from '../components/RLNInitButton';
 
 export default function Home() {
   return (
@@ -14,7 +15,10 @@ export default function Home() {
             {/* RLN Implementation Toggle */}
             <div>
               <h3 className="text-xl font-semibold mb-4 text-gray-900 dark:text-white">RLN Implementation</h3>
-              <RLNImplementationToggle />
+              <div className="space-y-4">
+                <RLNImplementationToggle />
+                <RLNInitButton />
+              </div>
             </div>
             
             {/* Wallet Information Section */}

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

@@ -0,0 +1,37 @@
+"use client";
+
+import React from 'react';
+import { useRLN } from '../contexts/rln';
+
+export function RLNInitButton() {
+  const { initializeRLN, isInitialized, isStarted, error } = useRLN();
+
+  const handleInitialize = async () => {
+    try {
+      await initializeRLN();
+    } catch (err) {
+      console.error('Error initializing RLN:', err);
+    }
+  };
+
+  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'
+        }`}
+      >
+        {isInitialized && isStarted ? 'RLN Initialized' : 'Initialize RLN'}
+      </button>
+      {error && (
+        <p className="text-sm text-red-600 dark:text-red-400">
+          {error}
+        </p>
+      )}
+    </div>
+  );
+} 

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { createContext, useContext, useState, useEffect, ReactNode } from 'react';
+import { createContext, useContext, useState, useEffect, ReactNode, useCallback } from 'react';
 import { KeystoreEntity } from '@waku/rln';
 import { createRLNImplementation, UnifiedRLNInstance } from './implementations';
 import { useRLNImplementation } from './RLNImplementationContext';
@@ -8,7 +8,6 @@ import { ethers } from 'ethers';
 import { useKeystore } from '../keystore';
 import { ERC20_ABI, LINEA_SEPOLIA_CONFIG, ensureLineaSepoliaNetwork } from './utils/network';
 
-// Define the context type
 interface RLNContextType {
   rln: UnifiedRLNInstance | null;
   isInitialized: boolean;
@@ -28,10 +27,8 @@ interface RLNContextType {
   saveCredentialsToKeystore: (credentials: KeystoreEntity, password: string) => Promise<string>;
 }
 
-// Create the context
 const RLNContext = createContext<RLNContextType | undefined>(undefined);
 
-// Create the provider component
 export function RLNProvider({ children }: { children: ReactNode }) {
   const { implementation } = useRLNImplementation();
   const [rln, setRln] = useState<UnifiedRLNInstance | null>(null);
@@ -96,7 +93,7 @@ export function RLNProvider({ children }: { children: ReactNode }) {
     setError(null);
   }, [implementation]);
   
-  const initializeRLN = async () => {
+  const initializeRLN = useCallback(async () => {
     console.log("InitializeRLN called. Connected:", isConnected, "Signer available:", !!signer);
     
     try {
@@ -106,7 +103,6 @@ export function RLNProvider({ children }: { children: ReactNode }) {
         console.log(`Creating RLN ${implementation} instance...`);
         
         try {
-          // Use our factory to create the appropriate implementation
           const rlnInstance = await createRLNImplementation(implementation);
           
           console.log("RLN instance created successfully:", !!rlnInstance);
@@ -122,7 +118,6 @@ export function RLNProvider({ children }: { children: ReactNode }) {
         console.log("RLN instance already exists, skipping creation");
       }
       
-      // Start RLN if wallet is connected
       if (isConnected && signer && rln && !isStarted) {
         console.log("Starting RLN with signer...");
         try {          
@@ -156,7 +151,7 @@ export function RLNProvider({ children }: { children: ReactNode }) {
       console.error('Error in initializeRLN:', err);
       setError(err instanceof Error ? err.message : 'Failed to initialize RLN');
     }
-  };
+  }, [isConnected, signer, implementation, rln, isStarted]);
 
   const getCurrentRateLimit = async (): Promise<number | null> => {
     try {
@@ -331,16 +326,6 @@ export function RLNProvider({ children }: { children: ReactNode }) {
     }
   };
 
-  // Initialize RLN when wallet connects
-  useEffect(() => {
-    console.log("Wallet connection state changed:", { isConnected, hasSigner: !!signer });
-    
-    if (isConnected && signer) {
-      console.log("Wallet connected, attempting to initialize RLN");
-      initializeRLN();
-    }
-  }, [isConnected, signer]);
-
   return (
     <RLNContext.Provider
       value={{
@@ -362,7 +347,6 @@ export function RLNProvider({ children }: { children: ReactNode }) {
   );
 }
 
-// Hook to use the RLN context
 export function useRLN() {
   const context = useContext(RLNContext);
   if (context === undefined) {

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

@@ -2,19 +2,15 @@
 
 import { createContext, useContext, useState, ReactNode } from 'react';
 
-// Define the implementation types
 export type RLNImplementationType = 'standard' | 'light';
 
-// Define the context type
 interface RLNImplementationContextType {
   implementation: RLNImplementationType;
   setImplementation: (implementation: RLNImplementationType) => void;
 }
 
-// Create the context
 const RLNImplementationContext = createContext<RLNImplementationContextType | undefined>(undefined);
 
-// Create the provider component
 export function RLNImplementationProvider({ children }: { children: ReactNode }) {
   const [implementation, setImplementation] = useState<RLNImplementationType>('standard');
 
@@ -25,7 +21,6 @@ export function RLNImplementationProvider({ children }: { children: ReactNode })
   );
 }
 
-// Create a hook to use the context
 export function useRLNImplementation() {
   const context = useContext(RLNImplementationContext);
   if (context === undefined) {

examples/keystore-management/src/contexts/rln/implementations/factory.tsx

@@ -3,7 +3,6 @@
 import { createRLN, MembershipInfo, RLNLightInstance } from '@waku/rln';
 import { ethers } from 'ethers';
 
-// Define a unified interface that both implementations must support
 export interface UnifiedRLNInstance {
   contract: {
     address: string;
@@ -22,17 +21,13 @@ export interface UnifiedRLNInstance {
     registerMembership: (idCommitment: string, rateLimit?: number) => Promise<ethers.ContractTransaction>;
   };
   start: (options: { signer: ethers.Signer }) => Promise<void>;
-  // Both implementations use registerMembership but with different parameters
   registerMembership: (options: { signature: string }) => Promise<Record<string, unknown>>;
 }
 
-// Define a factory function that creates the appropriate RLN implementation
+export async function createRLNImplementation(type: 'standard' | 'light' = 'light'): Promise<UnifiedRLNInstance> {
-export async function createRLNImplementation(type: 'standard' | 'light'): Promise<UnifiedRLNInstance> {
   if (type === 'standard') {
-    // Create and return the standard RLN implementation
     return await createRLN() as unknown as UnifiedRLNInstance;
   } else {
-    // Create and return the light RLN implementation
     return new RLNLightInstance() as unknown as UnifiedRLNInstance;
   }
 } 

examples/keystore-management/src/contexts/rln/implementations/standard.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { createContext, useContext, useState, useEffect, ReactNode } from 'react';
+import { createContext, useContext, useState, ReactNode } from 'react';
 import { createRLN, DecryptedCredentials, LINEA_CONTRACT, RLNInstance } from '@waku/rln';
 import { useWallet } from '../../wallet';
 import { ethers } from 'ethers';
@@ -187,15 +187,6 @@ export function RLNProvider({ children }: { children: ReactNode }) {
     }
   };
 
-  // Initialize RLN when wallet connects
-  useEffect(() => {
-    console.log("Wallet connection state changed:", { isConnected, hasSigner: !!signer });
-    if (isConnected && signer) {
-      console.log("Wallet connected, attempting to initialize RLN");
-      initializeRLN();
-    }
-  }, [isConnected, signer]);
-
   return (
     <RLNContext.Provider
       value={{