create-fedi-app 0.1.0

package/dist/templates/modules/nostr-feed/lib/nostr-zap.ts

@@ -0,0 +1,159 @@
+import { bech32 } from '@scure/base';
+import type { NostrEvent, UnsignedNostrEvent } from './fedi-types';
+import type { RelayManager } from './nostr/relay';
+
+const ZAP_REQUEST_KIND = 9734;
+const ZAP_RECEIPT_KIND = 9735;
+const PROFILE_KIND = 0;
+
+export interface IProfileLightning {
+  lud16?: string;
+  lud06?: string;
+}
+
+export interface ILnurlPayResponse {
+  callback: string;
+  minSendable: number;
+  maxSendable: number;
+  allowsNostr?: boolean;
+  nostrPubkey?: string;
+}
+
+export interface ILnurlZapInvoice {
+  pr: string;
+  successAction?: { tag: string; message?: string };
+}
+
+/** Converts `user@domain.com` lud16 to an LNURL-pay HTTPS endpoint. */
+export function lud16ToLnurlPayUrl(lud16: string): string {
+  const [name, domain] = lud16.split('@');
+  if (!name || !domain) {
+    throw new Error('Invalid lud16 address');
+  }
+  return `https://${domain}/.well-known/lnurlp/${name}`;
+}
+
+/** Decodes a bech32 `lnurl…` lud06 string to an HTTPS LNURL endpoint. */
+export function lud06ToHttps(lud06: string): string {
+  const { words } = bech32.decode(lud06, 2000);
+  const bytes = bech32.fromWords(words);
+  return new TextDecoder().decode(bytes);
+}
+
+/** Parses kind-0 profile metadata for Lightning identifiers. */
+export function parseProfileLightning(content: string): IProfileLightning {
+  try {
+    const parsed = JSON.parse(content) as Record<string, unknown>;
+    return {
+      lud16: typeof parsed.lud16 === 'string' ? parsed.lud16 : undefined,
+      lud06: typeof parsed.lud06 === 'string' ? parsed.lud06 : undefined,
+    };
+  } catch {
+    return {};
+  }
+}
+
+/**
+ * Fetches the recipient's kind-0 profile from relays to resolve a zap LNURL endpoint.
+ */
+export async function fetchRecipientLnurl(
+  manager: RelayManager,
+  relayUrls: string[],
+  recipientPubkey: string,
+): Promise<string | null> {
+  const profiles = await manager.query(relayUrls, {
+    kinds: [PROFILE_KIND],
+    authors: [recipientPubkey],
+    limit: 1,
+  });
+
+  const profile = profiles.sort((a, b) => b.created_at - a.created_at)[0];
+  if (!profile) return null;
+
+  const { lud16, lud06 } = parseProfileLightning(profile.content);
+  if (lud16) return lud16ToLnurlPayUrl(lud16);
+  if (lud06) return lud06ToHttps(lud06);
+  return null;
+}
+
+/** Builds an unsigned NIP-57 zap request (kind 9734). */
+export function buildZapRequest(params: {
+  noteId: string;
+  notePubkey: string;
+  relayUrls: string[];
+  amountMsats: number;
+  content?: string;
+}): UnsignedNostrEvent {
+  return {
+    kind: ZAP_REQUEST_KIND,
+    created_at: Math.floor(Date.now() / 1000),
+    tags: [
+      ['e', params.noteId],
+      ['p', params.notePubkey],
+      ...params.relayUrls.map((url) => ['relays', url] as [string, string]),
+      ['amount', String(params.amountMsats)],
+    ],
+    content: params.content ?? '',
+  };
+}
+
+/** Fetches LNURL-pay metadata and validates Nostr zap support. */
+export async function fetchLnurlPayMetadata(lnurl: string): Promise<ILnurlPayResponse> {
+  const res = await fetch(lnurl);
+  if (!res.ok) {
+    throw new Error(`LNURL lookup failed (${res.status})`);
+  }
+  const data = (await res.json()) as ILnurlPayResponse;
+  if (!data.allowsNostr) {
+    throw new Error('This Lightning address does not support Nostr zaps (NIP-57)');
+  }
+  return data;
+}
+
+/**
+ * Requests a BOLT11 invoice from an LNURL-pay callback using a signed zap request.
+ */
+export async function requestZapInvoice(
+  callback: string,
+  amountMsats: number,
+  signedZapRequest: NostrEvent,
+): Promise<string> {
+  const url = new URL(callback);
+  url.searchParams.set('amount', String(amountMsats));
+  url.searchParams.set('nostr', JSON.stringify(signedZapRequest));
+
+  const res = await fetch(url.toString());
+  if (!res.ok) {
+    throw new Error(`Zap invoice request failed (${res.status})`);
+  }
+
+  const data = (await res.json()) as ILnurlZapInvoice;
+  if (!data.pr) {
+    throw new Error('LNURL response did not include an invoice');
+  }
+  return data.pr;
+}
+
+/** Builds a signed zap receipt (kind 9735) after payment. */
+export function buildZapReceipt(params: {
+  noteId: string;
+  notePubkey: string;
+  payerPubkey: string;
+  bolt11: string;
+  preimage: string;
+  zapRequest: NostrEvent;
+}): UnsignedNostrEvent {
+  return {
+    kind: ZAP_RECEIPT_KIND,
+    created_at: Math.floor(Date.now() / 1000),
+    tags: [
+      ['p', params.notePubkey],
+      ['e', params.noteId],
+      ['P', params.payerPubkey],
+      ['bolt11', params.bolt11],
+      ['preimage', params.preimage],
+      ['description', JSON.stringify(params.zapRequest)],
+    ],
+    content: '',
+  };
+}

package/dist/templates/modules/nostr-feed/module.json

@@ -0,0 +1,25 @@
+{
+  "name": "nostr-feed",
+  "description": "Read and post to a Nostr relay",
+  "dependencies": ["nostr-tools", "react-markdown"],
+  "devDependencies": [],
+  "files": [
+    { "src": "lib/nostr/relay.ts", "dest": "lib/nostr/relay.ts", "merge": "add" },
+    { "src": "lib/nostr-zap.ts", "dest": "lib/nostr-zap.ts", "merge": "add" },
+    { "src": "components/nostr/NostrFeedProvider.tsx", "dest": "components/nostr/NostrFeedProvider.tsx", "merge": "add" },
+    { "src": "components/nostr/NoteFeed.tsx", "dest": "components/nostr/NoteFeed.tsx", "merge": "add" },
+    { "src": "components/nostr/NoteCard.tsx", "dest": "components/nostr/NoteCard.tsx", "merge": "add" },
+    { "src": "components/nostr/PublishNote.tsx", "dest": "components/nostr/PublishNote.tsx", "merge": "add" },
+    { "src": "components/nostr/ZapButton.tsx", "dest": "components/nostr/ZapButton.tsx", "merge": "add" },
+    { "src": "app/demo/nostr-feed/page.tsx", "dest": "app/demo/nostr-feed/page.tsx", "merge": "add" },
+    { "src": "app/demo/nostr-feed/NostrFeedDemoClient.tsx", "dest": "app/demo/nostr-feed/NostrFeedDemoClient.tsx", "merge": "add" }
+  ],
+  "envVars": [
+    {
+      "key": "NEXT_PUBLIC_NOSTR_RELAY",
+      "description": "Nostr relay WebSocket URL(s), comma-separated",
+      "example": "wss://relay.damus.io,wss://relay.nostr.band",
+      "required": false
+    }
+  ]
+}

package/dist/templates/modules/nostr-identity/app/demo/nostr/page.tsx

@@ -0,0 +1,136 @@
+'use client';
+
+import Link from 'next/link';
+import { useState } from 'react';
+import { IdentityBadge } from '../../../components/nostr/IdentityBadge';
+import { NostrLogin } from '../../../components/nostr/NostrLogin';
+import { SignedMessage } from '../../../components/nostr/SignedMessage';
+
+export default function NostrDemoPage() {
+  const [howItWorksOpen, setHowItWorksOpen] = useState(false);
+
+  return (
+    <div className="min-h-dvh bg-[var(--color-bg)] font-[family-name:var(--font-body)] text-[var(--color-text)]">
+      <div
+        className="mx-auto w-full max-w-[390px] px-4 pt-6"
+        style={{ paddingBottom: 'max(5rem, env(safe-area-inset-bottom, 20px))' }}
+      >
+        <Link
+          href="/demo"
+          className="mb-6 inline-block text-xs text-[var(--color-text-muted)] transition-opacity duration-200 ease-[cubic-bezier(0.25,1,0.5,1)] hover:opacity-80"
+        >
+          ← back
+        </Link>
+
+        <header className="mb-8 space-y-2">
+          <h1 className="font-[family-name:var(--font-display)] text-2xl font-bold leading-tight text-[var(--color-text)]">
+            Nostr Identity
+          </h1>
+          <p className="max-w-[75ch] text-sm leading-[1.65] text-[var(--color-text-muted)]">
+            Connect with NIP-07 and sign events with your Nostr key. Inside Fedi,{' '}
+            <code className="font-mono text-xs">window.nostr</code> is injected automatically. Your
+            private key never leaves the app.
+          </p>
+        </header>
+
+        <div className="space-y-8">
+          <section className="space-y-4">
+            <div className="max-w-[75ch] space-y-1.5">
+              <h2 className="font-[family-name:var(--font-display)] text-xl font-semibold leading-tight tracking-tight text-[var(--color-text)]">
+                Identity badge
+              </h2>
+              <p className="text-sm leading-[1.65] text-[var(--color-text-muted)]">
+                Shows your connected pubkey as a colored avatar and truncated npub. The color is
+                derived deterministically from your key. The same pubkey always gets the same color.
+              </p>
+            </div>
+            <IdentityBadge />
+          </section>
+
+          <section className="space-y-4">
+            <div className="max-w-[75ch] space-y-1.5">
+              <h2 className="font-[family-name:var(--font-display)] text-xl font-semibold leading-tight tracking-tight text-[var(--color-text)]">
+                Login flow
+              </h2>
+              <p className="text-sm leading-[1.65] text-[var(--color-text-muted)]">
+                Drop-in auth component for any page. Calls{' '}
+                <code className="font-mono text-xs">getPublicKey()</code>. No username, no password,
+                no account signup. Your pubkey <em>is</em> your account.
+              </p>
+            </div>
+            <NostrLogin />
+          </section>
+
+          <section className="space-y-4">
+            <div className="max-w-[75ch] space-y-1.5">
+              <h2 className="font-[family-name:var(--font-display)] text-xl font-semibold leading-tight tracking-tight text-[var(--color-text)]">
+                Signed message
+              </h2>
+              <p className="text-sm leading-[1.65] text-[var(--color-text-muted)]">
+                Signs a kind-1 text note via{' '}
+                <code className="font-mono text-xs">signEvent()</code>. The returned JSON includes a
+                Schnorr signature anyone can verify.
+              </p>
+            </div>
+            <SignedMessage />
+          </section>
+
+          <section className="space-y-3">
+            <button
+              type="button"
+              onClick={() => setHowItWorksOpen((open) => !open)}
+              className="flex w-full items-center justify-between rounded-lg px-4 py-3 text-left text-sm font-semibold transition-opacity duration-200 ease-[cubic-bezier(0.25,1,0.5,1)] hover:opacity-80"
+              style={{
+                background: 'var(--color-surface-1)',
+                border: '1px solid var(--color-border)',
+                color: 'var(--color-text)',
+                borderRadius: 'var(--radius-lg)',
+              }}
+              aria-expanded={howItWorksOpen}
+              aria-controls="nostr-how-it-works"
+            >
+              How Nostr identity works
+              <span aria-hidden>{howItWorksOpen ? '−' : '+'}</span>
+            </button>
+
+            {howItWorksOpen && (
+              <div
+                id="nostr-how-it-works"
+                className="space-y-3 rounded-lg px-4 py-3 text-sm leading-[1.65]"
+                style={{
+                  background: 'var(--color-surface-1)',
+                  border: '1px solid var(--color-border)',
+                  color: 'var(--color-text-muted)',
+                  borderRadius: 'var(--radius-lg)',
+                }}
+              >
+                <p>
+                  <strong className="text-[var(--color-text)]">Nostr</strong> is a decentralized
+                  protocol where identity is a cryptographic keypair. Your public key (shown as{' '}
+                  <code className="font-mono text-xs">npub1…</code>) is a stable, unique identifier.
+                </p>
+                <p>
+                  Fedi injects a NIP-07 provider at{' '}
+                  <code className="font-mono text-xs">window.nostr</code> before your page loads. The
+                  mini app can read your pubkey and request signatures, but never sees your private
+                  key.
+                </p>
+                <p>
+                  <code className="font-mono text-xs">getPublicKey()</code> is safe for login flows.
+                  It only reads your identity. To prove you control a key, call{' '}
+                  <code className="font-mono text-xs">signEvent()</code> and verify the signature
+                  server-side (NIP-98 HTTP auth uses kind 27235 for this).
+                </p>
+                <p>
+                  Outside Fedi, <code className="font-mono text-xs">window.nostr</code> is undefined.
+                  In development, this project uses a mock provider with a well-known test keypair so
+                  you can build and test locally.
+                </p>
+              </div>
+            )}
+          </section>
+        </div>
+      </div>
+    </div>
+  );
+}

package/dist/templates/modules/nostr-identity/components/nostr/IdentityBadge.tsx

@@ -0,0 +1,109 @@
+'use client';
+
+import { useState } from 'react';
+import { useIdentity } from '../../lib/nostr';
+import { pubkeyToHsl, pubkeyToNpub, truncateNpub } from '../../lib/nostr-utils';
+
+export function IdentityBadge() {
+  const { pubkey, npub, displayNpub, getPublicKey, isConnecting } = useIdentity();
+  const [localPubkey, setLocalPubkey] = useState<string | null>(null);
+  const [isConnectingLocal, setIsConnectingLocal] = useState(false);
+  const [copied, setCopied] = useState(false);
+
+  const activePubkey = pubkey ?? localPubkey;
+  const activeNpub = npub ?? (localPubkey ? pubkeyToNpub(localPubkey) : null);
+  const activeDisplayNpub = displayNpub ?? (activeNpub ? truncateNpub(activeNpub) : null);
+
+  async function handleConnect() {
+    setIsConnectingLocal(true);
+    try {
+      const pk = await getPublicKey();
+      if (pk) setLocalPubkey(pk);
+    } finally {
+      setIsConnectingLocal(false);
+    }
+  }
+
+  async function handleCopyNpub() {
+    if (!activeNpub) return;
+    await navigator.clipboard.writeText(activeNpub);
+    setCopied(true);
+    window.setTimeout(() => setCopied(false), 2000);
+  }
+
+  if (!activePubkey) {
+    return (
+      <button
+        type="button"
+        onClick={handleConnect}
+        disabled={isConnecting || isConnectingLocal}
+        className="inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-semibold transition-opacity duration-200 ease-[cubic-bezier(0.25,1,0.5,1)] hover:opacity-80 active:opacity-70 disabled:cursor-not-allowed disabled:opacity-40"
+        style={{
+          background: 'var(--color-accent)',
+          color: 'var(--color-primary-foreground)',
+          borderRadius: 'var(--radius-md)',
+        }}
+        aria-label="Connect Nostr identity"
+      >
+        {isConnecting || isConnectingLocal ? 'Connecting…' : 'Connect'}
+      </button>
+    );
+  }
+
+  const { h, s, l } = pubkeyToHsl(activePubkey);
+
+  return (
+    <div
+      className="inline-flex items-center gap-3 rounded-xl px-3 py-2"
+      style={{
+        background: 'var(--color-surface-1)',
+        border: '1px solid var(--color-border)',
+        borderRadius: 'var(--radius-lg)',
+      }}
+      aria-label={`Connected as ${activeDisplayNpub}`}
+    >
+      <span
+        className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-sm font-bold select-none"
+        style={{
+          background: `hsl(${h}, ${s}%, ${l}%)`,
+          color: 'var(--color-primary-foreground)',
+        }}
+        aria-hidden
+      >
+        {activePubkey.slice(0, 1).toUpperCase()}
+      </span>
+
+      <div className="min-w-0 flex flex-col gap-0.5">
+        <div className="flex items-center gap-2">
+          <span className="truncate font-mono text-sm text-[var(--color-text)]">
+            {activeDisplayNpub}
+          </span>
+          <span
+            className="shrink-0 rounded px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide"
+            style={{
+              background: 'var(--color-accent-dim)',
+              color: 'var(--color-accent)',
+            }}
+          >
+            Verified
+          </span>
+        </div>
+      </div>
+
+      <button
+        type="button"
+        onClick={handleCopyNpub}
+        className="shrink-0 rounded-lg px-2.5 py-1.5 text-xs font-medium transition-opacity duration-200 ease-[cubic-bezier(0.25,1,0.5,1)] hover:opacity-80"
+        style={{
+          background: 'var(--color-surface-2, var(--color-bg))',
+          border: '1px solid var(--color-border)',
+          color: 'var(--color-text-muted)',
+          borderRadius: 'var(--radius-md)',
+        }}
+        aria-label={copied ? 'npub copied' : 'Copy npub to clipboard'}
+      >
+        {copied ? 'Copied' : 'Copy npub'}
+      </button>
+    </div>
+  );
+}

package/dist/templates/modules/nostr-identity/components/nostr/NostrLogin.tsx

@@ -0,0 +1,107 @@
+'use client';
+
+import { useState } from 'react';
+import { useIdentity } from '../../lib/nostr';
+import { pubkeyToHsl, pubkeyToNpub, truncateNpub } from '../../lib/nostr-utils';
+
+interface INostrLoginProps {
+  /** Called after a successful login with the user's pubkey and npub. */
+  onLogin?: (pubkey: string, npub: string) => void;
+  className?: string;
+}
+
+/**
+ * Drop-in Nostr login component. Calls `getPublicKey()` on user action and shows
+ * the connected identity on success. No passwords, no account creation.
+ */
+export function NostrLogin({ onLogin, className }: INostrLoginProps) {
+  const { pubkey, npub, getPublicKey } = useIdentity();
+  const [localPubkey, setLocalPubkey] = useState<string | null>(null);
+  const [isLoggingIn, setIsLoggingIn] = useState(false);
+  const [loginError, setLoginError] = useState<string | null>(null);
+
+  const activePubkey = pubkey ?? localPubkey;
+  const activeNpub = npub ?? (localPubkey ? pubkeyToNpub(localPubkey) : null);
+
+  async function handleLogin() {
+    setLoginError(null);
+    setIsLoggingIn(true);
+    try {
+      const pk = await getPublicKey();
+      if (!pk) {
+        setLoginError('Nostr provider not available. Open this app inside Fedi.');
+        return;
+      }
+      setLocalPubkey(pk);
+      const encodedNpub = pubkeyToNpub(pk);
+      onLogin?.(pk, encodedNpub);
+    } catch (err) {
+      setLoginError(err instanceof Error ? err.message : 'Login failed');
+    } finally {
+      setIsLoggingIn(false);
+    }
+  }
+
+  if (activePubkey && activeNpub) {
+    const { h, s, l } = pubkeyToHsl(activePubkey);
+
+    return (
+      <div
+        className={`rounded-xl px-4 py-4 ${className ?? ''}`}
+        style={{
+          background: 'var(--color-accent-dim)',
+          border: '1px solid var(--color-border)',
+          borderRadius: 'var(--radius-lg)',
+        }}
+        role="status"
+        aria-label="Logged in with Nostr identity"
+      >
+        <p className="mb-3 text-sm font-semibold text-[var(--color-accent)]">Logged in</p>
+        <div className="flex items-center gap-3">
+          <span
+            className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full text-sm font-bold"
+            style={{
+              background: `hsl(${h}, ${s}%, ${l}%)`,
+              color: 'var(--color-primary-foreground)',
+            }}
+            aria-hidden
+          >
+            {activePubkey.slice(0, 1).toUpperCase()}
+          </span>
+          <div className="min-w-0">
+            <p className="truncate font-mono text-sm text-[var(--color-text)]">
+              {truncateNpub(activeNpub)}
+            </p>
+            <p className="text-xs text-[var(--color-text-muted)]">
+              Your Fedi Nostr key, stable across every mini app.
+            </p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`flex flex-col gap-2 ${className ?? ''}`}>
+      <button
+        type="button"
+        onClick={handleLogin}
+        disabled={isLoggingIn}
+        className="w-full rounded-lg px-4 py-3 text-sm font-semibold transition-opacity duration-200 ease-[cubic-bezier(0.25,1,0.5,1)] hover:opacity-80 active:opacity-70 disabled:cursor-not-allowed disabled:opacity-40"
+        style={{
+          background: 'var(--color-accent)',
+          color: 'var(--color-primary-foreground)',
+          borderRadius: 'var(--radius-md)',
+        }}
+        aria-label="Login with Fedi Nostr identity"
+      >
+        {isLoggingIn ? 'Connecting…' : 'Login with Fedi'}
+      </button>
+      {loginError && (
+        <p className="text-xs text-[var(--color-error,#ef4444)]" role="alert">
+          {loginError}
+        </p>
+      )}
+    </div>
+  );
+}

package/dist/templates/modules/nostr-identity/components/nostr/SignedMessage.tsx

@@ -0,0 +1,103 @@
+'use client';
+
+import { useState } from 'react';
+import { useIdentityFlow } from '../../hooks/useIdentityFlow';
+
+interface ISignedMessageProps {
+  defaultMessage?: string;
+}
+
+export function SignedMessage({ defaultMessage = 'Hello from create-fedi-app!' }: ISignedMessageProps) {
+  const { isConnected, isConnecting, signTextNote, lastSignedEvent, signError } = useIdentityFlow();
+  const [message, setMessage] = useState(defaultMessage);
+  const [isSigning, setIsSigning] = useState(false);
+
+  async function handleSign() {
+    if (!message.trim()) return;
+    setIsSigning(true);
+    try {
+      await signTextNote(message.trim());
+    } finally {
+      setIsSigning(false);
+    }
+  }
+
+  if (!isConnected) {
+    return (
+      <p className="text-sm text-[var(--color-text-subtle)]">
+        Connect your identity above to sign a message.
+      </p>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-4">
+      <p className="max-w-[75ch] text-sm leading-[1.65] text-[var(--color-text-muted)]">
+        Signing creates a cryptographic proof that you hold the private key for your pubkey, without
+        ever revealing the key itself. Anyone can verify the signature against your public identity.
+      </p>
+
+      <label className="flex flex-col gap-1.5">
+        <span className="text-xs font-semibold uppercase tracking-wider text-[var(--color-text-subtle)]">
+          Message to sign
+        </span>
+        <textarea
+          value={message}
+          onChange={(e) => setMessage(e.target.value)}
+          rows={3}
+          className="w-full resize-none rounded-lg px-3 py-2 text-sm"
+          style={{
+            background: 'var(--color-surface-1)',
+            border: '1px solid var(--color-border)',
+            color: 'var(--color-text)',
+            borderRadius: 'var(--radius-md)',
+          }}
+        />
+      </label>
+
+      <button
+        type="button"
+        onClick={handleSign}
+        disabled={!message.trim() || isSigning || isConnecting}
+        className="self-start rounded-lg px-4 py-2 text-sm font-semibold transition-opacity duration-200 ease-[cubic-bezier(0.25,1,0.5,1)] hover:opacity-80 active:opacity-70 disabled:cursor-not-allowed disabled:opacity-40"
+        style={{
+          background: 'var(--color-accent)',
+          color: 'var(--color-primary-foreground)',
+          borderRadius: 'var(--radius-md)',
+        }}
+        aria-label="Sign message with Nostr key"
+      >
+        {isSigning ? 'Signing…' : 'Sign'}
+      </button>
+
+      {signError && (
+        <p className="text-xs text-[var(--color-error,#ef4444)]" role="alert">
+          {signError.message}
+        </p>
+      )}
+
+      {lastSignedEvent && (
+        <div className="space-y-2">
+          <p className="text-xs font-semibold uppercase tracking-wider text-[var(--color-text-subtle)]">
+            Signed Nostr event
+          </p>
+          <pre
+            className="overflow-auto rounded-lg p-3 font-mono text-xs leading-relaxed"
+            style={{
+              background: 'var(--color-surface-1)',
+              border: '1px solid var(--color-border)',
+              color: 'var(--color-text-muted)',
+              borderRadius: 'var(--radius-md)',
+            }}
+          >
+            {JSON.stringify(lastSignedEvent, null, 2)}
+          </pre>
+          <p className="text-xs leading-[1.65] text-[var(--color-text-subtle)]">
+            The <code className="font-mono">sig</code> field is a Schnorr signature over the event
+            hash. The <code className="font-mono">pubkey</code> identifies who signed it.
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}