From 1c4564f23a2bf9b717b9f1f1d5c8f4e65a5611e3 Mon Sep 17 00:00:00 2001 From: Leonardo Zizzamia Date: Thu, 7 Mar 2024 19:26:06 -0800 Subject: [PATCH 1/7] feat: added `post_url` optional metadata for `tx` Frame --- framegear/utils/frameResultToFrameMetadata.ts | 2 +- framegear/utils/postFrame.ts | 2 +- framegear/utils/store.ts | 2 +- jest.config.js | 2 +- src/frame/index.ts | 1 + src/frame/types.ts | 8 +++++++- src/version.ts | 2 +- 7 files changed, 13 insertions(+), 6 deletions(-) diff --git a/framegear/utils/frameResultToFrameMetadata.ts b/framegear/utils/frameResultToFrameMetadata.ts index 0389dad84c..6463247ecf 100644 --- a/framegear/utils/frameResultToFrameMetadata.ts +++ b/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; diff --git a/framegear/utils/postFrame.ts b/framegear/utils/postFrame.ts index cc99b5b8a4..9e575df907 100644 --- a/framegear/utils/postFrame.ts +++ b/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']; diff --git a/framegear/utils/store.ts b/framegear/utils/store.ts index 99ae46497c..c083f52f28 100644 --- a/framegear/utils/store.ts +++ b/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. diff --git a/jest.config.js b/jest.config.js index 5c115ece84..9f0181d280 100644 --- a/jest.config.js +++ b/jest.config.js @@ -1,5 +1,5 @@ module.exports = { - // ... + modulePathIgnorePatterns: ["/framegear/"], transform: { '^.+\\.tsx?$': 'ts-jest', }, diff --git a/src/frame/index.ts b/src/frame/index.ts index eb11e604f7..3e55816615 100644 --- a/src/frame/index.ts +++ b/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'; diff --git a/src/frame/types.ts b/src/frame/types.ts index e980eb5971..8541bc67b7 100644 --- a/src/frame/types.ts +++ b/src/frame/types.ts @@ -83,7 +83,7 @@ export function convertToFrame(json: any) { */ export type FrameButtonMetadata = | { - action: 'link' | 'mint' | 'tx'; + action: 'link' | 'mint'; label: string; target: string; } @@ -91,6 +91,12 @@ export type FrameButtonMetadata = action?: 'post' | 'post_redirect'; label: string; target?: string; + } + | { + action: 'tx'; + label: string; + target: string; + postUrl?: string; }; /** diff --git a/src/version.ts b/src/version.ts index 6b9f1bb034..7aff4ce61d 100644 --- a/src/version.ts +++ b/src/version.ts @@ -1 +1 @@ -export const version = '0.10.0'; +export const version = '0.10.1'; From a5c2eb452dce54ee41e5a5a9f6feb1dde9cdae3e Mon Sep 17 00:00:00 2001 From: Leonardo Zizzamia Date: Thu, 7 Mar 2024 19:26:42 -0800 Subject: [PATCH 2/7] dope --- .changeset/nine-wasps-work.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/nine-wasps-work.md diff --git a/.changeset/nine-wasps-work.md b/.changeset/nine-wasps-work.md new file mode 100644 index 0000000000..a62f3a2ca9 --- /dev/null +++ b/.changeset/nine-wasps-work.md @@ -0,0 +1,5 @@ +--- +"@coinbase/onchainkit": patch +--- + +- **feat**: added `post_url` optional metadata for `tx` Frame From 90e866884c2c41fa8a6c9f4d37abbeceff67b47c Mon Sep 17 00:00:00 2001 From: Leonardo Zizzamia Date: Thu, 7 Mar 2024 19:39:34 -0800 Subject: [PATCH 3/7] dope --- .changeset/nine-wasps-work.md | 4 +- jest.config.js | 2 +- src/frame/components/FrameMetadata.test.tsx | 65 +++++++++++++++++++++ src/frame/components/FrameMetadata.tsx | 12 ++++ src/frame/getFrameMetadata.test.ts | 25 ++++++++ src/frame/getFrameMetadata.ts | 3 + 6 files changed, 108 insertions(+), 3 deletions(-) diff --git a/.changeset/nine-wasps-work.md b/.changeset/nine-wasps-work.md index a62f3a2ca9..650905ba5a 100644 --- 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 index 9f0181d280..a100d5a2ae 100644 --- a/jest.config.js +++ b/jest.config.js @@ -1,5 +1,5 @@ module.exports = { - modulePathIgnorePatterns: ["/framegear/"], + modulePathIgnorePatterns: ['/framegear/'], transform: { '^.+\\.tsx?$': 'ts-jest', }, diff --git a/src/frame/components/FrameMetadata.test.tsx b/src/frame/components/FrameMetadata.test.tsx index 564c9d3492..66b102fdf3 100644 --- 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( + , + ); + 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( + , + ); + 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( )} + {!!(button1 && button1.action === 'tx' && button1.postUrl) && ( + + )} {!!button2 && } {!!(button2 && !!button2.action) && ( @@ -96,6 +99,9 @@ export function FrameMetadata({ {!!(button2 && button2.target) && ( )} + {!!(button2 && button2.action === 'tx' && button2.postUrl) && ( + + )} {!!button3 && } {!!(button3 && !!button3.action) && ( @@ -104,6 +110,9 @@ export function FrameMetadata({ {!!(button3 && button3.target) && ( )} + {!!(button3 && button3.action === 'tx' && button3.postUrl) && ( + + )} {!!button4 && } {!!(button4 && !!button4.action) && ( @@ -112,6 +121,9 @@ export function FrameMetadata({ {!!(button4 && button4.target) && ( )} + {!!(button4 && button4.action === 'tx' && button4.postUrl) && ( + + )} {!!postUrlToUse && } diff --git a/src/frame/getFrameMetadata.test.ts b/src/frame/getFrameMetadata.test.ts index 20f490770b..61b60196c1 100644 --- 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 index ab97512984..e1d2803026 100644 --- 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) { From 900bf6fcf4dae4f1689245304a9720d49e401fc9 Mon Sep 17 00:00:00 2001 From: Leonardo Zizzamia Date: Thu, 7 Mar 2024 20:02:37 -0800 Subject: [PATCH 4/7] tests --- src/frame/components/FrameMetadata.test.tsx | 35 ++++++++++++++++++++- src/frame/components/FrameMetadata.tsx | 6 ++-- 2 files changed, 37 insertions(+), 4 deletions(-) diff --git a/src/frame/components/FrameMetadata.test.tsx b/src/frame/components/FrameMetadata.test.tsx index 66b102fdf3..c85241a0f2 100644 --- a/src/frame/components/FrameMetadata.test.tsx +++ b/src/frame/components/FrameMetadata.test.tsx @@ -326,6 +326,24 @@ describe('FrameMetadata', () => { 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', + }, ]} />, ); @@ -345,7 +363,22 @@ describe('FrameMetadata', () => { .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); + 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', () => { diff --git a/src/frame/components/FrameMetadata.tsx b/src/frame/components/FrameMetadata.tsx index c2fa558096..3f684f4691 100644 --- a/src/frame/components/FrameMetadata.tsx +++ b/src/frame/components/FrameMetadata.tsx @@ -100,7 +100,7 @@ export function FrameMetadata({ )} {!!(button2 && button2.action === 'tx' && button2.postUrl) && ( - + )} {!!button3 && } @@ -111,7 +111,7 @@ export function FrameMetadata({ )} {!!(button3 && button3.action === 'tx' && button3.postUrl) && ( - + )} {!!button4 && } @@ -122,7 +122,7 @@ export function FrameMetadata({ )} {!!(button4 && button4.action === 'tx' && button4.postUrl) && ( - + )} {!!postUrlToUse && } From 0c5eed8ab9f57533c08ff871bfc4620426220ee3 Mon Sep 17 00:00:00 2001 From: Christopher Nascone Date: Fri, 8 Mar 2024 10:17:32 -0500 Subject: [PATCH 5/7] fix: `getFrameHtmlResponse` includes tx post_url --- src/frame/getFrameHtmlResponse.test.ts | 10 ++++++++++ src/frame/getFrameHtmlResponse.ts | 3 +++ 2 files changed, 13 insertions(+) diff --git a/src/frame/getFrameHtmlResponse.test.ts b/src/frame/getFrameHtmlResponse.test.ts index 02bf88b298..b951ec35b2 100644 --- a/src/frame/getFrameHtmlResponse.test.ts +++ b/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', () => { + + + + diff --git a/src/frame/getFrameHtmlResponse.ts b/src/frame/getFrameHtmlResponse.ts index 7950c32601..01c14ac61e 100644 --- a/src/frame/getFrameHtmlResponse.ts +++ b/src/frame/getFrameHtmlResponse.ts @@ -59,6 +59,9 @@ function getFrameHtmlResponse({ if (button.action && button.target) { buttonHtml += ` \n`; } + if (button.action && button.action === 'tx' && button.postUrl) { + buttonHtml += ` \n`; + } return buttonHtml; }) .join(''); From 1ecfacd5fcbf9b297ae335e4314dcfcff64a0160 Mon Sep 17 00:00:00 2001 From: Christopher Nascone Date: Fri, 8 Mar 2024 10:36:06 -0500 Subject: [PATCH 6/7] update: changelog --- .changeset/nine-wasps-work.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/nine-wasps-work.md b/.changeset/nine-wasps-work.md index 650905ba5a..d6f4c6888d 100644 --- a/.changeset/nine-wasps-work.md +++ b/.changeset/nine-wasps-work.md @@ -2,4 +2,4 @@ '@coinbase/onchainkit': patch --- -- **feat**: added `post_url` optional metadata for `tx` Frame. By @zizzamia #235 +- **feat**: added `post_url` optional metadata for `tx` Frame. By @zizzamia, @cnasc #237 From 7e6a684095c00dfd4e635b01d72545d0bc1f64dd Mon Sep 17 00:00:00 2001 From: Christopher Nascone Date: Fri, 8 Mar 2024 10:36:49 -0500 Subject: [PATCH 7/7] update: credit in changelog --- .changeset/nine-wasps-work.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/nine-wasps-work.md b/.changeset/nine-wasps-work.md index d6f4c6888d..fa6b4bdaa9 100644 --- a/.changeset/nine-wasps-work.md +++ b/.changeset/nine-wasps-work.md @@ -2,4 +2,4 @@ '@coinbase/onchainkit': patch --- -- **feat**: added `post_url` optional metadata for `tx` Frame. By @zizzamia, @cnasc #237 +- **feat**: added `post_url` optional metadata for `tx` Frame. By @zizzamia, @cnasc, @spennyp #237