\n \n {\n /* */\n }\n

Mini App Store

Explore mini apps on Farcaster

\n ,\n );\n}\n\n//////////\n\nexport async function ogImage(body) {\n const svg = await satori(\n body,\n {\n width: 945,\n height: 630,\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};",[],[158,186],{"_102":195,"_95":196,"_159":115,"_161":160,"_162":141,"_163":119,"_164":117,"_104":197,"_99":198,"_166":199,"_168":200,"_169":22,"_170":201,"_171":202,"_98":203},"300b33ea-1ddd-11f0-bae0-569c3dd06744","index.tsx",["D",1745149627940],16,"http","/** @jsxImportSource npm:hono/jsx */\nimport { serveFile } from \"https://esm.town/v/std/utils@64-main/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { embedMetadata, handleFarcasterEndpoints, iconUrl, name } from \"./farcaster.ts\";\nimport { handleImageEndpoints } from \"./image.tsx\";\nimport { fetchGet as fetchNeynarGet } from \"./neynar.ts\";\n\nconst app = new Hono();\n\nhandleImageEndpoints(app);\nhandleFarcasterEndpoints(app);\n\napp.get(\"/testxx\", 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/miniapps\", async (c) => {\n const response = await fetch(`https://client.warpcast.com/v1/top-frameapps?limit=100`).then(r => r.json()).then(r =>\n r?.result?.frames\n );\n return c.json(response);\n});\n\napp.get(\"/neynar-proxy\", async c => {\n const url = new URL(c.req.url);\n const path = url.searchParams.get(\"path\");\n const response = await fetchNeynarGet(path).then(r => r.json());\n return c.json(response);\n});\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;","store-fc",[],[158,196],{"_102":205,"_95":206,"_159":207,"_161":160,"_162":141,"_163":208,"_164":117,"_104":209,"_99":32,"_166":180,"_168":210,"_169":22,"_170":-5,"_171":211,"_98":212},"b825d1d2-15a3-11f0-a56a-569c3dd06744","neynar.ts","b825d268-15a3-11f0-a56a-569c3dd06744",83,["D",1744245336166],"const NEYNAR_API_KEY = Deno.env.get(\"NEYNAR_API_KEY\") || \"NEYNAR_API_DOCS\";\nconst headers = {\n \"Content-Type\": \"application/json\",\n \"x-api-key\": NEYNAR_API_KEY,\n};\n\nexport const fetchGet = async (path: string) => {\n return await fetch(\"https://api.neynar.com/v2/farcaster/\" + path, {\n method: \"GET\",\n headers: headers,\n });\n};\n\nexport const fetchPost = async (path: string, body: any) => {\n return await fetch(\"https://api.neynar.com/v2/farcaster/\" + path, {\n method: \"POST\",\n headers: headers,\n body: JSON.stringify(body),\n });\n};",[],[158,206],[158],{"_102":215,"_95":216,"_159":217,"_161":-5,"_162":141,"_163":121,"_164":117,"_104":218,"_99":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_171":219,"_98":311},"12b8cdba-155a-11f0-b2a3-569c3dd06744","frontend","2720f806-1cd3-404c-8429-6c66f0181a2b",["D",1744213705324],[220,253,270,294,303],{"_102":221,"_95":222,"_159":223,"_161":217,"_162":141,"_163":121,"_164":117,"_104":224,"_99":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_171":225,"_98":252},"12b8c1c6-155a-11f0-b2a3-569c3dd06744","components","fb9c1c5e-4800-49ef-bc4f-fb08595cf28b",["D",1744213705324],[226,234,242],{"_102":227,"_95":228,"_159":229,"_161":223,"_162":141,"_163":121,"_164":117,"_104":230,"_99":32,"_166":180,"_168":231,"_169":22,"_170":-5,"_171":232,"_98":233},"12b8b2a8-155a-11f0-b2a3-569c3dd06744","Example.tsx","bda531b8-c806-4013-832b-f7ddbffb6784",["D",1744213705324],"/** @jsxImportSource https://esm.sh/react@19 */\nimport { useState } from \"https://esm.sh/react@19\";\n\nexport function Example() {\n return (\n

Mini App Starter

Hono + React + Tailwind + Farcaster Mini App Starter Project on Val Town

\n );\n}",[],[216,222,228],{"_102":235,"_95":236,"_159":237,"_161":223,"_162":141,"_163":121,"_164":117,"_104":238,"_99":32,"_166":180,"_168":239,"_169":22,"_170":-5,"_171":240,"_98":241},"12b8b44c-155a-11f0-b2a3-569c3dd06744","FarcasterMiniApp.tsx","9fc5ec57-12d1-47fc-aeb8-bd127833a9ea",["D",1744213705324],"/** @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}",[],[216,222,236],{"_102":243,"_95":244,"_159":245,"_161":223,"_162":141,"_163":246,"_164":117,"_104":247,"_99":248,"_166":180,"_168":249,"_169":22,"_170":-5,"_171":250,"_98":251},"479e4a4a-1592-11f0-931b-569c3dd06744","ui.tsx","bf109d5a-4dd7-41ed-a8d2-2657477d4af8",75,["D",1744237845932],2,"/** @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}",[],[216,222,244],[216,222],{"_102":254,"_95":255,"_159":256,"_161":217,"_162":141,"_163":121,"_164":117,"_104":257,"_99":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_171":258,"_98":269},"12b8c4be-155a-11f0-b2a3-569c3dd06744","screens","cd6bd0ee-0b57-445d-bd71-9957e32f1269",["D",1744213705324],[259],{"_102":260,"_95":261,"_159":262,"_161":256,"_162":141,"_163":263,"_164":117,"_104":264,"_99":265,"_166":180,"_168":266,"_169":22,"_170":-5,"_171":267,"_98":268},"a97373dc-2936-11f0-ae8f-569c3dd06744","Home.tsx","20481ddf-e72f-45f3-8acf-03bb8726eb8a",205,["D",1746397519624],105,"/** @jsxImportSource https://esm.sh/react@19 */\nimport fcsdk from \"https://esm.sh/@farcaster/frame-sdk\";\nimport { ArrowUpRight, CircleX, ExternalLink, LoaderCircle, Store } from \"https://esm.sh/lucide-react\";\nimport { NavLink, Route, Routes, useNavigate, useParams, useSearchParams } from \"https://esm.sh/react-router@7\";\nimport { useEffect, useMemo, useRef, useState } from \"https://esm.sh/react@19\";\n\nimport { Button, Input, Section, ShareButton } from \"../components/ui.tsx\";\nimport { fetchNeynarGet, fetchNeynarGetPages, fetchUsersById } from \"../util/neynar.ts\";\nimport { useQuery } from \"../util/useQuery.ts\";\n\nexport function Home() {\n  const [context, setContext] = useState<any>();\n  useEffect(() => {\n    fcsdk.context.then(setContext);\n  }, []);\n\n  const onShare = () => {\n    if (!context) return;\n    const text = `Check out the Mini App Store by @moe!\\n`;\n    fcsdk?.actions?.composeCast?.({ text, embeds: [window.location.href] });\n  };\n\n  return (\n    <div class=\"p-5 mb-8\">\n      <div className=\"flex flex-row items-center gap-3  mb-10\">\n        <Store className=\"w-6 h-6\" />\n        <h1 class=\"text-2xl font-medium grow\">Mini App Store</h1>\n        {context && <ShareButton onClick={onShare} />}\n      </div>\n      {/* <div class=\"opacity-50\">Hono + React + Tailwind + Farcaster Mini App Starter Project on Val Town</div> */}\n\n      <MiniApps />\n      <div className=\"h-8\"></div>\n    </div>\n  );\n}\n\nfunction MiniApps() {\n  const { data: miniapps } = useQuery([\"miniapps\"], async () => {\n    // return await fetch(`/api/miniapps`).then(r => r.json()).then(r => r);\n    // return await fetchNeynarGet(`frame/catalog?limit=100`).then(r => r.frames);\n    return await fetchNeynarGetPages(`frame/catalog?limit=100`, 5, \"frames\").then(r => r.frames);\n  });\n\n  const [context, setContext] = useState<any>();\n  useEffect(() => {\n    fcsdk.context.then(setContext);\n  }, []);\n\n  const navigate = useNavigate();\n  const [searchParams] = useSearchParams();\n  const byUser = searchParams.get(\"by\");\n\n  const [search, setSearch] = useState(() => {\n    const params = new URLSearchParams(window.location.search);\n    return params.get(\"s\") || \"\";\n  });\n\n  const shownMiniapps = useMemo(() => {\n    return miniapps\n      ?.filter((miniapp: any) => !byUser || byUser == miniapp.author?.username)\n      .filter((miniapp: any) => {\n        return search == \"\" || miniapp.manifest?.frame?.name?.toLowerCase().includes(search.toLowerCase())\n          || miniappHost(miniapp)?.toLowerCase().includes(search.toLowerCase())\n          || miniapp?.author?.username.toLowerCase().includes(search.toLowerCase());\n      });\n  }, [miniapps, search, byUser]);\n\n  console.log(miniapps, byUser, search, shownMiniapps);\n\n  if (!miniapps) {\n    return (\n      <div className=\"flex flex-row items-center justify-center p-4 opacity-50 h-32\">\n        <LoaderCircle className=\"animate-spin\" />\n      </div>\n    );\n  }\n\n  if (miniapps.length == 0) {\n    return (\n      <Section className=\"flex flex-row items-center justify-center gap-4 h-32\">\n        <div className=\"text-xs opacity-50 align-center uppercase\">No miniapps</div>\n      </Section>\n    );\n  }\n\n  return (\n    <div class=\"flex flex-col gap-4\">\n      {byUser && (\n        <div className=\"flex flex-row items-center gap-2 text-lg\">\n          <span className=\"opacity-50\">Mini Apps by</span> <span className=\"font-medium\">{byUser}</span>\n          <CircleX className=\"w-4 h-4 ml-2 cursor-pointer opacity-50\" onClick={() => navigate(\"?\")} />\n        </div>\n      )}\n      <div className=\"flex flex-row items-center justify-stretch gap-4\">\n        <Input\n          size=\"lg\"\n          onChange={e => setSearch(e.target.value)}\n          placeholder=\"Search...\"\n          autoCapitalize=\"on\"\n          autoCorrect=\"on\"\n          type=\"text\"\n          value={search}\n          className=\"grow shrink w-[50]\"\n        />\n        {context && !byUser && (\n          <Button\n            size=\"lg\"\n            onClick={() => navigate(`?by=${context?.user?.username}`)}\n            className=\"border-0 text-nowrap \"\n          >\n            My Mini Apps\n          </Button>\n        )}\n      </div>\n      {shownMiniapps?.length == 0 && (\n        <div className=\"flex flex-row items-center justify-center gap-4 h-32 text-xs opacity-50 align-center uppercase\">\n          No miniapps\n        </div>\n      )}\n      {shownMiniapps?.map((miniapp: any, i) => <MiniApp key={i + miniapp.frames_url} miniapp={miniapp} />)}\n    </div>\n  );\n}\n\nfunction MiniApp({ miniapp }) {\n  const navigate = useNavigate();\n  // console.log(miniapp.manifest?.frame?.name);\n\n  const author = miniapp?.author;\n\n  const open = () => {\n    fcsdk?.actions?.openUrl(`https://warpcast.com/~/frames/launch?domain=${miniappHost(miniapp)}`);\n  };\n\n  return (\n    <Section className=\"flex flex-row items-center gap-4\">\n      <img\n        src={miniapp.manifest?.frame?.icon_url}\n        className=\"w-20 h-20 rounded-xl\"\n        key={miniapp.manifest?.frame?.icon_url}\n      />\n      <div className=\"flex flex-col shrink grow overflow-hidden\">\n        <div className=\"text-xl font-semibold\">{miniapp.manifest?.frame?.name}</div>\n        <div className=\"text-xs opacity-50 truncate\">{miniappHost(miniapp)}</div>\n        <div className=\"flex flex-row items-center gap-2 mt-2\">\n          <img src={author?.pfp_url} className=\"w-4 h-4 rounded-full\"></img>\n          <div className=\"text-sm font-medium opacity-75\">{author?.username}</div>\n        </div>\n      </div>\n      <Button size=\"lg\" className=\"pl-0 pr-0 pt-0 pb-0 w-10 h-10 flex-none\" onClick={open}>\n        <ArrowUpRight className=\"w-6 h-6\" />\n      </Button>\n    </Section>\n  );\n}\n\nconst miniappHost = miniapp => new URL(miniapp.manifest?.frame?.home_url).hostname;",[],[216,255,261],[216,255],{"_102":271,"_95":272,"_159":273,"_161":217,"_162":141,"_163":121,"_164":117,"_104":274,"_99":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_171":275,"_98":293},"12b8c89c-155a-11f0-b2a3-569c3dd06744","util","aa772d33-52aa-4b94-918f-ab3f97865a40",["D",1744213705324],[276,285],{"_102":277,"_95":206,"_159":278,"_161":273,"_162":141,"_163":279,"_164":117,"_104":280,"_99":281,"_166":180,"_168":282,"_169":22,"_170":-5,"_171":283,"_98":284},"9abcea10-1614-11f0-b651-569c3dd06744","06370845-b155-41e0-8330-66e30cf1cadb",113,["D",1744293819957],12,"const baseUrl = \"/neynar-proxy?path=\";\n// const baseUrl = \"https://api.neynar.com/v2/farcaster/\";\n\nexport async function fetchNeynarGet(path: string) {\n  const res = await fetch(baseUrl + encodeURIComponent(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 async function fetchNeynarGetPages(path: string, pages: number, dataKey: string) {\n  let data: any = [];\n  let cursor = \"\";\n  let pagesLeft = pages;\n  while (true) {\n    const res = await fetchNeynarGet(`${path}&cursor=${cursor}`);\n    data = [...data, ...res[dataKey]];\n    cursor = res?.next?.cursor;\n    pagesLeft--;\n    if (!cursor || pagesLeft <= 0) {\n      break;\n    }\n  }\n  return {\n    [dataKey]: data,\n  };\n}\n\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}",[],[216,272,206],{"_102":286,"_95":287,"_159":288,"_161":273,"_162":141,"_163":121,"_164":117,"_104":289,"_99":32,"_166":180,"_168":290,"_169":22,"_170":-5,"_171":291,"_98":292},"12b8c72a-155a-11f0-b2a3-569c3dd06744","useQuery.ts","dc738c62-1753-410a-b082-b9c083802184",["D",1744213705324],"/** @jsxImportSource https://esm.sh/react@19 */\nimport { useEffect, useState } from \"https://esm.sh/react@19\";\n\nexport const useQuery = (deps, asyncFn) => {\n  const [data, setData] = useState<any>();\n\n  useEffect(() => {\n    let didCancel = false;\n    (async () => {\n      try {\n        const result = await asyncFn();\n        if (!didCancel) {\n          setData(result);\n        }\n      } catch (error) {\n        // Handle errors if needed\n        console.log(\"useAsyncMemo error\", \"\" + error);\n        setData(null);\n      }\n    })();\n\n    return () => {\n      didCancel = true;\n    };\n  }, deps);\n\n  return { data };\n};",[],[216,272,287],[216,272],{"_102":295,"_95":296,"_159":297,"_161":217,"_162":141,"_163":208,"_164":117,"_104":298,"_99":299,"_166":180,"_168":300,"_169":22,"_170":-5,"_171":301,"_98":302},"b825f52c-15a3-11f0-a56a-569c3dd06744","App.tsx","7931ccf3-ff4c-41d6-bb2b-efec76451659",["D",1744245336166],6,"/** @jsxImportSource https://esm.sh/react@19 */\nimport fcsdk from \"https://esm.sh/@farcaster/frame-sdk\";\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 { fetchNeynarGet } from \"./util/neynar.ts\";\n\nimport { Home } from \"./screens/Home.tsx\";\n\nexport function App() {\n  const [context, setContext] = useState<any>();\n  useEffect(() => {\n    fcsdk.actions.ready();\n    fcsdk.context.then(setContext);\n  }, []);\n\n  return (\n    <div className=\"max-w-2xl mx-auto\">\n      <Routes>\n        <Route path=\"/\" element={<Home />} />\n        <Route path=\"/about\" element={<About />} />\n        <Route path=\"/neynar\" element={<Neynar />} />\n      </Routes>\n    </div>\n  );\n}\n\nfunction About() {\n  return <h2 className=\"p-4\">About page</h2>;\n}\n\nfunction Neynar() {\n  useEffect(() => {\n    fetchNeynarGet(\"user/by_username?username=dwr.eth\").then(console.log).catch(console.error);\n  }, []);\n\n  return <h2 className=\"p-4\">Neynar page</h2>;\n}",[],[216,296],{"_102":304,"_95":196,"_159":305,"_161":217,"_162":141,"_163":306,"_164":117,"_104":307,"_99":121,"_166":180,"_168":308,"_169":22,"_170":-5,"_171":309,"_98":310},"baaa68ce-1f02-11f0-859f-569c3dd06744","334d4d35-affa-4ec1-a30b-f40dbb2ec8a2",194,["D",1745275703051],"/** @jsxImportSource https://esm.sh/react@19 */\nimport { createRoot } from \"https://esm.sh/react-dom@19/client\";\nimport { BrowserRouter } from \"https://esm.sh/react-router@7\";\nimport { App } from \"./App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n  throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render(\n  <BrowserRouter>\n    <App />\n  </BrowserRouter>,\n);",[],[216,196],[216],{"_102":313,"_95":314,"_159":315,"_161":-5,"_162":141,"_163":121,"_164":117,"_104":316,"_99":32,"_166":317,"_168":318,"_169":22,"_170":-5,"_171":319,"_98":320},"12b8d026-155a-11f0-b2a3-569c3dd06744","README.md","bf2edf52-d983-42e9-9ab4-28c9950f1a0a",["D",1744213705324],"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.",[],[314],{"_102":322,"_95":323,"_159":324,"_161":-5,"_162":141,"_163":140,"_164":117,"_104":325,"_99":326,"_166":317,"_168":327,"_169":22,"_170":-5,"_171":328,"_98":329},"0662188c-37ec-11f0-9f40-9e149126039e","TODO.txt","dc4aeaf6-a2e4-40fb-810b-182f175b1bbb",["D",1748014730728],9,"categories\nsearch (neynar api)\nmy miniapps (neynar api)\nlaunch miniapps when running from outside warpcast\nreact-query\n\nnotifications\ndb storage",[],[323],"files",[156,173,184,194,204,214,220,226,234,242,253,259,270,276,285,294,303,312,321],"counts",{"_334":32,"_335":121,"_336":248,"_337":121},"pulls","branches","forks","envVars","contents",[340,343,346,349],{"_102":157,"_95":158,"_159":160,"_161":-5,"_162":141,"_163":121,"_164":117,"_104":341,"_99":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_98":342},["D",1744213705324],[158],{"_102":215,"_95":216,"_159":217,"_161":-5,"_162":141,"_163":121,"_164":117,"_104":344,"_99":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_98":345},["D",1744213705324],[216],{"_102":313,"_95":314,"_159":315,"_161":-5,"_162":141,"_163":121,"_164":117,"_104":347,"_99":32,"_166":317,"_168":318,"_169":22,"_170":-5,"_98":348},["D",1744213705324],[314],{"_102":322,"_95":323,"_159":324,"_161":-5,"_162":141,"_163":140,"_164":117,"_104":350,"_99":326,"_166":317,"_168":327,"_169":22,"_170":-5,"_98":351},["D",1748014730728],[323],"upstreamProject",{"_102":149,"_95":354,"_110":355,"_112":-5,"_108":109,"_23":356},"MiniAppStarter","Hono + React + Tailwind + Farcaster Mini App Starter Project",{"_93":94,"_133":134},"upstreamBranch",{"_102":144,"_104":359,"_360":361,"_95":43,"_142":149,"_99":362,"_143":-5,"_145":-5,"_363":364,"_106":-5,"_153":22,"_108":109,"_152":94,"_16":122,"_151":354},["D",1742482886202],"updatedAt",["D",1755538237179],679,"lockfileKey","1755538252953-esm.town_v_moe_MiniAppStarter@679-main","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.compare.$branch",{"_93":94,"_95":96,"_97":43,"_100":371,"_376":377,"_378":379,"_380":381,"_529":117,"_530":375,"_531":532,"_535":-5},{"_102":103,"_95":96,"_104":372,"_106":-5,"_107":22,"_108":109,"_110":111,"_112":-5,"_14":113,"_114":115,"_116":117,"_118":119,"_120":121,"_16":122,"_123":124,"_125":124,"_126":127,"_128":127,"_129":127,"_130":124,"_131":124,"_23":373,"_135":374,"_138":375,"_153":22},["D",1744213705324],{"_93":94,"_133":134},{"_93":94,"_137":134},{"_99":140,"_95":43,"_102":141,"_142":103,"_143":144,"_145":146,"_147":109,"_148":149,"_150":122,"_151":96,"_152":94},"ahead",171,"behind",221,"diff",{"_382":383,"_169":406,"_443":444},"added",[384,391,396,401],{"_98":323,"_385":-7,"_386":387},"targetFile","sourceFile",{"_102":322,"_95":323,"_159":324,"_161":-5,"_162":141,"_163":140,"_164":117,"_104":325,"_99":326,"_166":317,"_168":327,"_169":22,"_170":-5,"_171":-7,"_98":388,"_389":390},[323],"contentHash","4e6155fb442927a466ef4e72fc6f523af09eeaf8801793c8e8d01f9c8d2efebf",{"_98":392,"_385":-7,"_386":393},"backend/image.tsx",{"_102":185,"_95":186,"_159":187,"_161":160,"_162":141,"_163":188,"_164":117,"_104":189,"_99":190,"_166":180,"_168":191,"_169":22,"_170":-5,"_171":-7,"_98":394,"_389":395},[158,186],"5486a41f032c3e0e1aceb819eb132b736271dc0434f19321fba95f72328d9320",{"_98":397,"_385":-7,"_386":398},"backend/index.tsx",{"_102":195,"_95":196,"_159":115,"_161":160,"_162":141,"_163":119,"_164":117,"_104":197,"_99":198,"_166":199,"_168":200,"_169":22,"_170":201,"_171":-7,"_98":399,"_389":400},[158,196],"cee5ed72408ddfb9a3177b10eb75443e61c0844daaa9477087d2c6ac84cdca22",{"_98":402,"_385":-7,"_386":403},"backend/neynar.ts",{"_102":205,"_95":206,"_159":207,"_161":160,"_162":141,"_163":208,"_164":117,"_104":209,"_99":32,"_166":180,"_168":210,"_169":22,"_170":-5,"_171":-7,"_98":404,"_389":405},[158,206],"6b532c7a00582a9318599b31a202bcc96ed85ef8718546952eb941b6f95a7769",[407,420,433],{"_98":408,"_385":409,"_386":-7},"backend/image.ts",{"_102":410,"_95":411,"_159":412,"_161":413,"_162":144,"_163":414,"_164":22,"_104":415,"_99":416,"_166":180,"_168":417,"_169":22,"_170":-5,"_171":-7,"_98":418,"_389":419},"ed9d6868-1556-11f0-814c-569c3dd06744","image.ts","915c1b8a-1556-11f0-8871-569c3dd06744","e1c14cbe-4abb-48a4-9ecd-6b49b08bdb76",434,["D",1744212354626],7,"/** @jsxImportSource https://esm.sh/react */\nimport { render } from \"https://deno.land/x/resvg_wasm/mod.ts\";\nimport { Hono } from \"npm:hono\";\nimport satori from \"npm:satori\";\n\nexport function handleImageEndpoints(app: Hono) {\n  const headers = {\n    \"Content-Type\": \"image/png\",\n    \"cache-control\": \"public, max-age=3600\",\n  };\n  app.get(\"/image\", async (c) => {\n    return c.body(await homeImage(), 200, headers);\n  });\n}\n\nexport async function homeImage() {\n  return await ogImage(\n    <div tw=\"w-full h-full flex justify-start items-end text-[100px] bg-black text-white p-[50px]\">\n      <div tw=\"flex flex-col items-start gap-[10px]\">\n        <div tw=\"flex text-[100px] tracking-[-5px]\">Mini App Starter</div>\n        <div tw=\"flex text-[30px] opacity-50 tracking-[-1px]\">Hono + React + Tailwind Starter Project on Val Town</div>\n      </div>\n    </div>,\n  );\n}\n\n//////////\n\nexport async function ogImage(body) {\n  const svg = await satori(\n    body,\n    {\n      width: 945,\n      height: 630,\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};",[158,411],"46c6c4b0e0352e55dca682d9abc5aec36981a923b1c27df3ba1593511da273b6",{"_98":421,"_385":422,"_386":-7},"backend/index.ts",{"_102":423,"_95":424,"_159":425,"_161":413,"_162":144,"_163":426,"_164":22,"_104":427,"_99":428,"_166":199,"_168":429,"_169":22,"_170":430,"_171":-7,"_98":431,"_389":432},"9a3652e2-1557-11f0-bb7f-569c3dd06744","index.ts","3238fa84-059c-11f0-ac33-569c3dd06744",438,["D",1744212644195],79,"/** @jsxImportSource npm:hono/jsx */\nimport { serveFile } from \"https://esm.town/v/std/utils@64-main/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { embedMetadata, handleFarcasterEndpoints, iconUrl, name, ogImageUrl } from \"./farcaster.ts\";\nimport { handleImageEndpoints } from \"./image.ts\";\n\nconst app = new Hono();\n\nhandleImageEndpoints(app);\nhandleFarcasterEndpoints(app);\n\napp.get(\"/test\", 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(\"/frontend/**/*\", c => serveFile(c.req.path, import.meta.url));\n\napp.get(\"/\", async c => {\n  const baseUrl = c.req.url.replace(/\\/$/, \"\");\n  return c.html(generateHtml(baseUrl));\n});\napp.get(\"*\", async c => {\n  const baseUrl = c.req.url.replace(encodeURI(c.req.path), \"\");\n  return c.html(generateHtml(baseUrl, encodeURI(c.req.path)));\n});\n\nfunction generateHtml(baseUrl: string, path: string = \"/\") {\n  return (\n    <html>\n      <head>\n        <title>{name}</title>\n        <script src=\"https://cdn.tailwindcss.com\"></script>\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n        <meta name=\"fc:frame\" content={JSON.stringify(embedMetadata(baseUrl, path))} />\n        <link rel=\"icon\" href={iconUrl} />\n        <meta property=\"og:image\" content={baseUrl + \"/image\"} />\n      </head>\n      <body class=\"bg-white text-black dark:bg-black dark:text-white\">\n        <main>\n          <div id=\"root\"></div>\n        </main>\n        {/* <script src=\"https://esm.town/v/std/catch\"></script> */}\n        <script src=\"/frontend/index.tsx\" type=\"module\"></script>\n      </body>\n    </html>\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",[158,424],"aa2df05c29970e4271fd31a8430a3c2cdd0faa2a06b08f06225d6efcb2f08342",{"_98":434,"_385":435,"_386":-7},"todo.txt",{"_102":436,"_95":434,"_159":437,"_161":-5,"_162":144,"_163":438,"_164":22,"_104":439,"_99":198,"_166":317,"_168":440,"_169":22,"_170":-5,"_171":-7,"_98":441,"_389":442},"3dd253fc-1557-11f0-b030-569c3dd06744","768f09bc-05b0-11f0-a456-569c3dd06744",436,["D",1744212489185],"db storage\nminting\nnotifications\n  save tokens for users\n  send notif daily or on demand",[434],"79d53a7c24d46bec2f81f76a92b2a776a02b8451a6b35bec0c27b3cce60f29bc","modified",[445,459,474,488,501,515],{"_98":446,"_385":447,"_386":456},"backend/farcaster.ts",{"_102":448,"_95":175,"_159":449,"_161":413,"_162":144,"_163":450,"_164":22,"_104":451,"_99":452,"_166":180,"_168":453,"_169":22,"_170":-5,"_171":-7,"_98":454,"_389":455},"b3ea042c-1557-11f0-bb7f-569c3dd06744","a8e79c30-0727-11f0-994d-569c3dd06744",440,["D",1744212687317],29,"import { Hono } from \"npm:hono\";\n\nexport const name = \"Mini App Starter\";\nexport const iconUrl = \"https://imgur.com/TrJLlwp.png\";\nexport const ogImageUrl = \"https://imgur.com/xKVOVUE.png\";\n\nexport function embedMetadata(baseUrl: string, path: string = \"/\") {\n  return {\n    version: \"next\",\n    imageUrl: baseUrl + \"/image\",\n    button: {\n      title: name,\n      action: {\n        type: \"launch_frame\",\n        name: name,\n        url: baseUrl + path,\n        splashImageUrl: iconUrl,\n        splashBackgroundColor: \"#111111\",\n      },\n    },\n  };\n}\n\nexport function handleFarcasterEndpoints(app: Hono) {\n  app.get(\"/.well-known/farcaster.json\", (c) => {\n    const baseUrl = c.req.url.replace(c.req.path, \"\");\n\n    let accountAssociation = {};\n    if (baseUrl == \"https://moe--3238fa84059c11f0ac33569c3dd06744.web.val.run\") {\n      accountAssociation = {\n        \"header\":\n          \"eyJmaWQiOjIwNzMsInR5cGUiOiJjdXN0b2R5Iiwia2V5IjoiMHg0OERCN2U3MWQxMTUyNjU5MTY5NjE2NzNCOTY4NjcwQTU0N2IwZkJFIn0\",\n        \"payload\": \"eyJkb21haW4iOiJtb2UtLTMyMzhmYTg0MDU5YzExZjBhYzMzNTY5YzNkZDA2NzQ0LndlYi52YWwucnVuIn0\",\n        \"signature\":\n          \"MHhjNjc2NTRlMzIzOTA3ZTk4ZDk2OGNiOTNhYmRjMDI0Y2Y3M2MxM2UxNjZmNGY3NjRjZjk4ODJlZTBhZTg4ZjAwNDNkNjRmNjg1YTRmN2MxMjI0YmUyMTZlNjViNTFmYmQ4NDJiYmQ1YzYwMjJkMDZhOGI5MGY3NTQ3NTNmZTExMjFi\",\n      };\n    }\n\n    const manifest = {\n      accountAssociation,\n      frame: {\n        \"name\": name,\n        \"version\": \"1\",\n        \"iconUrl\": iconUrl,\n        \"homeUrl\": baseUrl,\n        \"splashImageUrl\": iconUrl,\n        \"splashBackgroundColor\": \"#111111\",\n        \"webhookUrl\": baseUrl + \"/webhook\",\n      },\n    };\n\n    return c.json(manifest);\n  });\n\n  app.post(\"/webhook\", async (c) => {\n    const baseUrl = c.req.url.replace(c.req.path, \"\");\n    const body = await c.req.json();\n    const header = decodeBase64Json(body.header);\n    const payload = decodeBase64Json(body.payload);\n\n    const fid = header?.fid;\n    const event = payload?.event;\n\n    console.log(\"[warpcast-frame-webhook]\", header, payload);\n\n    if (event === \"frame_added\" || event === \"notifications_enabled\") {\n      const notificationUrl = payload?.notificationDetails?.url;\n      const notificationToken = payload?.notificationDetails?.token;\n\n      const res = await sendFarcasterNotification({\n        title: name + \" installed!\",\n        body: \"🚀🚀🚀\",\n        targetUrl: baseUrl,\n        tokens: [notificationToken],\n      });\n      console.log(\"[warpcast-frame-webhook]\", notificationUrl, notificationToken, res);\n    }\n\n    return c.json({});\n  });\n}\n\nconst decodeBase64Json = (str: string) => JSON.parse(Buffer.from(str, \"base64\").toString(\"utf-8\"));\n\nasync function sendFarcasterNotification(payload: any) {\n  return await fetch(\"https://api.warpcast.com/v1/frame-notifications\", {\n    method: \"POST\",\n    headers: { \"Content-Type\": \"application/json\" },\n    body: JSON.stringify({\n      notificationId: Math.random().toString(36), // TODO: generate a unique id\n      ...payload,\n    }),\n  }).then(res => res.json());\n}",[158,175],"9eed7f5f0540aab8133d20757d55e8be07ec16e13f901d2a08c54e19dbd88298",{"_102":174,"_95":175,"_159":176,"_161":160,"_162":141,"_163":177,"_164":117,"_104":178,"_99":179,"_166":180,"_168":181,"_169":22,"_170":-5,"_171":-7,"_98":457,"_389":458},[158,175],"af385bf56239d1b5b8b178993f2894c0e94609951e9c5d44d52701828d567826",{"_98":460,"_385":461,"_386":471},"frontend/App.tsx",{"_102":462,"_95":296,"_159":463,"_161":464,"_162":144,"_163":465,"_164":22,"_104":466,"_99":467,"_166":180,"_168":468,"_169":22,"_170":-5,"_171":-7,"_98":469,"_389":470},"18e30bf4-0cb0-11f0-9060-569c3dd06744","3255a8c8-059c-11f0-864d-569c3dd06744","67d07f00-22ec-4444-8ffe-abcd85bf5aa9",420,["D",1743261091969],20,"/** @jsxImportSource https://esm.sh/react@19 */\nimport { NavLink, Route, Routes } from \"https://esm.sh/react-router@7\";\nimport { useEffect, useState } from \"https://esm.sh/react@19\";\nimport { Example } from \"./components/Example.tsx\";\nimport { FarcasterMiniApp } from \"./components/FarcasterMiniApp.tsx\";\nimport { fetchNeynarGet } from \"./util/neynar.ts\";\n\nexport function App() {\n  return (\n    <div>\n      <Example />\n\n      <Routes>\n        <Route path=\"/\" element={<FarcasterMiniApp />} />\n        <Route path=\"/about\" element={<About />} />\n        <Route path=\"/neynar\" element={<Neynar />} />\n      </Routes>\n    </div>\n  );\n}\n\nfunction About() {\n  return <h2 className=\"p-4\">About page</h2>;\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=\"p-4\">Neynar page</h2>;\n}",[216,296],"a8ffe1ef462d2264e1d6d7d4bda59dbec0b6e07548d2000df452639721f44ae5",{"_102":295,"_95":296,"_159":297,"_161":217,"_162":141,"_163":208,"_164":117,"_104":298,"_99":299,"_166":180,"_168":300,"_169":22,"_170":-5,"_171":-7,"_98":472,"_389":473},[216,296],"ca282d51052e78262517787e841bd9d84259e24b227a949a50ece5953fde2171",{"_98":475,"_385":476,"_386":485},"frontend/components/ui.tsx",{"_102":477,"_95":244,"_159":478,"_161":479,"_162":144,"_163":480,"_164":22,"_104":481,"_99":416,"_166":180,"_168":482,"_169":22,"_170":-5,"_171":-7,"_98":483,"_389":484},"e0e93280-1558-11f0-9117-569c3dd06744","8fa8266a-078e-11f0-b2c6-569c3dd06744","b7324e06-5db3-467c-8006-e53bbc155394",451,["D",1744213192303],"/** @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-500/20  ${props.className || \"\"}`;\n  return <div class={sectionClass}>{children}</div>;\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 <input type=\"text\" autoComplete=\"off\" {...props} className={className} />;\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 <textarea autoComplete=\"off\" {...props} className={className} />;\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}",[216,222,244],"06b15259926a5cedb260ade015faad26c139ee138eb5b3ca05b5305d2dcadf64",{"_102":243,"_95":244,"_159":245,"_161":223,"_162":141,"_163":246,"_164":117,"_104":247,"_99":248,"_166":180,"_168":249,"_169":22,"_170":-5,"_171":-7,"_98":486,"_389":487},[216,222,244],"10a81d04d3b9f838405e7c3e98d05101dc925627ece31b7be89419366e835b6f",{"_98":489,"_385":490,"_386":498},"frontend/index.tsx",{"_102":491,"_95":196,"_159":492,"_161":464,"_162":144,"_163":493,"_164":22,"_104":494,"_99":121,"_166":180,"_168":495,"_169":22,"_170":-5,"_171":-7,"_98":496,"_389":497},"566cc9fa-0ca2-11f0-96ad-569c3dd06744","322ec1ea-059c-11f0-864d-569c3dd06744",391,["D",1743255182237],"/** @jsxImportSource https://esm.sh/react@19 */\nimport { createRoot } from \"https://esm.sh/react-dom@19/client\";\nimport { BrowserRouter } from \"https://esm.sh/react-router@7\";\nimport { App } from \"./App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n  throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render(\n  // <App />,\n  <BrowserRouter>\n    <App />\n  </BrowserRouter>,\n);",[216,196],"06075c88cbbc43a24cdf0b64a0243bf0a1a84e6b0e9d5aa4888faf770d0c398d",{"_102":304,"_95":196,"_159":305,"_161":217,"_162":141,"_163":306,"_164":117,"_104":307,"_99":121,"_166":180,"_168":308,"_169":22,"_170":-5,"_171":-7,"_98":499,"_389":500},[216,196],"cd97e029488e2de36e947d10f0d0867bd7f06a1006ce0fd2c9821d3be482615d",{"_98":502,"_385":503,"_386":512},"frontend/screens/Home.tsx",{"_102":504,"_95":261,"_159":505,"_161":506,"_162":144,"_163":507,"_164":22,"_104":508,"_99":248,"_166":180,"_168":509,"_169":22,"_170":-5,"_171":-7,"_98":510,"_389":511},"710f5af2-1558-11f0-983b-569c3dd06744","1f71edea-1558-11f0-8a7f-569c3dd06744","198e9a40-1558-11f0-9ba6-569c3dd06744",448,["D",1744213004650],"/** @jsxImportSource https://esm.sh/react@19 */\nimport fcsdk from \"https://esm.sh/@farcaster/frame-sdk\";\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\";\nimport { useQuery } from \"../util/useQuery.ts\";\n\nexport function Home() {\n  return (\n    <div class=\"p-5 mb-8\">\n    </div>\n  );\n}",[216,255,261],"df3cb89c7ae3c1b2c7c0e0ffc23e5f331f01a41d26590da9e107af0c63a4fe21",{"_102":260,"_95":261,"_159":262,"_161":256,"_162":141,"_163":263,"_164":117,"_104":264,"_99":265,"_166":180,"_168":266,"_169":22,"_170":-5,"_171":-7,"_98":513,"_389":514},[216,255,261],"1394ce7c5ab8e67cfb761d3a85f7fd1f04eead2d4644b47fe3c6c48545878c50",{"_98":516,"_385":517,"_386":526},"frontend/util/neynar.ts",{"_102":518,"_95":206,"_159":519,"_161":520,"_162":144,"_163":521,"_164":22,"_104":522,"_99":281,"_166":180,"_168":523,"_169":22,"_170":-5,"_171":-7,"_98":524,"_389":525},"541d467a-1558-11f0-b226-569c3dd06744","d4046b9c-0cad-11f0-95d5-569c3dd06744","b6216968-0c12-11f0-9af5-569c3dd06744",444,["D",1744212956087],"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}",[216,272,206],"389d4bf5a657cdaf9d130d4ef4dc6f22c616dfc47e14573b887626d6eeee0213",{"_102":277,"_95":206,"_159":278,"_161":273,"_162":141,"_163":279,"_164":117,"_104":280,"_99":281,"_166":180,"_168":282,"_169":22,"_170":-5,"_171":-7,"_98":527,"_389":528},[216,272,206],"04e20a40a829fdf1c7d4132c66cf4dbb385181a47d5cf974d8d43e7d92491a86","hasChanges","sourceBranch","targetBranch",{"_102":144,"_104":533,"_360":534,"_95":43,"_142":149,"_99":362,"_143":-5,"_145":-5,"_363":364,"_106":-5,"_153":22,"_108":109,"_152":94,"_16":122,"_151":354},["D",1742482886202],["D",1755538237179],"pull","actionData","errors"]
</article></body></html>

moe

FarcasterMiniAppStore

MergeFarcasterMiniAppStore/mainintoMiniAppStarter/main

backend/farcaster.ts+12-7

frontend/App.tsx+13-5

frontend/components/ui.tsx+1-1

frontend/index.tsx+0-1

frontend/screens/Home.tsx+148-6

frontend/util/neynar.ts+23-2

TODO.txt+8-0

backend/image.tsx+104-0

Hbackend/index.tsx+77-0

backend/neynar.ts+20-0

backend/image.ts+0-70

Hbackend/index.ts+0-60

todo.txt+0-5