From 4ed3ae65519349e99827ca931f9837d5c9f768da Mon Sep 17 00:00:00 2001 From: Leonardo Zizzamia Date: Sat, 3 Feb 2024 22:42:32 -0800 Subject: [PATCH 1/3] types --- .changeset/mighty-tomatoes-decide.md | 5 +++ README.md | 56 +++++++++++++++++++++++++--- src/components/FrameMetadata.tsx | 2 +- src/core/getFrameHtmlResponse.ts | 4 +- src/core/getFrameMetadata.ts | 4 +- src/core/types.ts | 17 ++++++++- src/index.ts | 2 +- src/version.ts | 2 +- 8 files changed, 78 insertions(+), 14 deletions(-) create mode 100644 .changeset/mighty-tomatoes-decide.md diff --git a/.changeset/mighty-tomatoes-decide.md b/.changeset/mighty-tomatoes-decide.md new file mode 100644 index 0000000000..2554da6f45 --- /dev/null +++ b/.changeset/mighty-tomatoes-decide.md @@ -0,0 +1,5 @@ +--- +"@coinbase/onchainkit": patch +--- + +- **feat**: exported `FrameMetadataType`. diff --git a/README.md b/README.md index 25fc7ae01d..e5690492ed 100644 --- a/README.md +++ b/README.md @@ -38,8 +38,6 @@ Add OnchainKit to your project, install the required packages. -
- ```bash # Use Yarn yarn add @coinbase/onchainkit @@ -55,7 +53,7 @@ pnpm add @coinbase/onchainkit OnchainKit is divided into various theme utilities and components that are available for your use: -- [Frame Kit 🖼️](https://github.com/coinbase/onchainkit?tab=readme-ov-file#frame-kit-) +- [Frame Kit 🖼️](https://github.com/coinbase/onchainkit?tab=readme-ov-file#frame-kit-%EF%B8%8F) - [Identity Kit 👨‍🚀](https://github.com/coinbase/onchainkit?tab=readme-ov-file#identity-kit-)
@@ -67,7 +65,11 @@ A Frame transforms any cast into an interactive app. Creating a frame is easy: select an image and add clickable buttons. When a button is clicked, you receive a callback and can send another image with more buttons. To learn more, check out "[Farcaster Frames Official Documentation](https://warpcast.notion.site/Farcaster-Frames-4bd47fe97dc74a42a48d3a234636d8c5)". -Utilities: +**React Component**: + +- : This component renders all the Frame metadata elements in one place. + +**Utilities**: - [getFrameHtmlResponse()](https://github.com/coinbase/onchainkit?tab=readme-ov-file#getframehtmlresponseframemetadata): Retrieves the **Frame HTML** for your HTTP responses. - [getFrameMessage()](https://github.com/coinbase/onchainkit?tab=readme-ov-file#getframemessageframerequest): Retrieves a valid **Frame message** from the Frame Signature Packet. @@ -75,6 +77,48 @@ Utilities:
+### + +This component is utilized for incorporating Frame metadata elements into the React page. + +Note: If you are using Next.js with App routing, it is recommended to use `getFrameMetadata` instead. + +```tsx + +``` + +**@Props** + +```ts +type Button = { + label: string; + action?: 'post' | 'post_redirect'; +}; + +type InputMetadata = { + text: string; +}; + +type FrameMetadataType = { + // A list of strings which are the label for the buttons in the frame (max 4 buttons). + buttons?: [Button, ...Button[]]; + // An image which must be smaller than 10MB and should have an aspect ratio of 1.91:1 + image: string; + // The text input to use for the Frame. + input?: InputMetadata; + // A valid POST URL to send the Signature Packet to. + post_url?: string; + // A period in seconds at which the app should expect the image to update. + refresh_period?: number; +}; +``` + +
+ ### getFrameHtmlResponse(frameMetadata) When you need to send an HTML Frame Response, the `getFrameHtmlResponse` method is here to assist you. @@ -124,7 +168,7 @@ type InputMetadata = { text: string; }; -type FrameMetadata = { +type FrameMetadataType = { // A list of strings which are the label for the buttons in the frame (max 4 buttons). buttons?: [Button, ...Button[]]; // An image which must be smaller than 10MB and should have an aspect ratio of 1.91:1 @@ -285,7 +329,7 @@ type InputMetadata = { text: string; }; -type FrameMetadata = { +type FrameMetadataType = { // A list of strings which are the label for the buttons in the frame (max 4 buttons). buttons?: [Button, ...Button[]]; // An image which must be smaller than 10MB and should have an aspect ratio of 1.91:1 diff --git a/src/components/FrameMetadata.tsx b/src/components/FrameMetadata.tsx index b2410eb9ff..aa18b1c30b 100644 --- a/src/components/FrameMetadata.tsx +++ b/src/components/FrameMetadata.tsx @@ -1,4 +1,4 @@ -import type { FrameMetadata as FrameMetadataType } from '../core/types'; +import type { FrameMetadataType } from '../core/types'; /** * FrameMetadata component diff --git a/src/core/getFrameHtmlResponse.ts b/src/core/getFrameHtmlResponse.ts index 0f260dd0d8..6c6ba1909b 100644 --- a/src/core/getFrameHtmlResponse.ts +++ b/src/core/getFrameHtmlResponse.ts @@ -1,4 +1,4 @@ -import { FrameMetadata } from './types'; +import { FrameMetadataType } from './types'; /** * Returns an HTML string containing metadata for a new valid frame. @@ -16,7 +16,7 @@ function getFrameHtmlResponse({ input, post_url, refresh_period, -}: FrameMetadata): string { +}: FrameMetadataType): string { // Set the image metadata if it exists. const imageHtml = image ? `` : ''; diff --git a/src/core/getFrameMetadata.ts b/src/core/getFrameMetadata.ts index 35ad69eb3f..018d28f83a 100644 --- a/src/core/getFrameMetadata.ts +++ b/src/core/getFrameMetadata.ts @@ -1,4 +1,4 @@ -import { FrameMetadata } from './types'; +import { FrameMetadataType } from './types'; type FrameMetadataResponse = Record; @@ -17,7 +17,7 @@ export const getFrameMetadata = function ({ input, post_url, refresh_period, -}: FrameMetadata): FrameMetadataResponse { +}: FrameMetadataType): FrameMetadataResponse { const metadata: Record = { 'fc:frame': 'vNext', }; diff --git a/src/core/types.ts b/src/core/types.ts index bf589ae2bb..057e1cbf19 100644 --- a/src/core/types.ts +++ b/src/core/types.ts @@ -1,5 +1,10 @@ import { NeynarFrameValidationInternalModel } from '../utils/neynar/frame/types'; +/** + * Frame Data + * + * Note: exported as public Type + */ export interface FrameData { buttonIndex: number; castId: { @@ -14,6 +19,11 @@ export interface FrameData { url: string; } +/** + * Frame Request + * + * Note: exported as public Type + */ export interface FrameRequest { untrustedData: FrameData; trustedData: { @@ -67,7 +77,12 @@ export type FrameInputMetadata = { text: string; }; -export type FrameMetadata = { +/** + * Frame Request + * + * Note: exported as public Type + */ +export type FrameMetadataType = { buttons?: [FrameButtonMetadata, ...FrameButtonMetadata[]]; image: string; input?: FrameInputMetadata; diff --git a/src/index.ts b/src/index.ts index b7b399856c..7d9dce1873 100644 --- a/src/index.ts +++ b/src/index.ts @@ -6,4 +6,4 @@ export { getFrameMessage } from './core/getFrameMessage'; export { FrameMetadata } from './components/FrameMetadata'; export { OnchainName } from './components/OnchainName'; export { useOnchainName } from './hooks/useOnchainName'; -export type { FrameRequest, FrameValidationData } from './core/types'; +export type { FrameMetadataType, FrameRequest, FrameValidationData } from './core/types'; diff --git a/src/version.ts b/src/version.ts index 18b329dafc..44f19540a5 100644 --- a/src/version.ts +++ b/src/version.ts @@ -1 +1 @@ -export const version = '0.4.4'; +export const version = '0.4.5'; From b910dafa81582243312d723d6fa1d4bbc73a8205 Mon Sep 17 00:00:00 2001 From: Leonardo Zizzamia Date: Sat, 3 Feb 2024 22:45:15 -0800 Subject: [PATCH 2/3] docs --- README.md | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index e5690492ed..62a9cb7f3d 100644 --- a/README.md +++ b/README.md @@ -73,7 +73,7 @@ Creating a frame is easy: select an image and add clickable buttons. When a butt - [getFrameHtmlResponse()](https://github.com/coinbase/onchainkit?tab=readme-ov-file#getframehtmlresponseframemetadata): Retrieves the **Frame HTML** for your HTTP responses. - [getFrameMessage()](https://github.com/coinbase/onchainkit?tab=readme-ov-file#getframemessageframerequest): Retrieves a valid **Frame message** from the Frame Signature Packet. -- [getFrameMetadata()](https://github.com/coinbase/onchainkit?tab=readme-ov-file#getframeframemetadata): Retrieves valid **Frame metadata** for your initial HTML page. +- [getFrameMetadata()](https://github.com/coinbase/onchainkit?tab=readme-ov-file#getframeframemetadata): Retrieves valid **Frame metadata** for your initial HTML page with Next.js App Routing.
@@ -84,11 +84,17 @@ This component is utilized for incorporating Frame metadata elements into the Re Note: If you are using Next.js with App routing, it is recommended to use `getFrameMetadata` instead. ```tsx - +export default function HomePage() { + return ( + ... + + ... + ); +} ``` **@Props** From f9eb93eb9e3cb66465a4b214ee29420e897705ec Mon Sep 17 00:00:00 2001 From: Leonardo Zizzamia Date: Sat, 3 Feb 2024 22:47:17 -0800 Subject: [PATCH 3/3] format --- .changeset/mighty-tomatoes-decide.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/mighty-tomatoes-decide.md b/.changeset/mighty-tomatoes-decide.md index 2554da6f45..5d65e37df8 100644 --- a/.changeset/mighty-tomatoes-decide.md +++ b/.changeset/mighty-tomatoes-decide.md @@ -1,5 +1,5 @@ --- -"@coinbase/onchainkit": patch +'@coinbase/onchainkit': patch --- - **feat**: exported `FrameMetadataType`.