Mini App Starter

Hono + React + Tailwind Starter Project on Val Town

,\n );\n}\n\nexport async function iconImage() {\n return await ogImage(\n

,\n {\n width: 512,\n height: 512,\n },\n );\n}\n\n//////////\n\nexport async function ogImage(body, options = {}) {\n const svg = await satori(\n body,\n {\n width: 945,\n height: 630,\n ...options,\n fonts: await loadFonts(),\n loadAdditionalAsset: async (code, segment) => {\n console.log(\"loadAdditionalAsset\", code, segment);\n if (code === \"emoji\") {\n const unicode = segment.codePointAt(0).toString(16).toUpperCase();\n return `data:image/svg+xml;base64,` + btoa(await loadEmoji(unicode));\n }\n return \"\";\n },\n },\n );\n return await render(svg);\n}\n\nconst loadFonts = async () => {\n const fontsConfig = [\n { name: \"Inter\", weight: 400, fontFile: \"Inter-Regular.otf\" },\n // { name: \"Inter\", weight: 500, fontFile: \"Inter-Medium.otf\" },\n { name: \"Inter\", weight: 600, fontFile: \"Inter-SemiBold.otf\" },\n // { name: \"Inter\", weight: 700, fontFile: \"Inter-Bold.otf\" },\n ];\n const fontPromises = fontsConfig.map(async (font) => {\n const fontUrl = \"https://cdn.jsdelivr.net/npm/@tamagui/font-inter@1.108.3/otf/\" + font.fontFile;\n const fontArrayBuf = await fetch(fontUrl).then((res) => res.arrayBuffer());\n return { name: font.name, data: fontArrayBuf, weight: font.weight };\n });\n const fonts: any = await Promise.all(fontPromises);\n\n return fonts;\n};\n\nconst loadEmoji = (code) => {\n // const api = `https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/svg/${code.toLowerCase()}.svg`\n const api = `https://cdn.jsdelivr.net/gh/shuding/fluentui-emoji-unicode/assets/${code.toLowerCase()}_color.svg`;\n return fetch(api).then((r) => r.text());\n};\n\nconst base64Icon = (svg: any) => {\n if (!svg) return undefined;\n svg = svg.replace(\"stroke=\\\"currentColor\\\"\", \"stroke=\\\"white\\\"\");\n const base64 = Buffer.from(svg).toString(\"base64\");\n // console.log('getIconDataUrl', name, svg, base64)\n return `data:image/svg+xml;base64,${base64}`;\n};",[],[156,207],{"_102":214,"_95":215,"_157":114,"_159":158,"_160":138,"_161":162,"_163":116,"_104":216,"_99":32,"_165":217,"_167":218,"_168":22,"_169":-5,"_170":219,"_98":220},"1076f1d8-1c5a-11f0-b5fc-569c3dd06744","index.tsx",["D",1744983359673],"http","/** @jsxImportSource npm:hono/jsx */\nimport { serveFile } from \"https://esm.town/v/std/utils@64-main/index.ts\";\nimport { Hono } from \"npm:hono\";\n\nimport * as db from \"./db.ts\";\nimport { embedMetadata, handleFarcasterEndpoints, name } from \"./farcaster.ts\";\nimport { handleImageEndpoints } from \"./image.tsx\";\n\nconst app = new Hono();\n\nhandleImageEndpoints(app);\nhandleFarcasterEndpoints(app);\n\napp.get(\"/testing\", c =>\n c.json({\n hello: \"world\",\n baseUrl: c.req.url.replace(c.req.path, \"\"),\n \"import.meta.url\": import.meta.url,\n }));\n\napp.get(\"/api/counter/get\", async c => c.json(await db.get(\"counter\")));\napp.get(\"/api/counter/increment\", async c => c.json(await db.set(\"counter\", (await db.get(\"counter\") || 0) + 1)));\n\napp.get(\"/frontend/**/*\", c => serveFile(c.req.path, import.meta.url));\n\napp.get(\"/\", async c => {\n const url = new URL(c.req.url);\n const path = c.req.url?.replace(url.origin, \"\");\n return c.html(generateHtml(url.origin, path));\n});\napp.get(\"*\", async c => {\n const url = new URL(c.req.url);\n const path = c.req.url?.replace(url.origin, \"\");\n return c.html(generateHtml(url.origin, path));\n});\n\nfunction generateHtml(baseUrl: string, path: string = \"/\"): any {\n return (\n \n \n {name}\n \n \n \n \n \n \n \n

\n {/* */}\n \n \n \n );\n}\n\n// Unwrap and rethrow Hono errors as the original error\n// If you delete this, all errors will be \"Internal Server Error\"\napp.onError((err, c) => {\n throw err;\n});\n\n// HTTP vals expect an exported \"fetch handler\"\n// This is how you \"run the server\" in Val Town with Hono\nexport default app.fetch;",[],[156,215],[156],{"_102":223,"_95":224,"_157":225,"_159":-5,"_160":138,"_161":162,"_163":116,"_104":226,"_99":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":227,"_98":304},"10770f7e-1c5a-11f0-b5fc-569c3dd06744","frontend","3f8dd3d5-6c81-433a-8c7f-5c06bc10654b",["D",1744983359673],[228,259,274,289,297],{"_102":229,"_95":230,"_157":231,"_159":225,"_160":138,"_161":162,"_163":116,"_104":232,"_99":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":233,"_98":258},"1077018c-1c5a-11f0-b5fc-569c3dd06744","components","1568d8ed-c3cd-4d2d-8755-5bb53e6ec233",["D",1744983359673],[234,242,250],{"_102":235,"_95":236,"_157":237,"_159":231,"_160":138,"_161":162,"_163":116,"_104":238,"_99":32,"_165":177,"_167":239,"_168":22,"_169":-5,"_170":240,"_98":241},"1076f69c-1c5a-11f0-b5fc-569c3dd06744","Example.tsx","dfd99155-e1ae-4443-b4f4-5fe2934db1e9",["D",1744983359673],"/** @jsxImportSource https://esm.sh/react@19 */\nimport fcsdk from \"https://esm.sh/@farcaster/frame-sdk\";\nimport { useEffect, useState } from \"https://esm.sh/react@19\";\n\nimport { ShareButton } from \"./ui.tsx\";\n\nexport function Example() {\n const [context, setContext] = useState();\n useEffect(() => {\n fcsdk.actions.ready();\n fcsdk.context.then(setContext);\n }, []);\n\n const onShare = () => {\n if (!context) return;\n const text = `Check out Spaces mini app by @moe!\\n`;\n fcsdk?.actions?.composeCast?.({ text, embeds: [window.location.href] });\n };\n\n return (\n

Mini App Starter

\n {context && }\n

Farcaster Mini App Starter Project on Val Town

\n );\n}",[],[224,230,236],{"_102":243,"_95":244,"_157":245,"_159":231,"_160":138,"_161":162,"_163":116,"_104":246,"_99":32,"_165":177,"_167":247,"_168":22,"_169":-5,"_170":248,"_98":249},"1076f8f4-1c5a-11f0-b5fc-569c3dd06744","FarcasterMiniApp.tsx","b7ac72ff-7770-4fe8-849a-e5d59fcc3aca",["D",1744983359673],"/** @jsxImportSource https://esm.sh/react@19 */\nimport fcsdk from \"https://esm.sh/@farcaster/frame-sdk\";\nimport { useEffect, useState } from \"https://esm.sh/react@19\";\nimport { formatAddress, formatJSON, MonoButtonWithStatus, Section } from \"./ui.tsx\";\n\nexport function FarcasterMiniApp() {\n const [context, setContext] = useState();\n const [walletAddresses, setWalletAddresses] = useState();\n const [contextExpanded, setContextExpanded] = useState(false);\n\n useEffect(() => {\n fcsdk.actions.ready();\n fcsdk.context.then(setContext);\n fcsdk.wallet?.ethProvider?.request({ method: \"eth_requestAccounts\" }).then(setWalletAddresses).catch(console.log);\n }, []);\n\n console.log(fcsdk, context);\n\n return (\n

\n {context && (\n <>\n {context?.user?.fid && (\n

User

{context?.user?.username}

{context?.user?.fid}

\n )}\n\n {walletAddresses?.length > 0 && (\n

Wallet

{formatAddress(walletAddresses[0])}

\n\n

\n \n fcsdk.wallet?.ethProvider?.request({\n method: \"eth_chainId\",\n })}\n >\n chainId\n \n \n fcsdk.wallet?.ethProvider?.request({\n method: \"wallet_switchEthereumChain\",\n params: [{ chainId: \"0x2105\" }],\n })}\n >\n switchChain (base)\n \n \n fcsdk.wallet?.ethProvider?.request({\n method: \"eth_sendTransaction\",\n params: [{\n from: walletAddresses[0],\n to: \"0x5F77DBc7686327D3BF6eC1887E5a3AdA0aE60841\",\n value: \"0x\" + (100000000000000).toString(16),\n }],\n })}\n >\n sendTransaction\n \n

\n )}\n\n

sdk.actions

\n fcsdk.actions.viewProfile({ fid: context.user.fid })}>\n viewProfile\n \n fcsdk.actions.composeCast({ text: \"Hello\" })}>\n composeCast\n \n fcsdk.actions.openUrl(\"https://www.youtube.com/watch?v=dQw4w9WgXcQ\")}\n >\n openUrl\n \n fcsdk.actions.openUrl(\"https://warpcast.com/~/compose\")}>\n openUrl (warpcast)\n \n fcsdk.actions.setPrimaryButton({ text: \"Primary Button\" })}>\n setPrimaryButton\n \n fcsdk.actions.addFrame()}>addFrame\n fcsdk.actions.signIn({})}>signIn\n fcsdk.actions.close()}>close\n\n {\n /* \n fcsdk.actions.swap({\n sellToken: \"eip155:8453/erc20:0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913\",\n buyToken: \"eip155:8453/erc20:0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913\",\n sellAmount: \"3000000\",\n })}\n >\n swap\n */\n }\n

\n\n

sdk.context

setContextExpanded(!contextExpanded)}>\n {contextExpanded ? \"▲\" : \"▼\"}\n

\n\n {contextExpanded && (\n

\n {formatJSON(context)}\n

\n )}\n

\n \n )}\n\n {!context && (\n

Open this web app in Warpcast to see the Mini App.

\n )}\n

\n );\n}",[],[224,230,244],{"_102":251,"_95":252,"_157":253,"_159":231,"_160":138,"_161":162,"_163":116,"_104":254,"_99":32,"_165":177,"_167":255,"_168":22,"_169":-5,"_170":256,"_98":257},"1076fd5e-1c5a-11f0-b5fc-569c3dd06744","ui.tsx","fbaff46a-88c1-4101-8acf-ea9c0e1e4ade",["D",1744983359673],"/** @jsxImportSource https://esm.sh/react@19 */\nimport { ArrowLeft, Share } from \"https://esm.sh/lucide-react\";\nimport { useEffect, useState } from \"https://esm.sh/react@19\";\n\nexport function Section({ children, ...props }: any) {\n const sectionClass = `p-5 rounded-3xl bg-neutral-400/15 ${props.className || \"\"}`;\n return

{children}

;\n}\n\nexport const Input = ({ ...props }) => {\n let sizeStyles = \"text-md px-3 py-1\";\n if (props.sm || props.size == \"sm\") sizeStyles = \"text-sm px-2 py-1\";\n if (props.lg || props.size == \"lg\") sizeStyles = \"text-lg px-3 py-2\";\n const className = `\n\tborder-0 bg-inherit text-inherit rounded-xl shadow-sm \n\tring-1 ring-inset ring-neutral-400 dark:ring-neutral-600 \n\tfocus:ring-2 focus:ring-inset focus:ring-neutral-600 dark:focus:ring-neutral-300\n\tplaceholder:text-neutral-500 placeholder:opacity-50 disabled:opacity-50 disabled:bg-neutral-200/70 dark:disabled:bg-neutral-800/70\n\t${sizeStyles}\n\t${props.className || \"\"}\n\t`;\n\n return ;\n};\n\nexport const TextArea = ({ ...props }) => {\n const className = `\n\tborder-0 bg-inherit text-inherit rounded-xl shadow-sm px-3 py-2\n\tring-1 ring-inset ring-neutral-400 dark:ring-neutral-600 \n\tfocus:ring-2 focus:ring-inset focus:ring-neutral-600 dark:focus:ring-neutral-300\n\tplaceholder:text-neutral-500 placeholder:opacity-50 \n\t${props.className || \"\"}\n\t`;\n\n return

;\n};\n\nexport const Select = ({ ...props }) => {\n  const className = `\n\tborder-0 bg-inherit text-inherit rounded-xl shadow-sm px-3 py-2\n\tring-1 ring-inset ring-neutral-400 dark:ring-neutral-600 \n\tfocus:ring-2 focus:ring-inset focus:ring-neutral-600 dark:focus:ring-neutral-300\n\t${props.className || \"\"}\n\t`;\n\n  return <select {...props} className={className} />;\n};\n\nexport const Checkbox = ({ label, ...props }) => {\n  const className = `\n\th-4 w-4 rounded-xl bg-inherit text-neutral-700\n\tborder border-neutral-400 dark:border-neutral-600  focus:ring-neutral-700 dark:focus:ring-neutral-300 \n\txfocus:ring-0 xfocus:outline-red-500 focus:ring-offset-transparent focus:ring-offset-0\n\t${props.className || \"\"}\n\t`;\n\n  return (\n    <div className=\"relative flex gap-x-2\">\n      <div className=\"flex  items-center\">\n        <input type=\"checkbox\" {...props} className={className} />\n      </div>\n      <div className=\"text-sm flex  items-center\">\n        <label htmlFor={props.id} className={props?.checked ? \"font-medium\" : \"opacity-50\"}>\n          {label}\n        </label>\n      </div>\n    </div>\n  );\n};\n\nexport const Button = ({ ...props }) => {\n  let sizeStyles = \"text-md px-3 py-1\";\n  if (props.sm || props.size == \"sm\") sizeStyles = \"text-sm px-2 py-1\";\n  if (props.lg || props.size == \"lg\") sizeStyles = \"text-lg px-4 py-2\";\n  let variantStyles =\n    \"bg-neutral-900 border border-transparent dark:bg-neutral-100 text-neutral-100 dark:text-neutral-900 \";\n  if (props.variant === \"outline\") {\n    variantStyles =\n      \"bg-transparent border border-neutral-400 dark:border-neutral-600 text-neutral-900 dark:text-neutral-100\";\n  }\n\n  const className = `\n\tflex flex-row justify-center items-center   rounded-xl font-semibold \n\t${variantStyles}\n\tshadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600  \n\topacity-95 hover:opacity-100 disabled:opacity-50\n\t${sizeStyles}\n\t${props.className || \"\"}\n\t`;\n\n  if (props.href && !props.disabled) return <a {...props} className={className} />;\n  return <button {...props} className={className} />;\n};\n\n// export function Input(props: any) {\n//   const inputClass = \"dark:bg-white dark:text-black bg-black text-white rounded-md px-3 py-1 \";\n//   return <input class={inputClass} {...props} />;\n// }\n\n// export function Button(props: any) {\n//   const buttonClass = \"dark:bg-white dark:text-black bg-black text-white rounded-md px-3 py-1 \";\n//   return <button class={buttonClass} {...props} />;\n// }\n\nexport function MonoButton(props: any) {\n  return (\n    <Button {...props}>\n      <div class=\"font-mono text-sm font-normal\">{props.children}</div>\n    </Button>\n  );\n}\n\nexport function MonoButtonWithStatus(props: any) {\n  const [status, setStatus] = useState<any>();\n  const handleClick = async () => {\n    try {\n      setStatus(\"...\");\n      const result = await props.onClick?.();\n      setStatus(formatJSON(result));\n    } catch (err) {\n      console.error(err);\n      setStatus(\"Error: \" + err);\n    }\n  };\n\n  return (\n    <div>\n      <MonoButton {...props} onClick={handleClick} />\n      {status && <div class={\"mt-2 font-mono text-xs opacity-50 whitespace-pre-wrap break-all\"}>{status}</div>}\n    </div>\n  );\n}\n\nexport function formatJSON(json: any) {\n  return JSON.stringify(json, null, 2);\n}\n\nexport const shorten = (string, start, end) => {\n  return string.substring(0, start) + \"…\" + string.substring(string.length - end);\n};\n\nexport const formatAddress = (address) => {\n  if (!address) return \"\";\n  if (address.length < 20) return address;\n  return shorten(address, 6, 4);\n};\n\nexport function BackButton({}) {\n  return <ArrowLeft className=\"w-5 h-5 m-2 cursor-pointer opacity-50\" onClick={() => window.location.href = \"/\"} />;\n}\n\nexport function ShareButton({ onClick }) {\n  return <Share className=\"w-5 h-5 m-2 cursor-pointer opacity-50\" onClick={onClick} />;\n}",[],[224,230,252],[224,230],{"_102":260,"_95":261,"_157":262,"_159":225,"_160":138,"_161":162,"_163":116,"_104":263,"_99":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":264,"_98":273},"1077056a-1c5a-11f0-b5fc-569c3dd06744","screens","33a40c15-a67f-42df-bf30-cbe373eeb524",["D",1744983359673],[265],{"_102":266,"_95":267,"_157":268,"_159":262,"_160":138,"_161":162,"_163":116,"_104":269,"_99":32,"_165":177,"_167":270,"_168":22,"_169":-5,"_170":271,"_98":272},"10770330-1c5a-11f0-b5fc-569c3dd06744","Home.tsx","09b4bf86-9a76-4c92-a9e6-368c9b630439",["D",1744983359673],"/** @jsxImportSource https://esm.sh/react@19 */\nimport fcsdk from \"https://esm.sh/@farcaster/frame-sdk\";\nimport { useQuery } from \"https://esm.sh/@tanstack/react-query@5\";\nimport { LoaderCircle, Mic, MicOff } from \"https://esm.sh/lucide-react\";\nimport { NavLink, Route, Routes, useNavigate, useParams } from \"https://esm.sh/react-router@7\";\nimport { useEffect, useRef, useState } from \"https://esm.sh/react@19\";\n\nimport { Button, Input, Section } from \"../components/ui.tsx\";\nimport { fetchUsersById } from \"../util/neynar.ts\";\n\nexport function Home() {\n  return (\n    <div class=\"p-5 mb-8\">\n    </div>\n  );\n}",[],[224,261,267],[224,261],{"_102":275,"_95":276,"_157":277,"_159":225,"_160":138,"_161":162,"_163":116,"_104":278,"_99":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":279,"_98":288},"107709fc-1c5a-11f0-b5fc-569c3dd06744","util","d3250fcc-d9ac-4942-a8a0-eb3495134e94",["D",1744983359673],[280],{"_102":281,"_95":282,"_157":283,"_159":277,"_160":138,"_161":162,"_163":116,"_104":284,"_99":32,"_165":177,"_167":285,"_168":22,"_169":-5,"_170":286,"_98":287},"10770736-1c5a-11f0-b5fc-569c3dd06744","neynar.ts","0fcdca21-311e-495a-9c93-40563ddf807a",["D",1744983359673],"const baseUrl = \"https://api.neynar.com/v2/farcaster/\";\n\nexport async function fetchNeynarGet(path: string) {\n  const res = await fetch(baseUrl + path, {\n    method: \"GET\",\n    headers: {\n      \"Content-Type\": \"application/json\",\n      \"x-neynar-experimental\": \"true\",\n      \"x-api-key\": \"NEYNAR_API_DOCS\",\n    },\n  });\n  const json = await res.json();\n  return json;\n}\n\nexport function fetchUser(username: string) {\n  return fetchNeynarGet(`user/by_username?username=${username}`).then(r => r.user);\n}\nexport function fetchUsersById(fids: string) {\n  return fetchNeynarGet(`user/bulk?fids=${fids}`).then(r => r.users);\n}\n\nexport function fetchUserFeed(fid: number) {\n  return fetchNeynarGet(\n    `feed?feed_type=filter&filter_type=fids&fids=${fid}&with_recasts=false&with_replies=false&limit=100&cursor=`,\n  ).then(r => r.casts);\n}\n\nexport function fetchChannel(channelId: string) {\n  return fetchNeynarGet(`channel?id=${channelId}`).then(r => r.channel);\n}\n\nexport function fetchChannelFeed(channelId: string) {\n  return fetchNeynarGet(\n    `feed/channels?channel_ids=${channelId}&with_recasts=false&limit=100`,\n  ).then(r => r.casts);\n}\n\nexport function fetchChannelsFeed(channelIds: array) {\n  return fetchNeynarGet(\n    `feed/channels?channel_ids=${channelIds.join(\",\")}&with_recasts=false&limit=100`,\n  ).then(r => r.casts);\n}",[],[224,276,282],[224,276],{"_102":290,"_95":291,"_157":292,"_159":225,"_160":138,"_161":162,"_163":116,"_104":293,"_99":32,"_165":177,"_167":294,"_168":22,"_169":-5,"_170":295,"_98":296},"10770b50-1c5a-11f0-b5fc-569c3dd06744","App.tsx","da4544de-4943-4bef-842c-ad0ebe1265a3",["D",1744983359673],"/** @jsxImportSource https://esm.sh/react@19 */\nimport fcsdk from \"https://esm.sh/@farcaster/frame-sdk\";\nimport { useQuery } from \"https://esm.sh/@tanstack/react-query@5\";\nimport { NavLink, Route, Routes } from \"https://esm.sh/react-router@7\";\nimport { useEffect, useState } from \"https://esm.sh/react@19\";\n\nimport { Example } from \"./components/Example.tsx\";\nimport { FarcasterMiniApp } from \"./components/FarcasterMiniApp.tsx\";\nimport { Button, Section } from \"./components/ui.tsx\";\nimport { fetchNeynarGet } from \"./util/neynar.ts\";\n\nexport function App() {\n  const navLinks = [\n    { name: \"Farcaster SDK\", path: \"/\" },\n    { name: \"Database\", path: \"/db\" },\n    { name: \"About\", path: \"/about\" },\n  ];\n\n  return (\n    <div>\n      <Example />\n\n      <nav className=\"flex gap-4 m-5 my-6\">\n        {navLinks.map((link) => (\n          <NavLink\n            key={link.path}\n            to={link.path}\n            className={({ isActive }) => \"text-sm uppercase \" + (isActive ? \"border-b border-current\" : \"opacity-50\")}\n          >\n            {link.name}\n          </NavLink>\n        ))}\n      </nav>\n\n      <Routes>\n        <Route path=\"/\" element={<FarcasterMiniApp />} />\n        <Route path=\"/db\" element={<Database />} />\n        <Route path=\"/about\" element={<About />} />\n        <Route path=\"/neynar\" element={<Neynar />} />\n      </Routes>\n    </div>\n  );\n}\n\nfunction About() {\n  return (\n    <Section className=\"flex flex-col items-start gap-3 m-5\">\n      {/* <h2 className=\"\">Features:</h2> */}\n      <div className=\"opacity-50\">\n        <div className=\"\">✷ Hono + React + Tailwind</div>\n        <div className=\"\">✷ React Router + React Query</div>\n        <div className=\"\">✷ Built-in database (blob storage)</div>\n        <div className=\"\">✷ Farcaster mini app manifest + webhook + embed metadata</div>\n        <div className=\"\">✷ Farcaster notifications (storing tokens, sending recurring notifications, ...)</div>\n        <div className=\"\">✷ Neynar API integration for Farcaster data</div>\n        <div className=\"\">✷ Hosted on Val Town (instant deployments on save)</div>\n        <div className=\"\">\n          ✷ Source Code:{\" \"}\n          <a href=\"https://www.val.town/x/moe/MiniAppStarter\" target=\"_blank\" className=\"underline\">\n            val.town/x/moe/MiniAppStarter\n          </a>\n        </div>\n      </div>\n    </Section>\n  );\n}\n\nfunction Database() {\n  const queryFn = () => fetch(\"/api/counter/get\").then((r) => r.json());\n  const { data, refetch } = useQuery({ queryKey: [\"counter\"], queryFn });\n  return (\n    <Section className=\"flex flex-col items-start gap-3 m-5\">\n      {/* <h2 className=\"font-semibold\">Database Example</h2> */}\n      <div className=\"\">Counter value: {data}</div>\n      <Button variant=\"outline\" onClick={() => fetch(\"/api/counter/increment\").then(refetch)}>\n        Increment\n      </Button>\n    </Section>\n  );\n}\n\nfunction Neynar() {\n  useEffect(() => {\n    fetchNeynarGet(\"user/by_username?username=moe\").then(console.log).catch(console.error);\n  }, []);\n\n  return <h2 className=\"m-5\">Neynar page</h2>;\n}",[],[224,291],{"_102":298,"_95":215,"_157":299,"_159":225,"_160":138,"_161":162,"_163":116,"_104":300,"_99":32,"_165":177,"_167":301,"_168":22,"_169":-5,"_170":302,"_98":303},"10770df8-1c5a-11f0-b5fc-569c3dd06744","b3998efc-7f44-4d98-aebb-766e095715bb",["D",1744983359673],"/** @jsxImportSource https://esm.sh/react@19 */\nimport { QueryClient, QueryClientProvider } from \"https://esm.sh/@tanstack/react-query@5\";\nimport { createRoot } from \"https://esm.sh/react-dom@19/client\";\nimport { BrowserRouter } from \"https://esm.sh/react-router@7\";\n\nimport { App } from \"./App.tsx\";\n\nconst queryClient = new QueryClient();\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n  throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render(\n  <BrowserRouter>\n    <QueryClientProvider client={queryClient}>\n      <App />\n    </QueryClientProvider>\n  </BrowserRouter>,\n);",[],[224,215],[224],{"_102":306,"_95":307,"_157":308,"_159":-5,"_160":138,"_161":162,"_163":116,"_104":309,"_99":32,"_165":310,"_167":311,"_168":22,"_169":-5,"_170":312,"_98":313},"10771122-1c5a-11f0-b5fc-569c3dd06744","README.md","02863658-7da7-40da-a2f2-d9195e0436c9",["D",1744983359673],"file","# React Hono Starter\n\nThis app is a starter template for client-side React and server-side Hono.\n\n- **Remix** this starter template on the top right to get started.\n\n- The **entrypoint** is `/backend/index.ts`. That's the backend HTTP server, which also serves the all the frontend assets.\n\n- The **client-side entrypoint** is `/frontend/index.html`, which in turn imports `/frontend/index.tsx`, which in turn imports the React app from `/frontend/App.tsx`.\n\n[React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) is a fuller featured example project, with a SQLite database table, queries, client-side CSS and a favicon, and some shared code that runs on both client and server.",[],[307],{"_102":315,"_95":316,"_157":317,"_159":-5,"_160":138,"_161":162,"_163":116,"_104":318,"_99":32,"_165":310,"_167":319,"_168":22,"_169":-5,"_170":320,"_98":321},"10772c48-1c5a-11f0-b5fc-569c3dd06744","TODO.txt","e05d729f-2a1f-46d5-89f5-db5bf1eec2d7",["D",1744983359673],"minting",[],[316],"files",[154,172,181,189,197,205,213,222,228,234,242,250,259,265,274,280,289,297,305,314],"counts",{"_326":32,"_327":162,"_328":32,"_329":32},"pulls","branches","forks","envVars","contents",[332,335,338,341],{"_102":155,"_95":156,"_157":158,"_159":-5,"_160":138,"_161":162,"_163":116,"_104":333,"_99":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_98":334},["D",1744983359673],[156],{"_102":223,"_95":224,"_157":225,"_159":-5,"_160":138,"_161":162,"_163":116,"_104":336,"_99":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_98":337},["D",1744983359673],[224],{"_102":306,"_95":307,"_157":308,"_159":-5,"_160":138,"_161":162,"_163":116,"_104":339,"_99":32,"_165":310,"_167":311,"_168":22,"_169":-5,"_98":340},["D",1744983359673],[307],{"_102":315,"_95":316,"_157":317,"_159":-5,"_160":138,"_161":162,"_163":116,"_104":342,"_99":32,"_165":310,"_167":319,"_168":22,"_169":-5,"_98":343},["D",1744983359673],[316],"upstreamProject",{"_102":146,"_95":96,"_110":346,"_111":-5,"_108":109,"_23":347},"Hono + React + Tailwind + Farcaster Mini App Starter Project",{"_93":348,"_130":349},"moe","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yanFDd29JUGxvVEl1YVVlcHJiV2VYMUxFWjkifQ","upstreamBranch",{"_102":141,"_104":352,"_353":354,"_95":43,"_139":146,"_99":355,"_140":-5,"_142":-5,"_356":357,"_106":-5,"_151":22,"_108":109,"_150":348,"_16":148,"_149":96},["D",1742482886202],"updatedAt",["D",1755538237179],679,"lockfileKey","1755538252953-esm.town_v_moe_MiniAppStarter@679-main","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.history",{"_93":94,"_95":96,"_97":43,"_100":364,"_369":32,"_370":371,"_472":22},{"_102":103,"_95":96,"_104":365,"_106":-5,"_107":22,"_108":109,"_110":-5,"_111":-5,"_14":112,"_113":114,"_115":116,"_117":-5,"_118":32,"_16":119,"_120":121,"_122":121,"_123":124,"_125":124,"_126":124,"_127":121,"_128":121,"_23":366,"_132":367,"_135":368,"_151":22},["D",1744983359673],{"_93":94,"_130":131},{"_93":94,"_134":131},{"_99":137,"_95":43,"_102":138,"_139":103,"_140":141,"_142":143,"_144":109,"_145":146,"_147":148,"_149":96,"_150":94},"page","history",[372,386],{"_102":373,"_160":138,"_104":374,"_99":137,"_16":119,"_159":375,"_376":-5,"_23":377,"_310":378,"_379":-5,"_380":-5,"_381":-5,"_382":-5,"_383":384},"aecab804-6e19-11f0-b191-0224a6c84d84",["D",1753971703400],"1079febe-1c5a-11f0-b5fc-569c3dd06744","incomingCommitId",{"_102":112,"_16":119,"_93":94,"_134":131},{"_157":175,"_95":174,"_165":177},"pull","merge","revert","multiple","commits",[385],{"_102":373,"_160":138,"_104":374,"_99":137,"_16":119,"_159":375,"_376":-5,"_23":377,"_310":378,"_379":-5,"_380":-5,"_381":-5},{"_102":375,"_160":138,"_104":387,"_99":162,"_16":119,"_159":-5,"_376":-5,"_23":388,"_310":389,"_379":-5,"_380":-5,"_381":-5,"_382":390,"_383":393},["D",1744983359673],{"_102":112,"_16":119,"_93":94,"_134":131},{"_157":253,"_95":252,"_165":177},{"_391":392},"count",20,[394,395,399,403,407,411,415,419,423,427,431,435,439,443,447,451,456,460,464,468],{"_102":375,"_160":138,"_104":387,"_99":162,"_16":119,"_159":-5,"_376":-5,"_23":388,"_310":389,"_379":-5,"_380":-5,"_381":-5},{"_102":375,"_160":138,"_104":396,"_99":162,"_16":119,"_159":-5,"_376":-5,"_23":397,"_310":398,"_379":-5,"_380":-5,"_381":-5},["D",1744983359673],{"_102":112,"_16":119,"_93":94,"_134":131},{"_157":317,"_95":316,"_165":310},{"_102":375,"_160":138,"_104":400,"_99":162,"_16":119,"_159":-5,"_376":-5,"_23":401,"_310":402,"_379":-5,"_380":-5,"_381":-5},["D",1744983359673],{"_102":112,"_16":119,"_93":94,"_134":131},{"_157":262,"_95":261,"_165":166},{"_102":375,"_160":138,"_104":404,"_99":162,"_16":119,"_159":-5,"_376":-5,"_23":405,"_310":406,"_379":-5,"_380":-5,"_381":-5},["D",1744983359673],{"_102":112,"_16":119,"_93":94,"_134":131},{"_157":308,"_95":307,"_165":310},{"_102":375,"_160":138,"_104":408,"_99":162,"_16":119,"_159":-5,"_376":-5,"_23":409,"_310":410,"_379":-5,"_380":-5,"_381":-5},["D",1744983359673],{"_102":112,"_16":119,"_93":94,"_134":131},{"_157":283,"_95":282,"_165":177},{"_102":375,"_160":138,"_104":412,"_99":162,"_16":119,"_159":-5,"_376":-5,"_23":413,"_310":414,"_379":-5,"_380":-5,"_381":-5},["D",1744983359673],{"_102":112,"_16":119,"_93":94,"_134":131},{"_157":299,"_95":215,"_165":177},{"_102":375,"_160":138,"_104":416,"_99":162,"_16":119,"_159":-5,"_376":-5,"_23":417,"_310":418,"_379":-5,"_380":-5,"_381":-5},["D",1744983359673],{"_102":112,"_16":119,"_93":94,"_134":131},{"_157":114,"_95":215,"_165":217},{"_102":375,"_160":138,"_104":420,"_99":162,"_16":119,"_159":-5,"_376":-5,"_23":421,"_310":422,"_379":-5,"_380":-5,"_381":-5},["D",1744983359673],{"_102":112,"_16":119,"_93":94,"_134":131},{"_157":208,"_95":207,"_165":177},{"_102":375,"_160":138,"_104":424,"_99":162,"_16":119,"_159":-5,"_376":-5,"_23":425,"_310":426,"_379":-5,"_380":-5,"_381":-5},["D",1744983359673],{"_102":112,"_16":119,"_93":94,"_134":131},{"_157":268,"_95":267,"_165":177},{"_102":375,"_160":138,"_104":428,"_99":162,"_16":119,"_159":-5,"_376":-5,"_23":429,"_310":430,"_379":-5,"_380":-5,"_381":-5},["D",1744983359673],{"_102":112,"_16":119,"_93":94,"_134":131},{"_157":277,"_95":276,"_165":166},{"_102":375,"_160":138,"_104":432,"_99":162,"_16":119,"_159":-5,"_376":-5,"_23":433,"_310":434,"_379":-5,"_380":-5,"_381":-5},["D",1744983359673],{"_102":112,"_16":119,"_93":94,"_134":131},{"_157":200,"_95":199,"_165":177},{"_102":375,"_160":138,"_104":436,"_99":162,"_16":119,"_159":-5,"_376":-5,"_23":437,"_310":438,"_379":-5,"_380":-5,"_381":-5},["D",1744983359673],{"_102":112,"_16":119,"_93":94,"_134":131},{"_157":192,"_95":191,"_165":177},{"_102":375,"_160":138,"_104":440,"_99":162,"_16":119,"_159":-5,"_376":-5,"_23":441,"_310":442,"_379":-5,"_380":-5,"_381":-5},["D",1744983359673],{"_102":112,"_16":119,"_93":94,"_134":131},{"_157":245,"_95":244,"_165":177},{"_102":375,"_160":138,"_104":444,"_99":162,"_16":119,"_159":-5,"_376":-5,"_23":445,"_310":446,"_379":-5,"_380":-5,"_381":-5},["D",1744983359673],{"_102":112,"_16":119,"_93":94,"_134":131},{"_157":237,"_95":236,"_165":177},{"_102":375,"_160":138,"_104":448,"_99":162,"_16":119,"_159":-5,"_376":-5,"_23":449,"_310":450,"_379":-5,"_380":-5,"_381":-5},["D",1744983359673],{"_102":112,"_16":119,"_93":94,"_134":131},{"_157":184,"_95":183,"_165":177},{"_102":375,"_160":138,"_104":452,"_99":162,"_16":119,"_159":-5,"_376":-5,"_23":453,"_310":454,"_379":-5,"_380":-5,"_381":-5},["D",1744983359673],{"_102":112,"_16":119,"_93":94,"_134":131},{"_157":175,"_95":174,"_165":455},"interval",{"_102":375,"_160":138,"_104":457,"_99":162,"_16":119,"_159":-5,"_376":-5,"_23":458,"_310":459,"_379":-5,"_380":-5,"_381":-5},["D",1744983359673],{"_102":112,"_16":119,"_93":94,"_134":131},{"_157":231,"_95":230,"_165":166},{"_102":375,"_160":138,"_104":461,"_99":162,"_16":119,"_159":-5,"_376":-5,"_23":462,"_310":463,"_379":-5,"_380":-5,"_381":-5},["D",1744983359673],{"_102":112,"_16":119,"_93":94,"_134":131},{"_157":158,"_95":156,"_165":166},{"_102":375,"_160":138,"_104":465,"_99":162,"_16":119,"_159":-5,"_376":-5,"_23":466,"_310":467,"_379":-5,"_380":-5,"_381":-5},["D",1744983359673],{"_102":112,"_16":119,"_93":94,"_134":131},{"_157":292,"_95":291,"_165":177},{"_102":375,"_160":138,"_104":469,"_99":162,"_16":119,"_159":-5,"_376":-5,"_23":470,"_310":471,"_379":-5,"_380":-5,"_381":-5},["D",1744983359673],{"_102":112,"_16":119,"_93":94,"_134":131},{"_157":225,"_95":224,"_165":166},"hasNext","actionData","errors"]
</article></body></html>

History