chore: auto initialise RLN

src/components/RLNStatusIndicator.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import React from 'react';
+import { useRLN } from '../contexts';
+import { useRLNImplementation } from '../contexts';
+import { useWallet } from '../contexts';
+
+export function RLNStatusIndicator() {
+  const { isInitialized, isStarted, isLoading, error } = useRLN();
+  const { implementation } = useRLNImplementation();
+  const { isConnected, chainId } = useWallet();
+
+  // Debug logging
+  console.log('RLN Status:', {
+    isConnected,
+    chainId,
+    isInitialized,
+    isStarted,
+    isLoading,
+    error,
+    implementation
+  });
+
+  const getStatusColor = () => {
+    if (error) return 'bg-red-500 shadow-[0_0_8px_0_rgba(239,68,68,0.6)]';
+    if (isLoading) return 'bg-yellow-500 animate-pulse shadow-[0_0_8px_0_rgba(234,179,8,0.6)]';
+    if (isInitialized && isStarted) return 'bg-green-500 shadow-[0_0_8px_0_rgba(34,197,94,0.6)]';
+    return 'bg-gray-500';
+  };
+
+  const getTextColor = () => {
+    if (error) return 'text-red-500';
+    if (isLoading) return 'text-yellow-500';
+    if (isInitialized && isStarted) return 'text-green-500';
+    return 'text-gray-500';
+  };
+
+  const getStatusText = () => {
+    if (error) return 'Error';
+    if (isLoading) return `Initializing ${implementation} RLN...`;
+    if (!isConnected) return 'Connect Wallet';
+    if (chainId !== 59141) return 'Switch to Linea Sepolia';
+    if (isInitialized && isStarted) return `RLN Active`;
+    return 'RLN Inactive';
+  };
+
+  return (
+    <div className="flex items-center gap-2 px-3 py-1.5 rounded-full border border-terminal-border bg-terminal-background">
+      <div className={`w-2.5 h-2.5 rounded-full transition-all duration-300 ${getStatusColor()}`} />
+      <span className={`text-xs font-mono font-medium transition-all duration-300 ${getTextColor()} capitalize`}>
+        {getStatusText()}
+      </span>
+    </div>
+  );
+} 

src/components/Tabs/MembershipTab/MembershipRegistration.tsx

@@ -2,9 +2,11 @@
 
 import React, { useState, useEffect } from 'react';
 import { RLNImplementationToggle } from '../../RLNImplementationToggle';
+import { RLNStatusIndicator } from '../../RLNStatusIndicator';
 import { KeystoreEntity } from '@waku/rln';
 import { useRLN } from '../../../contexts/rln/RLNContext';
 import { useWallet } from '../../../contexts/wallet';
+import { useRLNImplementation } from '../../../contexts';
 import { RLNInitButton } from '../../RLNinitButton';
 import { TerminalWindow } from '../../ui/terminal-window';
 import { Slider } from '../../ui/slider';
@@ -13,8 +15,9 @@ import { membershipRegistration, type ContentSegment } from '../../../content/in
 import { toast } from 'sonner';
 
 export function MembershipRegistration() {
-  const { registerMembership, isInitialized, isStarted, rateMinLimit, rateMaxLimit, error } = useRLN();
+  const { registerMembership, isInitialized, isStarted, rateMinLimit, rateMaxLimit, error, isLoading } = useRLN();
   const { isConnected, chainId } = useWallet();
+  const { implementation } = useRLNImplementation();
 
   const [rateLimit, setRateLimit] = useState<number>(rateMinLimit);
   const [isRegistering, setIsRegistering] = useState(false);
@@ -100,9 +103,12 @@ export function MembershipRegistration() {
   return (
     <div className="space-y-6 max-w-full">
       <TerminalWindow className="w-full">
-        <h2 className="text-lg font-mono font-medium text-primary mb-4 cursor-blink">
-          {membershipRegistration.title}
-        </h2>
+        <div className="flex items-center justify-between mb-4">
+          <h2 className="text-lg font-mono font-medium text-primary cursor-blink">
+            {membershipRegistration.title}
+          </h2>
+          <RLNStatusIndicator />
+        </div>
         <div className="space-y-6">
           <div className="border-b border-terminal-border pb-6">
             <RLNImplementationToggle />
@@ -154,9 +160,11 @@ export function MembershipRegistration() {
           </div>
 
           <div className="border-t border-terminal-border pt-6 mt-4">
-            <div className="flex items-center space-x-2">
-              <RLNInitButton />
-            </div>
+            {implementation === 'standard' && !isInitialized && !isStarted && (
+              <div className="flex items-center space-x-2">
+                <RLNInitButton />
+              </div>
+            )}
 
             {!isConnected ? (
               <div className="text-warning-DEFAULT font-mono text-sm mt-4 flex items-center">
@@ -166,7 +174,7 @@ export function MembershipRegistration() {
             ) : !isInitialized || !isStarted ? (
               <div className="text-warning-DEFAULT font-mono text-sm mt-4 flex items-center">
                 <span className="mr-2">ℹ️</span>
-                {membershipRegistration.initializePrompt}
+                {implementation === 'light' && isLoading ? 'Initializing Light RLN...' : membershipRegistration.initializePrompt}
               </div>
             ) : (
               <form onSubmit={handleSubmit} className="space-y-4 mt-4">

src/contexts/rln/RLNContext.tsx

@@ -98,6 +98,12 @@ export function RLNProvider({ children }: { children: ReactNode }) {
   
   // Reset RLN state when implementation changes
   useEffect(() => {
+    console.log('Implementation changed, resetting state:', {
+      oldRln: !!rln,
+      oldIsInitialized: isInitialized,
+      oldIsStarted: isStarted,
+      newImplementation: implementation
+    });
     setRln(null);
     setIsInitialized(false);
     setIsStarted(false);
@@ -111,11 +117,13 @@ export function RLNProvider({ children }: { children: ReactNode }) {
       setError(null);
       setIsLoading(true);
       
-      if (!rln) {
+      let rlnInstance = rln;
+      
+      if (!rlnInstance) {
         console.log(`Creating RLN ${implementation} instance...`);
         
         try {
-          const rlnInstance = await createRLNImplementation(implementation);
+          rlnInstance = await createRLNImplementation(implementation);
           
           console.log("RLN instance created successfully:", !!rlnInstance);
           setRln(rlnInstance);
@@ -130,17 +138,17 @@ export function RLNProvider({ children }: { children: ReactNode }) {
         console.log("RLN instance already exists, skipping creation");
       }
       
-      if (isConnected && signer && rln && !isStarted) {
+      if (isConnected && signer && rlnInstance && !isStarted) {
         console.log("Starting RLN with signer...");
         try {          
-          await rln.start({ signer });
+          await rlnInstance.start({ signer });
           
           setIsStarted(true);
           console.log("RLN started successfully, isStarted set to true");
 
           try {
-            const minLimit = await rln.contract?.getMinRateLimit();
-            const maxLimit = await rln.contract?.getMaxRateLimit();
+            const minLimit = await rlnInstance.contract?.getMinRateLimit();
+            const maxLimit = await rlnInstance.contract?.getMaxRateLimit();
             if (minLimit !== undefined && maxLimit !== undefined) {
               setRateMinLimit(minLimit);
               setRateMaxLimit(maxLimit);
@@ -159,7 +167,7 @@ export function RLNProvider({ children }: { children: ReactNode }) {
         console.log("Skipping RLN start because:", {
           isConnected,
           hasSigner: !!signer,
-          hasRln: !!rln,
+          hasRln: !!rlnInstance,
           isAlreadyStarted: isStarted
         });
       }
@@ -173,6 +181,14 @@ export function RLNProvider({ children }: { children: ReactNode }) {
 
   // Auto-initialize effect for Light implementation
   useEffect(() => {
+    console.log('Auto-init check:', {
+      implementation,
+      isConnected,
+      hasSigner: !!signer,
+      isInitialized,
+      isStarted,
+      isLoading
+    });
     if (implementation === 'light' && isConnected && signer && !isInitialized && !isStarted && !isLoading) {
       console.log('Auto-initializing Light RLN implementation...');
       initializeRLN();