Hello

;\n}\n\nexport default function(req: Request): Response {\n const html = renderToString();\n return new Response(html, { headers: { \"Content-Type\": \"text/html\" } });\n}\n",[],[104],{"_109":193,"_99":194,"_166":195,"_168":-5,"_169":149,"_170":154,"_172":173,"_111":196,"_105":197,"_175":188,"_177":198,"_179":22,"_180":-5,"_181":199,"_103":200},"80600218-2466-11f1-9145-42dde27851f2","buyer.tsx","019d0b93-897a-721d-b236-8aba23d0a99f",["D",1774015808402],5,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect, useCallback, createContext, useContext } from \"https://esm.sh/react@18.2.0\";\nimport { useLoaderData } from \"https://esm.sh/react-router@7.5.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport { defineRoutes } from \"https://esm.town/v/stevekrouse/vtrr/routes.ts\";\nimport { createApp } from \"https://esm.town/v/stevekrouse/vtrr/server.ts\";\n\n// ============================================================\n// Types\n// ============================================================\n\ninterface WalletState {\n connected: boolean;\n address: string | null;\n connecting: boolean;\n error: string | null;\n}\n\ninterface PaymentResult {\n success: boolean;\n data?: any;\n receipt?: any;\n error?: string;\n}\n\n// ============================================================\n// Wallet Hook — uses Wagmi + Tempo passkeys via dynamic import\n// ============================================================\n\nfunction useTempoWallet() {\n const [state, setState] = useState({\n connected: false,\n address: null,\n connecting: false,\n error: null,\n });\n const [wagmiReady, setWagmiReady] = useState(false);\n const [wagmiModules, setWagmiModules] = useState(null);\n\n // Dynamically load wagmi + tempo modules in the browser\n useEffect(() => {\n if (typeof window === \"undefined\") return;\n\n let cancelled = false;\n (async () => {\n try {\n // Load all wagmi modules from esm.sh\n const [wagmiMod, wagmiTempoMod, tanstackMod, viemChainsMod] = await Promise.all([\n import(\"https://esm.sh/wagmi@2.14.16?deps=react@18.2.0,react-dom@18.2.0&external=react,react-dom\"),\n import(\"https://esm.sh/wagmi@2.14.16/tempo?deps=react@18.2.0,react-dom@18.2.0&external=react,react-dom\"),\n import(\"https://esm.sh/@tanstack/react-query@5.75.5?deps=react@18.2.0,react-dom@18.2.0&external=react,react-dom\"),\n import(\"https://esm.sh/viem@2.43.3/chains\"),\n ]);\n\n if (cancelled) return;\n\n // Create wagmi config\n const config = wagmiMod.createConfig({\n connectors: [\n wagmiTempoMod.webAuthn({\n keyManager: wagmiTempoMod.KeyManager.http(\"https://keys.tempo.xyz\"),\n }),\n ],\n chains: [viemChainsMod.tempo],\n multiInjectedProviderDiscovery: false,\n transports: {\n [viemChainsMod.tempo.id]: wagmiMod.http(),\n },\n });\n\n setWagmiModules({ wagmiMod, wagmiTempoMod, tanstackMod, config });\n setWagmiReady(true);\n\n // Check if already connected (reconnect)\n const connections = wagmiMod.getConnections(config);\n if (connections.length > 0) {\n setState(prev => ({\n ...prev,\n connected: true,\n address: connections[0].accounts[0] || null,\n }));\n }\n } catch (err: any) {\n console.error(\"Failed to load wagmi:\", err);\n setState(prev => ({ ...prev, error: `Failed to load wallet SDK: ${err.message}` }));\n }\n })();\n\n return () => { cancelled = true; };\n }, []);\n\n const connect = useCallback(async () => {\n if (!wagmiModules) return;\n setState(prev => ({ ...prev, connecting: true, error: null }));\n\n try {\n const { config, wagmiMod } = wagmiModules;\n const connectors = wagmiMod.getConnectors(config);\n if (connectors.length === 0) {\n throw new Error(\"No connectors available\");\n }\n\n const result = await wagmiMod.connect(config, { connector: connectors[0] });\n setState({\n connected: true,\n address: result.accounts[0] || null,\n connecting: false,\n error: null,\n });\n } catch (err: any) {\n setState(prev => ({\n ...prev,\n connecting: false,\n error: err.message || \"Connection failed\",\n }));\n }\n }, [wagmiModules]);\n\n const disconnect = useCallback(async () => {\n if (!wagmiModules) return;\n try {\n const { config, wagmiMod } = wagmiModules;\n await wagmiMod.disconnect(config);\n setState({\n connected: false,\n address: null,\n connecting: false,\n error: null,\n });\n } catch (err: any) {\n console.error(\"Disconnect error:\", err);\n }\n }, [wagmiModules]);\n\n return { ...state, wagmiReady, connect, disconnect, wagmiModules };\n}\n\n// ============================================================\n// Payment Hook — uses mppx/client with wagmi connector\n// ============================================================\n\nfunction useMppPayment(wagmiModules: any) {\n const [paying, setPaying] = useState(false);\n const [result, setResult] = useState(null);\n\n const pay = useCallback(async (url: string, options?: RequestInit) => {\n if (!wagmiModules) return;\n setPaying(true);\n setResult(null);\n\n try {\n // Import mppx client\n const { Mppx, tempo } = await import(\"https://esm.sh/mppx@0.4.6/client?external=react,react-dom\");\n\n const { config, wagmiMod } = wagmiModules;\n\n // Create mppx client with wagmi connector\n const mppx = Mppx.create({\n polyfill: false,\n methods: [\n tempo({\n getClient: (parameters: any) =>\n wagmiMod.getConnectorClient(config, parameters),\n }),\n ],\n });\n\n // Make the paid request\n const response = await mppx.fetch(url, options);\n\n if (!response.ok) {\n const text = await response.text();\n throw new Error(`Request failed (${response.status}): ${text}`);\n }\n\n const data = await response.json();\n\n // Extract receipt if present\n const { Receipt } = await import(\"https://esm.sh/mppx@0.4.6?external=react,react-dom\");\n const receipt = Receipt.fromResponse(response);\n\n setResult({ success: true, data, receipt });\n } catch (err: any) {\n setResult({ success: false, error: err.message || \"Payment failed\" });\n } finally {\n setPaying(false);\n }\n }, [wagmiModules]);\n\n return { pay, paying, result, clearResult: () => setResult(null) };\n}\n\n// ============================================================\n// Components\n// ============================================================\n\nfunction WalletPanel({ wallet }: {\n wallet: ReturnType;\n}) {\n if (!wallet.wagmiReady) {\n return (\n

\n Loading wallet SDK…\n

\n );\n }\n\n if (wallet.connected && wallet.address) {\n return (\n

\n ✓ Connected\n

\n {wallet.address.slice(0, 10)}…{wallet.address.slice(-8)}\n

\n \n Disconnect\n \n

\n );\n }\n\n return (\n

\n \n {wallet.connecting ? \"Check your passkey prompt…\" : \"Connect Tempo Wallet\"}\n \n {wallet.error && (\n

\n {wallet.error}\n

\n )}\n

\n );\n}\n\nfunction PaymentPanel({ wallet }: {\n wallet: ReturnType;\n}) {\n const { pay, paying, result, clearResult } = useMppPayment(wallet.wagmiModules);\n\n const handlePay = () => {\n clearResult();\n pay(\"https://mpp.dev/api/ping/paid\");\n };\n\n if (!wallet.connected) {\n return (\n

\n Connect your wallet to make payments\n

\n );\n }\n\n return (\n

\n 🎲 Paid Ping\n

\n Send a paid request to{\" \"}\n \n mpp.dev/api/ping/paid\n {\" \"}\n via the MPP protocol. The 402 challenge is handled automatically.\n

\n\n \n {paying ? \"Processing payment…\" : \"Send Paid Ping\"}\n \n\n {paying && (\n

\n ⏳\n Signing transaction with your passkey…\n

\n )}\n\n {result && (\n

\n {result.success ? (\n

\n ✓ Payment successful!\n

\n                {JSON.stringify(result.data, null, 2)}\n

\n {result.receipt && (\n

\n Receipt: {result.receipt.reference || \"N/A\"}\n

\n )}\n

\n ) : (\n

\n ✗ Payment failed\n

\n {result.error}\n

\n )}\n

\n );\n}\n\nfunction Home() {\n const wallet = useTempoWallet();\n\n return (\n

\n Tempo MPP Playground\n

\n Connect your Tempo wallet and make paid requests via the{\" \"}\n \n Machine Payments Protocol\n .\n

\n\n

\n \n \n

\n\n

\n How it works\n

Connect your Tempo wallet using a passkey (biometric/PIN)
Click \"Send Paid Ping\" to make a request to an MPP endpoint
The endpoint returns HTTP 402 with a payment challenge
The mppx SDK signs a payment credential with your passkey
The request is retried with the credential attached
The server verifies payment on-chain and returns the response

\n );\n}\n\n// ============================================================\n// Loader (runs on server — returns static data for SSR)\n// ============================================================\n\nexport const loader = () => ({\n title: \"Tempo MPP Playground\",\n});\n\n// ============================================================\n// Routes & App\n// ============================================================\n\nexport const routes = defineRoutes([\n { path: \"/\", Component: Home, loader: import.meta.url },\n]);\n\nexport default createApp({\n routes,\n head: `\n Tempo MPP Playground\n \n \n `,\n});\n",[],[194],"files",[163,184,192],"counts",{"_205":33,"_206":207,"_208":33,"_209":210,"_213":214},"pulls","branches",2,"forks","envVars",{"_211":33,"_212":33},"count","emptyCount","connections",{"_211":33,"_215":33},"unfilledCount","contents",[],{"_109":185,"_99":104,"_166":186,"_168":-5,"_169":149,"_170":106,"_172":22,"_111":219,"_105":171,"_175":188,"_177":189,"_179":22,"_180":-5,"_103":220},["D",1774015903371],[104],"upstreamProject","upstreamBranch",{"_109":152,"_111":224,"_225":226,"_99":45,"_150":110,"_105":227,"_151":-5,"_153":-5,"_228":229,"_113":-5,"_160":22,"_115":116,"_159":98,"_16":126,"_158":100},["D",1774013924359],"updatedAt",["D",1774018101679],39,"lockfileKey","1774018120615-esm.town_v_demos_tempo-mpp-playground@39-main","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_97":98,"_99":100,"_101":102,"_105":106,"_103":104,"_107":236,"_161":241,"_201":254,"_176":255,"_216":258,"_259":260,"_263":-5,"_264":106,"_265":266,"_267":268,"_209":-5},{"_109":110,"_99":100,"_111":237,"_113":-5,"_114":22,"_115":116,"_117":-5,"_118":119,"_14":120,"_121":-5,"_122":22,"_123":-5,"_124":-5,"_125":33,"_16":126,"_127":-5,"_128":-5,"_129":-5,"_130":131,"_132":131,"_133":134,"_135":134,"_136":134,"_137":131,"_138":131,"_23":238,"_141":239,"_146":240,"_160":22},["D",1774013924351],{"_97":98,"_140":76},{"_97":98,"_143":76,"_14":-5,"_144":145},{"_105":148,"_99":102,"_109":149,"_150":110,"_151":152,"_153":154,"_155":116,"_156":110,"_157":126,"_158":100,"_159":98},[242,246,250],{"_109":164,"_99":165,"_166":167,"_168":-5,"_169":149,"_170":171,"_172":173,"_111":243,"_105":33,"_175":176,"_177":178,"_179":22,"_180":-5,"_181":244,"_103":245},["D",1774015711615],[],[165],{"_109":185,"_99":104,"_166":186,"_168":-5,"_169":149,"_170":106,"_172":22,"_111":247,"_105":171,"_175":188,"_177":189,"_179":22,"_180":-5,"_181":248,"_103":249},["D",1774015903371],[],[104],{"_109":193,"_99":194,"_166":195,"_168":-5,"_169":149,"_170":154,"_172":173,"_111":251,"_105":197,"_175":188,"_177":198,"_179":22,"_180":-5,"_181":252,"_103":253},["D",1774015808402],[],[194],[242,246,250],{"_109":185,"_99":104,"_166":186,"_168":-5,"_169":149,"_170":106,"_172":22,"_111":256,"_105":171,"_175":188,"_177":189,"_179":22,"_180":-5,"_103":257},["D",1774015903371],[104],[],"upstream",{"_109":152,"_111":261,"_225":262,"_99":45,"_150":110,"_105":227,"_151":-5,"_153":-5,"_228":229,"_113":-5,"_160":22,"_115":116,"_159":98,"_16":126,"_158":100},["D",1774013924359],["D",1774018101679],"pull","ahead","behind",33,"templates",[],"actionData","errors"]