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",[18,95],"7c60521e-1a73-11f1-a9ee-42dde27851f2",["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",[18,114],"676a143a-1a73-11f1-9ec3-42dde27851f2",["D",1772921838361],"/** @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",[18,158],"7b31d2f2-1a76-11f1-8300-42dde27851f2",["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

History · routes