Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add tx as a Frame action option #208

Merged
merged 2 commits into from
Mar 4, 2024
Merged

feat: add tx as a Frame action option #208

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7ecaf52
feat: added tx
Zizzamia Mar 4, 2024
193fdcd
tests
Zizzamia Mar 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/honest-hounds-tie.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@coinbase/onchainkit': patch
---

- **feat**: added `tx` as a Frame action option, enabling support for Frame Transactions. By @zizzamia #208
2 changes: 1 addition & 1 deletion site/docs/pages/frame/types.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
48 changes: 47 additions & 1 deletion src/frame/getFrameHtmlResponse.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>`);
});
Expand Down Expand Up @@ -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',
Expand Down Expand Up @@ -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' }],
Expand Down
25 changes: 24 additions & 1 deletion src/frame/getFrameMetadata.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' }],
Expand Down
2 changes: 1 addition & 1 deletion src/frame/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ export function convertToFrame(json: any) {
*/
export type FrameButtonMetadata =
| {
action: 'link' | 'mint';
action: 'link' | 'mint' | 'tx';
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

tiny nitpick: can we have txn instead of tx (Texas?)

Copy link
Contributor Author

@Zizzamia Zizzamia Mar 4, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's a great point!

OnchainKit will follow the Frame spec https://warpcast.notion.site/Frame-Transactions-Public-Draft-v2-9d9f9f4f527249519a41bd8d16165f73

if they change it to txn, we will do too.

Feel free to ask there if they will consider txn vs tx.

label: string;
target: string;
}
Expand Down
2 changes: 1 addition & 1 deletion src/version.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
export const version = '0.9.5';
export const version = '0.9.6';
Loading