diff --git a/.changeset/honest-tigers-thank.md b/.changeset/honest-tigers-thank.md
new file mode 100644
index 0000000000..617e4bda34
--- /dev/null
+++ b/.changeset/honest-tigers-thank.md
@@ -0,0 +1,6 @@
+---
+'@coinbase/onchainkit': patch
+---
+
+- **feat**: added `wrapper` prop to `` component, that defaults to `React.Fragment` when not passed (original behavior). By @syntag #90 #91
+- **feat**: exported `FrameMetadataResponse` type which can be useful when using `getFrameMetadata` in a TS project. By @syntag #90
diff --git a/src/components/FrameMetadata.test.tsx b/src/components/FrameMetadata.test.tsx
index 01e095755b..ba472cc746 100644
--- a/src/components/FrameMetadata.test.tsx
+++ b/src/components/FrameMetadata.test.tsx
@@ -79,11 +79,11 @@ describe('FrameMetadata', () => {
expect(meta.container.querySelectorAll('meta').length).toBe(3);
});
- it('renders with wrapperComponent', () => {
+ it('renders with wrapper', () => {
const meta = render(
{children}
}
+ wrapper={({ children }) => {children}
}
/>,
);
diff --git a/src/components/FrameMetadata.tsx b/src/components/FrameMetadata.tsx
index a6e2e2fff2..e8aba24fbc 100644
--- a/src/components/FrameMetadata.tsx
+++ b/src/components/FrameMetadata.tsx
@@ -1,6 +1,10 @@
import { Fragment } from 'react';
import type { FrameMetadataType } from '../core/types';
+type FrameMetadataReact = FrameMetadataType & {
+ wrapper?: React.ComponentType;
+};
+
/**
* FrameMetadata component
*
@@ -27,13 +31,13 @@ import type { FrameMetadataType } from '../core/types';
* />
* ```
*
- * @param {FrameMetadataType} props - The metadata for the frame.
+ * @param {FrameMetadataReact} props - The metadata for the frame.
* @param {string} props.image - The image URL.
* @param {string} props.input - The input text.
* @param {string} props.post_url - The post URL.
* @param {number} props.refresh_period - The refresh period.
* @param {Array<{ label: string, action?: string }>} props.buttons - The buttons.
- * @param {React.ComponentType | undefined} props.wrapperComponent - The wrapper component meta tags are rendered in.
+ * @param {React.ComponentType | undefined} props.wrapper - The wrapper component meta tags are rendered in.
* @returns {React.ReactElement} The FrameMetadata component.
*/
export function FrameMetadata({
@@ -42,10 +46,10 @@ export function FrameMetadata({
input,
post_url,
refresh_period,
- wrapperComponent: WrapperComponent = Fragment,
-}: FrameMetadataType) {
+ wrapper: Wrapper = Fragment,
+}: FrameMetadataReact) {
return (
-
+
{!!image && }
{!!input && }
@@ -66,6 +70,6 @@ export function FrameMetadata({
{!!refresh_period && (
)}
-
+
);
}
diff --git a/src/core/types.ts b/src/core/types.ts
index caa5176c85..3b5dbf6cbf 100644
--- a/src/core/types.ts
+++ b/src/core/types.ts
@@ -88,7 +88,6 @@ export type FrameMetadataType = {
input?: FrameInputMetadata;
post_url?: string;
refresh_period?: number;
- wrapperComponent?: React.ComponentType;
};
/**
diff --git a/src/version.ts b/src/version.ts
index 2af12a2cc9..922904388b 100644
--- a/src/version.ts
+++ b/src/version.ts
@@ -1 +1 @@
-export const version = '0.5.0';
+export const version = '0.5.1';