fix: handle button post_url attribute

.changeset/angry-eels-type.md

@@ -0,0 +1,7 @@
+---
+"frames.js": patch
+"@frames.js/debugger": patch
+"@frames.js/render": patch
+---
+
+fix: handle button post_url attribute

docs/pages/reference/js/types.mdx

@@ -131,8 +131,10 @@ export interface FrameButtonPost {
   /**
    * POST the packet to fc:frame:button:$idx:action:target if present
    * POST the packet to fc:frame:post_url if target was not present.
+   * POST the packet to fc:frame:button:$idx:post_url if target was not present.
    */
   target?: string;
+  post_url?: string;
   /** A 256-byte string which is label of the button */
   label: string;
 }

packages/debugger/app/frames/route.ts

@@ -114,6 +114,11 @@ export async function GET(request: NextRequest): Promise<Response> {
   } catch (err) {
     // eslint-disable-next-line no-console -- provide feedback to the developer
     console.error(err);
+
+    if (err instanceof Error) {
+      return Response.json({ message: err.message }, { status: 500 });
+    }
+
     return Response.json({ message: err }, { status: 500 });
   }
 }

packages/frames.js/src/frame-parsers/utils.ts

@@ -292,10 +292,24 @@ function parsePostOrPostRedirectButton(
     return undefined;
   }
 
+  if (
+    button.post_url &&
+    !isValid(
+      reporter,
+      `${metaPropertyPrefix}:${button.index}:post_url`,
+      validateUrl,
+      button.post_url,
+      false
+    )
+  ) {
+    return undefined;
+  }
+
   return {
     action: button.action as "post" | "post_redirect",
     label: button.label,
     target: button.target,
+    post_url: button.post_url,
   };
 }
 

packages/frames.js/src/getFrame.test.ts

@@ -320,4 +320,40 @@ describe("getFrame", () => {
       },
     });
   });
+
+  it("should parse button post_url (farcaster)", () => {
+    const html = `
+    <meta name="fc:frame" content="vNext"/>
+    <meta name="fc:frame:image" content="http://example.com/image.png"/>
+    <meta name="og:image" content="http://example.com/image.png"/>
+    <meta name="fc:frame:button:1" content="Submit"/>
+    <meta name="fc:frame:button:1:post_url" content="https://example.com/submit"/>
+    <title>test</title>
+    `;
+    const frame = getFrame({
+      htmlString: html,
+      url: "https://example.com",
+    });
+
+    expect(frame).toEqual({
+      status: "success",
+      frame: {
+        version: "vNext",
+        image: "http://example.com/image.png",
+        ogImage: "http://example.com/image.png",
+        buttons: [
+          {
+            label: "Submit",
+            action: "post",
+            target: undefined,
+            post_url: "https://example.com/submit",
+          },
+        ],
+        title: "test",
+        postUrl: "https://example.com/",
+      },
+      reports: {},
+      framesVersion: undefined,
+    });
+  });
 });

packages/frames.js/src/getFrameFlattened.test.ts

@@ -19,7 +19,7 @@ describe("getFrameFlattened", () => {
         {
           label: "Button 1",
           action: "post",
-          target: "target1",
+          post_url: "post1",
         },
         {
           label: "Button 2",
@@ -41,6 +41,7 @@ describe("getFrameFlattened", () => {
           version: "vNext",
         },
       ],
+      title: "test title",
     };
 
     const flattened = getFrameFlattened(frame);
@@ -54,7 +55,7 @@ describe("getFrameFlattened", () => {
       "fc:frame:image:aspect_ratio": "1:1",
       "fc:frame:button:1": "Button 1",
       "fc:frame:button:1:action": "post",
-      "fc:frame:button:1:target": "target1",
+      "fc:frame:button:1:post_url": "post1",
       "fc:frame:button:2": "Button 2",
       "fc:frame:button:2:action": "post",
       "fc:frame:button:2:target": "target2",
@@ -63,7 +64,7 @@ describe("getFrameFlattened", () => {
       "of:accepts:farcaster": "vNext",
       "of:button:1": "Button 1",
       "of:button:1:action": "post",
-      "of:button:1:target": "target1",
+      "of:button:1:post_url": "post1",
       "of:button:2": "Button 2",
       "of:button:2:action": "post",
       "of:button:2:target": "target2",
@@ -74,6 +75,7 @@ describe("getFrameFlattened", () => {
       "of:state": '{"foo":"bar"}',
       "of:version": "vNext",
       "frames.js:version": "0.0.0-mock",
+      "og:title": "test title",
     });
   });
 

packages/frames.js/src/getFrameFlattened.ts

@@ -52,7 +52,9 @@ export function getFrameFlattened(
               [`of:button:${index + 1}`]: button.label,
               [`of:button:${index + 1}:action`]: button.action,
               [`of:button:${index + 1}:target`]: button.target,
-              ...(button.action === "tx"
+              ...(button.action === "tx" ||
+              button.action === "post" ||
+              button.action === "post_redirect"
                 ? { [`of:button:${index + 1}:post_url`]: button.post_url }
                 : {}),
             }),
@@ -79,7 +81,9 @@ export function getFrameFlattened(
         [`fc:frame:button:${index + 1}`]: button.label,
         [`fc:frame:button:${index + 1}:action`]: button.action,
         [`fc:frame:button:${index + 1}:target`]: button.target,
-        ...(button.action === "tx"
+        ...(button.action === "tx" ||
+        button.action === "post" ||
+        button.action === "post_redirect"
           ? { [`fc:frame:button:${index + 1}:post_url`]: button.post_url }
           : {}),
       }),

packages/frames.js/src/types.ts

@@ -127,8 +127,10 @@ export interface FrameButtonPost {
   /**
    * POST the packet to fc:frame:button:$idx:action:target if present
    * POST the packet to fc:frame:post_url if target was not present.
+   * POST the packet to fc:frame:button:$idx:post_url if target was not present.
    */
   target?: string;
+  post_url?: string;
   /** A 256-byte string which is label of the button */
   label: string;
 }

packages/render/src/use-frame.tsx

@@ -402,7 +402,10 @@ export function useFrame<
         case "post_redirect": {
           try {
             const target =
-              frameButton.target || currentFrame.postUrl || homeframeUrl;
+              frameButton.target ||
+              frameButton.post_url ||
+              currentFrame.postUrl ||
+              homeframeUrl;
 
             if (!target) {
               throw new Error("missing target");