[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_207":208,"_209":210},"routes/_app.x.$handle.$name",{"_106":105,"_38":52,"_114":96,"_33":62,"_13":14,"_115":-5,"_11":116,"_117":118,"_119":120,"_121":122,"_123":124,"_26":-5,"_125":-5,"_126":-5,"_127":31,"_128":129,"_130":131,"_132":-5,"_133":-5,"_134":135},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":-5},"project",{"_50":51,"_38":52,"_45":53,"_54":-5,"_55":31,"_56":57,"_58":57,"_59":60,"_61":62,"_19":63,"_64":-5,"_65":31,"_66":-5,"_67":-5,"_68":69,"_70":71,"_72":73,"_74":75,"_76":77,"_78":-5,"_79":80,"_81":80,"_82":83,"_84":83,"_85":83,"_86":80,"_87":80,"_88":89,"_90":91,"_92":93,"_94":31},"version",28,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","6b2cf332-ec48-4fba-a33c-84c08827116e","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_26":27,"_28":29,"_30":31,"_32":31,"_33":34,"_35":34},"file",{"_36":37,"_38":39,"_40":41,"_42":44,"_45":46,"_47":14,"_48":49,"_30":31},"previous",{"_36":37,"_38":39,"_40":41,"_42":43},"deleted",false,"deletedHere","path","lib/x402.ts","latestPath","fileId","6e5fac22-1a47-11f1-b40b-42dde27851f2","name","x402.ts","fileType","script","content","/**\n * Lazy-loaded x402 payment client.\n *\n * Uses x402-fetch (v1) with viem wallet client for standard x402 protocol.\n * Pylon (api.pylonapi.com) uses x402 for payments on Base mainnet.\n *\n * viem is huge so we lazy-import and cache everything.\n */\n\nlet _fetchWithPayment: typeof fetch | null = null;\nlet _publicAddress: string | null = null;\n\n/** Derive wallet address (lighter import — just viem/accounts) */\nexport async function ensureAddress(): Promise {\n if (_publicAddress) return _publicAddress;\n const { privateKeyToAccount } = await import(\"npm:viem/accounts\");\n const privateKey = Deno.env.get(\"X402_PRIVATE_KEY\");\n if (!privateKey) throw new Error(\"Missing X402_PRIVATE_KEY\");\n const account = privateKeyToAccount(privateKey as `0x${string}`);\n _publicAddress = account.address;\n return _publicAddress;\n}\n\n/** Build the x402-fetch wrapper with viem wallet client (heavy, cached) */\nexport async function getFetchWithPayment(): Promise {\n if (_fetchWithPayment) return _fetchWithPayment;\n\n const { wrapFetchWithPayment } = await import(\"npm:x402-fetch\");\n const { createWalletClient, http } = await import(\"npm:viem\");\n const { privateKeyToAccount } = await import(\"npm:viem/accounts\");\n const { base } = await import(\"npm:viem/chains\");\n\n const privateKey = Deno.env.get(\"X402_PRIVATE_KEY\");\n if (!privateKey) throw new Error(\"Missing X402_PRIVATE_KEY\");\n\n const account = privateKeyToAccount(privateKey as `0x${string}`);\n _publicAddress = account.address;\n\n const walletClient = createWalletClient({\n account,\n transport: http(),\n chain: base,\n });\n\n _fetchWithPayment = wrapFetchWithPayment(fetch, walletClient);\n return _fetchWithPayment;\n}\n","/**\n * Lazy-loaded x402 v2 payment client.\n *\n * Uses @x402/fetch + @x402/evm (v2 SDK) with proper x402Client pattern:\n * 1. Create signer from private key\n * 2. Create x402Client + register EVM scheme\n * 3. wrapFetchWithPayment handles 402 → sign → retry automatically\n *\n * viem is huge so we lazy-import and cache everything.\n */\n\nlet _fetchWithPayment: typeof fetch | null = null;\nlet _publicAddress: string | null = null;\n\n/** Derive wallet address (lighter import — just viem/accounts) */\nexport async function ensureAddress(): Promise {\n if (_publicAddress) return _publicAddress;\n const { privateKeyToAccount } = await import(\"npm:viem/accounts\");\n const privateKey = Deno.env.get(\"X402_PRIVATE_KEY\");\n if (!privateKey) throw new Error(\"Missing X402_PRIVATE_KEY\");\n const account = privateKeyToAccount(privateKey as `0x${string}`);\n _publicAddress = account.address;\n return _publicAddress;\n}\n\n/** Build x402 v2 fetch wrapper (heavy, cached) */\nexport async function getFetchWithPayment(): Promise {\n if (_fetchWithPayment) return _fetchWithPayment;\n\n const { wrapFetchWithPayment, x402Client } = await import(\"npm:@x402/fetch\");\n const { registerExactEvmScheme } = await import(\"npm:@x402/evm/exact/client\");\n const { privateKeyToAccount } = await import(\"npm:viem/accounts\");\n\n const privateKey = Deno.env.get(\"X402_PRIVATE_KEY\");\n if (!privateKey) throw new Error(\"Missing X402_PRIVATE_KEY\");\n\n const signer = privateKeyToAccount(privateKey as `0x${string}`);\n _publicAddress = signer.address;\n\n // Create x402 client and register EVM scheme\n const client = new x402Client();\n registerExactEvmScheme(client, { signer });\n\n // Wrap fetch with payment handling\n _fetchWithPayment = wrapFetchWithPayment(fetch, client);\n return _fetchWithPayment;\n}\n","createdAt",["D",1772903374155],"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",{"_106":105,"_113":109},"org",{"_106":105,"_107":-5,"_108":109,"_19":63,"_110":111,"_112":31},"branch",{"_13":95,"_38":96,"_50":49,"_97":51,"_98":-5,"_99":-5,"_100":-5,"_101":-5,"_102":-5,"_103":52,"_104":105},"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",{"_50":51,"_38":52,"_45":202,"_54":-5,"_55":31,"_56":57,"_58":57,"_59":60,"_61":62,"_19":63,"_64":-5,"_65":31,"_66":-5,"_67":-5,"_68":69,"_70":71,"_72":73,"_74":75,"_76":203,"_78":-5,"_79":80,"_81":80,"_82":83,"_84":83,"_85":83,"_86":80,"_87":80,"_88":204,"_90":205,"_92":206,"_94":31},"tree",[169,173],"files",[169,170,171,172,173],"counts",{"_157":69,"_158":159,"_160":69,"_161":162,"_163":164},"contents",[136,137],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles",true,"grants","orgs","customDomains",{},{"_50":150,"_38":151,"_36":152,"_141":-5,"_48":49,"_47":153,"_143":131,"_45":154,"_13":69,"_40":155,"_42":-5,"_30":31,"_148":-5,"_33":156},{"_50":138,"_38":139,"_36":140,"_141":-5,"_48":49,"_47":142,"_143":31,"_45":144,"_13":145,"_40":146,"_42":147,"_30":31,"_148":-5,"_33":149},"2498dffe-1a48-11f1-bf3c-42dde27851f2","main.tsx","df3362be-1a41-11f1-b341-42dde27851f2","parentId",25,"latest",["D",1772903257904],18,"http","/** @jsxImportSource npm:hono@4/jsx */\nimport { Hono } from \"npm:hono@4\";\nimport { Layout } from \"./lib/layout.tsx\";\nimport { initDb, insertTransaction, listTransactions } from \"./lib/db.ts\";\nimport { ensureAddress, getFetchWithPayment } from \"./lib/x402.ts\";\n\n// ---------- DB init (lightweight, fast) ----------\nawait initDb();\n\n// ---------- Hono app ----------\nconst app = new Hono();\napp.onError((err) => Promise.reject(err));\n\n// --- Homepage ---\napp.get(\"/\", async (c) => {\n const address = await ensureAddress();\n return c.html(\n \n

x402 Payment Playground

\n\n

My Wallet

Public Address (Base)

\n {address}\n

\n\n

\n \n

\n 📸 Take a Screenshot\n

\n Pay for a website screenshot via the x402 protocol.\n

\n \n \n

\n 📒 Transaction History\n

\n View past payments and your running balance.\n

\n \n

\n ,\n );\n});\n\n// --- Screenshot form ---\napp.get(\"/screenshot\", (c) =>\n c.html(\n \n

Take a Screenshot

\n\n ,\n ),\n);\n\n// --- Screenshot action ---\napp.post(\"/screenshot\", async (c) => {\n const fetchWithPayment = await getFetchWithPayment();\n\n const body = await c.req.parseBody();\n const targetUrl = (body.url as string) || \"https://val.town\";\n\n // Pylon screenshot API — standard x402 on Base mainnet\n const apiUrl = \"https://api.pylonapi.com/do\";\n\n let res: Response;\n try {\n res = await fetchWithPayment(apiUrl, {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({\n capability: \"screenshot\",\n params: { url: targetUrl },\n }),\n });\n } catch (err: any) {\n const isInsufficientFunds = err?.message?.includes(\"insufficient funds\")\n || err?.message?.includes(\"exceeds the balance\");\n const address = await ensureAddress();\n return c.html(\n \n

Payment Failed

\n {isInsufficientFunds ? (\n

Insufficient Funds

\n Your wallet doesn't have enough USDC or ETH (for gas) on Base to complete this payment.\n

\n Send USDC and a small amount of ETH to:\n

\n {address}\n

\n ) : (\n

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

\n )}\n \n ← Try again\n \n ,\n );\n }\n\n // Try to extract payment info from x402 response headers\n let txHash: string | null = null;\n let amount: string | null = null;\n let currency: string | null = null;\n let network: string | null = null;\n try {\n const paymentHeader = res.headers.get(\"x-payment-response\") || res.headers.get(\"payment-response\");\n if (paymentHeader) {\n const parsed = JSON.parse(atob(paymentHeader));\n txHash = parsed.txHash ?? parsed.transaction_hash ?? null;\n amount = parsed.amount ?? parsed.maxAmountRequired ?? null;\n currency = parsed.currency ?? \"USDC\";\n network = parsed.network ?? \"base\";\n }\n } catch {\n // header parsing may fail — that's ok\n }\n\n // Record transaction\n await insertTransaction({ txHash, url: targetUrl, amount, currency, network });\n\n if (!res.ok) {\n const errorText = await res.text();\n return c.html(\n \n

Screenshot Failed

Status: {res.status}

\n          {errorText}\n

\n \n ← Try again\n \n ,\n );\n }\n\n const contentType = res.headers.get(\"content-type\") ?? \"\";\n if (contentType.includes(\"image\")) {\n const bytes = new Uint8Array(await res.arrayBuffer());\n return new Response(bytes, {\n headers: { \"content-type\": contentType || \"image/png\" },\n });\n }\n\n // JSON or other response — might contain image URL or base64\n const data = await res.json();\n return c.html(\n \n

Screenshot Result

\n {data.image_url ? (\n

\n ) : data.image ? (\n

\n ) : (\n

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

\n )}\n \n ← Take another\n \n ,\n );\n});\n\n// --- Transactions ---\napp.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(6) : \"—\"}{\" \"}\n USDC\n

\n\n {rows.length === 0 ? (\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 {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 app.fetch;\n","label",[139],"5ea437ee-1a47-11f1-b40b-42dde27851f2","lib","5ea4388e-1a47-11f1-b40b-42dde27851f2",14,["D",1772902925793],"directory",[151],"pulls","branches",1,"forks","envVars",{"_165":167,"_168":69},"connections",{"_165":69,"_166":69},"count","unfilledCount",2,"emptyCount",{"_50":150,"_38":151,"_36":152,"_141":-5,"_48":49,"_47":153,"_143":131,"_45":199,"_13":69,"_40":155,"_42":-5,"_30":31,"_148":-5,"_175":200,"_33":201},{"_50":191,"_38":192,"_36":193,"_141":152,"_48":49,"_47":194,"_143":31,"_45":195,"_13":69,"_40":41,"_42":196,"_30":31,"_148":-5,"_175":197,"_33":198},{"_50":183,"_38":184,"_36":185,"_141":152,"_48":49,"_47":186,"_143":31,"_45":187,"_13":69,"_40":41,"_42":188,"_30":31,"_148":-5,"_175":189,"_33":190},{"_50":178,"_38":39,"_36":37,"_141":152,"_48":49,"_47":14,"_143":31,"_45":179,"_13":180,"_40":41,"_42":44,"_30":31,"_148":-5,"_175":181,"_33":182},{"_50":138,"_38":139,"_36":140,"_141":-5,"_48":49,"_47":142,"_143":31,"_45":174,"_13":145,"_40":146,"_42":147,"_30":31,"_148":-5,"_175":176,"_33":177},["D",1772903257904],"children",[],[139],"69e345a4-1a48-11f1-92c1-42dde27851f2",["D",1772903374155],5,[],[151,39],"76b8d02e-1a47-11f1-af04-42dde27851f2","layout.tsx","76b8d100-1a47-11f1-af04-42dde27851f2",17,["D",1772902966194],"/** @jsxImportSource npm:hono@4/jsx */\nimport type { FC } from \"npm:hono@4/jsx\";\n\nexport const Layout: FC<{ title: string }> = ({ title, children }) => (\n \n \n \n \n {title}\n

Diff · v28