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

coinbase · Jan 30, 2024 · 0695eb9 · 0695eb9
1 parent f4ac739
commit 0695eb9
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 7 deletions.
diff --git a/.changeset/brave-chefs-pay.md b/.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)
diff --git a/src/core/getFrameMetadata.test.ts b/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',
  }),

diff --git a/src/core/getFrameMetadata.ts b/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;
 };