diff --git a/src/components/RLNStatusIndicator.tsx b/src/components/RLNStatusIndicator.tsx
new file mode 100644
index 0000000..2f476ec
--- /dev/null
+++ b/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 (
+
+
+
+ {getStatusText()}
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/Tabs/MembershipTab/MembershipRegistration.tsx b/src/components/Tabs/MembershipTab/MembershipRegistration.tsx
index fd126ae..6b45f6b 100644
--- a/src/components/Tabs/MembershipTab/MembershipRegistration.tsx
+++ b/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(rateMinLimit);
const [isRegistering, setIsRegistering] = useState(false);
@@ -100,9 +103,12 @@ export function MembershipRegistration() {
return (
-
- {membershipRegistration.title}
-
+
+
+ {membershipRegistration.title}
+
+
+
@@ -154,9 +160,11 @@ export function MembershipRegistration() {
-
-
-
+ {implementation === 'standard' && !isInitialized && !isStarted && (
+
+
+
+ )}
{!isConnected ? (
@@ -166,7 +174,7 @@ export function MembershipRegistration() {
) : !isInitialized || !isStarted ? (
ℹ️
- {membershipRegistration.initializePrompt}
+ {implementation === 'light' && isLoading ? 'Initializing Light RLN...' : membershipRegistration.initializePrompt}
) : (