diff --git a/README.md b/README.md index 1034a29156..05df7d1b97 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,7 @@ # OnchainKit

- OnchainKit: React components and TypeScript utilities for top-tier onchain apps. + React components and TypeScript utilities for top-tier onchain apps.

@@ -40,61 +40,40 @@

+
+ ## Documentation For documentation and guides, visit [onchainkit.xyz](https://onchainkit.xyz/). -## Getting Started - -Add OnchainKit to your project, install the required packages. - -```bash -# Use Yarn -yarn add @coinbase/onchainkit viem@2.x react@18 react-dom@18 - -# Use NPM -npm install @coinbase/onchainkit viem@2.x react@18 react-dom@18 - -# Use PNPM -pnpm add @coinbase/onchainkit viem@2.x react@18 react-dom@18 -``` -
-OnchainKit is divided into various theme utilities and components that are available for your use: +## Features - [Farcaster Kit](https://onchainkit.xyz/farcasterkit/introduction) - Utilitis: - [`getFarcasterUserAddress`](https://onchainkit.xyz/farcasterkit/get-farcaster-user-address) -- [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-) +- [Frame Kit](https://onchainkit.xyz/framekit/introduction) +- [Identity Kit](https://onchainkit.xyz/identitykit/introduction) -

-## Frame Kit 🖼️ +## Overview -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://docs.farcaster.xyz/learn/what-is-farcaster/frames)". - -**React component**: - -- ``: This component renders all the Frame metadata elements in one place. - -**Typescript 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. -- [`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. +Add OnchainKit to your project, install the required packages. -
+```bash +# Use Yarn +yarn add @coinbase/onchainkit viem@2.x react@18 react-dom@18 -### `` +# Use NPM +npm install @coinbase/onchainkit viem@2.x react@18 react-dom@18 -This component is utilized for incorporating Frame metadata elements into the React page. +# Use PNPM +pnpm add @coinbase/onchainkit viem@2.x react@18 react-dom@18 +``` -Note: If you are using Next.js with App routing, it is recommended to use `getFrameMetadata` instead. +And use any of the Components or Utilities like `FrameMetadata`. ```tsx export default function HomePage() { @@ -129,423 +108,25 @@ export default function HomePage() { } ``` -**@Props** - -```ts -type FrameButtonMetadata = - | { - action: 'link' | 'mint'; - label: string; - target: string; - } - | { - action?: 'post' | 'post_redirect'; - label: string; - }; - -type FrameImageMetadata = { - src: string; - aspectRatio?: '1.91:1' | '1:1'; -}; - -type FrameInputMetadata = { - text: string; -}; - -type FrameMetadataType = { - // A list of strings which are the label for the buttons in the frame (max 4 buttons). - buttons?: [FrameButtonMetadata, ...FrameButtonMetadata[]]; - // An image which must be smaller than 10MB and should have an aspect ratio of 1.91:1 or 1:1 - image: FrameImageMetadata; - // The text input to use for the Frame. - input?: FrameInputMetadata; - // A valid POST URL to send the Signature Packet to. - postUrl?: string; - // A period in seconds at which the app should expect the image to update. - refreshPeriod?: number; -}; - -type FrameMetadataReact = FrameMetadataType & { - wrapper?: React.ComponentType; -}; -``` - -**@Returns** - -```html - - - - - - - - - - - -``` -
-### getFrameHtmlResponse(frameMetadata) - -When you need to send an HTML Frame Response, the `getFrameHtmlResponse` method is here to assist you. - -It generates a valid HTML string response with a frame and utilizes `FrameMetadata` types for page metadata. This eliminates the need to manually create server-side HTML strings. - -```ts -// Step 1. import getFrameHtmlResponse from @coinbase/onchainkit -import { getFrameHtmlResponse } from '@coinbase/onchainkit'; -import { NextRequest, NextResponse } from 'next/server'; - -async function getResponse(req: NextRequest): Promise { - // Step 2. Build your Frame logic - ... - - return new NextResponse( - // Step 3. Use getFrameHtmlResponse to create a Frame response - getFrameHtmlResponse({ - buttons: [ - { - label: `We love BOAT`, - }, - ], - image: 'https://build-onchain-apps.vercel.app/release/v-0-17.png', - postUrl: 'https://build-onchain-apps.vercel.app/api/frame', - }), - ); -} - -export async function POST(req: NextRequest): Promise { - return getResponse(req); -} -``` - -**@Param** - -```ts -type FrameButtonMetadata = - | { - action: 'link' | 'mint'; - label: string; - target: string; - } - | { - action?: 'post' | 'post_redirect'; - label: string; - }; - -type FrameImageMetadata = { - src: string; - aspectRatio?: '1.91:1' | '1:1'; -}; +## Community ☁️ 🌁 ☁️ -type FrameInputMetadata = { - text: string; -}; +Check out the following places for more OnchainKit-related content: -type FrameMetadataType = { - // A list of strings which are the label for the buttons in the frame (max 4 buttons). - buttons?: [FrameButtonMetadata, ...FrameButtonMetadata[]]; - // An image which must be smaller than 10MB and should have an aspect ratio of 1.91:1 or 1:1 - image: FrameImageMetadata; - // The text input to use for the Frame. - input?: FrameInputMetadata; - // A valid POST URL to send the Signature Packet to. - postUrl?: string; - // A period in seconds at which the app should expect the image to update. - refreshPeriod?: number; -}; -``` - -**@Returns** - -```ts -type FrameHTMLResponse = string; -``` +- Follow @zizzamia ([X](https://twitter.com/zizzamia), [Farcaster](https://warpcast.com/zizzamia)) for project updates +- Join the discussions on our [OnchainKit warpcast channel](https://warpcast.com/~/channel/onchainkit)
-### getFrameMessage(frameRequest) - -When a user interacts with your Frame, you receive a JSON message called the "Frame Signature Packet". Decode and validate this message using the `getFrameMessage` function. - -You can also use `getFrameMessage` to access useful information such as: - -- button: number -- fid: number -- following: boolean -- liked: boolean -- recasted: boolean -- verified_accounts: string[] - -Note that if the `message` is not valid, it will be undefined. - -```ts -// Step 1. import getFrameMessage from @coinbase/onchainkit -import { FrameRequest, getFrameMessage } from '@coinbase/onchainkit'; -import { NextRequest, NextResponse } from 'next/server'; - -async function getResponse(req: NextRequest): Promise { - // Step 2. Read the body from the Next Request - const body: FrameRequest = await req.json(); - // Step 3. Validate the message - const { isValid, message } = await getFrameMessage(body , { - neynarApiKey: 'NEYNAR_ONCHAIN_KIT' - }); - - // Step 4. Determine the experience based on the validity of the message - if (isValid) { - // the message is valid - } else { - // sorry, the message is not valid and it will be undefined - } - - ... -} - -export async function POST(req: NextRequest): Promise { - return getResponse(req); -} -``` - -**@Param** - -```ts -// The Frame Signature Packet body -type FrameMessage = { - body: FrameRequest; - messageOptions?: FrameMessageOptions; -}; - -type FrameMessageOptions = - | { - // The API key to use for validation. Default: NEYNAR_ONCHAIN_KIT - neynarApiKey?: string; - // Whether to cast the reaction context. Default: true - castReactionContext?: boolean; - // Whether to follow the context. Default: true - followContext?: boolean; - } - | undefined; -``` - -**@Returns** - -```ts -type Promise; - -type FrameValidationResponse = - | { isValid: true; message: FrameValidationData } - | { isValid: false; message: undefined }; - -interface FrameValidationData { - button: number; // Number of the button clicked - following: boolean; // Indicates if the viewer clicking the frame follows the cast author - input: string; // Text input from the viewer typing in the frame - interactor: { - fid: number; // Viewer Farcaster ID - custody_address: string; // Viewer custody address - verified_accounts: string[]; // Viewer account addresses - }; - liked: boolean; // Indicates if the viewer clicking the frame liked the cast - raw: NeynarFrameValidationInternalModel; - recasted: boolean; // Indicates if the viewer clicking the frame recasted the cast - valid: boolean; // Indicates if the frame is valid -} -``` - -
- -### getFrameMetadata(frameMetadata) - -With Next.js App routing, use the `getFrameMetadata()` inside your `page.ts` to get the metadata need it for your Frame. - -```ts -// Step 1. import getFrameMetadata from @coinbase/onchainkit -import { getFrameMetadata } from '@coinbase/onchainkit'; -import type { Metadata } from 'next'; -import HomePage from './home'; - -// Step 2. Use getFrameMetadata to shape your Frame metadata -const frameMetadata = getFrameMetadata({ - buttons: [ - { - label: 'We love BOAT', - }, - ], - image: 'https://build-onchain-apps.vercel.app/release/v-0-17.png', - postUrl: 'https://build-onchain-apps.vercel.app/api/frame', -}); - -// Step 3. Add your metadata in the Next.js metadata utility -export const metadata: Metadata = { - manifest: '/manifest.json', - other: { - ...frameMetadata - }, -}; - -export default function Page() { - return ; -} -``` - -**@Param** - -```ts -type FrameButtonMetadata = - | { - action: 'link' | 'mint'; - label: string; - target: string; - } - | { - action?: 'post' | 'post_redirect'; - label: string; - }; - -type FrameImageMetadata = { - src: string; - aspectRatio?: '1.91:1' | '1:1'; -}; - -type FrameInputMetadata = { - text: string; -}; - -type FrameMetadataType = { - // A list of strings which are the label for the buttons in the frame (max 4 buttons). - buttons?: [FrameButtonMetadata, ...FrameButtonMetadata[]]; - // An image which must be smaller than 10MB and should have an aspect ratio of 1.91:1 - image: FrameImageMetadata; - // The text input to use for the Frame. - input?: FrameInputMetadata; - // A valid POST URL to send the Signature Packet to. - postUrl?: string; - // A period in seconds at which the app should expect the image to update. - refreshPeriod?: number; -}; -``` - -**@Returns** - -```ts -type FrameMetadataResponse = Record; -``` - -
-
- -## Identity Kit 👨‍🚀 - -### Name - -The `Name` component is used to display ENS names associated with Ethereum addresses. When an ENS name is not available, it defaults to showing a truncated version of the address. - -```tsx -import { Name } from '@coinbase/onchainkit'; - -; -``` - -**@Props** - -```ts -type UseName = { - // Ethereum address to be resolved from ENS. - address: Address; - // Optional CSS class for custom styling. - className?: string; - // Determines if the address should be sliced when no ENS name is available. - sliced?: boolean; - // Additional HTML attributes for the span element. - props?: React.HTMLAttributes; -}; -``` - -### Avatar - -The `Avatar` component is used to display ENS avatar associated with Ethereum addresses. When an ENS avatar is not available, it defaults to blue color avatar. - -```tsx -import { Avatar } from '@coinbase/onchainkit'; - -; -``` - -**@Props** - -```ts -type UseAvatar = { - // Ethereum address to be resolved from ENS. - address: Address; - // Optional CSS class for custom styling. - className?: string; - // Additional HTML attributes for the span element. - props?: React.HTMLAttributes; -}; -``` - -
-
- -## The Team and Our Community ☁️ 🌁 ☁️ - -OnchainKit is all about community; for any questions, feel free to: +## Authors -1. Reach out to the core maintainers on Twitter or Farcaster - - - - - - - - - - - - - -
- - - -
- Leonardo Zizzamia -
- - - -
- Rob Polak -
- - - -
- Alvaro Raminelli -
- - - -
- Taylor Caldwell -
- - - -
- Chris Nascone -
- - - -
- Wesley Pickett -
+- [@zizzamia](https://github.com/zizzamia.png) ([X](https://twitter.com/Zizzamia)) +- [@alvaroraminelli](https://github.com/alvaroraminelli.png) ([X](https://twitter.com/alvaroraminelli)) +- [@robpolak](https://github.com/robpolak.png) ([X](https://twitter.com/0xr0b_eth)) +- [@taycaldwell](https://github.com/taycaldwell.png) ([X](https://twitter.com/taycaldwell_)) +- [@cnasc](https://github.com/cnasc.png) ([warpcast](https://warpcast.com/cnasc)) +- [@wespickett](https://github.com/wespickett.png) ([X](https://twitter.com/wespickett))
diff --git a/site/docs/pages/framekit/introduction.mdx b/site/docs/pages/framekit/introduction.mdx index 7acb1eb821..6370383d4a 100644 --- a/site/docs/pages/framekit/introduction.mdx +++ b/site/docs/pages/framekit/introduction.mdx @@ -1,89 +1,225 @@ ---- -outline: deep ---- - -# Frame Kit 🖼️ +# Introduction to Frame Kit 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)". +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://docs.farcaster.xyz/learn/what-is-farcaster/frames)". + +**React component**: -Utilities: +- ``: This component renders all the Frame metadata elements in one place. -- [getFrameAccountAddress()](https://github.com/coinbase/onchainkit?tab=readme-ov-file#getframeaccountaddress) -- [getFrameMessage()](https://github.com/coinbase/onchainkit?tab=readme-ov-file#getFrameMessage) -- [getFrameMetadata()](https://github.com/coinbase/onchainkit?tab=readme-ov-file#getFrameMetadata) +**Typescript 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. +- [`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.
-### getFrameAccountAddress(message, options) +### `` + +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 +export default function HomePage() { + return ( + ... + + ... + ); +} +``` + +**@Props** + +```ts +type FrameButtonMetadata = + | { + action: 'link' | 'mint'; + label: string; + target: string; + } + | { + action?: 'post' | 'post_redirect'; + label: string; + }; + +type FrameImageMetadata = { + src: string; + aspectRatio?: '1.91:1' | '1:1'; +}; + +type FrameInputMetadata = { + text: string; +}; + +type FrameMetadataType = { + // A list of strings which are the label for the buttons in the frame (max 4 buttons). + buttons?: [FrameButtonMetadata, ...FrameButtonMetadata[]]; + // An image which must be smaller than 10MB and should have an aspect ratio of 1.91:1 or 1:1 + image: FrameImageMetadata; + // The text input to use for the Frame. + input?: FrameInputMetadata; + // A valid POST URL to send the Signature Packet to. + postUrl?: string; + // A period in seconds at which the app should expect the image to update. + refreshPeriod?: number; +}; + +type FrameMetadataReact = FrameMetadataType & { + wrapper?: React.ComponentType; +}; +``` + +**@Returns** + +```html + + + + + + + + + + + +``` + +
-When a user interacts with your Frame, you will receive a JSON message called the "Frame Signature Packet." Once you validate this `message`, you can extract the Account Address by using the `getFrameAccountAddress(message)` function. +### getFrameHtmlResponse(frameMetadata) -This Account Address can then be utilized for subsequent operations, enhancing the personalized experience of each individual using the Frame. +When you need to send an HTML Frame Response, the `getFrameHtmlResponse` method is here to assist you. -Note: To utilize this function, we rely on [Neynar APIs](https://docs.neynar.com/reference/user-bulk). In order to avoid rate limiting, please ensure that you have your own API KEY. Sign up [here](https://neynar.com). +It generates a valid HTML string response with a frame and utilizes `FrameMetadata` types for page metadata. This eliminates the need to manually create server-side HTML strings. ```ts -// Steps 1. import getFrameAccountAddress from @coinbase/onchainkit -import { FrameRequest, getFrameAccountAddress, getFrameMessage } from '@coinbase/onchainkit'; +// Step 1. import getFrameHtmlResponse from @coinbase/onchainkit +import { getFrameHtmlResponse } from '@coinbase/onchainkit'; import { NextRequest, NextResponse } from 'next/server'; async function getResponse(req: NextRequest): Promise { - let accountAddress = ''; - // Step 2. Read the body from the Next Request - const body: FrameRequest = await req.json(); - // Step 3. Validate the message - const { isValid, message } = await getFrameMessage(body); - - // Step 4. Determine the experience based on the validity of the message - if (isValid) { - // Step 5. Get from the message the Account Address of the user using the Frame - accountAddress = await getFrameAccountAddress(message, { NEYNAR_API_KEY: 'NEYNAR_API_DOCS' }); - } else { - // sorry, the message is not valid and it will be undefined - } - + // Step 2. Build your Frame logic ... + + return new NextResponse( + // Step 3. Use getFrameHtmlResponse to create a Frame response + getFrameHtmlResponse({ + buttons: [ + { + label: `We love BOAT`, + }, + ], + image: 'https://build-onchain-apps.vercel.app/release/v-0-17.png', + postUrl: 'https://build-onchain-apps.vercel.app/api/frame', + }), + ); } export async function POST(req: NextRequest): Promise { return getResponse(req); } - -export const dynamic = 'force-dynamic'; ``` **@Param** -- `message`: The validated message from the Frame -- `options`: - - `NEYNAR_API_KEY`: The NEYNAR_API_KEY used to access [Neynar Farcaster Indexer](https://docs.neynar.com/reference/user-bulk) +```ts +type FrameButtonMetadata = + | { + action: 'link' | 'mint'; + label: string; + target: string; + } + | { + action?: 'post' | 'post_redirect'; + label: string; + }; + +type FrameImageMetadata = { + src: string; + aspectRatio?: '1.91:1' | '1:1'; +}; + +type FrameInputMetadata = { + text: string; +}; + +type FrameMetadataType = { + // A list of strings which are the label for the buttons in the frame (max 4 buttons). + buttons?: [FrameButtonMetadata, ...FrameButtonMetadata[]]; + // An image which must be smaller than 10MB and should have an aspect ratio of 1.91:1 or 1:1 + image: FrameImageMetadata; + // The text input to use for the Frame. + input?: FrameInputMetadata; + // A valid POST URL to send the Signature Packet to. + postUrl?: string; + // A period in seconds at which the app should expect the image to update. + refreshPeriod?: number; +}; +``` **@Returns** ```ts -type AccountAddressResponse = Promise; +type FrameHTMLResponse = string; ```
-### getFrameMessage() +### getFrameMessage(frameRequest) When a user interacts with your Frame, you receive a JSON message called the "Frame Signature Packet". Decode and validate this message using the `getFrameMessage` function. -It returns undefined if the message is not valid. +You can also use `getFrameMessage` to access useful information such as: + +- button: number +- fid: number +- following: boolean +- liked: boolean +- recasted: boolean +- verified_accounts: string[] + +Note that if the `message` is not valid, it will be undefined. ```ts -// Steps 1. import getFrameMessage from @coinbase/onchainkit -import { getFrameMessage } from '@coinbase/onchainkit'; +// Step 1. import getFrameMessage from @coinbase/onchainkit +import { FrameRequest, getFrameMessage } from '@coinbase/onchainkit'; import { NextRequest, NextResponse } from 'next/server'; async function getResponse(req: NextRequest): Promise { // Step 2. Read the body from the Next Request - const body = await req.json(); + const body: FrameRequest = await req.json(); // Step 3. Validate the message - const { isValid, message } = await getFrameMessage(body); + const { isValid, message } = await getFrameMessage(body , { + neynarApiKey: 'NEYNAR_ONCHAIN_KIT' + }); // Step 4. Determine the experience based on the validity of the message if (isValid) { @@ -98,13 +234,28 @@ async function getResponse(req: NextRequest): Promise { export async function POST(req: NextRequest): Promise { return getResponse(req); } - -export const dynamic = 'force-dynamic'; ``` **@Param** -- `body`: The Frame Signature Packet body +```ts +// The Frame Signature Packet body +type FrameMessage = { + body: FrameRequest; + messageOptions?: FrameMessageOptions; +}; + +type FrameMessageOptions = + | { + // The API key to use for validation. Default: NEYNAR_ONCHAIN_KIT + neynarApiKey?: string; + // Whether to cast the reaction context. Default: true + castReactionContext?: boolean; + // Whether to follow the context. Default: true + followContext?: boolean; + } + | undefined; +``` **@Returns** @@ -112,31 +263,33 @@ export const dynamic = 'force-dynamic'; type Promise; type FrameValidationResponse = - | { isValid: true; message: FrameData } + | { isValid: true; message: FrameValidationData } | { isValid: false; message: undefined }; -interface FrameData { - fid: number; - url: string; - messageHash: string; - timestamp: number; - network: number; - buttonIndex: number; - castId: { - fid: number; - hash: string; +interface FrameValidationData { + button: number; // Number of the button clicked + following: boolean; // Indicates if the viewer clicking the frame follows the cast author + input: string; // Text input from the viewer typing in the frame + interactor: { + fid: number; // Viewer Farcaster ID + custody_address: string; // Viewer custody address + verified_accounts: string[]; // Viewer account addresses }; + liked: boolean; // Indicates if the viewer clicking the frame liked the cast + raw: NeynarFrameValidationInternalModel; + recasted: boolean; // Indicates if the viewer clicking the frame recasted the cast + valid: boolean; // Indicates if the frame is valid } ```
-### getFrameMetadata(metadata: FrameMetadata) +### getFrameMetadata(frameMetadata) With Next.js App routing, use the `getFrameMetadata()` inside your `page.ts` to get the metadata need it for your Frame. ```ts -// Steps 1. import getFrameMetadata from @coinbase/onchainkit +// Step 1. import getFrameMetadata from @coinbase/onchainkit import { getFrameMetadata } from '@coinbase/onchainkit'; import type { Metadata } from 'next'; import HomePage from './home'; @@ -149,7 +302,7 @@ const frameMetadata = getFrameMetadata({ }, ], image: 'https://build-onchain-apps.vercel.app/release/v-0-17.png', - post_url: 'https://build-onchain-apps.vercel.app/api/frame', + postUrl: 'https://build-onchain-apps.vercel.app/api/frame', }); // Step 3. Add your metadata in the Next.js metadata utility @@ -168,25 +321,37 @@ export default function Page() { **@Param** ```ts -type ButtonMetadata = { - label: string; - action?: 'post' | 'post_redirect'; -}; - -type ImageMetadata = { +type FrameButtonMetadata = + | { + action: 'link' | 'mint'; + label: string; + target: string; + } + | { + action?: 'post' | 'post_redirect'; + label: string; + }; + +type FrameImageMetadata = { src: string; aspectRatio?: '1.91:1' | '1:1'; }; -type FrameMetadata = { +type FrameInputMetadata = { + text: string; +}; + +type FrameMetadataType = { // A list of strings which are the label for the buttons in the frame (max 4 buttons). - buttons: [ButtonMetadata, ...ButtonMetadata[]]; + buttons?: [FrameButtonMetadata, ...FrameButtonMetadata[]]; // An image which must be smaller than 10MB and should have an aspect ratio of 1.91:1 - image: string | ImageMetadata; + image: FrameImageMetadata; + // The text input to use for the Frame. + input?: FrameInputMetadata; // A valid POST URL to send the Signature Packet to. - post_url: string; + postUrl?: string; // A period in seconds at which the app should expect the image to update. - refresh_period?: number; + refreshPeriod?: number; }; ``` diff --git a/site/docs/pages/identitykit/introduction.mdx b/site/docs/pages/identitykit/introduction.mdx index 7e2bfb9020..1e2630a84d 100644 --- a/site/docs/pages/identitykit/introduction.mdx +++ b/site/docs/pages/identitykit/introduction.mdx @@ -1,17 +1,16 @@ -# Identity Kit 👨‍🚀 +# Introduction to Identity Kit ## Name -The Name component is used to display ENS names associated with Ethereum addresses. When an ENS name is not available, it defaults to showing a truncated version of the address. +The `Name` component is used to display ENS names associated with Ethereum addresses. When an ENS name is not available, it defaults to showing a truncated version of the address. -```ts +```tsx import { Name } from '@coinbase/onchainkit'; - ; ``` -## @Props +**@Props** ```ts type UseName = { @@ -25,3 +24,26 @@ type UseName = { props?: React.HTMLAttributes; }; ``` + +## Avatar + +The `Avatar` component is used to display ENS avatar associated with Ethereum addresses. When an ENS avatar is not available, it defaults to blue color avatar. + +```tsx +import { Avatar } from '@coinbase/onchainkit'; + +; +``` + +**@Props** + +```ts +type UseAvatar = { + // Ethereum address to be resolved from ENS. + address: Address; + // Optional CSS class for custom styling. + className?: string; + // Additional HTML attributes for the span element. + props?: React.HTMLAttributes; +}; +``` diff --git a/site/docs/pages/index.mdx b/site/docs/pages/index.mdx index 8774aa77d0..bae03ff8f2 100644 --- a/site/docs/pages/index.mdx +++ b/site/docs/pages/index.mdx @@ -59,7 +59,7 @@ pnpm add @coinbase/onchainkit # Community -Check out the following places for more wagmi-related content: +Check out the following places for more OnchainKit-related content: - Follow @zizzamia ([X](https://twitter.com/zizzamia), [Farcaster](https://warpcast.com/zizzamia)) for project updates - Join the discussions on our [OnchainKit warpcast channel](https://warpcast.com/~/channel/onchainkit) diff --git a/src/core/getFrameMetadata.ts b/src/core/getFrameMetadata.ts index 58f1b946bc..c8a850d1da 100644 --- a/src/core/getFrameMetadata.ts +++ b/src/core/getFrameMetadata.ts @@ -41,7 +41,10 @@ export const getFrameMetadata = function ({ if (button.action) { metadata[`fc:frame:button:${index + 1}:action`] = button.action; } - if ((button.action == 'link' || button.action == 'mint' || button.action == 'post') && button.target) { + if ( + (button.action == 'link' || button.action == 'mint' || button.action == 'post') && + button.target + ) { metadata[`fc:frame:button:${index + 1}:target`] = button.target; } });