create-fedi-app 0.1.0

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

@@ -0,0 +1,213 @@
+'use client';
+
+import { formatSats } from '../../lib/fedi';
+import { pubkeyToHsl, pubkeyToNpub, truncateNpub } from '../../lib/nostr-utils';
+import type { NostrEvent } from '../../lib/nostr';
+import type { TMultispendProposal, TVoteDecision } from '../../lib/multispend-types';
+import { getApprovalCount, getMockVoterLabel } from '../../lib/multispend-utils';
+import { ApprovalVote } from './ApprovalVote';
+
+interface IMultispendProposalProps {
+  proposal: TMultispendProposal;
+  currentPubkey?: string | null;
+  onVote?: (vote: TVoteDecision, signedEvent: NostrEvent) => void;
+  onExecute?: () => void;
+  isExecuting?: boolean;
+}
+
+const STATUS_LABELS: Record<TMultispendProposal['status'], string> = {
+  open: 'Awaiting votes',
+  approved: 'Threshold met',
+  rejected: 'Rejected',
+  executed: 'Executed',
+};
+
+export function MultispendProposal({
+  proposal,
+  currentPubkey = null,
+  onVote,
+  onExecute,
+  isExecuting = false,
+}: IMultispendProposalProps) {
+  const approvalCount = getApprovalCount(proposal);
+  const progress = Math.min(100, (approvalCount / proposal.threshold) * 100);
+
+  return (
+    <article
+      className="space-y-4 rounded-xl p-4"
+      style={{
+        background: 'var(--color-surface-1)',
+        border: '1px solid var(--color-border)',
+        borderRadius: 'var(--radius-lg)',
+      }}
+      aria-label={`Spending proposal: ${proposal.description}`}
+    >
+      <header className="flex items-start justify-between gap-3">
+        <div className="min-w-0 space-y-1">
+          <p className="font-[family-name:var(--font-display)] text-lg font-semibold leading-tight text-[var(--color-text)]">
+            {formatSats(proposal.amountSats)}
+          </p>
+          <p className="text-sm leading-[1.65] text-[var(--color-text-muted)]">
+            {proposal.description}
+          </p>
+        </div>
+        <span
+          className="shrink-0 rounded px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide"
+          style={{
+            background:
+              proposal.status === 'executed'
+                ? 'var(--color-accent-dim)'
+                : proposal.status === 'rejected'
+                  ? 'color-mix(in srgb, var(--color-error, #ef4444) 15%, transparent)'
+                  : 'var(--color-surface-2, var(--color-bg))',
+            color:
+              proposal.status === 'executed'
+                ? 'var(--color-accent)'
+                : proposal.status === 'rejected'
+                  ? 'var(--color-error, #ef4444)'
+                  : 'var(--color-text-muted)',
+            border: '1px solid var(--color-border)',
+          }}
+        >
+          {STATUS_LABELS[proposal.status]}
+        </span>
+      </header>
+
+      <div className="space-y-2">
+        <div className="flex items-center justify-between text-xs">
+          <span className="font-semibold uppercase tracking-wider text-[var(--color-text-subtle)]">
+            Approvals
+          </span>
+          <span className="font-mono text-[var(--color-text-muted)]">
+            {approvalCount} / {proposal.threshold} required
+          </span>
+        </div>
+        <div
+          className="h-2 overflow-hidden rounded-full"
+          style={{ background: 'var(--color-surface-2, var(--color-bg))' }}
+          role="progressbar"
+          aria-valuenow={approvalCount}
+          aria-valuemin={0}
+          aria-valuemax={proposal.threshold}
+          aria-label={`${approvalCount} of ${proposal.threshold} approvals collected`}
+        >
+          <div
+            className="h-full rounded-full transition-[width] duration-300 ease-[cubic-bezier(0.25,1,0.5,1)]"
+            style={{
+              width: `${progress}%`,
+              background: 'var(--color-accent)',
+            }}
+          />
+        </div>
+      </div>
+
+      <div className="space-y-2">
+        <p className="text-xs font-semibold uppercase tracking-wider text-[var(--color-text-subtle)]">
+          Required signers
+        </p>
+        <ul className="space-y-2" aria-label="Required signers">
+          {proposal.requiredSigners.map((signerPubkey) => {
+            const approved = proposal.approvals.includes(signerPubkey);
+            const rejected = proposal.rejections.includes(signerPubkey);
+            const isYou = currentPubkey === signerPubkey;
+            const { h, s, l } = pubkeyToHsl(signerPubkey);
+            const label = isYou ? 'You' : getMockVoterLabel(signerPubkey);
+            const npub = truncateNpub(pubkeyToNpub(signerPubkey));
+
+            return (
+              <li
+                key={signerPubkey}
+                className="flex items-center gap-3 rounded-lg px-3 py-2"
+                style={{
+                  background: 'var(--color-surface-2, var(--color-bg))',
+                  border: '1px solid var(--color-border)',
+                  borderRadius: 'var(--radius-md)',
+                }}
+              >
+                <span
+                  className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-xs font-bold"
+                  style={{
+                    background: `hsl(${h}, ${s}%, ${l}%)`,
+                    color: 'var(--color-primary-foreground)',
+                  }}
+                  aria-hidden
+                >
+                  {label.slice(0, 1)}
+                </span>
+                <div className="min-w-0 flex-1">
+                  <p className="text-sm font-medium text-[var(--color-text)]">
+                    {label}
+                    {isYou && (
+                      <span className="ml-1.5 text-xs font-normal text-[var(--color-text-muted)]">
+                        (your key)
+                      </span>
+                    )}
+                  </p>
+                  <p className="truncate font-mono text-xs text-[var(--color-text-subtle)]">{npub}</p>
+                </div>
+                <span
+                  className="shrink-0 text-xs font-semibold"
+                  style={{
+                    color: approved
+                      ? 'var(--color-accent)'
+                      : rejected
+                        ? 'var(--color-error, #ef4444)'
+                        : 'var(--color-text-subtle)',
+                  }}
+                >
+                  {approved ? 'Approved' : rejected ? 'Rejected' : 'Pending'}
+                </span>
+              </li>
+            );
+          })}
+        </ul>
+      </div>
+
+      {proposal.status === 'open' &&
+        currentPubkey &&
+        proposal.requiredSigners.includes(currentPubkey) &&
+        !proposal.approvals.includes(currentPubkey) &&
+        !proposal.rejections.includes(currentPubkey) &&
+        onVote && (
+          <ApprovalVote
+            proposalId={proposal.id}
+            voterPubkey={currentPubkey}
+            currentPubkey={currentPubkey}
+            onVote={onVote}
+          />
+        )}
+
+      {proposal.status === 'approved' && onExecute && (
+        <button
+          type="button"
+          onClick={onExecute}
+          disabled={isExecuting}
+          className="w-full rounded-lg px-4 py-2.5 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-busy={isExecuting}
+        >
+          {isExecuting ? 'Executing withdrawal…' : 'Simulate execution'}
+        </button>
+      )}
+
+      {proposal.status === 'executed' && (
+        <p
+          className="rounded-lg px-3 py-2 text-xs leading-[1.65]"
+          style={{
+            background: 'var(--color-accent-dim)',
+            color: 'var(--color-accent)',
+            borderRadius: 'var(--radius-md)',
+          }}
+          role="status"
+        >
+          Withdrawal simulated. In Fedi, funds would move to the requester&apos;s wallet once the
+          threshold is met.
+        </p>
+      )}
+    </article>
+  );
+}

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

@@ -0,0 +1,49 @@
+'use client';
+
+import type { NostrEvent } from '../../lib/nostr';
+import type { TMultispendProposal, TVoteDecision } from '../../lib/multispend-types';
+import { MultispendProposal } from './MultispendProposal';
+
+interface IProposalListProps {
+  proposals: TMultispendProposal[];
+  currentPubkey?: string | null;
+  onVote?: (proposalId: string, vote: TVoteDecision, signedEvent: NostrEvent) => void;
+  onExecute?: (proposalId: string) => void;
+  executingId?: string | null;
+  emptyMessage?: string;
+}
+
+export function ProposalList({
+  proposals,
+  currentPubkey = null,
+  onVote,
+  onExecute,
+  executingId = null,
+  emptyMessage = 'No open proposals.',
+}: IProposalListProps) {
+  if (proposals.length === 0) {
+    return (
+      <p className="text-sm leading-[1.65] text-[var(--color-text-subtle)]">{emptyMessage}</p>
+    );
+  }
+
+  return (
+    <ul className="space-y-4" aria-label="Multispend proposals">
+      {proposals.map((proposal) => (
+        <li key={proposal.id}>
+          <MultispendProposal
+            proposal={proposal}
+            currentPubkey={currentPubkey}
+            onVote={
+              onVote
+                ? (vote, signedEvent) => onVote(proposal.id, vote, signedEvent)
+                : undefined
+            }
+            onExecute={onExecute ? () => onExecute(proposal.id) : undefined}
+            isExecuting={executingId === proposal.id}
+          />
+        </li>
+      ))}
+    </ul>
+  );
+}

package/dist/templates/modules/multispend-demo/hooks/useMultispendDemo.ts

@@ -0,0 +1,127 @@
+'use client';
+
+import { useCallback, useState } from 'react';
+import type { NostrEvent } from '../lib/nostr';
+import {
+  createProposalId,
+  getInitialProposals,
+  hasVoted,
+  isThresholdMet,
+  MOCK_VOTERS,
+} from '../lib/multispend-utils';
+import type { TMultispendProposal, TMultispendVote, TProposalStatus, TVoteDecision } from '../lib/multispend-types';
+
+export function useMultispendDemo() {
+  const [proposals, setProposals] = useState<TMultispendProposal[]>(() => getInitialProposals());
+  const [votes, setVotes] = useState<TMultispendVote[]>([]);
+  const [lastSignedEvent, setLastSignedEvent] = useState<NostrEvent | null>(null);
+  const [executingId, setExecutingId] = useState<string | null>(null);
+
+  const createProposal = useCallback(
+    (input: { amountSats: number; description: string; proposerPubkey: string }) => {
+      const signers = [
+        input.proposerPubkey,
+        ...MOCK_VOTERS.map((v) => v.pubkey).filter((pk) => pk !== input.proposerPubkey),
+      ].slice(0, 3);
+
+      const threshold = Math.min(2, signers.length);
+      const proposal: TMultispendProposal = {
+        id: createProposalId(),
+        amountSats: input.amountSats,
+        description: input.description.trim(),
+        requiredSigners: signers,
+        threshold,
+        approvals: [],
+        rejections: [],
+        status: 'open',
+        createdAt: Date.now(),
+        proposerPubkey: input.proposerPubkey,
+      };
+
+      setProposals((current) => [proposal, ...current]);
+      return proposal;
+    },
+    [],
+  );
+
+  const recordVote = useCallback(
+    (proposalId: string, voterPubkey: string, vote: TVoteDecision, signedEvent: NostrEvent) => {
+      setLastSignedEvent(signedEvent);
+      setVotes((current) => [
+        ...current.filter((v) => !(v.proposalId === proposalId && v.voterPubkey === voterPubkey)),
+        { proposalId, voterPubkey, vote, signedEvent },
+      ]);
+
+      setProposals((current) =>
+        current.map((proposal) => {
+          if (proposal.id !== proposalId || proposal.status !== 'open') return proposal;
+          if (hasVoted(proposal, voterPubkey)) return proposal;
+
+          let approvals =
+            vote === 'approve'
+              ? [...proposal.approvals, voterPubkey]
+              : proposal.approvals;
+          let rejections =
+            vote === 'reject'
+              ? [...proposal.rejections, voterPubkey]
+              : proposal.rejections;
+
+          // Demo: mock co-voters auto-approve after a real Nostr signature
+          if (vote === 'approve' && approvals.length < proposal.threshold) {
+            const mockCoSigner = proposal.requiredSigners.find(
+              (pk) =>
+                pk !== voterPubkey &&
+                MOCK_VOTERS.some((m) => m.pubkey === pk) &&
+                !approvals.includes(pk) &&
+                !rejections.includes(pk),
+            );
+            if (mockCoSigner) {
+              approvals = [...approvals, mockCoSigner];
+            }
+          }
+
+          const allVoted =
+            approvals.length + rejections.length >= proposal.requiredSigners.length;
+          const rejected =
+            rejections.length > proposal.requiredSigners.length - proposal.threshold;
+
+          let status: TProposalStatus = proposal.status;
+          if (isThresholdMet({ ...proposal, approvals })) {
+            status = 'approved';
+          } else if (rejected || (allVoted && !isThresholdMet({ ...proposal, approvals }))) {
+            status = 'rejected';
+          }
+
+          return { ...proposal, approvals, rejections, status };
+        }),
+      );
+    },
+    [],
+  );
+
+  const simulateExecution = useCallback(async (proposalId: string) => {
+    setExecutingId(proposalId);
+    await new Promise((resolve) => window.setTimeout(resolve, 1200));
+    setProposals((current) =>
+      current.map((proposal) =>
+        proposal.id === proposalId && proposal.status === 'approved'
+          ? { ...proposal, status: 'executed' }
+          : proposal,
+      ),
+    );
+    setExecutingId(null);
+  }, []);
+
+  const openProposals = proposals.filter((p) => p.status === 'open' || p.status === 'approved');
+
+  return {
+    proposals,
+    openProposals,
+    votes,
+    lastSignedEvent,
+    executingId,
+    createProposal,
+    recordVote,
+    simulateExecution,
+  };
+}

package/dist/templates/modules/multispend-demo/lib/multispend-types.ts

@@ -0,0 +1,33 @@
+import type { NostrEvent } from '../lib/nostr';
+
+export type TProposalStatus = 'open' | 'approved' | 'rejected' | 'executed';
+
+export type TVoteDecision = 'approve' | 'reject';
+
+/** Demo kind for Multispend approval votes signed via Nostr. */
+export const MULTISPEND_VOTE_KIND = 38383;
+
+export type TMultispendProposal = {
+  id: string;
+  amountSats: number;
+  description: string;
+  requiredSigners: string[];
+  threshold: number;
+  approvals: string[];
+  rejections: string[];
+  status: TProposalStatus;
+  createdAt: number;
+  proposerPubkey: string;
+};
+
+export type TMultispendVote = {
+  proposalId: string;
+  voterPubkey: string;
+  vote: TVoteDecision;
+  signedEvent: NostrEvent;
+};
+
+export type TMockVoter = {
+  pubkey: string;
+  label: string;
+};

package/dist/templates/modules/multispend-demo/lib/multispend-utils.ts

@@ -0,0 +1,69 @@
+import type { TMockVoter, TMultispendProposal } from './multispend-types';
+
+/** Mock voter pubkeys for the demo. Real Multispend uses Fedi group members. */
+export const MOCK_VOTERS: TMockVoter[] = [
+  {
+    pubkey: '79be667ef9dcbbac55a06295ce870b07029bfcdb2dce28d959f2815b16f81798',
+    label: 'Alice',
+  },
+  {
+    pubkey: 'c6047f9441ed7d6d3045406e95e0aa2944fef797332e9cb0f5c85d8d280e47bd',
+    label: 'Bob',
+  },
+  {
+    pubkey: 'f9308a3192592395af7d9b875b252fe1840d59a1363c88b9b5c6a7767632b87',
+    label: 'Carol',
+  },
+];
+
+export function getMockVoterLabel(pubkey: string): string {
+  const voter = MOCK_VOTERS.find((v) => v.pubkey === pubkey);
+  return voter?.label ?? 'Voter';
+}
+
+export function createProposalId(): string {
+  return `prop-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 7)}`;
+}
+
+export function getApprovalCount(proposal: TMultispendProposal): number {
+  return proposal.approvals.length;
+}
+
+export function isThresholdMet(proposal: TMultispendProposal): boolean {
+  return proposal.approvals.length >= proposal.threshold;
+}
+
+export function hasVoted(proposal: TMultispendProposal, pubkey: string): boolean {
+  return proposal.approvals.includes(pubkey) || proposal.rejections.includes(pubkey);
+}
+
+export function getInitialProposals(): TMultispendProposal[] {
+  const [alice, bob, carol] = MOCK_VOTERS;
+
+  return [
+    {
+      id: 'prop-seed-lunch',
+      amountSats: 42_000,
+      description: 'Team lunch: reimburse catering for the sprint retro',
+      requiredSigners: [alice.pubkey, bob.pubkey, carol.pubkey],
+      threshold: 2,
+      approvals: [],
+      rejections: [],
+      status: 'open',
+      createdAt: Date.now() - 3_600_000,
+      proposerPubkey: alice.pubkey,
+    },
+    {
+      id: 'prop-seed-supplies',
+      amountSats: 15_000,
+      description: 'Shared office supplies: printer paper and markers',
+      requiredSigners: [alice.pubkey, bob.pubkey, carol.pubkey],
+      threshold: 2,
+      approvals: [alice.pubkey, bob.pubkey],
+      rejections: [],
+      status: 'approved',
+      createdAt: Date.now() - 86_400_000,
+      proposerPubkey: bob.pubkey,
+    },
+  ];
+}

package/dist/templates/modules/multispend-demo/module.json

@@ -0,0 +1,18 @@
+{
+  "name": "multispend-demo",
+  "description": "Fedi multispend shared wallet UI",
+  "dependencies": [],
+  "devDependencies": [],
+  "files": [
+    { "src": "lib/multispend-types.ts", "dest": "lib/multispend-types.ts", "merge": "add" },
+    { "src": "lib/multispend-utils.ts", "dest": "lib/multispend-utils.ts", "merge": "add" },
+    { "src": "hooks/useMultispendDemo.ts", "dest": "hooks/useMultispendDemo.ts", "merge": "add" },
+    { "src": "components/multispend/ApprovalVote.tsx", "dest": "components/multispend/ApprovalVote.tsx", "merge": "add" },
+    { "src": "components/multispend/MultispendProposal.tsx", "dest": "components/multispend/MultispendProposal.tsx", "merge": "add" },
+    { "src": "components/multispend/ProposalList.tsx", "dest": "components/multispend/ProposalList.tsx", "merge": "add" },
+    { "src": "components/multispend/MultispendDemo.tsx", "dest": "components/multispend/MultispendDemo.tsx", "merge": "add" },
+    { "src": "app/demo/multispend/page.tsx", "dest": "app/demo/multispend/page.tsx", "merge": "add" },
+    { "src": "app/demo/multispend/MultispendDemoClient.tsx", "dest": "app/demo/multispend/MultispendDemoClient.tsx", "merge": "add" }
+  ],
+  "envVars": []
+}

package/dist/templates/modules/nostr-feed/app/demo/nostr-feed/NostrFeedDemoClient.tsx

@@ -0,0 +1,134 @@
+'use client';
+
+import Link from 'next/link';
+import { useState } from 'react';
+import { NostrFeedProvider } from '../../../components/nostr/NostrFeedProvider';
+import { NoteFeed } from '../../../components/nostr/NoteFeed';
+import { PublishNote } from '../../../components/nostr/PublishNote';
+import { DEFAULT_RELAYS } from '../../../lib/nostr/relay';
+
+export function NostrFeedDemoClient() {
+  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 feed
+          </h1>
+          <p className="max-w-[75ch] text-sm leading-[1.65] text-[var(--color-text-muted)]">
+            Read and post kind-1 notes on public relays. Zaps combine WebLN payments with NIP-57
+            zap receipts published back to the relay.
+          </p>
+        </header>
+
+        <NostrFeedProvider>
+          <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>
+                Connected to{' '}
+                <span className="font-mono text-xs text-[var(--color-text)]">
+                  {DEFAULT_RELAYS.join(', ')}
+                </span>
+                . Override with{' '}
+                <code className="font-mono text-xs">NEXT_PUBLIC_NOSTR_RELAY</code> (comma-separated
+                URLs).
+              </p>
+            </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)]">
+                  Publish
+                </h2>
+                <p className="text-sm leading-[1.65] text-[var(--color-text-muted)]">
+                  Signs a kind-1 text note with your NIP-07 key and publishes to relays.
+                </p>
+              </div>
+              <PublishNote />
+            </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)]">
+                  Live feed
+                </h2>
+                <p className="text-sm leading-[1.65] text-[var(--color-text-muted)]">
+                  Subscribes to recent notes from the last 24 hours, then streams new events.
+                </p>
+              </div>
+              <NoteFeed />
+            </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-feed-how-it-works"
+              >
+                How the feed works
+                <span aria-hidden>{howItWorksOpen ? '−' : '+'}</span>
+              </button>
+
+              {howItWorksOpen && (
+                <div
+                  id="nostr-feed-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)]">Relays</strong> are WebSocket
+                    servers that store and forward Nostr events. This demo uses{' '}
+                    <code className="font-mono text-xs">nostr-tools</code> with reconnect and
+                    heartbeat pings.
+                  </p>
+                  <p>
+                    <strong className="text-[var(--color-text)]">Zaps (NIP-57)</strong> look up the
+                    author&apos;s <code className="font-mono text-xs">lud16</code> from their
+                    profile, request a Lightning invoice with a signed zap request, pay via WebLN,
+                    then publish a kind-9735 zap receipt.
+                  </p>
+                  <p>
+                    Zaps only work when the note author has a Lightning address configured and
+                    WebLN is available in Fedi.
+                  </p>
+                </div>
+              )}
+            </section>
+          </div>
+        </NostrFeedProvider>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,23 @@
+import type { Metadata } from 'next';
+import { NostrFeedDemoClient } from './NostrFeedDemoClient';
+
+export const metadata: Metadata = {
+  title: 'Nostr feed',
+  description:
+    'Live Nostr social feed for Fedi mini apps. Read kind-1 notes from public relays, publish signed posts, and zap creators with WebLN and NIP-57.',
+  openGraph: {
+    title: 'Nostr feed',
+    description:
+      'Live Nostr social feed for Fedi mini apps. Read kind-1 notes from public relays, publish signed posts, and zap creators with WebLN and NIP-57.',
+  },
+  twitter: {
+    card: 'summary',
+    title: 'Nostr feed',
+    description:
+      'Live Nostr social feed for Fedi mini apps. Read kind-1 notes from public relays, publish signed posts, and zap creators with WebLN and NIP-57.',
+  },
+};
+
+export default function NostrFeedDemoPage() {
+  return <NostrFeedDemoClient />;
+}