[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_349":350,"_351":352},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_18":19,"_17":-7,"_261":-5,"_20":262,"_22":263,"_264":265,"_266":267,"_26":268,"_24":269,"_270":-5,"_271":-5,"_272":58,"_273":274,"_275":49,"_276":-5,"_277":-5,"_278":279},"routes/_app.x.$handle.$name.branch.$branch.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":-5,"_29":-5,"_30":-5,"_31":-5,"_32":-5},"handle","stevekrouse","name","x402-playground","branchName","main","version","path","routes","project",{"_37":202,"_13":14,"_50":203,"_204":-5,"_205":58,"_206":207,"_208":207,"_209":210,"_211":212,"_213":214,"_215":-5,"_216":58,"_217":-5,"_218":-5,"_219":52,"_220":221,"_222":223,"_224":225,"_226":227,"_228":-5,"_229":230,"_231":230,"_232":233,"_234":233,"_235":233,"_236":230,"_237":230,"_238":239,"_240":241,"_242":243,"_244":58},"tree",[89,90,91,92,93,94],"file",{"_37":85,"_13":19,"_40":43,"_42":-5,"_44":45,"_46":47,"_48":49,"_50":86,"_17":52,"_53":87,"_55":-5,"_57":58,"_59":-5,"_18":88},"contents",[33,34,35,36],"upstream","pull","ahead","behind","envVars",{"_37":77,"_13":78,"_40":79,"_42":43,"_44":45,"_46":80,"_48":49,"_50":81,"_17":82,"_53":54,"_55":83,"_57":58,"_59":-5,"_18":84},{"_37":69,"_13":70,"_40":71,"_42":43,"_44":45,"_46":72,"_48":49,"_50":73,"_17":74,"_53":54,"_55":75,"_57":58,"_59":-5,"_18":76},{"_37":61,"_13":62,"_40":63,"_42":43,"_44":45,"_46":64,"_48":49,"_50":65,"_17":66,"_53":54,"_55":67,"_57":58,"_59":-5,"_18":68},{"_37":38,"_13":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_50":51,"_17":52,"_53":54,"_55":56,"_57":58,"_59":-5,"_18":60},"id","4298eb16-1a66-11f1-a0b7-42dde27851f2","transactions.tsx","fileId","4298ec6a-1a66-11f1-a0b7-42dde27851f2","parentId","019cca0a-3765-77dc-8438-5d5925c1359c","branchId","df2e7966-1a41-11f1-b341-42dde27851f2","branchVersion",51,"latest",true,"createdAt",["D",1772916193126],0,"fileType","script","content","/** @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","deleted",false,"label",[19,39],"7c60521e-1a73-11f1-a9ee-42dde27851f2","screenshot.tsx","4298ccf8-1a66-11f1-a0b7-42dde27851f2",85,["D",1772921873526],4,"/** @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\";\nimport type { WalletKey } from \"../lib/x402.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 const wallet = (body.wallet as WalletKey) || \"1\";\n\n try {\n // Step 1: Create a paid Browserbase session via x402\n const { response, session } = await createBrowserbaseSession(5, wallet);\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 // Process in chunks to avoid \"Maximum call stack size exceeded\" with large buffers\n let binary = \"\";\n const chunkSize = 8192;\n for (let i = 0; i < screenshotBuffer.length; i += chunkSize) {\n const chunk = screenshotBuffer.subarray(i, i + chunkSize);\n binary += String.fromCharCode(...chunk);\n }\n const base64 = btoa(binary);\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 Paid from Wallet {wallet}\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",[19,62],"676a143a-1a73-11f1-9ec3-42dde27851f2","random.tsx","c31e22f4-1a68-11f1-b72f-42dde27851f2",83,["D",1772921838361],3,"/** @jsxImportSource npm:hono@4/jsx */\nimport { Hono } from \"npm:hono@4\";\nimport { Layout } from \"../lib/layout.tsx\";\nimport { getFetchWithPayment, type WalletKey } from \"../lib/x402.ts\";\nimport { httpEndpoint } from \"https://esm.town/v/std/utils/index.ts\";\n\nconst random = new Hono();\n\nrandom.post(\"/random\", async (c) => {\n try {\n const body = await c.req.parseBody();\n const wallet = (body.wallet as WalletKey) || \"1\";\n const sellerBase = await httpEndpoint(\"/seller.tsx\");\n const paidFetch = getFetchWithPayment(wallet);\n const res = await paidFetch(`${sellerBase}/api/random`);\n\n if (!res.ok) {\n const text = await res.text();\n throw new Error(`Seller returned ${res.status}: ${text}`);\n }\n\n const data = await res.json() as { random: number };\n\n return c.html(\n \n

🎲 Your Premium Random Number

\n \n \n Paid $0.001 USDC\n \n

\n\n

\n {data.random}\n

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

\n Paid from Wallet {wallet}\n

\n\n

\n ,\n );\n } catch (err: any) {\n return c.html(\n \n

Something went wrong

\n          {err?.message ?? String(err)}\n

\n \n ← Try again\n \n ,\n );\n }\n});\n\nexport default random;\n",[19,70],"7b31d2f2-1a76-11f1-8300-42dde27851f2","home.tsx","4298a296-1a66-11f1-a0b7-42dde27851f2",88,["D",1772923160036],9,"/** @jsxImportSource npm:hono@4/jsx */\nimport { Hono } from \"npm:hono@4\";\nimport { Layout } from \"../lib/layout.tsx\";\nimport { getWallets, type WalletKey } from \"../lib/x402.ts\";\nimport { httpEndpoint } from \"https://esm.town/v/std/utils/index.ts\";\n\nconst home = new Hono();\n\nhome.get(\"/\", async (c) => {\n const wallets = getWallets();\n const selectedWallet = (c.req.query(\"wallet\") as WalletKey) || \"1\";\n const currentWallet = wallets.find((w) => w.key === selectedWallet) || wallets[0];\n const sellerUrl = await httpEndpoint(\"/seller.tsx\");\n const sellerWallet = wallets[0]; // Seller always receives to Wallet 1\n\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 {/* Wallet info */}\n

\n 💳 Paying from:{\" \"}\n \n

\n 🏦 Paying to:{\" \"}\n Browserbase\n (x402.browserbase.com)\n

\n {/* Loading state */}\n

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

This usually takes 10–20 seconds.

\n\n {/* Random Number Form */}\n

🎲 Premium Random Number

\n Pay $0.001 USDC on Base for the world's most expensive Math.random().\n Calls our own x402 seller.\n

\n\n