diff --git a/src/components/MembershipDetails.tsx b/src/components/MembershipDetails.tsx
index b60f515..0481b2b 100644
--- a/src/components/MembershipDetails.tsx
+++ b/src/components/MembershipDetails.tsx
@@ -5,6 +5,7 @@ import { ethers } from 'ethers';
import { MembershipState } from '@waku/rln';
import { useRLN } from '../contexts/rln/RLNContext';
import { toast } from 'sonner';
+import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from './ui/tooltip';
interface MembershipDetailsProps {
membershipInfo: {
@@ -177,7 +178,21 @@ export function MembershipDetails({ membershipInfo, copyToClipboard, hash }: Mem
Rate Limit:
-
{membershipInfo.rateLimit} msg/epoch
+
+ {membershipInfo.rateLimit} msg/epoch
+
+
+
+
+ i
+
+
+
+ 1 epoch = 10 minutes
+
+
+
+
{/* Contract Info */}
diff --git a/src/components/Tabs/MembershipTab/MembershipRegistration.tsx b/src/components/Tabs/MembershipTab/MembershipRegistration.tsx
index 4801c90..384e36f 100644
--- a/src/components/Tabs/MembershipTab/MembershipRegistration.tsx
+++ b/src/components/Tabs/MembershipTab/MembershipRegistration.tsx
@@ -6,10 +6,11 @@ import { KeystoreEntity } from '@waku/rln';
import { useRLN } from '../../../contexts/rln/RLNContext';
import { useWallet } from '../../../contexts/wallet';
import { TerminalWindow } from '../../ui/terminal-window';
-import { Slider } from '../../ui/slider';
+import { ToggleGroup, ToggleGroupItem } from '../../ui/toggle-group';
import { Button } from '../../ui/button';
import { membershipRegistration, type ContentSegment } from '../../../content/index';
import { toast } from 'sonner';
+import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '../../ui/tooltip';
interface MembershipRegistrationProps {
tabId?: string;
@@ -17,10 +18,11 @@ interface MembershipRegistrationProps {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
export function MembershipRegistration({ tabId: _tabId }: MembershipRegistrationProps) {
- const { registerMembership, isInitialized, isStarted, rateMinLimit, rateMaxLimit, error, isLoading } = useRLN();
+ const { registerMembership, isInitialized, isStarted, error, isLoading } = useRLN();
const { isConnected, chainId } = useWallet();
- const [rateLimit, setRateLimit] = useState(rateMinLimit);
+ // Replace slider state with discrete options
+ const [rateLimit, setRateLimit] = useState(300); // Default to Standard
const [isRegistering, setIsRegistering] = useState(false);
const [saveToKeystore, setSaveToKeystore] = useState(true);
const [keystorePassword, setKeystorePassword] = useState('');
@@ -172,22 +174,41 @@ export function MembershipRegistration({ tabId: _tabId }: MembershipRegistration
- setRateLimit(value[0])}
+ {
+ if (value === '300' || value === '600') setRateLimit(Number(value));
+ }}
className="w-full"
- />
-
- {rateLimit}
-
+ >
+
+ Standard (300)
+ lower cost
+
+
+ Max (600)
+ higher cost, more messages
+
+