feat: added post_url optional metadata for tx Frame

.changeset/nine-wasps-work.md

@@ -0,0 +1,5 @@
+---
+'@coinbase/onchainkit': patch
+---
+
+- **feat**: added `post_url` optional metadata for `tx` Frame. By @zizzamia, @cnasc, @spennyp #237

framegear/utils/frameResultToFrameMetadata.ts

@@ -1,4 +1,4 @@
-import { FrameImageMetadata, FrameMetadataType } from '@coinbase/onchainkit';
+import { FrameImageMetadata, FrameMetadataType } from '@coinbase/onchainkit/frame';
 
 export type FrameMetadataWithImageObject = FrameMetadataType & {
   image: FrameImageMetadata;

framegear/utils/postFrame.ts

@@ -1,4 +1,4 @@
-import { FrameRequest, MockFrameRequestOptions } from '@coinbase/onchainkit';
+import { FrameRequest, MockFrameRequestOptions } from '@coinbase/onchainkit/frame';
 import { parseHtml } from './parseHtml';
 
 type FrameData = FrameRequest['untrustedData'];

framegear/utils/store.ts

@@ -1,6 +1,6 @@
 import { atom } from 'jotai';
 import { fetchFrame } from './fetchFrame';
-import { MockFrameRequestOptions } from '@coinbase/onchainkit';
+import { MockFrameRequestOptions } from '@coinbase/onchainkit/frame';
 
 // We store an array here so that we can step through history, e.g. seeing the
 // chain of responses through a number of frame actions.

jest.config.js

@@ -1,5 +1,5 @@
 module.exports = {
-  // ...
+  modulePathIgnorePatterns: ['<rootDir>/framegear/'],
   transform: {
     '^.+\\.tsx?$': 'ts-jest',
   },

src/frame/components/FrameMetadata.test.tsx

@@ -283,6 +283,104 @@ 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',
+          },
+          {
+            label: 'TX',
+            action: 'tx',
+            target: 'https://zizzamia.xyz/api/frame/tx2',
+            postUrl: 'https://zizzamia.xyz/api/frame/tx-post-url2',
+          },
+          {
+            label: 'TX',
+            action: 'tx',
+            target: 'https://zizzamia.xyz/api/frame/tx3',
+            postUrl: 'https://zizzamia.xyz/api/frame/tx-post-url3',
+          },
+          {
+            label: 'TX',
+            action: 'tx',
+            target: 'https://zizzamia.xyz/api/frame/tx4',
+            postUrl: 'https://zizzamia.xyz/api/frame/tx-post-url4',
+          },
+        ]}
+      />,
+    );
+    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
+        .querySelector('meta[property="fc:frame:button:2:post_url"]')
+        ?.getAttribute('content'),
+    ).toBe('https://zizzamia.xyz/api/frame/tx-post-url2');
+    expect(
+      meta.container
+        .querySelector('meta[property="fc:frame:button:3:post_url"]')
+        ?.getAttribute('content'),
+    ).toBe('https://zizzamia.xyz/api/frame/tx-post-url3');
+    expect(
+      meta.container
+        .querySelector('meta[property="fc:frame:button:4:post_url"]')
+        ?.getAttribute('content'),
+    ).toBe('https://zizzamia.xyz/api/frame/tx-post-url4');
+    expect(meta.container.querySelectorAll('meta').length).toBe(19);
+  });
+
   it('should not render action target if action is not link or mint', () => {
     const meta = render(
       <FrameMetadata

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:2: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:3: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:4:post_url" content={button4.postUrl} />
+      )}
 
       {!!postUrlToUse && <meta property="fc:frame:post_url" content={postUrlToUse} />}
 

src/frame/getFrameHtmlResponse.test.ts

@@ -147,6 +147,12 @@ describe('getFrameHtmlResponse', () => {
     const html = getFrameHtmlResponse({
       buttons: [
         { label: 'Transaction', action: 'tx', target: 'https://zizzamia.xyz/api/frame/tx' },
+        {
+          label: 'Transaction 2',
+          action: 'tx',
+          target: 'https://zizzamia.xyz/api/frame/tx',
+          postUrl: 'https://zizzamia.xyz/api/frame/tx-success',
+        },
       ],
       image: 'https://zizzamia.xyz/park-1.png',
     });
@@ -160,6 +166,10 @@ describe('getFrameHtmlResponse', () => {
   <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="fc:frame:button:2" content="Transaction 2" />
+  <meta property="fc:frame:button:2:action" content="tx" />
+  <meta property="fc:frame:button:2:target" content="https://zizzamia.xyz/api/frame/tx" />
+  <meta property="fc:frame:button:2:post_url" content="https://zizzamia.xyz/api/frame/tx-success" />
   <meta property="og:image" content="https://zizzamia.xyz/park-1.png" />
   <meta property="fc:frame:image" content="https://zizzamia.xyz/park-1.png" />
 

src/frame/getFrameHtmlResponse.ts

@@ -59,6 +59,9 @@ function getFrameHtmlResponse({
         if (button.action && button.target) {
           buttonHtml += `  <meta property="fc:frame:button:${index + 1}:target" content="${button.target}" />\n`;
         }
+        if (button.action && button.action === 'tx' && button.postUrl) {
+          buttonHtml += `  <meta property="fc:frame:button:${index + 1}:post_url" content="${button.postUrl}" />\n`;
+        }
         return buttonHtml;
       })
       .join('');

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({

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) {

src/frame/index.ts

@@ -1,6 +1,7 @@
 // 🌲☀️🌲
 // This file is the entry point for the core utilities
 // that have no dependencies on external libraries.
+export { FrameMetadata } from './components/FrameMetadata';
 export { getFrameHtmlResponse } from './getFrameHtmlResponse';
 export { getFrameMetadata } from './getFrameMetadata';
 export { getFrameMessage } from './getFrameMessage';

src/frame/types.ts

@@ -83,14 +83,20 @@ export function convertToFrame(json: any) {
  */
 export type FrameButtonMetadata =
   | {
-      action: 'link' | 'mint' | 'tx';
+      action: 'link' | 'mint';
       label: string;
       target: string;
     }
   | {
       action?: 'post' | 'post_redirect';
       label: string;
       target?: string;
+    }
+  | {
+      action: 'tx';
+      label: string;
+      target: string;
+      postUrl?: string;
     };
 
 /**

src/version.ts

@@ -1 +1 @@
-export const version = '0.10.0';
+export const version = '0.10.1';