feat: added initial version of Frame Transaction types (#211)

.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

site/docs/pages/frame/introduction.mdx

@@ -5,19 +5,29 @@ 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:
   - [`<FrameMetadata />`](/frame/frame-metadata)
 - Utilities:
   - [`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
+```

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.
+};
+```

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 [email protected] react@18 react-dom@18
+npm install @coinbase/onchainkit [email protected]
 ```
 
 ```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 [email protected] react@18 react-dom@18
+yarn add @coinbase/onchainkit [email protected]
 ```
 
 ```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 [email protected] react@18 react-dom@18
+pnpm add @coinbase/onchainkit [email protected]
 ```
 
 :::
 
 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:
-    - [`<FrameMetadata />`](/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:
-    - [`<Avatar />`](/identity/avatar)
-    - [`<Name />`](/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)

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:
+  - [`<Avatar />`](/identity/avatar): A component to display an ENS avatar.
+  - [`<Name />`](/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:
-  - [`<Avatar />`](/identity/avatar): A component to display an ENS avatar.
-  - [`<Name />`](/identity/name): A component to display an ENS name.
-- Utilities:
-  - [`getEASAttestations`](/identity/get-eas-attestations): A function to fetche EAS attestations.

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 [email protected] react@18 react-dom@18
+npm install @coinbase/onchainkit [email protected]
 ```
 
 ```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 [email protected] react@18 react-dom@18
+yarn add @coinbase/onchainkit [email protected]
 ```
 
 ```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 [email protected] react@18 react-dom@18
+pnpm add @coinbase/onchainkit [email protected]
 ```
 
 :::
@@ -73,31 +61,10 @@ pnpm install [email protected] 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:
-    - [`<FrameMetadata />`](/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:
-    - [`<Avatar />`](/identity/avatar)
-    - [`<Name />`](/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
 

src/frame/index.ts

@@ -13,6 +13,8 @@ export type {
   FrameMetadataType,
   FrameRequest,
   FrameValidationData,
+  FrameTransactionResponse,
+  FrameTransactionEthSendParams,
   MockFrameRequest,
   MockFrameRequestOptions,
 } from './types';

src/frame/types.ts

@@ -1,3 +1,4 @@
+import type { Abi, Address } from 'viem';
 import { NeynarFrameValidationInternalModel } from '../utils/neynar/frame/types';
 
 /**
@@ -115,29 +116,44 @@ 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.
 };
 
 /**
  * Note: exported as public Type
  */
 export type FrameMetadataResponse = Record<string, string>;
 
+/**
+ * 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.
  *

src/version.ts

@@ -1 +1 @@
-export const version = '0.9.6';
+export const version = '0.9.7';