Merge pull request #472 from reservoirprotocol/armando/grwth-4027-upd…

…ate-explorer-collectionasset-og-image-to-serve-a-similiar WIP: Update token image to serve a more dynamic image
reservoirprotocol · Feb 13, 2024 · 7daa9af · 7daa9af
2 parents eeab881 + 94818d0
commit 7daa9af
Show file tree

Hide file tree

Showing 6 changed files with 1,088 additions and 14 deletions.
diff --git a/package.json b/package.json
@@ -32,6 +32,7 @@
     "@reservoir0x/reservoir-kit-ui": "1.25.7",
     "@sentry/nextjs": "^7.85.0",
     "@types/uuid": "^9.0.1",
+    "@vercel/og": "^0.5.20",
     "dayjs": "^1.11.6",
     "eslint-config-next": "^14.1.0",
     "framer-motion": "^6.3.6",

diff --git a/pages/[chain]/asset/[assetId].tsx b/pages/[chain]/asset/[assetId].tsx
@@ -226,10 +226,14 @@ const IndexPage: NextPage<Props> = ({ assetId, ssr }) => {
     ? token.token.name
     : `${token?.token?.tokenId} - ${token?.token?.collection?.name}`
 
+  const base64EncodedToken = btoa(JSON.stringify(token))
+
   return (
     <Layout>
       <Head
-        ogImage={token?.token?.image || collection?.banner}
+        ogImage={`/api/og/token?token=${encodeURIComponent(
+          base64EncodedToken
+        )}`}
         title={pageTitle}
         description={collection?.description as string}
         metatags={
@@ -272,6 +276,12 @@ const IndexPage: NextPage<Props> = ({ assetId, ssr }) => {
           </>
         }
       />
+      <meta
+        name="twitter:image"
+        content={`/api/og/token?token=${encodeURIComponent(
+          base64EncodedToken
+        )}`}
+      />
       <Flex
         justify="center"
         css={{