wip: more faffing

wevm · Feb 7, 2024 · db93929 · db93929
1 parent 82d784e
commit db93929
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 4 deletions.
diff --git a/example/.gitignore b/example/.gitignore
@@ -1 +1,3 @@
 node_modules
+
+.vercel
diff --git a/example/src/index.tsx b/example/src/index.tsx
@@ -6,9 +6,42 @@ import { Button, Framework } from "@wevm/framework";
 
 const app = new Framework();
 
-app.frame("/", () => {
+app.frame("/", ({ untrustedData }) => {
+  const { buttonIndex } = untrustedData || {};
   return {
-    image: <div>hello</div>,
+    image: (
+      <div
+        style={{
+          backgroundColor: "black",
+          backgroundSize: "150px 150px",
+          height: "100%",
+          width: "100%",
+          display: "flex",
+          textAlign: "center",
+          alignItems: "center",
+          justifyContent: "center",
+          flexDirection: "column",
+          flexWrap: "nowrap",
+        }}
+      >
+        <div
+          style={{
+            fontSize: 60,
+            fontStyle: "normal",
+            letterSpacing: "-0.025em",
+            color: "white",
+            marginTop: 30,
+            padding: "0 120px",
+            lineHeight: 1.4,
+            whiteSpace: "pre-wrap",
+          }}
+        >
+          {typeof buttonIndex === "number"
+            ? `Button Index: ${buttonIndex}`
+            : "Welcome!"}
+        </div>
+      </div>
+    ),
     intents: (
       <>
         <Button>Apples</Button>

diff --git a/src/index.tsx b/src/index.tsx
@@ -2,6 +2,20 @@ import { type Context, Hono } from "hono";
 import { ImageResponse } from "hono-og";
 import { type JSXNode } from "hono/jsx";
 
+type FrameContext = Context & {
+  trustedData?: { messageBytes: string };
+  untrustedData?: {
+    fid: number;
+    url: string;
+    messageHash: string;
+    timestamp: number;
+    network: number;
+    buttonIndex?: 1 | 2 | 3 | 4;
+    castId: { fid: number; hash: string };
+    inputText?: string;
+  };
+};
+
 type FrameReturnType = {
   image: JSX.Element;
   intents: JSX.Element;
@@ -10,7 +24,7 @@ type FrameReturnType = {
 export class Framework extends Hono {
   frame(
     path: string,
-    handler: (c: Context) => FrameReturnType | Promise<FrameReturnType>,
+    handler: (c: FrameContext) => FrameReturnType | Promise<FrameReturnType>,
   ) {
     this.get(path, async (c) => {
       const { intents } = await handler(c);
@@ -20,17 +34,34 @@ export class Framework extends Hono {
             <meta property="fc:frame" content="vNext" />
             <meta property="fc:frame:image" content={`${c.req.url}_og`} />
             <meta property="og:image" content={`${c.req.url}_og`} />
+            <meta property="fc:frame:post_url" content={c.req.url} />
             {parseIntents(intents)}
           </head>
         </html>,
       );
     });
 
     // TODO: don't slice
-    this.get(`${path.slice(1)}/_og`, async (c) => {
+    this.get(`${path.slice(1)}_og`, async (c) => {
       const { image } = await handler(c);
       return new ImageResponse(image);
     });
+
+    this.post(path, async (c) => {
+      const context = await parsePostContext(c);
+      const { intents } = await handler(context);
+      return c.render(
+        <html lang="en">
+          <head>
+            <meta property="fc:frame" content="vNext" />
+            <meta property="fc:frame:image" content={`${c.req.url}_og`} />
+            <meta property="og:image" content={`${c.req.url}_og`} />
+            <meta property="fc:frame:post_url" content={c.req.url} />
+            {parseIntents(intents)}
+          </head>
+        </html>,
+      );
+    });
   }
 }
 
@@ -50,6 +81,12 @@ export function Button({ children }: ButtonProps) {
 
 type Counter = { button: number };
 
+async function parsePostContext(ctx: Context): Promise<FrameContext> {
+  const { trustedData, untrustedData } =
+    (await ctx.req.json().catch(() => {})) || {};
+  return Object.assign(ctx, { trustedData, untrustedData });
+}
+
 function parseIntents(intents_: JSX.Element) {
   const intents = intents_ as unknown as JSXNode;
   const counter: Counter = {