chore: streamline choosing ratelimit, define epoch

This commit is contained in:
Danish Arora 2025-07-10 15:45:40 +05:30
parent 897b4d6573
commit a5005a9c03
No known key found for this signature in database
GPG Key ID: 1C6EF37CDAE1426E
2 changed files with 52 additions and 16 deletions

View File

@ -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
</div>
<div>
<span className="text-muted-foreground text-xs">Rate Limit:</span>
<div className="text-accent">{membershipInfo.rateLimit} msg/epoch</div>
<div className="text-accent flex items-center gap-1">
{membershipInfo.rateLimit} msg/epoch
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<span className="ml-1 cursor-pointer align-middle inline-flex items-center justify-center">
<span className="w-4 h-4 rounded-full border border-muted-foreground text-muted-foreground flex items-center justify-center text-xs font-bold" style={{ fontFamily: 'monospace' }}>i</span>
</span>
</TooltipTrigger>
<TooltipContent>
1 epoch = 10 minutes
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
</div>
{/* Contract Info */}

View File

@ -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<number>(rateMinLimit);
// Replace slider state with discrete options
const [rateLimit, setRateLimit] = useState<number>(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
<div>
<label
htmlFor="rateLimit"
className="block text-sm font-mono text-muted-foreground mb-2"
className="block text-sm font-mono text-muted-foreground mb-2 flex items-center gap-1"
>
{membershipRegistration.form.rateLimitLabel}
Rate Limit (messages per epoch)
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<span className="ml-1 cursor-pointer align-middle inline-flex items-center justify-center">
{/* Unicode info icon, styled */}
<span className="w-4 h-4 rounded-full border border-muted-foreground text-muted-foreground flex items-center justify-center text-xs font-bold" style={{ fontFamily: 'monospace' }}>i</span>
</span>
</TooltipTrigger>
<TooltipContent>
1 epoch = 10 minutes
</TooltipContent>
</Tooltip>
</TooltipProvider>
</label>
<div className="flex items-center space-x-4 py-2">
<Slider
id="rateLimit"
min={rateMinLimit}
max={rateMaxLimit}
value={[rateLimit]}
onValueChange={(value) => setRateLimit(value[0])}
<ToggleGroup
type="single"
value={String(rateLimit)}
onValueChange={(value) => {
if (value === '300' || value === '600') setRateLimit(Number(value));
}}
className="w-full"
/>
<span className="text-sm text-muted-foreground w-12 font-mono">
{rateLimit}
</span>
>
<ToggleGroupItem value="300" className="flex-1 flex flex-col items-center">
<span>Standard (300)</span>
<span className="text-xs text-muted-foreground">lower cost</span>
</ToggleGroupItem>
<ToggleGroupItem value="600" className="flex-1 flex flex-col items-center">
<span>Max (600)</span>
<span className="text-xs text-muted-foreground">higher cost, more messages</span>
</ToggleGroupItem>
</ToggleGroup>
</div>
</div>