fix: ensured that the <FrameMetadata> component uses the name property

.changeset/itchy-glasses-add.md

@@ -2,7 +2,8 @@
 '@coinbase/onchainkit': minor
 ---
 
-- **feat**: Rename the component from `OnchainName` in our Identity Kit. This is a breaking change. `OnchainName` is being renamed to `Name` for simplicity and clarity.
+- **fix**: ensured that the `<FrameMetadata>` component uses the `name` property instead of the `property` property to set the type of metadata. Both options are technically correct, but historically, using `name` is more accurate.
+- **feat**: renamed the component from `OnchainName` to `Name` in our Identity Kit. This is a breaking changes. The purpose of the rename is to simplify and enhance clarity. By @alvaroraminelli #86
 
 BREAKING CHANGES
 

CHANGELOG.md

@@ -4,13 +4,13 @@
 
 ### Patch Changes
 
-- 6f9dd77: - **feat**: exported `FrameMetadataType`.
+- **feat**: exported `FrameMetadataType`. 6f9dd77
 
 ## 0.4.4
 
 ### Patch Changes
 
-- d168475: - **fix**: added missing `input` type on `FrameValidationData`;
+- **fix**: added missing `input` type on `FrameValidationData`. d168475
 
 ## 0.4.3
 
@@ -22,9 +22,9 @@
 
 ### Patch Changes
 
-- **feat**: Added support for Text Input metadata for Farcaster Frames. By @taycaldwell #67 89e5210
-- **feat**: Added `FrameMetadata` component, to help support metadata elements with classic React apps. By @zizzamia #71
-- **feat**: Added `OnchainName` component, to our Identity Kit. The `OnchainName` component primarily focuses on showcasing ENS names for given Ethereum addresses, and defaults to displaying a sliced version of the address when an ENS name isn't available. By @alvaroraminelli #49
+- **feat**: added support for Text Input metadata for Farcaster Frames. By @taycaldwell #67 89e5210
+- **feat**: added `FrameMetadata` component, to help support metadata elements with classic React apps. By @zizzamia #71
+- **feat**: added `OnchainName` component, to our Identity Kit. The `OnchainName` component primarily focuses on showcasing ENS names for given Ethereum addresses, and defaults to displaying a sliced version of the address when an ENS name isn't available. By @alvaroraminelli #49
 
 ## 0.4.1
 
@@ -166,10 +166,10 @@ type FrameMetadata = {
 ### Patch Changes
 
 - **feat**: exported `FrameRequest` and `FrameData` types.
-- **docs**: Polished README for `getFrameMessage()`. By @zizzamia #38 218b65e
-- **fix**: Refactor Farcaster typing to be explicit, and added a Farcaster message verification integration test. By @robpolak @cnasc @zizzamia #37
-- **feat**: Added a concept of integration tests where we can assert the actual values coming back from `neynar`. We decoupled these from unit tests as we should not commingle. By @robpolak #35
-- **feat**: Refactored `neynar` client out of the `./src/core` code-path, for better composability and testability. By @robpolak #35
+- **docs**: polished README for `getFrameMessage()`. By @zizzamia #38 218b65e
+- **fix**: refactor Farcaster typing to be explicit, and added a Farcaster message verification integration test. By @robpolak @cnasc @zizzamia #37
+- **feat**: added a concept of integration tests where we can assert the actual values coming back from `neynar`. We decoupled these from unit tests as we should not commingle. By @robpolak #35
+- **feat**: refactored `neynar` client out of the `./src/core` code-path, for better composability and testability. By @robpolak #35
 
 BREAKING CHANGES
 

README.md

@@ -1,7 +1,7 @@
 <p align="center">
   <a href="https://github.com/coinbase/onchainkit">
     <picture>
-      <source media="(prefers-color-scheme: dark)" srcset="./docs/logo-v-0-4.png">
+      <source media="(prefers-color-scheme: dark)" srcset="./docs/logo-v-0-5.png">
       <img alt="OnchainKit logo vibes" src="./docs/logo-v-0-4.png" width="auto">
     </picture>
   </a>
@@ -88,9 +88,20 @@ export default function HomePage() {
   return (
     ...
     <FrameMetadata
-      image="https://example.com/image.png"
-      post_url="https://example.com"
-      buttons={[{ label: 'button1' }]}
+      buttons={[
+        {
+          label: 'Tell me the story',
+        },
+        {
+          label: 'Redirect to cute dog pictures',
+          action: 'post_redirect',
+        },
+      ]}
+      image="https://zizzamia.xyz/park-1.png"
+      input={{
+        text: 'Tell me a boat story',
+      }}
+      post_url="https://zizzamia.xyz/api/frame"
     />
     ...
   );
@@ -123,6 +134,18 @@ type FrameMetadataType = {
 };
 ```
 
+**@Returns**
+
+```html
+<meta name="fc:frame" content="vNext" />
+<meta name="fc:frame:button:1" content="Tell me the story" />
+<meta name="fc:frame:button:2" content="Redirect to cute dog pictures" />
+<meta name="fc:frame:button:2:action" content="post_redirect" />
+<meta name="fc:frame:image" content="https://zizzamia.xyz/park-1.png" />
+<meta name="fc:frame:input:text" content="Tell me a boat story" />
+<meta name="fc:frame:post_url" content="https://zizzamia.xyz/api/frame" />
+```
+
 <br />
 
 ### getFrameHtmlResponse(frameMetadata)

src/components/FrameMetadata.test.tsx

@@ -13,7 +13,7 @@ describe('FrameMetadata', () => {
   it('renders with image', () => {
     const meta = render(<FrameMetadata image="https://example.com/image.png" />);
     expect(
-      meta.container.querySelector('meta[property="fc:frame:image"]')?.getAttribute('content'),
+      meta.container.querySelector('meta[name="fc:frame:image"]')?.getAttribute('content'),
     ).toBe('https://example.com/image.png');
     expect(meta.container.querySelectorAll('meta').length).toBe(2);
   });
@@ -22,9 +22,9 @@ describe('FrameMetadata', () => {
     const meta = render(
       <FrameMetadata image="https://example.com/image.png" input={{ text: 'test' }} />,
     );
-    expect(meta.container.querySelector('meta[property="fc:frame:input:text"]')).not.toBeNull();
+    expect(meta.container.querySelector('meta[name="fc:frame:input:text"]')).not.toBeNull();
     expect(
-      meta.container.querySelector('meta[property="fc:frame:input:text"]')?.getAttribute('content'),
+      meta.container.querySelector('meta[name="fc:frame:input:text"]')?.getAttribute('content'),
     ).toBe('test');
     expect(meta.container.querySelectorAll('meta').length).toBe(3);
   });
@@ -37,22 +37,20 @@ describe('FrameMetadata', () => {
       />,
     );
     // Button 1
-    expect(meta.container.querySelector('meta[property="fc:frame:button:1"]')).not.toBeNull();
+    expect(meta.container.querySelector('meta[name="fc:frame:button:1"]')).not.toBeNull();
     expect(
-      meta.container.querySelector('meta[property="fc:frame:button:1"]')?.getAttribute('content'),
+      meta.container.querySelector('meta[name="fc:frame:button:1"]')?.getAttribute('content'),
     ).toBe('button1');
-    expect(meta.container.querySelector('meta[property="fc:frame:button:1:action"]')).toBeNull();
+    expect(meta.container.querySelector('meta[name="fc:frame:button:1:action"]')).toBeNull();
     // Button 2
-    expect(meta.container.querySelector('meta[property="fc:frame:button:2"]')).not.toBeNull();
+    expect(meta.container.querySelector('meta[name="fc:frame:button:2"]')).not.toBeNull();
     expect(
-      meta.container.querySelector('meta[property="fc:frame:button:2"]')?.getAttribute('content'),
+      meta.container.querySelector('meta[name="fc:frame:button:2"]')?.getAttribute('content'),
     ).toBe('button2');
-    expect(
-      meta.container.querySelector('meta[property="fc:frame:button:2:action"]'),
-    ).not.toBeNull();
+    expect(meta.container.querySelector('meta[name="fc:frame:button:2:action"]')).not.toBeNull();
     expect(
       meta.container
-        .querySelector('meta[property="fc:frame:button:2:action"]')
+        .querySelector('meta[name="fc:frame:button:2:action"]')
         ?.getAttribute('content'),
     ).toBe('post_redirect');
     // Length
@@ -63,9 +61,9 @@ describe('FrameMetadata', () => {
     const meta = render(
       <FrameMetadata image="https://example.com/image.png" post_url="https://example.com" />,
     );
-    expect(meta.container.querySelector('meta[property="fc:frame:post_url"]')).not.toBeNull();
+    expect(meta.container.querySelector('meta[name="fc:frame:post_url"]')).not.toBeNull();
     expect(
-      meta.container.querySelector('meta[property="fc:frame:post_url"]')?.getAttribute('content'),
+      meta.container.querySelector('meta[name="fc:frame:post_url"]')?.getAttribute('content'),
     ).toBe('https://example.com');
     expect(meta.container.querySelectorAll('meta').length).toBe(3);
   });
@@ -74,11 +72,9 @@ describe('FrameMetadata', () => {
     const meta = render(
       <FrameMetadata image="https://example.com/image.png" refresh_period={10} />,
     );
-    expect(meta.container.querySelector('meta[property="fc:frame:refresh_period"]')).not.toBeNull();
+    expect(meta.container.querySelector('meta[name="fc:frame:refresh_period"]')).not.toBeNull();
     expect(
-      meta.container
-        .querySelector('meta[property="fc:frame:refresh_period"]')
-        ?.getAttribute('content'),
+      meta.container.querySelector('meta[name="fc:frame:refresh_period"]')?.getAttribute('content'),
     ).toBe('10');
     expect(meta.container.querySelectorAll('meta').length).toBe(3);
   });

src/components/FrameMetadata.tsx

@@ -9,9 +9,20 @@ import type { FrameMetadataType } from '../core/types';
  * @example
  * ```tsx
  * <FrameMetadata
- *  image="https://example.com/image.png"
- *  post_url="https://example.com"
- *  buttons={[{ label: 'button1' }]}
+ *   buttons={[
+ *     {
+ *       label: 'Tell me the story',
+ *     },
+ *     {
+ *       label: 'Redirect to cute dog pictures',
+ *       action: 'post_redirect',
+ *     },
+ *   ]}
+ *   image="https://zizzamia.xyz/park-1.png"
+ *   input={{
+ *     text: 'Tell me a boat story',
+ *   }}
+ *   post_url="https://zizzamia.xyz/api/frame"
  * />
  * ```
  *
@@ -32,25 +43,25 @@ export function FrameMetadata({
 }: FrameMetadataType) {
   return (
     <>
-      <meta property="fc:frame" content="vNext" />
-      {!!image && <meta property="fc:frame:image" content={image} />}
-      {!!input && <meta property="fc:frame:input:text" content={input.text} />}
+      <meta name="fc:frame" content="vNext" />
+      {!!image && <meta name="fc:frame:image" content={image} />}
+      {!!input && <meta name="fc:frame:input:text" content={input.text} />}
 
       {buttons?.map((button, index) => {
         return (
           <>
-            <meta property={`fc:frame:button:${index + 1}`} content={button.label} />
+            <meta name={`fc:frame:button:${index + 1}`} content={button.label} />
             {!!button.action && (
-              <meta property={`fc:frame:button:${index + 1}:action`} content={button.action} />
+              <meta name={`fc:frame:button:${index + 1}:action`} content={button.action} />
             )}
           </>
         );
       })}
 
-      {!!post_url && <meta property="fc:frame:post_url" content={post_url} />}
+      {!!post_url && <meta name="fc:frame:post_url" content={post_url} />}
 
       {!!refresh_period && (
-        <meta property="fc:frame:refresh_period" content={refresh_period.toString()} />
+        <meta name="fc:frame:refresh_period" content={refresh_period.toString()} />
       )}
     </>
   );

src/version.ts

@@ -1 +1 @@
-export const version = '0.4.5';
+export const version = '0.5.0';