About page

;\n}\n\nfunction Neynar() {\n useEffect(() => {\n fetchNeynarGet(\"user/by_username?username=dwr.eth\").then(console.log).catch(console.error);\n }, []);\n\n return

Neynar page

;\n}",[],[90,129],"12b8c89c-155a-11f0-b2a3-569c3dd06744","util","aa772d33-52aa-4b94-918f-ab3f97865a40",["D",1744213705324],[143,144],[90,138],{"_35":152,"_13":153,"_64":154,"_66":139,"_67":68,"_69":155,"_71":72,"_37":156,"_17":157,"_75":124,"_76":158,"_78":50,"_79":-5,"_105":159,"_18":160},{"_35":145,"_13":146,"_64":147,"_66":139,"_67":68,"_69":84,"_71":72,"_37":148,"_17":86,"_75":124,"_76":149,"_78":50,"_79":-5,"_105":150,"_18":151},"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();\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};",[],[90,138,146],"9abcea10-1614-11f0-b651-569c3dd06744","neynar.ts","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}",[],[90,138,153],"12b8c4be-155a-11f0-b2a3-569c3dd06744","screens","cd6bd0ee-0b57-445d-bd71-9957e32f1269",["D",1744213705324],[167],[90,162],{"_35":168,"_13":169,"_64":170,"_66":163,"_67":68,"_69":171,"_71":72,"_37":172,"_17":173,"_75":124,"_76":174,"_78":50,"_79":-5,"_105":175,"_18":176},"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();\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

\n \n

Mini App Store

\n {context && }\n

\n {/*

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

*/}\n\n \n

\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();\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

\n \n

\n );\n }\n\n if (miniapps.length == 0) {\n return (\n

No miniapps

\n );\n }\n\n return (\n

\n {byUser && (\n

\n Mini Apps by {byUser}\n navigate(\"?\")} />\n

\n )}\n

\n 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 navigate(`?by=${context?.user?.username}`)}\n className=\"border-0 text-nowrap \"\n >\n My Mini Apps\n \n )}\n

\n {shownMiniapps?.length == 0 && (\n

\n No miniapps\n

\n )}\n {shownMiniapps?.map((miniapp: any, i) => )}\n

\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

\n \n

{miniapp.manifest?.frame?.name}

{miniappHost(miniapp)}

{author?.username}

\n \n

\n );\n}\n\nconst miniappHost = miniapp => new URL(miniapp.manifest?.frame?.home_url).hostname;",[],[90,162,169],"12b8c1c6-155a-11f0-b2a3-569c3dd06744","components","fb9c1c5e-4800-49ef-bc4f-fb08595cf28b",["D",1744213705324],[183,184,185],[90,178],{"_35":202,"_13":203,"_64":204,"_66":179,"_67":68,"_69":84,"_71":72,"_37":205,"_17":86,"_75":124,"_76":206,"_78":50,"_79":-5,"_105":207,"_18":208},{"_35":195,"_13":196,"_64":197,"_66":179,"_67":68,"_69":84,"_71":72,"_37":198,"_17":86,"_75":124,"_76":199,"_78":50,"_79":-5,"_105":200,"_18":201},{"_35":186,"_13":187,"_64":188,"_66":179,"_67":68,"_69":189,"_71":72,"_37":190,"_17":191,"_75":124,"_76":192,"_78":50,"_79":-5,"_105":193,"_18":194},"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}",[],[90,178,187],"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<any>();\n  const [walletAddresses, setWalletAddresses] = useState<any>();\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    <div class=\"flex flex-col gap-3 m-5 mb-10\">\n      {context && (\n        <>\n          {context?.user?.fid && (\n            <Section>\n              <div class=\"text-sm  opacity-50 mb-3 uppercase\">User</div>\n              <div class=\"flex flex-row gap-3 items-center\">\n                <img class=\"rounded-full w-10 h-10\" src={context?.user?.pfpUrl} />\n                <div class=\"font-semibold text-xl\">{context?.user?.username}</div>\n                <div class=\"text-sm opacity-50 pt-1\">{context?.user?.fid}</div>\n              </div>\n            </Section>\n          )}\n\n          {walletAddresses?.length > 0 && (\n            <Section>\n              <div class=\"text-sm  opacity-50 mb-3 uppercase\">Wallet</div>\n              <div class=\"font-mono font-medium text-xl mb-4\">{formatAddress(walletAddresses[0])}</div>\n\n              <div class=\"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                  chainId\n                </MonoButtonWithStatus>\n                <MonoButtonWithStatus\n                  onClick={() =>\n                    fcsdk.wallet?.ethProvider?.request({\n                      method: \"wallet_switchEthereumChain\",\n                      params: [{ chainId: \"0x2105\" }],\n                    })}\n                >\n                  switchChain (base)\n                </MonoButtonWithStatus>\n                <MonoButtonWithStatus\n                  onClick={() =>\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                </MonoButtonWithStatus>\n              </div>\n            </Section>\n          )}\n\n          <Section>\n            <div class=\"font-mono text-sm  opacity-50 mb-3\">sdk.actions</div>\n            <div class=\"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 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.addFrame()}>addFrame</MonoButtonWithStatus>\n              <MonoButtonWithStatus onClick={() => fcsdk.actions.signIn({})}>signIn</MonoButtonWithStatus>\n              <MonoButtonWithStatus onClick={() => fcsdk.actions.close()}>close</MonoButtonWithStatus>\n\n              {\n                /* <MonoButtonWithStatus\n                onClick={() =>\n                  fcsdk.actions.swap({\n                    sellToken: \"eip155:8453/erc20:0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913\",\n                    buyToken: \"eip155:8453/erc20:0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913\",\n                    sellAmount: \"3000000\",\n                  })}\n              >\n                swap\n              </MonoButtonWithStatus> */\n              }\n            </div>\n          </Section>\n\n          <Section>\n            <div class=\"flex flex-row gap-3 items-center justify-between\">\n              <div class=\"font-mono text-sm  opacity-50\">sdk.context</div>\n              <div class=\"text-sm cursor-pointer opacity-50 p-1\" onClick={() => setContextExpanded(!contextExpanded)}>\n                {contextExpanded ? \"▲\" : \"▼\"}\n              </div>\n            </div>\n\n            {contextExpanded && (\n              <div class=\"font-mono text-xs opacity-50 whitespace-pre-wrap break-all mt-1\">\n                {formatJSON(context)}\n              </div>\n            )}\n          </Section>\n        </>\n      )}\n\n      {!context && (\n        <Section>\n          <div class=\"text-md  opacity-50 \">Open this web app in Warpcast to see the Mini App.</div>\n        </Section>\n      )}\n    </div>\n  );\n}",[],[90,178,196],"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    <div class=\"m-5 mb-8\">\n      <h1 class=\"text-4xl font-semibold mb-2\">Mini App Starter</h1>\n      <div class=\"opacity-50\">Hono + React + Tailwind + Farcaster Mini App Starter Project on Val Town</div>\n    </div>\n  );\n}",[],[90,178,203],["D",1744213705324],[212,213,214,215],[96],{"_35":241,"_13":242,"_64":243,"_66":97,"_67":68,"_69":244,"_71":72,"_37":245,"_17":246,"_75":124,"_76":247,"_78":50,"_79":-5,"_105":248,"_18":249},{"_35":232,"_13":233,"_64":234,"_66":97,"_67":68,"_69":235,"_71":72,"_37":236,"_17":237,"_75":124,"_76":238,"_78":50,"_79":-5,"_105":239,"_18":240},{"_35":222,"_13":120,"_64":223,"_66":97,"_67":68,"_69":224,"_71":72,"_37":225,"_17":226,"_75":227,"_76":228,"_78":50,"_79":229,"_105":230,"_18":231},{"_35":216,"_13":153,"_64":217,"_66":97,"_67":68,"_69":131,"_71":72,"_37":218,"_17":86,"_75":124,"_76":219,"_78":50,"_79":-5,"_105":220,"_18":221},"b825d1d2-15a3-11f0-a56a-569c3dd06744","b825d268-15a3-11f0-a56a-569c3dd06744",["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};",[],[96,153],"300b33ea-1ddd-11f0-bae0-569c3dd06744","640bbb00-fb08-4172-a8ff-165bc99b02a3",185,["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    <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;","store-fc",[],[96,120],"699e4894-1d84-11f0-86f8-569c3dd06744","image.tsx","eb588fe7-734a-4d93-9a83-2b1d65281af1",180,["D",1745111499320],54,"/** @jsxImportSource https://esm.sh/react */\nimport { render } from \"https://deno.land/x/resvg_wasm/mod.ts\";\nimport { Hono } from \"npm:hono\";\nimport { Store } from \"npm:lucide-static\";\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\n      tw=\"w-full h-full flex justify-start items-end text-[100px] bg-black bg-gradient-to-br from-black to-gray-900 text-white p-[50px]\"\n      xstyle={{\n        background: \"linear-gradient(to bottom right, #000000, #111111)\",\n      }}\n    >\n      <div tw=\"flex flex-col items-start gap-[10px]\">\n        <img\n          tw=\"w-[100px] h-[100px]\"\n          src={base64Icon(Store)}\n        />\n        {\n          /* <div\n          tw=\"w-[100px] h-[100px]\"\n          style={{\n            width: \"100px\",\n            height: \"100px\",\n            WebkitMaskImage: `url(${base64Icon(Store)})`,\n            WebkitMaskRepeat: \"no-repeat\",\n            // WebkitMaskPosition: \"center\",\n            WebkitMaskSize: \"contain\",\n            background: \"linear-gradient(to bottom right, #ff00ff, #00ffff)\",\n            backgroundSize: \"100% 100%\",\n          }}\n        /> */\n        }\n        <div tw=\"h-[250px]\"></div>\n        <div tw=\"flex text-[100px] tracking-[-5px]\">Mini App Store</div>\n        <div tw=\"flex text-[46px] opacity-50 tracking-[-1px]\">Explore mini apps on Farcaster</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};\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};",[],[96,233],"41cb42b8-1ee7-11f0-ace2-569c3dd06744","farcaster.ts","c00da455-fa3f-4e75-8da9-3819898ce8eb",191,["D",1745263903841],5,"import { Hono } from \"npm:hono\";\n\nexport const name = \"Mini App Store\";\nexport const iconUrl = \"https://imgur.com/u3sNFyO.png\";\n// export const ogImageUrl = \"https://imgur.com/xKVOVUE.png\";\n\nexport function embedMetadata(baseUrl: string, path: string = \"/\") {\n  let titleSuffix = \"\";\n  if (path.startsWith(\"/?by=\")) {\n    titleSuffix = ` · @${path.replace(\"/?by=\", \"\")}`;\n  }\n\n  return {\n    version: \"next\",\n    imageUrl: baseUrl + \"/image\",\n    button: {\n      title: name + titleSuffix,\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://miniappstore.0xmoe.com\") {\n      accountAssociation = {\n        \"header\":\n          \"eyJmaWQiOjIwNzMsInR5cGUiOiJjdXN0b2R5Iiwia2V5IjoiMHg0OERCN2U3MWQxMTUyNjU5MTY5NjE2NzNCOTY4NjcwQTU0N2IwZkJFIn0\",\n        \"payload\": \"eyJkb21haW4iOiJtaW5pYXBwc3RvcmUuMHhtb2UuY29tIn0\",\n        \"signature\":\n          \"MHhiMmQ4ZTcxZWRmNjNlZjg2NDljZDdkY2U2MjBmMTgyOTllMWY5YjQ0YWJiN2E2NjJmNjExZTVlMzk5YWNhOTVjNTlkNGJhMDI5NWNkYjU1OTc0NDBmNzEzMDdkNGQxMDg0NGUwYWM4MjlhMTI5ODJkZmM4ZjdmMWNkNjQ5MDQ2NTFj\",\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}",[],[96,242],"12b110fc-155a-11f0-b2a3-569c3dd06744",["D",1744213705324],"legacyEnvVars","httpPrivacy","description","Explore mini apps on Farcaster","imageUrl","userId","6354d4b9-fd24-49d9-a600-cf17a1a9cf30","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_293":289},"org",{"_11":12,"_287":-5,"_288":289,"_257":258,"_290":291,"_292":50},"branch",{"_17":70,"_13":16,"_35":68,"_41":250,"_44":36,"_45":283,"_284":52,"_285":42,"_286":55,"_56":14,"_53":12},453,"forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yanFDd29JUGxvVEl1YVVlcHJiV2VYMUxFWjkifQ","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_35":250,"_13":14,"_37":393,"_48":-5,"_252":50,"_51":52,"_253":52,"_254":255,"_256":-5,"_257":258,"_259":223,"_260":72,"_261":-5,"_262":224,"_263":84,"_54":55,"_264":-5,"_265":-5,"_266":-5,"_267":-5,"_268":269,"_270":269,"_271":272,"_273":272,"_274":272,"_275":269,"_276":269,"_277":394,"_279":395,"_281":396,"_49":50},[336,341,353,354],"files",[336,337,338,339,340,341,342,343,344,345,346,347,348,349,350,351,352,353,354],"counts",{"_327":86,"_328":84,"_329":191,"_34":330,"_331":332},[319,320,321,322],"upstreamProject",{"_35":42,"_13":57,"_254":317,"_256":-5,"_51":52,"_277":318},"upstreamBranch",{"_35":36,"_37":315,"_39":316,"_13":16,"_41":42,"_17":43,"_44":-5,"_45":-5,"_46":47,"_48":-5,"_49":50,"_51":52,"_53":12,"_54":55,"_56":57},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{"_223":314},"miniappstore.0xmoe.com",["D",1742482886202],["D",1765906750880],"Hono + React + Tailwind + Farcaster Mini App Starter Project",{"_11":12,"_293":289},{"_35":95,"_13":96,"_64":97,"_66":-5,"_67":68,"_69":84,"_71":72,"_37":98,"_17":86,"_75":93,"_76":-5,"_78":50,"_79":-5,"_18":326},{"_35":89,"_13":90,"_64":91,"_66":-5,"_67":68,"_69":84,"_71":72,"_37":92,"_17":86,"_75":93,"_76":-5,"_78":50,"_79":-5,"_18":325},{"_35":81,"_13":82,"_64":83,"_66":-5,"_67":68,"_69":84,"_71":72,"_37":85,"_17":86,"_75":24,"_76":87,"_78":50,"_79":-5,"_18":324},{"_35":62,"_13":63,"_64":65,"_66":-5,"_67":68,"_69":70,"_71":72,"_37":73,"_17":74,"_75":24,"_76":77,"_78":50,"_79":-5,"_18":323},[63],[82],[90],[96],"pulls","branches","forks",{"_333":84,"_335":86},"connections",{"_333":86,"_334":86},"count","unfilledCount","emptyCount",{"_35":95,"_13":96,"_64":97,"_66":-5,"_67":68,"_69":84,"_71":72,"_37":209,"_17":86,"_75":93,"_76":-5,"_78":50,"_79":-5,"_105":391,"_18":392},{"_35":241,"_13":242,"_64":243,"_66":97,"_67":68,"_69":244,"_71":72,"_37":245,"_17":246,"_75":124,"_76":247,"_78":50,"_79":-5,"_105":389,"_18":390},{"_35":232,"_13":233,"_64":234,"_66":97,"_67":68,"_69":235,"_71":72,"_37":236,"_17":237,"_75":124,"_76":238,"_78":50,"_79":-5,"_105":387,"_18":388},{"_35":222,"_13":120,"_64":223,"_66":97,"_67":68,"_69":224,"_71":72,"_37":225,"_17":226,"_75":227,"_76":228,"_78":50,"_79":229,"_105":385,"_18":386},{"_35":216,"_13":153,"_64":217,"_66":97,"_67":68,"_69":131,"_71":72,"_37":218,"_17":86,"_75":124,"_76":219,"_78":50,"_79":-5,"_105":383,"_18":384},{"_35":89,"_13":90,"_64":91,"_66":-5,"_67":68,"_69":84,"_71":72,"_37":111,"_17":86,"_75":93,"_76":-5,"_78":50,"_79":-5,"_105":381,"_18":382},{"_35":177,"_13":178,"_64":179,"_66":91,"_67":68,"_69":84,"_71":72,"_37":180,"_17":86,"_75":93,"_76":-5,"_78":50,"_79":-5,"_105":379,"_18":380},{"_35":202,"_13":203,"_64":204,"_66":179,"_67":68,"_69":84,"_71":72,"_37":205,"_17":86,"_75":124,"_76":206,"_78":50,"_79":-5,"_105":377,"_18":378},{"_35":195,"_13":196,"_64":197,"_66":179,"_67":68,"_69":84,"_71":72,"_37":198,"_17":86,"_75":124,"_76":199,"_78":50,"_79":-5,"_105":375,"_18":376},{"_35":186,"_13":187,"_64":188,"_66":179,"_67":68,"_69":189,"_71":72,"_37":190,"_17":191,"_75":124,"_76":192,"_78":50,"_79":-5,"_105":373,"_18":374},{"_35":161,"_13":162,"_64":163,"_66":91,"_67":68,"_69":84,"_71":72,"_37":164,"_17":86,"_75":93,"_76":-5,"_78":50,"_79":-5,"_105":371,"_18":372},{"_35":168,"_13":169,"_64":170,"_66":163,"_67":68,"_69":171,"_71":72,"_37":172,"_17":173,"_75":124,"_76":174,"_78":50,"_79":-5,"_105":369,"_18":370},{"_35":137,"_13":138,"_64":139,"_66":91,"_67":68,"_69":84,"_71":72,"_37":140,"_17":86,"_75":93,"_76":-5,"_78":50,"_79":-5,"_105":367,"_18":368},{"_35":152,"_13":153,"_64":154,"_66":139,"_67":68,"_69":155,"_71":72,"_37":156,"_17":157,"_75":124,"_76":158,"_78":50,"_79":-5,"_105":365,"_18":366},{"_35":145,"_13":146,"_64":147,"_66":139,"_67":68,"_69":84,"_71":72,"_37":148,"_17":86,"_75":124,"_76":149,"_78":50,"_79":-5,"_105":363,"_18":364},{"_35":128,"_13":129,"_64":130,"_66":91,"_67":68,"_69":131,"_71":72,"_37":132,"_17":133,"_75":124,"_76":134,"_78":50,"_79":-5,"_105":361,"_18":362},{"_35":119,"_13":120,"_64":121,"_66":91,"_67":68,"_69":122,"_71":72,"_37":123,"_17":84,"_75":124,"_76":125,"_78":50,"_79":-5,"_105":359,"_18":360},{"_35":81,"_13":82,"_64":83,"_66":-5,"_67":68,"_69":84,"_71":72,"_37":108,"_17":86,"_75":24,"_76":87,"_78":50,"_79":-5,"_105":357,"_18":358},{"_35":62,"_13":63,"_64":65,"_66":-5,"_67":68,"_69":70,"_71":72,"_37":104,"_17":74,"_75":24,"_76":77,"_78":50,"_79":-5,"_105":355,"_18":356},[],[63],[],[82],[],[90,120],[],[90,129],[],[90,138,146],[],[90,138,153],[349,350],[90,138],[],[90,162,169],[347],[90,162],[],[90,178,187],[],[90,178,196],[],[90,178,203],[343,344,345],[90,178],[342,346,348,351,352],[90],[],[96,153],[],[96,120],[],[96,233],[],[96,242],[337,338,339,340],[96],["D",1744213705324],{"_11":12,"_293":289},{"_11":12,"_287":-5,"_288":289,"_257":258,"_290":291,"_292":50},{"_17":70,"_13":16,"_35":68,"_41":250,"_44":36,"_45":283,"_284":52,"_285":42,"_286":55,"_56":14,"_53":12},"ctx",{"_277":-5,"_311":430,"_431":432,"_433":434,"_435":50,"_436":50,"_437":50,"_438":72,"_439":-5,"_440":-7,"_441":-7,"_442":86,"_443":50,"_444":50,"_445":-5,"_446":50,"_447":50,"_448":50,"_449":-5},"ENV",{"_401":402,"_403":404,"_405":16,"_406":407,"_408":409,"_410":411,"_412":413,"_414":415,"_416":417,"_418":419,"_420":421,"_422":423,"_424":425,"_426":427,"_428":429},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","c73f21da490985bff19c279eb0e09db24d688e4f","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]
</article></body></html>

Code