fix: update basic frame template (#523)

Author: stephancill

templates/express/src/entry-server.tsx

@@ -14,38 +14,30 @@ const frames = createFrames({
   ],
 });
 
-export const handleRequest = frames(async ctx => {
+export const handleRequest = frames(async (ctx) => {
+  if (!ctx.message) {
+    return {
+      image: (
+        <div>
+          This is the initial frame which will be shown before the user has
+          interacted with the frame.
+        </div>
+      ),
+      buttons: [<Button action="post">Say hello</Button>],
+    };
+  }
+
+  if (!ctx.message.isValid) {
+    throw new Error("Invalid message");
+  }
+
   return {
-    image: ctx.message ? (
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "column",
-        }}
-      >
-        GM, {ctx.message.requesterUserData?.displayName}! Your FID is{" "}
+    image: (
+      <div>
+        Hello {ctx.message.requesterUserData?.displayName}! Your FID is{" "}
         {ctx.message.requesterFid}
-        {", "}
-        {ctx.message.requesterFid < 20_000
-          ? "you're OG!"
-          : "welcome to the Farcaster!"}
-      </div>
-    ) : (
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "column",
-        }}
-      >
-        Say GM
       </div>
     ),
-    buttons: !ctx.url.searchParams.has("saidGm")
-      ? [
-          <Button action="post" key="1" target={{ query: { saidGm: true } }}>
-            Say GM
-          </Button>,
-        ]
-      : [],
+    buttons: [],
   };
 });

templates/hono/src/server.tsx

@@ -18,39 +18,31 @@ const frames = createFrames({
   ],
 });
 
-const handleRequest = frames(async ctx => {
+const handleRequest = frames(async (ctx) => {
+  if (!ctx.message) {
+    return {
+      image: (
+        <div>
+          This is the initial frame which will be shown before the user has
+          interacted with the frame.
+        </div>
+      ),
+      buttons: [<Button action="post">Say hello</Button>],
+    };
+  }
+
+  if (!ctx.message.isValid) {
+    throw new Error("Invalid message");
+  }
+
   return {
-    image: ctx.message ? (
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "column",
-        }}
-      >
-        GM, {ctx.message.requesterUserData?.displayName}! Your FID is{" "}
+    image: (
+      <div>
+        Hello {ctx.message.requesterUserData?.displayName}! Your FID is{" "}
         {ctx.message.requesterFid}
-        {", "}
-        {ctx.message.requesterFid < 20_000
-          ? "you're OG!"
-          : "welcome to the Farcaster!"}
-      </div>
-    ) : (
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "column",
-        }}
-      >
-        Say GM
       </div>
     ),
-    buttons: !ctx.url.searchParams.has("saidGm")
-      ? [
-          <Button action="post" key="1" target={{ query: { saidGm: true } }}>
-            Say GM
-          </Button>,
-        ]
-      : [],
+    buttons: [],
   };
 });
 

templates/next/app/frames/frames.ts

@@ -0,0 +1,16 @@
+import { farcasterHubContext } from "frames.js/middleware";
+import { createFrames } from "frames.js/next";
+
+export const frames = createFrames({
+  basePath: "/frames",
+  middleware: [
+    farcasterHubContext({
+      // remove if you aren't using @frames.js/debugger or you just don't want to use the debugger hub
+      ...(process.env.NODE_ENV === "production"
+        ? {}
+        : {
+            hubHttpUrl: "http://localhost:3010/hub",
+          }),
+    }),
+  ],
+});

templates/next/app/frames/route.tsx

@@ -1,53 +1,31 @@
-import { farcasterHubContext } from "frames.js/middleware";
-import { createFrames, Button } from "frames.js/next";
-
-const frames = createFrames({
-  basePath: '/frames',
-  middleware: [
-    farcasterHubContext({
-      // remove if you aren't using @frames.js/debugger or you just don't want to use the debugger hub
-      ...(process.env.NODE_ENV === "production"
-        ? {}
-        : {
-            hubHttpUrl: "http://localhost:3010/hub",
-          }),
-    }),
-  ],
-});
+import { Button } from "frames.js/next";
+import { frames } from "./frames";
 
 const handleRequest = frames(async (ctx) => {
+  if (!ctx.message) {
+    return {
+      image: (
+        <div>
+          This is the initial frame which will be shown before the user has
+          interacted with the frame.
+        </div>
+      ),
+      buttons: [<Button action="post">Say hello</Button>],
+    };
+  }
+
+  if (!ctx.message.isValid) {
+    throw new Error("Invalid message");
+  }
+
   return {
-    image: ctx.message ? (
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "column",
-        }}
-      >
-        GM, {ctx.message.requesterUserData?.displayName}! Your FID is{" "}
+    image: (
+      <div>
+        Hello {ctx.message.requesterUserData?.displayName}! Your FID is{" "}
         {ctx.message.requesterFid}
-        {", "}
-        {ctx.message.requesterFid < 20_000
-          ? "you're OG!"
-          : "welcome to the Farcaster!"}
-      </div>
-    ) : (
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "column",
-        }}
-      >
-        Say GM
       </div>
     ),
-    buttons: !ctx.url.searchParams.has("saidGm")
-      ? [
-          <Button action="post" target={{ query: { saidGm: true } }}>
-            Say GM
-          </Button>,
-        ]
-      : [],
+    buttons: [],
   };
 });