{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-2 border-transparent dark:bg-neutral-100 text-neutral-100 dark:text-neutral-900 \";\n  if (props.variant === \"outline\") {\n    variantStyles =\n      \"bg-transparent border-2 border-neutral-400/40 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\">{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}\n\nexport function Sheet({ children, showSheet, setShowSheet }: any) {\n  return (\n    <>\n      {showSheet && (\n        <div\n          className=\"absolute top-0 left-0 w-full h-full bg-neutral-100/80 dark:bg-neutral-900/80 z-10\"\n          onClick={() => setShowSheet(false)}\n        >\n          <div className=\"absolute bottom-0 left-0 w-full bg-white dark:bg-black rounded-t-3xl pb-8\">\n            <div className=\"flex flex-col items-stretch gap-3 max-w-2xl mx-auto p-5\">{children}</div>\n          </div>\n        </div>\n      )}\n    </>\n  )\n}\n",[122,167,158],"fbf02399f954d2f04fda6d1fde3131e30540f3d9e3ef30520a8322bb9118247e","components","566cc752-0ca2-11f0-96ad-569c3dd06744","8fa8266a-078e-11f0-b2c6-569c3dd06744","b7324e06-5db3-467c-8006-e53bbc155394",["D",1743255182237],5,"/** @jsxImportSource https://esm.sh/react@19 */\nimport { useEffect, useState } from \"https://esm.sh/react@19\";\n\nexport function Section({ children }: any) {\n  const sectionClass = \"my-3 bg-neutral-400 bg-opacity-10 p-5 rounded-xl  \";\n  return <div class={sectionClass}>{children}</div>;\n}\n\nexport 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\">{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};",[122,167,158],"25a53a28860fc21c7f9f6269763d64a4e96415cc212d14492e54eee5d399da29","frontend/App.tsx",{"_32":188,"_13":180,"_82":189,"_84":148,"_85":33,"_86":190,"_88":48,"_34":191,"_40":192,"_91":118,"_93":193,"_65":48,"_95":-5,"_96":-7,"_75":194,"_98":195},{"_32":179,"_13":180,"_82":181,"_84":139,"_85":57,"_86":182,"_88":26,"_34":183,"_40":184,"_91":118,"_93":185,"_65":48,"_95":-5,"_96":-7,"_75":186,"_98":187},"9f66cf0c-484d-11f0-a23d-76b3cceeab13","App.tsx","05536b6d-e7a8-485f-a1f5-9e291da4c16a",701,["D",1749815867234],26,"/** @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 { Analytics } from \"./components/Analytics.tsx\"\nimport { Home } from './screens/Home.tsx'\nimport { Space } from './screens/Space.tsx'\n\nexport function App() {\n  const [context, setContext] = useState<any>()\n  useEffect(() => {\n    fcsdk.actions.ready()\n    fcsdk.context.then(setContext)\n    fcsdk.actions.addFrame().catch(console.log)\n  }, [])\n\n  return (\n    <div className=\"max-w-2xl mx-auto\">\n      <Routes>\n        <Route path=\"/\" element={<Home />} />\n        <Route path=\"/space/:id\" element={<Space />} />\n        <Route path=\"/about\" element={<About />} />\n      </Routes>\n      <Analytics />\n    </div>\n  )\n}\n\nfunction About() {\n  return <h2 className=\"p-5\">About page</h2>\n}\n\n",[122,180],"6df4113845c5ef7dcb6ee80f66ed0245bbf22c5776d5f070f2ef455935612793","18e30bf4-0cb0-11f0-9060-569c3dd06744","3255a8c8-059c-11f0-864d-569c3dd06744",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}",[122,180],"a8ffe1ef462d2264e1d6d7d4bda59dbec0b6e07548d2000df452639721f44ae5","backend/farcaster.ts",{"_32":210,"_13":200,"_82":211,"_84":212,"_85":33,"_86":213,"_88":48,"_34":214,"_40":184,"_91":118,"_93":215,"_65":48,"_95":-5,"_96":-7,"_75":216,"_98":217},{"_32":199,"_13":200,"_82":201,"_84":202,"_85":57,"_86":203,"_88":26,"_34":204,"_40":205,"_91":118,"_93":206,"_65":48,"_95":-5,"_96":-7,"_75":207,"_98":208},"0c4c1408-aa9e-11f0-8b6d-0224a6c84d84","farcaster.ts","8314afd0-f83d-464f-bc30-1a17aae79051","553aa722-0ad6-41d4-8ec9-070545d5b66e",758,["D",1760625623627],18,"import { Hono } from 'npm:hono'\n\nimport { saveUserNotificationsDetails, sendNotificationToUser } from './farcaster-notifications.ts'\n\nexport const name = 'Spaces'\n// export const iconUrl = \"https://imgur.com/FgHOubn.png\";\n// export const ogImageUrl = \"https://imgur.com/oLCWKFI.png\";\n\nexport function embedMetadata(baseUrl: string, path: string = '/') {\n  const channel = path?.startsWith('/space/') ? path.replace('/space/', '') : ''\n  return {\n    version: 'next',\n    imageUrl: baseUrl + '/image' + (channel ? '?channel=' + channel : ''),\n    button: {\n      title: name,\n      action: {\n        type: 'launch_frame',\n        name: name,\n        url: baseUrl + path,\n        splashImageUrl: baseUrl + '/icon?rounded=1',\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://spaces.0xmoe.com') {\n      accountAssociation = {\n        header:\n          'eyJmaWQiOjIwNzMsInR5cGUiOiJjdXN0b2R5Iiwia2V5IjoiMHg0OERCN2U3MWQxMTUyNjU5MTY5NjE2NzNCOTY4NjcwQTU0N2IwZkJFIn0',\n        payload: 'eyJkb21haW4iOiJzcGFjZXMuMHhtb2UuY29tIn0',\n        signature:\n          'MHhlNGI1Y2NjZjY1YjM2NTAzN2Y5ZTI3YzM5OWUxZmM4NDY5MGQxODM1YTNiMDBiYzNkZmIzMjA3ZGIwOTk2ZjM2NmNkMDdlZTM2YTY1NzBmMDgzMTc1ODEzMzFkZDk4ZjZjOTFjYzhmZjRlNDU2MWY5YTY0ZjExMzUzZmQ0NjgxMzFi',\n      }\n    }\n\n    const manifest = {\n      accountAssociation,\n      frame: {\n        name: name,\n        version: '1',\n        iconUrl: baseUrl + '/icon',\n        homeUrl: baseUrl,\n        splashImageUrl: baseUrl + '/icon?rounded=1',\n        splashBackgroundColor: '#111111',\n        subtitle: 'Live audio conversations',\n        primaryCategory: 'social',\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('[fc-webhook]', header, payload)\n\n    if ((event === 'frame_added' || event === 'notifications_enabled') && payload?.notificationDetails) {\n      await saveUserNotificationsDetails(fid, payload?.notificationDetails)\n      const res = await sendWelcomeNotification(fid, baseUrl)\n      console.log('[fc-webhook]', 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 sendWelcomeNotification(fid: number, baseUrl: string) {\n  return await sendNotificationToUser(fid, {\n    title: `Welcome to ${name}!`,\n    body: 'Tune in to live audio conversations',\n    targetUrl: baseUrl,\n  })\n}\n",[209,200],"0cd5357eb5b736ef61e6f90446a255ef8769cf3e4659898353f0eb1cf961de68","backend","238c18cc-0763-11f0-a2d8-569c3dd06744","a8e79c30-0727-11f0-994d-569c3dd06744","e1c14cbe-4abb-48a4-9ecd-6b49b08bdb76",295,["D",1742678282790],"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) {\n  return {\n    version: \"next\",\n    imageUrl: ogImageUrl,\n    button: {\n      title: name,\n      action: {\n        type: \"launch_frame\",\n        name: name,\n        url: baseUrl,\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}",[209,200],"d98ae645812ae4992fa36c078b66eb95f9a2231a849f0482d51488e3376e993c",{"_75":240,"_77":241,"_79":-7},{"_75":231,"_77":232,"_79":-7},{"_75":221,"_77":222,"_79":-7},"frontend/components/FarcasterMiniApp.tsx",{"_32":223,"_13":224,"_82":225,"_84":170,"_85":33,"_86":59,"_88":48,"_34":226,"_40":227,"_91":118,"_93":228,"_65":48,"_95":-5,"_96":-7,"_75":229,"_98":230},"60e2524e-115a-11f0-8478-569c3dd06744","FarcasterMiniApp.tsx","c7f50f0e-059c-11f0-b718-569c3dd06744",["D",1743774031857],239,"/** @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=\"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\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}",[122,167,224],"65fb613599a6c0ebf0bf69e558c6611b5b76fa7da790aa81053668ecc9edfce4","frontend/components/Example.tsx",{"_32":233,"_13":234,"_82":235,"_84":170,"_85":33,"_86":149,"_88":48,"_34":236,"_40":192,"_91":118,"_93":237,"_65":48,"_95":-5,"_96":-7,"_75":238,"_98":239},"566cb992-0ca2-11f0-96ad-569c3dd06744","Example.tsx","324edbf6-059c-11f0-8fd2-569c3dd06744",["D",1743255182237],"/** @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}",[122,167,234],"d4dd1a466649870c0179eee628405264d446d4e52f3ecd82bbb0ed53bb536c43","backend/index.ts",{"_32":242,"_13":243,"_82":244,"_84":212,"_85":33,"_86":245,"_88":48,"_34":246,"_40":247,"_91":248,"_93":249,"_65":48,"_95":250,"_96":-7,"_75":251,"_98":252},"685487d8-0c9e-11f0-9cbc-569c3dd06744","index.ts","3238fa84-059c-11f0-ac33-569c3dd06744",390,["D",1743253494310],76,"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, ogImageUrl } from \"./farcaster.ts\";\n\nconst app = new Hono();\n\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(c.req.path, \"\");\n  return c.html(generateHtml(baseUrl));\n});\n\nfunction generateHtml(baseUrl: 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))} />\n        <link rel=\"icon\" href={iconUrl} />\n        <meta property=\"og:image\" content={ogImageUrl} />\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",[209,243],"b3172c9b3637ae528cb3effc34cf81fb97ba701cd9338c9ed018e7ceb732d317",{"_75":416,"_77":-7,"_79":417},{"_75":405,"_77":-7,"_79":406},{"_75":396,"_77":-7,"_79":397},{"_75":385,"_77":-7,"_79":386},{"_75":374,"_77":-7,"_79":375},{"_75":365,"_77":-7,"_79":366},{"_75":355,"_77":-7,"_79":356},{"_75":344,"_77":-7,"_79":345},{"_75":335,"_77":-7,"_79":336},{"_75":327,"_77":-7,"_79":328},{"_75":318,"_77":-7,"_79":319},{"_75":309,"_77":-7,"_79":310},{"_75":302,"_77":-7,"_79":303},{"_75":292,"_77":-7,"_79":293},{"_75":279,"_77":-7,"_79":280},{"_75":269,"_77":-7,"_79":270},"frontend/util/supabase.ts",{"_32":271,"_13":272,"_82":273,"_84":114,"_85":57,"_86":182,"_88":26,"_34":274,"_40":275,"_91":118,"_93":276,"_65":48,"_95":-5,"_96":-7,"_75":277,"_98":278},"9f66bac6-484d-11f0-a23d-76b3cceeab13","supabase.ts","9f66bb34-484d-11f0-a23d-76b3cceeab13",["D",1749815867234],0,"import { createClient } from 'https://esm.sh/@supabase/supabase-js'\n\nexport const supabase = createClient(\n  'https://jfdnoveuufyggaezifgz.supabase.co',\n  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImpmZG5vdmV1dWZ5Z2dhZXppZmd6Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3NDY0NjEzODEsImV4cCI6MjA2MjAzNzM4MX0.mch0JzFzHCwZkiPqmSK71u3Ns5A_O7aqTR40X3H8DJg'\n)\n\nexport async function sendAnalyticsEvent(payload: {\n  event: string\n  param?: string\n  fid?: number\n  platform?: string\n}) {\n  try {\n    // console.log('📈', payload)\n    const { data, error } = await supabase.from('analytics_events').insert([payload])\n    if (error) throw error\n    return data\n  } catch (error) {\n    console.error('sendAnalyticsEvent error:', error)\n  }\n}\n\nexport const fetchSpace = async (id: string) => {\n  const { data, error } = await supabase.from('spaces').select().eq('id', id).single()\n  // console.log('🗄️ space', data, error)\n  return data\n}\n",[122,123,272],"af35709be3b075f3f88dcffbe353989ed3b2f63f4cb8e2fdcaf26eadd1028aa3","frontend/screens/Space.tsx",{"_32":281,"_13":282,"_82":283,"_84":284,"_85":57,"_86":285,"_88":26,"_34":286,"_40":287,"_91":118,"_93":288,"_65":48,"_95":-5,"_96":-7,"_75":289,"_98":290},"ae2b093c-75e2-11f0-a927-0224a6c84d84","Space.tsx","863114d4-1283-11f0-95d3-569c3dd06744","7e30ab74-1282-11f0-9065-569c3dd06744",750,["D",1754827689346],188,"/** @jsxImportSource https://esm.sh/react@19 */\nimport fcsdk from 'https://esm.sh/@farcaster/frame-sdk'\nimport { useQuery } from 'https://esm.sh/@tanstack/react-query@5'\nimport { AudioLines, Mic, MicOff, LoaderCircle } from 'https://esm.sh/lucide-react@0.510.0'\nimport { NavLink, Route, Routes, useNavigate, useParams } from 'https://esm.sh/react-router@7'\nimport { use, useEffect, useRef, useState } from 'https://esm.sh/react@19'\n\nimport { Button, Input, Section, ShareButton, Sheet } from '../components/ui.tsx'\nimport { fetchUsersById } from '../util/neynar.ts'\nimport { supabase, fetchSpace } from '../util/supabase.ts'\n\nimport {\n  LocalUser, // Plays the microphone audio track and the camera video track\n  RemoteUser, // Plays the remote user audio and video tracks\n  useIsConnected, // Returns whether the SDK is connected to Agora's server\n  useJoin, // Automatically join and leave a channel on mount and unmount\n  useLocalCameraTrack, // Create a local camera video track\n  useLocalMicrophoneTrack, // Create a local microphone audio track\n  usePublish, // Publish the local tracks\n  useRemoteUsers, // Retrieve the list of remote users\n} from 'https://esm.sh/agora-rtc-react'\nimport AgoraRTC, { AgoraRTCProvider } from 'https://esm.sh/agora-rtc-react'\n\nconst client = AgoraRTC.createClient({ mode: 'live', codec: 'vp8', role: 'host' })\n// client.setClientRole(\"host\");\n\nexport function Space() {\n  return (\n    <div className=\"p-5 mb-8\">\n      <AgoraRTCProvider client={client}>\n        <Basics />\n      </AgoraRTCProvider>\n    </div>\n  )\n}\n\nconst Basics = () => {\n  const [context, setContext] = useState<any>()\n  useEffect(() => {\n    fcsdk.context.then(setContext)\n  }, [])\n  const uid = context?.user?.fid || 0\n\n  const { id } = useParams()\n\n  const { data: space, isLoading } = useQuery({ queryKey: ['space', id], queryFn: () => fetchSpace(id) })\n\n  const [calling, setCalling] = useState(false)\n  const isConnected = useIsConnected()\n  const [token, setToken] = useState('')\n  const channel = id\n\n  // console.log(\"Basics\", name, calling, isConnected);\n\n  const onShare = () => {\n    if (!context) return\n    const text = `Join me in this audio space!\\n\\n${space?.name || channel}\\n\\ncc @moe`\n    fcsdk?.actions?.composeCast?.({ text, embeds: [window.location.href] })\n  }\n\n  if (isLoading) {\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 (!space) {\n    return (\n      <div className=\"flex flex-row items-center justify-center p-4 opacity-50 h-32\">\n        <div className=\"text-sm\">Space not found</div>\n      </div>\n    )\n  }\n\n  return (\n    <>\n      <SpaceHeader channel={space?.name || channel} />\n\n      <div className=\"room\">\n        {calling ? (\n          <Room channel={channel} calling={calling} setCalling={setCalling} token={token} uid={uid} />\n        ) : (\n          <Lobby channel={channel} space={space} setToken={setToken} setCalling={setCalling} uid={uid} />\n        )}\n      </div>\n\n      <Section className=\"flex flex-col items-center gap-4 my-16\">\n        <div className=\"text-sm opacity-50 text-center\">Share this space with friends</div>\n        <div className=\"flex flex-row gap-4\">\n          <Button variant=\"outline\" onClick={() => navigator.clipboard.writeText(window.location.href)}>\n            Copy Link\n          </Button>\n          {context && (\n            <Button variant=\"outline\" onClick={onShare}>\n              Share on Farcaster\n            </Button>\n          )}\n        </div>\n      </Section>\n    </>\n  )\n}\n\nfunction SpaceHeader({ channel }: any) {\n  const navigate = useNavigate()\n\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 = `Join me in this audio space!\\n\\n${channel}\\n\\n`\n  //   fcsdk.actions.openUrl(\n  //     `https://warpcast.com/~/compose?text=${encodeURIComponent(text)}&embeds[]=${window.location.href}`\n  //   )\n  // }\n\n  return (\n    <div className=\"flex flex-row items-start justify-between  mb-8\">\n      <div className=\"flex flex-col gap-1\">\n        <div className=\"flex flex-row items-center gap-1 opacity-50 cursor-pointer\" onClick={() => navigate('/')}>\n          <Mic className=\"w-5 h-5 mt-[1]\" />\n          <h1 className=\"text-md font-medium\">Spaces</h1>\n        </div>\n        <h1 className=\"text-3xl font-semibold\">{channel}</h1>\n      </div>\n      {/* {false && <ShareButton onClick={onShare} />} */}\n    </div>\n  )\n}\n\nfunction Lobby({ channel, space, uid, setCalling, setToken }: any) {\n  // console.log(\"Lobby\", channel);\n  const { data: creator } = useUser(space?.created_by)\n\n  const queryFn = () =>\n    fetch(`/api/channels`)\n      .then((r) => r.json())\n      .then((r) => r?.data?.channels?.find((c) => c.channel_name == channel))\n  const { data: agoraChannel } = useQuery({ queryKey: ['agoraChannel', channel], queryFn })\n  console.log('agoraChannel', agoraChannel)\n\n  const join = async () => {\n    const response = await fetch(`/api/token?channel=${channel}&uid=${uid}`).then((r) => r.json())\n    console.log('response', response)\n    setToken(response.token)\n    setCalling(true)\n  }\n\n  return (\n    <>\n      <div className=\"flex flex-col  gap-8\">\n        {creator && (\n          <div className=\"flex flex-col gap-3\">\n            <div className=\"text-xs opacity-50 max-w-full truncate uppercase\">Hosted by</div>\n            <div className=\"flex flex-row items-center gap-3\">\n              <img\n                className=\"rounded-full w-10 h-10 object-cover bg-neutral-500/10\"\n                src={creator?.pfp_url}\n                onClick={() => fcsdk.actions.viewProfile({ fid: creator.fid })}\n              />\n              <div className=\"text-md font-semibold\">{creator?.username}</div>\n            </div>\n          </div>\n        )}\n        {agoraChannel?.user_count > 1 && (\n          <div className=\"flex flex-col gap-3\">\n            <div className=\"text-xs opacity-50 max-w-full truncate uppercase\">{agoraChannel?.user_count} users</div>\n          </div>\n        )}\n        <Button size=\"lg\" disabled={!channel} onClick={() => join()}>\n          <span>Join Space</span>\n        </Button>\n      </div>\n    </>\n  )\n}\n\nfunction Room({ channel, token, uid, calling, setCalling }: any) {\n  // console.log(\"Room\", channel, calling, setCalling);\n\n  // const [calling, setCalling] = useState(false);\n  const isConnected = useIsConnected()\n  const [appId, setAppId] = useState('1e46ee7dda94477c833739c1fc1f8d38')\n  // const [channel, setChannel] = useState(\"test\");\n\n  const { data: localUserId } = useJoin({ appid: appId, channel, token, uid }, calling)\n\n  const [micOn, setMic] = useState(false)\n  const { localMicrophoneTrack } = useLocalMicrophoneTrack(micOn)\n  usePublish([localMicrophoneTrack])\n\n  const remoteUsers = useRemoteUsers()\n  const activeSpeakerUid = useActiveSpeakerUid({ isConnected })\n\n  const { space, toggleHost, toggleSpeaker } = useSpace(channel)\n  // console.log('🟢 space', space)\n\n  const localUserIsCreator = space?.created_by === localUserId\n  const localUserIsHost = space?.hosts?.includes(localUserId)\n  const localUserIsSpeaker = space?.speakers?.includes(localUserId)\n\n  useEffect(() => {\n    if (!localUserIsSpeaker) setMic(false)\n  }, [localUserIsSpeaker])\n\n  const { receivedEmojis, sendEmoji } = useEmojis(channel)\n  // console.log('🔴🔴🔴', receivedEmojis, localUserId)\n\n  const localUserProps = {\n    uid: localUserId,\n    space,\n    muted: !micOn,\n    speaking: activeSpeakerUid === localUserId,\n    receivedEmojis,\n  }\n\n  const getRemoteUserProps = (user: any) => ({\n    uid: user.uid,\n    key: user.uid,\n    space,\n    muted: !user?.hasAudio,\n    speaking: activeSpeakerUid === user.uid,\n    toggleHost: localUserIsHost ? toggleHost : undefined,\n    toggleSpeaker: localUserIsHost ? toggleSpeaker : undefined,\n    receivedEmojis,\n  })\n\n  const [showEmojiBar, setShowEmojiBar] = useState(false)\n  const emojis = ['❤️', '🎉', '🔥', '😂', '😢', '👍', '👎']\n\n  return (\n    <>\n      {isConnected && (\n        <div className=\"flex flex-col items-start mt-10 mb-10\">\n          <div className=\"control flex flex-row flex-wrap gap-4 \">\n            {localUserIsSpeaker && (\n              <div className=\"left-control flex flex-row flex-wrap gap-4\">\n                <Button variant=\"outline\" size=\"lg\" onClick={() => setMic((a) => !a)}>\n                  {micOn ? <Mic /> : <MicOff />}\n                </Button>\n              </div>\n            )}\n            <Button variant=\"outline\" size=\"lg\" onClick={() => sendEmoji('✋', localUserId)}>\n              ✋\n            </Button>\n            <Button variant=\"outline\" size=\"lg\" onClick={() => setShowEmojiBar((a) => !a)} className={`${showEmojiBar ? '!opacity-50' : ''}`}>\n              ❤️\n            </Button>\n            <Button variant=\"outline\" size=\"lg\" onClick={() => setCalling((a) => !a)}>\n              {calling ? 'Leave' : 'Call'}\n            </Button>\n          </div>\n          {showEmojiBar && <Section className=\"flex flex-row flex-wrap gap-0 mt-4 py-1 px-2 rounded-xl\">\n            {emojis.map((emoji) => (\n              <div key={emoji} className=\"p-2 text-2xl cursor-pointer\" onClick={() => sendEmoji(emoji, localUserId)}>\n                {emoji}\n              </div>\n            ))}\n          </Section>}\n        </div>\n      )}\n\n      <div className=\"flex flex-col gap-6\">\n        <div className=\"flex flex-row flex-wrap gap-2\">\n          <User {...localUserProps} onlySpeakers>\n            <LocalUser audioTrack={localMicrophoneTrack} cameraOn={false} micOn={micOn} playAudio={false}></LocalUser>\n          </User>\n          {remoteUsers.map((user) => (\n            <User {...getRemoteUserProps(user)} onlySpeakers>\n              <RemoteUser user={user}></RemoteUser>\n            </User>\n          ))}\n        </div>\n        <div className=\"flex flex-row flex-wrap gap-2\">\n          <User {...localUserProps} onlyListeners>\n            <LocalUser audioTrack={localMicrophoneTrack} cameraOn={false} micOn={micOn} playAudio={false}></LocalUser>\n          </User>\n          {remoteUsers.map((user) => (\n            <User {...getRemoteUserProps(user)} onlyListeners>\n              <RemoteUser user={user}></RemoteUser>\n            </User>\n          ))}\n        </div>\n      </div>\n    </>\n  )\n}\n\nfunction User({\n  uid,\n  muted,\n  speaking,\n  space,\n  toggleHost,\n  toggleSpeaker,\n  receivedEmojis,\n  onlySpeakers,\n  onlyListeners,\n  ...props\n}: any) {\n  const { data: user } = useUser(uid)\n  // console.log(\"User\", uid, user);\n\n  const image =\n    user?.pfp_url ||\n    userImageUrl(uid) ||\n    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAA1JREFUGFdjmD59ugIABXQB5tNl2LwAAAAASUVORK5CYII='\n\n  const goToProfile = (uid) => {\n    console.log('goToProfile', uid)\n    fcsdk?.actions?.viewProfile({ fid: uid }).catch(console.error)\n  }\n  const tipProfile = async () => {\n    if (!user) return\n    await fcsdk.actions.sendToken?.({\n      token: 'eip155:8453/erc20:0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913',\n      amount: '250000',\n      recipientFid: uid,\n    })\n  }\n\n  const [showMenu, setShowMenu] = useState(false)\n\n  const userIsCreator = space?.created_by === uid\n  const userIsHost = space?.hosts?.includes(uid)\n  const userIsSpeaker = space?.speakers?.includes(uid)\n\n  if (onlySpeakers && !userIsSpeaker) return null\n  if (onlyListeners && userIsSpeaker) return null\n\n  const userEmoji = receivedEmojis.find((emoji) => emoji.uid === uid && emoji.timestamp > Date.now() - 1000 * 5)\n\n  return (\n    <div className=\"overflow-hidden flex flex-col  items-center w-20\">\n      <div className=\"relative\">\n        <img\n          className=\"rounded-full w-14 h-14 object-cover bg-neutral-500/10\"\n          src={image}\n          onClick={() => setShowMenu(true)}\n        />\n        {muted && onlySpeakers && <Indicator Icon={MicOff} color=\"red\" />}\n        {speaking && <Indicator Icon={AudioLines} color=\"purple\" />}\n        {userEmoji && <Emoji emoji={userEmoji.emoji} color=\"\" />}\n      </div>\n      <div className=\"font-semibold text-sm max-w-full truncate mt-1\">{user?.username || uid}</div>\n      <div className=\"text-[8px] opacity-50 max-w-full truncate uppercase\">\n        {userIsHost ? 'Host' : userIsSpeaker ? 'Speaker' : ''}\n      </div>\n      <div className=\"absolute opacity-0\">{props.children}</div>\n\n      <Sheet showSheet={showMenu} setShowSheet={setShowMenu}>\n        <div className=\"flex flex-col items-center my-4\">\n          <img\n            className=\"rounded-full w-14 h-14 object-cover bg-neutral-500/10\"\n            src={image}\n            onClick={() => setShowMenu(true)}\n          />\n          <div className=\"font-semibold text-md text-center max-w-full truncate \">{user?.username || uid}</div>\n        </div>\n        {toggleHost && !userIsCreator && (\n          <>\n            <Button variant=\"outline\" size=\"lg\" onClick={() => toggleHost?.(uid)}>\n              {userIsHost ? 'Remove' : 'Make'} Co-Host\n            </Button>\n          </>\n        )}\n        {toggleSpeaker && !userIsHost && (\n          <>\n            <Button variant=\"outline\" size=\"lg\" onClick={() => toggleSpeaker?.(uid)}>\n              {userIsSpeaker ? 'Remove' : 'Make'} Speaker\n            </Button>\n          </>\n        )}\n        <Button variant=\"outline\" size=\"lg\" onClick={() => goToProfile(uid)}>\n          View Profile\n        </Button>\n        {user && (\n          <Button variant=\"outline\" size=\"lg\" onClick={() => tipProfile()}>\n            Tip\n          </Button>\n        )}\n      </Sheet>\n    </div>\n  )\n}\n\nfunction Indicator({ Icon, color }: any) {\n  return (\n    <div\n      className={`flex items-center justify-center w-5 h-5 rounded-full bg-${color}-500 border border-white/50 dark:border-black/50 absolute bottom-0 right-0`}\n    >\n      <Icon className=\"w-3 h-3 text-white\" />\n    </div>\n  )\n}\nfunction Emoji({ emoji, color }: any) {\n  return (\n    <div className={`flex items-center justify-center size-6 rounded-full bg-${color}-500  absolute bottom-0 left-0`}>\n      <div className=\"text-2xl text-white\">{emoji}</div>\n    </div>\n  )\n}\n\n//////////\n\nfunction useUser(uid: number) {\n  return useQuery({\n    queryKey: ['user', uid],\n    queryFn: () => getUserByUid(uid),\n    staleTime: 1000 * 60 * 60 * 1,\n  })\n}\n\nasync function getUserByUid(uid?: number) {\n  if (!uid) return null\n  if (uid > 2_000_000) return null\n  return await fetchUsersById(`${uid}`).then((users) => users?.[0])\n}\n\nfunction userImageUrl(address) {\n  if (!address) return null\n  return 'https://cdn.stamp.fyi/avatar/' + address + '?s=140'\n}\n\nfunction useActiveSpeakerUid({ isConnected }) {\n  const [activeSpeakerUid, setActiveSpeakerUid] = useState<any>()\n  useEffect(() => {\n    if (isConnected) {\n      client.enableAudioVolumeIndicator()\n      client.on('volume-indicator', (volumes) => setActiveSpeakerUid(getActiveSpeakerUid(volumes)))\n    }\n  }, [isConnected])\n  return activeSpeakerUid\n}\n\nfunction getActiveSpeakerUid(volumes) {\n  if (!volumes || volumes.length === 0) return undefined\n  const topSpeaker = volumes?.reduce((prev, current) => (prev.level > current.level ? prev : current))\n  // console.log(\"volumes\", volumes, topSpeaker);\n  if (topSpeaker?.level > 40) return topSpeaker.uid\n  else return undefined\n}\n\nfunction useSpace(id: string) {\n  const [space, setSpace] = useState<any>()\n\n  useEffect(() => {\n    fetchSpace(id).then(setSpace)\n\n    const changes = supabase\n      .channel('table-db-changes')\n      .on(\n        'postgres_changes',\n        {\n          event: '*',\n          schema: 'public',\n          table: 'spaces',\n          filter: `id=eq.${id}`,\n        },\n        (payload) => {\n          console.log('🗄️ realtime spaces', payload)\n          setSpace(payload.new)\n        }\n      )\n      .subscribe()\n  }, [])\n\n  const toggleHost = async (uid) => {\n    console.log('toggleHost', uid)\n    const hosts = space?.hosts || []\n    const newHosts = hosts.includes(uid) ? hosts.filter((s) => s !== uid) : [...hosts, uid]\n    const { data, error } = await supabase.from('spaces').update({ hosts: newHosts }).eq('id', id)\n    console.log('toggleHost', data, error)\n  }\n\n  const toggleSpeaker = async (uid) => {\n    console.log('toggleSpeaker', uid)\n    const speakers = space?.speakers || []\n    const newSpeakers = speakers.includes(uid) ? speakers.filter((s) => s !== uid) : [...speakers, uid]\n    const { data, error } = await supabase.from('spaces').update({ speakers: newSpeakers }).eq('id', id)\n    console.log('toggleSpeaker', data, error)\n  }\n\n  const hosts = space ? [...space?.hosts, space?.created_by].filter(Boolean) : []\n  const speakers = space ? [...space?.speakers, ...space?.hosts, space?.created_by].filter(Boolean) : []\n\n  return { space: { ...space, hosts, speakers }, toggleHost, toggleSpeaker }\n}\n\nfunction useEmojis(id: string) {\n  const [receivedEmojis, setEmojis] = useState<any[]>([])\n  const channelRef = useRef<any>(null)\n\n  useEffect(() => {\n    // channelRef.current?.unsubscribe()\n    channelRef.current = supabase\n      .channel(id, { config: { broadcast: { self: true } } })\n      .on('broadcast', { event: 'emoji' }, onBroadcast)\n      .subscribe((status, error) => {\n        console.log('🔴🔴🔴 emoji channel status', status, error)\n      })\n\n    return () => {\n      supabase.removeChannel(channelRef.current)\n      // channelRef.current?.unsubscribe()\n      channelRef.current = null\n    }\n  }, [id])\n\n  const onBroadcast = (data) => {\n    // console.log('onBroadcast', data)\n    setEmojis((prev) => [data.payload, ...prev].slice(0, 100))\n  }\n\n  const sendEmoji = (emoji, uid) =>\n    channelRef.current?.send({\n      type: 'broadcast',\n      event: 'emoji',\n      payload: { emoji, uid, timestamp: Date.now() },\n    })\n\n  return { receivedEmojis, sendEmoji }\n}\n",[122,291,282],"397e22b96cc993597d5acf7b7132670c69e93a627affba68aa42a5d3e31ca51d","screens","frontend/screens/Home.tsx",{"_32":294,"_13":295,"_82":296,"_84":284,"_85":57,"_86":182,"_88":26,"_34":297,"_40":298,"_91":118,"_93":299,"_65":48,"_95":-5,"_96":-7,"_75":300,"_98":301},"9f66d0d8-484d-11f0-a23d-76b3cceeab13","Home.tsx","82e1f6d2-1282-11f0-8a52-569c3dd06744",["D",1749815867234],121,"/** @jsxImportSource https://esm.sh/react@19 */\nimport fcsdk from 'https://esm.sh/@farcaster/frame-sdk'\nimport { useQuery } from 'https://esm.sh/@tanstack/react-query@5'\nimport { LoaderCircle, Mic, MicOff } from 'https://esm.sh/lucide-react@0.510.0'\nimport { NavLink, Route, Routes, useNavigate, useParams } from 'https://esm.sh/react-router@7'\nimport { useEffect, useRef, useState } from 'https://esm.sh/react@19'\n\nimport { Button, Input, Section, ShareButton } from '../components/ui.tsx'\nimport { fetchUsersById } from '../util/neynar.ts'\nimport { supabase } from '../util/supabase.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 Spaces mini app by @moe!\\n`\n    fcsdk?.actions?.composeCast?.({ text, embeds: [window.location.href] })\n  }\n\n  return (\n    <div className=\"p-5 mb-8\">\n      <div className=\"flex flex-row items-center gap-2  mb-10\">\n        <Mic className=\"w-6 h-6 mt-[3]\" />\n        <h1 className=\"text-2xl font-medium grow\">Spaces</h1>\n        {context && <ShareButton onClick={onShare} />}\n      </div>\n\n      <Spaces />\n      <div className=\"h-8\"></div>\n      <CreateForm />\n    </div>\n  )\n}\n\nfunction Spaces() {\n  const queryFn = async () => {\n    const agoraChannels = await fetch(`/api/channels`)\n      .then((r) => r.json())\n      .then((r) => r?.data?.channels)\n    const { data: dbSpaces, error } = await supabase.from('spaces').select().limit(1000)\n\n    const results = agoraChannels.map((channel: any) => {\n      const space = dbSpaces.find((space: any) => space.id == channel.channel_name)\n      return { ...channel, ...(space || {}) }\n    })\n\n    console.log('Spaces', agoraChannels, dbSpaces, results)\n    return results\n  }\n  const { data: spaces } = useQuery({ queryKey: ['spaces'], queryFn })\n\n  if (!spaces) {\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 (spaces.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 live spaces</div>\n      </Section>\n    )\n  }\n\n  return (\n    <div className=\"flex flex-col gap-4\">\n      {spaces?.map((space: any) => (\n        <Space key={space.channel_name} space={space} />\n      ))}\n    </div>\n  )\n}\n\nfunction Space({ space }: any) {\n  const navigate = useNavigate()\n\n  return (\n    <Section className=\"flex flex-row items-center justify-between gap-4\">\n      <div>\n        <div className=\"text-xl font-semibold\">{space.name || space.channel_name}</div>\n        <div className=\"text-sm opacity-50\">\n          {space.user_count} user{space.user_count == 1 ? '' : 's'}\n        </div>\n      </div>\n      <Button size=\"lg\" onClick={() => navigate(`/space/${encodeURIComponent(space.channel_name)}`)}>\n        Join\n      </Button>\n    </Section>\n  )\n}\n\nfunction CreateForm({}) {\n  const [context, setContext] = useState<any>()\n  useEffect(() => {\n    fcsdk.context.then(setContext)\n  }, [])\n\n  const navigate = useNavigate()\n  const [name, setName] = useState('')\n\n  const onCreate = async () => {\n    const id = Math.random().toString(36).substring(2, 12)\n    const { error } = await supabase.from('spaces').insert({ id: id, name: name, created_by: context?.user?.fid })\n    navigate(`/space/${encodeURIComponent(id)}`)\n  }\n\n  return (\n    <Section className=\"flex flex-col gap-4\">\n      <Input\n        size=\"lg\"\n        onChange={(e) => setName(e.target.value)}\n        placeholder=\"Space Title\"\n        autoCapitalize=\"on\"\n        autoCorrect=\"on\"\n        type=\"text\"\n        value={name}\n      />\n      <Button size=\"lg\" disabled={!name} onClick={onCreate}>\n        Create Space\n      </Button>\n    </Section>\n  )\n}\n",[122,291,295],"b4e3f18e8e1c5b086ac07e583a4bc88e9034b3d5f7ce0477a18b0c2a921c6b20","frontend/screens",{"_32":304,"_13":291,"_82":284,"_84":139,"_85":57,"_86":305,"_88":26,"_34":306,"_40":275,"_91":307,"_93":-5,"_65":48,"_95":-5,"_96":-7,"_75":308,"_98":-5},"7e30aac0-1282-11f0-9065-569c3dd06744",225,["D",1743901212057],"directory",[122,291],"frontend/components/Analytics.tsx",{"_32":311,"_13":312,"_82":313,"_84":160,"_85":57,"_86":182,"_88":26,"_34":314,"_40":275,"_91":118,"_93":315,"_65":48,"_95":-5,"_96":-7,"_75":316,"_98":317},"9f66b922-484d-11f0-a23d-76b3cceeab13","Analytics.tsx","9f66b990-484d-11f0-a23d-76b3cceeab13",["D",1749815867234],"/** @jsxImportSource https://esm.sh/react@19 */\nimport fcsdk from 'https://esm.sh/@farcaster/frame-sdk'\nimport { useLocation } from 'https://esm.sh/react-router@7'\nimport { useEffect, useState } from 'https://esm.sh/react@19'\n\nimport { sendAnalyticsEvent } from '../util/supabase.ts'\n\nexport const Analytics = ({}) => {\n  const [context, setContext] = useState<any>()\n  useEffect(() => {\n    fcsdk.context.then(setContext)\n  }, [])\n\n  const user = context?.user\n\n  const analyticsEvent = (event: string, param?: string) => {\n    return sendAnalyticsEvent({ event, param, fid: user?.fid, platform: context ? 'miniapp' : 'web' })\n  }\n\n  useEffect(() => {\n    if (!user?.fid) return\n    // analyticsEvent('app_open', undefined)\n    if (context) analyticsEvent('miniapp_open', JSON.stringify(fcMiniAppContextData(context)))\n  }, [user?.fid])\n\n  const location = useLocation()\n  const path = location.pathname\n  let cleanedPath = path\n  if (cleanedPath && cleanedPath?.length > 1 && cleanedPath?.endsWith('/')) cleanedPath = cleanedPath.slice(0, -1)\n\n  useEffect(() => {\n    if (!user?.fid) return\n    analyticsEvent('screen_view', cleanedPath)\n  }, [cleanedPath, user?.fid])\n\n  return null\n}\n\nconst fcMiniAppContextData = (context: any) => {\n  const location: any = {\n    // ...context?.location,\n    clientFid: context?.client?.clientFid,\n    locationType: context?.location?.type,\n  }\n  if (context?.location?.type == 'cast_embed') location.locationId = context?.location.cast?.hash\n  if (context?.location?.type == 'notification') location.locationId = context?.location?.notification?.title\n  return location\n}\n",[122,167,312],"0cdc7b47c64fa98b07c1cb2118811c53bb09beec83bcff09ab6dbc028c8fd72b","deno.json",{"_32":320,"_13":318,"_82":321,"_84":-5,"_85":57,"_86":322,"_88":26,"_34":323,"_40":275,"_91":92,"_93":324,"_65":48,"_95":-5,"_96":-7,"_75":325,"_98":326},"13a00260-29c9-11f0-8e44-569c3dd06744","13a00328-29c9-11f0-8e44-569c3dd06744",639,["D",1746460404177],"{\n  \"$schema\": \"https://raw.githubusercontent.com/denoland/deno/348900b8b79f4a434cab4c74b3bc8d4d2fa8ee74/cli/schemas/config-file.v1.json\",\n  \"lock\": false,\n  \"compilerOptions\": {\n    \"noImplicitAny\": false,\n    \"strict\": false,\n    \"types\": [\n      \"https://www.val.town/types/valtown.d.ts\"\n    ],\n    \"lib\": [\n      \"dom\",\n      \"dom.iterable\",\n      \"dom.asynciterable\",\n      \"deno.ns\",\n      \"deno.unstable\"\n    ]\n  },\n  \"lint\": {\n    \"files\": {\n      \"include\": [\n        \"deno:/https/esm.town/**/*\"\n      ]\n    },\n    \"rules\": {\n      \"exclude\": [\n        \"no-explicit-any\",\n        \"no-unused-vars\",\n        \"no-window\",\n        \"no-empty-pattern\"\n      ]\n    }\n  },\n  \"node_modules_dir\": false,\n  \"experimental\": {\n    \"unstable-node-globals\": true,\n    \"unstable-temporal\": true,\n    \"unstable-worker-options\": true,\n    \"unstable-sloppy-imports\": true\n  }\n}",[318],"1f206b800e447d72a2a92aa78718e4044f31b72fef71cd83c92deec877c179fb","backend/supabase.ts",{"_32":329,"_13":272,"_82":330,"_84":202,"_85":57,"_86":182,"_88":26,"_34":331,"_40":275,"_91":118,"_93":332,"_65":48,"_95":-5,"_96":-7,"_75":333,"_98":334},"9f66b6c0-484d-11f0-a23d-76b3cceeab13","9f66b74c-484d-11f0-a23d-76b3cceeab13",["D",1749815867234],"import { Client } from 'https://deno.land/x/postgres@v0.17.0/mod.ts'\n\nconst client = new Client(Deno.env.get('SUPABASE_POSTGRES'))\n\nexport async function dbQuery(query: string, args: any[] = []) {\n  await client.connect()\n  const result = await client.queryObject(query, args)\n  await client.end()\n  return result\n}\n",[209,272],"6fc683985fac2c6d3d6b90363b4c6cf55dfef26e3bf202b115b2f90e44e3fb7e","backend/neynar.ts",{"_32":337,"_13":112,"_82":338,"_84":202,"_85":57,"_86":115,"_88":26,"_34":339,"_40":340,"_91":118,"_93":341,"_65":48,"_95":-5,"_96":-7,"_75":342,"_98":343},"17ebb0bc-3040-11f0-b763-569c3dd06744","575ebc70-1b8d-11f0-8a63-569c3dd06744",["D",1747171228567],2,"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 fetchNeynarGet = async (path: string) => {\n  return await fetch('https://api.neynar.com/v2/farcaster/' + path, {\n    method: 'GET',\n    headers: headers,\n  }).then((r) => r.json())\n}\n\nexport const fetchNeynarPost = 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  }).then((r) => r.json())\n}\n\n//////////\n\nexport function fetchUsersById(fids: string) {\n  return fetchNeynarGet(`user/bulk?fids=${fids}`).then((r) => r.users)\n}\n",[209,112],"a2fe64692a98d56ff3c7ac1f5b765747fbb05ddeed362d62f37ddc164bc7584d","backend/index.tsx",{"_32":346,"_13":137,"_82":347,"_84":202,"_85":57,"_86":348,"_88":26,"_34":349,"_40":350,"_91":248,"_93":351,"_65":48,"_95":352,"_96":-7,"_75":353,"_98":354},"e3795a92-568b-11f0-b16f-f69ea79377d9","7d592e9d-3b16-400a-8841-13f108cf24d3",740,["D",1751381926514],23,"/** @jsxImportSource npm:hono/jsx */\nimport { serveFile } from 'https://esm.town/v/std/utils@64-main/index.ts'\nimport { Hono } from 'npm:hono'\n\nimport { handleAgoraEndpoints } from './agora.ts'\nimport { handleAnalyticsEndpoints } from './analytics.tsx'\nimport { embedMetadata, handleFarcasterEndpoints, name } from './farcaster.ts'\nimport { handleImageEndpoints } from './image.tsx'\nimport { fetchNeynarGet } from './neynar.ts'\n\nconst app = new Hono()\n\nhandleImageEndpoints(app)\nhandleFarcasterEndpoints(app)\nhandleAgoraEndpoints(app)\nhandleAnalyticsEndpoints(app)\n\napp.get('/testxxx', (c) =>\n  c.json({\n    hello: 'world',\n    baseUrl: c.req.url.replace(c.req.path, ''),\n    'import.meta.url': import.meta.url,\n    // AGORA_CUSTOMER_SECRET: Deno.env.get(\"AGORA_CUSTOMER_SECRET\"),\n  })\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)\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 = '/') {\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={baseUrl + '/icon?rounded=1'} />\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\n","spaces-fc",[209,137],"e16163d9e3845d92728922de666965007f79871fce2fca2514dcfce8591b0d1d","backend/image.tsx",{"_32":357,"_13":358,"_82":359,"_84":202,"_85":57,"_86":360,"_88":26,"_34":361,"_40":350,"_91":118,"_93":362,"_65":48,"_95":-5,"_96":-7,"_75":363,"_98":364},"97a08fae-7b62-11f0-b6af-0224a6c84d84","image.tsx","15d5bf76-14ab-11f0-8c91-569c3dd06744",757,["D",1755432382930],"/** @jsxImportSource https://esm.sh/react */\nimport { render } from 'https://deno.land/x/resvg_wasm/mod.ts'\nimport { Hono } from 'npm:hono'\nimport { Mic } from 'npm:lucide-static'\nimport satori from 'npm:satori'\n\nimport { fetchSpace } from '../frontend/util/supabase.ts'\nimport { fetchUsersById } from './neynar.ts'\n\nexport function handleImageEndpoints(app: Hono) {\n  const headers = {\n    'Content-Type': 'image/png',\n    'cache-control': 'public, max-age=3600', // 86400\n  }\n  app.get('/image', async (c) => {\n    const channel = c.req.query('channel')\n    if (channel) return c.body(await spaceImage(channel), 200, headers)\n    return c.body(await homeImage(), 200, headers)\n  })\n  app.get('/icon', async (c) => {\n    const rounded = !!c.req.query('rounded')\n    return c.body(await iconImage(rounded), 200, headers)\n  })\n}\n\nexport async function homeImage() {\n  return await ogImage(\n    <div tw=\"w-full h-full flex justify-center items-center text-[100px] bg-black text-white p-[50px]\">\n      <div tw=\"flex flex-col justify-center items-center\">\n        <div tw={`w-[200px] h-[200px] flex justify-center items-center bg-[#7c65c1] text-white rounded-[50px]`}>\n          <img tw=\"w-[136px] h-[136px]\" src={base64Icon(Mic)} />\n        </div>\n        <div tw=\"h-[40px]\"></div>\n        <div tw=\"flex text-[100px] tracking-[-5px] font-semibold\">Spaces</div>\n        <div tw=\"flex text-[30px] opacity-50 tracking-[-1px]\">Live audio conversations</div>\n      </div>\n    </div>\n  )\n}\n\n// export 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\">\n//         <img tw=\"w-[100px] h-[100px]\" src={base64Icon(Mic)} />\n//         <div tw=\"h-[230px]\"></div>\n//         <div tw=\"flex text-[120px] tracking-[-5px]\">Spaces</div>\n//         <div tw=\"flex text-[40px] opacity-50 tracking-[-1px]\">Tune in to live audio conversations</div>\n//       </div>\n//     </div>\n//   )\n// }\n\nexport async function spaceImage(channel: string) {\n  const space = await fetchSpace(channel)\n  if (!space) return await homeImage()\n\n  const users = await fetchUsersById([space.created_by, ...space.hosts, ...space.speakers].join(','))\n\n  const hostFids = [space.created_by, ...space.hosts]\n  const speakerFids = [...space.speakers]\n  const creator = users?.find((u) => u.fid === space?.created_by)\n  const speakers = users?.filter((u) => speakerFids.includes(u.fid))\n\n  return await ogImage(\n    <div tw=\"w-full h-full flex justify-start items-start text-[100px] bg-black text-white p-[50px]\">\n      <div tw=\"flex flex-col items-start \">\n        <div tw=\"flex flex-row items-center mb-[10px]\">\n          <img tw=\"w-[60px] h-[60px] opacity-50\" src={base64Icon(Mic)} />\n          <div tw=\"flex text-[50px] tracking-[-1px] ml-[10px] opacity-50\">Space</div>\n        </div>\n        <div tw=\"flex text-[80px] font-semibold tracking-[-3px] mb-[70px]\">{space?.name || channel}</div>\n\n        {creator && (\n          <div tw=\"flex flex-col items-start mb-[40px]\">\n            <div tw=\"flex text-[20px] uppercase opacity-50 mb-[15px]\">Hosted by</div>\n            <div tw=\"flex flex-row items-center\">\n              <img tw=\"rounded-full w-[80px] h-[80px] object-cover bg-neutral-500/10\" src={creator?.pfp_url} />\n              <div tw=\"flex text-[50px] font-semibold tracking-[-1px] ml-[15px]\">{creator?.username}</div>\n            </div>\n          </div>\n        )}\n\n        {speakers?.length > 1 && (\n          <div tw=\"flex flex-col items-start\">\n            <div tw=\"flex text-[20px] uppercase opacity-50 mb-[15px]\">Speakers</div>\n            <div tw=\"flex flex-row items-center\">\n              {speakers?.slice(0, 15).map((s) => (\n                <div key={s.fid} tw=\"flex mr-[-30px]\">\n                  <img tw=\"rounded-full w-[80px] h-[80px] object-cover border-[5px] border-black bg-neutral-500/10\" src={s?.pfp_url} />\n                </div>\n              ))}\n            </div>\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n\nexport async function iconImage(rounded = false) {\n  const roundedClass = rounded ? 'rounded-[96px]' : ''\n  return await ogImage(\n    <div tw={`w-full h-full flex justify-center items-center text-[100px] bg-[#7c65c1] text-white p-[50px] ${roundedClass}`}>\n      <img tw=\"w-[350px] h-[350px]\" src={base64Icon(Mic)} />\n    </div>,\n    {\n      width: 512,\n      height: 512,\n    }\n  )\n}\n\n//////////\n\nexport async function ogImage(body, options = {}) {\n  const svg = await satori(body, {\n    width: 945,\n    height: 630,\n    ...options,\n    fonts: await loadFonts(),\n    loadAdditionalAsset: async (code, segment) => {\n      console.log('loadAdditionalAsset', code, segment)\n      if (code === 'emoji') {\n        const unicode = segment.codePointAt(0).toString(16).toUpperCase()\n        return `data:image/svg+xml;base64,` + btoa(await loadEmoji(unicode))\n      }\n      return ''\n    },\n  })\n  return await render(svg)\n}\n\nconst loadFonts = async () => {\n  const fontsConfig = [\n    { name: 'Inter', weight: 400, fontFile: 'Inter-Regular.otf' },\n    // { name: \"Inter\", weight: 500, fontFile: \"Inter-Medium.otf\" },\n    { name: 'Inter', weight: 600, fontFile: 'Inter-SemiBold.otf' },\n    // { name: \"Inter\", weight: 700, fontFile: \"Inter-Bold.otf\" },\n  ]\n  const fontPromises = fontsConfig.map(async (font) => {\n    const fontUrl = 'https://cdn.jsdelivr.net/npm/@tamagui/font-inter@1.108.3/otf/' + font.fontFile\n    const fontArrayBuf = await fetch(fontUrl).then((res) => res.arrayBuffer())\n    return { name: font.name, data: fontArrayBuf, weight: font.weight }\n  })\n  const fonts: any = await Promise.all(fontPromises)\n\n  return fonts\n}\n\nconst loadEmoji = (code) => {\n  // const api = `https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/svg/${code.toLowerCase()}.svg`\n  const api = `https://cdn.jsdelivr.net/gh/shuding/fluentui-emoji-unicode/assets/${code.toLowerCase()}_color.svg`\n  return fetch(api).then((r) => r.text())\n}\n\nconst base64Icon = (svg: any) => {\n  if (!svg) return undefined\n  svg = svg.replace('stroke=\"currentColor\"', 'stroke=\"white\"')\n  const base64 = Buffer.from(svg).toString('base64')\n  // console.log('getIconDataUrl', name, svg, base64)\n  return `data:image/svg+xml;base64,${base64}`\n}\n",[209,358],"53a2a59fa60bb315e97b3107e48f44bb8fc6ad1bcf02999d905089da190c0cd4","backend/farcaster-notifications.ts",{"_32":367,"_13":368,"_82":369,"_84":202,"_85":57,"_86":56,"_88":26,"_34":370,"_40":117,"_91":118,"_93":371,"_65":48,"_95":-5,"_96":-7,"_75":372,"_98":373},"52b5b61e-aaa9-11f0-91e5-0224a6c84d84","farcaster-notifications.ts","d09aaa38-2a9f-11f0-a96a-569c3dd06744",["D",1760630466217],"import { supabase } from '../frontend/util/supabase.ts'\n\nconst table = 'fc_notification_details'\n\nexport async function saveUserNotificationsDetails(fid: number, notificationDetails: any) {\n  const { data, error } = await supabase\n    .from(table)\n    .upsert(\n      [\n        {\n          fid: fid,\n          token: notificationDetails.token,\n          url: notificationDetails.url,\n          updated_at: new Date().toISOString(),\n        },\n      ],\n      {\n        onConflict: 'fid',\n      }\n    )\n  console.log('🔔 saveUserNotificationsDetails', fid, notificationDetails, error)\n  return data\n}\n\nexport async function getUserNotificationsDetails(fid: number): Promise<any> {\n  const { data, error } = await supabase.from(table).select().eq('fid', fid).single()\n  return data\n}\n\n//////////\n\nexport async function sendNotificationToUser(fid: number, payload: any) {\n  const notificationDetails = await getUserNotificationsDetails(fid)\n  if (!notificationDetails) {\n    console.log('🔔 sendNotificationToUser: user not found', fid)\n    return\n  }\n\n  console.log('🔔 sendNotificationToUser', fid, notificationDetails)\n  return await sendNotification(notificationDetails, payload)\n}\n\nexport async function sendNotificationToAllUsers(payload: any) {\n  const { data, error } = await supabase.from(table).select()\n  if (error) {\n    console.error('🔔 sendNotificationToAllUsers: error fetching users', error)\n    return\n  }\n  \n  for (const notificationDetails of data) {\n    console.log('🔔 sendNotificationToAllUsers', notificationDetails.fid)\n    try {\n      await sendNotification(notificationDetails, payload)\n    } catch (error) {\n      console.error('🔔 sendNotificationToAllUsers: error sending to', notificationDetails.fid, error)\n    }\n  }\n  console.log('🔔 sendNotificationToAllUsers: done')\n}\n\nasync function sendNotification(notificationDetails: any, payload: any) {\n  return await fetch(notificationDetails.url, {\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      tokens: [notificationDetails.token],\n      ...payload,\n    }),\n  }).then((res) => res.json())\n}\n",[209,368],"9c34416219778f4bb5f377824115d876ac3f4e707ab8c279789cb7fd14d33f3a","backend/analytics.tsx",{"_32":376,"_13":377,"_82":378,"_84":202,"_85":57,"_86":379,"_88":26,"_34":380,"_40":381,"_91":118,"_93":382,"_65":48,"_95":-5,"_96":-7,"_75":383,"_98":384},"0b92e15e-7637-11f0-8012-0224a6c84d84","analytics.tsx","60d3180a-4c4d-11f0-aec3-76b3cceeab13",755,["D",1754863923776],31,"/** @jsxImportSource npm:hono/jsx */\nimport { Hono } from 'npm:hono'\n\nimport { name } from './farcaster.ts'\nimport { dbQuery } from './supabase.ts'\n\nexport function handleAnalyticsEndpoints(app: Hono) {\n  app.get('/analytics', (c) => {\n    const period = c.req.query('p') || 'week'\n    return c.html(<Dashboard period={period} />, 200)\n  })\n}\n\nasync function Dashboard({ period = 'week' }) {\n  // todo: load all data in parallel (postgress connection issue)\n  const w = 90\n  const title = `${name} · Analytics`\n  return (\n    <html>\n      <head>\n        <title>{name} · Analytics</title>\n        <script src=\"https://cdn.tailwindcss.com\"></script>\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n        <link rel=\"icon\" href=\"/icon?rounded=1\" />\n      </head>\n      <body className=\"bg-white text-black dark:bg-black dark:text-white\">\n        <pre className=\"text-sm leading-4 p-4\">\n          <div>\n            <B> ═══ </B>\n            <span className=\"font-bold\">{title}</span>\n            <B> {''.padEnd(w - title.length - 8, '═')}═ </B>\n          </div>\n          <B>{'  '.padEnd(w - 2, ' ') + '  '}</B>\n\n          <div className=\"flex flex-row\">\n            <Table data={await countUsersByInterval({})} title=\"DAU\" props={['interval', 'count']} w={w / 3} />\n            <Table\n              data={await countUsersByInterval({ intervalFormat: 'IYYY-\"W\"IW' })}\n              title=\"WAU\"\n              props={['interval', 'count']}\n              w={w / 3}\n            />\n            <Table\n              data={await countUsersByInterval({ intervalFormat: 'YYYY-MM' })}\n              title=\"MAU\"\n              props={['interval', 'count']}\n              w={w / 3}\n            />\n          </div>\n          <div className=\"flex flex-row\">\n            <Table\n              data={await topScreens({ period })}\n              title={`Top Screens (${period})`}\n              props={['param', 'count']}\n              w={(w * 2) / 3}\n            />\n            <Table\n              data={await topUsers({ period })}\n              title={`Top Users (${period})`}\n              props={['fid', 'count']}\n              w={w / 3}\n            />\n          </div>\n          <div className=\"flex flex-row\">\n            <Table\n              data={await topOpenLocations({ period })}\n              title={`Top Open Locations (${period})`}\n              props={['locationText', 'count']}\n              w={(w * 2) / 3}\n            />\n            <Table\n              data={await topClients({ period })}\n              title={`Top Clients (${period})`}\n              props={['client', 'count']}\n              w={w / 3}\n            />\n          </div>\n        </pre>\n      </body>\n    </html>\n  )\n}\n\nfunction Table({ data, title, props, w }) {\n  const renderProp = (item, prop) => {\n    const gap = '   '\n    let text = String(item[prop] || '')\n    if (prop == 'count') return gap + text.padStart(5)\n    if (text.length > w - 18) text = text.slice(0, w - 21) + '...'\n    if (item.link)\n      return (\n        <>\n          <a\n            href={item.link}\n            target=\"_blank\"\n            // className=\"underline underline-offset-2 decoration-neutral-300 dark:decoration-neutral-600\"\n          >\n            {text}\n          </a>\n          {''.padEnd(w - text.length - 18)}\n        </>\n      )\n    return text.padEnd(w - 18)\n  }\n  const renderRow = (item) => {\n    return <>{props.map((prop) => renderProp(item, prop))}</>\n  }\n\n  return (\n    <div>\n      <div>\n        <B> ┌── </B>\n        <span className=\"font-bold\">{title}</span>\n        <B> {''.padEnd(w - title.length - 10, '─')}──┐ </B>\n      </div>\n      <Spacer w={w} />\n      {data.map((item, i) => (\n        <div key={i}>\n          <B>{' │   '}</B>\n          <span className=\"opacity-90\">{renderRow(item)}</span>\n          <B>{'   │ '}</B>\n        </div>\n      ))}\n      <Spacer w={w} />\n      {Array.from({ length: 10 - data.length }, () => (\n        <Spacer w={w} />\n      ))}\n      <div>\n        <B> └──{''.padEnd(w - 6, '─')}┘ </B>\n      </div>\n      <div> </div>\n    </div>\n  )\n}\n\nfunction B({ children }) {\n  return <span className=\"text-neutral-300 dark:text-neutral-600\">{children}</span>\n}\n\nfunction Spacer({ w }) {\n  return (\n    <div>\n      <B>{' │'.padEnd(w - 2, ' ') + '│ '}</B>\n    </div>\n  )\n}\n\nfunction countUsersByInterval({ intervalFormat = 'YYYY-MM-DD' }) {\n  return analyticsQuery(`\n  select TO_CHAR(created_at, '${intervalFormat}') as interval, COUNT(distinct fid)\n  from analytics_events\n  where created_at >= NOW() - INTERVAL '1 year'\n  group by interval\n  order by interval desc\n  limit 10`)\n}\nfunction topOpenLocations({ period = 'week' }) {\n  return analyticsQuery(`\n  select param, COUNT(*)\n  from analytics_events\n  where created_at >= NOW() - INTERVAL '1 ${period}' and event = 'miniapp_open'\n  group by param\n  order by count desc\n  limit 10`).then(miniappLocationDataTransformer)\n}\nfunction topClients({ period = 'week' }) {\n  return analyticsQuery(`\n  select param, COUNT(*)\n  from analytics_events\n  where created_at >= NOW() - INTERVAL '1 ${period}' and event = 'miniapp_open'\n  group by param\n  order by count desc\n  limit 500`).then(miniappClientDataTransformer)\n}\nfunction topScreens({ period = 'week' }) {\n  return analyticsQuery(`\n  select param, COUNT(*)\n  from analytics_events\n  where created_at >= NOW() - INTERVAL '1 ${period}' and event = 'screen_view'\n  group by param\n  order by count desc\n  limit 10`).then(screenDataTransformer)\n}\nfunction topUsers({ period = 'week' }) {\n  return analyticsQuery(`\n  select fid, COUNT(*)\n  from analytics_events\n  where created_at >= NOW() - INTERVAL '1 ${period}'\n  group by fid\n  order by count desc\n  limit 10`).then(userDataTransformer)\n}\n\nfunction screenDataTransformer(data: any) {\n  return data.map((item: any) => {\n    return {\n      ...item,\n      link: item.param,\n    }\n  })\n}\nfunction userDataTransformer(data: any) {\n  return data.map((item: any) => {\n    return {\n      ...item,\n      link: `https://sonar.val.run/u/fid:${item.fid}`,\n    }\n  })\n}\nfunction miniappLocationDataTransformer(data: any) {\n  return data.map((item: any) => {\n    return {\n      ...item,\n      locationText: getLocationText(item.param),\n      link: getLocationLink(item.param),\n    }\n  })\n}\nfunction miniappClientDataTransformer(data: any) {\n  // map to client then group by client, then convert to array\n  const clients = data\n    .map((item: any) => {\n      return {\n        ...item,\n        // client: getClientFidText(JSON.parse(item.param).clientFid),\n        clientFid: JSON.parse(item.param).clientFid,\n      }\n    })\n    .reduce((acc: any, item: any) => {\n      const clientFid = item.clientFid\n      if (!acc[clientFid]) {\n        acc[clientFid] = 0\n      }\n      acc[clientFid] += Number(item.count)\n      return acc\n    }, {})\n  return Object.entries(clients)\n    .map(([clientFid, count]) => ({\n      clientFid,\n      client: getClientFidText(clientFid),\n      count: count as number,\n      link: `https://sonar.val.run/u/fid:${clientFid}`,\n    }))\n    .sort((a, b) => b.count - a.count)\n    .slice(0, 10)\n}\n\nfunction getLocationText(param: string) {\n  let locationText = ''\n  if (param) {\n    const location = JSON.parse(param)\n    locationText += '[' + getClientFidText(location.clientFid).slice(0, 4) + '] '\n\n    locationText +=\n      location.locationType\n        ?.replace('cast_embed', 'cast embed') // 📝\n        .replace('cast_share', 'cast share') // 📝\n        .replace('miniapp_open', 'miniapp open') // 🧩\n        .replace('notification', 'notification') // 🔔\n        .replace('channel', 'channel') // 📡\n        .replace('launcher', 'launcher') || '' // 📱\n\n    if (location.locationId) locationText += `: ${location.locationId}`\n  }\n  return locationText\n}\nfunction getClientFidText(clientFid: any) {\n  if (!clientFid) return `Farcaster`\n  if (clientFid == 9152) return `Farcaster`\n  if (clientFid == 399519) return `Base`\n  if (clientFid == 309857) return `Base`\n  if (clientFid == 827605) return `Zapper`\n  if (clientFid == 356900) return `Recaster`\n  return `${clientFid}`\n}\nfunction getLocationLink(param: string) {\n  if (param) {\n    const location = JSON.parse(param)\n    if (location.locationType == 'cast_embed') return `https://sonar.val.run/p/${location.locationId}`\n    if (location.locationType == 'cast_share') return `https://sonar.val.run/p/${location.locationId}`\n  }\n  return ''\n}\n\nasync function analyticsQuery(query: string, args: any[] = []) {\n  const result = await dbQuery(query, args)\n  return safeRows(result.rows)\n}\n\nfunction safeRows(rows: any[]) {\n  return rows.map((row) => {\n    const newRow: Record<string, any> = {}\n    for (const key in row) {\n      if (typeof row[key] === 'bigint') {\n        newRow[key] = String(row[key])\n      } else {\n        newRow[key] = row[key]\n      }\n    }\n    return newRow\n  })\n}\n",[209,377],"5c5889fe22aee31b4e60e9b2127a956a8787691f268b41f77d372b60cbce6037","backend/agora.ts",{"_32":387,"_13":388,"_82":389,"_84":202,"_85":57,"_86":390,"_88":26,"_34":391,"_40":392,"_91":118,"_93":393,"_65":48,"_95":-5,"_96":-7,"_75":394,"_98":395},"ba8495d6-1bbf-11f0-8e33-569c3dd06744","agora.ts","60af3dc2-1232-11f0-919c-569c3dd06744",630,["D",1744917073034],48,"import { RtcRole, RtcTokenBuilder } from \"npm:agora-token\";\nimport { Hono } from \"npm:hono\";\n\nexport function handleAgoraEndpoints(app: Hono) {\n  app.get(\"/api/channels\", async (c) => {\n    const appId = Deno.env.get(\"AGORA_APP_ID\");\n    const response = await fetchAgora(`dev/v1/channel/${appId}/`);\n    return c.json(response);\n  });\n\n  app.get(\"/api/token\", async (c) => {\n    const appId = Deno.env.get(\"AGORA_APP_ID\");\n    const appCertificate = Deno.env.get(\"AGORA_APP_CERTIFICATE\");\n    const tokenExpirationInSecond = 24 * 3600;\n    const privilegeExpirationInSecond = 24 * 3600;\n    const role = RtcRole.PUBLISHER;\n\n    // const channelName = \"test\";\n    // const uid = 12345;\n    // get from query string\n    const channelName = c.req.query(\"channel\");\n    const uid = c.req.query(\"uid\");\n    console.log(\"channelName:\", channelName, \"uid:\", uid);\n\n    if (channelName == undefined || channelName == \"\" || uid == undefined || uid == \"\") {\n      return c.json({ error: \"Need to provide channelName and uid\" });\n    }\n    if (uid == 1356) {\n      return c.json({ error: \"error\" });\n    }\n\n    if (appId == undefined || appId == \"\" || appCertificate == undefined || appCertificate == \"\") {\n      return c.json({ error: \"Need to set environment variable AGORA_APP_ID and AGORA_APP_CERTIFICATE\" });\n    }\n\n    const tokenWithUid = RtcTokenBuilder.buildTokenWithUid(\n      appId,\n      appCertificate,\n      channelName,\n      uid,\n      role,\n      tokenExpirationInSecond,\n      privilegeExpirationInSecond,\n    );\n    console.log(\"Token with int uid:\", tokenWithUid);\n\n    return c.json({ token: tokenWithUid });\n  });\n}\n\nconst baseUrl = \"https://api.agora.io/\";\n\nfunction fetchAgora(endpoint: string, options = {}) {\n  const customerKey = Deno.env.get(\"AGORA_CUSTOMER_ID\");\n  const customerSecret = Deno.env.get(\"AGORA_CUSTOMER_SECRET\");\n  const plainCredential = customerKey + \":\" + customerSecret;\n  const encodedCredential = Buffer.from(plainCredential).toString(\"base64\");\n  const authorizationField = \"Basic \" + encodedCredential;\n\n  return fetch(baseUrl + endpoint, {\n    ...options,\n    headers: {\n      ...options.headers,\n      Authorization: authorizationField,\n    },\n  }).then((res) => res.json());\n}",[209,388],"c8f54a98924e0190db79e973de4d6220cb177b2a9e94bcef6855b376c62959d3",".vtignore",{"_32":398,"_13":396,"_82":399,"_84":-5,"_85":57,"_86":400,"_88":26,"_34":401,"_40":275,"_91":92,"_93":402,"_65":48,"_95":-5,"_96":-7,"_75":403,"_98":404},"13932e32-29c9-11f0-b43c-569c3dd06744","13932edc-29c9-11f0-b43c-569c3dd06744",635,["D",1746460404171],".git\n.DS_Store\nnode_modules\nvendor",[396],"e55433633c5c35a507787e68791fddb107de2ba5cf4ef8a87e36e0e4abd7e61b",".vscode/tasks.json",{"_32":407,"_13":408,"_82":409,"_84":410,"_85":57,"_86":411,"_88":26,"_34":412,"_40":340,"_91":92,"_93":413,"_65":48,"_95":-5,"_96":-7,"_75":414,"_98":415},"d2b3d8b6-2ece-11f0-90f2-569c3dd06744","tasks.json","139942c2-29c9-11f0-bdb3-569c3dd06744","137b3f0c-29c9-11f0-b8d4-569c3dd06744",661,["D",1747012628150],"{\n  \"version\": \"2.0.0\",\n  \"tasks\": [\n    {\n      \"label\": \"vt push\",\n      \"type\": \"shell\",\n      \"command\": \"vt push\",\n      \"group\": {\n        \"kind\": \"build\",\n        \"isDefault\": true\n      },\n    },\n    {\n      \"label\": \"vt watch\",\n      \"type\": \"shell\",\n      \"command\": \"vt watch\",\n    },\n    {\n      \"label\": \"vt pull\",\n      \"type\": \"shell\",\n      \"command\": \"vt pull\",\n    },\n    {\n      \"label\": \"vt status\",\n      \"type\": \"shell\",\n      \"command\": \"vt status\",\n    },\n    {\n      \"label\": \"vt browse\",\n      \"type\": \"shell\",\n      \"command\": \"vt browse\",\n    },\n  ]\n}\n",[416,408],"010f8ce1612ebedd9b67bba42b120123b9ddbc47156409f76cc01585ab82bdad",".vscode",{"_32":418,"_13":416,"_82":410,"_84":-5,"_85":57,"_86":419,"_88":26,"_34":420,"_40":275,"_91":307,"_93":-5,"_65":48,"_95":-5,"_96":-7,"_75":421,"_98":-5},"137b3e3a-29c9-11f0-b8d4-569c3dd06744",633,["D",1746460404042],[416],["D",1743812646130],"legacyEnvVars","httpPrivacy","description","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,"_458":454},"org",{"_11":12,"_452":-5,"_453":454,"_427":428,"_455":456,"_457":48},"branch","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yanFDd29JUGxvVEl1YVVlcHJiV2VYMUxFWjkifQ","tier","free","canRestrictVals","profileImageUrl","","adoptOrgId",{"_32":58,"_13":14,"_34":613,"_46":-5,"_423":48,"_49":50,"_424":50,"_425":-5,"_426":-5,"_427":428,"_429":347,"_430":26,"_431":-5,"_432":115,"_433":275,"_52":53,"_434":-5,"_435":-5,"_436":-5,"_437":-5,"_438":439,"_440":439,"_441":442,"_443":442,"_444":442,"_445":439,"_446":439,"_447":614,"_449":615,"_451":616,"_47":48},"tree",[525,527,536,548,549,550,551],"files",[525,526,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,542,543,544,545,546,547,548,549,550,551],"counts",{"_514":275,"_515":340,"_516":142,"_517":518,"_519":520},"contents",[487,488,489,490,491,492,493],"upstreamProject",{"_32":39,"_13":55,"_425":485,"_426":-5,"_49":50,"_447":486},"upstreamBranch",{"_32":33,"_34":483,"_36":484,"_13":16,"_38":39,"_40":41,"_42":-5,"_43":-5,"_44":45,"_46":-5,"_47":48,"_49":50,"_51":12,"_52":53,"_54":55},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{"_347":482},"spaces.0xmoe.com",["D",1742482886202],["D",1765906750880],"Hono + React + Tailwind + Farcaster Mini App Starter Project",{"_11":12,"_458":454},{"_32":418,"_13":416,"_82":410,"_84":-5,"_85":57,"_86":419,"_88":26,"_34":512,"_40":275,"_91":307,"_93":-5,"_65":48,"_95":-5,"_75":513},{"_32":509,"_13":209,"_82":202,"_84":-5,"_85":57,"_86":142,"_88":26,"_34":510,"_40":275,"_91":307,"_93":-5,"_65":48,"_95":-5,"_75":511},{"_32":506,"_13":122,"_82":139,"_84":-5,"_85":57,"_86":142,"_88":26,"_34":507,"_40":275,"_91":307,"_93":-5,"_65":48,"_95":-5,"_75":508},{"_32":398,"_13":396,"_82":399,"_84":-5,"_85":57,"_86":400,"_88":26,"_34":504,"_40":275,"_91":92,"_93":402,"_65":48,"_95":-5,"_75":505},{"_32":498,"_13":499,"_82":500,"_84":-5,"_85":57,"_86":142,"_88":26,"_34":501,"_40":275,"_91":92,"_93":502,"_65":48,"_95":-5,"_75":503},{"_32":320,"_13":318,"_82":321,"_84":-5,"_85":57,"_86":322,"_88":26,"_34":496,"_40":275,"_91":92,"_93":324,"_65":48,"_95":-5,"_75":497},{"_32":81,"_13":76,"_82":83,"_84":-5,"_85":57,"_86":87,"_88":26,"_34":494,"_40":90,"_91":92,"_93":94,"_65":48,"_95":-5,"_75":495},["D",1754790619624],[76],["D",1746460404177],[318],"48d08086-11b4-11f0-bdb9-569c3dd06744","README.md","cd5dd838-4629-48a1-8d57-776c63c86c46",["D",1743812646130],"# 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.",[499],["D",1746460404171],[396],"48d07e38-11b4-11f0-bdb9-569c3dd06744",["D",1743812646130],[122],"48d065d8-11b4-11f0-bdb9-569c3dd06744",["D",1743812646130],[209],["D",1746460404042],[416],"pulls","branches","forks","envVars",{"_521":523,"_524":275},"connections",{"_521":275,"_522":275},"count","unfilledCount",7,"emptyCount",{"_32":418,"_13":416,"_82":410,"_84":-5,"_85":57,"_86":419,"_88":26,"_34":420,"_40":275,"_91":307,"_93":-5,"_65":48,"_95":-5,"_96":611,"_75":612},{"_32":407,"_13":408,"_82":409,"_84":410,"_85":57,"_86":411,"_88":26,"_34":412,"_40":340,"_91":92,"_93":413,"_65":48,"_95":-5,"_96":609,"_75":610},{"_32":509,"_13":209,"_82":202,"_84":-5,"_85":57,"_86":142,"_88":26,"_34":606,"_40":275,"_91":307,"_93":-5,"_65":48,"_95":-5,"_96":607,"_75":608},{"_32":387,"_13":388,"_82":389,"_84":202,"_85":57,"_86":390,"_88":26,"_34":391,"_40":392,"_91":118,"_93":393,"_65":48,"_95":-5,"_96":604,"_75":605},{"_32":376,"_13":377,"_82":378,"_84":202,"_85":57,"_86":379,"_88":26,"_34":380,"_40":381,"_91":118,"_93":382,"_65":48,"_95":-5,"_96":602,"_75":603},{"_32":367,"_13":368,"_82":369,"_84":202,"_85":57,"_86":56,"_88":26,"_34":370,"_40":117,"_91":118,"_93":371,"_65":48,"_95":-5,"_96":600,"_75":601},{"_32":199,"_13":200,"_82":201,"_84":202,"_85":57,"_86":203,"_88":26,"_34":204,"_40":205,"_91":118,"_93":206,"_65":48,"_95":-5,"_96":598,"_75":599},{"_32":357,"_13":358,"_82":359,"_84":202,"_85":57,"_86":360,"_88":26,"_34":361,"_40":350,"_91":118,"_93":362,"_65":48,"_95":-5,"_96":596,"_75":597},{"_32":346,"_13":137,"_82":347,"_84":202,"_85":57,"_86":348,"_88":26,"_34":349,"_40":350,"_91":248,"_93":351,"_65":48,"_95":352,"_96":594,"_75":595},{"_32":337,"_13":112,"_82":338,"_84":202,"_85":57,"_86":115,"_88":26,"_34":339,"_40":340,"_91":118,"_93":341,"_65":48,"_95":-5,"_96":592,"_75":593},{"_32":329,"_13":272,"_82":330,"_84":202,"_85":57,"_86":182,"_88":26,"_34":331,"_40":275,"_91":118,"_93":332,"_65":48,"_95":-5,"_96":590,"_75":591},{"_32":506,"_13":122,"_82":139,"_84":-5,"_85":57,"_86":142,"_88":26,"_34":587,"_40":275,"_91":307,"_93":-5,"_65":48,"_95":-5,"_96":588,"_75":589},{"_32":583,"_13":167,"_82":160,"_84":139,"_85":57,"_86":142,"_88":26,"_34":584,"_40":275,"_91":307,"_93":-5,"_65":48,"_95":-5,"_96":585,"_75":586},{"_32":311,"_13":312,"_82":313,"_84":160,"_85":57,"_86":182,"_88":26,"_34":314,"_40":275,"_91":118,"_93":315,"_65":48,"_95":-5,"_96":581,"_75":582},{"_32":157,"_13":158,"_82":159,"_84":160,"_85":57,"_86":161,"_88":26,"_34":162,"_40":163,"_91":118,"_93":164,"_65":48,"_95":-5,"_96":579,"_75":580},{"_32":304,"_13":291,"_82":284,"_84":139,"_85":57,"_86":305,"_88":26,"_34":306,"_40":275,"_91":307,"_93":-5,"_65":48,"_95":-5,"_96":577,"_75":578},{"_32":294,"_13":295,"_82":296,"_84":284,"_85":57,"_86":182,"_88":26,"_34":297,"_40":298,"_91":118,"_93":299,"_65":48,"_95":-5,"_96":575,"_75":576},{"_32":281,"_13":282,"_82":283,"_84":284,"_85":57,"_86":285,"_88":26,"_34":286,"_40":287,"_91":118,"_93":288,"_65":48,"_95":-5,"_96":573,"_75":574},{"_32":569,"_13":123,"_82":114,"_84":139,"_85":57,"_86":142,"_88":26,"_34":570,"_40":275,"_91":307,"_93":-5,"_65":48,"_95":-5,"_96":571,"_75":572},{"_32":111,"_13":112,"_82":113,"_84":114,"_85":57,"_86":115,"_88":26,"_34":116,"_40":117,"_91":118,"_93":119,"_65":48,"_95":-5,"_96":567,"_75":568},{"_32":271,"_13":272,"_82":273,"_84":114,"_85":57,"_86":182,"_88":26,"_34":274,"_40":275,"_91":118,"_93":276,"_65":48,"_95":-5,"_96":565,"_75":566},{"_32":179,"_13":180,"_82":181,"_84":139,"_85":57,"_86":182,"_88":26,"_34":183,"_40":184,"_91":118,"_93":185,"_65":48,"_95":-5,"_96":563,"_75":564},{"_32":136,"_13":137,"_82":138,"_84":139,"_85":57,"_86":140,"_88":26,"_34":141,"_40":142,"_91":118,"_93":143,"_65":48,"_95":-5,"_96":561,"_75":562},{"_32":398,"_13":396,"_82":399,"_84":-5,"_85":57,"_86":400,"_88":26,"_34":401,"_40":275,"_91":92,"_93":402,"_65":48,"_95":-5,"_96":559,"_75":560},{"_32":498,"_13":499,"_82":500,"_84":-5,"_85":57,"_86":142,"_88":26,"_34":556,"_40":275,"_91":92,"_93":502,"_65":48,"_95":-5,"_96":557,"_75":558},{"_32":320,"_13":318,"_82":321,"_84":-5,"_85":57,"_86":322,"_88":26,"_34":323,"_40":275,"_91":92,"_93":324,"_65":48,"_95":-5,"_96":554,"_75":555},{"_32":81,"_13":76,"_82":83,"_84":-5,"_85":57,"_86":87,"_88":26,"_34":89,"_40":90,"_91":92,"_93":94,"_65":48,"_95":-5,"_96":552,"_75":553},[],[76],[],[318],["D",1743812646130],[],[499],[],[396],[],[122,137],[],[122,180],[],[122,123,272],[],[122,123,112],"48d07762-11b4-11f0-bdb9-569c3dd06744",["D",1743812646130],[544,545],[122,123],[],[122,291,282],[],[122,291,295],[541,542],[122,291],[],[122,167,158],[],[122,167,312],"48d07316-11b4-11f0-bdb9-569c3dd06744",["D",1743812646130],[538,539],[122,167],["D",1743812646130],[537,540,543,546,547],[122],[],[209,272],[],[209,112],[],[209,137],[],[209,358],[],[209,200],[],[209,368],[],[209,377],[],[209,388],["D",1743812646130],[528,529,530,531,532,533,534,535],[209],[],[416,408],[526],[416],["D",1743812646130],{"_11":12,"_458":454},{"_11":12,"_452":-5,"_453":454,"_427":428,"_455":456,"_457":48},{"_40":56,"_13":16,"_32":57,"_38":58,"_42":33,"_43":59,"_60":50,"_61":39,"_62":53,"_54":14,"_51":12},"ctx",{"_447":-5,"_479":650,"_651":652,"_653":654,"_655":48,"_656":48,"_657":48,"_658":26,"_659":-5,"_660":-7,"_661":-7,"_662":275,"_663":48,"_664":48,"_665":-5,"_666":48,"_667":48,"_668":48,"_669":-5},"ENV",{"_621":622,"_623":624,"_625":16,"_626":627,"_628":629,"_630":631,"_632":633,"_634":635,"_636":637,"_638":639,"_640":641,"_642":643,"_644":645,"_646":647,"_648":649},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","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>

Compare

MergeFarcasterSpaces/mainintoMiniAppStarter/main

backend/farcaster.ts+59-64

frontend/App.tsx+20-19

frontend/components/ui.tsx+123-7

frontend/index.tsx+7-2

frontend/util/neynar.ts+52-2

todo.txt+2-5

.vscode

.vscode/tasks.json+34-0

.vtignore+4-0

backend/agora.ts+67-0

backend/analytics.tsx+302-0

backend/farcaster-notifications.ts+71-0

backend/image.tsx+163-0

Hbackend/index.tsx+77-0

backend/neynar.ts+26-0

backend/supabase.ts+10-0

deno.json+40-0

frontend/components/Analytics.tsx+48-0

frontend/screens

frontend/screens/Home.tsx+130-0

frontend/screens/Space.tsx+528-0

frontend/util/supabase.ts+28-0

Hbackend/index.ts+0-58

frontend/components/Example.tsx+0-11

frontend/components/FarcasterMiniApp.tsx+0-134