mirror of
https://github.com/purrgrammer/grimoire.git
synced 2026-06-06 18:51:21 +02:00
feat(nip-66): add relay discovery and monitor announcement renderers (#172)
* feat(nip-66): add relay discovery and monitor announcement renderers Implements NIP-66 support to display relay health metrics and monitoring information. Users can now view relay performance data (RTT, network type, supported NIPs) and monitor announcements to make informed decisions about relay selection and reliability. Includes 58 comprehensive tests for all helper functions and event parsing. * refactor(nip-66): improve UI with Label, NIPBadge, and clickable titles Enhance NIP-66 renderers with better UI components: - Use NIPBadge component for clickable NIP numbers - Replace section headers with Label component for consistency - Add ClickableEventTitle to monitor announcements - Improve requirement icons with CheckCircle/XCircle for clarity - Add proper icons throughout for better visual hierarchy * refactor(nip-66): use Hammer icon for PoW requirements Replace Zap (lightning bolt) icon with Hammer icon for proof-of-work indicators to better represent the mining/work metaphor. Updates both feed and detail renderers for relay discovery events. * refactor(nip-66): improve feed UI with clickable titles and simplified layout - Add ClickableEventTitle to relay discovery feed items for opening detail view - Remove "Monitoring" label from relay monitor feed items for cleaner layout - Remove unused imports (RelayLink, Label, Activity) from feed renderers - Maintain existing Label and NIPBadge usage in detail renderers * refactor(nip-66): add Label component for check types in monitor feed Add "Check Types" label to relay monitor feed renderer for better visual hierarchy and consistency with detail renderer. * refactor(nip-66): remove Check Types label from monitor feed Remove label title to simplify monitor feed layout - check type badges are displayed directly without a header for cleaner appearance. * refactor(nip-66): use Label component for individual check types in monitor feed Replace Badge components with Label components for check types to match the design system and provide better visual consistency. * refactor(nip-66): rename components to human-readable names Rename NIP-66 component exports to match established naming convention: - Kind10166Renderer → MonitorAnnouncementRenderer - Kind10166DetailRenderer → MonitorAnnouncementDetailRenderer - Kind30166Renderer → RelayDiscoveryRenderer - Kind30166DetailRenderer → RelayDiscoveryDetailRenderer This follows the pattern used elsewhere (e.g., LiveActivityRenderer vs Kind30311Renderer) to make code more readable without memorizing kind numbers. * refactor(nip-66): extract relay kinds display into reusable component Create RelayKindsDisplay component to show accepted/rejected kinds in a consistent format across detail views. Used in RelayDiscoveryDetailRenderer to reduce code duplication and improve maintainability. * refactor(nip-66): extract supported NIPs display into reusable component Create RelaySupportedNips component to show relay-supported NIPs in a consistent format. Used in RelayDiscoveryDetailRenderer to reduce code duplication and improve maintainability. * refactor(nip-66): add icon to supported NIPs component for consistent styling Add FileText icon to RelaySupportedNips Label to match the visual hierarchy pattern used in other relay detail sections (Performance Metrics, Characteristics, Requirements, etc.). * refactor(nip-66): use nicer NIP rendering from RelayViewer in shared component Update RelaySupportedNips component to match RelayViewer's nicer styling: - Show NIP names alongside numbers (showName=true) for better readability - Use gap-2 for better spacing - Use h3 title styling instead of Label with icon - Make component reusable with optional title customization - Use in both RelayViewer and RelayDiscoveryDetailRenderer --------- Co-authored-by: Claude <noreply@anthropic.com>
This commit is contained in:
Alejandro
@@ -3,7 +3,7 @@ import { useRelayInfo } from "../hooks/useRelayInfo";
|
||||
import { useCopy } from "../hooks/useCopy";
|
||||
import { Button } from "./ui/button";
|
||||
import { UserName } from "./nostr/UserName";
|
||||
import { NIPBadge } from "./NIPBadge";
|
||||
import { RelaySupportedNips } from "./nostr/RelaySupportedNips";
|
||||
|
||||
export interface RelayViewerProps {
|
||||
url: string;
|
||||
@@ -68,19 +68,8 @@ export function RelayViewer({ url }: RelayViewerProps) {
|
||||
)}
|
||||
|
||||
{/* Supported NIPs */}
|
||||
{info?.supported_nips && info.supported_nips.length > 0 && (
|
||||
<div>
|
||||
<h3 className="mb-3 font-semibold text-sm">Supported NIPs</h3>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{info.supported_nips.map((num: number) => (
|
||||
<NIPBadge
|
||||
key={num}
|
||||
nipNumber={String(num).padStart(2, "0")}
|
||||
showName={true}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
{info?.supported_nips && (
|
||||
<RelaySupportedNips nips={info.supported_nips} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
60
src/components/nostr/RelayKindsDisplay.tsx
Normal file
60
src/components/nostr/RelayKindsDisplay.tsx
Normal file
@@ -0,0 +1,60 @@
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Filter, XCircle } from "lucide-react";
|
||||
|
||||
interface RelayKindsDisplayProps {
|
||||
accepted: number[];
|
||||
rejected: number[];
|
||||
}
|
||||
|
||||
/**
|
||||
* Relay Kinds Display Component
|
||||
* Shows accepted and rejected event kinds for a relay in a consistent format
|
||||
* Used in both Relay Discovery and Monitor Announcement detail views
|
||||
*/
|
||||
export function RelayKindsDisplay({
|
||||
accepted,
|
||||
rejected,
|
||||
}: RelayKindsDisplayProps) {
|
||||
return (
|
||||
<>
|
||||
{/* Accepted Kinds */}
|
||||
{accepted.length > 0 && (
|
||||
<div className="space-y-2">
|
||||
<Label className="flex items-center gap-2 text-muted-foreground">
|
||||
<Filter className="size-4" />
|
||||
Accepted Kinds ({accepted.length})
|
||||
</Label>
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{accepted.map((kind) => (
|
||||
<Badge key={kind} variant="outline" className="font-mono text-xs">
|
||||
{kind}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Rejected Kinds */}
|
||||
{rejected.length > 0 && (
|
||||
<div className="space-y-2">
|
||||
<Label className="flex items-center gap-2 text-muted-foreground">
|
||||
<XCircle className="size-4" />
|
||||
Rejected Kinds ({rejected.length})
|
||||
</Label>
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{rejected.map((kind) => (
|
||||
<Badge
|
||||
key={kind}
|
||||
variant="outline"
|
||||
className="font-mono text-xs text-red-600 border-red-600/30"
|
||||
>
|
||||
!{kind}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
38
src/components/nostr/RelaySupportedNips.tsx
Normal file
38
src/components/nostr/RelaySupportedNips.tsx
Normal file
@@ -0,0 +1,38 @@
|
||||
import { NIPBadge } from "@/components/NIPBadge";
|
||||
|
||||
interface RelaySupportedNipsProps {
|
||||
nips: number[];
|
||||
title?: string;
|
||||
showTitle?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* Relay Supported NIPs Display Component
|
||||
* Shows supported Nostr Implementation Possibilities (NIPs) for a relay
|
||||
* Used in RelayViewer and Relay Discovery detail views
|
||||
* Renders NIP badges with names for better readability
|
||||
*/
|
||||
export function RelaySupportedNips({
|
||||
nips,
|
||||
title = "Supported NIPs",
|
||||
showTitle = true,
|
||||
}: RelaySupportedNipsProps) {
|
||||
if (nips.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
{showTitle && <h3 className="mb-3 font-semibold text-sm">{title}</h3>}
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{nips.map((nip) => (
|
||||
<NIPBadge
|
||||
key={nip}
|
||||
nipNumber={nip.toString().padStart(2, "0")}
|
||||
showName={true}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
138
src/components/nostr/kinds/MonitorAnnouncementDetailRenderer.tsx
Normal file
138
src/components/nostr/kinds/MonitorAnnouncementDetailRenderer.tsx
Normal file
@@ -0,0 +1,138 @@
|
||||
import { NostrEvent } from "@/types/nostr";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { UserName } from "../UserName";
|
||||
import {
|
||||
getMonitorFrequency,
|
||||
getMonitorTimeouts,
|
||||
getMonitorChecks,
|
||||
getMonitorGeohash,
|
||||
formatFrequency,
|
||||
formatTimeout,
|
||||
getCheckTypeName,
|
||||
} from "@/lib/nip66-helpers";
|
||||
import { Activity, Clock, MapPin, Timer } from "lucide-react";
|
||||
|
||||
/**
|
||||
* Monitor Announcement Detail Renderer - NIP-66 Relay Monitor Announcement (Detail View)
|
||||
* Kind 10166 - Shows comprehensive monitor configuration including frequency, timeouts, and checks
|
||||
*/
|
||||
export function MonitorAnnouncementDetailRenderer({
|
||||
event,
|
||||
}: {
|
||||
event: NostrEvent;
|
||||
}) {
|
||||
const frequency = getMonitorFrequency(event);
|
||||
const timeouts = getMonitorTimeouts(event);
|
||||
const checks = getMonitorChecks(event);
|
||||
const geohash = getMonitorGeohash(event);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4 p-4 max-w-4xl">
|
||||
{/* Header: Monitor Identity */}
|
||||
<div className="flex flex-col gap-2 pb-4 border-b">
|
||||
<h1 className="text-2xl font-bold">Relay Monitor</h1>
|
||||
<div className="flex items-center gap-2 text-muted-foreground">
|
||||
<span className="text-sm">Operated by</span>
|
||||
<UserName pubkey={event.pubkey} className="font-medium" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Operational Parameters */}
|
||||
<div className="space-y-4">
|
||||
{/* Monitoring Frequency */}
|
||||
{frequency && !isNaN(frequency) && (
|
||||
<div className="space-y-2">
|
||||
<Label className="flex items-center gap-2 text-muted-foreground">
|
||||
<Clock className="size-4" />
|
||||
Publishing Frequency
|
||||
</Label>
|
||||
<div className="p-3 rounded-lg bg-muted/50">
|
||||
<span className="text-lg font-semibold">
|
||||
{formatFrequency(frequency)}
|
||||
</span>
|
||||
<span className="text-sm text-muted-foreground ml-2">
|
||||
({frequency} seconds)
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Check Types Performed */}
|
||||
{checks.length > 0 && (
|
||||
<div className="space-y-2">
|
||||
<Label className="flex items-center gap-2 text-muted-foreground">
|
||||
<Activity className="size-4" />
|
||||
Check Types ({checks.length})
|
||||
</Label>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{checks.map((check) => (
|
||||
<Badge key={check} variant="secondary" className="px-3 py-1.5">
|
||||
{getCheckTypeName(check)}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Timeout Configurations */}
|
||||
{Object.keys(timeouts).length > 0 && (
|
||||
<div className="space-y-2">
|
||||
<Label className="flex items-center gap-2 text-muted-foreground">
|
||||
<Timer className="size-4" />
|
||||
Timeout Configurations
|
||||
</Label>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-3">
|
||||
{Object.entries(timeouts).map(([checkType, timeout]) => (
|
||||
<div
|
||||
key={checkType}
|
||||
className="flex flex-col gap-1 p-3 rounded-lg bg-muted/50"
|
||||
>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{getCheckTypeName(checkType)}
|
||||
</span>
|
||||
<span className="text-base font-semibold">
|
||||
{formatTimeout(timeout)}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Geographic Location */}
|
||||
{geohash && (
|
||||
<div className="space-y-2">
|
||||
<Label className="flex items-center gap-2 text-muted-foreground">
|
||||
<MapPin className="size-4" />
|
||||
Location
|
||||
</Label>
|
||||
<Badge variant="outline" className="gap-2 px-3 py-1.5">
|
||||
<MapPin className="size-4" />
|
||||
<span className="font-mono">{geohash}</span>
|
||||
</Badge>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Monitor Description */}
|
||||
{event.content && event.content.trim() !== "" && (
|
||||
<div className="space-y-2 pt-4 border-t">
|
||||
<Label className="text-muted-foreground">About this Monitor</Label>
|
||||
<p className="text-sm whitespace-pre-wrap">{event.content}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Empty State */}
|
||||
{!frequency &&
|
||||
checks.length === 0 &&
|
||||
Object.keys(timeouts).length === 0 &&
|
||||
!geohash &&
|
||||
(!event.content || event.content.trim() === "") && (
|
||||
<div className="text-center text-muted-foreground text-sm py-8">
|
||||
No monitoring configuration specified
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
61
src/components/nostr/kinds/MonitorAnnouncementRenderer.tsx
Normal file
61
src/components/nostr/kinds/MonitorAnnouncementRenderer.tsx
Normal file
@@ -0,0 +1,61 @@
|
||||
import {
|
||||
BaseEventProps,
|
||||
BaseEventContainer,
|
||||
ClickableEventTitle,
|
||||
} from "./BaseEventRenderer";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import {
|
||||
getMonitorFrequency,
|
||||
getMonitorChecks,
|
||||
formatFrequency,
|
||||
getCheckTypeName,
|
||||
} from "@/lib/nip66-helpers";
|
||||
import { Clock } from "lucide-react";
|
||||
|
||||
/**
|
||||
* Monitor Announcement Renderer - NIP-66 Relay Monitor Announcement (Feed View)
|
||||
* Kind 10166 - Displays monitor announcement with frequency and check types
|
||||
*/
|
||||
export function MonitorAnnouncementRenderer({ event }: BaseEventProps) {
|
||||
const frequency = getMonitorFrequency(event);
|
||||
const checks = getMonitorChecks(event);
|
||||
|
||||
return (
|
||||
<BaseEventContainer event={event}>
|
||||
<div className="flex flex-col gap-2">
|
||||
{/* Clickable Title */}
|
||||
<ClickableEventTitle event={event} className="text-base font-semibold">
|
||||
Relay Monitor
|
||||
</ClickableEventTitle>
|
||||
|
||||
{/* Monitoring Frequency */}
|
||||
{frequency && !isNaN(frequency) && (
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<Clock className="size-4 text-muted-foreground" />
|
||||
<span>
|
||||
Checks every{" "}
|
||||
<span className="font-medium">{formatFrequency(frequency)}</span>
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Check Types */}
|
||||
{checks.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{checks.map((check) => (
|
||||
<Label key={check} className="text-xs text-muted-foreground">
|
||||
{getCheckTypeName(check)}
|
||||
</Label>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!frequency && checks.length === 0 && (
|
||||
<div className="text-xs text-muted-foreground italic">
|
||||
No monitoring configuration specified
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</BaseEventContainer>
|
||||
);
|
||||
}
|
||||
275
src/components/nostr/kinds/RelayDiscoveryDetailRenderer.tsx
Normal file
275
src/components/nostr/kinds/RelayDiscoveryDetailRenderer.tsx
Normal file
@@ -0,0 +1,275 @@
|
||||
import { NostrEvent } from "@/types/nostr";
|
||||
import { RelayLink } from "../RelayLink";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { JsonViewer } from "@/components/JsonViewer";
|
||||
import { UserName } from "../UserName";
|
||||
import { RelayKindsDisplay } from "../RelayKindsDisplay";
|
||||
import { RelaySupportedNips } from "../RelaySupportedNips";
|
||||
import {
|
||||
getRelayUrl,
|
||||
getRttMetrics,
|
||||
getNetworkType,
|
||||
getRelayType,
|
||||
getSupportedNips,
|
||||
getRelayRequirements,
|
||||
getRelayTopics,
|
||||
getRelayKinds,
|
||||
getRelayGeohash,
|
||||
parseNip11Document,
|
||||
calculateRelayHealth,
|
||||
} from "@/lib/nip66-helpers";
|
||||
import {
|
||||
Activity,
|
||||
CircleDot,
|
||||
Globe,
|
||||
Lock,
|
||||
CreditCard,
|
||||
Hammer,
|
||||
MapPin,
|
||||
Shield,
|
||||
Tag,
|
||||
Clock,
|
||||
CheckCircle,
|
||||
XCircle,
|
||||
} from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { formatTimestamp } from "@/hooks/useLocale";
|
||||
import { useState } from "react";
|
||||
|
||||
/**
|
||||
* Relay Discovery Detail Renderer - NIP-66 Relay Discovery (Detail View)
|
||||
* Kind 30166 - Shows comprehensive relay information with all metrics and capabilities
|
||||
*/
|
||||
export function RelayDiscoveryDetailRenderer({ event }: { event: NostrEvent }) {
|
||||
const [showNip11, setShowNip11] = useState(false);
|
||||
|
||||
const relayUrl = getRelayUrl(event);
|
||||
const rtt = getRttMetrics(event);
|
||||
const networkType = getNetworkType(event);
|
||||
const relayType = getRelayType(event);
|
||||
const nips = getSupportedNips(event);
|
||||
const requirements = getRelayRequirements(event);
|
||||
const topics = getRelayTopics(event);
|
||||
const kinds = getRelayKinds(event);
|
||||
const geohash = getRelayGeohash(event);
|
||||
const nip11 = parseNip11Document(event);
|
||||
const health = calculateRelayHealth(event);
|
||||
|
||||
if (!relayUrl) {
|
||||
return (
|
||||
<div className="p-4 text-center text-muted-foreground text-sm">
|
||||
Invalid relay discovery event (missing relay URL)
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Calculate health color based on score
|
||||
const healthColor =
|
||||
health >= 80
|
||||
? "text-green-600"
|
||||
: health >= 50
|
||||
? "text-yellow-600"
|
||||
: "text-red-600";
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4 p-4 max-w-4xl">
|
||||
{/* Header: Relay URL and Health */}
|
||||
<div className="flex items-center justify-between gap-4 pb-4 border-b">
|
||||
<div className="flex-1 min-w-0">
|
||||
<RelayLink
|
||||
url={relayUrl}
|
||||
urlClassname="text-xl font-bold underline decoration-dotted"
|
||||
iconClassname="size-6"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 shrink-0">
|
||||
<Activity className={cn("size-5", healthColor)} />
|
||||
<span className={cn("text-2xl font-bold", healthColor)}>
|
||||
{health}%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Performance Metrics Section */}
|
||||
{(rtt.open !== undefined ||
|
||||
rtt.read !== undefined ||
|
||||
rtt.write !== undefined) && (
|
||||
<div className="space-y-2">
|
||||
<Label className="flex items-center gap-2 text-muted-foreground">
|
||||
<Activity className="size-4" />
|
||||
Performance Metrics
|
||||
</Label>
|
||||
<div className="grid grid-cols-3 gap-3">
|
||||
{rtt.open !== undefined && !isNaN(rtt.open) && (
|
||||
<div className="flex flex-col gap-1 p-3 rounded-lg bg-muted/50">
|
||||
<span className="text-xs text-muted-foreground">
|
||||
Connection
|
||||
</span>
|
||||
<span className="text-lg font-semibold">{rtt.open}ms</span>
|
||||
</div>
|
||||
)}
|
||||
{rtt.read !== undefined && !isNaN(rtt.read) && (
|
||||
<div className="flex flex-col gap-1 p-3 rounded-lg bg-muted/50">
|
||||
<span className="text-xs text-muted-foreground">Read</span>
|
||||
<span className="text-lg font-semibold">{rtt.read}ms</span>
|
||||
</div>
|
||||
)}
|
||||
{rtt.write !== undefined && !isNaN(rtt.write) && (
|
||||
<div className="flex flex-col gap-1 p-3 rounded-lg bg-muted/50">
|
||||
<span className="text-xs text-muted-foreground">Write</span>
|
||||
<span className="text-lg font-semibold">{rtt.write}ms</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Relay Characteristics */}
|
||||
{(networkType || relayType || geohash) && (
|
||||
<div className="space-y-2">
|
||||
<Label className="flex items-center gap-2 text-muted-foreground">
|
||||
<Globe className="size-4" />
|
||||
Characteristics
|
||||
</Label>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{networkType && (
|
||||
<Badge variant="outline" className="gap-1.5 px-3 py-1">
|
||||
{networkType === "tor" && <CircleDot className="size-4" />}
|
||||
{(networkType === "i2p" || networkType === "clearnet") && (
|
||||
<Globe className="size-4" />
|
||||
)}
|
||||
<span className="capitalize">{networkType}</span>
|
||||
</Badge>
|
||||
)}
|
||||
{relayType && (
|
||||
<Badge variant="secondary" className="px-3 py-1">
|
||||
{relayType}
|
||||
</Badge>
|
||||
)}
|
||||
{geohash && (
|
||||
<Badge variant="outline" className="gap-1.5 px-3 py-1">
|
||||
<MapPin className="size-4" />
|
||||
{geohash}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Requirements Section */}
|
||||
{Object.keys(requirements).length > 0 && (
|
||||
<div className="space-y-2">
|
||||
<Label className="flex items-center gap-2 text-muted-foreground">
|
||||
<Shield className="size-4" />
|
||||
Requirements
|
||||
</Label>
|
||||
<div className="flex flex-col gap-2">
|
||||
{requirements.auth !== undefined && (
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
{requirements.auth ? (
|
||||
<Lock className="size-4 text-orange-600" />
|
||||
) : (
|
||||
<CheckCircle className="size-4 text-green-600" />
|
||||
)}
|
||||
<span>
|
||||
Authentication{" "}
|
||||
{requirements.auth ? "required" : "not required"}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{requirements.payment !== undefined && (
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
{requirements.payment ? (
|
||||
<CreditCard className="size-4 text-blue-600" />
|
||||
) : (
|
||||
<CheckCircle className="size-4 text-green-600" />
|
||||
)}
|
||||
<span>
|
||||
Payment {requirements.payment ? "required" : "not required"}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{requirements.writes !== undefined && (
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
{requirements.writes ? (
|
||||
<CheckCircle className="size-4 text-green-600" />
|
||||
) : (
|
||||
<XCircle className="size-4 text-red-600" />
|
||||
)}
|
||||
<span>
|
||||
{requirements.writes
|
||||
? "Write access enabled"
|
||||
: "Read-only relay"}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{requirements.pow !== undefined && (
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
{requirements.pow ? (
|
||||
<Hammer className="size-4 text-purple-600" />
|
||||
) : (
|
||||
<CheckCircle className="size-4 text-green-600" />
|
||||
)}
|
||||
<span>
|
||||
Proof of work {requirements.pow ? "required" : "not required"}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Supported NIPs */}
|
||||
{nips.length > 0 && (
|
||||
<RelaySupportedNips
|
||||
nips={nips}
|
||||
title={`Supported NIPs (${nips.length})`}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Relay Kinds */}
|
||||
<RelayKindsDisplay accepted={kinds.accepted} rejected={kinds.rejected} />
|
||||
|
||||
{/* Topics */}
|
||||
{topics.length > 0 && (
|
||||
<div className="space-y-2">
|
||||
<Label className="flex items-center gap-2 text-muted-foreground">
|
||||
<Tag className="size-4" />
|
||||
Topics ({topics.length})
|
||||
</Label>
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{topics.map((topic, index) => (
|
||||
<Badge key={index} variant="secondary" className="text-xs">
|
||||
{topic}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* NIP-11 Document */}
|
||||
{nip11 && (
|
||||
<div className="space-y-2">
|
||||
<JsonViewer
|
||||
data={nip11}
|
||||
open={showNip11}
|
||||
onOpenChange={setShowNip11}
|
||||
title="NIP-11 Information Document"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Monitor Attribution */}
|
||||
<div className="pt-4 border-t text-xs text-muted-foreground space-y-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<Clock className="size-3" />
|
||||
<span>
|
||||
Monitored {formatTimestamp(event.created_at)} by{" "}
|
||||
<UserName pubkey={event.pubkey} className="font-medium" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
147
src/components/nostr/kinds/RelayDiscoveryRenderer.tsx
Normal file
147
src/components/nostr/kinds/RelayDiscoveryRenderer.tsx
Normal file
@@ -0,0 +1,147 @@
|
||||
import {
|
||||
BaseEventProps,
|
||||
BaseEventContainer,
|
||||
ClickableEventTitle,
|
||||
} from "./BaseEventRenderer";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import {
|
||||
getRelayUrl,
|
||||
getRttMetrics,
|
||||
getNetworkType,
|
||||
getRelayType,
|
||||
getRelayRequirements,
|
||||
calculateRelayHealth,
|
||||
} from "@/lib/nip66-helpers";
|
||||
import {
|
||||
Activity,
|
||||
CircleDot,
|
||||
Globe,
|
||||
Lock,
|
||||
CreditCard,
|
||||
Hammer,
|
||||
} from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
/**
|
||||
* Relay Discovery Renderer - NIP-66 Relay Discovery (Feed View)
|
||||
* Kind 30166 - Displays relay information with health metrics, network type, and capabilities
|
||||
*/
|
||||
export function RelayDiscoveryRenderer({ event }: BaseEventProps) {
|
||||
const relayUrl = getRelayUrl(event);
|
||||
const rtt = getRttMetrics(event);
|
||||
const networkType = getNetworkType(event);
|
||||
const relayType = getRelayType(event);
|
||||
const requirements = getRelayRequirements(event);
|
||||
const health = calculateRelayHealth(event);
|
||||
|
||||
if (!relayUrl) {
|
||||
return (
|
||||
<BaseEventContainer event={event}>
|
||||
<div className="text-xs text-muted-foreground italic">
|
||||
Invalid relay discovery event (missing relay URL)
|
||||
</div>
|
||||
</BaseEventContainer>
|
||||
);
|
||||
}
|
||||
|
||||
// Calculate health color based on score
|
||||
const healthColor =
|
||||
health >= 80
|
||||
? "text-green-600"
|
||||
: health >= 50
|
||||
? "text-yellow-600"
|
||||
: "text-red-600";
|
||||
|
||||
// Format RTT for display (average of available metrics)
|
||||
const avgRtt = [rtt.open, rtt.read, rtt.write]
|
||||
.filter((v): v is number => v !== undefined && !isNaN(v))
|
||||
.reduce((sum, v, _, arr) => sum + v / arr.length, 0);
|
||||
|
||||
return (
|
||||
<BaseEventContainer event={event}>
|
||||
<div className="flex flex-col gap-2">
|
||||
{/* Clickable Title and Health Score */}
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<ClickableEventTitle
|
||||
event={event}
|
||||
className="text-base font-semibold truncate flex-1 min-w-0"
|
||||
>
|
||||
{relayUrl}
|
||||
</ClickableEventTitle>
|
||||
<div className="flex items-center gap-1 text-xs shrink-0">
|
||||
<Activity className={cn("size-3", healthColor)} />
|
||||
<span className={cn("font-medium", healthColor)}>{health}%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Badges: Network Type, Relay Type, RTT, Requirements */}
|
||||
<div className="flex flex-wrap gap-1.5 text-xs">
|
||||
{/* Network Type Badge */}
|
||||
{networkType && (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="gap-1 h-5 px-1.5 bg-background/50"
|
||||
>
|
||||
{networkType === "tor" && <CircleDot className="size-3" />}
|
||||
{networkType === "i2p" && <Globe className="size-3" />}
|
||||
{networkType === "clearnet" && <Globe className="size-3" />}
|
||||
<span className="capitalize">{networkType}</span>
|
||||
</Badge>
|
||||
)}
|
||||
|
||||
{/* Relay Type Badge */}
|
||||
{relayType && (
|
||||
<Badge variant="secondary" className="h-5 px-1.5">
|
||||
{relayType}
|
||||
</Badge>
|
||||
)}
|
||||
|
||||
{/* RTT Badge */}
|
||||
{avgRtt > 0 && (
|
||||
<Badge variant="outline" className="h-5 px-1.5 gap-1">
|
||||
<Activity className="size-3" />
|
||||
{Math.round(avgRtt)}ms
|
||||
</Badge>
|
||||
)}
|
||||
|
||||
{/* Requirements Badges */}
|
||||
{requirements.auth && (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="h-5 px-1.5 gap-1 text-orange-600 border-orange-600/30"
|
||||
>
|
||||
<Lock className="size-3" />
|
||||
Auth
|
||||
</Badge>
|
||||
)}
|
||||
{requirements.payment && (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="h-5 px-1.5 gap-1 text-blue-600 border-blue-600/30"
|
||||
>
|
||||
<CreditCard className="size-3" />
|
||||
Paid
|
||||
</Badge>
|
||||
)}
|
||||
{requirements.writes === false && (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="h-5 px-1.5 gap-1 text-muted-foreground"
|
||||
>
|
||||
Read-only
|
||||
</Badge>
|
||||
)}
|
||||
{requirements.pow && (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="h-5 px-1.5 gap-1 text-purple-600 border-purple-600/30"
|
||||
>
|
||||
<Hammer className="size-3" />
|
||||
PoW
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</BaseEventContainer>
|
||||
);
|
||||
}
|
||||
@@ -148,6 +148,10 @@ import { BadgeAwardRenderer } from "./BadgeAwardRenderer";
|
||||
import { BadgeAwardDetailRenderer } from "./BadgeAwardDetailRenderer";
|
||||
import { ProfileBadgesRenderer } from "./ProfileBadgesRenderer";
|
||||
import { ProfileBadgesDetailRenderer } from "./ProfileBadgesDetailRenderer";
|
||||
import { MonitorAnnouncementRenderer } from "./MonitorAnnouncementRenderer";
|
||||
import { MonitorAnnouncementDetailRenderer } from "./MonitorAnnouncementDetailRenderer";
|
||||
import { RelayDiscoveryRenderer } from "./RelayDiscoveryRenderer";
|
||||
import { RelayDiscoveryDetailRenderer } from "./RelayDiscoveryDetailRenderer";
|
||||
import { GoalRenderer } from "./GoalRenderer";
|
||||
import { GoalDetailRenderer } from "./GoalDetailRenderer";
|
||||
|
||||
@@ -201,6 +205,7 @@ const kindRenderers: Record<number, React.ComponentType<BaseEventProps>> = {
|
||||
10063: BlossomServerListRenderer, // Blossom User Server List (BUD-03)
|
||||
10101: WikiAuthorsRenderer, // Good Wiki Authors (NIP-51)
|
||||
10102: WikiRelaysRenderer, // Good Wiki Relays (NIP-51)
|
||||
10166: MonitorAnnouncementRenderer, // Relay Monitor Announcement (NIP-66)
|
||||
10317: Kind10317Renderer, // User Grasp List (NIP-34)
|
||||
13534: RelayMembersRenderer, // Relay Members (NIP-43)
|
||||
30000: FollowSetRenderer, // Follow Sets (NIP-51)
|
||||
@@ -216,6 +221,7 @@ const kindRenderers: Record<number, React.ComponentType<BaseEventProps>> = {
|
||||
30023: Kind30023Renderer, // Long-form Article
|
||||
30030: EmojiSetRenderer, // Emoji Sets (NIP-30)
|
||||
30063: ZapstoreReleaseRenderer, // Zapstore App Release
|
||||
30166: RelayDiscoveryRenderer, // Relay Discovery (NIP-66)
|
||||
30267: ZapstoreAppSetRenderer, // Zapstore App Collection
|
||||
30311: LiveActivityRenderer, // Live Streaming Event (NIP-53)
|
||||
34235: Kind21Renderer, // Horizontal Video (NIP-71 legacy)
|
||||
@@ -300,6 +306,7 @@ const detailRenderers: Record<
|
||||
10063: BlossomServerListDetailRenderer, // Blossom User Server List Detail (BUD-03)
|
||||
10101: WikiAuthorsDetailRenderer, // Good Wiki Authors Detail (NIP-51)
|
||||
10102: WikiRelaysDetailRenderer, // Good Wiki Relays Detail (NIP-51)
|
||||
10166: MonitorAnnouncementDetailRenderer, // Relay Monitor Announcement Detail (NIP-66)
|
||||
10317: Kind10317DetailRenderer, // User Grasp List Detail (NIP-34)
|
||||
13534: RelayMembersDetailRenderer, // Relay Members Detail (NIP-43)
|
||||
30000: FollowSetDetailRenderer, // Follow Sets Detail (NIP-51)
|
||||
@@ -314,6 +321,7 @@ const detailRenderers: Record<
|
||||
30023: Kind30023DetailRenderer, // Long-form Article Detail
|
||||
30030: EmojiSetDetailRenderer, // Emoji Sets Detail (NIP-30)
|
||||
30063: ZapstoreReleaseDetailRenderer, // Zapstore App Release Detail
|
||||
30166: RelayDiscoveryDetailRenderer, // Relay Discovery Detail (NIP-66)
|
||||
30267: ZapstoreAppSetDetailRenderer, // Zapstore App Collection Detail
|
||||
30311: LiveActivityDetailRenderer, // Live Streaming Event Detail (NIP-53)
|
||||
30617: RepositoryDetailRenderer, // Repository Detail (NIP-34)
|
||||
|
||||
Reference in New Issue
Block a user