diff --git a/.changeset/brave-chefs-pay.md b/.changeset/brave-chefs-pay.md new file mode 100644 index 000000000..44f62e80f --- /dev/null +++ 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 index 42b935d16..3e6d17acb 100644 --- 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 index eccfc72e4..59a38714c 100644 --- 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; + /** * 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 = { '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; };