[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_396":397,"_398":399},"routes/_app.x.$handle.$name",{"_95":94,"_31":42,"_103":82,"_26":104,"_13":14,"_105":-5,"_11":106,"_107":108,"_109":110,"_111":112,"_113":114,"_20":-5,"_115":116,"_117":118,"_119":24,"_120":121,"_122":55,"_123":-5,"_124":-5,"_125":126},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_40":41,"_31":42,"_35":43,"_44":-5,"_45":24,"_46":47,"_48":47,"_49":-5,"_50":-5,"_18":51,"_52":53,"_54":55,"_56":55,"_57":-5,"_58":59,"_60":61,"_62":-5,"_63":-5,"_64":-5,"_65":-5,"_66":67,"_68":67,"_69":70,"_71":70,"_72":70,"_73":67,"_74":67,"_75":76,"_77":78,"_79":80,"_81":24},"version",7,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":-7,"_23":24,"_25":24,"_26":27,"_28":27},"file",{"_29":30,"_31":27,"_32":20,"_33":34,"_35":36,"_37":14,"_38":39,"_23":24},"previous","deleted",false,"deletedHere","path","luma-events-calendar.md","latestPath","fileId","76e25d54-3514-11f0-be18-9e149126039e","name","fileType","content","# Luma Events Calendar with Townie Authentication\n\nThis Val Town function creates a calendar-style page displaying upcoming Luma events with Farcaster authentication via Townie.\n\n## Features\n\n- **Farcaster Authentication**: Uses Townie to authenticate users via their Farcaster identity\n- **Event Calendar**: Displays upcoming events in a modern, responsive calendar layout\n- **RSVP Integration**: Provides direct links to RSVP on Luma, with user information pre-filled when available\n- **Responsive Design**: Looks great on both desktop and mobile devices\n\n## How It Works\n\n1. When a user visits the page, they are prompted to log in with their Farcaster account if not already authenticated\n2. After authentication, they see a calendar of upcoming Luma events\n3. Each event displays:\n - Title\n - Date and time\n - Description\n - RSVP button linking to the Luma event page\n4. The RSVP links are pre-filled with the user's name and email when available from their Farcaster profile\n\n## Technical Details\n\n- Built with Hono and Townie\n- Uses vanilla TypeScript and HTML/CSS for the UI\n- Currently uses hardcoded event data (can be replaced with an API integration)\n- Responsive design that works on all device sizes\n\n## Implementation Notes\n\n- The function uses Townie for Farcaster authentication\n- Events are currently hardcoded but can be replaced with a Luma API integration\n- The RSVP links automatically include the user's name and email from their Farcaster profile when available\n- The calendar view is responsive and works well on both desktop and mobile devices\n\n## Future Improvements\n\n- Integrate with Luma API to fetch real events\n- Add filtering and search capabilities\n- Implement calendar view toggle (list/grid/month view)\n- Add notifications for upcoming events","createdAt",["D",1747702245836],"branchVersion","branchId","f094bb8e-3513-11f0-83f7-9e149126039e","id","f09338ea-3513-11f0-83f7-9e149126039e","FarcasterBTC2025",["D",1747702020527],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","b568388d-97e0-46df-b7bb-29ea7a64dd52","pinnedFileId","2f2c6e82-3514-11f0-ac8c-9e149126039e","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","138c76c1-1a5c-45d7-bb85-c255a9b37891","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_95":94,"_102":98},"org",{"_95":94,"_96":-5,"_97":98,"_18":51,"_99":100,"_101":24},"branch",{"_13":14,"_31":82,"_40":39,"_83":41,"_84":85,"_86":87,"_88":47,"_89":90,"_91":61,"_92":42,"_93":94},"isOwned","main","projectId","forkedBranchId","e0737e8e-3513-11f0-8d04-9e149126039e","forkedBranchVersion",1,"forkedProjectPrivacy","forkedProjectId","e0714844-3513-11f0-8d04-9e149126039e","forkedProjectOrgId","projectName","userHandle","purplesquirrelmedia","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ycWN5enczRjhPOFJpTmxBVlpGWFhjSU9QdEIifQ","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_40":41,"_31":42,"_35":392,"_44":-5,"_45":24,"_46":47,"_48":47,"_49":-5,"_50":-5,"_18":51,"_52":53,"_54":55,"_56":55,"_57":-5,"_58":59,"_60":61,"_62":-5,"_63":-5,"_64":-5,"_65":-5,"_66":67,"_68":67,"_69":70,"_71":70,"_72":70,"_73":67,"_74":67,"_75":393,"_77":394,"_79":395,"_81":24},"tree",[217,219,226,237,238,239,240,241,242,243],"files",[217,218,219,220,221,222,223,224,225,226,227,228,229,230,231,232,233,234,235,236,237,238,239,240,241,242,243],"counts",{"_207":59,"_208":87,"_209":59,"_210":211,"_212":213},"contents",[136,137,138,139,140,141,142,143,144,145],"upstreamProject",{"_40":90,"_31":134,"_49":-5,"_50":-5,"_46":47,"_75":135},"upstreamBranch",{"_40":85,"_35":127,"_128":129,"_31":82,"_83":90,"_13":87,"_84":130,"_86":131,"_132":133,"_44":-5,"_81":24,"_46":47,"_93":94,"_60":61,"_92":134},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1747701993457],"updatedAt",["D",1747701993457],"3219c4d4-059c-11f0-aa46-569c3dd06744",590,"lockfileKey","1747701998477-esm.town_v_purplesquirrelmedia_MiniAppStarter@1-main","MiniAppStarter",{"_95":94,"_102":98},{"_40":202,"_31":203,"_29":204,"_149":-5,"_38":39,"_37":87,"_151":55,"_35":205,"_13":59,"_32":195,"_33":-5,"_23":24,"_155":-5,"_26":206},{"_40":197,"_31":198,"_29":199,"_149":-5,"_38":39,"_37":87,"_151":55,"_35":200,"_13":59,"_32":195,"_33":-5,"_23":24,"_155":-5,"_26":201},{"_40":191,"_31":192,"_29":193,"_149":-5,"_38":39,"_37":87,"_151":55,"_35":194,"_13":59,"_32":195,"_33":-5,"_23":24,"_155":-5,"_26":196},{"_40":185,"_31":186,"_29":187,"_149":-5,"_38":39,"_37":87,"_151":55,"_35":188,"_13":59,"_32":20,"_33":189,"_23":24,"_155":-5,"_26":190},{"_40":178,"_31":179,"_29":180,"_149":-5,"_38":39,"_37":181,"_151":55,"_35":182,"_13":87,"_32":20,"_33":183,"_23":24,"_155":-5,"_26":184},{"_40":172,"_31":173,"_29":174,"_149":-5,"_38":39,"_37":87,"_151":55,"_35":175,"_13":59,"_32":20,"_33":176,"_23":24,"_155":-5,"_26":177},{"_40":166,"_31":167,"_29":168,"_149":-5,"_38":39,"_37":87,"_151":55,"_35":169,"_13":59,"_32":20,"_33":170,"_23":24,"_155":-5,"_26":171},{"_40":160,"_31":161,"_29":53,"_149":-5,"_38":39,"_37":162,"_151":55,"_35":163,"_13":87,"_32":153,"_33":164,"_23":24,"_155":-5,"_26":165},{"_40":157,"_31":27,"_29":30,"_149":-5,"_38":39,"_37":14,"_151":55,"_35":158,"_13":59,"_32":20,"_33":34,"_23":24,"_155":-5,"_26":159},{"_40":146,"_31":147,"_29":148,"_149":-5,"_38":39,"_37":150,"_151":55,"_35":152,"_13":87,"_32":153,"_33":154,"_23":24,"_155":-5,"_26":156},"6fb1508a-3514-11f0-97cf-9e149126039e","luma-events-calendar.ts","6cde728e-3514-11f0-81f4-9e149126039e","parentId",6,"latest",["D",1747702233795],"http","import { Hono } from \"npm:hono\";\nimport { Townie } from \"https://esm.town/v/townie/townie\";\n\n// Initialize Townie for authentication\nconst townie = new Townie();\n\n// Initialize Hono app\nconst app = new Hono();\n\n// Hardcoded Luma events\nconst lumaEvents = [\n {\n id: \"event1\",\n title: \"Web3 Developer Meetup\",\n date: \"2023-12-15T18:00:00Z\",\n description: \"Join us for an evening of discussions about the latest in web3 development.\",\n lumaUrl: \"https://lu.ma/web3devmeetup\"\n },\n {\n id: \"event2\",\n title: \"Farcaster Community Hangout\",\n date: \"2023-12-20T19:30:00Z\",\n description: \"Monthly community hangout for Farcaster users and developers.\",\n lumaUrl: \"https://lu.ma/farcasterhangout\"\n },\n {\n id: \"event3\",\n title: \"Crypto Art Exhibition\",\n date: \"2023-12-28T17:00:00Z\",\n description: \"Virtual exhibition showcasing the latest in crypto and NFT art.\",\n lumaUrl: \"https://lu.ma/cryptoart\"\n }\n];\n\n// Format date for display\nfunction formatDate(dateString: string): string {\n const date = new Date(dateString);\n return date.toLocaleDateString('en-US', { \n weekday: 'long',\n year: 'numeric', \n month: 'long', \n day: 'numeric',\n hour: '2-digit',\n minute: '2-digit'\n });\n}\n\n// Generate HTML for an event\nfunction generateEventHTML(event: any, user: any = null): string {\n const formattedDate = formatDate(event.date);\n \n // Create RSVP URL with user info if available\n let rsvpUrl = event.lumaUrl;\n if (user) {\n const userParams = new URLSearchParams();\n if (user.name) userParams.append('name', user.name);\n if (user.email) userParams.append('email', user.email);\n \n // Append params to URL if we have user data\n if (userParams.toString()) {\n rsvpUrl += `?${userParams.toString()}`;\n }\n }\n\n return `\n

${event.title}

${formattedDate}

${event.description}

\n RSVP\n

\n `;\n}\n\n// Generate HTML for the calendar page\nfunction generateCalendarHTML(user: any = null): string {\n const eventsHTML = lumaEvents.map(event => generateEventHTML(event, user)).join('');\n \n const userInfo = user ? `\n

\n $\"Profile\"$ \n

Welcome, ${user.name || user.username || 'User'}

FID: ${user.fid}

\n ` : '';\n\n return `\n \n \n \n \n \n Luma Events Calendar\n \n \n \n

Luma Events Calendar

\n ${userInfo}\n

\n \n

\n ${eventsHTML}\n

\n \n \n `;\n}\n\n// Generate HTML for the login page\nfunction generateLoginHTML(): string {\n return `\n \n \n \n \n \n Login - Luma Events Calendar\n \n \n \n

\n \n

\n \n \n `;\n}\n\n// Handle authentication route\napp.get('/auth', async (c) => {\n return townie.handleRequest(c.req);\n});\n\n// Main route\napp.get('*', async (c) => {\n // Check if user is authenticated\n const user = await townie.getUser(c.req);\n \n if (!user) {\n // User is not authenticated, show login page\n return c.html(generateLoginHTML());\n }\n \n // User is authenticated, show calendar page\n return c.html(generateCalendarHTML(user));\n});\n\n// Unwrap and rethrow Hono errors as the original error\napp.onError((err, c) => {\n throw err;\n});\n\n// Export the fetch handler for HTTP val\nexport default app.fetch;","label",[147],"76e25ca0-3514-11f0-be18-9e149126039e",["D",1747702245836],[27],"347d0f7c-3514-11f0-a7b9-9e149126039e","index.ts",3,["D",1747702134466],"import { serve } from \"https://esm.sh/@hono/node-server@1.1.1\";\nimport { Townie } from \"https://esm.town/v/townie/townie\";\n\n// Initialize Townie for authentication\nconst townie = new Townie();\n\n// Hardcoded Luma events\nconst lumaEvents = [\n {\n id: \"event1\",\n title: \"Web3 Developer Meetup\",\n date: \"2023-12-15T18:00:00Z\",\n description: \"Join us for an evening of discussions about the latest in web3 development.\",\n lumaUrl: \"https://lu.ma/web3devmeetup\"\n },\n {\n id: \"event2\",\n title: \"Farcaster Community Hangout\",\n date: \"2023-12-20T19:30:00Z\",\n description: \"Monthly community hangout for Farcaster users and developers.\",\n lumaUrl: \"https://lu.ma/farcasterhangout\"\n },\n {\n id: \"event3\",\n title: \"Crypto Art Exhibition\",\n date: \"2023-12-28T17:00:00Z\",\n description: \"Virtual exhibition showcasing the latest in crypto and NFT art.\",\n lumaUrl: \"https://lu.ma/cryptoart\"\n }\n];\n\n// Format date for display\nfunction formatDate(dateString: string): string {\n const date = new Date(dateString);\n return date.toLocaleDateString('en-US', { \n weekday: 'long',\n year: 'numeric', \n month: 'long', \n day: 'numeric',\n hour: '2-digit',\n minute: '2-digit'\n });\n}\n\n// Generate HTML for an event\nfunction generateEventHTML(event: any, user: any = null): string {\n const formattedDate = formatDate(event.date);\n \n // Create RSVP URL with user info if available\n let rsvpUrl = event.lumaUrl;\n if (user) {\n const userParams = new URLSearchParams();\n if (user.name) userParams.append('name', user.name);\n if (user.email) userParams.append('email', user.email);\n \n // Append params to URL if we have user data\n if (userParams.toString()) {\n rsvpUrl += `?${userParams.toString()}`;\n }\n }\n\n return `\n

${event.title}

${formattedDate}

${event.description}

\n RSVP\n

\n $\"Profile\"$ \n

Welcome, ${user.name || user.username || 'User'}

FID: ${user.fid}

\n ` : '';\n\n return `\n \n \n \n \n \n Luma Events Calendar\n \n \n \n

Luma Events Calendar

\n ${userInfo}\n

\n \n

\n ${eventsHTML}\n

\n \n \n `;\n}\n\n// Generate HTML for the login page\nfunction generateLoginHTML(): string {\n return `\n \n \n \n \n \n Login - Luma Events Calendar\n \n \n \n

\n \n

\n \n \n `;\n}\n\n// Main handler function\nexport default async function(req: Request): Promise {\n const url = new URL(req.url);\n \n // Handle authentication route\n if (url.pathname === '/auth') {\n return townie.handleRequest(req);\n }\n \n // Check if user is authenticated\n const user = await townie.getUser(req);\n \n if (!user) {\n // User is not authenticated, show login page\n return new Response(generateLoginHTML(), {\n headers: {\n 'Content-Type': 'text/html'\n }\n });\n }\n \n // User is authenticated, show calendar page\n return new Response(generateCalendarHTML(user), {\n headers: {\n 'Content-Type': 'text/html'\n }\n });\n}",[161],"f097543e-3513-11f0-83f7-9e149126039e","deno.json","6815d157-e4a5-4f5e-8759-f80257e0fcf0",["D",1747702020527],"{\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 ]\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}",[167],"f0975196-3513-11f0-83f7-9e149126039e","TODO.txt","02e56f18-511b-4e16-9d16-6d4004d08cba",["D",1747702020527],"minting",[173],"46526774-3514-11f0-acb7-9e149126039e","README.md","4e1546e4-57f0-44ba-8203-8a22f0f38f03",4,["D",1747702164383],"# Luma Events Calendar with Townie Authentication\n\nThis Val Town function creates a calendar-style page displaying upcoming Luma events with Farcaster authentication via Townie.\n\n## Features\n\n- **Farcaster Authentication**: Uses Townie to authenticate users via their Farcaster identity\n- **Event Calendar**: Displays upcoming events in a modern, responsive calendar layout\n- **RSVP Integration**: Provides direct links to RSVP on Luma, with user information pre-filled when available\n- **Responsive Design**: Looks great on both desktop and mobile devices\n\n## How It Works\n\n1. When a user visits the page, they are prompted to log in with their Farcaster account if not already authenticated\n2. After authentication, they see a calendar of upcoming Luma events\n3. Each event displays:\n - Title\n - Date and time\n - Description\n - RSVP button linking to the Luma event page\n4. The RSVP links are pre-filled with the user's name and email when available from their Farcaster profile\n\n## Technical Details\n\n- Built with vanilla TypeScript and HTML/CSS\n- Uses Townie for Farcaster authentication\n- Currently uses hardcoded event data (can be replaced with an API integration)\n- Responsive design that works on all device sizes\n\n## Future Improvements\n\n- Integrate with Luma API to fetch real events\n- Add filtering and search capabilities\n- Implement calendar view toggle (list/grid/month view)\n- Add notifications for upcoming events",[179],"f0974afc-3513-11f0-83f7-9e149126039e",".vtignore","d307ffc2-823b-4dce-9cc2-1598581ba013",["D",1747702020527],".git\n.DS_Store\nnode_modules\nvendor",[186],"f097494e-3513-11f0-83f7-9e149126039e","frontend","571e2870-447f-4dcd-89b0-613e5ce1bb60",["D",1747702020527],"directory",[192],"f09729aa-3513-11f0-83f7-9e149126039e","backend","4ae89b75-8a9e-4163-aeee-074d14cdc69b",["D",1747702020527],[198],"f09707a4-3513-11f0-83f7-9e149126039e",".vscode","c3ff8953-12d0-4e74-b929-4c5a0a97986b",["D",1747702020527],[203],"pulls","branches","forks","envVars",{"_214":59,"_216":59},"connections",{"_214":59,"_215":59},"count","unfilledCount","emptyCount",{"_40":202,"_31":203,"_29":204,"_149":-5,"_38":39,"_37":87,"_151":55,"_35":389,"_13":59,"_32":195,"_33":-5,"_23":24,"_155":-5,"_245":390,"_26":391},{"_40":382,"_31":383,"_29":384,"_149":204,"_38":39,"_37":87,"_151":55,"_35":385,"_13":59,"_32":20,"_33":386,"_23":24,"_155":-5,"_245":387,"_26":388},{"_40":197,"_31":198,"_29":199,"_149":-5,"_38":39,"_37":87,"_151":55,"_35":379,"_13":59,"_32":195,"_33":-5,"_23":24,"_155":-5,"_245":380,"_26":381},{"_40":371,"_31":372,"_29":373,"_149":199,"_38":39,"_37":87,"_151":55,"_35":374,"_13":59,"_32":375,"_33":376,"_23":24,"_155":-5,"_245":377,"_26":378},{"_40":364,"_31":365,"_29":366,"_149":199,"_38":39,"_37":87,"_151":55,"_35":367,"_13":59,"_32":270,"_33":368,"_23":24,"_155":-5,"_245":369,"_26":370},{"_40":357,"_31":358,"_29":359,"_149":199,"_38":39,"_37":87,"_151":55,"_35":360,"_13":59,"_32":270,"_33":361,"_23":24,"_155":-5,"_245":362,"_26":363},{"_40":350,"_31":351,"_29":352,"_149":199,"_38":39,"_37":87,"_151":55,"_35":353,"_13":59,"_32":270,"_33":354,"_23":24,"_155":-5,"_245":355,"_26":356},{"_40":343,"_31":344,"_29":345,"_149":199,"_38":39,"_37":87,"_151":55,"_35":346,"_13":59,"_32":270,"_33":347,"_23":24,"_155":-5,"_245":348,"_26":349},{"_40":337,"_31":267,"_29":338,"_149":199,"_38":39,"_37":87,"_151":55,"_35":339,"_13":59,"_32":153,"_33":340,"_23":24,"_155":-5,"_245":341,"_26":342},{"_40":191,"_31":192,"_29":193,"_149":-5,"_38":39,"_37":87,"_151":55,"_35":334,"_13":59,"_32":195,"_33":-5,"_23":24,"_155":-5,"_245":335,"_26":336},{"_40":330,"_31":315,"_29":310,"_149":193,"_38":39,"_37":87,"_151":55,"_35":331,"_13":59,"_32":195,"_33":-5,"_23":24,"_155":-5,"_245":332,"_26":333},{"_40":323,"_31":324,"_29":325,"_149":310,"_38":39,"_37":87,"_151":55,"_35":326,"_13":59,"_32":270,"_33":327,"_23":24,"_155":-5,"_245":328,"_26":329},{"_40":316,"_31":317,"_29":318,"_149":310,"_38":39,"_37":87,"_151":55,"_35":319,"_13":59,"_32":270,"_33":320,"_23":24,"_155":-5,"_245":321,"_26":322},{"_40":307,"_31":308,"_29":309,"_149":310,"_38":39,"_37":87,"_151":55,"_35":311,"_13":59,"_32":270,"_33":312,"_23":24,"_155":-5,"_245":313,"_26":314},{"_40":303,"_31":302,"_29":297,"_149":193,"_38":39,"_37":87,"_151":55,"_35":304,"_13":59,"_32":195,"_33":-5,"_23":24,"_155":-5,"_245":305,"_26":306},{"_40":294,"_31":295,"_29":296,"_149":297,"_38":39,"_37":87,"_151":55,"_35":298,"_13":59,"_32":270,"_33":299,"_23":24,"_155":-5,"_245":300,"_26":301},{"_40":290,"_31":289,"_29":284,"_149":193,"_38":39,"_37":87,"_151":55,"_35":291,"_13":59,"_32":195,"_33":-5,"_23":24,"_155":-5,"_245":292,"_26":293},{"_40":281,"_31":282,"_29":283,"_149":284,"_38":39,"_37":87,"_151":55,"_35":285,"_13":59,"_32":270,"_33":286,"_23":24,"_155":-5,"_245":287,"_26":288},{"_40":274,"_31":275,"_29":276,"_149":193,"_38":39,"_37":87,"_151":55,"_35":277,"_13":59,"_32":270,"_33":278,"_23":24,"_155":-5,"_245":279,"_26":280},{"_40":266,"_31":267,"_29":268,"_149":193,"_38":39,"_37":87,"_151":55,"_35":269,"_13":59,"_32":270,"_33":271,"_23":24,"_155":-5,"_245":272,"_26":273},{"_40":185,"_31":186,"_29":187,"_149":-5,"_38":39,"_37":87,"_151":55,"_35":263,"_13":59,"_32":20,"_33":189,"_23":24,"_155":-5,"_245":264,"_26":265},{"_40":178,"_31":179,"_29":180,"_149":-5,"_38":39,"_37":181,"_151":55,"_35":260,"_13":87,"_32":20,"_33":183,"_23":24,"_155":-5,"_245":261,"_26":262},{"_40":172,"_31":173,"_29":174,"_149":-5,"_38":39,"_37":87,"_151":55,"_35":257,"_13":59,"_32":20,"_33":176,"_23":24,"_155":-5,"_245":258,"_26":259},{"_40":166,"_31":167,"_29":168,"_149":-5,"_38":39,"_37":87,"_151":55,"_35":254,"_13":59,"_32":20,"_33":170,"_23":24,"_155":-5,"_245":255,"_26":256},{"_40":160,"_31":161,"_29":53,"_149":-5,"_38":39,"_37":162,"_151":55,"_35":251,"_13":87,"_32":153,"_33":164,"_23":24,"_155":-5,"_245":252,"_26":253},{"_40":157,"_31":27,"_29":30,"_149":-5,"_38":39,"_37":14,"_151":55,"_35":248,"_13":59,"_32":20,"_33":34,"_23":24,"_155":-5,"_245":249,"_26":250},{"_40":146,"_31":147,"_29":148,"_149":-5,"_38":39,"_37":150,"_151":55,"_35":244,"_13":87,"_32":153,"_33":154,"_23":24,"_155":-5,"_245":246,"_26":247},["D",1747702233795],"children",[],[147],["D",1747702245836],[],[27],["D",1747702134466],[],[161],["D",1747702020527],[],[167],["D",1747702020527],[],[173],["D",1747702164383],[],[179],["D",1747702020527],[],[186],"f09747a0-3513-11f0-83f7-9e149126039e","index.tsx","11cb5b01-02fc-464c-9a5e-ffed934103da",["D",1747702020527],"script","/** @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);",[],[192,267],"f09744c6-3513-11f0-83f7-9e149126039e","App.tsx","d214b5ee-9992-4a78-822e-a357571f16b2",["D",1747702020527],"/** @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 { NavLink, Route, Routes } from \"https://esm.sh/react-router@7\";\nimport { useEffect, useState } from \"https://esm.sh/react@19\";\n\nimport { Example } from \"./components/Example.tsx\";\nimport { FarcasterMiniApp } from \"./components/FarcasterMiniApp.tsx\";\nimport { Button, Section } from \"./components/ui.tsx\";\nimport { fetchNeynarGet } from \"./util/neynar.ts\";\n\nexport function App() {\n const navLinks = [\n { name: \"Farcaster SDK\", path: \"/\" },\n { name: \"Database\", path: \"/db\" },\n { name: \"About\", path: \"/about\" },\n ];\n\n return (\n

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

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

\n {/*

Features:

*/}\n

✷ Hono + React + Tailwind

✷ React Router + React Query

✷ Built-in database (blob storage)

✷ Farcaster mini app manifest + webhook + embed metadata

✷ Farcaster notifications (storing tokens, sending recurring notifications, ...)

✷ Neynar API integration for Farcaster data

✷ Hosted on Val Town (instant deployments on save)

\n ✷ Source Code:{\" \"}\n \n val.town/x/moe/MiniAppStarter\n \n

\n );\n}\n\nfunction Database() {\n const queryFn = () => fetch(\"/api/counter/get\").then((r) => r.json());\n const { data, refetch } = useQuery({ queryKey: [\"counter\"], queryFn });\n return (\n

\n {/*

Database Example

*/}\n

Counter value: {data}

\n \n

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

Neynar page

;\n}",[],[192,275],"f097400c-3513-11f0-83f7-9e149126039e","neynar.ts","27779810-6e0e-4c5e-9044-5334a556db91","2258a432-fcbf-4cbb-bd78-536364a1aa67",["D",1747702020527],"const baseUrl = \"https://api.neynar.com/v2/farcaster/\";\n\nexport async function fetchNeynarGet(path: string) {\n const res = await fetch(baseUrl + path, {\n method: \"GET\",\n headers: {\n \"Content-Type\": \"application/json\",\n \"x-neynar-experimental\": \"true\",\n \"x-api-key\": \"NEYNAR_API_DOCS\",\n },\n });\n const json = await res.json();\n return json;\n}\n\nexport function fetchUser(username: string) {\n return fetchNeynarGet(`user/by_username?username=${username}`).then(r => r.user);\n}\nexport function fetchUsersById(fids: string) {\n return fetchNeynarGet(`user/bulk?fids=${fids}`).then(r => r.users);\n}\n\nexport function fetchUserFeed(fid: number) {\n return fetchNeynarGet(\n `feed?feed_type=filter&filter_type=fids&fids=${fid}&with_recasts=false&with_replies=false&limit=100&cursor=`,\n ).then(r => r.casts);\n}\n\nexport function fetchChannel(channelId: string) {\n return fetchNeynarGet(`channel?id=${channelId}`).then(r => r.channel);\n}\n\nexport function fetchChannelFeed(channelId: string) {\n return fetchNeynarGet(\n `feed/channels?channel_ids=${channelId}&with_recasts=false&limit=100`,\n ).then(r => r.casts);\n}\n\nexport function fetchChannelsFeed(channelIds: array) {\n return fetchNeynarGet(\n `feed/channels?channel_ids=${channelIds.join(\",\")}&with_recasts=false&limit=100`,\n ).then(r => r.casts);\n}",[],[192,289,282],"util","f097432c-3513-11f0-83f7-9e149126039e",["D",1747702020527],[234],[192,289],"f0973c92-3513-11f0-83f7-9e149126039e","Home.tsx","9f9c6644-4756-42b3-9bec-8c0886aca6af","5f487fee-89f1-4aef-a309-af35dadb9462",["D",1747702020527],"/** @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 } from \"../components/ui.tsx\";\nimport { fetchUsersById } from \"../util/neynar.ts\";\n\nexport function Home() {\n return (\n

\n );\n}",[],[192,302,295],"screens","f0973e0e-3513-11f0-83f7-9e149126039e",["D",1747702020527],[232],[192,302],"f09735f8-3513-11f0-83f7-9e149126039e","ui.tsx","543731a3-e744-43ad-8807-fd794f9aaa1f","7977de33-1b8f-4c3a-8a2a-16b19efc7bca",["D",1747702020527],"/** @jsxImportSource https://esm.sh/react@19 */\nimport { ArrowLeft, Share } from \"https://esm.sh/lucide-react\";\nimport { useEffect, useState } from \"https://esm.sh/react@19\";\n\nexport function Section({ children, ...props }: any) {\n const sectionClass = `p-5 rounded-3xl bg-neutral-400/15 ${props.className || \"\"}`;\n return

{children}

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

;\n};\n\nexport const Select = ({ ...props }) => {\n  const className = `\n\tborder-0 bg-inherit text-inherit rounded-xl shadow-sm px-3 py-2\n\tring-1 ring-inset ring-neutral-400 dark:ring-neutral-600 \n\tfocus:ring-2 focus:ring-inset focus:ring-neutral-600 dark:focus:ring-neutral-300\n\t${props.className || \"\"}\n\t`;\n\n  return <select {...props} className={className} />;\n};\n\nexport const Checkbox = ({ label, ...props }) => {\n  const className = `\n\th-4 w-4 rounded-xl bg-inherit text-neutral-700\n\tborder border-neutral-400 dark:border-neutral-600  focus:ring-neutral-700 dark:focus:ring-neutral-300 \n\txfocus:ring-0 xfocus:outline-red-500 focus:ring-offset-transparent focus:ring-offset-0\n\t${props.className || \"\"}\n\t`;\n\n  return (\n    <div className=\"relative flex gap-x-2\">\n      <div className=\"flex  items-center\">\n        <input type=\"checkbox\" {...props} className={className} />\n      </div>\n      <div className=\"text-sm flex  items-center\">\n        <label htmlFor={props.id} className={props?.checked ? \"font-medium\" : \"opacity-50\"}>\n          {label}\n        </label>\n      </div>\n    </div>\n  );\n};\n\nexport const Button = ({ ...props }) => {\n  let sizeStyles = \"text-md px-3 py-1\";\n  if (props.sm || props.size == \"sm\") sizeStyles = \"text-sm px-2 py-1\";\n  if (props.lg || props.size == \"lg\") sizeStyles = \"text-lg px-4 py-2\";\n  let variantStyles =\n    \"bg-neutral-900 border border-transparent dark:bg-neutral-100 text-neutral-100 dark:text-neutral-900 \";\n  if (props.variant === \"outline\") {\n    variantStyles =\n      \"bg-transparent border border-neutral-400 dark:border-neutral-600 text-neutral-900 dark:text-neutral-100\";\n  }\n\n  const className = `\n\tflex flex-row justify-center items-center   rounded-xl font-semibold \n\t${variantStyles}\n\tshadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600  \n\topacity-95 hover:opacity-100 disabled:opacity-50\n\t${sizeStyles}\n\t${props.className || \"\"}\n\t`;\n\n  if (props.href && !props.disabled) return <a {...props} className={className} />;\n  return <button {...props} className={className} />;\n};\n\n// export function Input(props: any) {\n//   const inputClass = \"dark:bg-white dark:text-black bg-black text-white rounded-md px-3 py-1 \";\n//   return <input class={inputClass} {...props} />;\n// }\n\n// export function Button(props: any) {\n//   const buttonClass = \"dark:bg-white dark:text-black bg-black text-white rounded-md px-3 py-1 \";\n//   return <button class={buttonClass} {...props} />;\n// }\n\nexport function MonoButton(props: any) {\n  return (\n    <Button {...props}>\n      <div class=\"font-mono text-sm font-normal\">{props.children}</div>\n    </Button>\n  );\n}\n\nexport function MonoButtonWithStatus(props: any) {\n  const [status, setStatus] = useState<any>();\n  const handleClick = async () => {\n    try {\n      setStatus(\"...\");\n      const result = await props.onClick?.();\n      setStatus(formatJSON(result));\n    } catch (err) {\n      console.error(err);\n      setStatus(\"Error: \" + err);\n    }\n  };\n\n  return (\n    <div>\n      <MonoButton {...props} onClick={handleClick} />\n      {status && <div class={\"mt-2 font-mono text-xs opacity-50 whitespace-pre-wrap break-all\"}>{status}</div>}\n    </div>\n  );\n}\n\nexport function formatJSON(json: any) {\n  return JSON.stringify(json, null, 2);\n}\n\nexport const shorten = (string, start, end) => {\n  return string.substring(0, start) + \"…\" + string.substring(string.length - end);\n};\n\nexport const formatAddress = (address) => {\n  if (!address) return \"\";\n  if (address.length < 20) return address;\n  return shorten(address, 6, 4);\n};\n\nexport function BackButton({}) {\n  return <ArrowLeft className=\"w-5 h-5 m-2 cursor-pointer opacity-50\" onClick={() => window.location.href = \"/\"} />;\n}\n\nexport function ShareButton({ onClick }) {\n  return <Share className=\"w-5 h-5 m-2 cursor-pointer opacity-50\" onClick={onClick} />;\n}",[],[192,315,308],"components","f0972ed2-3513-11f0-83f7-9e149126039e","FarcasterMiniApp.tsx","60513fa5-d692-47d2-bca4-d1ea43ff3235",["D",1747702020527],"/** @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 className=\"flex flex-col gap-3 m-5 mb-10\">\n      {context && (\n        <>\n          {context?.user?.fid && (\n            <Section>\n              <div className=\"text-sm  opacity-50 mb-3 uppercase\">User</div>\n              <div className=\"flex flex-row gap-3 items-center\">\n                <img className=\"rounded-full w-10 h-10\" src={context?.user?.pfpUrl} />\n                <div className=\"font-semibold text-xl\">{context?.user?.username}</div>\n                <div className=\"text-sm opacity-50 pt-1\">{context?.user?.fid}</div>\n              </div>\n            </Section>\n          )}\n\n          {walletAddresses?.length > 0 && (\n            <Section>\n              <div className=\"text-sm  opacity-50 mb-3 uppercase\">Wallet</div>\n              <div className=\"font-mono font-medium text-xl mb-4\">{formatAddress(walletAddresses[0])}</div>\n\n              <div className=\"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 className=\"font-mono text-sm  opacity-50 mb-3\">sdk.actions</div>\n            <div className=\"flex flex-col flex-wrap gap-3 items-start\">\n              <MonoButtonWithStatus onClick={() => fcsdk.actions.viewProfile({ fid: context.user.fid })}>\n                viewProfile\n              </MonoButtonWithStatus>\n              <MonoButtonWithStatus onClick={() => fcsdk.actions.composeCast({ text: \"Hello\" })}>\n                composeCast\n              </MonoButtonWithStatus>\n              <MonoButtonWithStatus\n                onClick={() => fcsdk.actions.openUrl(\"https://www.youtube.com/watch?v=dQw4w9WgXcQ\")}\n              >\n                openUrl\n              </MonoButtonWithStatus>\n              <MonoButtonWithStatus onClick={() => fcsdk.actions.openUrl(\"https://warpcast.com/~/compose\")}>\n                openUrl (warpcast)\n              </MonoButtonWithStatus>\n              <MonoButtonWithStatus onClick={() => fcsdk.actions.setPrimaryButton({ text: \"Primary Button\" })}>\n                setPrimaryButton\n              </MonoButtonWithStatus>\n              <MonoButtonWithStatus onClick={() => fcsdk.actions.addFrame()}>addFrame</MonoButtonWithStatus>\n              <MonoButtonWithStatus onClick={() => fcsdk.actions.signIn({})}>signIn</MonoButtonWithStatus>\n              <MonoButtonWithStatus onClick={() => fcsdk.actions.close()}>close</MonoButtonWithStatus>\n            </div>\n          </Section>\n          <Section>\n            <div className=\"font-mono text-sm  opacity-50 mb-3\">sdk.experimental</div>\n            <div className=\"flex flex-col flex-wrap gap-3 items-start\">\n            <MonoButtonWithStatus\n                onClick={() =>\n                  fcsdk.experimental.swapToken({\n                    sellToken: \"eip155:8453/erc20:0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913\",\n                    buyToken: \"eip155:8453/native\",\n                    sellAmount: \"3000000\",\n                  })}\n              >\n                swapToken\n              </MonoButtonWithStatus>\n              <MonoButtonWithStatus\n                onClick={() =>\n                  fcsdk.experimental.sendToken({\n                    token: \"eip155:8453/erc20:0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913\",\n                    amount: \"500000\",\n                    recipientFid: 2073,\n                  })}\n              >\n                sendToken\n              </MonoButtonWithStatus>\n              <MonoButtonWithStatus\n                onClick={() =>\n                  fcsdk.experimental.viewToken({\n                    token: \"eip155:8453/erc20:0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913\",\n                  })}\n              >\n                viewToken\n              </MonoButtonWithStatus>\n            </div>\n          </Section>\n\n          <Section>\n            <div className=\"flex flex-row gap-3 items-center justify-between\">\n              <div className=\"font-mono text-sm  opacity-50\">sdk.context</div>\n              <div className=\"text-sm cursor-pointer opacity-50 p-1\" onClick={() => setContextExpanded(!contextExpanded)}>\n                {contextExpanded ? \"▲\" : \"▼\"}\n              </div>\n            </div>\n\n            {contextExpanded && (\n              <div className=\"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 className=\"text-md  opacity-50 \">Open this web app in Warpcast to see the Mini App.</div>\n        </Section>\n      )}\n    </div>\n  );\n}",[],[192,315,317],"f0972b58-3513-11f0-83f7-9e149126039e","Example.tsx","7c554e7b-db18-41a3-8625-febd4857d9ec",["D",1747702020527],"/** @jsxImportSource https://esm.sh/react@19 */\nimport fcsdk from \"https://esm.sh/@farcaster/frame-sdk\";\nimport { useEffect, useState } from \"https://esm.sh/react@19\";\n\nimport { ShareButton } from \"./ui.tsx\";\n\nexport function Example() {\n  const [context, setContext] = useState<any>();\n  useEffect(() => {\n    fcsdk.actions.ready();\n    fcsdk.context.then(setContext);\n  }, []);\n\n  const onShare = () => {\n    if (!context) return;\n    const text = `Check out Spaces mini app by @moe!\\n`;\n    fcsdk?.actions?.composeCast?.({ text, embeds: [window.location.href] });\n  };\n\n  return (\n    <div class=\"m-5 mb-8\">\n      <div className=\"flex justify-between items-center\">\n        <h1 class=\"text-3xl font-semibold mb-1\">Mini App Starter</h1>\n        {context && <ShareButton onClick={onShare} />}\n      </div>\n      <div class=\"text-sm opacity-50\">Farcaster Mini App Starter Project on Val Town</div>\n    </div>\n  );\n}",[],[192,315,324],"f0973ad0-3513-11f0-83f7-9e149126039e",["D",1747702020527],[228,229,230],[192,315],["D",1747702020527],[227,231,233,235,236],[192],"f09726a8-3513-11f0-83f7-9e149126039e","203f0512-b09d-42e9-af72-92a45fcdbe77",["D",1747702020527],"/** @jsxImportSource npm:hono/jsx */\nimport { serveFile } from \"https://esm.town/v/std/utils@64-main/index.ts\";\nimport { Hono } from \"npm:hono\";\n\nimport * as db from \"./db.ts\";\nimport { embedMetadata, handleFarcasterEndpoints, name } from \"./farcaster.ts\";\nimport { handleImageEndpoints } from \"./image.tsx\";\n\nconst app = new Hono();\n\nhandleImageEndpoints(app);\nhandleFarcasterEndpoints(app);\n\napp.get(\"/testing\", c =>\n  c.json({\n    hello: \"world\",\n    baseUrl: c.req.url.replace(c.req.path, \"\"),\n    \"import.meta.url\": import.meta.url,\n  }));\n\napp.get(\"/api/counter/get\", async c => c.json(await db.get(\"counter\")));\napp.get(\"/api/counter/increment\", async c => c.json(await db.set(\"counter\", (await db.get(\"counter\") || 0) + 1)));\n\napp.get(\"/frontend/**/*\", c => serveFile(c.req.path, import.meta.url));\n\napp.get(\"/\", async c => {\n  const url = new URL(c.req.url);\n  const path = c.req.url?.replace(url.origin, \"\");\n  return c.html(generateHtml(url.origin, path));\n});\napp.get(\"*\", async c => {\n  const url = new URL(c.req.url);\n  const path = c.req.url?.replace(url.origin, \"\");\n  return c.html(generateHtml(url.origin, path));\n});\n\nfunction generateHtml(baseUrl: string, path: string = \"/\"): any {\n  return (\n    <html>\n      <head>\n        <title>{name}</title>\n        <script src=\"https://cdn.tailwindcss.com\"></script>\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n        <meta name=\"fc:frame\" content={JSON.stringify(embedMetadata(baseUrl, path))} />\n        <link rel=\"icon\" href={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;",[],[198,267],"f09722fc-3513-11f0-83f7-9e149126039e","image.tsx","2613f21e-db48-4b86-9bca-42ca6e533c71",["D",1747702020527],"/** @jsxImportSource https://esm.sh/react */\nimport { render } from \"https://deno.land/x/resvg_wasm/mod.ts\";\nimport { Hono } from \"npm:hono\";\nimport { SquareDashed } 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=86400\",\n  };\n  app.get(\"/image\", async (c) => {\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(SquareDashed)} />\n        <div tw=\"h-[270px]\"></div>\n        <div tw=\"flex text-[100px] tracking-[-5px]\">Mini App Starter</div>\n        <div tw=\"flex text-[30px] opacity-50 tracking-[-1px]\">Hono + React + Tailwind Starter Project on Val Town</div>\n      </div>\n    </div>,\n  );\n}\n\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(SquareDashed)} />\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};",[],[198,344],"f0971726-3513-11f0-83f7-9e149126039e","farcaster.ts","b9c49f3c-6e80-4cab-bc93-e23c7a0c09eb",["D",1747702020527],"import { Hono } from \"npm:hono\";\n\nimport { saveUserNotificationsDetails, sendNotificationToUser } from \"./farcaster-notifications.ts\";\n\nexport const name = \"Mini App Starter\";\n// export const iconUrl = \"https://imgur.com/TrJLlwp.png\";\n// export const ogImageUrl = \"https://imgur.com/xKVOVUE.png\";\n\nexport function embedMetadata(baseUrl: string, path: string = \"/\") {\n  return {\n    version: \"next\",\n    imageUrl: baseUrl + \"/image\",\n    button: {\n      title: name,\n      action: {\n        type: \"launch_frame\",\n        name: name,\n        url: baseUrl + path,\n        splashImageUrl: 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://moe--3238fa84059c11f0ac33569c3dd06744.web.val.run\") {\n      accountAssociation = {\n        \"header\":\n          \"eyJmaWQiOjIwNzMsInR5cGUiOiJjdXN0b2R5Iiwia2V5IjoiMHg0OERCN2U3MWQxMTUyNjU5MTY5NjE2NzNCOTY4NjcwQTU0N2IwZkJFIn0\",\n        \"payload\": \"eyJkb21haW4iOiJtb2UtLTMyMzhmYTg0MDU5YzExZjBhYzMzNTY5YzNkZDA2NzQ0LndlYi52YWwucnVuIn0\",\n        \"signature\":\n          \"MHhjNjc2NTRlMzIzOTA3ZTk4ZDk2OGNiOTNhYmRjMDI0Y2Y3M2MxM2UxNjZmNGY3NjRjZjk4ODJlZTBhZTg4ZjAwNDNkNjRmNjg1YTRmN2MxMjI0YmUyMTZlNjViNTFmYmQ4NDJiYmQ1YzYwMjJkMDZhOGI5MGY3NTQ3NTNmZTExMjFi\",\n      };\n    }\n    if (baseUrl == \"https://miniapp-starter.val.run\") {\n      accountAssociation = {\n        \"header\":\n          \"eyJmaWQiOjIwNzMsInR5cGUiOiJjdXN0b2R5Iiwia2V5IjoiMHg0OERCN2U3MWQxMTUyNjU5MTY5NjE2NzNCOTY4NjcwQTU0N2IwZkJFIn0\",\n        \"payload\": \"eyJkb21haW4iOiJtaW5pYXBwLXN0YXJ0ZXIudmFsLnJ1biJ9\",\n        \"signature\":\n          \"MHg0MjIwZGZhMmEzMmZmMDkzZTBjNWIyMjljNWZjZDc0OGMwN2UyNGNiNjMxNjcwNjIxZTUzMDYxMmVlMWIxYWM1MjNmNzllNGU4OTQzZGYxYTBiNWQzMDQ5NDFlZTliZGFhMzhjNDhmOTdhNWM3MjU5NWFjYzljMTkxM2Y1YmY3YjFj\",\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        \"primaryCategory\": \"developer-tools\",\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    // TODO: verify webhook signature\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      await saveUserNotificationsDetails(fid, payload?.notificationDetails);\n      const res = await sendWelcomeNotification(fid, baseUrl);\n      console.log(\"[warpcast-frame-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: name + \" installed!\",\n    body: \"🚀🚀🚀🚀🚀\",\n    targetUrl: baseUrl,\n  });\n}",[],[198,351],"f097117c-3513-11f0-83f7-9e149126039e","farcaster-notifications.ts","2e05e57a-4762-4c25-b127-53e37f678b4c",["D",1747702020527],"import * as db from \"./db.ts\";\n\nconst dbKey = \"fc-notification-details-by-fid\";\n\nexport async function saveUserNotificationsDetails(fid: number, notificationDetails: any) {\n  let notificationDetailsByFid: any = await db.get(dbKey) || {};\n  notificationDetailsByFid[fid] = notificationDetails;\n  await db.set(dbKey, notificationDetailsByFid);\n  console.log(\"🔔 saveUserNotificationsDetails\", fid);\n}\n\nexport async function getUserNotificationsDetails(fid: number) {\n  let notificationDetailsByFid: any = await db.get(dbKey) || {};\n  return notificationDetailsByFid[fid];\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  let notificationDetailsByFid: any = await db.get(dbKey) || {};\n\n  for (const fid in notificationDetailsByFid) {\n    const notificationDetails = notificationDetailsByFid[fid];\n    console.log(\"🔔 sendNotificationToAllUsers\", fid);\n    try {\n      await sendNotification(notificationDetails, payload);\n    } catch (error) {\n      console.error(\"🔔 sendNotificationToAllUsers: error sending to\", fid, error);\n    }\n  }\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}",[],[198,358],"f0970ea2-3513-11f0-83f7-9e149126039e","db.ts","d7479e32-3f25-48a8-a5cf-72141838cfab",["D",1747702020527],"import { blob } from \"https://esm.town/v/std/blob\";\n\nconst projectPrefix = \"miniapp-starter\";\n\nexport async function get(key: string) {\n  return await blob.getJSON(`${projectPrefix}::${key}`);\n}\nexport async function set(key: string, value: any) {\n  return await blob.setJSON(`${projectPrefix}::${key}`, value);\n}",[],[198,365],"f0970c04-3513-11f0-83f7-9e149126039e","daily-notification.ts","64b7db5c-05c2-458c-a5ee-a88ec0598964",["D",1747702020527],"interval","import { sendNotificationToAllUsers } from \"./farcaster-notifications.ts\";\n\nconst baseUrl = \"https://miniapp-starter.val.run\";\n\nexport default async function(interval: Interval) {\n  // await sendNotificationToAllUsers({\n  //   title: \"Example daily notification\",\n  //   body: \"Hello, World!\",\n  //   targetUrl: baseUrl,\n  // });\n}",[],[198,372],["D",1747702020527],[220,221,222,223,224,225],[198],"f096cfbe-3513-11f0-83f7-9e149126039e","tasks.json","00615b1d-27f8-49ac-889d-680ea2fd1b36",["D",1747702020527],"{\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 browse\",\n      \"type\": \"shell\",\n      \"command\": \"vt browse\",\n    },\n  ]\n}\n",[],[203,383],["D",1747702020527],[218],[203],["D",1747702020527],{"_95":94,"_102":98},{"_95":94,"_96":-5,"_97":98,"_18":51,"_99":100,"_101":24},{"_13":14,"_31":82,"_40":39,"_83":41,"_84":85,"_86":87,"_88":47,"_89":90,"_91":61,"_92":42,"_93":94},"ctx",{"_75":-5,"_124":429,"_430":431,"_432":433,"_434":24,"_435":24,"_436":24,"_437":55,"_438":-5,"_439":-7,"_440":-7,"_441":59,"_442":24,"_443":24,"_444":-5,"_445":24,"_446":24,"_447":24,"_448":-5},"ENV",{"_400":401,"_402":403,"_404":82,"_405":406,"_407":408,"_409":410,"_411":412,"_413":414,"_415":416,"_417":418,"_419":420,"_421":422,"_423":424,"_425":426,"_427":428},"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 · v7