feat(keystore-management): provide RLNLight implementation, without Zerokit, for credentials generation (registration)

examples/keystore-management/package.json

@@ -10,7 +10,7 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@waku/rln": "0.0.2-a3e7f15.0",
+    "@waku/rln": "0.0.2-5c50ed7.0",
     "next": "15.1.7",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"

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

@@ -2,7 +2,8 @@ import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 import { WalletProvider } from "../contexts/WalletContext";
-import { RLNProvider } from "../contexts/RLNContext";
+import { RLNUnifiedProvider } from "../contexts/RLNUnifiedContext2";
+import { RLNImplementationProvider } from "../contexts/RLNImplementationContext";
 import { Header } from "../components/Header";
 
 const geistSans = Geist({
@@ -31,14 +32,16 @@ export default function RootLayout({
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
         <WalletProvider>
-          <RLNProvider>
-            <div className="flex flex-col min-h-screen">
-              <Header />
-              <main className="flex-grow">
-                {children}
-              </main>
-            </div>
-          </RLNProvider>
+          <RLNImplementationProvider>
+            <RLNUnifiedProvider>
+              <div className="flex flex-col min-h-screen">
+                <Header />
+                <main className="flex-grow">
+                  {children}
+                </main>
+              </div>
+            </RLNUnifiedProvider>
+          </RLNImplementationProvider>
         </WalletProvider>
       </body>
     </html>

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

@@ -1,5 +1,6 @@
 import RLNMembershipRegistration from '../components/RLNMembershipRegistration';
 import { WalletInfo } from '../components/WalletInfo';
+import { RLNImplementationToggle } from '../components/RLNImplementationToggle';
 
 export default function Home() {
   return (
@@ -9,6 +10,12 @@ export default function Home() {
           <h2 className="text-2xl font-bold text-center text-gray-900 dark:text-white mb-6">Waku Keystore Management</h2>
 
           <div className="space-y-8">
+            {/* RLN Implementation Toggle */}
+            <div>
+              <h3 className="text-xl font-semibold mb-4 text-gray-900 dark:text-white">RLN Implementation</h3>
+              <RLNImplementationToggle />
+            </div>
+
             {/* Wallet Information Section */}
             <div>
               <h3 className="text-xl font-semibold mb-4 text-gray-900 dark:text-white">Wallet Connection</h3>

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

@@ -0,0 +1,50 @@
+"use client";
+
+import { useRLNImplementation, RLNImplementationType } from '../contexts/RLNImplementationContext';
+
+export function RLNImplementationToggle() {
+  const { implementation, setImplementation } = useRLNImplementation();
+
+  const handleToggle = (newImplementation: RLNImplementationType) => {
+    setImplementation(newImplementation);
+  };
+
+  return (
+    <div className="flex items-center space-x-4 p-3 bg-gray-100 dark:bg-gray-800 rounded-lg">
+      <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
+        RLN Implementation:
+      </span>
+      <div className="flex rounded-md shadow-sm" role="group">
+        <button
+          type="button"
+          onClick={() => handleToggle('standard')}
+          className={`px-4 py-2 text-sm font-medium rounded-l-lg ${
+            implementation === 'standard'
+              ? 'bg-blue-600 text-white'
+              : 'bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600'
+          }`}
+        >
+          Standard
+        </button>
+        <button
+          type="button"
+          onClick={() => handleToggle('light')}
+          className={`px-4 py-2 text-sm font-medium rounded-r-lg ${
+            implementation === 'light'
+              ? 'bg-blue-600 text-white'
+              : 'bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600'
+          }`}
+        >
+          Light
+        </button>
+      </div>
+      <div className="text-xs text-gray-500 dark:text-gray-400">
+        {implementation === 'standard' ? (
+          <span>Using full RLN implementation</span>
+        ) : (
+          <span>Using lightweight RLN implementation</span>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState } from 'react';
-import { useRLN } from '../contexts/RLNContext';
+import { useRLN } from '../contexts/RLNUnifiedContext2';
 import { useWallet } from '../contexts/WalletContext';
 import { DecryptedCredentials } from '@waku/rln';
 

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

@@ -0,0 +1,26 @@
+"use client";
+
+import { createRLN, RLNLightInstance } from '@waku/rln';
+import { ethers } from 'ethers';
+
+// Define a unified interface that both implementations must support
+export interface UnifiedRLNInstance {
+  contract: {
+    address: string;
+    membershipFee?: () => Promise<ethers.BigNumber>;
+  };
+  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'): 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/RLNImplementationContext.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+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');
+
+  return (
+    <RLNImplementationContext.Provider value={{ implementation, setImplementation }}>
+      {children}
+    </RLNImplementationContext.Provider>
+  );
+}
+
+// Create a hook to use the context
+export function useRLNImplementation() {
+  const context = useContext(RLNImplementationContext);
+  if (context === undefined) {
+    throw new Error('useRLNImplementation must be used within a RLNImplementationProvider');
+  }
+  return context;
+}