diff --git a/.changeset/spotty-melons-bathe.md b/.changeset/spotty-melons-bathe.md new file mode 100644 index 0000000000..cc1017c273 --- /dev/null +++ b/.changeset/spotty-melons-bathe.md @@ -0,0 +1,6 @@ +--- +'@coinbase/onchainkit': patch +--- + +- **feat**: added `FrameTransactionResponse` and `FrameTransactionEthSendParams` as initial version of Frame Transaction types. By @zizzamia #211 +- **docs**: polished introduction for Frame and Identity pages. By @zizzamia #211 diff --git a/site/docs/pages/frame/introduction.mdx b/site/docs/pages/frame/introduction.mdx index 786bf9be4d..c679cc33b8 100644 --- a/site/docs/pages/frame/introduction.mdx +++ b/site/docs/pages/frame/introduction.mdx @@ -5,13 +5,7 @@ deescription: Introduction to 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://docs.farcaster.xyz/learn/what-is-farcaster/frames)". - -To assist you in engaging with Frames, here is the Frame Kit which includes: +OnchainKit provides TypeScript utilities and React components to help you build Frames. - Components: - [``](/frame/frame-metadata) @@ -19,5 +13,21 @@ To assist you in engaging with Frames, here is the Frame Kit which includes: - [`getFrameHtmlResponse`](/frame/get-frame-html-response) - [`getFrameMessage`](/frame/get-frame-message) - [`getFrameMetadata`](/frame/get-frame-metadata) -- Emulator - - [`framegear`](/frame/framegear) +- [`Framegear`](/frame/framegear) +- [`Types`](/frame/types) + +If you are using components, be sure to install `react@18` and `react-dom@18` in your app alongside OnchainKit. + +:::code-group + +```bash [npm] +npm install @coinbase/onchainkit react@18 react-dom@18 +``` + +```bash [yarn] +yarn add @coinbase/onchainkit react@18 react-dom@18 +``` + +```bash [pnpm] +pnpm add @coinbase/onchainkit react@18 react-dom@18 +``` diff --git a/site/docs/pages/frame/types.mdx b/site/docs/pages/frame/types.mdx index 67630ab748..a0dc064a9b 100644 --- a/site/docs/pages/frame/types.mdx +++ b/site/docs/pages/frame/types.mdx @@ -58,18 +58,12 @@ type FrameMetadataReact = FrameMetadataType & { ```ts 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: string | 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; - // A string containing serialized state (e.g. JSON) passed to the frame server. - state?: object; + buttons?: [FrameButtonMetadata, ...FrameButtonMetadata[]]; // A list of strings which are the label for the buttons in the frame (max 4 buttons). + image: string | FrameImageMetadata; // An image which must be smaller than 10MB and should have an aspect ratio of 1.91:1 + input?: FrameInputMetadata; // The text input to use for the Frame. + postUrl?: string; // A valid POST URL to send the Signature Packet to. + refreshPeriod?: number; // A period in seconds at which the app should expect the image to update. + state?: object; // A string containing serialized state (e.g. JSON) passed to the frame server. }; ``` @@ -114,3 +108,27 @@ type FrameValidationResponse = | { isValid: true; message: FrameValidationData } | { isValid: false; message: undefined }; ``` + +## `FrameTransactionResponse` + +```ts +type ChainNamespace = 'eip155' | 'solana'; +type ChainReference = string; + +type FrameTransactionResponse = { + chainId: `${ChainNamespace}:${ChainReference}`; // A CAIP-2 chain ID to identify the tx network + method: 'eth_sendTransaction'; // A method ID to identify the type of tx request. + params: FrameTransactionEthSendParams; // Specific parameters for chainId and method +}; +``` + +## `FrameTransactionEthSendParams` + +```ts +type FrameTransactionEthSendParams = { + abi: Abi; // The contract ABI for the contract to call. + data?: Address; // The data to send with the transaction. + to: Address; // The address of the contract to call. + value: bigint; // The amount of Ether to send with the transaction. +}; +``` diff --git a/site/docs/pages/getting-started.mdx b/site/docs/pages/getting-started.mdx index afb12eb882..1e09519ccb 100644 --- a/site/docs/pages/getting-started.mdx +++ b/site/docs/pages/getting-started.mdx @@ -7,57 +7,22 @@ Add OnchainKit to your project, install the required packages. :::code-group ```bash [npm] -npm install @coinbase/onchainkit - -# Depending on the components or utilities you use, -# you may end up utilizing any of those libraries. -npm install viem@2.x react@18 react-dom@18 +npm install @coinbase/onchainkit viem@2.x ``` ```bash [yarn] -yarn add @coinbase/onchainkit - -# Depending on the components or utilities you use, -# you may end up utilizing any of those libraries. -yarn add viem@2.x react@18 react-dom@18 +yarn add @coinbase/onchainkit viem@2.x ``` ```bash [pnpm] -pnpm add @coinbase/onchainkit - -# Depending on the components or utilities you use, -# you may end up utilizing any of those libraries. -pnpm install viem@2.x react@18 react-dom@18 +pnpm add @coinbase/onchainkit viem@2.x ``` ::: OnchainKit is divided into various theme utilities and components that are available for your use: -- [Farcaster Kit](/farcaster/introduction) - - - Utilities: - - [`getFarcasterUserAddress`](/farcaster/get-farcaster-user-address) - -- [Frame Kit](/frame/introduction) - - - Components: - - [``](/frame/frame-metadata) - - Utilities: - - [`getFrameHtmlResponse`](/frame/get-frame-html-response) - - [`getFrameMessage`](/frame/get-frame-message) - - [`getFrameMetadata`](/frame/get-frame-metadata) - - [Framegear](/frame/framegear) - -- [Identity Kit](/identity/introduction) - - - Components: - - [``](/identity/avatar) - - [``](/identity/name) - - Utilities: - - [`getEASAttestations`](/identity/get-eas-attestations) - -- [XMTP Kit](/xmtp/introduction) - - Utilities: - - [`getXmtpFrameMessage`](/xmtp/get-xmtp-frame-message) - - [`isXmtpFrameRequest`](/xmtp/is-xmtp-frame-request) +- [Farcaster](/farcaster/introduction) +- [Frame](/frame/introduction) +- [Identity](/identity/introduction) +- [XMTP](/xmtp/introduction) diff --git a/site/docs/pages/identity/introduction.mdx b/site/docs/pages/identity/introduction.mdx index 2da4dcf7a6..ea30e8a5f5 100644 --- a/site/docs/pages/identity/introduction.mdx +++ b/site/docs/pages/identity/introduction.mdx @@ -5,31 +5,28 @@ deescription: Introduction to Identity Kit # Introduction to Identity Kit -Identity Kit is a collection of components and hooks that help you build user interfaces for Ethereum applications. -It provides a set of tools to resolve Ethereum addresses to ENS names, and more. +OnchainKit provides TypeScript utilities and React components to help you build applications that interact with onchain identity. -In order to use **Identity Kit** you must also install `graphql@14 graphql-request@6` in your app, alongside Onchainkit. +- Components: + - [``](/identity/avatar): A component to display an ENS avatar. + - [``](/identity/name): A component to display an ENS name. +- Utilities: + - [`getEASAttestations`](/identity/get-eas-attestations): A function to fetche EAS attestations. + +Required depedencies for using the Identity utilities and components are: :::code-group ```bash [npm] -npm install @coinbase/onchainkit graphql@14 graphql-request@6 +npm install @coinbase/onchainkit react@18 react-dom@18 graphql@14 graphql-request@6 ``` ```bash [yarn] -yarn add @coinbase/onchainkit graphql@14 graphql-request@6 +yarn add @coinbase/onchainkit react@18 react-dom@18 graphql@14 graphql-request@6 ``` ```bash [pnpm] -pnpm add @coinbase/onchainkit graphql@14 graphql-request@6 +pnpm add @coinbase/onchainkit react@18 react-dom@18 graphql@14 graphql-request@6 ``` -To assist you in engaging with onchain Identity, here is the Identity Kit which includes: - ::: - -- Components: - - [``](/identity/avatar): A component to display an ENS avatar. - - [``](/identity/name): A component to display an ENS name. -- Utilities: - - [`getEASAttestations`](/identity/get-eas-attestations): A function to fetche EAS attestations. diff --git a/site/docs/pages/index.mdx b/site/docs/pages/index.mdx index a8910b35e8..8e71a4d410 100644 --- a/site/docs/pages/index.mdx +++ b/site/docs/pages/index.mdx @@ -31,27 +31,15 @@ import { HomePage } from 'vocs/components'; :::code-group ```bash [npm] -npm install @coinbase/onchainkit - -# Depending on the components or utilities you use, -# you may end up utilizing any of those libraries. -npm install viem@2.x react@18 react-dom@18 +npm install @coinbase/onchainkit viem@2.x ``` ```bash [yarn] -yarn add @coinbase/onchainkit - -# Depending on the components or utilities you use, -# you may end up utilizing any of those libraries. -yarn add viem@2.x react@18 react-dom@18 +yarn add @coinbase/onchainkit viem@2.x ``` ```bash [pnpm] -pnpm add @coinbase/onchainkit - -# Depending on the components or utilities you use, -# you may end up utilizing any of those libraries. -pnpm install viem@2.x react@18 react-dom@18 +pnpm add @coinbase/onchainkit viem@2.x ``` ::: @@ -73,31 +61,10 @@ pnpm install viem@2.x react@18 react-dom@18 OnchainKit offers three themes packed with React components and TypeScript utilities ready for action. -- [Farcaster Kit](/farcaster/introduction) - - Utilities: - - [`getFarcasterUserAddress`](/farcaster/get-farcaster-user-address) -- [Frame Kit](/frame/introduction) - - - Components: - - [``](/frame/frame-metadata) - - Utilities: - - [`getFrameHtmlResponse`](/frame/get-frame-html-response) - - [`getFrameMessage`](/frame/get-frame-message) - - [`getFrameMetadata`](/frame/get-frame-metadata) - - [Framegear](/frame/framegear) - -- [Identity Kit](/identity/introduction) - - - Components: - - [``](/identity/avatar) - - [``](/identity/name) - - Utilities: - - [`getEASAttestations`](/identity/get-eas-attestations) - -- [XMTP Kit](/xmtp/introduction) - - Utilities: - - [`getXmtpFrameMessage`](/xmtp/get-xmtp-frame-message) - - [`isXmtpFrameRequest`](/xmtp/is-xmtp-frame-request) +- [Farcaster](/farcaster/introduction) +- [Frame](/frame/introduction) +- [Identity](/identity/introduction) +- [XMTP](/xmtp/introduction) # Community diff --git a/src/frame/index.ts b/src/frame/index.ts index c27b1b66b8..958ec40290 100644 --- a/src/frame/index.ts +++ b/src/frame/index.ts @@ -13,6 +13,8 @@ export type { FrameMetadataType, FrameRequest, FrameValidationData, + FrameTransactionResponse, + FrameTransactionEthSendParams, MockFrameRequest, MockFrameRequestOptions, } from './types'; diff --git a/src/frame/types.ts b/src/frame/types.ts index b2392a09e9..ba8caf08fe 100644 --- a/src/frame/types.ts +++ b/src/frame/types.ts @@ -1,3 +1,4 @@ +import type { Abi, Address } from 'viem'; import { NeynarFrameValidationInternalModel } from '../utils/neynar/frame/types'; /** @@ -115,22 +116,16 @@ export type FrameMetadataReact = FrameMetadataType & { * Note: exported as public Type */ export 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: string | FrameImageMetadata; - // The text input to use for the Frame. - input?: FrameInputMetadata; + buttons?: [FrameButtonMetadata, ...FrameButtonMetadata[]]; // A list of strings which are the label for the buttons in the frame (max 4 buttons). + image: string | FrameImageMetadata; // An image which must be smaller than 10MB and should have an aspect ratio of 1.91:1 + input?: FrameInputMetadata; // The text input to use for the Frame. /** @deprecated Prefer `postUrl` */ post_url?: string; - // A valid POST URL to send the Signature Packet to. - postUrl?: string; + postUrl?: string; // A valid POST URL to send the Signature Packet to. /** @deprecated Prefer `refreshPeriod` */ refresh_period?: number; - // A period in seconds at which the app should expect the image to update. - refreshPeriod?: number; - // A string containing serialized state (e.g. JSON) passed to the frame server. - state?: object; + refreshPeriod?: number; // A period in seconds at which the app should expect the image to update. + state?: object; // A string containing serialized state (e.g. JSON) passed to the frame server. }; /** @@ -138,6 +133,27 @@ export type FrameMetadataType = { */ export type FrameMetadataResponse = Record; +/** + * Note: exported as public Type + */ +type ChainNamespace = 'eip155' | 'solana'; +type ChainReference = string; +export type FrameTransactionResponse = { + chainId: `${ChainNamespace}:${ChainReference}`; // A CAIP-2 chain ID to identify the tx network + method: 'eth_sendTransaction'; // A method ID to identify the type of tx request. + params: FrameTransactionEthSendParams; // Specific parameters for chainId and method +}; + +/** + * Note: exported as public Type + */ +export type FrameTransactionEthSendParams = { + abi: Abi; // The contract ABI for the contract to call. + data?: Address; // The data to send with the transaction. + to: Address; // The address of the contract to call. + value: bigint; // The amount of Ether to send with the transaction. +}; + /** * Settings to simulate statuses on mock frames. * diff --git a/src/version.ts b/src/version.ts index 2352ca0c9f..9b90e3c8ce 100644 --- a/src/version.ts +++ b/src/version.ts @@ -1 +1 @@ -export const version = '0.9.6'; +export const version = '0.9.7';