From ddd4dda7a0f7a8fa42b74c6318dbcf0fe94a42a1 Mon Sep 17 00:00:00 2001 From: Leonardo Zizzamia Date: Mon, 4 Mar 2024 16:41:04 -0800 Subject: [PATCH 1/4] feat: added initial version of Frame Transaction types --- src/frame/index.ts | 2 ++ src/frame/types.ts | 23 +++++++++++++++++++++++ 2 files changed, 25 insertions(+) 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..80c66381f4 100644 --- a/src/frame/types.ts +++ b/src/frame/types.ts @@ -1,3 +1,7 @@ +import type { + Abi, + Hex, +} from 'viem'; import { NeynarFrameValidationInternalModel } from '../utils/neynar/frame/types'; /** @@ -138,6 +142,25 @@ export type FrameMetadataType = { */ export type FrameMetadataResponse = Record; +/** + * Note: exported as public Type + */ +export type FrameTransactionResponse = { + chainId: `eip155:${number}`; // 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?: Hex; // The data to send with the transaction. + to: Hex; // The address of the contract to call. + value: string; // The amount of Ether to send with the transaction. +} + /** * Settings to simulate statuses on mock frames. * From fd7cbec73e2d8256d0eac3e5476cb03dc03fe96d Mon Sep 17 00:00:00 2001 From: Leonardo Zizzamia Date: Mon, 4 Mar 2024 17:00:56 -0800 Subject: [PATCH 2/4] types --- site/docs/pages/frame/introduction.mdx | 29 ++++++++++---- site/docs/pages/frame/types.mdx | 39 ++++++++++++------ site/docs/pages/getting-started.mdx | 49 ++++------------------- site/docs/pages/identity/introduction.mdx | 6 +-- site/docs/pages/index.mdx | 47 ++++------------------ src/frame/types.ts | 33 ++++++--------- 6 files changed, 78 insertions(+), 125 deletions(-) diff --git a/site/docs/pages/frame/introduction.mdx b/site/docs/pages/frame/introduction.mdx index 786bf9be4d..e0da644881 100644 --- a/site/docs/pages/frame/introduction.mdx +++ b/site/docs/pages/frame/introduction.mdx @@ -5,13 +5,12 @@ deescription: Introduction to Frame Kit # Introduction to Frame Kit -A Frame transforms any cast into an interactive app. +A Frame turns 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)". +Creating a frame is simple: choose an image, add clickable buttons. +For more details, visit the [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. - Components: - [``](/frame/frame-metadata) @@ -19,5 +18,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..09043e3816 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,24 @@ type FrameValidationResponse = | { isValid: true; message: FrameValidationData } | { isValid: false; message: undefined }; ``` + +## `FrameTransactionResponse` + +```ts +type FrameTransactionResponse = { + chainId: `eip155:${number}`; // 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 +export type FrameTransactionEthSendParams = { + abi: Abi; // The contract ABI for the contract to call. + data?: Hex; // The data to send with the transaction. + to: Hex; // The address of the contract to call. + value: string; // 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..53cca71630 100644 --- a/site/docs/pages/identity/introduction.mdx +++ b/site/docs/pages/identity/introduction.mdx @@ -13,15 +13,15 @@ In order to use **Identity Kit** you must also install `graphql@14 graphql-reque :::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: 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/types.ts b/src/frame/types.ts index 80c66381f4..25a722dfa3 100644 --- a/src/frame/types.ts +++ b/src/frame/types.ts @@ -1,7 +1,4 @@ -import type { - Abi, - Hex, -} from 'viem'; +import type { Abi, Hex } from 'viem'; import { NeynarFrameValidationInternalModel } from '../utils/neynar/frame/types'; /** @@ -119,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. }; /** @@ -146,20 +137,20 @@ export type FrameMetadataResponse = Record; * Note: exported as public Type */ export type FrameTransactionResponse = { - chainId: `eip155:${number}`; // A CAIP-2 chain ID to identify the tx network + chainId: `eip155:${number}`; // 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?: Hex; // The data to send with the transaction. - to: Hex; // The address of the contract to call. + data?: Hex; // The data to send with the transaction. + to: Hex; // The address of the contract to call. value: string; // The amount of Ether to send with the transaction. -} +}; /** * Settings to simulate statuses on mock frames. From e2f5779c1275e7504668333318116746640855aa Mon Sep 17 00:00:00 2001 From: Leonardo Zizzamia Date: Mon, 4 Mar 2024 17:13:59 -0800 Subject: [PATCH 3/4] docs --- .changeset/spotty-melons-bathe.md | 6 ++++++ site/docs/pages/frame/introduction.mdx | 7 +------ site/docs/pages/identity/introduction.mdx | 19 ++++++++----------- src/version.ts | 2 +- 4 files changed, 16 insertions(+), 18 deletions(-) create mode 100644 .changeset/spotty-melons-bathe.md 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 e0da644881..c679cc33b8 100644 --- a/site/docs/pages/frame/introduction.mdx +++ b/site/docs/pages/frame/introduction.mdx @@ -5,12 +5,7 @@ deescription: Introduction to Frame Kit # Introduction to Frame Kit -A Frame turns any cast into an interactive app. - -Creating a frame is simple: choose an image, add clickable buttons. -For more details, visit the [Farcaster Frames Official Documentation](https://docs.farcaster.xyz/learn/what-is-farcaster/frames). - -OnchainKit provides TypeScript utilities and React components. +OnchainKit provides TypeScript utilities and React components to help you build Frames. - Components: - [``](/frame/frame-metadata) diff --git a/site/docs/pages/identity/introduction.mdx b/site/docs/pages/identity/introduction.mdx index 53cca71630..ea30e8a5f5 100644 --- a/site/docs/pages/identity/introduction.mdx +++ b/site/docs/pages/identity/introduction.mdx @@ -5,10 +5,15 @@ 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 @@ -24,12 +29,4 @@ yarn add @coinbase/onchainkit react@18 react-dom@18 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/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'; From 1af52dc089c4dec1b4bca74615112ce1dddf6e67 Mon Sep 17 00:00:00 2001 From: Leonardo Zizzamia Date: Tue, 5 Mar 2024 10:43:33 -0800 Subject: [PATCH 4/4] feedback --- site/docs/pages/frame/types.mdx | 13 ++++++++----- src/frame/types.ts | 12 +++++++----- 2 files changed, 15 insertions(+), 10 deletions(-) diff --git a/site/docs/pages/frame/types.mdx b/site/docs/pages/frame/types.mdx index 09043e3816..a0dc064a9b 100644 --- a/site/docs/pages/frame/types.mdx +++ b/site/docs/pages/frame/types.mdx @@ -112,8 +112,11 @@ type FrameValidationResponse = ## `FrameTransactionResponse` ```ts +type ChainNamespace = 'eip155' | 'solana'; +type ChainReference = string; + type FrameTransactionResponse = { - chainId: `eip155:${number}`; // A CAIP-2 chain ID to identify the tx network + 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 }; @@ -122,10 +125,10 @@ type FrameTransactionResponse = { ## `FrameTransactionEthSendParams` ```ts -export type FrameTransactionEthSendParams = { +type FrameTransactionEthSendParams = { abi: Abi; // The contract ABI for the contract to call. - data?: Hex; // The data to send with the transaction. - to: Hex; // The address of the contract to call. - value: string; // The amount of Ether to send with the transaction. + 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/src/frame/types.ts b/src/frame/types.ts index 25a722dfa3..ba8caf08fe 100644 --- a/src/frame/types.ts +++ b/src/frame/types.ts @@ -1,4 +1,4 @@ -import type { Abi, Hex } from 'viem'; +import type { Abi, Address } from 'viem'; import { NeynarFrameValidationInternalModel } from '../utils/neynar/frame/types'; /** @@ -136,8 +136,10 @@ export type FrameMetadataResponse = Record; /** * Note: exported as public Type */ +type ChainNamespace = 'eip155' | 'solana'; +type ChainReference = string; export type FrameTransactionResponse = { - chainId: `eip155:${number}`; // A CAIP-2 chain ID to identify the tx network + 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 }; @@ -147,9 +149,9 @@ export type FrameTransactionResponse = { */ export type FrameTransactionEthSendParams = { abi: Abi; // The contract ABI for the contract to call. - data?: Hex; // The data to send with the transaction. - to: Hex; // The address of the contract to call. - value: string; // The amount of Ether to send with the transaction. + 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. }; /**