From 34b2c8a1f44899a3291e0c39cc4f99787d324c7c Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 22 Jan 2026 12:39:51 +0000
Subject: [PATCH] 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.
---
 src/components/nostr/RelaySupportedNips.tsx   | 36 +++++++++++++++++++
 .../kinds/RelayDiscoveryDetailRenderer.tsx    | 21 ++---------
 2 files changed, 38 insertions(+), 19 deletions(-)
 create mode 100644 src/components/nostr/RelaySupportedNips.tsx

diff --git a/src/components/nostr/RelaySupportedNips.tsx b/src/components/nostr/RelaySupportedNips.tsx
new file mode 100644
index 0000000..223d0a2
--- /dev/null
+++ b/src/components/nostr/RelaySupportedNips.tsx
@@ -0,0 +1,36 @@
+import { Label } from "@/components/ui/label";
+import { NIPBadge } from "@/components/NIPBadge";
+
+interface RelaySupportedNipsProps {
+  nips: number[];
+}
+
+/**
+ * Relay Supported NIPs Display Component
+ * Shows supported Nostr Implementation Possibilities (NIPs) for a relay
+ * Used in both Relay Discovery and Monitor Announcement detail views
+ */
+export function RelaySupportedNips({ nips }: RelaySupportedNipsProps) {
+  if (nips.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="space-y-2">
+      <Label className="text-muted-foreground">
+        Supported NIPs ({nips.length})
+      </Label>
+      <div className="flex flex-wrap gap-1.5">
+        {nips.map((nip) => (
+          <NIPBadge
+            key={nip}
+            nipNumber={nip.toString().padStart(2, "0")}
+            showName={false}
+            showNIPPrefix={false}
+            className="text-xs"
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/nostr/kinds/RelayDiscoveryDetailRenderer.tsx b/src/components/nostr/kinds/RelayDiscoveryDetailRenderer.tsx
index fe4e4fb..b215a29 100644
--- a/src/components/nostr/kinds/RelayDiscoveryDetailRenderer.tsx
+++ b/src/components/nostr/kinds/RelayDiscoveryDetailRenderer.tsx
@@ -4,8 +4,8 @@ import { Badge } from "@/components/ui/badge";
 import { Label } from "@/components/ui/label";
 import { JsonViewer } from "@/components/JsonViewer";
 import { UserName } from "../UserName";
-import { NIPBadge } from "@/components/NIPBadge";
 import { RelayKindsDisplay } from "../RelayKindsDisplay";
+import { RelaySupportedNips } from "../RelaySupportedNips";
 import {
   getRelayUrl,
   getRttMetrics,
@@ -221,24 +221,7 @@ export function RelayDiscoveryDetailRenderer({ event }: { event: NostrEvent }) {
       )}
 
       {/* Supported NIPs */}
-      {nips.length > 0 && (
-        <div className="space-y-2">
-          <Label className="text-muted-foreground">
-            Supported NIPs ({nips.length})
-          </Label>
-          <div className="flex flex-wrap gap-1.5">
-            {nips.map((nip) => (
-              <NIPBadge
-                key={nip}
-                nipNumber={nip.toString().padStart(2, "0")}
-                showName={false}
-                showNIPPrefix={false}
-                className="text-xs"
-              />
-            ))}
-          </div>
-        </div>
-      )}
+      <RelaySupportedNips nips={nips} />
 
       {/* Relay Kinds */}
       <RelayKindsDisplay accepted={kinds.accepted} rejected={kinds.rejected} />