feat: added tx

coinbase · Mar 4, 2024 · 7ecaf52 · 7ecaf52
1 parent a89ba78
commit 7ecaf52
Show file tree

Hide file tree

Showing 6 changed files with 79 additions and 5 deletions.
diff --git a/.changeset/honest-hounds-tie.md 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
diff --git 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
@@ -139,6 +139,30 @@ describe('getFrameHtmlResponse', () => {
   <meta property="og:image" content="https://zizzamia.xyz/park-1.png" />
   <meta property="fc:frame:image" content="https://zizzamia.xyz/park-1.png" />
 
+</head>
+</html>`);
+  });
+
+  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(`<!DOCTYPE html>
+<html>
+<head>
+  <meta property="og:description" content="Frame description" />
+  <meta property="og:title" content="Frame title" />
+  <meta property="fc:frame" content="vNext" />
+  <meta property="fc:frame:button:1" content="Transaction" />
+  <meta property="fc:frame:button:1:action" content="tx" />
+  <meta property="fc:frame:button:1:target" content="https://zizzamia.xyz/api/frame/tx" />
+  <meta property="og:image" content="https://zizzamia.xyz/park-1.png" />
+  <meta property="fc:frame:image" content="https://zizzamia.xyz/park-1.png" />
+
 </head>
 </html>`);
   });
@@ -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('<meta property="fc:frame:button:1" content="Transaction" />');
+    expect(html).toContain('<meta property="fc:frame:button:1:action" content="tx" />');
+    expect(html).toContain(
+      '<meta property="fc:frame:button:1:target" content="https://example.com/api/tx7" />',
+    );
+    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
@@ -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': 'Mint',
+      '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
@@ -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
@@ -1 +1 @@
-export const version = '0.9.5';
+export const version = '0.9.6';
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		export const version = '0.9.5';
		export const version = '0.9.6';