create-fedi-app 0.1.0

package/dist/templates/modules/lnurl/lib/lnurl-store.ts

@@ -0,0 +1,112 @@
+import { randomBytes } from 'crypto';
+
+export type TLnurlAuthSession = {
+  k1: string;
+  createdAt: number;
+  expiresAt: number;
+  pubkey: string | null;
+  authenticatedAt: number | null;
+};
+
+export type TLnurlWithdrawSession = {
+  k1: string;
+  createdAt: number;
+  expiresAt: number;
+  withdrawnMsats: number | null;
+  paymentRequest: string | null;
+};
+
+const authSessions = new Map<string, TLnurlAuthSession>();
+const withdrawSessions = new Map<string, TLnurlWithdrawSession>();
+
+const AUTH_TTL_MS = 10 * 60 * 1000;
+const WITHDRAW_TTL_MS = 10 * 60 * 1000;
+
+function generateK1(): string {
+  return randomBytes(32).toString('hex');
+}
+
+function buildMockInvoice(amountSats: number, id: string): string {
+  const amountPart = amountSats.toString(16).padStart(6, '0');
+  return `lnbc${amountPart}n1p${id.slice(0, 40)}`;
+}
+
+export function createAuthSession(): TLnurlAuthSession {
+  const k1 = generateK1();
+  const now = Date.now();
+  const session: TLnurlAuthSession = {
+    k1,
+    createdAt: now,
+    expiresAt: now + AUTH_TTL_MS,
+    pubkey: null,
+    authenticatedAt: null,
+  };
+  authSessions.set(k1, session);
+  return session;
+}
+
+export function getAuthSession(k1: string): TLnurlAuthSession | null {
+  const session = authSessions.get(k1);
+  if (!session) return null;
+  if (Date.now() > session.expiresAt) {
+    authSessions.delete(k1);
+    return null;
+  }
+  return session;
+}
+
+export function completeAuthSession(k1: string, pubkey: string): TLnurlAuthSession | null {
+  const session = getAuthSession(k1);
+  if (!session) return null;
+  session.pubkey = pubkey;
+  session.authenticatedAt = Date.now();
+  authSessions.set(k1, session);
+  return session;
+}
+
+export function createWithdrawSession(): TLnurlWithdrawSession {
+  const k1 = generateK1();
+  const now = Date.now();
+  const session: TLnurlWithdrawSession = {
+    k1,
+    createdAt: now,
+    expiresAt: now + WITHDRAW_TTL_MS,
+    withdrawnMsats: null,
+    paymentRequest: null,
+  };
+  withdrawSessions.set(k1, session);
+  return session;
+}
+
+export function getWithdrawSession(k1: string): TLnurlWithdrawSession | null {
+  const session = withdrawSessions.get(k1);
+  if (!session) return null;
+  if (Date.now() > session.expiresAt) {
+    withdrawSessions.delete(k1);
+    return null;
+  }
+  return session;
+}
+
+export function completeWithdrawSession(
+  k1: string,
+  paymentRequest: string,
+  amountMsats: number,
+): TLnurlWithdrawSession | null {
+  const session = getWithdrawSession(k1);
+  if (!session) return null;
+  session.paymentRequest = paymentRequest;
+  session.withdrawnMsats = amountMsats;
+  withdrawSessions.set(k1, session);
+  return session;
+}
+
+/**
+ * Creates a mock BOLT11 invoice for LNURL-pay callbacks.
+ * Replace with your Lightning node / LND / CLN integration in production.
+ */
+export function createLnurlPayInvoice(amountMsats: number, username: string): string {
+  const amountSats = Math.max(1, Math.floor(amountMsats / 1000));
+  const id = randomBytes(8).toString('hex');
+  return buildMockInvoice(amountSats, `${username}-${id}`);
+}

package/dist/templates/modules/lnurl/lib/lnurl-utils.ts

@@ -0,0 +1,56 @@
+import { bech32 } from '@scure/base';
+
+/** LNURL metadata item: [mime type, payload]. */
+export type TLnurlMetadataItem = [string, string];
+
+/**
+ * Encodes a URL as an uppercase bech32 LNURL string (BIP-173, HRP `lnurl`).
+ */
+export function encodeLnurl(url: string): string {
+  const bytes = new TextEncoder().encode(url);
+  return bech32.encodeFromBytes('lnurl', bytes).toUpperCase();
+}
+
+/**
+ * Decodes a bech32 LNURL string back to the underlying HTTPS URL.
+ */
+export function decodeLnurl(lnurl: string): string {
+  const { words } = bech32.decode(lnurl.toLowerCase());
+  const bytes = bech32.fromWords(words);
+  return new TextDecoder().decode(bytes);
+}
+
+/**
+ * Builds the comma-separated metadata string required by LUD-06.
+ * @see https://github.com/lnurl/luds/blob/luds/06.md
+ */
+export function buildLnurlMetadata(items: TLnurlMetadataItem[]): string {
+  return JSON.stringify(items);
+}
+
+/**
+ * Resolves the public base URL for LNURL callbacks.
+ * Prefer `LNURL_SERVER_URL` in production behind proxies.
+ */
+export function getLnurlServerBaseUrl(request?: Request): string {
+  const fromEnv = process.env.LNURL_SERVER_URL?.trim();
+  if (fromEnv) return fromEnv.replace(/\/$/, '');
+
+  if (request) {
+    const host = request.headers.get('x-forwarded-host') ?? request.headers.get('host');
+    const proto = request.headers.get('x-forwarded-proto') ?? 'https';
+    if (host) return `${proto}://${host}`;
+  }
+
+  return 'http://localhost:3000';
+}
+
+/** Converts millisats to sats for display. */
+export function msatsToSats(msats: number): number {
+  return Math.floor(msats / 1000);
+}
+
+/** Converts sats to millisats for LNURL amounts. */
+export function satsToMsats(sats: number): number {
+  return sats * 1000;
+}

package/dist/templates/modules/lnurl/module.json

@@ -0,0 +1,27 @@
+{
+  "name": "lnurl",
+  "description": "LNURL-pay, LNURL-auth, and LNURL-withdraw flows",
+  "dependencies": ["qrcode.react"],
+  "devDependencies": [],
+  "files": [
+    { "src": "lib/lnurl-utils.ts", "dest": "lib/lnurl-utils.ts", "merge": "add" },
+    { "src": "lib/lnurl-store.ts", "dest": "lib/lnurl-store.ts", "merge": "add" },
+    { "src": "lib/lnurl-auth-verify.ts", "dest": "lib/lnurl-auth-verify.ts", "merge": "add" },
+    { "src": "components/lnurl/LnurlQR.tsx", "dest": "components/lnurl/LnurlQR.tsx", "merge": "add" },
+    { "src": "components/lnurl/LnurlPay.tsx", "dest": "components/lnurl/LnurlPay.tsx", "merge": "add" },
+    { "src": "components/lnurl/LnurlAuth.tsx", "dest": "components/lnurl/LnurlAuth.tsx", "merge": "add" },
+    { "src": "components/lnurl/LnurlWithdraw.tsx", "dest": "components/lnurl/LnurlWithdraw.tsx", "merge": "add" },
+    { "src": "app/api/lnurlp/[username]/route.ts", "dest": "app/api/lnurlp/[username]/route.ts", "merge": "add" },
+    { "src": "app/api/lnurlauth/route.ts", "dest": "app/api/lnurlauth/route.ts", "merge": "add" },
+    { "src": "app/api/lnurlw/route.ts", "dest": "app/api/lnurlw/route.ts", "merge": "add" },
+    { "src": "app/demo/lnurl/page.tsx", "dest": "app/demo/lnurl/page.tsx", "merge": "add" }
+  ],
+  "envVars": [
+    {
+      "key": "LNURL_SERVER_URL",
+      "description": "Public base URL for LNURL callbacks (required behind reverse proxies)",
+      "example": "https://your-app.example.com",
+      "required": false
+    }
+  ]
+}

package/dist/templates/modules/multispend-demo/app/demo/multispend/MultispendDemoClient.tsx

@@ -0,0 +1,109 @@
+'use client';
+
+import Link from 'next/link';
+import { useState } from 'react';
+import { MultispendDemo } from '../../../components/multispend/MultispendDemo';
+
+export function MultispendDemoClient() {
+  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)]">
+            Multispend
+          </h1>
+          <p className="max-w-[75ch] text-sm leading-[1.65] text-[var(--color-text-muted)]">
+            Fedi&apos;s threshold multi-signature spending for shared Stable Balance funds. No single
+            person controls the wallet. A configured number of voters must approve each withdrawal.
+          </p>
+        </header>
+
+        <div className="space-y-8">
+          <section className="space-y-3 rounded-xl px-4 py-3 text-sm leading-[1.65]"
+            style={{
+              background: 'var(--color-surface-1)',
+              border: '1px solid var(--color-border)',
+              borderRadius: 'var(--radius-lg)',
+              color: 'var(--color-text-muted)',
+            }}
+          >
+            <p>
+              <strong className="text-[var(--color-text)]">Why it matters:</strong> Groups (DAOs,
+              communities, teams) need shared treasuries without trusting one admin. Multispend
+              enforces collective approval before funds move.
+            </p>
+            <p>
+              <strong className="text-[var(--color-text)]">This demo is mocked.</strong> The real
+              Multispend API is not yet exposed to mini apps. Votes here use{' '}
+              <code className="font-mono text-xs">signEvent()</code> to show how Nostr signatures
+              could attest to approvals; execution is simulated locally.
+            </p>
+          </section>
+
+          <MultispendDemo />
+
+          <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="multispend-how-it-works"
+            >
+              How Multispend works in Fedi
+              <span aria-hidden>{howItWorksOpen ? '−' : '+'}</span>
+            </button>
+
+            {howItWorksOpen && (
+              <div
+                id="multispend-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>
+                  A group creates a Multispend wallet with up to 21 assigned{' '}
+                  <strong className="text-[var(--color-text)]">voters</strong> and an{' '}
+                  <strong className="text-[var(--color-text)]">approval threshold</strong> (e.g.
+                  2-of-3). Voters and threshold are fixed at creation.
+                </p>
+                <p>
+                  Members deposit into the shared fund. To spend, a member submits a withdrawal
+                  request. Voters approve or reject. Once the threshold is met, Fedi processes the
+                  withdrawal automatically. Funds move to the requester&apos;s personal wallet.
+                </p>
+                <p>
+                  Mini apps cannot yet create Multispend groups or submit real withdrawal requests.
+                  This module demonstrates the approval UX pattern and Nostr-signed votes so you
+                  can design flows before the API lands.
+                </p>
+              </div>
+            )}
+          </section>
+        </div>
+      </div>
+    </div>
+  );
+}

package/dist/templates/modules/multispend-demo/app/demo/multispend/page.tsx

@@ -0,0 +1,23 @@
+import type { Metadata } from 'next';
+import { MultispendDemoClient } from './MultispendDemoClient';
+
+export const metadata: Metadata = {
+  title: 'Multispend',
+  description:
+    'Mock Multispend workflow for Fedi mini apps. Create spending proposals, collect Nostr-signed approvals, and simulate threshold execution for shared wallets.',
+  openGraph: {
+    title: 'Multispend',
+    description:
+      'Mock Multispend workflow for Fedi mini apps. Create spending proposals, collect Nostr-signed approvals, and simulate threshold execution for shared wallets.',
+  },
+  twitter: {
+    card: 'summary',
+    title: 'Multispend',
+    description:
+      'Mock Multispend workflow for Fedi mini apps. Create spending proposals, collect Nostr-signed approvals, and simulate threshold execution for shared wallets.',
+  },
+};
+
+export default function MultispendDemoPage() {
+  return <MultispendDemoClient />;
+}

package/dist/templates/modules/multispend-demo/components/multispend/ApprovalVote.tsx

@@ -0,0 +1,122 @@
+'use client';
+
+import { useState } from 'react';
+import { useIdentity } from '../../lib/nostr';
+import type { NostrEvent } from '../../lib/nostr';
+import { MULTISPEND_VOTE_KIND, type TVoteDecision } from '../../lib/multispend-types';
+
+interface IApprovalVoteProps {
+  proposalId: string;
+  voterPubkey: string;
+  currentPubkey: string | null;
+  disabled?: boolean;
+  onVote: (vote: TVoteDecision, signedEvent: NostrEvent) => void;
+}
+
+export function ApprovalVote({
+  proposalId,
+  voterPubkey,
+  currentPubkey,
+  disabled = false,
+  onVote,
+}: IApprovalVoteProps) {
+  const { signEvent, isConnecting } = useIdentity();
+  const [isVoting, setIsVoting] = useState(false);
+  const [voteError, setVoteError] = useState<Error | null>(null);
+  const [lastVote, setLastVote] = useState<TVoteDecision | null>(null);
+
+  const isCurrentVoter = currentPubkey === voterPubkey;
+
+  async function castVote(vote: TVoteDecision) {
+    if (!currentPubkey || !isCurrentVoter) return;
+
+    setIsVoting(true);
+    setVoteError(null);
+
+    try {
+      const signedEvent = await signEvent({
+        kind: MULTISPEND_VOTE_KIND,
+        content: JSON.stringify({ proposalId, vote }),
+        tags: [
+          ['d', proposalId],
+          ['vote', vote],
+        ],
+        created_at: Math.floor(Date.now() / 1000),
+      });
+
+      if (!signedEvent) {
+        setVoteError(new Error('Could not sign vote. Connect your Nostr identity first.'));
+        return;
+      }
+
+      setLastVote(vote);
+      onVote(vote, signedEvent);
+    } catch (err) {
+      setVoteError(err instanceof Error ? err : new Error('Vote signing failed'));
+    } finally {
+      setIsVoting(false);
+    }
+  }
+
+  if (!isCurrentVoter) {
+    return null;
+  }
+
+  if (lastVote) {
+    return (
+      <p
+        className="text-xs font-medium"
+        style={{ color: lastVote === 'approve' ? 'var(--color-accent)' : 'var(--color-error, #ef4444)' }}
+        role="status"
+      >
+        You {lastVote === 'approve' ? 'approved' : 'rejected'} this proposal via Nostr signature.
+      </p>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="flex flex-wrap gap-2">
+        <button
+          type="button"
+          onClick={() => castVote('approve')}
+          disabled={disabled || isVoting || isConnecting}
+          className="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="Approve spending proposal"
+        >
+          {isVoting ? 'Signing…' : 'Approve'}
+        </button>
+        <button
+          type="button"
+          onClick={() => castVote('reject')}
+          disabled={disabled || isVoting || isConnecting}
+          className="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-surface-1)',
+            border: '1px solid var(--color-border)',
+            color: 'var(--color-text)',
+            borderRadius: 'var(--radius-md)',
+          }}
+          aria-label="Reject spending proposal"
+        >
+          Reject
+        </button>
+      </div>
+          <p className="text-xs leading-[1.65] text-[var(--color-text-subtle)]">
+            Votes are signed with{' '}
+            <code className="font-mono text-[11px]">signEvent()</code> (kind {MULTISPEND_VOTE_KIND}).
+            Mock co-voters auto-approve after your signature so you can complete the demo flow.
+          </p>
+      {voteError && (
+        <p className="text-xs text-[var(--color-error,#ef4444)]" role="alert">
+          {voteError.message}
+        </p>
+      )}
+    </div>
+  );
+}

package/dist/templates/modules/multispend-demo/components/multispend/MultispendDemo.tsx

@@ -0,0 +1,220 @@
+'use client';
+
+import { useState } from 'react';
+import { useIdentity } from '../../lib/nostr';
+import { IdentityBadge } from '../nostr/IdentityBadge';
+import { useMultispendDemo } from '../../hooks/useMultispendDemo';
+import { ProposalList } from './ProposalList';
+
+export function MultispendDemo() {
+  const { pubkey, getPublicKey, isConnecting } = useIdentity();
+  const [localPubkey, setLocalPubkey] = useState<string | null>(null);
+  const [amountSats, setAmountSats] = useState('25000');
+  const [description, setDescription] = useState('');
+  const [createError, setCreateError] = useState<string | null>(null);
+
+  const {
+    proposals,
+    openProposals,
+    lastSignedEvent,
+    executingId,
+    createProposal,
+    recordVote,
+    simulateExecution,
+  } = useMultispendDemo();
+
+  const activePubkey = pubkey ?? localPubkey;
+
+  async function ensureConnected(): Promise<string | null> {
+    if (activePubkey) return activePubkey;
+    const pk = await getPublicKey();
+    if (pk) setLocalPubkey(pk);
+    return pk;
+  }
+
+  async function handleCreateProposal(event: React.FormEvent) {
+    event.preventDefault();
+    setCreateError(null);
+
+    const proposerPubkey = await ensureConnected();
+    if (!proposerPubkey) {
+      setCreateError('Connect your Nostr identity to create a proposal.');
+      return;
+    }
+
+    const parsedAmount = Number.parseInt(amountSats, 10);
+    if (!Number.isFinite(parsedAmount) || parsedAmount <= 0) {
+      setCreateError('Enter a valid amount in sats.');
+      return;
+    }
+
+    if (!description.trim()) {
+      setCreateError('Add a description for the spending request.');
+      return;
+    }
+
+    createProposal({
+      amountSats: parsedAmount,
+      description: description.trim(),
+      proposerPubkey,
+    });
+
+    setDescription('');
+    setAmountSats('25000');
+  }
+
+  return (
+    <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)]">
+            Your identity
+          </h2>
+          <p className="text-sm leading-[1.65] text-[var(--color-text-muted)]">
+            Connect with Nostr to vote on proposals. Your pubkey becomes one of the required signers
+            when you create a request.
+          </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)]">
+            Create proposal
+          </h2>
+          <p className="text-sm leading-[1.65] text-[var(--color-text-muted)]">
+            Mock a withdrawal request from a shared Multispend wallet. Other voters are simulated.
+            Only your vote uses a real Nostr signature.
+          </p>
+        </div>
+
+        <form
+          onSubmit={handleCreateProposal}
+          className="space-y-4 rounded-xl p-4"
+          style={{
+            background: 'var(--color-surface-1)',
+            border: '1px solid var(--color-border)',
+            borderRadius: 'var(--radius-lg)',
+          }}
+        >
+          <label className="flex flex-col gap-1.5">
+            <span className="text-xs font-semibold uppercase tracking-wider text-[var(--color-text-subtle)]">
+              Amount (sats)
+            </span>
+            <input
+              type="number"
+              min={1}
+              step={1}
+              value={amountSats}
+              onChange={(e) => setAmountSats(e.target.value)}
+              className="w-full rounded-lg px-3 py-2 text-sm"
+              style={{
+                background: 'var(--color-surface-2, var(--color-bg))',
+                border: '1px solid var(--color-border)',
+                color: 'var(--color-text)',
+                borderRadius: 'var(--radius-md)',
+              }}
+            />
+          </label>
+
+          <label className="flex flex-col gap-1.5">
+            <span className="text-xs font-semibold uppercase tracking-wider text-[var(--color-text-subtle)]">
+              Description
+            </span>
+            <textarea
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              rows={3}
+              placeholder="What is this withdrawal for?"
+              className="w-full resize-none rounded-lg px-3 py-2 text-sm"
+              style={{
+                background: 'var(--color-surface-2, var(--color-bg))',
+                border: '1px solid var(--color-border)',
+                color: 'var(--color-text)',
+                borderRadius: 'var(--radius-md)',
+              }}
+            />
+          </label>
+
+          <p className="text-xs leading-[1.65] text-[var(--color-text-subtle)]">
+            New proposals use a 2-of-3 threshold with you plus two mock voters (Alice and Bob).
+          </p>
+
+          {createError && (
+            <p className="text-xs text-[var(--color-error,#ef4444)]" role="alert">
+              {createError}
+            </p>
+          )}
+
+          <button
+            type="submit"
+            disabled={isConnecting}
+            className="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)',
+            }}
+          >
+            Create proposal
+          </button>
+        </form>
+      </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)]">
+            Open proposals
+          </h2>
+          <p className="text-sm leading-[1.65] text-[var(--color-text-muted)]">
+            Approve or reject pending requests. When enough voters agree, simulate the withdrawal
+            execution.
+          </p>
+        </div>
+        <ProposalList
+          proposals={openProposals}
+          currentPubkey={activePubkey}
+          onVote={(proposalId, vote, signedEvent) =>
+            recordVote(proposalId, activePubkey!, vote, signedEvent)
+          }
+          onExecute={simulateExecution}
+          executingId={executingId}
+        />
+      </section>
+
+      {proposals.some((p) => p.status === 'executed') && (
+        <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)]">
+              Executed
+            </h2>
+          </div>
+          <ProposalList
+            proposals={proposals.filter((p) => p.status === 'executed')}
+            currentPubkey={activePubkey}
+          />
+        </section>
+      )}
+
+      {lastSignedEvent && (
+        <section className="space-y-2">
+          <p className="text-xs font-semibold uppercase tracking-wider text-[var(--color-text-subtle)]">
+            Last signed vote 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>
+        </section>
+      )}
+    </div>
+  );
+}