[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_353":354,"_355":356},"routes/_app.x.$handle.$name",{"_100":99,"_32":45,"_108":87,"_27":109,"_13":14,"_110":-5,"_11":111,"_112":113,"_114":115,"_116":117,"_118":119,"_20":-5,"_120":121,"_122":123,"_124":49,"_125":126,"_127":25,"_128":-5,"_129":-5,"_130":131},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":49,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":57,"_58":25,"_59":-5,"_60":61,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":-5,"_69":-5,"_70":71,"_72":71,"_73":74,"_75":74,"_76":74,"_77":71,"_78":71,"_79":80,"_81":82,"_83":84,"_85":49},"version",622,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",true,"deletedHere","path","frontend/util/useQuery.ts","latestPath","fileId","42fa851e-1261-11f0-a615-569c3dd06744","name","useQuery.ts","fileType","script","content","/** @jsxImportSource https://esm.sh/react@19 */\nimport { useEffect, useState } from \"https://esm.sh/react@19\";\n\nexport const useQuery = (deps, asyncFn) => {\n const [data, setData] = useState();\n\n useEffect(() => {\n let didCancel = false;\n (async () => {\n try {\n const result = await asyncFn();\n if (!didCancel) {\n setData(result);\n }\n } catch (error) {\n // Handle errors if needed\n console.log(\"useAsyncMemo error\", \"\" + error);\n setData(null);\n }\n })();\n\n return () => {\n didCancel = true;\n };\n }, deps);\n\n return { data };\n};","createdAt",["D",1744896589616],"branchVersion","branchId","48cafb2a-11b4-11f0-bdb9-569c3dd06744","id","48c8baae-11b4-11f0-bdb9-569c3dd06744","FarcasterSpaces",["D",1743812646130],"deletedAt","legacyEnvVars",false,"privacy","public","httpPrivacy","description","imageUrl","6354d4b9-fd24-49d9-a600-cf17a1a9cf30","pinnedFileId","7d592e9d-3b16-400a-8841-13f108cf24d3","pinPreview","pinMigrated","screenshotVersion",665,"likeCount",0,"orgId","54e6f3c3-bf27-4301-a0b3-0ccc1fb75a27","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_100":99,"_107":103},"org",{"_100":99,"_101":-5,"_102":103,"_18":55,"_104":105,"_106":49},"branch",{"_13":86,"_32":87,"_43":42,"_88":44,"_89":90,"_91":92,"_93":51,"_94":95,"_96":65,"_97":45,"_98":99},"isOwned",759,"main","projectId","forkedBranchId","3219c4d4-059c-11f0-aa46-569c3dd06744","forkedBranchVersion",424,"forkedProjectPrivacy","forkedProjectId","321956b6-059c-11f0-aa46-569c3dd06744","forkedProjectOrgId","projectName","userHandle","moe","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yanFDd29JUGxvVEl1YVVlcHJiV2VYMUxFWjkifQ","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":349,"_47":-5,"_48":49,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":57,"_58":25,"_59":-5,"_60":61,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":-5,"_69":-5,"_70":71,"_72":71,"_73":74,"_75":74,"_76":74,"_77":71,"_78":71,"_79":350,"_81":351,"_83":352,"_85":49},"tree",[187,193,205,206],"files",[187,188,189,190,191,192,193,194,195,196,197,198,199,200,201,202,203,204,205,206],"counts",{"_175":63,"_176":177,"_178":160,"_179":180,"_181":182},"contents",[142,143,144,145],"upstreamProject",{"_43":95,"_32":139,"_53":140,"_54":-5,"_50":51,"_79":141},"upstreamBranch",{"_43":90,"_38":133,"_134":135,"_32":87,"_88":95,"_13":136,"_89":-5,"_91":-5,"_137":138,"_47":-5,"_85":49,"_50":51,"_98":99,"_64":65,"_97":139},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{"_57":132},"spaces.0xmoe.com",["D",1742482886202],"updatedAt",["D",1765906750880],691,"lockfileKey","1767805948915-esm.town_v_moe_MiniAppStarter@691-main","MiniAppStarter","Hono + React + Tailwind + Farcaster Mini App Starter Project",{"_100":99,"_107":103},{"_43":170,"_32":171,"_30":172,"_149":-5,"_41":42,"_40":160,"_151":25,"_38":173,"_13":63,"_34":168,"_36":-5,"_24":49,"_155":-5,"_27":174},{"_43":164,"_32":165,"_30":166,"_149":-5,"_41":42,"_40":160,"_151":25,"_38":167,"_13":63,"_34":168,"_36":-5,"_24":49,"_155":-5,"_27":169},{"_43":157,"_32":158,"_30":159,"_149":-5,"_41":42,"_40":160,"_151":25,"_38":161,"_13":63,"_34":20,"_36":162,"_24":49,"_155":-5,"_27":163},{"_43":146,"_32":147,"_30":148,"_149":-5,"_41":42,"_40":150,"_151":49,"_38":152,"_13":153,"_34":20,"_36":154,"_24":49,"_155":-5,"_27":156},"8646f9b6-1a5d-11f0-a14f-569c3dd06744","todo.txt","f296befd-5d54-45c6-8c71-1acf0913944c","parentId",614,"latest",["D",1744764943546],36,"user menu (view profile, tip)\nshow num of users when in lobby\nhandle roles (host, speaker, listener)\n\nnotification on space start\n\n\n---\ndb storage\nminting\nnotifications\n save tokens for users\n send notif daily or on demand","label",[147],"48d08086-11b4-11f0-bdb9-569c3dd06744","README.md","cd5dd838-4629-48a1-8d57-776c63c86c46",1,["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.",[158],"48d07e38-11b4-11f0-bdb9-569c3dd06744","frontend","303dd49d-5c87-40b1-886d-7ab3d274c65e",["D",1743812646130],"directory",[165],"48d065d8-11b4-11f0-bdb9-569c3dd06744","backend","553aa722-0ad6-41d4-8ec9-070545d5b66e",["D",1743812646130],[171],"pulls","branches",2,"forks","envVars",{"_183":185,"_186":63},"connections",{"_183":63,"_184":63},"count","unfilledCount",7,"emptyCount",{"_43":170,"_32":171,"_30":172,"_149":-5,"_41":42,"_40":160,"_151":25,"_38":346,"_13":63,"_34":168,"_36":-5,"_24":49,"_155":-5,"_208":347,"_27":348},{"_43":337,"_32":338,"_30":339,"_149":172,"_41":42,"_40":340,"_151":49,"_38":341,"_13":342,"_34":35,"_36":343,"_24":49,"_155":-5,"_208":344,"_27":345},{"_43":328,"_32":329,"_30":330,"_149":172,"_41":42,"_40":331,"_151":49,"_38":332,"_13":333,"_34":35,"_36":334,"_24":49,"_155":-5,"_208":335,"_27":336},{"_43":319,"_32":320,"_30":321,"_149":172,"_41":42,"_40":322,"_151":49,"_38":323,"_13":324,"_34":35,"_36":325,"_24":49,"_155":-5,"_208":326,"_27":327},{"_43":310,"_32":215,"_30":57,"_149":172,"_41":42,"_40":311,"_151":49,"_38":312,"_13":313,"_34":314,"_36":315,"_24":49,"_155":316,"_208":317,"_27":318},{"_43":303,"_32":232,"_30":304,"_149":172,"_41":42,"_40":305,"_151":49,"_38":306,"_13":160,"_34":35,"_36":307,"_24":49,"_155":-5,"_208":308,"_27":309},{"_43":164,"_32":165,"_30":166,"_149":-5,"_41":42,"_40":160,"_151":25,"_38":300,"_13":63,"_34":168,"_36":-5,"_24":49,"_155":-5,"_208":301,"_27":302},{"_43":296,"_32":279,"_30":272,"_149":166,"_41":42,"_40":160,"_151":25,"_38":297,"_13":63,"_34":168,"_36":-5,"_24":49,"_155":-5,"_208":298,"_27":299},{"_43":287,"_32":288,"_30":289,"_149":272,"_41":42,"_40":290,"_151":49,"_38":291,"_13":292,"_34":35,"_36":293,"_24":49,"_155":-5,"_208":294,"_27":295},{"_43":280,"_32":281,"_30":282,"_149":272,"_41":42,"_40":160,"_151":49,"_38":283,"_13":63,"_34":35,"_36":284,"_24":49,"_155":-5,"_208":285,"_27":286},{"_43":269,"_32":270,"_30":271,"_149":272,"_41":42,"_40":273,"_151":49,"_38":274,"_13":275,"_34":35,"_36":276,"_24":49,"_155":-5,"_208":277,"_27":278},{"_43":264,"_32":255,"_30":249,"_149":166,"_41":42,"_40":265,"_151":25,"_38":266,"_13":63,"_34":168,"_36":-5,"_24":49,"_155":-5,"_208":267,"_27":268},{"_43":256,"_32":257,"_30":258,"_149":249,"_41":42,"_40":217,"_151":49,"_38":259,"_13":260,"_34":35,"_36":261,"_24":49,"_155":-5,"_208":262,"_27":263},{"_43":246,"_32":247,"_30":248,"_149":249,"_41":42,"_40":217,"_151":49,"_38":250,"_13":251,"_34":35,"_36":252,"_24":49,"_155":-5,"_208":253,"_27":254},{"_43":242,"_32":241,"_30":234,"_149":166,"_41":42,"_40":160,"_151":25,"_38":243,"_13":63,"_34":168,"_36":-5,"_24":49,"_155":-5,"_208":244,"_27":245},{"_43":231,"_32":232,"_30":233,"_149":234,"_41":42,"_40":235,"_151":49,"_38":236,"_13":237,"_34":35,"_36":238,"_24":49,"_155":-5,"_208":239,"_27":240},{"_43":222,"_32":223,"_30":224,"_149":166,"_41":42,"_40":225,"_151":49,"_38":226,"_13":227,"_34":35,"_36":228,"_24":49,"_155":-5,"_208":229,"_27":230},{"_43":214,"_32":215,"_30":216,"_149":166,"_41":42,"_40":217,"_151":25,"_38":218,"_13":160,"_34":35,"_36":219,"_24":49,"_155":-5,"_208":220,"_27":221},{"_43":157,"_32":158,"_30":159,"_149":-5,"_41":42,"_40":160,"_151":25,"_38":211,"_13":63,"_34":20,"_36":162,"_24":49,"_155":-5,"_208":212,"_27":213},{"_43":146,"_32":147,"_30":148,"_149":-5,"_41":42,"_40":150,"_151":49,"_38":207,"_13":153,"_34":20,"_36":154,"_24":49,"_155":-5,"_208":209,"_27":210},["D",1744764943546],"children",[],[147],["D",1743812646130],[],[158],"a72b9a78-1b8f-11f0-b006-569c3dd06744","index.tsx","55dbf137-b487-455e-9653-d686e787f656",620,["D",1744896424726],"/** @jsxImportSource https://esm.sh/react@19 */\nimport { QueryClient, QueryClientProvider } from \"https://esm.sh/@tanstack/react-query@5\";\nimport { createRoot } from \"https://esm.sh/react-dom@19/client\";\nimport { BrowserRouter } from \"https://esm.sh/react-router@7\";\n\nimport { App } from \"./App.tsx\";\n\nconst queryClient = new QueryClient();\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render(\n \n \n \n \n ,\n);",[],[165,215],"050b54bc-1b90-11f0-88f0-569c3dd06744","App.tsx","05536b6d-e7a8-485f-a1f5-9e291da4c16a",621,["D",1744896582221],21,"/** @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 { Home } from \"./screens/Home.tsx\";\nimport { Space } from \"./screens/Space.tsx\";\n\nexport function App() {\n const [context, setContext] = useState();\n useEffect(() => {\n fcsdk.actions.ready();\n fcsdk.context.then(setContext);\n }, []);\n\n return (\n

\n \n } />\n } />\n } />\n \n

\n );\n}\n\nfunction About() {\n return

About page

;\n}",[],[165,223],"b00f8aa2-1b8d-11f0-9a93-569c3dd06744","neynar.ts","93dc8e97-7d8f-44a7-9867-8601eaaaba3f","73f8c066-ac54-4c37-a806-38e2cbad731f",619,["D",1744895580650],3,"const baseUrl = \"/neynar-proxy?path=\";\n// const baseUrl = \"https://api.neynar.com/v2/farcaster/\";\n\nexport async function fetchNeynarGet(path: string) {\n const res = await fetch(baseUrl + encodeURIComponent(path), {\n method: \"GET\",\n headers: {\n \"Content-Type\": \"application/json\",\n \"x-neynar-experimental\": \"true\",\n \"x-api-key\": \"NEYNAR_API_DOCS\",\n },\n });\n const json = await res.json();\n return json;\n}\n\nexport async function fetchNeynarGetPages(path: string, pages: number, dataKey: string) {\n let data: any = [];\n let cursor = \"\";\n let pagesLeft = pages;\n while (true) {\n const res = await fetchNeynarGet(`${path}&cursor=${cursor}`);\n data = [...data, ...res[dataKey]];\n cursor = res?.next?.cursor;\n pagesLeft--;\n if (!cursor || pagesLeft <= 0) {\n break;\n }\n }\n return {\n [dataKey]: data,\n };\n}\n\n//////////\n\nexport function fetchUser(username: string) {\n return fetchNeynarGet(`user/by_username?username=${username}`).then(r => r.user);\n}\nexport function fetchUsersById(fids: string) {\n return fetchNeynarGet(`user/bulk?fids=${fids}`).then(r => r.users);\n}\n\nexport function fetchUserFeed(fid: number) {\n return fetchNeynarGet(\n `feed?feed_type=filter&filter_type=fids&fids=${fid}&with_recasts=false&with_replies=false&limit=100&cursor=`,\n ).then(r => r.casts);\n}\n\nexport function fetchChannel(channelId: string) {\n return fetchNeynarGet(`channel?id=${channelId}`).then(r => r.channel);\n}\n\nexport function fetchChannelFeed(channelId: string) {\n return fetchNeynarGet(\n `feed/channels?channel_ids=${channelId}&with_recasts=false&limit=100`,\n ).then(r => r.casts);\n}\n\nexport function fetchChannelsFeed(channelIds: array) {\n return fetchNeynarGet(\n `feed/channels?channel_ids=${channelIds.join(\",\")}&with_recasts=false&limit=100`,\n ).then(r => r.casts);\n}",[],[165,241,232],"util","48d07762-11b4-11f0-bdb9-569c3dd06744",["D",1743812646130],[202],[165,241],"a72bab08-1b8f-11f0-b006-569c3dd06744","Space.tsx","863114d4-1283-11f0-95d3-569c3dd06744","7e30ab74-1282-11f0-9065-569c3dd06744",["D",1744896424726],146,"/** @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 } from \"https://esm.sh/lucide-react\";\nimport { NavLink, Route, Routes, useNavigate, useParams } from \"https://esm.sh/react-router@7\";\nimport { useEffect, useRef, useState } from \"https://esm.sh/react@19\";\n\nimport { Button, Input, Section, ShareButton } from \"../components/ui.tsx\";\nimport { fetchUsersById } from \"../util/neynar.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

\n \n \n \n

\n );\n}\n\nconst Basics = () => {\n const [context, setContext] = useState();\n useEffect(() => {\n fcsdk.context.then(setContext);\n }, []);\n\n const { name } = useParams();\n const [calling, setCalling] = useState(false);\n const isConnected = useIsConnected();\n const [token, setToken] = useState(\"\");\n const uid = context?.user?.fid || 0;\n const channel = name;\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${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 <>\n \n\n

\n {calling\n ? \n : }\n

\n\n

Share this space with friends

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

\n \n );\n};\n\nfunction Lobby({ channel, uid, setCalling, setToken }: any) {\n // console.log(\"Lobby\", channel);\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

\n \n

\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 [cameraOn, setCamera] = useState(false);\n const { localMicrophoneTrack } = useLocalMicrophoneTrack(micOn);\n // const { localCameraTrack } = useLocalCameraTrack(cameraOn);\n usePublish([localMicrophoneTrack]);\n\n const remoteUsers = useRemoteUsers();\n\n const [activeSpeakerUid, setActiveSpeakerUid] = useState();\n useEffect(() => {\n if (isConnected) {\n client.enableAudioVolumeIndicator();\n client.on(\"volume-indicator\", volumes => {\n if (!volumes || volumes.length === 0) return;\n const topSpeaker = volumes?.reduce((prev, current) => prev.level > current.level ? prev : current);\n // console.log(\"volumes\", volumes, topSpeaker);\n if (topSpeaker?.level > 40) setActiveSpeakerUid(topSpeaker.uid);\n else setActiveSpeakerUid(undefined);\n });\n }\n }, [isConnected]);\n\n return (\n <>\n

\n \n \n \n \n {remoteUsers.map((user) => (\n \n \n \n \n ))}\n

\n\n {isConnected && (\n

\n \n

\n )}\n \n );\n}\n\nfunction User({ uid, muted, speaking, ...props }: any) {\n const { data: user } = useQuery({\n queryKey: [\"user\", uid],\n queryFn: () => getUserByUid(uid),\n staleTime: 1000 * 60 * 60 * 1,\n });\n // console.log(\"User\", uid, user);\n\n const image = user?.pfp_url\n || \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAA1JREFUGFdjmD59ugIABXQB5tNl2LwAAAAASUVORK5CYII=\";\n\n const goToProfile = () => {\n fcsdk?.actions?.viewProfile({ fid: uid }).catch(console.error);\n };\n\n return (\n

\n goToProfile()}\n />\n {muted && }\n {speaking && }\n

{user?.username || uid}

\n {props.children}\n

\n );\n}\n\nfunction Indicator({ Icon, color }: any) {\n return (\n \n \n \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 SpaceHeader({ channel }: any) {\n const navigate = useNavigate();\n\n const [context, setContext] = useState();\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

navigate(\"/\")}>\n \n

Spaces

{channel}

\n {false && }\n

\n );\n}",[],[165,255,247],"screens","a72ba1c6-1b8f-11f0-b006-569c3dd06744","Home.tsx","82e1f6d2-1282-11f0-8a52-569c3dd06744",["D",1744896424726],117,"/** @jsxImportSource https://esm.sh/react@19 */\nimport fcsdk from \"https://esm.sh/@farcaster/frame-sdk\";\nimport { useQuery } from \"https://esm.sh/@tanstack/react-query@5\";\nimport { LoaderCircle, Mic, MicOff } from \"https://esm.sh/lucide-react\";\nimport { NavLink, Route, Routes, useNavigate, useParams } from \"https://esm.sh/react-router@7\";\nimport { useEffect, useRef, useState } from \"https://esm.sh/react@19\";\n\nimport { Button, Input, Section, ShareButton } from \"../components/ui.tsx\";\nimport { fetchUsersById } from \"../util/neynar.ts\";\n\nexport function Home() {\n const [context, setContext] = useState();\n useEffect(() => {\n fcsdk.context.then(setContext);\n }, []);\n\n const onShare = () => {\n if (!context) return;\n const text = `Check out Spaces mini app by @moe!\\n`;\n fcsdk?.actions?.composeCast?.({ text, embeds: [window.location.href] });\n };\n\n return (\n

\n \n

Spaces

\n {context && }\n

\n\n \n

\n \n

\n );\n}\n\nfunction Spaces() {\n const queryFn = () => fetch(`/api/channels`).then(r => r.json()).then(r => r?.data?.channels);\n const { data: spaces } = useQuery({ queryKey: [\"spaces\"], queryFn });\n console.log(spaces);\n\n if (!spaces) {\n return (\n

\n \n

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

No live spaces

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

\n {spaces?.map((space: any) => )}\n

\n );\n}\n\nfunction Space({ space }: any) {\n const navigate = useNavigate();\n\n return (\n

{space.channel_name}

{space.user_count} user{space.user_count == 1 ? \"\" : \"s\"}

\n \n

\n );\n}\n\nfunction CreateForm({}) {\n const navigate = useNavigate();\n const [channel, setChannel] = useState(\"\");\n\n return (\n

\n setChannel(e.target.value)}\n placeholder=\"Space Title\"\n autoCapitalize=\"on\"\n autoCorrect=\"on\"\n type=\"text\"\n value={channel}\n />\n navigate(`/space/${encodeURIComponent(channel)}`)}\n >\n Create Space\n \n

\n );\n}",[],[165,255,257],"7e30aac0-1282-11f0-9065-569c3dd06744",225,["D",1743901212057],[199,200],[165,255],"5ab14362-1592-11f0-b8d3-569c3dd06744","ui.tsx","8c0642ac-3b57-4e02-95ea-ed4cb09f37ff","63cae51c-afe6-4c60-ba46-25640fcfccca",571,["D",1744237877933],20,"/** @jsxImportSource https://esm.sh/react@19 */\nimport { ArrowLeft, Share } from \"https://esm.sh/lucide-react\";\nimport { useEffect, useState } from \"https://esm.sh/react@19\";\n\nexport function Section({ children, ...props }: any) {\n const sectionClass = `p-5 rounded-3xl bg-neutral-400/15 ${props.className || \"\"}`;\n return

{children}

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

;\n};\n\nexport const Select = ({ ...props }) => {\n  const className = `\n\tborder-0 bg-inherit text-inherit rounded-xl shadow-sm px-3 py-2\n\tring-1 ring-inset ring-neutral-400 dark:ring-neutral-600 \n\tfocus:ring-2 focus:ring-inset focus:ring-neutral-600 dark:focus:ring-neutral-300\n\t${props.className || \"\"}\n\t`;\n\n  return <select {...props} className={className} />;\n};\n\nexport const Checkbox = ({ label, ...props }) => {\n  const className = `\n\th-4 w-4 rounded-xl bg-inherit text-neutral-700\n\tborder border-neutral-400 dark:border-neutral-600  focus:ring-neutral-700 dark:focus:ring-neutral-300 \n\txfocus:ring-0 xfocus:outline-red-500 focus:ring-offset-transparent focus:ring-offset-0\n\t${props.className || \"\"}\n\t`;\n\n  return (\n    <div className=\"relative flex gap-x-2\">\n      <div className=\"flex  items-center\">\n        <input type=\"checkbox\" {...props} className={className} />\n      </div>\n      <div className=\"text-sm flex  items-center\">\n        <label htmlFor={props.id} className={props?.checked ? \"font-medium\" : \"opacity-50\"}>\n          {label}\n        </label>\n      </div>\n    </div>\n  );\n};\n\nexport const Button = ({ ...props }) => {\n  let sizeStyles = \"text-md px-3 py-1\";\n  if (props.sm || props.size == \"sm\") sizeStyles = \"text-sm px-2 py-1\";\n  if (props.lg || props.size == \"lg\") sizeStyles = \"text-lg px-4 py-2\";\n  let variantStyles =\n    \"bg-neutral-900 border border-transparent dark:bg-neutral-100 text-neutral-100 dark:text-neutral-900 \";\n  if (props.variant === \"outline\") {\n    variantStyles =\n      \"bg-transparent border border-neutral-400 dark:border-neutral-600 text-neutral-900 dark:text-neutral-100\";\n  }\n\n  const className = `\n\tflex flex-row justify-center items-center   rounded-xl font-semibold \n\t${variantStyles}\n\tshadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600  \n\topacity-95 hover:opacity-100 disabled:opacity-50\n\t${sizeStyles}\n\t${props.className || \"\"}\n\t`;\n\n  if (props.href && !props.disabled) return <a {...props} className={className} />;\n  return <button {...props} className={className} />;\n};\n\n// export function Input(props: any) {\n//   const inputClass = \"dark:bg-white dark:text-black bg-black text-white rounded-md px-3 py-1 \";\n//   return <input class={inputClass} {...props} />;\n// }\n\n// export function Button(props: any) {\n//   const buttonClass = \"dark:bg-white dark:text-black bg-black text-white rounded-md px-3 py-1 \";\n//   return <button class={buttonClass} {...props} />;\n// }\n\nexport function MonoButton(props: any) {\n  return (\n    <Button {...props}>\n      <div class=\"font-mono text-sm\">{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}",[],[165,279,270],"components","48d06a10-11b4-11f0-bdb9-569c3dd06744","FarcasterMiniApp.tsx","e9dd3764-01f6-4305-90d0-397fb39c1728",["D",1743812646130],"/** @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}",[],[165,279,281],"15477988-1284-11f0-a2fa-569c3dd06744","Example.tsx","46589901-2d99-4166-b0ca-8888690eecde",248,["D",1743901895033],182,"/** @jsxImportSource https://esm.sh/react@19 */\nimport { Mic, MicOff } from \"https://esm.sh/lucide-react\";\nimport { useEffect, useRef, useState } from \"https://esm.sh/react@19\";\n\nimport { fetchUsersById } from \"../util/neynar.ts\";\nimport { useQuery } from \"../util/useQuery.ts\";\nimport { Button, Input } from \"./ui.tsx\";\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 Example() {\n  console.log(\"hello world\");\n\n  return (\n    <div class=\"m-5 mb-8\">\n      {/* <div class=\"opacity-50\">Hono + React + Tailwind + Farcaster Mini App Starter Project on Val Town</div> */}\n\n      <AgoraRTCProvider client={client}>\n        <Basics />\n      </AgoraRTCProvider>\n    </div>\n  );\n}\n\nconst Basics = () => {\n  const [calling, setCalling] = useState(false);\n  const isConnected = useIsConnected();\n  const [channel, setChannel] = useState(\"test\");\n\n  return (\n    <>\n      <div className=\"room\">\n        {calling\n          ? <Room channel={channel} calling={calling} setCalling={setCalling} />\n          : <JoinForm channel={channel} setChannel={setChannel} calling={calling} setCalling={setCalling} />}\n      </div>\n    </>\n  );\n};\n\nfunction JoinForm({ channel, setChannel, calling, setCalling }) {\n  console.log(\"JoinForm\", channel, setChannel, calling, setCalling);\n\n  return (\n    <>\n      <h1 class=\"text-4xl font-semibold mb-8\">Farcaster Spaces</h1>\n      <div className=\"flex flex-row flex-wrap gap-4\">\n        {\n          /* <Input\n        onChange={e => setChannel(e.target.value)}\n        placeholder=\"<Your channel Name>\"\n        value={channel}\n      /> */\n        }\n        <Button\n          xclassName={`join-channel ${!channel ? \"disabled\" : \"\"}`}\n          disabled={!channel}\n          onClick={() => setCalling(true)}\n        >\n          <span>Join Space</span>\n        </Button>\n      </div>\n    </>\n  );\n}\n\nfunction Room({ channel, calling, setCalling }) {\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  const [token, setToken] = useState(\n    \"007eJxTYNjvOWmTjf8E1v9Ni2M4X98yj+k75SR6WZ/L+7XZOpPW9+sVGAxTTcxSU81TUhItTUzMzZMtjI3NjS2TDdOAyCLF2GKl9cf0hkBGBvniuQyMUAjiszCUpBaXMDAAAEYKH2k=\",\n  );\n\n  const { data: localUserId } = useJoin({ appid: appId, channel, token, uid: undefined }, calling);\n\n  const [micOn, setMic] = useState(true);\n  const [cameraOn, setCamera] = useState(false);\n  const { localMicrophoneTrack } = useLocalMicrophoneTrack(micOn);\n  // const { localCameraTrack } = useLocalCameraTrack(cameraOn);\n  usePublish([localMicrophoneTrack]);\n\n  const remoteUsers = useRemoteUsers();\n\n  return (\n    <>\n      <div className=\"room\">\n        <h1 class=\"text-4xl font-semibold mb-8\">{channel}</h1>\n        <div className=\"flex flex-row flex-wrap gap-2\">\n          <User uid={localUserId}>\n            <LocalUser\n              audioTrack={localMicrophoneTrack}\n              cameraOn={cameraOn}\n              micOn={micOn}\n              playAudio={false}\n              // videoTrack={localCameraTrack}\n              // cover=\"https://www.agora.io/en/wp-content/uploads/2022/10/3d-spatial-audio-icon.svg\"\n            >\n            </LocalUser>\n          </User>\n          {remoteUsers.map((user) => (\n            <User uid={user.uid} key={user.uid}>\n              <RemoteUser\n                // cover=\"https://www.agora.io/en/wp-content/uploads/2022/10/3d-spatial-audio-icon.svg\"\n                user={user}\n              >\n              </RemoteUser>\n            </User>\n          ))}\n        </div>\n      </div>\n\n      {isConnected && (\n        <div className=\"control flex flex-row flex-wrap gap-4 mt-10\">\n          <div className=\"left-control flex flex-row flex-wrap gap-4\">\n            <Button onClick={() => setMic(a => !a)}>\n              {micOn ? <Mic /> : <MicOff />}\n            </Button>\n            {\n              /* <Button onClick={() => setCamera(a => !a)}>\n              camera {!cameraOn ? \"Off\" : \"On\"}\n            </Button> */\n            }\n          </div>\n          <Button\n            className={`btn btn-phone ${calling ? \"btn-phone-active\" : \"\"}`}\n            onClick={() => setCalling(a => !a)}\n          >\n            {calling ? \"End\" : \"Call\"}\n          </Button>\n        </div>\n      )}\n    </>\n  );\n}\n\nfunction User({ uid, ...props }) {\n  const { data: user } = useQuery([\"user\", uid], () => getUserByUid(uid));\n  console.log(\"User\", uid, user);\n\n  const image = user?.pfp_url\n    || \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAA1JREFUGFdjqKioKAcABLQB4KQOu/4AAAAASUVORK5CYII=\";\n\n  return (\n    <div className=\"overflow-hidden flex flex-col gap-1 items-center w-20\">\n      <img class=\"rounded-full w-14 h-14 object-cover bg-gray-500/10\" src={image} />\n      <div className=\"font-semibold max-w-full \">{user?.username || uid}</div>\n      {props.children}\n    </div>\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}",[],[165,279,288],"48d07316-11b4-11f0-bdb9-569c3dd06744",["D",1743812646130],[195,196,197],[165,279],["D",1743812646130],[194,198,201,203,204],[165],"59055da4-1b8d-11f0-afa0-569c3dd06744","575ebc70-1b8d-11f0-8a63-569c3dd06744",616,["D",1744895434624],"const NEYNAR_API_KEY = Deno.env.get(\"NEYNAR_API_KEY\") || \"NEYNAR_API_DOCS\";\nconst headers = {\n  \"Content-Type\": \"application/json\",\n  \"x-api-key\": NEYNAR_API_KEY,\n};\n\nexport const fetchGet = async (path: string) => {\n  return await fetch(\"https://api.neynar.com/v2/farcaster/\" + path, {\n    method: \"GET\",\n    headers: headers,\n  });\n};\n\nexport const fetchPost = async (path: string, body: any) => {\n  return await fetch(\"https://api.neynar.com/v2/farcaster/\" + path, {\n    method: \"POST\",\n    headers: headers,\n    body: JSON.stringify(body),\n  });\n};",[],[171,232],"748eb94e-1b8d-11f0-97d3-569c3dd06744",618,["D",1744895480819],18,"http","/** @jsxImportSource npm:hono/jsx */\nimport { serveFile } from \"https://esm.town/v/std/utils@64-main/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { handleAgoraEndpoints } from \"./agora.ts\";\nimport { embedMetadata, handleFarcasterEndpoints, name } from \"./farcaster.ts\";\nimport { handleImageEndpoints } from \"./image.tsx\";\nimport { fetchGet as fetchNeynarGet } from \"./neynar.ts\";\n\nconst app = new Hono();\n\nhandleImageEndpoints(app);\nhandleFarcasterEndpoints(app);\nhandleAgoraEndpoints(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\napp.get(\"/neynar-proxy\", async c => {\n  const url = new URL(c.req.url);\n  const path = url.searchParams.get(\"path\");\n  const response = await fetchNeynarGet(path).then(r => r.json());\n  return c.json(response);\n});\n\napp.get(\"/frontend/**/*\", c => serveFile(c.req.path, import.meta.url));\n\napp.get(\"/\", async c => {\n  const url = new URL(c.req.url);\n  const path = c.req.url?.replace(url.origin, \"\");\n  return c.html(generateHtml(url.origin, path));\n});\napp.get(\"*\", async c => {\n  const url = new URL(c.req.url);\n  const path = c.req.url?.replace(url.origin, \"\");\n  return c.html(generateHtml(url.origin, path));\n});\n\nfunction generateHtml(baseUrl: string, path: string = \"/\") {\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\"} />\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;","spaces-fc",[],[171,215],"b302cda0-1a5c-11f0-98e4-569c3dd06744","image.tsx","15d5bf76-14ab-11f0-8c91-569c3dd06744",609,["D",1744764589098],14,"/** @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\nexport function handleImageEndpoints(app: Hono) {\n  const headers = {\n    \"Content-Type\": \"image/png\",\n    \"cache-control\": \"public, max-age=3600\",\n  };\n  app.get(\"/image\", async (c) => {\n    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    return c.body(await iconImage(), 200, headers);\n  });\n}\n\nexport async function homeImage() {\n  return await ogImage(\n    <div tw=\"w-full h-full flex justify-start items-end text-[100px] bg-black text-white p-[50px]\">\n      <div tw=\"flex flex-col items-start gap-[10px]\">\n        <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  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-[40px] h-[40px] opacity-50\" src={base64Icon(Mic)} />\n          <div tw=\"flex text-[40px] tracking-[-1px] ml-[10px] opacity-50\">Space</div>\n        </div>\n\n        <div tw=\"flex text-[80px] font-semibold tracking-[-3px]\">{channel}</div>\n      </div>\n    </div>,\n  );\n}\n\nexport async function iconImage() {\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      <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(\n    body,\n    {\n      width: 945,\n      height: 630,\n      ...options,\n      fonts: await loadFonts(),\n      loadAdditionalAsset: async (code, segment) => {\n        console.log(\"loadAdditionalAsset\", code, segment);\n        if (code === \"emoji\") {\n          const unicode = segment.codePointAt(0).toString(16).toUpperCase();\n          return `data:image/svg+xml;base64,` + btoa(await loadEmoji(unicode));\n        }\n        return \"\";\n      },\n    },\n  );\n  return await render(svg);\n}\n\nconst loadFonts = async () => {\n  const fontsConfig = [\n    { name: \"Inter\", weight: 400, fontFile: \"Inter-Regular.otf\" },\n    // { name: \"Inter\", weight: 500, fontFile: \"Inter-Medium.otf\" },\n    { name: \"Inter\", weight: 600, fontFile: \"Inter-SemiBold.otf\" },\n    // { name: \"Inter\", weight: 700, fontFile: \"Inter-Bold.otf\" },\n  ];\n  const fontPromises = fontsConfig.map(async (font) => {\n    const fontUrl = \"https://cdn.jsdelivr.net/npm/@tamagui/font-inter@1.108.3/otf/\" + font.fontFile;\n    const fontArrayBuf = await fetch(fontUrl).then((res) => res.arrayBuffer());\n    return { name: font.name, data: fontArrayBuf, weight: font.weight };\n  });\n  const fonts: any = await Promise.all(fontPromises);\n\n  return fonts;\n};\n\nconst loadEmoji = (code) => {\n  // const api = `https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/svg/${code.toLowerCase()}.svg`\n  const api = `https://cdn.jsdelivr.net/gh/shuding/fluentui-emoji-unicode/assets/${code.toLowerCase()}_color.svg`;\n  return fetch(api).then((r) => r.text());\n};\n\nconst base64Icon = (svg: any) => {\n  if (!svg) return undefined;\n  svg = svg.replace(\"stroke=\\\"currentColor\\\"\", \"stroke=\\\"white\\\"\");\n  const base64 = Buffer.from(svg).toString(\"base64\");\n  // console.log('getIconDataUrl', name, svg, base64)\n  return `data:image/svg+xml;base64,${base64}`;\n};",[],[171,320],"ea883aa8-1a5c-11f0-9492-569c3dd06744","farcaster.ts","8314afd0-f83d-464f-bc30-1a17aae79051",613,["D",1744764682248],11,"import { Hono } from \"npm:hono\";\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\",\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\",\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}",[],[171,329],"083d3236-128a-11f0-91f9-569c3dd06744","agora.ts","60af3dc2-1232-11f0-919c-569c3dd06744",287,["D",1743904450141],46,"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\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}",[],[171,338],["D",1743812646130],[188,189,190,191,192],[171],["D",1743812646130],{"_100":99,"_107":103},{"_100":99,"_101":-5,"_102":103,"_18":55,"_104":105,"_106":49},{"_13":86,"_32":87,"_43":42,"_88":44,"_89":90,"_91":92,"_93":51,"_94":95,"_96":65,"_97":45,"_98":99},"ctx",{"_79":-5,"_129":386,"_387":388,"_389":390,"_391":49,"_392":49,"_393":49,"_394":25,"_395":-5,"_396":-7,"_397":-7,"_398":63,"_399":49,"_400":49,"_401":-5,"_402":49,"_403":49,"_404":49,"_405":-5},"ENV",{"_357":358,"_359":360,"_361":87,"_362":363,"_364":365,"_366":367,"_368":369,"_370":371,"_372":373,"_374":375,"_376":377,"_378":379,"_380":381,"_382":383,"_384":385},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","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>

Diff · v622