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
-
+- [@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;
}
});