create-fedi-app 0.1.0

package/dist/templates/modules/nostr-feed/components/nostr/NostrFeedProvider.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import { createContext, useContext, useEffect, useMemo, type ReactNode } from 'react';
+import {
+  closeRelayManager,
+  getRelayManager,
+  resolveRelayUrls,
+  type RelayManager,
+} from '../../lib/nostr/relay';
+
+interface INostrFeedContext {
+  relayUrls: string[];
+  manager: RelayManager;
+}
+
+const NostrFeedContext = createContext<INostrFeedContext | null>(null);
+
+interface INostrFeedProviderProps {
+  children: ReactNode;
+  relayUrls?: string[];
+}
+
+export function NostrFeedProvider({ children, relayUrls }: INostrFeedProviderProps) {
+  const urls = useMemo(
+    () => (relayUrls?.length ? relayUrls : resolveRelayUrls()),
+    [relayUrls],
+  );
+  const manager = useMemo(() => getRelayManager(), []);
+
+  useEffect(() => {
+    return () => closeRelayManager();
+  }, []);
+
+  return (
+    <NostrFeedContext.Provider value={{ relayUrls: urls, manager }}>
+      {children}
+    </NostrFeedContext.Provider>
+  );
+}
+
+export function useNostrFeed(): INostrFeedContext {
+  const ctx = useContext(NostrFeedContext);
+  if (!ctx) {
+    throw new Error('useNostrFeed must be used within NostrFeedProvider');
+  }
+  return ctx;
+}

package/dist/templates/modules/nostr-feed/components/nostr/NoteCard.tsx

@@ -0,0 +1,68 @@
+'use client';
+
+import ReactMarkdown from 'react-markdown';
+import { pubkeyToHsl, pubkeyToNpub, truncateNpub } from '../../lib/nostr-utils';
+import type { NostrEvent } from '../../lib/fedi-types';
+import { ZapButton } from './ZapButton';
+
+interface INoteCardProps {
+  event: NostrEvent;
+}
+
+function formatNoteTime(createdAt: number): string {
+  const date = new Date(createdAt * 1000);
+  const now = Date.now();
+  const diffSec = Math.floor((now - date.getTime()) / 1000);
+
+  if (diffSec < 60) return 'just now';
+  if (diffSec < 3600) return `${Math.floor(diffSec / 60)}m ago`;
+  if (diffSec < 86400) return `${Math.floor(diffSec / 3600)}h ago`;
+  return date.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
+}
+
+/**
+ * Renders a single kind-1 note with Markdown-safe content and zap support.
+ */
+export function NoteCard({ event }: INoteCardProps) {
+  const npub = pubkeyToNpub(event.pubkey);
+  const displayNpub = truncateNpub(npub);
+  const { h, s, l } = pubkeyToHsl(event.pubkey);
+
+  return (
+    <article
+      className="rounded-xl px-4 py-3"
+      style={{
+        background: 'var(--color-surface-1)',
+        border: '1px solid var(--color-border)',
+        borderRadius: 'var(--radius-lg)',
+      }}
+    >
+      <header className="mb-2 flex items-center justify-between gap-2">
+        <div className="flex min-w-0 items-center gap-2">
+          <span
+            className="h-8 w-8 shrink-0 rounded-full"
+            style={{ background: `hsl(${h} ${s}% ${l}%)` }}
+            aria-hidden
+          />
+          <div className="min-w-0">
+            <p className="truncate font-mono text-xs text-[var(--color-text)]">{displayNpub}</p>
+            <time
+              className="text-xs text-[var(--color-text-subtle)]"
+              dateTime={new Date(event.created_at * 1000).toISOString()}
+            >
+              {formatNoteTime(event.created_at)}
+            </time>
+          </div>
+        </div>
+        <ZapButton noteId={event.id} notePubkey={event.pubkey} />
+      </header>
+
+      <div
+        className="prose prose-invert prose-sm max-w-none text-sm leading-[1.65] prose-p:my-1 prose-pre:my-2 prose-pre:rounded-md prose-pre:bg-[var(--color-surface-2)] prose-code:text-[var(--color-accent)] prose-code:before:content-none prose-code:after:content-none"
+        style={{ color: 'var(--color-text-muted)' }}
+      >
+        <ReactMarkdown>{event.content || '…'}</ReactMarkdown>
+      </div>
+    </article>
+  );
+}

package/dist/templates/modules/nostr-feed/components/nostr/NoteFeed.tsx

@@ -0,0 +1,109 @@
+'use client';
+
+import { useCallback, useEffect, useState } from 'react';
+import type { NostrEvent } from '../../lib/fedi-types';
+import { useNostrFeed } from './NostrFeedProvider';
+import { NoteCard } from './NoteCard';
+
+const FEED_LIMIT = 50;
+
+/**
+ * Subscribes to kind-1 text notes from configured relays and renders a scrollable feed.
+ */
+export function NoteFeed() {
+  const { relayUrls, manager } = useNostrFeed();
+  const [notes, setNotes] = useState<NostrEvent[]>([]);
+  const [status, setStatus] = useState<'loading' | 'live' | 'error'>('loading');
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+
+  const upsertNote = useCallback((event: NostrEvent) => {
+    setNotes((prev) => {
+      if (prev.some((n) => n.id === event.id)) return prev;
+      const next = [event, ...prev];
+      next.sort((a, b) => b.created_at - a.created_at);
+      return next.slice(0, FEED_LIMIT);
+    });
+  }, []);
+
+  useEffect(() => {
+    let cancelled = false;
+    setStatus('loading');
+    setErrorMessage(null);
+
+    const since = Math.floor(Date.now() / 1000) - 60 * 60 * 24;
+
+    manager
+      .query(relayUrls, { kinds: [1], limit: FEED_LIMIT, since }, 8000)
+      .then((initial) => {
+        if (cancelled) return;
+        const sorted = [...initial].sort((a, b) => b.created_at - a.created_at);
+        setNotes(sorted.slice(0, FEED_LIMIT));
+        setStatus('live');
+      })
+      .catch((err) => {
+        if (cancelled) return;
+        setStatus('error');
+        setErrorMessage(err instanceof Error ? err.message : 'Failed to load feed');
+      });
+
+    const unsubscribe = manager.subscribe(
+      relayUrls,
+      { kinds: [1], since },
+      {
+        onEvent: upsertNote,
+        onEose: () => {
+          if (!cancelled) setStatus((s) => (s === 'loading' ? 'live' : s));
+        },
+      },
+    );
+
+    return () => {
+      cancelled = true;
+      unsubscribe();
+    };
+  }, [manager, relayUrls, upsertNote]);
+
+  if (status === 'error') {
+    return (
+      <p className="text-sm text-[var(--color-error,#ef4444)]" role="alert">
+        {errorMessage ?? 'Could not connect to relays'}
+      </p>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="flex items-center justify-between gap-2">
+        <p className="text-xs font-semibold uppercase tracking-wider text-[var(--color-text-subtle)]">
+          Feed
+        </p>
+        <span
+          className="font-mono text-xs text-[var(--color-text-subtle)]"
+          aria-live="polite"
+        >
+          {status === 'loading' ? 'Connecting…' : `${notes.length} notes`}
+        </span>
+      </div>
+
+      <div
+        className="flex max-h-[min(60dvh,28rem)] flex-col gap-3 overflow-y-auto overscroll-contain pr-1"
+        aria-busy={status === 'loading'}
+        aria-label="Nostr note feed"
+      >
+        {notes.length === 0 && status === 'loading' && (
+          <p className="text-sm text-[var(--color-text-muted)]">Loading notes from relays…</p>
+        )}
+
+        {notes.length === 0 && status === 'live' && (
+          <p className="text-sm text-[var(--color-text-muted)]">
+            No notes yet. Publish one below. It may take a few seconds to appear.
+          </p>
+        )}
+
+        {notes.map((note) => (
+          <NoteCard key={note.id} event={note} />
+        ))}
+      </div>
+    </div>
+  );
+}

package/dist/templates/modules/nostr-feed/components/nostr/PublishNote.tsx

@@ -0,0 +1,104 @@
+'use client';
+
+import { useState } from 'react';
+import { useIdentity } from '../../lib/nostr';
+import { useNostrFeed } from './NostrFeedProvider';
+
+/**
+ * Text input and publish button: signs a kind-1 note and sends it to relays.
+ */
+export function PublishNote() {
+  const { relayUrls, manager } = useNostrFeed();
+  const { pubkey, signEvent, isConnecting } = useIdentity();
+  const [content, setContent] = useState('');
+  const [isPublishing, setIsPublishing] = useState(false);
+  const [publishError, setPublishError] = useState<string | null>(null);
+  const [lastPublishedId, setLastPublishedId] = useState<string | null>(null);
+
+  async function handlePublish() {
+    const text = content.trim();
+    if (!text || !pubkey) return;
+
+    setIsPublishing(true);
+    setPublishError(null);
+
+    try {
+      const signed = await signEvent({
+        kind: 1,
+        content: text,
+        tags: [],
+        created_at: Math.floor(Date.now() / 1000),
+      });
+
+      if (!signed) {
+        throw new Error('Connect your Nostr identity to publish');
+      }
+
+      await manager.publish(relayUrls, signed);
+      setLastPublishedId(signed.id);
+      setContent('');
+    } catch (err) {
+      setPublishError(err instanceof Error ? err.message : 'Publish failed');
+    } finally {
+      setIsPublishing(false);
+    }
+  }
+
+  if (!pubkey) {
+    return (
+      <p className="text-sm text-[var(--color-text-subtle)]">
+        Connect your Nostr identity (NIP-07) to publish notes to the relay.
+      </p>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-3">
+      <label className="flex flex-col gap-1.5">
+        <span className="text-xs font-semibold uppercase tracking-wider text-[var(--color-text-subtle)]">
+          New note
+        </span>
+        <textarea
+          value={content}
+          onChange={(e) => setContent(e.target.value)}
+          rows={3}
+          placeholder="What's happening?"
+          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={handlePublish}
+        disabled={!content.trim() || isPublishing || 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="Publish note to Nostr relays"
+      >
+        {isPublishing ? 'Publishing…' : 'Publish'}
+      </button>
+
+      {publishError && (
+        <p className="text-xs text-[var(--color-error,#ef4444)]" role="alert">
+          {publishError}
+        </p>
+      )}
+
+      {lastPublishedId && !publishError && (
+        <p className="text-xs text-[var(--color-text-subtle)]" role="status">
+          Published. Waiting for relays to echo your note.
+        </p>
+      )}
+    </div>
+  );
+}

package/dist/templates/modules/nostr-feed/components/nostr/ZapButton.tsx

@@ -0,0 +1,140 @@
+'use client';
+
+import { useState } from 'react';
+import { useIdentity } from '../../lib/nostr';
+import { usePayment } from '../../lib/webln';
+import {
+  buildZapReceipt,
+  buildZapRequest,
+  fetchLnurlPayMetadata,
+  fetchRecipientLnurl,
+  requestZapInvoice,
+} from '../../lib/nostr-zap';
+import { useNostrFeed } from './NostrFeedProvider';
+
+const DEFAULT_ZAP_SATS = 21;
+
+interface IZapButtonProps {
+  noteId: string;
+  notePubkey: string;
+  zapSats?: number;
+}
+
+/**
+ * NIP-57 zap: LNURL invoice from the recipient's Lightning address, WebLN payment, zap receipt on relay.
+ */
+export function ZapButton({ noteId, notePubkey, zapSats = DEFAULT_ZAP_SATS }: IZapButtonProps) {
+  const { relayUrls, manager } = useNostrFeed();
+  const { pubkey, signEvent } = useIdentity();
+  const { sendPayment, isPaying } = usePayment();
+  const [status, setStatus] = useState<'idle' | 'zapping' | 'zapped' | 'error'>('idle');
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+
+  async function handleZap() {
+    if (!pubkey) {
+      setStatus('error');
+      setErrorMessage('Connect Nostr identity to zap');
+      return;
+    }
+
+    setStatus('zapping');
+    setErrorMessage(null);
+
+    try {
+      const lnurl = await fetchRecipientLnurl(manager, relayUrls, notePubkey);
+      if (!lnurl) {
+        throw new Error('Recipient has no Lightning address on their profile');
+      }
+
+      const metadata = await fetchLnurlPayMetadata(lnurl);
+      const amountMsats = zapSats * 1000;
+
+      if (amountMsats < metadata.minSendable || amountMsats > metadata.maxSendable) {
+        throw new Error(
+          `Zap amount must be between ${Math.ceil(metadata.minSendable / 1000)} and ${Math.floor(metadata.maxSendable / 1000)} sats`,
+        );
+      }
+
+      const zapRequest = buildZapRequest({
+        noteId,
+        notePubkey,
+        relayUrls,
+        amountMsats,
+      });
+
+      const signedRequest = await signEvent(zapRequest);
+      if (!signedRequest) {
+        throw new Error('Failed to sign zap request');
+      }
+
+      const invoice = await requestZapInvoice(metadata.callback, amountMsats, signedRequest);
+      const payment = await sendPayment(invoice);
+
+      if (!payment?.preimage) {
+        throw new Error('Payment was not completed');
+      }
+
+      const receipt = buildZapReceipt({
+        noteId,
+        notePubkey,
+        payerPubkey: pubkey,
+        bolt11: invoice,
+        preimage: payment.preimage,
+        zapRequest: signedRequest,
+      });
+
+      const signedReceipt = await signEvent(receipt);
+      if (signedReceipt) {
+        await manager.publish(relayUrls, signedReceipt);
+      }
+
+      setStatus('zapped');
+    } catch (err) {
+      setStatus('error');
+      setErrorMessage(err instanceof Error ? err.message : 'Zap failed');
+    }
+  }
+
+  if (status === 'zapped') {
+    return (
+      <span
+        className="shrink-0 rounded-md px-2 py-1 text-xs font-semibold"
+        style={{
+          background: 'var(--color-accent-dim)',
+          color: 'var(--color-accent)',
+        }}
+        role="status"
+      >
+        Zapped {zapSats}⚡
+      </span>
+    );
+  }
+
+  return (
+    <div className="flex shrink-0 flex-col items-end gap-1">
+      <button
+        type="button"
+        onClick={handleZap}
+        disabled={isPaying || status === 'zapping'}
+        className="rounded-md px-2 py-1 text-xs 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-2)',
+          border: '1px solid var(--color-border)',
+          color: 'var(--color-text)',
+        }}
+        aria-label={`Zap ${zapSats} sats`}
+        aria-busy={isPaying || status === 'zapping'}
+      >
+        {isPaying || status === 'zapping' ? '…' : `⚡ ${zapSats}`}
+      </button>
+      {status === 'error' && errorMessage && (
+        <p
+          className="max-w-[10rem] text-right text-[10px] leading-tight text-[var(--color-error,#ef4444)]"
+          role="alert"
+        >
+          {errorMessage}
+        </p>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,107 @@
+import type { Event } from 'nostr-tools/core';
+import type { Filter } from 'nostr-tools/filter';
+import { SimplePool } from 'nostr-tools/pool';
+import type { NostrEvent } from '../fedi-types';
+
+/** Default public relays for the live demo. */
+export const DEFAULT_RELAYS = [
+  'wss://relay.damus.io',
+  'wss://relay.nostr.band',
+] as const;
+
+/**
+ * Resolves relay URLs from `NEXT_PUBLIC_NOSTR_RELAY` (comma-separated) or defaults.
+ */
+export function resolveRelayUrls(override?: string): string[] {
+  const raw = override ?? process.env.NEXT_PUBLIC_NOSTR_RELAY;
+  if (raw?.trim()) {
+    return raw
+      .split(',')
+      .map((url) => url.trim())
+      .filter((url) => url.startsWith('wss://') || url.startsWith('ws://'));
+  }
+  return [...DEFAULT_RELAYS];
+}
+
+export type TRelayConnectionStatus = 'connecting' | 'connected' | 'disconnected' | 'error';
+
+/**
+ * WebSocket relay connection manager backed by `nostr-tools` SimplePool.
+ * Handles subscribe, publish, and automatic reconnect with exponential backoff.
+ */
+export class RelayManager {
+  private readonly pool: SimplePool;
+  private readonly trackedRelays = new Set<string>();
+
+  constructor() {
+    this.pool = new SimplePool({ enablePing: true, enableReconnect: true });
+  }
+
+  /** Tracks which relays the pool has opened for `close()`. */
+  private trackRelays(urls: string[]): void {
+    for (const url of urls) this.trackedRelays.add(url);
+  }
+
+  /**
+   * Subscribes to events across multiple relays. Returns an unsubscribe function.
+   */
+  subscribe(
+    relayUrls: string[],
+    filter: Filter,
+    handlers: {
+      onEvent: (event: NostrEvent) => void;
+      onEose?: () => void;
+    },
+  ): () => void {
+    this.trackRelays(relayUrls);
+    const sub = this.pool.subscribe(relayUrls, filter, {
+      onevent(event: Event) {
+        handlers.onEvent(event as NostrEvent);
+      },
+      oneose: handlers.onEose,
+    });
+    return () => sub.close();
+  }
+
+  /**
+   * Publishes a signed event to all write relays. Resolves when at least one accepts.
+   */
+  async publish(relayUrls: string[], event: NostrEvent): Promise<void> {
+    this.trackRelays(relayUrls);
+    await Promise.any(this.pool.publish(relayUrls, event as Event));
+  }
+
+  /**
+   * One-shot query: collects events until EOSE or timeout.
+   */
+  async query(
+    relayUrls: string[],
+    filter: Filter,
+    timeoutMs = 5000,
+  ): Promise<NostrEvent[]> {
+    this.trackRelays(relayUrls);
+    const events = await this.pool.querySync(relayUrls, filter, { maxWait: timeoutMs });
+    return events as NostrEvent[];
+  }
+
+  /** Closes all relay connections opened by this manager. */
+  close(): void {
+    this.pool.close([...this.trackedRelays]);
+    this.trackedRelays.clear();
+  }
+}
+
+let sharedManager: RelayManager | null = null;
+
+/** Singleton relay manager for client components in the same session. */
+export function getRelayManager(): RelayManager {
+  if (!sharedManager) {
+    sharedManager = new RelayManager();
+  }
+  return sharedManager;
+}
+
+export function closeRelayManager(): void {
+  sharedManager?.close();
+  sharedManager = null;
+}