dope

coinbase · Mar 8, 2024 · 90e8668 · 90e8668
1 parent a5c2eb4
commit 90e8668
Show file tree

Hide file tree

Showing 6 changed files with 108 additions and 3 deletions.
diff --git a/.changeset/nine-wasps-work.md b/.changeset/nine-wasps-work.md
@@ -1,5 +1,5 @@
 ---
-"@coinbase/onchainkit": patch
+'@coinbase/onchainkit': patch
 ---
 
-- **feat**: added `post_url` optional metadata for `tx` Frame
+- **feat**: added `post_url` optional metadata for `tx` Frame. By @zizzamia #235
diff --git a/jest.config.js b/jest.config.js
@@ -1,5 +1,5 @@
 module.exports = {
-  modulePathIgnorePatterns: ["<rootDir>/framegear/"],
+  modulePathIgnorePatterns: ['<rootDir>/framegear/'],
   transform: {
     '^.+\\.tsx?$': 'ts-jest',
   },

diff --git a/src/frame/components/FrameMetadata.test.tsx b/src/frame/components/FrameMetadata.test.tsx
@@ -283,6 +283,71 @@ describe('FrameMetadata', () => {
     expect(meta.container.querySelectorAll('meta').length).toBe(6);
   });
 
+  it('renders with action tx', () => {
+    const meta = render(
+      <FrameMetadata
+        image="https://example.com/image.png"
+        buttons={[
+          {
+            label: 'TX',
+            action: 'tx',
+            target: 'https://zizzamia.xyz/api/frame/tx',
+          },
+        ]}
+      />,
+    );
+    expect(
+      meta.container.querySelector('meta[property="fc:frame:button:1:action"]'),
+    ).not.toBeNull();
+    expect(
+      meta.container
+        .querySelector('meta[property="fc:frame:button:1:action"]')
+        ?.getAttribute('content'),
+    ).toBe('tx');
+    expect(
+      meta.container.querySelector('meta[property="fc:frame:button:1:target"]'),
+    ).not.toBeNull();
+    expect(
+      meta.container
+        .querySelector('meta[property="fc:frame:button:1:target"]')
+        ?.getAttribute('content'),
+    ).toBe('https://zizzamia.xyz/api/frame/tx');
+    expect(meta.container.querySelectorAll('meta').length).toBe(6);
+  });
+
+  it('renders with action tx with post_url', () => {
+    const meta = render(
+      <FrameMetadata
+        image="https://example.com/image.png"
+        buttons={[
+          {
+            label: 'TX',
+            action: 'tx',
+            target: 'https://zizzamia.xyz/api/frame/tx',
+            postUrl: 'https://zizzamia.xyz/api/frame/tx-post-url',
+          },
+        ]}
+      />,
+    );
+    expect(
+      meta.container.querySelector('meta[property="fc:frame:button:1:action"]'),
+    ).not.toBeNull();
+    expect(
+      meta.container
+        .querySelector('meta[property="fc:frame:button:1:action"]')
+        ?.getAttribute('content'),
+    ).toBe('tx');
+    expect(
+      meta.container.querySelector('meta[property="fc:frame:button:1:post_url"]'),
+    ).not.toBeNull();
+    expect(
+      meta.container
+        .querySelector('meta[property="fc:frame:button:1:post_url"]')
+        ?.getAttribute('content'),
+    ).toBe('https://zizzamia.xyz/api/frame/tx-post-url');
+    expect(meta.container.querySelectorAll('meta').length).toBe(7);
+  });
+
   it('should not render action target if action is not link or mint', () => {
     const meta = render(
       <FrameMetadata

diff --git a/src/frame/components/FrameMetadata.tsx b/src/frame/components/FrameMetadata.tsx
@@ -88,6 +88,9 @@ export function FrameMetadata({
       {!!(button1 && button1.target) && (
         <meta property="fc:frame:button:1:target" content={button1.target} />
       )}
+      {!!(button1 && button1.action === 'tx' && button1.postUrl) && (
+        <meta property="fc:frame:button:1:post_url" content={button1.postUrl} />
+      )}
 
       {!!button2 && <meta property="fc:frame:button:2" content={button2.label} />}
       {!!(button2 && !!button2.action) && (
@@ -96,6 +99,9 @@ export function FrameMetadata({
       {!!(button2 && button2.target) && (
         <meta property="fc:frame:button:2:target" content={button2.target} />
       )}
+      {!!(button2 && button2.action === 'tx' && button2.postUrl) && (
+        <meta property="fc:frame:button:1:post_url" content={button2.postUrl} />
+      )}
 
       {!!button3 && <meta property="fc:frame:button:3" content={button3.label} />}
       {!!(button3 && !!button3.action) && (
@@ -104,6 +110,9 @@ export function FrameMetadata({
       {!!(button3 && button3.target) && (
         <meta property="fc:frame:button:3:target" content={button3.target} />
       )}
+      {!!(button3 && button3.action === 'tx' && button3.postUrl) && (
+        <meta property="fc:frame:button:1:post_url" content={button3.postUrl} />
+      )}
 
       {!!button4 && <meta property="fc:frame:button:4" content={button4.label} />}
       {!!(button4 && !!button4.action) && (
@@ -112,6 +121,9 @@ export function FrameMetadata({
       {!!(button4 && button4.target) && (
         <meta property="fc:frame:button:4:target" content={button4.target} />
       )}
+      {!!(button4 && button4.action === 'tx' && button4.postUrl) && (
+        <meta property="fc:frame:button:1:post_url" content={button4.postUrl} />
+      )}
 
       {!!postUrlToUse && <meta property="fc:frame:post_url" content={postUrlToUse} />}
 

diff --git a/src/frame/getFrameMetadata.test.ts b/src/frame/getFrameMetadata.test.ts
@@ -174,6 +174,31 @@ describe('getFrameMetadata', () => {
     });
   });
 
+  it('should return the correct metadata with action tx and post_url', () => {
+    expect(
+      getFrameMetadata({
+        buttons: [
+          {
+            label: 'Transaction',
+            action: 'tx',
+            target: 'https://zizzamia.xyz/api/frame/tx',
+            postUrl: 'https://zizzamia.xyz/api/frame/tx-post-url',
+          },
+        ],
+        image: 'https://zizzamia.xyz/park-1.png',
+        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:button:1:post_url': 'https://zizzamia.xyz/api/frame/tx-post-url',
+      'fc:frame:image': 'https://zizzamia.xyz/park-1.png',
+      '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({

diff --git a/src/frame/getFrameMetadata.ts b/src/frame/getFrameMetadata.ts
@@ -46,6 +46,9 @@ export const getFrameMetadata = function ({
       if (button.action && button.target) {
         metadata[`fc:frame:button:${index + 1}:target`] = button.target;
       }
+      if (button.action && button.action === 'tx' && button.postUrl) {
+        metadata[`fc:frame:button:${index + 1}:post_url`] = button.postUrl;
+      }
     });
   }
   if (postUrlToUse) {