create-fedi-app 0.1.0

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

@@ -0,0 +1,92 @@
+'use client';
+
+import { useState } from 'react';
+import { usePayment } from '../../lib/webln';
+import { formatSats, truncatePreimage } from '../../lib/payment-history';
+
+interface IPayButtonProps {
+  invoice: string;
+  amountSats: number;
+  memo?: string;
+  onSuccess: (preimage: string) => void;
+}
+
+export function PayButton({ invoice, amountSats, memo, onSuccess }: IPayButtonProps) {
+  const { sendPayment, isPaying, paymentError } = usePayment();
+  const [paid, setPaid] = useState(false);
+  const [preimage, setPreimage] = useState<string | null>(null);
+
+  async function handlePay() {
+    const result = await sendPayment(invoice);
+    if (result?.preimage) {
+      setPreimage(result.preimage);
+      setPaid(true);
+      onSuccess(result.preimage);
+    }
+  }
+
+  if (paid && preimage) {
+    return (
+      <div
+        className="rounded-lg px-4 py-3 text-sm transition-opacity duration-300 ease-[cubic-bezier(0.25,1,0.5,1)] opacity-100"
+        style={{
+          background: 'var(--color-accent-dim)',
+          color: 'var(--color-accent)',
+          borderRadius: 'var(--radius-md)',
+        }}
+        role="status"
+        aria-label={`Payment of ${formatSats(amountSats)} sent successfully`}
+      >
+        <p className="font-semibold mb-0.5">Payment sent</p>
+        <p className="text-xs opacity-80 mb-1">{formatSats(amountSats)}</p>
+        <p className="font-mono text-xs opacity-70" aria-label={`Preimage ${truncatePreimage(preimage)}`}>
+          {truncatePreimage(preimage)}
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-2">
+      <button
+        type="button"
+        onClick={handlePay}
+        disabled={isPaying || !invoice}
+        className="inline-flex items-center justify-center gap-2 rounded-lg px-5 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:opacity-40 disabled:cursor-not-allowed"
+        style={{
+          background: 'var(--color-accent)',
+          color: 'var(--color-primary-foreground)',
+          borderRadius: 'var(--radius-md)',
+        }}
+        aria-label={
+          isPaying
+            ? `Paying ${formatSats(amountSats)}`
+            : `Pay ${formatSats(amountSats)}${memo ? ` for ${memo}` : ''}`
+        }
+        aria-busy={isPaying}
+      >
+        {isPaying ? (
+          <>
+            <span
+              className="h-4 w-4 rounded-full border-2 border-white/30 border-t-white animate-spin"
+              aria-hidden
+            />
+            Paying…
+          </>
+        ) : (
+          `Pay ${formatSats(amountSats)}`
+        )}
+      </button>
+      {paymentError && (
+        <p
+          className="text-xs"
+          style={{ color: 'var(--color-error, #ef4444)' }}
+          role="alert"
+          aria-label={`Payment failed: ${paymentError.message}`}
+        >
+          {paymentError.message}
+        </p>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,102 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import {
+  formatSats,
+  formatTimestamp,
+  getPaymentHistory,
+  PAYMENT_HISTORY_EVENT,
+  PAYMENT_HISTORY_KEY,
+  truncatePreimage,
+  type TPaymentRecord,
+} from '../../lib/payment-history';
+
+export function PaymentHistory() {
+  const [records, setRecords] = useState<TPaymentRecord[]>([]);
+
+  useEffect(() => {
+    function refresh() {
+      setRecords(getPaymentHistory());
+    }
+
+    refresh();
+    window.addEventListener(PAYMENT_HISTORY_EVENT, refresh);
+    window.addEventListener('storage', (event) => {
+      if (event.key === PAYMENT_HISTORY_KEY) refresh();
+    });
+    return () => window.removeEventListener(PAYMENT_HISTORY_EVENT, refresh);
+  }, []);
+
+  if (records.length === 0) {
+    return (
+      <div
+        className="rounded-xl p-4 text-center"
+        style={{
+          background: 'var(--color-surface-1)',
+          border: '1px solid var(--color-border)',
+          borderRadius: 'var(--radius-lg)',
+        }}
+        aria-label="No payment history"
+      >
+        <p className="text-sm font-medium mb-1" style={{ color: 'var(--color-text)' }}>
+          No payments yet
+        </p>
+        <p className="text-xs leading-[1.65]" style={{ color: 'var(--color-text-muted)' }}>
+          Send or receive a Lightning payment and it will appear here. History is stored locally
+          in your browser, not on a server.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <ul className="flex flex-col gap-2" aria-label="Recent payments">
+      {records.map((record) => (
+        <li
+          key={record.id}
+          className="rounded-xl p-3"
+          style={{
+            background: 'var(--color-surface-1)',
+            border: '1px solid var(--color-border)',
+            borderRadius: 'var(--radius-lg)',
+          }}
+        >
+          <div className="flex items-start justify-between gap-2 mb-1">
+            <div>
+              <p className="text-sm font-semibold" style={{ color: 'var(--color-text)' }}>
+                {formatSats(record.amountSats)}
+              </p>
+              <p className="text-xs" style={{ color: 'var(--color-text-muted)' }}>
+                {record.memo}
+              </p>
+            </div>
+            <span
+              className="text-xs font-medium shrink-0"
+              style={{
+                color: record.type === 'send' ? 'var(--color-text-subtle)' : 'var(--color-accent)',
+              }}
+            >
+              {record.type === 'send' ? 'Sent' : 'Received'}
+            </span>
+          </div>
+          <div className="flex items-center justify-between gap-2">
+            <time
+              className="text-xs"
+              style={{ color: 'var(--color-text-subtle)' }}
+              dateTime={new Date(record.timestamp).toISOString()}
+            >
+              {formatTimestamp(record.timestamp)}
+            </time>
+            <span
+              className="font-mono text-xs"
+              style={{ color: 'var(--color-text-muted)' }}
+              aria-label={`Preimage ${truncatePreimage(record.preimage)}`}
+            >
+              {truncatePreimage(record.preimage)}
+            </span>
+          </div>
+        </li>
+      ))}
+    </ul>
+  );
+}

package/dist/templates/modules/webln-payments/hooks/__tests__/usePaymentFlow.test.tsx

@@ -0,0 +1,182 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { renderHook, act, waitFor } from '@testing-library/react';
+import type { ReactNode } from 'react';
+import { WebLNProvider, MockWebLNProvider, type RequestInvoiceResponse } from '../../lib/webln';
+import { usePaymentFlow } from '../usePaymentFlow';
+import {
+  clearPaymentHistory,
+  getPaymentHistory,
+  PAYMENT_HISTORY_KEY,
+} from '../../lib/payment-history';
+
+const VALID_INVOICE =
+  'lnbc21n1p000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000';
+
+function createWrapper(mock = new MockWebLNProvider({ paymentDelay: 0 })) {
+  return function Wrapper({ children }: { children: ReactNode }) {
+    return <WebLNProvider mockProvider={mock}>{children}</WebLNProvider>;
+  };
+}
+
+async function waitForProviderReady(
+  result: { current: ReturnType<typeof usePaymentFlow> },
+) {
+  await waitFor(async () => {
+    let invoice = null;
+    await act(async () => {
+      invoice = await result.current.createInvoice(1, 'probe');
+    });
+    expect(invoice).not.toBeNull();
+  });
+}
+
+describe('usePaymentFlow', () => {
+  beforeEach(() => {
+    clearPaymentHistory();
+    vi.clearAllMocks();
+  });
+
+  it('starts in idle state with empty history', () => {
+    const { result } = renderHook(() => usePaymentFlow(), {
+      wrapper: createWrapper(),
+    });
+
+    expect(result.current.step).toBe('idle');
+    expect(result.current.history).toEqual([]);
+  });
+
+  it('pay() records a send payment on success', async () => {
+    const { result } = renderHook(() => usePaymentFlow(), {
+      wrapper: createWrapper(),
+    });
+
+    await waitForProviderReady(result);
+
+    await act(async () => {
+      await result.current.pay(VALID_INVOICE, { amountSats: 21, memo: 'test send' });
+    });
+
+    expect(result.current.step).toBe('success');
+
+    const history = getPaymentHistory();
+    expect(history).toHaveLength(1);
+    expect(history[0].amountSats).toBe(21);
+    expect(history[0].memo).toBe('test send');
+    expect(history[0].type).toBe('send');
+    expect(history[0].preimage.length).toBeGreaterThan(0);
+  });
+
+  it('pay() sets error step when payment fails', async () => {
+    const mock = new MockWebLNProvider({
+      paymentDelay: 0,
+      shouldFail: true,
+      failureMessage: 'Insufficient funds',
+    });
+
+    const { result } = renderHook(() => usePaymentFlow(), {
+      wrapper: createWrapper(mock),
+    });
+
+    await waitForProviderReady(result);
+
+    await act(async () => {
+      await result.current.pay(VALID_INVOICE, { amountSats: 21 });
+    });
+
+    expect(result.current.step).toBe('error');
+    expect(getPaymentHistory()).toHaveLength(0);
+  });
+
+  it('createInvoice() returns an invoice and resets to idle', async () => {
+    const { result } = renderHook(() => usePaymentFlow(), {
+      wrapper: createWrapper(),
+    });
+
+    await waitForProviderReady(result);
+
+    let invoice: RequestInvoiceResponse | null = null;
+    await act(async () => {
+      invoice = await result.current.createInvoice(100, 'coffee');
+    });
+
+    expect(invoice).not.toBeNull();
+    expect(invoice!.paymentRequest).toMatch(/^lnbc/);
+
+    expect(result.current.step).toBe('idle');
+    expect(result.current.lastInvoice).toMatch(/^lnbc/);
+  });
+
+  it('recordReceivedPayment() adds a receive entry to history', () => {
+    const { result } = renderHook(() => usePaymentFlow(), {
+      wrapper: createWrapper(),
+    });
+
+    act(() => {
+      result.current.recordReceivedPayment({
+        amountSats: 50,
+        memo: 'received',
+        preimage: 'abcd'.repeat(16),
+      });
+    });
+
+    expect(result.current.history).toHaveLength(1);
+    expect(result.current.history[0].type).toBe('receive');
+    expect(result.current.step).toBe('success');
+    expect(window.localStorage.getItem(PAYMENT_HISTORY_KEY)).toBeTruthy();
+  });
+
+  it('reset() returns step to idle', async () => {
+    const { result } = renderHook(() => usePaymentFlow(), {
+      wrapper: createWrapper(),
+    });
+
+    await waitForProviderReady(result);
+
+    await act(async () => {
+      await result.current.pay(VALID_INVOICE, { amountSats: 21 });
+    });
+
+    act(() => {
+      result.current.reset();
+    });
+
+    expect(result.current.step).toBe('idle');
+  });
+
+  it('refreshHistory() reloads from localStorage', () => {
+    window.localStorage.setItem(
+      PAYMENT_HISTORY_KEY,
+      JSON.stringify([
+        {
+          id: '1',
+          amountSats: 10,
+          memo: 'stored',
+          timestamp: Date.now(),
+          preimage: 'ee'.repeat(32),
+          type: 'send',
+        },
+      ]),
+    );
+
+    const { result } = renderHook(() => usePaymentFlow(), {
+      wrapper: createWrapper(),
+    });
+
+    act(() => {
+      clearPaymentHistory();
+      result.current.refreshHistory();
+    });
+
+    expect(result.current.history).toHaveLength(0);
+  });
+});
+
+describe('payment-history utilities', () => {
+  beforeEach(() => {
+    clearPaymentHistory();
+  });
+
+  it('getPaymentHistory returns empty array when storage is empty', () => {
+    expect(getPaymentHistory()).toEqual([]);
+  });
+});

package/dist/templates/modules/webln-payments/hooks/usePaymentFlow.ts

@@ -0,0 +1,100 @@
+'use client';
+
+import { useCallback, useState } from 'react';
+import { usePayment } from '../lib/webln';
+import {
+  addPaymentRecord,
+  getPaymentHistory,
+  type TPaymentRecord,
+} from '../lib/payment-history';
+
+type TFlowStep = 'idle' | 'paying' | 'success' | 'error';
+
+interface IPayOptions {
+  amountSats: number;
+  memo?: string;
+}
+
+interface IReceiveOptions {
+  amountSats: number;
+  memo?: string;
+  preimage: string;
+}
+
+/**
+ * Orchestrates WebLN pay/receive flows and persists results to localStorage.
+ */
+export function usePaymentFlow() {
+  const {
+    sendPayment,
+    makeInvoice,
+    isPaying,
+    isCreatingInvoice,
+    paymentError,
+    lastPreimage,
+    lastInvoice,
+  } = usePayment();
+  const [step, setStep] = useState<TFlowStep>('idle');
+  const [history, setHistory] = useState<TPaymentRecord[]>(() => getPaymentHistory());
+
+  const refreshHistory = useCallback(() => {
+    setHistory(getPaymentHistory());
+  }, []);
+
+  async function pay(invoice: string, options: IPayOptions) {
+    setStep('paying');
+    const result = await sendPayment(invoice);
+    if (result?.preimage) {
+      addPaymentRecord({
+        amountSats: options.amountSats,
+        memo: options.memo ?? 'Sent payment',
+        timestamp: Date.now(),
+        preimage: result.preimage,
+        type: 'send',
+      });
+      refreshHistory();
+      setStep('success');
+      return result;
+    }
+    setStep('error');
+    return null;
+  }
+
+  async function createInvoice(sats: number, memo?: string) {
+    setStep('paying');
+    const result = await makeInvoice({ amount: String(sats), defaultMemo: memo ?? '' });
+    setStep(result ? 'idle' : 'error');
+    return result;
+  }
+
+  function recordReceivedPayment(options: IReceiveOptions) {
+    addPaymentRecord({
+      amountSats: options.amountSats,
+      memo: options.memo ?? 'Received payment',
+      timestamp: Date.now(),
+      preimage: options.preimage,
+      type: 'receive',
+    });
+    refreshHistory();
+    setStep('success');
+  }
+
+  function reset() {
+    setStep('idle');
+  }
+
+  return {
+    step,
+    pay,
+    createInvoice,
+    recordReceivedPayment,
+    reset,
+    isPaying,
+    isCreatingInvoice,
+    paymentError,
+    lastPreimage,
+    lastInvoice,
+    history,
+    refreshHistory,
+  };
+}

package/dist/templates/modules/webln-payments/lib/payment-history.ts

@@ -0,0 +1,75 @@
+export type TPaymentRecord = {
+  id: string;
+  amountSats: number;
+  memo: string;
+  timestamp: number;
+  preimage: string;
+  type: 'send' | 'receive';
+};
+
+export const PAYMENT_HISTORY_KEY = 'fedi-payment-history';
+export const PAYMENT_HISTORY_EVENT = 'fedi-payment-history-updated';
+const MAX_RECORDS = 50;
+
+function notifyHistoryUpdated(): void {
+  if (typeof window === 'undefined') return;
+  window.dispatchEvent(new CustomEvent(PAYMENT_HISTORY_EVENT));
+}
+
+/**
+ * Reads payment history from localStorage, newest first.
+ */
+export function getPaymentHistory(): TPaymentRecord[] {
+  if (typeof window === 'undefined') return [];
+  try {
+    const raw = window.localStorage.getItem(PAYMENT_HISTORY_KEY);
+    if (!raw) return [];
+    const parsed = JSON.parse(raw) as TPaymentRecord[];
+    return Array.isArray(parsed) ? parsed : [];
+  } catch {
+    return [];
+  }
+}
+
+/**
+ * Appends a payment record and persists to localStorage.
+ */
+export function addPaymentRecord(
+  record: Omit<TPaymentRecord, 'id'>,
+): TPaymentRecord {
+  const entry: TPaymentRecord = {
+    ...record,
+    id: `${record.timestamp}-${record.preimage.slice(0, 8)}`,
+  };
+  const history = [entry, ...getPaymentHistory()].slice(0, MAX_RECORDS);
+  window.localStorage.setItem(PAYMENT_HISTORY_KEY, JSON.stringify(history));
+  notifyHistoryUpdated();
+  return entry;
+}
+
+/**
+ * Clears all stored payment records.
+ */
+export function clearPaymentHistory(): void {
+  if (typeof window === 'undefined') return;
+  window.localStorage.removeItem(PAYMENT_HISTORY_KEY);
+  notifyHistoryUpdated();
+}
+
+export function formatSats(sats: number): string {
+  return `${sats.toLocaleString()} sats`;
+}
+
+export function truncatePreimage(preimage: string): string {
+  if (preimage.length <= 20) return preimage;
+  return `${preimage.slice(0, 12)}…${preimage.slice(-8)}`;
+}
+
+export function formatTimestamp(timestamp: number): string {
+  return new Date(timestamp).toLocaleString(undefined, {
+    month: 'short',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit',
+  });
+}

package/dist/templates/modules/webln-payments/module.json

@@ -0,0 +1,17 @@
+{
+  "name": "webln-payments",
+  "description": "WebLN Lightning payment send and receive demos",
+  "dependencies": ["qrcode.react"],
+  "devDependencies": [],
+  "files": [
+    { "src": "components/webln/PayButton.tsx", "dest": "components/webln/PayButton.tsx", "merge": "add" },
+    { "src": "components/webln/InvoiceCard.tsx", "dest": "components/webln/InvoiceCard.tsx", "merge": "add" },
+    { "src": "components/webln/PaymentHistory.tsx", "dest": "components/webln/PaymentHistory.tsx", "merge": "add" },
+    { "src": "hooks/usePaymentFlow.ts", "dest": "hooks/usePaymentFlow.ts", "merge": "add" },
+    { "src": "lib/payment-history.ts", "dest": "lib/payment-history.ts", "merge": "add" },
+    { "src": "hooks/__tests__/usePaymentFlow.test.tsx", "dest": "hooks/__tests__/usePaymentFlow.test.tsx", "merge": "add" },
+    { "src": "tests/e2e/webln-payment.spec.ts", "dest": "tests/e2e/webln-payment.spec.ts", "merge": "add" },
+    { "src": "app/demo/webln/page.tsx", "dest": "app/demo/webln/page.tsx", "merge": "add" }
+  ],
+  "envVars": []
+}

package/dist/templates/modules/webln-payments/tests/e2e/webln-payment.spec.ts

@@ -0,0 +1,41 @@
+import { test, expect } from '@playwright/test';
+
+/**
+ * Full WebLN payment flow using the dev MockWebLNProvider (enabled by default in Providers).
+ * InvoiceCard generates an invoice; PayButton pays it; success states appear in the UI.
+ */
+test('webln demo: generate invoice, pay, and see success', async ({ page }) => {
+  await page.goto('/demo/webln');
+
+  await expect(page.getByRole('heading', { name: 'WebLN Payments' })).toBeVisible();
+
+  // Wait for invoice generation and QR to appear
+  await expect(page.getByRole('button', { name: /copy invoice/i })).toBeVisible({
+    timeout: 10_000,
+  });
+
+  // Pay the generated invoice
+  const payButton = page.getByRole('button', { name: /pay 21 sats/i });
+  await expect(payButton).toBeEnabled({ timeout: 10_000 });
+  await payButton.click();
+
+  // Success state with preimage
+  await expect(page.getByRole('status', { name: /payment of 21 sats sent successfully/i })).toBeVisible({
+    timeout: 10_000,
+  });
+
+  // Payment appears in local history
+  await expect(page.getByLabel('Recent payments')).toBeVisible();
+  await expect(page.getByText('Sent')).toBeVisible();
+});
+
+test('webln demo: how this works section expands', async ({ page }) => {
+  await page.goto('/demo/webln');
+
+  const toggle = page.getByRole('button', { name: 'How this works' });
+  await expect(toggle).toHaveAttribute('aria-expanded', 'false');
+
+  await toggle.click();
+  await expect(toggle).toHaveAttribute('aria-expanded', 'true');
+  await expect(page.getByText(/WebLN is a JavaScript standard/i)).toBeVisible();
+});

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "create-fedi-app",
+  "version": "0.1.0",
+  "description": "CLI scaffolder for Fedi Bitcoin mini apps",
+  "bin": {
+    "create-fedi-app": "./dist/index.js"
+  },
+  "files": ["dist/"],
+  "keywords": ["fedi", "fedimint", "bitcoin", "lightning", "webln", "nostr", "mini-app", "nextjs"],
+  "license": "MIT",
+  "scripts": {
+    "build": "tsup && rm -rf dist/templates && cp -R ../../templates dist/templates",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "bun run build && bun run typecheck"
+  },
+  "dependencies": {
+    "@clack/prompts": "^0.9.0",
+    "execa": "^9.5.0",
+    "fs-extra": "^11.2.0",
+    "picocolors": "^1.1.0",
+    "semver": "^7.6.0"
+  },
+  "devDependencies": {
+    "@types/fs-extra": "^11.0.4",
+    "@types/semver": "^7.5.8",
+    "tsup": "^8.3.0"
+  }
+}