[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_283":284,"_285":286},"routes/_app.x.$handle.$name",{"_105":104,"_38":51,"_113":95,"_33":61,"_13":14,"_114":-5,"_11":115,"_116":117,"_118":119,"_120":121,"_122":123,"_26":-5,"_124":-5,"_125":-5,"_126":31,"_127":128,"_129":130,"_131":-5,"_132":-5,"_133":134},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":-5},"project",{"_49":50,"_38":51,"_44":52,"_53":-5,"_54":31,"_55":56,"_57":56,"_58":59,"_60":61,"_19":62,"_63":-5,"_64":31,"_65":-5,"_66":-5,"_67":68,"_69":70,"_71":72,"_73":74,"_75":76,"_77":-5,"_78":79,"_80":79,"_81":82,"_83":82,"_84":82,"_85":79,"_86":79,"_87":88,"_89":90,"_91":92,"_93":31},"version",63,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","cf9fc1a4-b0fc-4632-93e2-40ae6a5ef7c1","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_26":27,"_28":29,"_30":31,"_32":31,"_33":34,"_35":34},"file",{"_36":37,"_38":34,"_39":40,"_41":43,"_44":45,"_46":14,"_47":48,"_30":31},"previous",{"_36":37,"_38":34,"_39":40,"_41":42},"deleted",false,"deletedHere","path","seller.tsx","latestPath","fileId","183f7a7c-1a68-11f1-a605-42dde27851f2","name","fileType","http","content","/** @jsxImportSource npm:hono@4/jsx */\nimport { Hono } from \"npm:hono@4\";\nimport { paymentMiddleware, x402ResourceServer } from \"npm:@x402/hono\";\nimport { ExactEvmScheme } from \"npm:@x402/evm/exact/server\";\nimport { HTTPFacilitatorClient } from \"npm:@x402/core/server\";\nimport { privateKeyToAccount } from \"npm:viem@2/accounts\";\n\n// --- Config ---\nconst pk = Deno.env.get(\"X402_PRIVATE_KEY\") as `0x${string}`;\nconst payTo = privateKeyToAccount(pk).address;\nconst network = \"eip155:8453\"; // Base mainnet\n\n// --- x402 seller middleware ---\nconst facilitator = new HTTPFacilitatorClient({ url: \"https://x402.org/facilitator\" });\nconst resourceServer = new x402ResourceServer(facilitator)\n .register(network, new ExactEvmScheme());\n\nconst app = new Hono();\n\napp.use(\n paymentMiddleware(\n {\n \"GET /api/random\": {\n accepts: {\n scheme: \"exact\",\n price: \"$0.001\",\n network,\n payTo,\n },\n description: \"A premium random number\",\n mimeType: \"application/json\",\n },\n },\n resourceServer,\n ),\n);\n\n// --- Homepage ---\napp.get(\"/\", (c) => {\n const endpoint = new URL(\"/api/random\", c.req.url).href;\n return c.html(\n \n \n x402 Random Number Seller\n \n \n \n

🎲 Premium Random Number API

The world's most expensive Math.random().

Endpoint

\n GET /api/random — $0.001 USDC on Base\n

Returns:

{JSON.stringify({ random: 0.4219384751 }, null, 2)}

How it works

Request GET /api/random without payment → get HTTP 402
Use @x402/fetch to automatically sign & pay
Receive your premium random number

Try it

{`import { wrapFetchWithPayment } from \"@x402/fetch\";\n\nconst paidFetch = wrapFetchWithPayment(fetch, client);\nconst res = await paidFetch(\"${endpoint}\");\nconst data = await res.json();\nconsole.log(data.random);`}

\n Seller wallet: {payTo}
\n Powered by x402 ·{\" \"}\n Val Town\n

\n \n ,\n );\n});\n\n// --- Paid endpoint ---\napp.get(\"/api/random\", (c) => {\n return c.json({ random: Math.random() });\n});\n\nexport default app.fetch;\n","/** @jsxImportSource npm:hono@4/jsx */\nimport { Hono } from \"npm:hono@4\";\nimport { paymentMiddleware, x402ResourceServer } from \"npm:@x402/hono\";\nimport { ExactEvmScheme } from \"npm:@x402/evm/exact/server\";\nimport { HTTPFacilitatorClient } from \"npm:@x402/core/server\";\nimport { privateKeyToAccount } from \"npm:viem@2/accounts\";\n\n// --- Config ---\nconst pk = Deno.env.get(\"X402_PRIVATE_KEY\") as `0x${string}`;\nconst payTo = privateKeyToAccount(pk).address;\nconst network = \"eip155:84532\"; // Base Sepolia\n\n// --- x402 seller middleware ---\nconst facilitator = new HTTPFacilitatorClient({ url: \"https://x402.org/facilitator\" });\nconst resourceServer = new x402ResourceServer(facilitator)\n .register(network, new ExactEvmScheme());\n\nconst app = new Hono();\n\napp.use(\n paymentMiddleware(\n {\n \"GET /api/random\": {\n accepts: {\n scheme: \"exact\",\n price: \"$0.001\",\n network,\n payTo,\n },\n description: \"A premium random number\",\n mimeType: \"application/json\",\n },\n },\n resourceServer,\n ),\n);\n\n// --- Homepage ---\napp.get(\"/\", (c) => {\n const endpoint = new URL(\"/api/random\", c.req.url).href;\n return c.html(\n \n \n x402 Random Number Seller\n \n \n \n

🎲 Premium Random Number API

The world's most expensive Math.random().

Endpoint

\n GET /api/random — $0.001 USDC on Base Sepolia\n

Returns:

{JSON.stringify({ random: 0.4219384751 }, null, 2)}

How it works

Request GET /api/random without payment → get HTTP 402
Use @x402/fetch to automatically sign & pay
Receive your premium random number

Try it

{`import { wrapFetchWithPayment } from \"@x402/fetch\";\n\nconst paidFetch = wrapFetchWithPayment(fetch, client);\nconst res = await paidFetch(\"${endpoint}\");\nconst data = await res.json();\nconsole.log(data.random);`}

\n Seller wallet: {payTo}
\n Powered by x402 ·{\" \"}\n Val Town\n

\n \n ,\n );\n});\n\n// --- Paid endpoint ---\napp.get(\"/api/random\", (c) => {\n return c.json({ random: Math.random() });\n});\n\nexport default app.fetch;\n","createdAt",["D",1772917022100],"branchVersion","branchId","df2e7966-1a41-11f1-b341-42dde27851f2","id","df2e18a4-1a41-11f1-b341-42dde27851f2","x402-playground",["D",1772900564463],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Playing with internet-native payment protocols","imageUrl","","a0bf3b31-15a5-4d5c-880e-4b1e22c9bc18","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","e81e7335-6d4c-4764-a902-d0962bbfa9f7","tursoName","df2e18a41a4111f1b34142dde27851f2","tursoHostname","df2e18a41a4111f1b34142dde27851f2-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789518064818],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_105":104,"_112":108},"org",{"_105":104,"_106":-5,"_107":108,"_19":62,"_109":110,"_111":31},"branch",{"_13":94,"_38":95,"_49":48,"_96":50,"_97":-5,"_98":-5,"_99":-5,"_100":-5,"_101":-5,"_102":51,"_103":104},"isOwned",110,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","stevekrouse","handle","displayName","avatar","https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg","tier","pro","canRestrictVals","profileImageUrl","branchName","adoptOrgId",{"_49":50,"_38":51,"_44":278,"_53":-5,"_54":31,"_55":56,"_57":56,"_58":59,"_60":61,"_19":62,"_63":-5,"_64":31,"_65":-5,"_66":-5,"_67":68,"_69":70,"_71":72,"_73":74,"_75":279,"_77":-5,"_78":79,"_80":79,"_81":82,"_83":82,"_84":82,"_85":79,"_86":79,"_87":280,"_89":281,"_91":282,"_93":31},"tree",[186,192,196,197,198],"files",[186,187,188,189,190,191,192,193,194,195,196,197,198],"counts",{"_175":68,"_176":144,"_177":68,"_178":179,"_180":181},"contents",[135,136,137,138,139],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles",true,"grants","orgs","customDomains",{},{"_49":169,"_38":170,"_36":171,"_141":-5,"_47":48,"_46":172,"_142":130,"_44":173,"_13":68,"_39":167,"_41":-5,"_30":31,"_145":-5,"_33":174},{"_49":162,"_38":163,"_36":164,"_141":-5,"_47":48,"_46":165,"_142":130,"_44":166,"_13":68,"_39":167,"_41":-5,"_30":31,"_145":-5,"_33":168},{"_49":155,"_38":156,"_36":157,"_141":-5,"_47":48,"_46":158,"_142":31,"_44":159,"_13":68,"_39":26,"_41":160,"_30":31,"_145":-5,"_33":161},{"_49":147,"_38":148,"_36":149,"_141":-5,"_47":48,"_46":150,"_142":31,"_44":151,"_13":152,"_39":40,"_41":153,"_30":31,"_145":-5,"_33":154},{"_49":140,"_38":34,"_36":37,"_141":-5,"_47":48,"_46":14,"_142":31,"_44":143,"_13":144,"_39":40,"_41":43,"_30":31,"_145":-5,"_33":146},"30b4470e-1a68-11f1-a9f3-42dde27851f2","parentId","latest",["D",1772917022100],1,"label",[34],"ad420b64-1a66-11f1-a2a8-42dde27851f2","buyer.tsx","df3362be-1a41-11f1-b341-42dde27851f2",56,["D",1772916372067],28,"import { Hono } from \"npm:hono@4\";\nimport home from \"./routes/home.tsx\";\nimport screenshot from \"./routes/screenshot.tsx\";\nimport transactions from \"./routes/transactions.tsx\";\n\nconst app = new Hono();\napp.onError((err) => Promise.reject(err));\n\napp.route(\"/\", home);\napp.route(\"/\", screenshot);\napp.route(\"/\", transactions);\n\nexport default app.fetch;",[148],"00651d9a-1a67-11f1-9900-42dde27851f2","README.md","00651e3a-1a67-11f1-9900-42dde27851f2",57,["D",1772916511565],"# x402 Playground\n\nA demo app showing how to use the [x402 protocol](https://www.x402.org/) (HTTP 402 payments) to pay for a [Browserbase](https://browserbase.com) browser session and take website screenshots — all powered by automatic USDC micropayments on Base.\n\n## How it Works\n\n```mermaid\nsequenceDiagram\n participant User\n participant App as x402 Playground
(Val Town)\n participant SDK as @x402/fetch SDK\n participant BB as x402.browserbase.com\n participant Base as Base L2
(USDC)\n participant Browser as Remote Chromium
(Browserbase)\n\n User->>App: POST /screenshot {url}\n App->>SDK: fetch(browserbase/session/create)\n SDK->>BB: POST /browser/session/create\n BB-->>SDK: 402 Payment Required\n SDK->>Base: Sign USDC payment (EIP-3009)\n SDK->>BB: Retry with PAYMENT-SIGNATURE header\n BB-->>SDK: 200 OK {wsUrl, txHash}\n SDK-->>App: Session response\n App->>App: Record transaction in SQLite\n App->>Browser: Connect via CDP WebSocket\n App->>Browser: Navigate to user's URL\n Browser-->>App: PNG screenshot\n App-->>User: Return screenshot image\n```\n\n1. The user enters a URL and submits the screenshot form\n2. The app calls `x402.browserbase.com` to create a paid browser session\n3. The [`@x402/fetch`](https://www.npmjs.com/package/@x402/fetch) SDK transparently handles the HTTP 402 flow — it parses the payment requirements, signs a USDC transfer on Base (EIP-3009), and retries the request with a `PAYMENT-SIGNATURE` header\n4. Browserbase returns a WebSocket URL for a remote Chromium instance\n5. The app connects via Playwright, navigates to the target URL, and returns a PNG screenshot\n6. The transaction is recorded in SQLite for the history page\n\n## Project Structure\n\n```\nbuyer.tsx → HTTP entry point (Hono router)\nroutes/\n home.tsx → Landing page with wallet info & navigation\n screenshot.tsx → Screenshot form + POST handler\n transactions.tsx → Transaction history table\nlib/\n x402.ts → x402 client setup (wallet signer + wrapFetchWithPayment)\n browserbase.ts → Browserbase session creation via x402\n screenshot.ts → Playwright CDP screenshot capture\n db.ts → SQLite schema & queries for transaction log\n layout.tsx → Shared HTML layout with Twind CSS\n```\n\n## Environment Variables\n\n| Key | Description |\n|-----|-------------|\n| `X402_PRIVATE_KEY` | Private key for a Base wallet holding USDC (used to sign x402 payments) |\n\n## Pages\n\n| Route | Description |\n|-------|-------------|\n| `/` | Home — shows wallet address, explains the flow, links to other pages |\n| `/screenshot` | Form to enter a URL and capture a screenshot ($0.01 USDC per session) |\n| `/transactions` | Table of past payments with totals and tx hashes |\n",[156],"4298fade-1a66-11f1-a0b7-42dde27851f2","routes","019cca0a-3765-77dc-8438-5d5925c1359c",51,["D",1772916193126],"directory",[163],"5ea437ee-1a47-11f1-b40b-42dde27851f2","lib","5ea4388e-1a47-11f1-b40b-42dde27851f2",14,["D",1772902925793],[170],"pulls","branches","forks","envVars",{"_182":184,"_185":68},"connections",{"_182":68,"_183":68},"count","unfilledCount",2,"emptyCount",{"_49":169,"_38":170,"_36":171,"_141":-5,"_47":48,"_46":172,"_142":130,"_44":275,"_13":68,"_39":167,"_41":-5,"_30":31,"_145":-5,"_200":276,"_33":277},{"_49":268,"_38":269,"_36":270,"_141":171,"_47":48,"_46":165,"_142":31,"_44":271,"_13":68,"_39":213,"_41":272,"_30":31,"_145":-5,"_200":273,"_33":274},{"_49":260,"_38":261,"_36":262,"_141":171,"_47":48,"_46":263,"_142":130,"_44":264,"_13":144,"_39":213,"_41":265,"_30":31,"_145":-5,"_200":266,"_33":267},{"_49":252,"_38":253,"_36":254,"_141":171,"_47":48,"_46":255,"_142":130,"_44":256,"_13":144,"_39":213,"_41":257,"_30":31,"_145":-5,"_200":258,"_33":259},{"_49":245,"_38":246,"_36":247,"_141":171,"_47":48,"_46":165,"_142":130,"_44":248,"_13":68,"_39":213,"_41":249,"_30":31,"_145":-5,"_200":250,"_33":251},{"_49":236,"_38":237,"_36":238,"_141":171,"_47":48,"_46":239,"_142":31,"_44":240,"_13":241,"_39":213,"_41":242,"_30":31,"_145":-5,"_200":243,"_33":244},{"_49":162,"_38":163,"_36":164,"_141":-5,"_47":48,"_46":165,"_142":130,"_44":233,"_13":68,"_39":167,"_41":-5,"_30":31,"_145":-5,"_200":234,"_33":235},{"_49":225,"_38":226,"_36":227,"_141":164,"_47":48,"_46":228,"_142":31,"_44":229,"_13":184,"_39":213,"_41":230,"_30":31,"_145":-5,"_200":231,"_33":232},{"_49":217,"_38":218,"_36":219,"_141":164,"_47":48,"_46":220,"_142":31,"_44":221,"_13":184,"_39":213,"_41":222,"_30":31,"_145":-5,"_200":223,"_33":224},{"_49":209,"_38":210,"_36":211,"_141":164,"_47":48,"_46":165,"_142":130,"_44":212,"_13":68,"_39":213,"_41":214,"_30":31,"_145":-5,"_200":215,"_33":216},{"_49":155,"_38":156,"_36":157,"_141":-5,"_47":48,"_46":158,"_142":31,"_44":206,"_13":68,"_39":26,"_41":160,"_30":31,"_145":-5,"_200":207,"_33":208},{"_49":147,"_38":148,"_36":149,"_141":-5,"_47":48,"_46":150,"_142":31,"_44":203,"_13":152,"_39":40,"_41":153,"_30":31,"_145":-5,"_200":204,"_33":205},{"_49":140,"_38":34,"_36":37,"_141":-5,"_47":48,"_46":14,"_142":31,"_44":199,"_13":144,"_39":40,"_41":43,"_30":31,"_145":-5,"_200":201,"_33":202},["D",1772917022100],"children",[],[34],["D",1772916372067],[],[148],["D",1772916511565],[],[156],"4298eb16-1a66-11f1-a0b7-42dde27851f2","transactions.tsx","4298ec6a-1a66-11f1-a0b7-42dde27851f2",["D",1772916193126],"script","/** @jsxImportSource npm:hono@4/jsx */\nimport { Hono } from \"npm:hono@4\";\nimport { Layout } from \"../lib/layout.tsx\";\nimport { listTransactions } from \"../lib/db.ts\";\n\nconst transactions = new Hono();\n\ntransactions.get(\"/transactions\", async (c) => {\n const rows = await listTransactions();\n\n let totalSpent = 0;\n for (const row of rows) {\n if (row.amount) {\n const parsed = parseFloat(row.amount);\n if (!isNaN(parsed)) totalSpent += parsed;\n }\n }\n\n return c.html(\n \n

Transaction History

\n\n

Balance Summary

Total Transactions

{rows.length}

Total Spent

\n {totalSpent > 0 ? totalSpent.toFixed(4) : \"—\"}{\" \"}\n USDC\n

\n\n {rows.length === 0\n ? (\n

\n No transactions yet.{\" \"}\n \n Take a screenshot\n {\" \"}\n to create one.\n

\n )\n : (\n

\n \n \n \n \n \n \n \n \n \n \n \n \n {rows.map((tx) => (\n \n \n \n \n \n \n \n \n ))}\n \n

ID	URL	Amount	Network	Tx Hash	Date
{tx.id}	\n {tx.url}\n	\n {tx.amount ?? \"—\"} {tx.currency ?? \"\"}\n	{tx.network ?? \"—\"}	\n {tx.tx_hash ? tx.tx_hash : \"—\"}\n	{tx.created_at}

\n )}\n ,\n );\n});\n\nexport default transactions;\n",[],[163,210],"3c3e895a-1a67-11f1-b36b-42dde27851f2","screenshot.tsx","4298ccf8-1a66-11f1-a0b7-42dde27851f2",60,["D",1772916611974],"/** @jsxImportSource npm:hono@4/jsx */\nimport { Hono } from \"npm:hono@4\";\nimport { Layout } from \"../lib/layout.tsx\";\nimport { createBrowserbaseSession, getWsUrl } from \"../lib/browserbase.ts\";\nimport { captureScreenshot } from \"../lib/screenshot.ts\";\nimport { insertTransaction } from \"../lib/db.ts\";\n\nconst screenshot = new Hono();\n\nfunction ErrorPage({ message }: { message: string }) {\n return (\n \n

Something went wrong

\n        {message}\n

\n \n ← Try again\n \n \n );\n}\n\n// --- Redirect old GET /screenshot to homepage ---\nscreenshot.get(\"/screenshot\", (c) => c.redirect(\"/\"));\n\n// --- Screenshot action ---\nscreenshot.post(\"/screenshot\", async (c) => {\n const body = await c.req.parseBody();\n const targetUrl = (body.url as string) || \"https://val.town\";\n\n try {\n // Step 1: Create a paid Browserbase session via x402\n const { response, session } = await createBrowserbaseSession(5);\n\n if (!response.ok) {\n const errorText = await response.text();\n throw new Error(`Session creation failed (${response.status}): ${errorText}`);\n }\n\n // Record the transaction\n await insertTransaction({\n txHash: session!.txHash ?? session!.transactionHash ?? null,\n url: targetUrl,\n amount: \"0.01\",\n currency: \"USDC\",\n network: \"base\",\n });\n\n // Step 2: Connect to the browser and take a screenshot\n const wsUrl = getWsUrl(session!);\n if (!wsUrl) {\n throw new Error(`No WebSocket URL returned. Session: ${JSON.stringify(session, null, 2)}`);\n }\n\n const screenshotBuffer = await captureScreenshot(wsUrl, targetUrl);\n\n // Convert to base64 data URL to embed in the result page\n const base64 = btoa(String.fromCharCode(...screenshotBuffer));\n const dataUrl = `data:image/png;base64,${base64}`;\n\n return c.html(\n \n

Screenshot Result

\n \n \n Paid 0.01 USDC\n \n

\n\n

\n URL:{\" \"}\n \n {targetUrl}\n \n

\n \n

\n\n

\n \n \n Download PNG\n \n \n 📸 Take Another\n \n \n View Transactions →\n \n

\n ,\n );\n } catch (err: any) {\n return c.html();\n }\n});\n\nexport default screenshot;\n",[],[163,218],"3104f3bc-1a67-11f1-b36b-42dde27851f2","home.tsx","4298a296-1a66-11f1-a0b7-42dde27851f2",59,["D",1772916593140],"/** @jsxImportSource npm:hono@4/jsx */\nimport { Hono } from \"npm:hono@4\";\nimport { Layout } from \"../lib/layout.tsx\";\nimport { ensureAddress } from \"../lib/x402.ts\";\n\nconst home = new Hono();\n\nhome.get(\"/\", (c) => {\n const address = ensureAddress();\n return c.html(\n \n

x402 Payment Playground

\n\n {/* Quick Screenshot Form */}\n

📸 Take a Screenshot

\n Pay $0.01 USDC on Base for a website screenshot via the x402 protocol.\n

\n \n {/* Loading state (hidden by default) */}\n

\n \n Processing payment & capturing screenshot…\n

This usually takes 10–20 seconds.

\n\n

Diff · v63