Merge pull request #5 from goldsky-io/frames-refresh-token

improved refresh for latest token

src/lib/components/Seo/seo.svelte

@@ -18,10 +18,13 @@
     const buttons: Frame['buttons'] = frame.buttons || [
       { label: '🔄 Refresh latest', action: 'post' },
     ]
+    // we don't include tokenId in the frame context because we don't want to
+    // refresh the same token over and over
+    const { tokenId, ...state } = context
 
     return getFrameHtmlHead({
       version: 'vNext',
-      postUrl: `${baseUrl}/frame?${new URLSearchParams({ context: JSON.stringify(context) }).toString()}`,
+      postUrl: `${baseUrl}/frame?${new URLSearchParams({ context: JSON.stringify(state) }).toString()}`,
       image: ogImage,
       buttons,
       ...frame,

src/lib/server/poap.ts

@@ -99,3 +99,18 @@ export function fetchLatestAccountPOAPToken(address: string, fetch: Fetch) {
     )
     .toPromise()
 }
+
+export function fetchLatestPOAPToken(fetch: Fetch) {
+  return createClient(fetch)
+    .query<{ tokens: { id: string }[] }>(
+      gql`
+        query LatestToken {
+          tokens(first: 1, orderBy: created, orderDirection: desc) {
+            id
+          }
+        }
+      `,
+      {},
+    )
+    .toPromise()
+}

src/routes/frame/+server.ts

@@ -1,9 +1,10 @@
 import { error } from '@sveltejs/kit'
 import { getFrameHtml, validateFrameMessage, type FrameActionPayload } from 'frames.js'
 import type { SeoContext } from '$lib/components/Seo'
+import { fetchLatestPOAPToken } from '$lib/server/poap'
 import type { RequestHandler } from './$types'
 
-export const POST: RequestHandler = async ({ request, url }) => {
+export const POST: RequestHandler = async ({ request, url, fetch }) => {
   const baseUrl = import.meta.env.DEV ? 'http://localhost:5173' : 'https://vpoap.vercel.app'
   const context = JSON.parse(url.searchParams.get('context') || '{}') as SeoContext
   const body = (await request.json()) as FrameActionPayload
@@ -14,7 +15,7 @@ export const POST: RequestHandler = async ({ request, url }) => {
   }
 
   const html = getFrameHtml({
-    image: imageUrl(),
+    image: await imageUrl(),
     version: 'vNext',
     buttons: [
       {
@@ -32,12 +33,31 @@ export const POST: RequestHandler = async ({ request, url }) => {
     status: 200,
   })
 
-  function imageUrl() {
+  async function imageUrl() {
     const at = new Date().getTime()
-    if (context.tokenId) return `${baseUrl}/og/token/${context.tokenId}?at=${at}`
     if (context.eventIds) return `${baseUrl}/og/event/${context.eventIds.join(',')}?at=${at}`
     if (context.account) return `${baseUrl}/og/account/${context.account}?at=${at}`
 
-    return `${baseUrl}/images/twitter-card.png`
+    const { data, error: tokenError } = await fetchLatestPOAPToken(fetch)
+
+    if (tokenError) {
+      console.error('Failed to fetch POAP token', tokenError)
+      throw error(422, 'Failed to fetch POAP token')
+    }
+
+    if (!data) {
+      console.error('Failed to fetch POAP token data')
+      throw error(422, 'Failed to fetch POAP token data')
+    }
+
+    if (!data.tokens || data.tokens.length === 0) {
+      console.error('POAP token not found')
+      throw error(404, 'POAP token not found')
+    }
+
+    const tokenId = data.tokens[0]?.id
+    if (!tokenId) throw error(404, 'POAP token missing id')
+
+    return `${baseUrl}/og/token/${tokenId}?at=${at}`
   }
 }

src/routes/og/token/[id]/og-token.svelte

@@ -94,7 +94,9 @@
         </h2>
       </div>
       <div style:flex="1 1 0%" style:display="flex" style:overflow="hidden">
-        <p style:margin="0">{metadata.description}</p>
+        <p style:margin="0" style:overflow="hidden" style:white-space="pre-wrap">
+          {metadata.description.replace(/\r?\n/g, ' ')}
+        </p>
       </div>
       <div
         style:display="flex"