create-fedi-app 0.1.0

package/dist/templates/modules/lnurl/app/demo/lnurl/page.tsx

@@ -0,0 +1,136 @@
+'use client';
+
+import Link from 'next/link';
+import { useState } from 'react';
+import { LnurlAuth } from '../../../components/lnurl/LnurlAuth';
+import { LnurlPay } from '../../../components/lnurl/LnurlPay';
+import { LnurlWithdraw } from '../../../components/lnurl/LnurlWithdraw';
+
+const DEMO_USERNAME = 'demo-user';
+
+export default function LnurlDemoPage() {
+  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)]">
+            LNURL
+          </h1>
+          <p className="max-w-[75ch] text-sm leading-[1.65] text-[var(--color-text-muted)]">
+            Encode Lightning interactions as scannable links: pay, authenticate, and withdraw
+            without pasting BOLT11 strings manually.
+          </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)]">
+                LNURL-pay
+              </h2>
+              <p className="text-sm leading-[1.65] text-[var(--color-text-muted)]">
+                Static QR for <code className="font-mono text-xs">/api/lnurlp/[username]</code>.
+                Wallets fetch metadata, then call your callback with an amount in millisats to receive
+                a BOLT11 invoice.
+              </p>
+            </div>
+            <LnurlPay username={DEMO_USERNAME} />
+          </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)]">
+                LNURL-auth
+              </h2>
+              <p className="text-sm leading-[1.65] text-[var(--color-text-muted)]">
+                Passwordless login via Lightning wallet or Nostr. This demo signs a kind-22242 event
+                with your <code className="font-mono text-xs">challenge</code> tag and completes the
+                callback.
+              </p>
+            </div>
+            <LnurlAuth />
+          </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)]">
+                LNURL-withdraw
+              </h2>
+              <p className="text-sm leading-[1.65] text-[var(--color-text-muted)]">
+                Service pays the user&apos;s invoice. The demo simulates a wallet calling your
+                callback with a BOLT11 from <code className="font-mono text-xs">makeInvoice()</code>.
+              </p>
+            </div>
+            <LnurlWithdraw />
+          </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="lnurl-how-it-works"
+            >
+              How LNURL works
+              <span aria-hidden>{howItWorksOpen ? '−' : '+'}</span>
+            </button>
+
+            {howItWorksOpen && (
+              <div
+                id="lnurl-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)]">LNURL</strong> wraps HTTPS endpoints
+                  in bech32 strings (prefix <code className="font-mono text-xs">lnurl1…</code>) so
+                  Lightning wallets can scan one QR and discover what to do next.
+                </p>
+                <p>
+                  <strong className="text-[var(--color-text)]">Pay</strong>: metadata at{' '}
+                  <code className="font-mono text-xs">/api/lnurlp/user</code>, invoice at the same
+                  URL with <code className="font-mono text-xs">?amount=</code> in millisats.
+                </p>
+                <p>
+                  <strong className="text-[var(--color-text)]">Auth</strong>: server issues a{' '}
+                  <code className="font-mono text-xs">k1</code> challenge; the wallet proves key
+                  ownership via signature or signed Nostr event.
+                </p>
+                <p>
+                  <strong className="text-[var(--color-text)]">Withdraw</strong>: service sends sats
+                  to an invoice the user supplies on callback. Replace mock invoices with your node
+                  in production and set <code className="font-mono text-xs">LNURL_SERVER_URL</code>{' '}
+                  behind a reverse proxy.
+                </p>
+              </div>
+            )}
+          </section>
+        </div>
+      </div>
+    </div>
+  );
+}

package/dist/templates/modules/lnurl/components/lnurl/LnurlAuth.tsx

@@ -0,0 +1,156 @@
+'use client';
+
+import { useCallback, useEffect, useState } from 'react';
+import { useIdentity } from '../../lib/nostr';
+import { encodeLnurl } from '../../lib/lnurl-utils';
+import { LnurlQR } from './LnurlQR';
+
+type TAuthChallenge = {
+  tag: string;
+  k1: string;
+  lnurl: string;
+  url: string;
+};
+
+type TAuthResult = {
+  status: string;
+  pubkey?: string;
+  reason?: string;
+};
+
+/**
+ * Demo LNURL-auth flow: fetches a k1 challenge, shows QR, and completes login via Nostr.
+ */
+export function LnurlAuth({ className }: { className?: string }) {
+  const { signEvent, getPublicKey, pubkey } = useIdentity();
+  const [challenge, setChallenge] = useState<TAuthChallenge | null>(null);
+  const [result, setResult] = useState<TAuthResult | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isAuthenticating, setIsAuthenticating] = useState(false);
+
+  const loadChallenge = useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+    setResult(null);
+    try {
+      const res = await fetch('/api/lnurlauth');
+      if (!res.ok) throw new Error('Failed to load auth challenge');
+      const data = (await res.json()) as TAuthChallenge;
+      setChallenge(data);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Could not load challenge');
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void loadChallenge();
+  }, [loadChallenge]);
+
+  async function handleLogin() {
+    if (!challenge) return;
+    setIsAuthenticating(true);
+    setError(null);
+
+    try {
+      const pk = pubkey ?? (await getPublicKey());
+      if (!pk) {
+        setError('Nostr provider not available. Open inside Fedi to sign the challenge.');
+        return;
+      }
+
+      const unsigned = {
+        kind: 22242,
+        created_at: Math.floor(Date.now() / 1000),
+        tags: [['challenge', challenge.k1]],
+        content: '',
+      };
+
+      const signed = await signEvent(unsigned);
+      if (!signed) {
+        setError('Signing failed');
+        return;
+      }
+
+      const res = await fetch('/api/lnurlauth', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          k1: challenge.k1,
+          key: pk,
+          tag: 'login',
+          event: signed,
+        }),
+      });
+      const data = (await res.json()) as TAuthResult;
+      setResult(data);
+
+      if (data.status !== 'OK') {
+        setError(data.reason ?? 'Authentication failed');
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Authentication failed');
+    } finally {
+      setIsAuthenticating(false);
+    }
+  }
+
+  const lnurl = challenge?.lnurl ?? (challenge?.url ? encodeLnurl(challenge.url) : '');
+
+  return (
+    <div className={`space-y-4 ${className ?? ''}`}>
+      {isLoading && (
+        <p className="text-sm" style={{ color: 'var(--color-text-subtle)' }} aria-live="polite">
+          Loading challenge…
+        </p>
+      )}
+
+      {challenge && lnurl && <LnurlQR value={lnurl} label="LNURL-auth QR code" />}
+
+      <button
+        type="button"
+        onClick={handleLogin}
+        disabled={!challenge || isAuthenticating}
+        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-90 active:opacity-80 disabled:opacity-50"
+        style={{
+          background: 'var(--color-accent)',
+          color: 'var(--color-primary-foreground)',
+          borderRadius: 'var(--radius-md)',
+        }}
+      >
+        {isAuthenticating ? 'Signing…' : 'Complete login (Nostr)'}
+      </button>
+
+      <button
+        type="button"
+        onClick={() => void loadChallenge()}
+        className="w-full text-xs transition-opacity duration-200 hover:opacity-80"
+        style={{ color: 'var(--color-text-muted)' }}
+      >
+        Refresh challenge
+      </button>
+
+      {result?.status === 'OK' && result.pubkey && (
+        <div
+          className="rounded-lg px-3 py-2 text-sm"
+          style={{
+            background: 'var(--color-accent-dim)',
+            color: 'var(--color-accent)',
+            borderRadius: 'var(--radius-md)',
+          }}
+          role="status"
+        >
+          Authenticated as {result.pubkey.slice(0, 8)}…{result.pubkey.slice(-6)}
+        </div>
+      )}
+
+      {error && (
+        <p className="text-xs" style={{ color: 'var(--color-error, #ef4444)' }} role="alert">
+          {error}
+        </p>
+      )}
+    </div>
+  );
+}

package/dist/templates/modules/lnurl/components/lnurl/LnurlPay.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import { useMemo } from 'react';
+import { encodeLnurl } from '../../lib/lnurl-utils';
+import { LnurlQR } from './LnurlQR';
+
+interface ILnurlPayProps {
+  /** Username segment in `/api/lnurlp/[username]`. */
+  username: string;
+  /** Optional override for the public origin (defaults to `window.location.origin`). */
+  baseUrl?: string;
+  className?: string;
+}
+
+/**
+ * Builds an LNURL-pay link for the given username and displays it as a QR code.
+ */
+export function LnurlPay({ username, baseUrl, className }: ILnurlPayProps) {
+  const payUrl = useMemo(() => {
+    const origin =
+      baseUrl?.replace(/\/$/, '') ??
+      (typeof window !== 'undefined' ? window.location.origin : '');
+    return `${origin}/api/lnurlp/${encodeURIComponent(username)}`;
+  }, [username, baseUrl]);
+
+  const lnurl = useMemo(() => encodeLnurl(payUrl), [payUrl]);
+
+  return (
+    <div className={`space-y-3 ${className ?? ''}`}>
+      <LnurlQR value={lnurl} label={`LNURL-pay QR for @${username}`} />
+      <p className="text-center text-xs" style={{ color: 'var(--color-text-subtle)' }}>
+        Wallets scan this code, fetch metadata, then request an invoice from your callback.
+      </p>
+    </div>
+  );
+}

package/dist/templates/modules/lnurl/components/lnurl/LnurlQR.tsx

@@ -0,0 +1,96 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+import { QRCodeSVG } from 'qrcode.react';
+import { decodeLnurl, encodeLnurl } from '../../lib/lnurl-utils';
+
+interface ILnurlQRProps {
+  /** Raw HTTPS URL or already-encoded LNURL string. */
+  value: string;
+  /** Human-readable label for assistive tech. */
+  label?: string;
+  size?: number;
+  className?: string;
+}
+
+function toLnurlString(value: string): string {
+  const trimmed = value.trim();
+  if (trimmed.toLowerCase().startsWith('lnurl')) {
+    return trimmed.toUpperCase();
+  }
+  return encodeLnurl(trimmed);
+}
+
+/**
+ * Renders a bech32-encoded LNURL as a scannable QR code with copy support.
+ */
+export function LnurlQR({ value, label = 'LNURL QR code', size = 160, className }: ILnurlQRProps) {
+  const [copied, setCopied] = useState(false);
+
+  const lnurl = useMemo(() => toLnurlString(value), [value]);
+  const decodedUrl = useMemo(() => {
+    try {
+      return decodeLnurl(lnurl);
+    } catch {
+      return null;
+    }
+  }, [lnurl]);
+
+  async function handleCopy() {
+    await navigator.clipboard.writeText(lnurl);
+    setCopied(true);
+    window.setTimeout(() => setCopied(false), 2000);
+  }
+
+  return (
+    <div
+      className={`flex flex-col gap-3 rounded-xl p-4 ${className ?? ''}`}
+      style={{
+        background: 'var(--color-surface-1)',
+        border: '1px solid var(--color-border)',
+        borderRadius: 'var(--radius-lg)',
+      }}
+    >
+      <div
+        className="mx-auto flex w-full max-w-[200px] items-center justify-center rounded-lg p-3"
+        style={{ background: 'var(--color-surface-2)' }}
+        aria-label={label}
+      >
+        <QRCodeSVG
+          value={lnurl}
+          size={size}
+          level="M"
+          bgColor="transparent"
+          fgColor="var(--color-text)"
+        />
+      </div>
+
+      <p
+        className="break-all text-center font-mono text-xs leading-relaxed"
+        style={{ color: 'var(--color-text-muted)' }}
+      >
+        {lnurl.slice(0, 24)}…{lnurl.slice(-12)}
+      </p>
+
+      {decodedUrl && (
+        <p className="break-all text-center text-xs" style={{ color: 'var(--color-text-subtle)' }}>
+          {decodedUrl}
+        </p>
+      )}
+
+      <button
+        type="button"
+        onClick={handleCopy}
+        className="w-full rounded-lg px-4 py-2 text-sm font-medium transition-opacity duration-200 ease-[cubic-bezier(0.25,1,0.5,1)] hover:opacity-80 active:opacity-70"
+        style={{
+          background: 'var(--color-surface-2)',
+          color: 'var(--color-text)',
+          borderRadius: 'var(--radius-md)',
+        }}
+        aria-label={copied ? 'LNURL copied' : 'Copy LNURL string'}
+      >
+        {copied ? 'Copied!' : 'Copy LNURL'}
+      </button>
+    </div>
+  );
+}

package/dist/templates/modules/lnurl/components/lnurl/LnurlWithdraw.tsx

@@ -0,0 +1,141 @@
+'use client';
+
+import { useCallback, useEffect, useState } from 'react';
+import { usePayment } from '../../lib/webln';
+import { LnurlQR } from './LnurlQR';
+
+type TWithdrawRequest = {
+  tag: string;
+  callback: string;
+  k1: string;
+  minWithdrawable: number;
+  maxWithdrawable: number;
+  defaultDescription: string;
+  lnurl: string;
+};
+
+type TWithdrawResult = {
+  status: string;
+  reason?: string;
+};
+
+/**
+ * Demo LNURL-withdraw flow: shows withdraw LNURL and simulates wallet payout via WebLN invoice.
+ */
+export function LnurlWithdraw({ className }: { className?: string }) {
+  const { makeInvoice, isCreatingInvoice } = usePayment();
+  const [request, setRequest] = useState<TWithdrawRequest | null>(null);
+  const [result, setResult] = useState<TWithdrawResult | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [isWithdrawing, setIsWithdrawing] = useState(false);
+
+  const loadRequest = useCallback(async () => {
+    setError(null);
+    setResult(null);
+    try {
+      const res = await fetch('/api/lnurlw');
+      if (!res.ok) throw new Error('Failed to load withdraw request');
+      const data = (await res.json()) as TWithdrawRequest;
+      setRequest(data);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Could not load withdraw request');
+    }
+  }, []);
+
+  useEffect(() => {
+    void loadRequest();
+  }, [loadRequest]);
+
+  async function handleSimulateWithdraw() {
+    if (!request) return;
+    setIsWithdrawing(true);
+    setError(null);
+
+    try {
+      const invoiceRes = await makeInvoice({
+        amount: '21',
+        defaultMemo: request.defaultDescription,
+      });
+
+      if (!invoiceRes?.paymentRequest) {
+        setError('WebLN not available. Open inside Fedi to create a withdraw invoice.');
+        return;
+      }
+
+      const params = new URLSearchParams({
+        k1: request.k1,
+        pr: invoiceRes.paymentRequest,
+        tag: 'withdrawLink',
+      });
+
+      const res = await fetch(`${request.callback}?${params.toString()}`);
+      const data = (await res.json()) as TWithdrawResult;
+      setResult(data);
+
+      if (data.status !== 'OK') {
+        setError(data.reason ?? 'Withdraw failed');
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Withdraw failed');
+    } finally {
+      setIsWithdrawing(false);
+    }
+  }
+
+  return (
+    <div className={`space-y-4 ${className ?? ''}`}>
+      {request?.lnurl && (
+        <LnurlQR value={request.lnurl} label="LNURL-withdraw QR code" />
+      )}
+
+      {request && (
+        <p className="text-center text-xs" style={{ color: 'var(--color-text-subtle)' }}>
+          Max withdrawable: {Math.floor(request.maxWithdrawable / 1000)} sats (demo cap)
+        </p>
+      )}
+
+      <button
+        type="button"
+        onClick={handleSimulateWithdraw}
+        disabled={!request || isWithdrawing || isCreatingInvoice}
+        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-90 active:opacity-80 disabled:opacity-50"
+        style={{
+          background: 'var(--color-accent)',
+          color: 'var(--color-primary-foreground)',
+          borderRadius: 'var(--radius-md)',
+        }}
+      >
+        {isWithdrawing || isCreatingInvoice ? 'Processing…' : 'Simulate wallet withdraw'}
+      </button>
+
+      <button
+        type="button"
+        onClick={() => void loadRequest()}
+        className="w-full text-xs transition-opacity duration-200 hover:opacity-80"
+        style={{ color: 'var(--color-text-muted)' }}
+      >
+        Refresh withdraw link
+      </button>
+
+      {result?.status === 'OK' && (
+        <div
+          className="rounded-lg px-3 py-2 text-sm"
+          style={{
+            background: 'var(--color-accent-dim)',
+            color: 'var(--color-accent)',
+            borderRadius: 'var(--radius-md)',
+          }}
+          role="status"
+        >
+          Withdraw callback accepted. Invoice submitted to service.
+        </div>
+      )}
+
+      {error && (
+        <p className="text-xs" style={{ color: 'var(--color-error, #ef4444)' }} role="alert">
+          {error}
+        </p>
+      )}
+    </div>
+  );
+}

package/dist/templates/modules/lnurl/lib/lnurl-auth-verify.ts

@@ -0,0 +1,87 @@
+import { schnorr } from '@noble/curves/secp256k1.js';
+import { sha256 } from '@noble/hashes/sha256';
+import type { NostrEvent } from './fedi-types';
+
+function hexToBytes(hex: string): Uint8Array {
+  const bytes = new Uint8Array(hex.length / 2);
+  for (let i = 0; i < hex.length; i += 2) {
+    bytes[i / 2] = parseInt(hex.slice(i, i + 2), 16);
+  }
+  return bytes;
+}
+
+function bytesToHex(bytes: Uint8Array): string {
+  return Array.from(bytes)
+    .map((b) => b.toString(16).padStart(2, '0'))
+    .join('');
+}
+
+/**
+ * Verifies a compact secp256k1 Schnorr signature of SHA256(k1).
+ * Used when wallets sign the raw k1 challenge.
+ */
+export function verifyK1SchnorrSignature(
+  k1: string,
+  sigHex: string,
+  pubkeyHex: string,
+): boolean {
+  try {
+    const k1Bytes = hexToBytes(k1);
+    const msg = sha256(k1Bytes);
+    const sig = hexToBytes(sigHex);
+    const pubkey = hexToBytes(pubkeyHex);
+    return schnorr.verify(sig, msg, pubkey);
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Verifies a NIP-01 signed event used as an LNURL-auth proof.
+ * Expects kind 22242 with a `challenge` tag matching k1.
+ */
+export function verifyLnurlAuthEvent(k1: string, eventJson: string): {
+  valid: boolean;
+  pubkey?: string;
+  reason?: string;
+} {
+  let event: NostrEvent;
+  try {
+    event = JSON.parse(eventJson) as NostrEvent;
+  } catch {
+    return { valid: false, reason: 'Invalid event JSON' };
+  }
+
+  if (event.kind !== 22242) {
+    return { valid: false, reason: 'Event must be kind 22242' };
+  }
+
+  const challengeTag = event.tags.find((t) => t[0] === 'challenge');
+  if (!challengeTag?.[1] || challengeTag[1] !== k1) {
+    return { valid: false, reason: 'challenge tag must match k1' };
+  }
+
+  const serialized = JSON.stringify([
+    0,
+    event.pubkey,
+    event.created_at,
+    event.kind,
+    event.tags,
+    event.content,
+  ]);
+  const idBytes = sha256(new TextEncoder().encode(serialized));
+  const idHex = bytesToHex(idBytes);
+
+  if (idHex !== event.id) {
+    return { valid: false, reason: 'Invalid event id' };
+  }
+
+  try {
+    const sigBytes = hexToBytes(event.sig);
+    const valid = schnorr.verify(sigBytes, idBytes, hexToBytes(event.pubkey));
+    if (!valid) return { valid: false, reason: 'Invalid signature' };
+    return { valid: true, pubkey: event.pubkey };
+  } catch {
+    return { valid: false, reason: 'Signature verification failed' };
+  }
+}