diff --git a/.changeset/three-doors-know.md b/.changeset/three-doors-know.md
new file mode 100644
index 0000000000..7984fedfa5
--- /dev/null
+++ b/.changeset/three-doors-know.md
@@ -0,0 +1,5 @@
+---
+"@coinbase/onchainkit": minor
+---
+
+**feat**: add support for passing `state` to frame server. By @taycaldwell #197
diff --git a/CHANGELOG.md b/CHANGELOG.md
index dab71e0704..5fda9297ff 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,12 @@
# Changelog
+
+## 0.10.0
+
+### Minor Changes
+
+- **feat**: add support for passing `state` to frame server. By @taycaldwell #197
+
## 0.9.4
### Patch Changes
diff --git a/site/docs/pages/frame/frame-metadata.mdx b/site/docs/pages/frame/frame-metadata.mdx
index 9214908a51..ac659d5592 100644
--- a/site/docs/pages/frame/frame-metadata.mdx
+++ b/site/docs/pages/frame/frame-metadata.mdx
@@ -34,6 +34,9 @@ export default function HomePage() {
input={{
text: 'Tell me a boat story',
}}
+ state={{
+ counter: 1,
+ }}
postUrl="https://zizzamia.xyz/api/frame"
/>
...
@@ -54,6 +57,7 @@ export default function HomePage() {
+
```
diff --git a/site/docs/pages/frame/types.mdx b/site/docs/pages/frame/types.mdx
index 48d2561767..eda52c857f 100644
--- a/site/docs/pages/frame/types.mdx
+++ b/site/docs/pages/frame/types.mdx
@@ -68,6 +68,8 @@ type FrameMetadataType = {
postUrl?: string;
// A period in seconds at which the app should expect the image to update.
refreshPeriod?: number;
+ // A string containing serialized state (e.g. JSON) passed to the frame server.
+ state?: object;
};
```
diff --git a/src/frame/components/FrameMetadata.test.tsx b/src/frame/components/FrameMetadata.test.tsx
index b408e9a2b7..ab938e9129 100644
--- a/src/frame/components/FrameMetadata.test.tsx
+++ b/src/frame/components/FrameMetadata.test.tsx
@@ -52,6 +52,17 @@ describe('FrameMetadata', () => {
expect(meta.container.querySelectorAll('meta').length).toBe(4);
});
+ it('renders with input', () => {
+ const meta = render(
+ ,
+ );
+ expect(meta.container.querySelector('meta[property="fc:frame:state"]')).not.toBeNull();
+ expect(
+ meta.container.querySelector('meta[property="fc:frame:state"]')?.getAttribute('content'),
+ ).toBe('%7B%22counter%22%3A1%7D');
+ expect(meta.container.querySelectorAll('meta').length).toBe(4);
+ });
+
it('renders with two basic buttons', () => {
const meta = render(
| undefined} props.wrapper - The wrapper component meta tags are rendered in.
* @returns {React.ReactElement} The FrameMetadata component.
*/
@@ -53,6 +54,7 @@ export function FrameMetadata({
post_url,
refreshPeriod,
refresh_period,
+ state,
wrapper: Wrapper = Fragment,
}: FrameMetadataReact) {
const button1 = buttons && buttons[0];
@@ -75,6 +77,7 @@ export function FrameMetadata({
{!!imageSrc && }
{!!aspectRatio && }
{!!input && }
+ {!!state && }
{!!button1 && }
{!!(button1 && !!button1.action) && (
diff --git a/src/frame/getFrameHtmlResponse.test.ts b/src/frame/getFrameHtmlResponse.test.ts
index 39d0a24540..5fd0624b47 100644
--- a/src/frame/getFrameHtmlResponse.test.ts
+++ b/src/frame/getFrameHtmlResponse.test.ts
@@ -18,6 +18,9 @@ describe('getFrameHtmlResponse', () => {
},
postUrl: 'https://example.com/api/frame',
refreshPeriod: 10,
+ state: {
+ counter: 1,
+ },
});
expect(html).toBe(`
@@ -40,6 +43,7 @@ describe('getFrameHtmlResponse', () => {
+