[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_298":299,"_300":301},"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",88,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","a6c5f290-3252-4bc8-ad3c-402a1fc83f47","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","routes/home.tsx","latestPath","fileId","4298a296-1a66-11f1-a0b7-42dde27851f2","name","home.tsx","fileType","script","content","/** @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\n return c.html(\n \n

x402 Payment Playground

\n\n {/* Wallet Selectors */}\n

\n {/* Paying Wallet */}\n

💳 Paying Wallet

Choose which wallet to pay from:

\n {wallets.map((w) => (\n \n \n

\n {w.label}\n ({w.envVar})\n

{w.address}

\n {w.key === selectedWallet && (\n \n Active\n \n )}\n \n ))}\n

\n\n {/* Receiving Wallet (seller info) */}\n

🏦 Receiving Wallet

Payments for the random number API go to:

\n \n

\n Wallet 1\n (X402_PRIVATE_KEY)\n

{wallets[0]?.address}

\n \n Seller\n \n

\n Configured in the{\" \"}\n seller endpoint's\n payment middleware.\n

\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 {/* 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

Diff · v88