create-fedi-app 0.1.0

package/dist/templates/modules/payment-gated-content/lib/payment-gate.ts

@@ -0,0 +1,195 @@
+import { createHmac, timingSafeEqual } from 'crypto';
+import { NextRequest, NextResponse } from 'next/server';
+import {
+  createPaymentRecord,
+  getPaymentById,
+  markPaymentPaid,
+  type TPaymentRecord,
+} from './payment-store';
+
+export const PAYMENT_COOKIE_NAME = 'fedi-payment-token';
+export const PAYMENT_COOKIE_MAX_AGE = 60 * 60 * 24 * 30;
+
+export const PROTECTED_ROUTES = [
+  { path: '/demo/payment-gated/article', contentId: 'demo-article' },
+] as const;
+
+type TCookieReader = {
+  get: (name: string) => { value: string } | undefined;
+};
+
+function getSigningSecret(): string {
+  return process.env.PAYMENT_GATE_SECRET ?? 'dev-payment-gate-secret';
+}
+
+function signPayload(payload: string): string {
+  return createHmac('sha256', getSigningSecret()).update(payload).digest('hex');
+}
+
+function buildToken(contentId: string, paymentId: string): string {
+  const payload = `${contentId}:${paymentId}`;
+  return `${payload}:${signPayload(payload)}`;
+}
+
+function parseToken(token: string, contentId: string): string | null {
+  const parts = token.split(':');
+  if (parts.length < 3) return null;
+
+  const paymentId = parts[1];
+  const signature = parts.slice(2).join(':');
+  const payload = `${contentId}:${paymentId}`;
+  const expected = signPayload(payload);
+
+  try {
+    const sigBuffer = Buffer.from(signature, 'hex');
+    const expectedBuffer = Buffer.from(expected, 'hex');
+    if (
+      sigBuffer.length !== expectedBuffer.length ||
+      !timingSafeEqual(sigBuffer, expectedBuffer)
+    ) {
+      return null;
+    }
+  } catch {
+    return null;
+  }
+
+  return paymentId;
+}
+
+function readPaymentToken(source: NextRequest | TCookieReader): string | null {
+  if (source instanceof NextRequest) {
+    return (
+      source.headers.get('x-payment-token') ??
+      source.cookies.get(PAYMENT_COOKIE_NAME)?.value ??
+      null
+    );
+  }
+
+  return source.get(PAYMENT_COOKIE_NAME)?.value ?? null;
+}
+
+/**
+ * Reads payment tokens from request cookies or the x-payment-token header.
+ */
+export function checkPaymentCookie(
+  source: NextRequest | TCookieReader,
+  contentId: string,
+): boolean {
+  const token = readPaymentToken(source);
+  if (!token) return false;
+
+  const paymentId = parseToken(token, contentId);
+  if (!paymentId) return false;
+
+  return true;
+}
+
+/**
+ * Validates the token and confirms the underlying payment record is paid.
+ */
+export async function checkPaymentAccess(
+  source: NextRequest | TCookieReader,
+  contentId: string,
+): Promise<boolean> {
+  const token = readPaymentToken(source);
+  if (!token) return false;
+
+  const paymentId = parseToken(token, contentId);
+  if (!paymentId) return false;
+
+  const record = await getPaymentById(paymentId);
+  return record?.contentId === contentId && record.status === 'paid';
+}
+
+export function setPaymentCookie(
+  response: NextResponse,
+  contentId: string,
+  paymentId: string,
+): NextResponse {
+  const token = buildToken(contentId, paymentId);
+  response.cookies.set(PAYMENT_COOKIE_NAME, token, {
+    httpOnly: true,
+    secure: process.env.NODE_ENV === 'production',
+    sameSite: 'lax',
+    path: '/',
+    maxAge: PAYMENT_COOKIE_MAX_AGE,
+  });
+  return response;
+}
+
+export type TGenerateInvoiceResult = {
+  paymentId: string;
+  invoice: string;
+  amountSats: number;
+  memo: string;
+  /** Present in development to simulate wallet payment without WebLN */
+  devPreimage?: string;
+};
+
+/**
+ * Creates a server-side invoice and stores a pending payment record.
+ */
+export async function generateInvoice(options: {
+  contentId: string;
+  amountSats: number;
+  memo?: string;
+}): Promise<TGenerateInvoiceResult> {
+  const record = await createPaymentRecord({
+    contentId: options.contentId,
+    amountSats: options.amountSats,
+    memo: options.memo ?? `Unlock ${options.contentId}`,
+  });
+
+  const result: TGenerateInvoiceResult = {
+    paymentId: record.id,
+    invoice: record.invoice,
+    amountSats: record.amountSats,
+    memo: record.memo,
+  };
+
+  if (process.env.NODE_ENV === 'development') {
+    result.devPreimage = record.preimage;
+  }
+
+  return result;
+}
+
+export type TVerifyPaymentResult =
+  | { valid: true; record: TPaymentRecord }
+  | { valid: false; reason: string };
+
+/**
+ * Verifies a Lightning payment preimage against a pending invoice record.
+ */
+export async function verifyPayment(
+  paymentId: string,
+  preimage: string,
+): Promise<TVerifyPaymentResult> {
+  const record = await getPaymentById(paymentId);
+  if (!record) {
+    return { valid: false, reason: 'Payment not found' };
+  }
+
+  if (record.status === 'expired') {
+    return { valid: false, reason: 'Invoice expired' };
+  }
+
+  if (record.status === 'paid') {
+    return { valid: true, record };
+  }
+
+  if (record.preimage !== preimage) {
+    return { valid: false, reason: 'Invalid payment proof' };
+  }
+
+  const paid = await markPaymentPaid(paymentId);
+  if (!paid) {
+    return { valid: false, reason: 'Unable to confirm payment' };
+  }
+
+  return { valid: true, record: paid };
+}
+
+export function findProtectedRoute(pathname: string) {
+  return PROTECTED_ROUTES.find((route) => pathname.startsWith(route.path));
+}

package/dist/templates/modules/payment-gated-content/lib/payment-store.ts

@@ -0,0 +1,104 @@
+import { randomBytes } from 'crypto';
+
+export type TPaymentStatus = 'pending' | 'paid' | 'expired';
+
+export type TPaymentRecord = {
+  id: string;
+  contentId: string;
+  invoice: string;
+  preimage: string;
+  amountSats: number;
+  memo: string;
+  status: TPaymentStatus;
+  createdAt: number;
+  paidAt: number | null;
+  metadata?: Record<string, string>;
+};
+
+const payments = new Map<string, TPaymentRecord>();
+const INVOICE_TTL_MS = 60 * 60 * 1000;
+
+function generateId(): string {
+  return randomBytes(16).toString('hex');
+}
+
+function generatePreimage(): string {
+  return randomBytes(32).toString('hex');
+}
+
+function buildMockInvoice(amountSats: number, paymentId: string): string {
+  const amountPart = amountSats.toString(16).padStart(6, '0');
+  return `lnbc${amountPart}n1p${paymentId.slice(0, 40)}`;
+}
+
+/**
+ * Creates a pending payment record. Uses in-memory storage by default;
+ * when DATABASE_URL is set and lib/db exists, the database module can extend this.
+ */
+export async function createPaymentRecord(options: {
+  contentId: string;
+  amountSats: number;
+  memo: string;
+  metadata?: Record<string, string>;
+}): Promise<TPaymentRecord> {
+  const id = generateId();
+  const preimage = generatePreimage();
+  const record: TPaymentRecord = {
+    id,
+    contentId: options.contentId,
+    invoice: buildMockInvoice(options.amountSats, id),
+    preimage,
+    amountSats: options.amountSats,
+    memo: options.memo,
+    status: 'pending',
+    createdAt: Date.now(),
+    paidAt: null,
+    metadata: options.metadata,
+  };
+
+  payments.set(id, record);
+  return record;
+}
+
+export async function getPaymentById(id: string): Promise<TPaymentRecord | null> {
+  const record = payments.get(id);
+  if (!record) return null;
+
+  if (
+    record.status === 'pending' &&
+    Date.now() - record.createdAt > INVOICE_TTL_MS
+  ) {
+    record.status = 'expired';
+    payments.set(id, record);
+  }
+
+  return record;
+}
+
+export async function getPaymentByPreimage(
+  preimage: string,
+): Promise<TPaymentRecord | null> {
+  for (const record of payments.values()) {
+    if (record.preimage === preimage) return record;
+  }
+  return null;
+}
+
+export async function markPaymentPaid(id: string): Promise<TPaymentRecord | null> {
+  const record = await getPaymentById(id);
+  if (!record || record.status !== 'pending') return null;
+
+  record.status = 'paid';
+  record.paidAt = Date.now();
+  payments.set(id, record);
+  return record;
+}
+
+export async function hasPaidForContent(contentId: string): Promise<boolean> {
+  for (const record of payments.values()) {
+    if (record.contentId === contentId && record.status === 'paid') {
+      return true;
+    }
+  }
+  return false;
+}

package/dist/templates/modules/payment-gated-content/module.json

@@ -0,0 +1,24 @@
+{
+  "name": "payment-gated-content",
+  "description": "Lock content behind a lightning payment gate",
+  "dependencies": [],
+  "devDependencies": [],
+  "files": [
+    { "src": "proxy.ts", "dest": "proxy.ts", "merge": "replace" },
+    { "src": "lib/payment-gate.ts", "dest": "lib/payment-gate.ts", "merge": "add" },
+    { "src": "lib/payment-store.ts", "dest": "lib/payment-store.ts", "merge": "add" },
+    { "src": "components/payment-gated/PayGate.tsx", "dest": "components/payment-gated/PayGate.tsx", "merge": "add" },
+    { "src": "app/api/payment-gate/invoice/route.ts", "dest": "app/api/payment-gate/invoice/route.ts", "merge": "add" },
+    { "src": "app/api/payment-gate/verify/route.ts", "dest": "app/api/payment-gate/verify/route.ts", "merge": "add" },
+    { "src": "app/demo/payment-gated/page.tsx", "dest": "app/demo/payment-gated/page.tsx", "merge": "add" },
+    { "src": "app/demo/payment-gated/article/page.tsx", "dest": "app/demo/payment-gated/article/page.tsx", "merge": "add" }
+  ],
+  "envVars": [
+    {
+      "key": "PAYMENT_GATE_SECRET",
+      "description": "HMAC secret for signing payment access cookies",
+      "example": "replace-with-a-long-random-string",
+      "required": false
+    }
+  ]
+}

package/dist/templates/modules/payment-gated-content/proxy.ts

@@ -0,0 +1,27 @@
+import { NextRequest, NextResponse } from 'next/server';
+import {
+  checkPaymentAccess,
+  findProtectedRoute,
+} from './lib/payment-gate';
+
+export default async function proxy(request: NextRequest) {
+  const protectedRoute = findProtectedRoute(request.nextUrl.pathname);
+  if (!protectedRoute) {
+    return NextResponse.next();
+  }
+
+  const hasAccess = await checkPaymentAccess(request, protectedRoute.contentId);
+  if (hasAccess) {
+    return NextResponse.next();
+  }
+
+  const url = request.nextUrl.clone();
+  url.pathname = '/demo/payment-gated';
+  url.searchParams.set('redirect', protectedRoute.path);
+  url.searchParams.set('contentId', protectedRoute.contentId);
+  return NextResponse.redirect(url);
+}
+
+export const config = {
+  matcher: ['/((?!_next/static|_next/image|favicon.ico|api/payment-gate).*)'],
+};

package/dist/templates/modules/webln-payments/app/demo/webln/page.tsx

@@ -0,0 +1,176 @@
+'use client';
+
+import Link from 'next/link';
+import { useCallback, useState } from 'react';
+import { PayButton } from '../../../components/webln/PayButton';
+import { InvoiceCard } from '../../../components/webln/InvoiceCard';
+import { PaymentHistory } from '../../../components/webln/PaymentHistory';
+import { usePaymentFlow } from '../../../hooks/usePaymentFlow';
+import { addPaymentRecord } from '../../../lib/payment-history';
+
+const DEMO_SATS = 21;
+const DEMO_MEMO = 'demo payment';
+
+export default function WeblnDemoPage() {
+  const { recordReceivedPayment } = usePaymentFlow();
+  const [demoInvoice, setDemoInvoice] = useState('');
+  const [howItWorksOpen, setHowItWorksOpen] = useState(false);
+
+  const handleInvoiceReady = useCallback((invoice: string) => {
+    setDemoInvoice(invoice);
+  }, []);
+
+  function handlePaySuccess(preimage: string) {
+    addPaymentRecord({
+      amountSats: DEMO_SATS,
+      memo: DEMO_MEMO,
+      timestamp: Date.now(),
+      preimage,
+      type: 'send',
+    });
+  }
+
+  function handleInvoicePaid(preimage: string) {
+    recordReceivedPayment({
+      amountSats: DEMO_SATS,
+      memo: DEMO_MEMO,
+      preimage,
+    });
+  }
+
+  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)]">
+            WebLN Payments
+          </h1>
+          <p className="max-w-[75ch] text-sm leading-[1.65] text-[var(--color-text-muted)]">
+            Send and receive Lightning payments through the WebLN browser API. Inside Fedi, your
+            wallet is injected automatically. No extensions required.
+          </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)]">
+                Receive payment
+              </h2>
+              <p className="text-sm leading-[1.65] text-[var(--color-text-muted)]">
+                Creates a BOLT11 invoice via <code className="font-mono text-xs">makeInvoice()</code>.
+                Scan the QR code or copy the invoice string to pay.
+              </p>
+            </div>
+            <InvoiceCard
+              sats={DEMO_SATS}
+              memo={DEMO_MEMO}
+              onInvoice={handleInvoiceReady}
+              onPaid={handleInvoicePaid}
+            />
+          </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)]">
+                Send payment
+              </h2>
+              <p className="text-sm leading-[1.65] text-[var(--color-text-muted)]">
+                Pays the invoice above via <code className="font-mono text-xs">sendPayment()</code>.
+                The preimage returned is cryptographic proof that payment completed.
+              </p>
+            </div>
+            {demoInvoice ? (
+              <PayButton
+                invoice={demoInvoice}
+                amountSats={DEMO_SATS}
+                memo={DEMO_MEMO}
+                onSuccess={handlePaySuccess}
+              />
+            ) : (
+              <p className="text-sm text-[var(--color-text-subtle)]">Waiting for invoice…</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)]">
+                Payment history
+              </h2>
+              <p className="text-sm leading-[1.65] text-[var(--color-text-muted)]">
+                Recent payments stored in your browser. Useful for demos, not a substitute for
+                server-side records in production.
+              </p>
+            </div>
+            <PaymentHistory />
+          </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="webln-how-it-works"
+            >
+              How this works
+              <span aria-hidden>{howItWorksOpen ? '−' : '+'}</span>
+            </button>
+
+            {howItWorksOpen && (
+              <div
+                id="webln-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 style={{ color: 'var(--color-text)' }}>WebLN</strong> is a JavaScript
+                  standard that lets web apps talk to a Lightning wallet. Fedi injects{' '}
+                  <code className="font-mono text-xs">window.webln</code> into every Mini App
+                  WebView before your page loads.
+                </p>
+                <p>
+                  To send sats, call <code className="font-mono text-xs">sendPayment(invoice)</code>{' '}
+                  with a BOLT11 string. To receive, call{' '}
+                  <code className="font-mono text-xs">makeInvoice({'{ amount, defaultMemo }'})</code>{' '}
+                  and share the returned payment request.
+                </p>
+                <p>
+                  On success, <code className="font-mono text-xs">sendPayment</code> returns a{' '}
+                  <strong style={{ color: 'var(--color-text)' }}>preimage</strong>, a 32-byte hex
+                  string that proves the payment happened. Your server can verify it before
+                  unlocking content or granting access.
+                </p>
+                <p>
+                  Outside Fedi, <code className="font-mono text-xs">window.webln</code> is undefined.
+                  In development, this project uses a mock provider so you can test flows locally.
+                </p>
+              </div>
+            )}
+          </section>
+        </div>
+      </div>
+    </div>
+  );
+}

package/dist/templates/modules/webln-payments/components/webln/InvoiceCard.tsx

@@ -0,0 +1,170 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { QRCodeSVG } from 'qrcode.react';
+import { usePayment } from '../../lib/webln';
+import { formatSats } from '../../lib/payment-history';
+
+interface IInvoiceCardProps {
+  sats: number;
+  memo?: string;
+  onPaid?: (preimage: string) => void;
+  onInvoice?: (invoice: string) => void;
+}
+
+function mockPreimage(): string {
+  let result = '';
+  for (let i = 0; i < 64; i++) {
+    result += Math.floor(Math.random() * 16).toString(16);
+  }
+  return result;
+}
+
+export function InvoiceCard({ sats, memo, onPaid, onInvoice }: IInvoiceCardProps) {
+  const { makeInvoice, isCreatingInvoice, paymentError, lastInvoice } = usePayment();
+  const [copied, setCopied] = useState(false);
+  const [isPaid, setIsPaid] = useState(false);
+  const [paidPreimage, setPaidPreimage] = useState<string | null>(null);
+
+  useEffect(() => {
+    makeInvoice({ amount: String(sats), defaultMemo: memo ?? '' });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sats, memo]);
+
+  useEffect(() => {
+    if (lastInvoice) {
+      onInvoice?.(lastInvoice);
+    }
+  }, [lastInvoice, onInvoice]);
+
+  useEffect(() => {
+    if (!lastInvoice || isPaid || isCreatingInvoice) return;
+
+    if (process.env.NODE_ENV === 'development') {
+      const timer = window.setTimeout(() => {
+        const preimage = mockPreimage();
+        setPaidPreimage(preimage);
+        setIsPaid(true);
+        onPaid?.(preimage);
+      }, 5000);
+      return () => window.clearTimeout(timer);
+    }
+  }, [lastInvoice, isPaid, isCreatingInvoice, onPaid]);
+
+  async function handleCopy() {
+    if (!lastInvoice) return;
+    await navigator.clipboard.writeText(lastInvoice);
+    setCopied(true);
+    window.setTimeout(() => setCopied(false), 2000);
+  }
+
+  return (
+    <div
+      className="rounded-xl p-4 flex flex-col gap-3"
+      style={{
+        background: 'var(--color-surface-1)',
+        border: '1px solid var(--color-border)',
+        borderRadius: 'var(--radius-lg)',
+      }}
+      aria-label={`Invoice for ${formatSats(sats)}`}
+    >
+      <div className="flex items-center justify-between gap-2">
+        <span className="text-sm font-semibold" style={{ color: 'var(--color-text)' }}>
+          {formatSats(sats)}
+        </span>
+        {memo && (
+          <span className="text-xs truncate max-w-[50%]" style={{ color: 'var(--color-text-muted)' }}>
+            {memo}
+          </span>
+        )}
+      </div>
+
+      {isCreatingInvoice && (
+        <p
+          className="text-xs font-mono"
+          style={{ color: 'var(--color-text-subtle)' }}
+          aria-live="polite"
+        >
+          Generating invoice…
+        </p>
+      )}
+
+      {isPaid && (
+        <div
+          className="flex items-center gap-2 rounded-lg px-3 py-2 transition-opacity duration-300 ease-[cubic-bezier(0.25,1,0.5,1)] opacity-100"
+          style={{
+            background: 'var(--color-accent-dim)',
+            borderRadius: 'var(--radius-md)',
+          }}
+          role="status"
+          aria-label={`Invoice paid: ${formatSats(sats)}`}
+        >
+          <span
+            className="flex h-5 w-5 items-center justify-center rounded-full text-xs font-bold"
+            style={{ background: 'var(--color-accent)', color: 'var(--color-primary-foreground)' }}
+            aria-hidden
+          >
+            ✓
+          </span>
+          <span className="text-sm font-semibold" style={{ color: 'var(--color-accent)' }}>
+            Paid
+          </span>
+        </div>
+      )}
+
+      {lastInvoice && !isCreatingInvoice && !isPaid && (
+        <>
+          <div
+            className="mx-auto flex w-full max-w-[160px] items-center justify-center rounded-lg p-3"
+            style={{ background: 'var(--color-surface-2)' }}
+            aria-label="Invoice QR code"
+          >
+            <QRCodeSVG
+              value={lastInvoice}
+              size={136}
+              level="M"
+              bgColor="transparent"
+              fgColor="var(--color-text)"
+            />
+          </div>
+
+          <p className="text-center text-xs" style={{ color: 'var(--color-text-subtle)' }}>
+            {process.env.NODE_ENV === 'development'
+              ? 'Simulated payment in 5 seconds (dev only)'
+              : 'Waiting for payment…'}
+          </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 ? 'Invoice copied to clipboard' : 'Copy invoice to clipboard'}
+          >
+            {copied ? 'Copied!' : 'Copy invoice'}
+          </button>
+        </>
+      )}
+
+      {isPaid && paidPreimage && (
+        <p className="font-mono text-xs" style={{ color: 'var(--color-text-muted)' }}>
+          {paidPreimage.slice(0, 12)}…{paidPreimage.slice(-8)}
+        </p>
+      )}
+
+      {paymentError && (
+        <p
+          className="text-xs"
+          style={{ color: 'var(--color-error, #ef4444)' }}
+          role="alert"
+        >
+          {paymentError.message}
+        </p>
+      )}
+    </div>
+  );
+}