[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_392":393,"_394":395},"routes/_app.x.$handle.$name",{"_101":100,"_32":46,"_109":88,"_27":110,"_13":14,"_111":-5,"_11":112,"_113":114,"_115":116,"_117":118,"_119":120,"_20":-5,"_121":122,"_123":124,"_125":25,"_126":127,"_128":59,"_129":-5,"_130":-5,"_131":132},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_44":45,"_32":46,"_39":47,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":57,"_58":59,"_60":-5,"_61":62,"_63":64,"_65":66,"_67":-5,"_68":-5,"_69":-5,"_70":-5,"_71":72,"_73":72,"_74":75,"_76":75,"_77":75,"_78":72,"_79":72,"_80":81,"_82":83,"_84":85,"_86":25},"version",696,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":38,"_39":40,"_41":14,"_42":43,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",false,"deletedHere","path","frontend/screens/Space.tsx","latestPath","fileId","863114d4-1283-11f0-95d3-569c3dd06744","name","Space.tsx","fileType","script","content","/** @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/db.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 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

\n \n

\n )\n }\n\n if (!space) {\n return (\n

Space not found

\n )\n }\n\n return (\n <>\n \n\n

\n {calling ? (\n \n ) : (\n \n )}\n

\n\n

Share this space with friends

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

\n \n )\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}\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

\n {creator && (\n

Hosted by

\n fcsdk.actions.viewProfile({ fid: creator.fid })}\n />\n

{creator?.username}

\n )}\n {agoraChannel?.user_count > 1 && (\n

{agoraChannel?.user_count} users

\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 { 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 return (\n <>\n {isConnected && (\n

\n {localUserIsSpeaker && (\n

\n \n

\n )}\n \n \n \n

\n )}\n\n

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

\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 // const walletAddresses: any = await fcsdk.wallet?.ethProvider?.request({ method: 'eth_requestAccounts' })\n // if (!walletAddresses || walletAddresses?.length === 0) return\n // console.log('walletAddresses', walletAddresses, user)\n\n // await fcsdk.wallet?.ethProvider?.request({\n // method: 'wallet_switchEthereumChain',\n // params: [{ chainId: '0x2105' }],\n // })\n // const USDC_BASE_ADDRESS = '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913'\n // const recipient = user?.verified_addresses?.primary?.eth_address\n // const amount = (0.25 * 1e6).toString(16) // 0.1 USDC, 6 decimals\n\n // const data =\n // '0xa9059cbb' + // transfer(address,uint256)\n // recipient.replace('0x', '').padStart(64, '0') +\n // amount.padStart(64, '0')\n\n // fcsdk.wallet?.ethProvider?.request({\n // method: 'eth_sendTransaction',\n // params: [\n // {\n // from: walletAddresses[0],\n // to: USDC_BASE_ADDRESS,\n // value: '0x0',\n // data: data,\n // },\n // ],\n // })\n\n // await fcsdk.wallet?.ethProvider?.request({\n // method: 'eth_sendTransaction',\n // params: [\n // {\n // from: walletAddresses[0],\n // to: user?.verified_addresses?.primary?.eth_address,\n // value: '0x' + (100000000000000).toString(16),\n // },\n // ],\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

\n setShowMenu(true)}\n />\n {muted && }\n {speaking && }\n {userEmoji && }\n

{user?.username || uid}

\n {userIsHost ? 'Host' : userIsSpeaker ? 'Speaker' : ''}\n

{props.children}

\n\n \n

\n setShowMenu(true)}\n />\n

{user?.username || uid}

\n {toggleHost && !userIsCreator && (\n <>\n \n \n )}\n {toggleSpeaker && !userIsHost && (\n <>\n \n \n )}\n \n {user && (\n \n )}\n \n

\n )\n}\n\nfunction Indicator({ Icon, color }: any) {\n return (\n \n \n \n )\n}\nfunction Emoji({ emoji, color }: any) {\n return (\n

{emoji}

\n \n \n \n

\n \n

\n )\n }\n\n if (!space) {\n return (\n

Space not found

\n )\n }\n\n return (\n <>\n \n\n

\n {calling ? (\n \n ) : (\n \n )}\n

\n\n

Share this space with friends

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

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

Spaces

{channel}

\n {/* {false && } */}\n

\n {creator && (\n

Hosted by

\n fcsdk.actions.viewProfile({ fid: creator.fid })}\n />\n

{creator?.username}

\n )}\n {agoraChannel?.user_count > 1 && (\n

{agoraChannel?.user_count} users

\n )}\n \n

\n {localUserIsSpeaker && (\n

\n \n

\n )}\n \n \n \n

\n )}\n\n

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

\n setShowMenu(true)}\n />\n {muted && }\n {speaking && }\n {userEmoji && }\n

{user?.username || uid}

\n {userIsHost ? 'Host' : userIsSpeaker ? 'Speaker' : ''}\n

{props.children}

\n\n \n

\n setShowMenu(true)}\n />\n

{user?.username || uid}

\n {toggleHost && !userIsCreator && (\n <>\n \n \n )}\n {toggleSpeaker && !userIsHost && (\n <>\n \n \n )}\n \n {user && (\n \n )}\n \n

\n )\n}\n\nfunction Indicator({ Icon, color }: any) {\n return (\n \n \n \n )\n}\nfunction Emoji({ emoji, color }: any) {\n return (\n

{emoji}

\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()\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()\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([])\n const channelRef = useRef(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","createdAt",["D",1749132182403],"branchVersion","branchId","48cafb2a-11b4-11f0-bdb9-569c3dd06744","id","48c8baae-11b4-11f0-bdb9-569c3dd06744","FarcasterSpaces",["D",1743812646130],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","6354d4b9-fd24-49d9-a600-cf17a1a9cf30","pinnedFileId","7d592e9d-3b16-400a-8841-13f108cf24d3","pinPreview",true,"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",{"_101":100,"_108":104},"org",{"_101":100,"_102":-5,"_103":104,"_18":55,"_105":106,"_107":25},"branch",{"_13":87,"_32":88,"_44":43,"_89":45,"_90":91,"_92":93,"_94":51,"_95":96,"_97":66,"_98":46,"_99":100},"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",{"_44":45,"_32":46,"_39":388,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":57,"_58":59,"_60":-5,"_61":62,"_63":64,"_65":66,"_67":-5,"_68":-5,"_69":-5,"_70":-5,"_71":72,"_73":72,"_74":75,"_76":75,"_77":75,"_78":72,"_79":72,"_80":389,"_82":390,"_84":391,"_86":25},"tree",[211,213,220,231,232,233,234],"files",[211,212,213,214,215,216,217,218,219,220,221,222,223,224,225,226,227,228,229,230,231,232,233,234],"counts",{"_199":64,"_200":201,"_202":171,"_203":204,"_205":206},"contents",[143,144,145,146,147,148,149],"upstreamProject",{"_44":96,"_32":140,"_53":141,"_54":-5,"_50":51,"_80":142},"upstreamBranch",{"_44":91,"_39":134,"_135":136,"_32":88,"_89":96,"_13":137,"_90":-5,"_92":-5,"_138":139,"_48":-5,"_86":25,"_50":51,"_99":100,"_65":66,"_98":140},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{"_57":133},"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",{"_101":100,"_108":104},{"_44":193,"_32":194,"_30":195,"_153":-5,"_42":43,"_41":196,"_155":59,"_39":197,"_13":64,"_34":186,"_36":-5,"_24":25,"_159":-5,"_27":198},{"_44":188,"_32":189,"_30":190,"_153":-5,"_42":43,"_41":171,"_155":59,"_39":191,"_13":64,"_34":186,"_36":-5,"_24":25,"_159":-5,"_27":192},{"_44":182,"_32":183,"_30":184,"_153":-5,"_42":43,"_41":171,"_155":59,"_39":185,"_13":64,"_34":186,"_36":-5,"_24":25,"_159":-5,"_27":187},{"_44":175,"_32":176,"_30":177,"_153":-5,"_42":43,"_41":178,"_155":59,"_39":179,"_13":64,"_34":20,"_36":180,"_24":25,"_159":-5,"_27":181},{"_44":168,"_32":169,"_30":170,"_153":-5,"_42":43,"_41":171,"_155":59,"_39":172,"_13":64,"_34":20,"_36":173,"_24":25,"_159":-5,"_27":174},{"_44":161,"_32":162,"_30":163,"_153":-5,"_42":43,"_41":164,"_155":59,"_39":165,"_13":64,"_34":20,"_36":166,"_24":25,"_159":-5,"_27":167},{"_44":150,"_32":151,"_30":152,"_153":-5,"_42":43,"_41":154,"_155":25,"_39":156,"_13":157,"_34":20,"_36":158,"_24":25,"_159":-5,"_27":160},"e830732a-371b-11f0-8e2d-9e149126039e","todo.txt","f296befd-5d54-45c6-8c71-1acf0913944c","parentId",672,"latest",["D",1747925344717],49,"notifications to followers on space start\nschedule space\nmore emojis\n","label",[151],"13a00260-29c9-11f0-8e44-569c3dd06744","deno.json","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}",[162],"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.",[169],"13932e32-29c9-11f0-b43c-569c3dd06744",".vtignore","13932edc-29c9-11f0-b43c-569c3dd06744",635,["D",1746460404171],".git\n.DS_Store\nnode_modules\nvendor",[176],"48d07e38-11b4-11f0-bdb9-569c3dd06744","frontend","303dd49d-5c87-40b1-886d-7ab3d274c65e",["D",1743812646130],"directory",[183],"48d065d8-11b4-11f0-bdb9-569c3dd06744","backend","553aa722-0ad6-41d4-8ec9-070545d5b66e",["D",1743812646130],[189],"137b3e3a-29c9-11f0-b8d4-569c3dd06744",".vscode","137b3f0c-29c9-11f0-b8d4-569c3dd06744",633,["D",1746460404042],[194],"pulls","branches",2,"forks","envVars",{"_207":209,"_210":64},"connections",{"_207":64,"_208":64},"count","unfilledCount",7,"emptyCount",{"_44":193,"_32":194,"_30":195,"_153":-5,"_42":43,"_41":196,"_155":59,"_39":385,"_13":64,"_34":186,"_36":-5,"_24":25,"_159":-5,"_236":386,"_27":387},{"_44":377,"_32":378,"_30":379,"_153":195,"_42":43,"_41":380,"_155":59,"_39":381,"_13":201,"_34":20,"_36":382,"_24":25,"_159":-5,"_236":383,"_27":384},{"_44":188,"_32":189,"_30":190,"_153":-5,"_42":43,"_41":171,"_155":59,"_39":374,"_13":64,"_34":186,"_36":-5,"_24":25,"_159":-5,"_236":375,"_27":376},{"_44":365,"_32":366,"_30":367,"_153":190,"_42":43,"_41":368,"_155":59,"_39":369,"_13":370,"_34":35,"_36":371,"_24":25,"_159":-5,"_236":372,"_27":373},{"_44":357,"_32":358,"_30":359,"_153":190,"_42":43,"_41":360,"_155":25,"_39":361,"_13":201,"_34":35,"_36":362,"_24":25,"_159":-5,"_236":363,"_27":364},{"_44":348,"_32":349,"_30":350,"_153":190,"_42":43,"_41":351,"_155":25,"_39":352,"_13":353,"_34":35,"_36":354,"_24":25,"_159":-5,"_236":355,"_27":356},{"_44":340,"_32":341,"_30":342,"_153":190,"_42":43,"_41":343,"_155":25,"_39":344,"_13":334,"_34":35,"_36":345,"_24":25,"_159":-5,"_236":346,"_27":347},{"_44":332,"_32":249,"_30":57,"_153":190,"_42":43,"_41":62,"_155":25,"_39":333,"_13":334,"_34":335,"_36":336,"_24":25,"_159":337,"_236":338,"_27":339},{"_44":326,"_32":266,"_30":327,"_153":190,"_42":43,"_41":62,"_155":59,"_39":328,"_13":201,"_34":35,"_36":329,"_24":25,"_159":-5,"_236":330,"_27":331},{"_44":182,"_32":183,"_30":184,"_153":-5,"_42":43,"_41":171,"_155":59,"_39":323,"_13":64,"_34":186,"_36":-5,"_24":25,"_159":-5,"_236":324,"_27":325},{"_44":319,"_32":318,"_30":311,"_153":184,"_42":43,"_41":171,"_155":59,"_39":320,"_13":64,"_34":186,"_36":-5,"_24":25,"_159":-5,"_236":321,"_27":322},{"_44":308,"_32":309,"_30":310,"_153":311,"_42":43,"_41":312,"_155":59,"_39":313,"_13":314,"_34":35,"_36":315,"_24":25,"_159":-5,"_236":316,"_27":317},{"_44":303,"_32":293,"_30":288,"_153":184,"_42":43,"_41":304,"_155":59,"_39":305,"_13":64,"_34":186,"_36":-5,"_24":25,"_159":-5,"_236":306,"_27":307},{"_44":294,"_32":295,"_30":296,"_153":288,"_42":43,"_41":297,"_155":25,"_39":298,"_13":299,"_34":35,"_36":300,"_24":25,"_159":-5,"_236":301,"_27":302},{"_44":287,"_32":33,"_30":31,"_153":288,"_42":43,"_41":14,"_155":25,"_39":289,"_13":290,"_34":35,"_36":38,"_24":25,"_159":-5,"_236":291,"_27":292},{"_44":283,"_32":274,"_30":268,"_153":184,"_42":43,"_41":171,"_155":59,"_39":284,"_13":64,"_34":186,"_36":-5,"_24":25,"_159":-5,"_236":285,"_27":286},{"_44":275,"_32":276,"_30":277,"_153":268,"_42":43,"_41":278,"_155":25,"_39":279,"_13":171,"_34":35,"_36":280,"_24":25,"_159":-5,"_236":281,"_27":282},{"_44":265,"_32":266,"_30":267,"_153":268,"_42":43,"_41":62,"_155":59,"_39":269,"_13":270,"_34":35,"_36":271,"_24":25,"_159":-5,"_236":272,"_27":273},{"_44":256,"_32":257,"_30":258,"_153":184,"_42":43,"_41":259,"_155":25,"_39":260,"_13":261,"_34":35,"_36":262,"_24":25,"_159":-5,"_236":263,"_27":264},{"_44":248,"_32":249,"_30":250,"_153":184,"_42":43,"_41":251,"_155":59,"_39":252,"_13":171,"_34":35,"_36":253,"_24":25,"_159":-5,"_236":254,"_27":255},{"_44":175,"_32":176,"_30":177,"_153":-5,"_42":43,"_41":178,"_155":59,"_39":245,"_13":64,"_34":20,"_36":180,"_24":25,"_159":-5,"_236":246,"_27":247},{"_44":168,"_32":169,"_30":170,"_153":-5,"_42":43,"_41":171,"_155":59,"_39":242,"_13":64,"_34":20,"_36":173,"_24":25,"_159":-5,"_236":243,"_27":244},{"_44":161,"_32":162,"_30":163,"_153":-5,"_42":43,"_41":164,"_155":59,"_39":239,"_13":64,"_34":20,"_36":166,"_24":25,"_159":-5,"_236":240,"_27":241},{"_44":150,"_32":151,"_30":152,"_153":-5,"_42":43,"_41":154,"_155":25,"_39":235,"_13":157,"_34":20,"_36":158,"_24":25,"_159":-5,"_236":237,"_27":238},["D",1747925344717],"children",[],[151],["D",1746460404177],[],[162],["D",1743812646130],[],[169],["D",1746460404171],[],[176],"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);",[],[183,249],"46318eae-2a7a-11f0-be55-569c3dd06744","App.tsx","05536b6d-e7a8-485f-a1f5-9e291da4c16a",640,["D",1746536510029],22,"/** @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}",[],[183,257],"17ebc0d4-3040-11f0-b763-569c3dd06744","neynar.ts","93dc8e97-7d8f-44a7-9867-8601eaaaba3f","73f8c066-ac54-4c37-a806-38e2cbad731f",["D",1747171228567],4,"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: string[]) {\n return fetchNeynarGet(\n `feed/channels?channel_ids=${channelIds.join(\",\")}&with_recasts=false&limit=100`,\n ).then(r => r.casts);\n}",[],[183,274,266],"util","7dbec54e-2aa2-11f0-be73-569c3dd06744","db.ts","46316fdc-2a7a-11f0-be55-569c3dd06744",648,["D",1746553783063],"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 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",[],[183,274,276],"48d07762-11b4-11f0-bdb9-569c3dd06744",["D",1743812646130],[227,228],[183,274],"cb7c001e-4215-11f0-b798-76b3cceeab13","7e30ab74-1282-11f0-9065-569c3dd06744",["D",1749132182403],181,[],[183,293,33],"screens","a3b9d09a-40e6-11f0-9880-76b3cceeab13","Home.tsx","82e1f6d2-1282-11f0-8a52-569c3dd06744",684,["D",1749001978116],120,"/** @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/db.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 = 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

\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 )\n}\n\nfunction Space({ space }: any) {\n const navigate = useNavigate()\n\n return (\n

{space.name || space.channel_name}

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

\n \n

\n )\n}\n\nfunction CreateForm({}) {\n const [context, setContext] = useState()\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

\n setName(e.target.value)}\n placeholder=\"Space Title\"\n autoCapitalize=\"on\"\n autoCorrect=\"on\"\n type=\"text\"\n value={name}\n />\n \n

\n )\n}\n",[],[183,293,295],"7e30aac0-1282-11f0-9065-569c3dd06744",225,["D",1743901212057],[224,225],[183,293],"a3b338fc-40e6-11f0-87df-76b3cceeab13","ui.tsx","8c0642ac-3b57-4e02-95ea-ed4cb09f37ff","63cae51c-afe6-4c60-ba46-25640fcfccca",683,["D",1749001978116],27,"/** @jsxImportSource https://esm.sh/react@19 */\nimport { ArrowLeft, Share } from \"https://esm.sh/lucide-react@0.510.0\";\nimport { useEffect, useState } from \"https://esm.sh/react@19\";\n\nexport function Section({ children, ...props }: any) {\n const sectionClass = `p-5 rounded-3xl bg-neutral-400/15 ${props.className || \"\"}`;\n return

{children}

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

;\n};\n\nexport const Select = ({ ...props }) => {\n  const className = `\n\tborder-0 bg-inherit text-inherit rounded-xl shadow-sm px-3 py-2\n\tring-1 ring-inset ring-neutral-400 dark:ring-neutral-600 \n\tfocus:ring-2 focus:ring-inset focus:ring-neutral-600 dark:focus:ring-neutral-300\n\t${props.className || \"\"}\n\t`;\n\n  return <select {...props} className={className} />;\n};\n\nexport const Checkbox = ({ label, ...props }) => {\n  const className = `\n\th-4 w-4 rounded-xl bg-inherit text-neutral-700\n\tborder border-neutral-400 dark:border-neutral-600  focus:ring-neutral-700 dark:focus:ring-neutral-300 \n\txfocus:ring-0 xfocus:outline-red-500 focus:ring-offset-transparent focus:ring-offset-0\n\t${props.className || \"\"}\n\t`;\n\n  return (\n    <div className=\"relative flex gap-x-2\">\n      <div className=\"flex  items-center\">\n        <input type=\"checkbox\" {...props} className={className} />\n      </div>\n      <div className=\"text-sm flex  items-center\">\n        <label htmlFor={props.id} className={props?.checked ? \"font-medium\" : \"opacity-50\"}>\n          {label}\n        </label>\n      </div>\n    </div>\n  );\n};\n\nexport const Button = ({ ...props }) => {\n  let sizeStyles = \"text-md px-3 py-1\";\n  if (props.sm || props.size == \"sm\") sizeStyles = \"text-sm px-2 py-1\";\n  if (props.lg || props.size == \"lg\") sizeStyles = \"text-lg px-4 py-2\";\n  let variantStyles =\n    \"bg-neutral-900 border-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",[],[183,318,309],"components","48d07316-11b4-11f0-bdb9-569c3dd06744",["D",1743812646130],[222],[183,318],["D",1743812646130],[221,223,226,229,230],[183],"17ebb0bc-3040-11f0-b763-569c3dd06744","575ebc70-1b8d-11f0-8a63-569c3dd06744",["D",1747171228567],"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",[],[189,266],"17ebad38-3040-11f0-b763-569c3dd06744",["D",1747171228567],20,"http","/** @jsxImportSource npm:hono/jsx */\nimport { serveFile } from \"https://esm.town/v/std/utils@64-main/index.ts\";\nimport { Hono } from \"npm:hono\";\n\nimport { handleAgoraEndpoints } from \"./agora.ts\";\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);\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);\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",[],[189,249],"c101f85a-3b03-11f0-bfbd-9e149126039e","image.tsx","15d5bf76-14ab-11f0-8c91-569c3dd06744",681,["D",1748354775712],"/** @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/db.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-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",[],[189,341],"c0fbf81a-3b03-11f0-88e1-9e149126039e","farcaster.ts","8314afd0-f83d-464f-bc30-1a17aae79051",680,["D",1748354775707],16,"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',\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') {\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",[],[189,349],"7db6fec2-2aa2-11f0-94e1-569c3dd06744","farcaster-notifications.ts","d09aaa38-2a9f-11f0-a96a-569c3dd06744",646,["D",1746553783058],"import { supabase } from '../frontend/util/db.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)\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",[],[189,358],"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}",[],[189,366],["D",1743812646130],[214,215,216,217,218,219],[189],"d2b3d8b6-2ece-11f0-90f2-569c3dd06744","tasks.json","139942c2-29c9-11f0-bdb3-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",[],[194,378],["D",1746460404042],[212],[194],["D",1743812646130],{"_101":100,"_108":104},{"_101":100,"_102":-5,"_103":104,"_18":55,"_105":106,"_107":25},{"_13":87,"_32":88,"_44":43,"_89":45,"_90":91,"_92":93,"_94":51,"_95":96,"_97":66,"_98":46,"_99":100},"ctx",{"_80":-5,"_130":425,"_426":427,"_428":429,"_430":25,"_431":25,"_432":25,"_433":59,"_434":-5,"_435":-7,"_436":-7,"_437":64,"_438":25,"_439":25,"_440":-5,"_441":25,"_442":25,"_443":25,"_444":-5},"ENV",{"_396":397,"_398":399,"_400":88,"_401":402,"_403":404,"_405":406,"_407":408,"_409":410,"_411":412,"_413":414,"_415":416,"_417":418,"_419":420,"_421":422,"_423":424},"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>

Diff · v696