feat: update getFrameMetadata to the latest Frame APIs (#43)

.changeset/brave-chefs-pay.md

@@ -0,0 +1,5 @@
+---
+'@coinbase/onchainkit': minor
+---
+
+- **feat** update `getFrameMetadata` to the latest [Frame APIs](https://warpcast.com/v/0x24295a0a)

src/core/getFrameMetadata.test.ts

@@ -4,14 +4,20 @@ describe('getFrameMetadata', () => {
   it('should return the correct metadata', () => {
     expect(
       getFrameMetadata({
-        buttons: ['button1', 'button2', 'button3'],
+        buttons: [
+          { label: 'button1', action: 'post' },
+          { label: 'button2', action: 'post_redirect' },
+          { label: 'button3' },
+        ],
         image: 'image',
         post_url: 'post_url',
       }),
     ).toEqual({
       'fc:frame': 'vNext',
       'fc:frame:button:1': 'button1',
+      'fc:frame:button:1:action': 'post',
       'fc:frame:button:2': 'button2',
+      'fc:frame:button:2:action': 'post_redirect',
       'fc:frame:button:3': 'button3',
       'fc:frame:image': 'image',
       'fc:frame:post_url': 'post_url',
@@ -21,7 +27,39 @@ describe('getFrameMetadata', () => {
   it('should return the correct metadata with one button', () => {
     expect(
       getFrameMetadata({
-        buttons: ['button1'],
+        buttons: [{ label: 'button1' }],
+        image: 'image',
+        post_url: 'post_url',
+      }),
+    ).toEqual({
+      'fc:frame': 'vNext',
+      'fc:frame:button:1': 'button1',
+      'fc:frame:image': 'image',
+      'fc:frame:post_url': 'post_url',
+    });
+  });
+
+  it('should return the correct metadata with refresh_period', () => {
+    expect(
+      getFrameMetadata({
+        buttons: [{ label: 'button1' }],
+        image: 'image',
+        post_url: 'post_url',
+        refresh_period: 10,
+      }),
+    ).toEqual({
+      'fc:frame': 'vNext',
+      'fc:frame:button:1': 'button1',
+      'fc:frame:image': 'image',
+      'fc:frame:post_url': 'post_url',
+      'fc:frame:refresh_period': '10',
+    });
+  });
+
+  it('should return the correct metadata with no refresh_period', () => {
+    expect(
+      getFrameMetadata({
+        buttons: [{ label: 'button1' }],
         image: 'image',
         post_url: 'post_url',
       }),

src/core/getFrameMetadata.ts

@@ -1,24 +1,44 @@
-type FrameMetadataResponse = {
-  buttons: string[];
+type Button = {
+  label: string;
+  action?: 'post' | 'post_redirect';
+};
+
+type FrameMetadata = {
+  buttons: [Button, ...Button[]];
   image: string;
   post_url: string;
+  refresh_period?: number;
 };
 
+type FrameMetadataResponse = Record<string, string>;
+
 /**
  * This function generates the metadata for a Farcaster Frame.
- * @param buttons: An array of button names.
+ * @param buttons: The buttons to use for the frame.
  * @param image: The image to use for the frame.
  * @param post_url: The URL to post the frame to.
+ * @param refresh_period: The refresh period for the image used.
  * @returns The metadata for the frame.
  */
-export const getFrameMetadata = function ({ buttons, image, post_url }: FrameMetadataResponse) {
+export const getFrameMetadata = function ({
+  buttons,
+  image,
+  post_url,
+  refresh_period,
+}: FrameMetadata): FrameMetadataResponse {
   const metadata: Record<string, string> = {
     'fc:frame': 'vNext',
   };
   buttons.forEach((button, index) => {
-    metadata[`fc:frame:button:${index + 1}`] = button;
+    metadata[`fc:frame:button:${index + 1}`] = button.label;
+    if (button.action) {
+      metadata[`fc:frame:button:${index + 1}:action`] = button.action;
+    }
   });
   metadata['fc:frame:image'] = image;
   metadata['fc:frame:post_url'] = post_url;
+  if (refresh_period) {
+    metadata['fc:frame:refresh_period'] = refresh_period.toString();
+  }
   return metadata;
 };