feat: Adding Farcaster Frames and OG Image (#29)

scaffold-eth · Mar 15, 2024 · fc1c64d · fc1c64d
1 parent ed7a0bc
commit fc1c64d
Show file tree

Hide file tree

Showing 11 changed files with 88 additions and 7 deletions.
diff --git a/packages/nextjs/components/MetaHeader.tsx b/packages/nextjs/components/MetaHeader.tsx
@@ -16,12 +16,12 @@ const baseUrl = process.env.NEXT_PUBLIC_VERCEL_URL ? `https://${process.env.NEXT
 export const MetaHeader = ({
   title = "Scaffold-ETH 2 - Open source toolkit to build dApps on Ethereum",
   description = "An open-source, up-to-date toolkit for building decentralized applications (dapps) on the Ethereum blockchain. It's designed to make it easier for developers to create and deploy smart contracts and build user interfaces that interact with those contracts.",
-  image = "thumbnail.jpg",
+  image = "og-image.png",
   twitterCard = "summary_large_image",
   children,
 }: MetaHeaderProps) => {
   const imageUrl = baseUrl + image;
-  const twitterImageUrl = baseUrl + "twitterThumbnail.jpg";
+  const twitterImageUrl = baseUrl + "twitterThumbnail.png";
 
   return (
     <Head>
@@ -43,6 +43,20 @@ export const MetaHeader = ({
         <>
           <meta property="og:image" content={imageUrl} />
           <meta name="twitter:image" content={twitterImageUrl} />
+
+          <meta property="fc:frame" content="vNext" />
+          <meta property="fc:frame:image" content={imageUrl} />
+
+          <meta property="fc:frame:button:1" content="🛠️ GitHub" />
+          <meta property="fc:frame:button:1:action" content="link" />
+          <meta property="fc:frame:button:1:target" content="https://github.com/scaffold-eth/scaffold-eth-2" />
+
+          <meta property="fc:frame:button:2" content="📃 Docs" />
+          <meta property="fc:frame:button:2:action" content="link" />
+          <meta property="fc:frame:button:2:target" content="https://docs.scaffoldeth.io/" />
+
+          <meta property="fc:frame:button:3" content="Features →" />
+          <meta property="fc:frame:post_url" content={`${baseUrl}api?id=1`} />
         </>
       )}
       {twitterCard && <meta name="twitter:card" content={twitterCard} />}

diff --git a/packages/nextjs/pages/api/index.ts b/packages/nextjs/pages/api/index.ts
@@ -0,0 +1,49 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+
+const baseUrl = process.env.NEXT_PUBLIC_VERCEL_URL
+  ? `https://${process.env.NEXT_PUBLIC_VERCEL_URL}`
+  : "http://localhost:3000";
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  try {
+    const { query } = req;
+
+    let idAsNumber = 1;
+
+    if (query && query.id) {
+      idAsNumber = Number(query.id);
+    }
+
+    const nextId = idAsNumber + 1;
+
+    if (idAsNumber === 6) {
+      res.status(200).send(`<!DOCTYPE html><html><head>
+      <title>Scaffold-ETH 2 - Open source toolkit to build dApps on Ethereum</title>
+      <meta property="og:image" content="${baseUrl}/frames/buidlguidl.jpg" />
+      <meta property="fc:frame" content="vNext" />
+      <meta property="fc:frame:image" content="${baseUrl}/frames/buidlguidl.jpg" />
+      <meta property="fc:frame:button:1" content="🛠️ GitHub" />
+      <meta property="fc:frame:button:1:action" content="link" />
+      <meta property="fc:frame:button:1:target" content="https://github.com/scaffold-eth/scaffold-eth-2" />
+      <meta property="fc:frame:button:2" content="📃 Docs" />
+      <meta property="fc:frame:button:2:action" content="link" />
+      <meta property="fc:frame:button:2:target" content="https://docs.scaffoldeth.io/" />
+      <meta property="fc:frame:button:3" content="💬 Telegram" />
+      <meta property="fc:frame:button:3:action" content="link" />
+      <meta property="fc:frame:button:3:target" content="https://t.me/joinchat/KByvmRe5wkR-8F_zz6AjpA" />
+      </head></html>`);
+    } else {
+      res.status(200).send(`<!DOCTYPE html><html><head>
+        <title>Scaffold-ETH 2 - Open source toolkit to build dApps on Ethereum</title>
+        <meta property="og:image" content="${baseUrl}/frames/frame-${idAsNumber}.png" />
+        <meta property="fc:frame" content="vNext" />
+        <meta property="fc:frame:image" content="${baseUrl}/frames/frame-${idAsNumber}.png" />
+        <meta property="fc:frame:button:1" content="Next →" />
+        <meta property="fc:frame:post_url" content="${baseUrl}/api?id=${nextId}" />
+      </head></html>`);
+    }
+  } catch (err) {
+    console.log("err", err);
+    res.status(500).send({ error: "failed to load frame" });
+  }
+}
diff --git a/packages/nextjs/public/frames/buidlguidl.jpg b/packages/nextjs/public/frames/buidlguidl.jpg
diff --git a/packages/nextjs/public/frames/frame-1.png b/packages/nextjs/public/frames/frame-1.png
diff --git a/packages/nextjs/public/frames/frame-2.png b/packages/nextjs/public/frames/frame-2.png
diff --git a/packages/nextjs/public/frames/frame-3.png b/packages/nextjs/public/frames/frame-3.png
diff --git a/packages/nextjs/public/frames/frame-4.png b/packages/nextjs/public/frames/frame-4.png
diff --git a/packages/nextjs/public/frames/frame-5.png b/packages/nextjs/public/frames/frame-5.png
diff --git a/packages/nextjs/public/og-image.png b/packages/nextjs/public/og-image.png
diff --git a/packages/nextjs/public/twitterThumbnail.png b/packages/nextjs/public/twitterThumbnail.png
diff --git a/packages/nextjs/tsconfig.json b/packages/nextjs/tsconfig.json
@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "es2020",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -15,9 +19,23 @@
     "jsx": "preserve",
     "incremental": true,
     "paths": {
-      "~~/*": ["./*"]
-    }
+      "~~/*": [
+        "./*"
+      ]
+    },
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }