scaffold-eth · carletex · Mar 15, 2024 · Mar 14, 2024 · Mar 14, 2024 · Mar 14, 2024
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"
+  ]
 }