\n \n

\n )\n}\n\n// ─── Shared constants ────────────────────────────────────────────────────────\nconst COLORS = {\n bg: '#09090b',\n card: '#18181b',\n border: '#27272a',\n borderHi: '#3f3f46',\n text: '#fafafa',\n muted: '#71717a',\n accent: '#a78bfa',\n accentDim: '#7c3aed',\n green: '#4ade80',\n greenDim: '#166534',\n red: '#f87171',\n redDim: '#991b1b',\n orange: '#fb923c',\n blue: '#60a5fa',\n pink: '#f472b6',\n cyan: '#22d3ee',\n yellow: '#facc15'\n}\n\nconst mono = \"'SF Mono', 'Fira Code', 'JetBrains Mono', monospace\"\nconst sans = \"-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif\"\n\n// ─── Animated typing text ────────────────────────────────────────────────────\nfunction TypeText({ text, speed = 20, onDone, style }) {\n const [displayed, setDisplayed] = useState('')\n const idx = useRef(0)\n useEffect(() => {\n setDisplayed('')\n idx.current = 0\n const iv = setInterval(() => {\n idx.current++\n setDisplayed(text.slice(0, idx.current))\n if (idx.current >= text.length) {\n clearInterval(iv)\n onDone?.()\n }\n }, speed)\n return () => clearInterval(iv)\n }, [text, speed])\n return (\n \n {displayed}\n \n ▊\n \n \n )\n}\n\n// ─── Packet animation (flies between client/server) ─────────────────────────\nfunction Packet({ label, color, direction, delay, onArrive }) {\n const [phase, setPhase] = useState('waiting')\n useEffect(() => {\n const t1 = setTimeout(() => setPhase('flying'), delay)\n const t2 = setTimeout(() => {\n setPhase('arrived')\n onArrive?.()\n }, delay + 600)\n return () => {\n clearTimeout(t1)\n clearTimeout(t2)\n }\n }, [delay])\n\n if (phase === 'waiting') return null\n\n const isRight = direction === 'right'\n return (\n \n \n {isRight ? '→ ' : ''}\n {label}\n {!isRight ? ' ←' : ''}\n \n \n )\n}\n\n// ─── HTTP Header display ─────────────────────────────────────────────────────\nfunction HttpBlock({ status, statusColor, headers, body, visible, label }) {\n if (!visible) return null\n return (\n \n {label && (\n \n {label}\n \n )}\n

\n {status}\n

\n {headers.map((h, i) => (\n

\n {h.key}:{' '}\n {h.value}\n

\n ))}\n {body && (\n \n {body}\n \n )}\n \n )\n}\n\n// ─── Code panel ──────────────────────────────────────────────────────────────\nfunction CodePanel({ code, highlightLines, title }) {\n const lines = code.split('\\n')\n return (\n \n \n \n \n \n \n \n {title}\n \n

\n {lines.map((line, i) => {\n const hl = highlightLines?.includes(i)\n return (\n \n \n {i + 1}\n \n {colorize(line)}\n

\n )\n })}\n \n \n )\n}\n\nfunction colorize(line) {\n return line\n .replace(\n /(import|from|export|const|async|await|return|if|function)/g,\n `§kw§$1§/kw§`\n )\n .replace(/('mppx[^']*'|'[^']{1,40}')/g, `§str§$1§/str§`)\n .replace(/(\\/\\/.*)/g, `§cmt§$1§/cmt§`)\n .replace(/(\\d+\\.?\\d*)/g, `§num§$1§/num§`)\n .split(/§(kw|str|cmt|num|\\/kw|\\/str|\\/cmt|\\/num)§/)\n .reduce((acc, part, i, arr) => {\n if (['kw', 'str', 'cmt', 'num'].includes(part)) return acc\n if (['/kw', '/str', '/cmt', '/num'].includes(part)) return acc\n const prev = arr[i - 1]\n const color = prev === 'kw'\n ? COLORS.pink\n : prev === 'str'\n ? COLORS.green\n : prev === 'cmt'\n ? COLORS.muted\n : prev === 'num'\n ? COLORS.orange\n : COLORS.text\n acc.push({part})\n return acc\n }, [])\n}\n\n// ─── Balance meter ───────────────────────────────────────────────────────────\nfunction BalanceMeter({ balance, maxBalance, spent, label }) {\n const pct = Math.max(0, balance / maxBalance * 100)\n return (\n \n \n {label || 'Wallet Balance'}\n \n ${balance.toFixed(4)}\n \n \n \n 50\n ? COLORS.green\n : pct > 20\n ? COLORS.yellow\n : COLORS.red\n }}\n />\n \n {spent > 0 && (\n \n spent: ${spent.toFixed(4)}\n \n )}\n \n )\n}\n\n// ─── Mode configs ────────────────────────────────────────────────────────────\nconst MODES = {\n charge: {\n title: 'One-Time Charge',\n subtitle: '$0.01 per request',\n icon: '⚡',\n color: COLORS.orange,\n code: [\n 'im' + \"port { Mppx, tempo } from 'mppx\" + \"/nextjs'\",\n '',\n 'const mppx = Mppx.create({',\n ' methods: [tempo({',\n \" currency: '0x20c00...00000',\",\n \" recipient: '0xa726...aCF8',\",\n ' })],',\n '})',\n '',\n 'export const GET =',\n ' mppx.charge({',\n \" amount: '0.01',\",\n \" description: 'Random stock photo'\",\n ' })',\n ' (async () => {',\n ' const res = await fetch(',\n \" 'https://picsum.photos/1024/1024'\",\n ' )',\n ' return Response.json({ url: res.url })',\n ' })'\n ].join('\\n'),\n highlightLines: [10, 11, 12, 13]\n },\n session: {\n title: 'Pay-as-you-Go Session',\n subtitle: '$0.01 per photo, off-chain vouchers',\n icon: '\\u{1F504}',\n color: COLORS.blue,\n code: [\n 'im' + \"port { Mppx, tempo } from 'mppx\" + \"/nextjs'\",\n '',\n 'const mppx = Mppx.create({',\n ' methods: [tempo({',\n \" currency: '0x20c00...00000',\",\n \" recipient: '0xa726...aCF8',\",\n ' })],',\n '})',\n '',\n 'export const GET =',\n ' mppx.session({',\n \" amount: '0.01',\",\n \" unitType: 'photo'\",\n ' })',\n ' (async () => {',\n ' const res = await fetch(',\n \" 'https://picsum.photos/200/200'\",\n ' )',\n ' return Response.json({ url: res.url })',\n ' })'\n ].join('\\n'),\n highlightLines: [10, 11, 12, 13]\n },\n stream: {\n title: 'Streamed Payments',\n subtitle: '$0.001 per word via SSE',\n icon: '\\u{1F30A}',\n color: COLORS.cyan,\n code: [\n 'im' + \"port { Mppx, tempo } from 'mppx\" + \"/nextjs'\",\n '',\n 'const mppx = Mppx.create({',\n ' methods: [tempo({',\n \" currency: '0x20c00...00000',\",\n \" recipient: '0xa726...aCF8',\",\n ' sse: true,',\n ' })],',\n '})',\n '',\n 'export const GET =',\n ' mppx.session({',\n \" amount: '0.001',\",\n \" unitType: 'word'\",\n ' })',\n ' (async () => {',\n ' return async function* (stream) {',\n ' for (const word of words) {',\n ' await stream.charge()',\n ' yield word',\n ' }',\n ' }',\n ' })'\n ].join('\\n'),\n highlightLines: [11, 12, 13, 14]\n }\n}\n\n// ─── Main component ──────────────────────────────────────────────────────────\nexport default function MPPDemo() {\n const [mode, setMode] = useState('charge')\n const [step, setStep] = useState(0)\n const [isRunning, setIsRunning] = useState(false)\n const [balance, setBalance] = useState(1.0)\n const [spent, setSpent] = useState(0)\n const [streamWords, setStreamWords] = useState([])\n const [sessionCount, setSessionCount] = useState(0)\n const timerRef = useRef(null)\n\n const cfg = MODES[mode]\n\n const reset = useCallback(() => {\n setStep(0)\n setIsRunning(false)\n setBalance(1.0)\n setSpent(0)\n setStreamWords([])\n setSessionCount(0)\n if (timerRef.current) clearInterval(timerRef.current)\n }, [])\n\n const run = useCallback(() => {\n reset()\n setIsRunning(true)\n // Step 0: Client request\n // Step 1: Server 402\n // Step 2: Client credential\n // Step 3: Server 200 + receipt\n // Step 4+: (session/stream repeats)\n let s = 0\n const advance = () => {\n s++\n setStep(s)\n if (mode === 'charge') {\n if (s === 3) {\n setBalance((b) => b - 0.01)\n setSpent((sp) => sp + 0.01)\n }\n if (s >= 4) {\n clearInterval(timerRef.current)\n setIsRunning(false)\n }\n } else if (mode === 'session') {\n if (s === 3) {\n setBalance((b) => b - 0.01)\n setSpent((sp) => sp + 0.01)\n setSessionCount(1)\n }\n if (s > 3 && s <= 8) {\n setBalance((b) => b - 0.01)\n setSpent((sp) => sp + 0.01)\n setSessionCount((c) => c + 1)\n }\n if (s >= 9) {\n clearInterval(timerRef.current)\n setIsRunning(false)\n }\n } else if (mode === 'stream') {\n const words = [\n 'Two',\n 'roads',\n 'diverged',\n 'in',\n 'a',\n 'yellow',\n 'wood,',\n 'And',\n 'sorry',\n 'I',\n 'could',\n 'not',\n 'travel',\n 'both'\n ]\n if (s === 3) {\n setBalance((b) => b - 0.001)\n setSpent((sp) => sp + 0.001)\n setStreamWords([words[0]])\n }\n if (s > 3 && s - 3 < words.length) {\n const wi = s - 3\n setBalance((b) => b - 0.001)\n setSpent((sp) => sp + 0.001)\n setStreamWords((prev) => [...prev, words[wi]])\n }\n if (s >= 3 + words.length) {\n clearInterval(timerRef.current)\n setIsRunning(false)\n }\n }\n }\n timerRef.current = setInterval(advance, mode === 'stream' ? 350 : 900)\n }, [mode, reset])\n\n useEffect(() => {\n reset()\n }, [mode, reset])\n\n const chargeAmt = mode === 'stream' ? '0.001' : '0.01'\n\n return (\n \n {/* Header */}\n

\n \n MACHINE PAYMENTS PROTOCOL\n

\n \n Interactive Protocol Explorer\n \n

\n Watch HTTP 402 payment flows happen in real-time\n

\n \n\n {/* Mode selector */}\n \n {Object.entries(MODES).map(([key, m]) => (\n setMode(key)}\n style={{\n padding: '8px 16px',\n borderRadius: 8,\n cursor: 'pointer',\n fontSize: 13,\n fontFamily: sans,\n fontWeight: 600,\n transition: 'all 0.2s',\n border: mode === key\n ? `1px solid ${m.color}`\n : `1px solid ${COLORS.border}`,\n background: mode === key ? m.color + '18' : COLORS.card,\n color: mode === key ? m.color : COLORS.muted\n }}\n >\n {m.icon} {m.title}\n \n ))}\n \n\n \n {/* Left: Protocol visualization */}\n

\n {/* Client ↔ Server diagram */}\n \n {/* Column headers */}\n \n

💻

\n \n CLIENT\n

\n mppx auto-pay\n

🖥️

\n \n SERVER\n

\n mppx middleware\n

\n \n\n {/* Vertical dashed lines */}\n

\n \n \n\n {/* Step indicators */}\n \n {/* Step 1: GET request */}\n = 0 && isRunning ? 1 : 0.2,\n transition: 'opacity 0.3s'\n }}\n >\n {step === 0 && isRunning && (\n \n )}\n {step > 0 && (\n \n \n → GET /api/photo\n

\n \n )}\n \n\n {/* Step 2: 402 response */}\n = 1 ? 1 : 0.2,\n transition: 'opacity 0.3s'\n }}\n >\n {step === 1 && (\n \n )}\n {step > 1 && (\n \n \n ← 402 Challenge\n \n \n )}\n \n\n {/* Step 3: Credential */}\n = 2 ? 1 : 0.2,\n transition: 'opacity 0.3s'\n }}\n >\n {step === 2 && (\n \n )}\n {step > 2 && (\n \n \n → Credential ${chargeAmt}\n \n \n )}\n \n\n {/* Step 4: 200 + Receipt */}\n = 3 ? 1 : 0.2,\n transition: 'opacity 0.3s'\n }}\n >\n {step === 3 && (\n \n )}\n {step > 3 && (\n \n \n ← 200 + Receipt ✓\n \n \n )}\n \n\n {/* Session/Stream extras */}\n {mode !== 'charge' && step > 3 && (\n \n \n {mode === 'session'\n ? `⚡ voucher #${sessionCount} (off-chain)`\n : `🌊 word ${streamWords.length}/${14} streamed`}\n \n \n )}\n \n \n\n {/* Run button */}\n

\n \n {isRunning ? 'Running...' : `▶ Run ${cfg.title}`}\n \n

\n \n\n {/* Live HTTP inspector */}\n \n = 1}\n label='Server Challenge'\n status='HTTP/1.1 402 Payment Required'\n statusColor={COLORS.red}\n headers={[\n {\n key: 'WWW-Authenticate',\n value: `Payment method=\"tempo\" intent=\"${\n mode === 'charge' ? 'charge' : 'session'\n }\"`,\n color: COLORS.pink\n },\n { key: 'Cache-Control', value: 'no-store' }\n ]}\n body={`{ \"amount\": \"${chargeAmt}\", \"currency\": \"pathUSD\" }`}\n />\n = 3}\n label='Payment Receipt'\n status='HTTP/1.1 200 OK'\n statusColor={COLORS.green}\n headers={[\n {\n key: 'Payment-Receipt',\n value: 'base64url(receipt...)',\n color: COLORS.green\n },\n { key: 'Content-Type', value: 'application/json' }\n ]}\n body={mode === 'stream'\n ? `event: data\\ndata: ${streamWords.join(' ')}`\n : `{ \"url\": \"https://picsum.photos/id/237/1024\" }`}\n />\n \n\n {/* Balance + stats */}\n \n \n \n \n Payment Stats\n \n

\n \n {mode === 'charge'\n ? (step >= 3 ? 1 : 0)\n : mode === 'session'\n ? sessionCount\n : streamWords.length}\n

\n {mode === 'stream' ? 'words' : 'requests'} paid\n

\n \n {step >= 3\n ? (mode === 'session'\n ? `${Math.max(0, sessionCount - 1)} off-chain`\n : mode === 'stream'\n ? `${Math.max(0, streamWords.length - 1)} SSE`\n : '1 on-chain')\n : '—'}\n

\n settlement type\n

\n \n \n \n \n\n {/* Stream output */}\n {mode === 'stream' && streamWords.length > 0 && (\n \n \n SSE STREAM OUTPUT\n \n {streamWords.map((w, i) => (\n \n {w}\n \n ))}\n {isRunning && (\n \n ▊\n \n )}\n \n )}\n \n\n {/* Right: Code panel */}\n

\n \n\n {/* Info cards */}\n \n \n \n {cfg.icon} {cfg.title}\n

\n \n {mode === 'charge' &&\n 'Each request triggers a full 402 → Credential → Receipt cycle. Payment settles on-chain for every request. Best for high-value, infrequent calls.'}\n {mode === 'session' &&\n 'Opens a payment channel with a single on-chain deposit. Subsequent requests use signed off-chain vouchers — sub-100ms latency, near-zero fees. Best for high-throughput APIs.'}\n {mode === 'stream' &&\n 'Extends sessions with SSE. The server charges per token as content streams. If the channel runs low, the client auto-sends a new voucher and the stream resumes. Best for LLM-style outputs.'}\n \n \n\n \n \n TRY IT YOURSELF\n \n \n

\n $ npx mppx account create\n

\n $ npx mppx http://localhost:3000/api/photo\n

\n \n \n \n \n \n\n \n \n )\n}","deleted","label",[181,182,163],"frontend","components","permalink","https://www.val.town/x/git/mpp-demo/code/frontend/components/App.tsx","extension","actionData","errors"]