diff --git a/.changeset/itchy-glasses-add.md b/.changeset/itchy-glasses-add.md index 65d25de817..e30ad554e8 100644 --- a/.changeset/itchy-glasses-add.md +++ b/.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 `` 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 diff --git a/CHANGELOG.md b/CHANGELOG.md index b35b9507e8..84be85de93 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/README.md b/README.md index bb7608098b..a08e5b5f43 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@

- + OnchainKit logo vibes @@ -88,9 +88,20 @@ export default function HomePage() { return ( ... ... ); @@ -123,6 +134,18 @@ type FrameMetadataType = { }; ``` +**@Returns** + +```html + + + + + + + +``` +
### getFrameHtmlResponse(frameMetadata) diff --git a/docs/logo-v-0-5.png b/docs/logo-v-0-5.png new file mode 100644 index 0000000000..8e780fa2d0 Binary files /dev/null and b/docs/logo-v-0-5.png differ diff --git a/src/components/FrameMetadata.test.tsx b/src/components/FrameMetadata.test.tsx index 641a54b850..9d61a0b94d 100644 --- a/src/components/FrameMetadata.test.tsx +++ b/src/components/FrameMetadata.test.tsx @@ -13,7 +13,7 @@ describe('FrameMetadata', () => { it('renders with image', () => { const meta = render(); 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( , ); - 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( , ); - 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( , ); - 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); }); diff --git a/src/components/FrameMetadata.tsx b/src/components/FrameMetadata.tsx index aa18b1c30b..112ff90528 100644 --- a/src/components/FrameMetadata.tsx +++ b/src/components/FrameMetadata.tsx @@ -9,9 +9,20 @@ import type { FrameMetadataType } from '../core/types'; * @example * ```tsx * * ``` * @@ -32,25 +43,25 @@ export function FrameMetadata({ }: FrameMetadataType) { return ( <> - - {!!image && } - {!!input && } + + {!!image && } + {!!input && } {buttons?.map((button, index) => { return ( <> - + {!!button.action && ( - + )} ); })} - {!!post_url && } + {!!post_url && } {!!refresh_period && ( - + )} ); diff --git a/src/version.ts b/src/version.ts index 44f19540a5..2af12a2cc9 100644 --- a/src/version.ts +++ b/src/version.ts @@ -1 +1 @@ -export const version = '0.4.5'; +export const version = '0.5.0';