Mini App Starter

Hono + React + Tailwind Starter Project on Val Town

\n )\n}\n\nexport async function iconImage(rounded = false) {\n const roundedClass = rounded ? 'rounded-[96px]' : ''\n return await ogImage(\n \n

\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(body, {\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 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}\n",[],[186,234],{"_103":243,"_95":244,"_157":116,"_159":187,"_160":142,"_161":120,"_163":22,"_105":245,"_99":246,"_165":247,"_167":248,"_168":22,"_169":249,"_170":250,"_98":251},"3b5f0ff0-198c-11f0-8718-569c3dd06744","index.tsx",["D",1744675053055],89,"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;","miniapp-starter",[],[186,244],[186],{"_103":254,"_95":255,"_157":256,"_159":-5,"_160":142,"_161":257,"_163":118,"_105":258,"_99":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":259,"_98":349},"322ec5be-059c-11f0-864d-569c3dd06744","frontend","67d07f00-22ec-4444-8ffe-abcd85bf5aa9",2,["D",1742482886338],[260,295,313,331,341],{"_103":261,"_95":262,"_157":263,"_159":256,"_160":142,"_161":264,"_163":118,"_105":265,"_99":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":266,"_98":294},"324ee222-059c-11f0-8fd2-569c3dd06744","components","b7324e06-5db3-467c-8006-e53bbc155394",5,["D",1742482886547],[267,276,285],{"_103":268,"_95":269,"_157":270,"_159":263,"_160":142,"_161":271,"_163":22,"_105":272,"_99":238,"_165":208,"_167":273,"_168":22,"_169":-5,"_170":274,"_98":275},"d0c99562-1994-11f0-92d5-569c3dd06744","Example.tsx","324edbf6-059c-11f0-8fd2-569c3dd06744",566,["D",1744678739707],"/** @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}",[],[255,262,269],{"_103":277,"_95":278,"_157":279,"_159":263,"_160":142,"_161":100,"_163":22,"_105":280,"_99":281,"_165":208,"_167":282,"_168":22,"_169":-5,"_170":283,"_98":284},"cec25854-40e4-11f0-9e37-76b3cceeab13","FarcasterMiniApp.tsx","c7f50f0e-059c-11f0-b718-569c3dd06744",["D",1749001191354],260,"/** @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 [capabilities, setCapabilities] = useState()\n\n useEffect(() => {\n fcsdk.actions.ready()\n fcsdk.context.then(setContext)\n fcsdk?.getCapabilities?.then(setCapabilities).catch(console.log)\n fcsdk.wallet?.ethProvider?.request({ method: 'eth_requestAccounts' }).then(setWalletAddresses).catch(console.log)\n }, [])\n\n console.log(fcsdk, context, walletAddresses, capabilities)\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 >\n chainId\n \n \n fcsdk.wallet?.ethProvider?.request({\n method: 'wallet_switchEthereumChain',\n params: [{ chainId: '0x2105' }],\n })\n }\n >\n switchChain (base)\n \n \n fcsdk.wallet?.ethProvider?.request({\n method: 'eth_sendTransaction',\n params: [\n {\n from: walletAddresses[0],\n to: '0x5F77DBc7686327D3BF6eC1887E5a3AdA0aE60841',\n value: '0x' + (100000000000000).toString(16),\n },\n ],\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.viewCast?.({ hash: '0xd81f802e98c1432bb698cb7d4cb6c2ff5057867d' })}\n >\n viewCast\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.addMiniApp()}>addMiniApp\n fcsdk.actions.signIn({})}>signIn\n\n fcsdk.actions.close()}>close\n\n \n fcsdk.actions.swapToken({\n sellToken: 'eip155:8453/erc20:0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913',\n buyToken: 'eip155:8453/native',\n sellAmount: '3000000',\n })\n }\n >\n swapToken\n \n \n fcsdk.actions.sendToken({\n token: 'eip155:8453/erc20:0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913',\n amount: '500000',\n recipientFid: 2073,\n })\n }\n >\n sendToken\n \n \n fcsdk.actions.viewToken({\n token: 'eip155:8453/erc20:0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913',\n })\n }\n >\n viewToken\n \n

\n\n

sdk.experimental

\n fcsdk.experimental.quickAuth?.()}>quickAuth\n fcsdk.getCapabilities?.()}>getCapabilities\n

\n\n

sdk.haptics

\n fcsdk.haptics?.notificationOccurred?.('success')}>\n haptics (success notification)\n \n fcsdk.haptics?.impactOccurred?.('medium')}>\n haptics (medium impact)\n \n fcsdk.haptics?.selectionChanged?.()}>\n haptics (medium impact)\n \n

\n\n {formatJSON(context)}\n {/* {formatJSON(capabilities)} */}\n \n )}\n\n {!context && (\n

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

\n )}\n

\n )\n}\n\nfunction ExpandableSection({ title, children }: { title: string; children: React.ReactNode }) {\n const [expanded, setExpanded] = useState(false)\n\n return (\n

{title}

setExpanded(!expanded)}>\n {expanded ? '▲' : '▼'}\n

\n\n {expanded &&

{children}

}\n

\n )\n}\n",[],[255,262,278],{"_103":286,"_95":287,"_157":288,"_159":263,"_160":142,"_161":289,"_163":118,"_105":290,"_99":197,"_165":208,"_167":291,"_168":22,"_169":-5,"_170":292,"_98":293},"efcb0ff6-40c5-11f0-9cad-76b3cceeab13","ui.tsx","8fa8266a-078e-11f0-b2c6-569c3dd06744",621,["D",1748987932416],"/** @jsxImportSource https://esm.sh/react@19 */\nimport { ArrowLeft, Share } from \"https://esm.sh/lucide-react@0.510.0\";\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}",[],[255,262,287],[255,262],{"_103":296,"_95":297,"_157":298,"_159":256,"_160":142,"_161":299,"_163":118,"_105":300,"_99":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":301,"_98":312},"198e9978-1558-11f0-9ba6-569c3dd06744","screens","198e9a40-1558-11f0-9ba6-569c3dd06744",441,["D",1744212857845],[302],{"_103":303,"_95":304,"_157":305,"_159":298,"_160":142,"_161":306,"_163":22,"_105":307,"_99":308,"_165":208,"_167":309,"_168":22,"_169":-5,"_170":310,"_98":311},"f47bf614-40c5-11f0-9897-76b3cceeab13","Home.tsx","1f71edea-1558-11f0-8a7f-569c3dd06744",622,["D",1748987940286],4,"/** @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@0.510.0\";\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}",[],[255,297,304],[255,297],{"_103":314,"_95":315,"_157":316,"_159":256,"_160":142,"_161":317,"_163":118,"_105":318,"_99":178,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":319,"_98":330},"4c3d2fbc-0caf-11f0-92fc-569c3dd06744","util","b6216968-0c12-11f0-9af5-569c3dd06744",411,["D",1743260748625],[320],{"_103":321,"_95":322,"_157":323,"_159":316,"_160":142,"_161":324,"_163":22,"_105":325,"_99":326,"_165":208,"_167":327,"_168":22,"_169":-5,"_170":328,"_98":329},"541d467a-1558-11f0-b226-569c3dd06744","neynar.ts","d4046b9c-0cad-11f0-95d5-569c3dd06744",444,["D",1744212956087],12,"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}",[],[255,315,322],[255,315],{"_103":332,"_95":333,"_157":334,"_159":256,"_160":142,"_161":335,"_163":22,"_105":336,"_99":337,"_165":208,"_167":338,"_168":22,"_169":-5,"_170":339,"_98":340},"6839795c-40d3-11f0-8273-76b3cceeab13","App.tsx","3255a8c8-059c-11f0-864d-569c3dd06744",623,["D",1748993717926],57,"/** @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 flex-wrap gap-4 gap-y-2 m-5 my-8\">\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}",[],[255,333],{"_103":342,"_95":244,"_157":343,"_159":256,"_160":142,"_161":344,"_163":118,"_105":345,"_99":257,"_165":208,"_167":346,"_168":22,"_169":-5,"_170":347,"_98":348},"d34a04ca-1a11-11f0-b7fc-569c3dd06744","322ec1ea-059c-11f0-864d-569c3dd06744",580,["D",1744732430996],"/** @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);",[],[255,244],[255],{"_103":351,"_95":352,"_157":353,"_159":-5,"_160":142,"_161":354,"_163":118,"_105":355,"_99":32,"_165":179,"_167":356,"_168":22,"_169":-5,"_170":357,"_98":358},"eb63060e-2684-11f0-93e8-569c3dd06744",".vtignore","eb6306d6-2684-11f0-93e8-569c3dd06744",586,["D",1746101277508],".git\n.DS_Store\nnode_modules\nvendor",[],[352],{"_103":360,"_95":361,"_157":362,"_159":-5,"_160":142,"_161":178,"_163":22,"_105":363,"_99":32,"_165":179,"_167":364,"_168":22,"_169":-5,"_170":365,"_98":366},"322424ec-059c-11f0-864d-569c3dd06744","README.md","322425c8-059c-11f0-864d-569c3dd06744",["D",1742482886270],"# 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.",[],[361],{"_103":368,"_95":369,"_157":370,"_159":-5,"_160":142,"_161":371,"_163":22,"_105":372,"_99":373,"_165":179,"_167":374,"_168":22,"_169":-5,"_170":375,"_98":376},"cebac04e-40e4-11f0-a51b-76b3cceeab13","TODO.txt","768f09bc-05b0-11f0-a456-569c3dd06744",624,["D",1749001191342],29,"custom haptics\nwagmi/viem\ntoast\nsupabase db + realtime \nminting",[],[369],{"_103":378,"_95":379,"_157":380,"_159":-5,"_160":142,"_161":381,"_163":118,"_105":382,"_99":32,"_165":179,"_167":383,"_168":22,"_169":-5,"_170":384,"_98":385},"eb69f7f2-2684-11f0-9ca3-569c3dd06744","deno.json","eb69f89c-2684-11f0-9ca3-569c3dd06744",588,["D",1746101277510],"{\n  \"$schema\": \"https://raw.githubusercontent.com/denoland/deno/348900b8b79f4a434cab4c74b3bc8d4d2fa8ee74/cli/schemas/config-file.v1.json\",\n  \"lock\": false,\n  \"compilerOptions\": {\n    \"noImplicitAny\": false,\n    \"strict\": false,\n    \"types\": [\n      \"https://www.val.town/types/valtown.d.ts\"\n    ],\n    \"lib\": [\n      \"dom\",\n      \"dom.iterable\",\n      \"dom.asynciterable\",\n      \"deno.ns\",\n      \"deno.unstable\"\n    ]\n  },\n  \"lint\": {\n    \"files\": {\n      \"include\": [\n        \"deno:/https/esm.town/**/*\"\n      ]\n    },\n    \"rules\": {\n      \"exclude\": [\n        \"no-explicit-any\"\n      ]\n    }\n  },\n  \"node_modules_dir\": false,\n  \"experimental\": {\n    \"unstable-node-globals\": true,\n    \"unstable-temporal\": true,\n    \"unstable-worker-options\": true,\n    \"unstable-sloppy-imports\": true\n  }\n}",[],[379],"files",[154,172,184,191,202,212,222,232,242,253,260,267,276,285,295,302,313,320,331,341,350,359,367,377],"counts",{"_390":32,"_391":178,"_392":393,"_394":32},"pulls","branches","forks",24,"envVars","contents",[397,400,403,406,409,412,415],{"_103":155,"_95":156,"_157":158,"_159":-5,"_160":142,"_161":162,"_163":118,"_105":398,"_99":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_98":399},["D",1746101277393],[156],{"_103":185,"_95":186,"_157":187,"_159":-5,"_160":142,"_161":188,"_163":118,"_105":401,"_99":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_98":402},["D",1742482886402],[186],{"_103":254,"_95":255,"_157":256,"_159":-5,"_160":142,"_161":257,"_163":118,"_105":404,"_99":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_98":405},["D",1742482886338],[255],{"_103":351,"_95":352,"_157":353,"_159":-5,"_160":142,"_161":354,"_163":118,"_105":407,"_99":32,"_165":179,"_167":356,"_168":22,"_169":-5,"_98":408},["D",1746101277508],[352],{"_103":360,"_95":361,"_157":362,"_159":-5,"_160":142,"_161":178,"_163":22,"_105":410,"_99":32,"_165":179,"_167":364,"_168":22,"_169":-5,"_98":411},["D",1742482886270],[361],{"_103":368,"_95":369,"_157":370,"_159":-5,"_160":142,"_161":371,"_163":22,"_105":413,"_99":373,"_165":179,"_167":374,"_168":22,"_169":-5,"_98":414},["D",1749001191342],[369],{"_103":378,"_95":379,"_157":380,"_159":-5,"_160":142,"_161":381,"_163":118,"_105":416,"_99":32,"_165":179,"_167":383,"_168":22,"_169":-5,"_98":417},["D",1746101277510],[379],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_101":426,"_99":100,"_431":432},{"_103":104,"_95":96,"_105":427,"_107":-5,"_108":22,"_109":110,"_111":112,"_113":-5,"_14":114,"_115":116,"_117":118,"_119":120,"_121":122,"_16":123,"_124":125,"_126":125,"_127":128,"_129":128,"_130":128,"_131":125,"_132":125,"_23":428,"_136":429,"_139":430,"_151":22},["D",1742482886202],{"_93":94,"_134":135},{"_93":94,"_138":135},{"_99":141,"_95":43,"_103":142,"_143":104,"_144":-5,"_145":-5,"_146":-5,"_147":-5,"_148":-5,"_149":96,"_150":94},"changes",[433],{"_179":434,"_436":437,"_98":439},{"_157":279,"_95":278,"_165":208,"_167":282,"_105":435,"_161":100,"_160":142},["D",1749001191354],"previous",{"_157":279,"_95":278,"_165":208,"_167":438},"/** @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<any>()\n  const [walletAddresses, setWalletAddresses] = useState<any>()\n  const [capabilities, setCapabilities] = useState<any>()\n\n  useEffect(() => {\n    fcsdk.actions.ready()\n    fcsdk.context.then(setContext)\n    fcsdk?.getCapabilities?.then(setCapabilities).catch(console.log)\n    fcsdk.wallet?.ethProvider?.request({ method: 'eth_requestAccounts' }).then(setWalletAddresses).catch(console.log)\n  }, [])\n\n  console.log(fcsdk, context, walletAddresses, capabilities)\n\n  return (\n    <div className=\"flex flex-col gap-3 m-5 mb-10\">\n      {context && (\n        <>\n          {context?.user?.fid && (\n            <Section>\n              <div className=\"text-sm  opacity-50 mb-3 uppercase\">User</div>\n              <div className=\"flex flex-row gap-3 items-center\">\n                <img className=\"rounded-full w-10 h-10\" src={context?.user?.pfpUrl} />\n                <div className=\"font-semibold text-xl\">{context?.user?.username}</div>\n                <div className=\"text-sm opacity-50 pt-1\">{context?.user?.fid}</div>\n              </div>\n            </Section>\n          )}\n\n          {walletAddresses?.length > 0 && (\n            <Section>\n              <div className=\"text-sm  opacity-50 mb-3 uppercase\">Wallet</div>\n              <div className=\"font-mono font-medium text-xl mb-4\">{formatAddress(walletAddresses[0])}</div>\n\n              <div className=\"flex flex-col flex-wrap gap-3 items-start\">\n                <MonoButtonWithStatus\n                  onClick={() =>\n                    fcsdk.wallet?.ethProvider?.request({\n                      method: 'eth_chainId',\n                    })\n                  }\n                >\n                  chainId\n                </MonoButtonWithStatus>\n                <MonoButtonWithStatus\n                  onClick={() =>\n                    fcsdk.wallet?.ethProvider?.request({\n                      method: 'wallet_switchEthereumChain',\n                      params: [{ chainId: '0x2105' }],\n                    })\n                  }\n                >\n                  switchChain (base)\n                </MonoButtonWithStatus>\n                <MonoButtonWithStatus\n                  onClick={() =>\n                    fcsdk.wallet?.ethProvider?.request({\n                      method: 'eth_sendTransaction',\n                      params: [\n                        {\n                          from: walletAddresses[0],\n                          to: '0x5F77DBc7686327D3BF6eC1887E5a3AdA0aE60841',\n                          value: '0x' + (100000000000000).toString(16),\n                        },\n                      ],\n                    })\n                  }\n                >\n                  sendTransaction\n                </MonoButtonWithStatus>\n              </div>\n            </Section>\n          )}\n\n          <Section>\n            <div className=\"font-mono text-sm  opacity-50 mb-3\">sdk.actions</div>\n            <div className=\"flex flex-col flex-wrap gap-3 items-start\">\n              <MonoButtonWithStatus onClick={() => fcsdk.actions.viewProfile?.({ fid: context.user.fid })}>\n                viewProfile\n              </MonoButtonWithStatus>\n              <MonoButtonWithStatus\n                onClick={() => fcsdk.actions.viewCast?.({ hash: '0xd81f802e98c1432bb698cb7d4cb6c2ff5057867d' })}\n              >\n                viewCast\n              </MonoButtonWithStatus>\n              <MonoButtonWithStatus onClick={() => fcsdk.actions.composeCast?.({ text: 'Hello' })}>\n                composeCast\n              </MonoButtonWithStatus>\n              <MonoButtonWithStatus\n                onClick={() => fcsdk.actions.openUrl('https://www.youtube.com/watch?v=dQw4w9WgXcQ')}\n              >\n                openUrl\n              </MonoButtonWithStatus>\n              {/* <MonoButtonWithStatus onClick={() => fcsdk.actions.openUrl('https://warpcast.com/~/compose')}>\n                openUrl (warpcast)\n              </MonoButtonWithStatus> */}\n              <MonoButtonWithStatus onClick={() => fcsdk.actions.setPrimaryButton({ text: 'Primary Button' })}>\n                setPrimaryButton\n              </MonoButtonWithStatus>\n              <MonoButtonWithStatus onClick={() => fcsdk.actions.addMiniApp()}>addMiniApp</MonoButtonWithStatus>\n              <MonoButtonWithStatus onClick={() => fcsdk.actions.signIn({})}>signIn</MonoButtonWithStatus>\n              <MonoButtonWithStatus onClick={() => fcsdk.haptics?.notificationOccurred?.('success')}>\n                haptics (success notification)\n              </MonoButtonWithStatus>\n              <MonoButtonWithStatus onClick={() => fcsdk.haptics?.impactOccurred?.('medium')}>\n                haptics (medium impact)\n              </MonoButtonWithStatus>\n\n              <MonoButtonWithStatus onClick={() => fcsdk.actions.close()}>close</MonoButtonWithStatus>\n\n              <MonoButtonWithStatus\n                onClick={() =>\n                  fcsdk.actions.swapToken({\n                    sellToken: 'eip155:8453/erc20:0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913',\n                    buyToken: 'eip155:8453/native',\n                    sellAmount: '3000000',\n                  })\n                }\n              >\n                swapToken\n              </MonoButtonWithStatus>\n              <MonoButtonWithStatus\n                onClick={() =>\n                  fcsdk.actions.sendToken({\n                    token: 'eip155:8453/erc20:0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913',\n                    amount: '500000',\n                    recipientFid: 2073,\n                  })\n                }\n              >\n                sendToken\n              </MonoButtonWithStatus>\n              <MonoButtonWithStatus\n                onClick={() =>\n                  fcsdk.actions.viewToken({\n                    token: 'eip155:8453/erc20:0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913',\n                  })\n                }\n              >\n                viewToken\n              </MonoButtonWithStatus>\n            </div>\n          </Section>\n          <Section>\n            <div className=\"font-mono text-sm  opacity-50 mb-3\">sdk.experimental</div>\n            <div className=\"flex flex-col flex-wrap gap-3 items-start\">\n              <MonoButtonWithStatus onClick={() => fcsdk.experimental.quickAuth()}>quickAuth</MonoButtonWithStatus>\n            </div>\n          </Section>\n\n          <ExpandableSection title=\"sdk.context\">{formatJSON(context)}</ExpandableSection>\n          <ExpandableSection title=\"sdk.getCapabilities\">{formatJSON(capabilities)}</ExpandableSection>\n        </>\n      )}\n\n      {!context && (\n        <Section>\n          <div className=\"text-md  opacity-50 \">Open this web app in Warpcast to see the Mini App.</div>\n        </Section>\n      )}\n    </div>\n  )\n}\n\nfunction ExpandableSection({ title, children }: { title: string; children: React.ReactNode }) {\n  const [expanded, setExpanded] = useState(false)\n\n  return (\n    <Section>\n      <div className=\"flex flex-row gap-3 items-center justify-between\">\n        <div className=\"font-mono text-sm  opacity-50\">{title}</div>\n        <div className=\"text-sm cursor-pointer opacity-50 p-1\" onClick={() => setExpanded(!expanded)}>\n          {expanded ? '▲' : '▼'}\n        </div>\n      </div>\n\n      {expanded && <div className=\"font-mono text-xs opacity-50 whitespace-pre-wrap break-all mt-1\">{children}</div>}\n    </Section>\n  )\n}\n","frontend/components/FarcasterMiniApp.tsx","actionData","errors"]
</article></body></html>