From 403857c8c95e17e03897b9b10a91cc1fe99fdc2c Mon Sep 17 00:00:00 2001 From: Danish Arora Date: Tue, 8 Apr 2025 03:01:46 +0530 Subject: [PATCH] chore: auto initialise RLN --- src/components/RLNStatusIndicator.tsx | 55 +++++++++++++++++++ .../MembershipTab/MembershipRegistration.tsx | 24 +++++--- src/contexts/rln/RLNContext.tsx | 30 +++++++--- 3 files changed, 94 insertions(+), 15 deletions(-) create mode 100644 src/components/RLNStatusIndicator.tsx 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}
) : (
diff --git a/src/contexts/rln/RLNContext.tsx b/src/contexts/rln/RLNContext.tsx index 24f6839..6f41a4e 100644 --- a/src/contexts/rln/RLNContext.tsx +++ b/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();