diff --git a/.changeset/honest-hounds-tie.md b/.changeset/honest-hounds-tie.md new file mode 100644 index 0000000000..38f0f9f6b3 --- /dev/null +++ b/.changeset/honest-hounds-tie.md @@ -0,0 +1,5 @@ +--- +'@coinbase/onchainkit': patch +--- + +- **feat**: added `tx` as a Frame action option, enabling support for Frame Transactions. By @zizzamia #208 diff --git a/site/docs/pages/frame/types.mdx b/site/docs/pages/frame/types.mdx index eda52c857f..67630ab748 100644 --- a/site/docs/pages/frame/types.mdx +++ b/site/docs/pages/frame/types.mdx @@ -10,7 +10,7 @@ deescription: Glossary of Types in Frame Kit. ```ts type FrameButtonMetadata = | { - action: 'link' | 'mint'; + action: 'link' | 'mint' | 'tx'; label: string; target: string; } diff --git a/src/frame/getFrameHtmlResponse.test.ts b/src/frame/getFrameHtmlResponse.test.ts index 7b70fc119a..02bf88b298 100644 --- a/src/frame/getFrameHtmlResponse.test.ts +++ b/src/frame/getFrameHtmlResponse.test.ts @@ -139,6 +139,30 @@ describe('getFrameHtmlResponse', () => { + +`); + }); + + it('should return correct HTML with action tx', () => { + const html = getFrameHtmlResponse({ + buttons: [ + { label: 'Transaction', action: 'tx', target: 'https://zizzamia.xyz/api/frame/tx' }, + ], + image: 'https://zizzamia.xyz/park-1.png', + }); + + expect(html).toBe(` + + + + + + + + + + + `); }); @@ -212,7 +236,7 @@ describe('getFrameHtmlResponse', () => { expect(html).not.toContain('fc:frame:refresh_period'); }); - it('should not render action target if action is not link or mint', () => { + it('should not render action target if action is not link, mint or tx', () => { const html = getFrameHtmlResponse({ buttons: [{ label: 'button1', action: 'post' }], image: 'image', @@ -296,6 +320,28 @@ describe('getFrameHtmlResponse', () => { expect(html).not.toContain('fc:frame:button:4:target'); }); + it('should set a target when action is tx', () => { + const html = getFrameHtmlResponse({ + buttons: [{ label: 'Transaction', action: 'tx', target: 'https://example.com/api/tx7' }], + image: 'image', + }); + + expect(html).toContain(''); + expect(html).toContain(''); + expect(html).toContain( + '', + ); + expect(html).not.toContain('fc:frame:button:2'); + expect(html).not.toContain('fc:frame:button:2:action'); + expect(html).not.toContain('fc:frame:button:2:target'); + expect(html).not.toContain('fc:frame:button:3'); + expect(html).not.toContain('fc:frame:button:3:action'); + expect(html).not.toContain('fc:frame:button:3:target'); + expect(html).not.toContain('fc:frame:button:4'); + expect(html).not.toContain('fc:frame:button:4:action'); + expect(html).not.toContain('fc:frame:button:4:target'); + }); + it('should handle no state', () => { const html = getFrameHtmlResponse({ buttons: [{ label: 'button1' }], diff --git a/src/frame/getFrameMetadata.test.ts b/src/frame/getFrameMetadata.test.ts index 480a99cfc3..20f490770b 100644 --- a/src/frame/getFrameMetadata.test.ts +++ b/src/frame/getFrameMetadata.test.ts @@ -151,7 +151,30 @@ describe('getFrameMetadata', () => { }); }); - it('should not render action target if action is not link or mint', () => { + it('should return the correct metadata with action tx', () => { + expect( + getFrameMetadata({ + buttons: [ + { label: 'Transaction', action: 'tx', target: 'https://zizzamia.xyz/api/frame/tx' }, + ], + image: 'https://zizzamia.xyz/park-1.png', + input: { + text: 'Tell me a boat story', + }, + postUrl: 'https://zizzamia.xyz/api/frame', + }), + ).toEqual({ + 'fc:frame': 'vNext', + 'fc:frame:button:1': 'Transaction', + 'fc:frame:button:1:action': 'tx', + 'fc:frame:button:1:target': 'https://zizzamia.xyz/api/frame/tx', + 'fc:frame:image': 'https://zizzamia.xyz/park-1.png', + 'fc:frame:input:text': 'Tell me a boat story', + 'fc:frame:post_url': 'https://zizzamia.xyz/api/frame', + }); + }); + + it('should not render action target if action is not link, mint or tx', () => { expect( getFrameMetadata({ buttons: [{ label: 'button1', action: 'post' }], diff --git a/src/frame/types.ts b/src/frame/types.ts index a182f51240..b2392a09e9 100644 --- a/src/frame/types.ts +++ b/src/frame/types.ts @@ -77,7 +77,7 @@ export function convertToFrame(json: any) { */ export type FrameButtonMetadata = | { - action: 'link' | 'mint'; + action: 'link' | 'mint' | 'tx'; label: string; target: string; } diff --git a/src/version.ts b/src/version.ts index d8a30fb865..2352ca0c9f 100644 --- a/src/version.ts +++ b/src/version.ts @@ -1 +1 @@ -export const version = '0.9.5'; +export const version = '0.9.6';