\n Loading wallet SDK…\n

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

\n ✓ Connected\n

\n {\n navigator.clipboard.writeText(wallet.address!);\n }}\n title=\"Click to copy\"\n style={{\n fontSize: \"12px\",\n fontFamily: \"monospace\",\n color: \"#6b7280\",\n marginTop: \"4px\",\n cursor: \"pointer\",\n wordBreak: \"break-all\",\n lineHeight: 1.5,\n }}\n >\n {wallet.address}\n 📋\n

\n {balanceLoading ? (\n Loading balances…\n ) : balances.length > 0 ? (\n

\n {balances.length > 0 ? (\n balances.map((b) => (\n

\n ${b.balance}\n {b.symbol}\n

\n ))\n ) : (\n No token balances\n )}\n 🔄 Refresh\n

\n ) : (\n Balance unavailable\n )}\n

\n \n Disconnect\n \n

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

\n wallet.connect({ capabilities: { type: \"sign-up\" } })}\n disabled={wallet.connecting}\n style={{\n flex: 1,\n padding: \"12px\",\n fontSize: \"15px\",\n fontWeight: 600,\n borderRadius: \"10px\",\n border: \"none\",\n background: wallet.connecting ? \"#94a3b8\" : \"#4f46e5\",\n color: \"white\",\n cursor: wallet.connecting ? \"not-allowed\" : \"pointer\",\n }}\n >\n {wallet.connecting ? \"Check your passkey prompt…\" : \"Sign Up\"}\n \n wallet.connect({ capabilities: { type: \"sign-in\" } })}\n disabled={wallet.connecting}\n style={{\n flex: 1,\n padding: \"12px\",\n fontSize: \"15px\",\n fontWeight: 600,\n borderRadius: \"10px\",\n border: \"1px solid #4f46e5\",\n background: wallet.connecting ? \"#94a3b8\" : \"white\",\n color: wallet.connecting ? \"white\" : \"#4f46e5\",\n cursor: wallet.connecting ? \"not-allowed\" : \"pointer\",\n }}\n >\n {wallet.connecting ? \"…\" : \"Sign In\"}\n \n

\n First time on this site? Use Sign Up to create a new passkey.\n Already have one here? Use Sign In.\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(\"/api/ping\");\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 /api/ping → 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 setup: (app) => {\n // Proxy paid requests to mpp.dev server-side (avoids CORS)\n app.all(\"/api/ping\", async (c) => {\n const url = \"https://mpp.dev/api/ping/paid\";\n\n // Only forward headers relevant to MPP (not Cloudflare/proxy headers)\n const forwardHeaders = new Headers();\n const incoming = c.req.raw.headers;\n for (const key of [\n \"content-type\",\n \"accept\",\n \"authorization\",\n \"x-mpp-payment\",\n \"x-mpp-version\",\n ]) {\n const val = incoming.get(key);\n if (val) forwardHeaders.set(key, val);\n }\n // Also forward any header starting with x-mpp-\n incoming.forEach((val, key) => {\n if (key.toLowerCase().startsWith(\"x-mpp-\")) {\n forwardHeaders.set(key, val);\n }\n });\n\n const resp = await fetch(url, {\n method: c.req.method,\n headers: forwardHeaders,\n body: c.req.method !== \"GET\" && c.req.method !== \"HEAD\"\n ? await c.req.raw.text()\n : undefined,\n });\n\n // Forward the response back, preserving status + headers\n return new Response(resp.body, {\n status: resp.status,\n statusText: resp.statusText,\n headers: new Headers(resp.headers),\n });\n });\n\n // Fetch token balances via Blockscout API (server-side, avoids CORS)\n app.get(\"/api/balances\", async (c) => {\n const address = c.req.query(\"address\");\n if (!address) {\n return c.json({ error: \"address required\" }, 400);\n }\n\n try {\n // Use Tempo testnet Blockscout API to get all token balances\n const resp = await fetch(\n `https://scout.tempo.xyz/api/v2/addresses/${address}/token-balances`\n );\n\n if (!resp.ok) {\n throw new Error(`Blockscout API returned ${resp.status}`);\n }\n\n const tokens: any[] = await resp.json();\n\n // Format the balances\n const balances = tokens\n .filter((t: any) => t.value && t.value !== \"0\")\n .map((t: any) => {\n const decimals = parseInt(t.token?.decimals || \"6\", 10);\n const raw = BigInt(t.value);\n const formatted = (Number(raw) / Math.pow(10, decimals)).toFixed(2);\n return {\n symbol: t.token?.symbol || \"???\",\n balance: formatted,\n tokenAddress: t.token?.address || \"\",\n };\n });\n\n return c.json({ balances });\n } catch (err: any) {\n console.error(\"Blockscout API error:\", err);\n return c.json({ error: err.message, balances: [] }, 500);\n }\n });\n },\n head: `\n Tempo MPP Playground\n \n \n \n `,\n});\n","deleted","label",[102],"permalink","https://www.val.town/x/demos/tempo-mpp-playground/code/buyer.tsx","extension","actionData","errors"]