feat: polish FrameValidationData (#60)

.changeset/new-dragons-serve.md

@@ -0,0 +1,11 @@
+---
+'@coinbase/onchainkit': minor
+---
+
+- **feat**: deprecated `getFrameAccountAddress` as now `getFrameMessage` returns also the Account Address. #60
+- **feat**: integrated with Neynars api to get validated messages + additional context like recast/follow/etc. By @robpolak #59
+- **fix**: removed farcaster references as they were generating build errors and compatibility issues. By @robpolak #59
+
+BREAKING CHANGES
+
+I will write the breaking changes in the next PR

README.md

@@ -1,4 +1,4 @@
-<img src='./docs/logo-v-0-3.png' width='800' alt='OnchainKit'>
+<img src='./docs/logo-v-0-4.png' width='800' alt='OnchainKit'>
 
 # [OnchainKit](https://github.com/coinbase/onchainkit/)
 
@@ -32,73 +32,12 @@ Creating a frame is easy: select an image and add clickable buttons. When a butt
 
 Utilities:
 
-- [getFrameAccountAddress()](https://github.com/coinbase/onchainkit?tab=readme-ov-file#getframeaccountaddressmessage-options): Retrieves the user **Account Address** from a Frame message.
 - [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.
 
 <br />
 
-### getFrameAccountAddress(message, options)
-
-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.
-
-This Account Address can then be utilized for subsequent operations, enhancing the personalized experience of each individual using the Frame.
-
-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).
-
-```ts
-// Steps 1. import getFrameAccountAddress from @coinbase/onchainkit
-import { FrameRequest, getFrameAccountAddress, getFrameMessage } from '@coinbase/onchainkit';
-import { NextRequest, NextResponse } from 'next/server';
-
-async function getResponse(req: NextRequest): Promise<NextResponse> {
-  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_ONCHAIN_KIT' });
-  } else {
-    // sorry, the message is not valid and it will be undefined
-  }
-
-  ...
-}
-
-export async function POST(req: NextRequest): Promise<Response> {
-  return getResponse(req);
-}
-
-export const dynamic = 'force-dynamic';
-```
-
-**@Param**
-
-```ts
-type AccountAddressRequest = {
-  // The validated message from the getFrameMessage() function
-  message: FrameData;
-  options: {
-    // The NEYNAR_API_KEY used to access Neynar Farcaster Indexer
-    // https://docs.neynar.com/reference/user-bulk
-    NEYNAR_API_KEY: string;
-  };
-};
-```
-
-**@Returns**
-
-```ts
-type AccountAddressResponse = Promise<string | undefined>;
-```
-
-<br />
-
 ### getFrameHtmlResponse(frameMetadata)
 
 When you need to send an HTML Frame Response, the `getFrameHtmlResponse` method is here to assist you.
@@ -108,7 +47,6 @@ It generates a valid HTML string response with a frame and utilizes `FrameMetada
 ```ts
 import {
   FrameRequest,
-  getFrameAccountAddress,
   getFrameMessage,
   getFrameHtmlResponse,
 } from '@coinbase/onchainkit';

src/core/farcasterTypes.ts

@@ -1,15 +1,4 @@
-import { NeynarFrameValidationResponse } from '../utils/neynar/frame/neynarFrameModels';
-
-export interface FrameRequest {
-  untrustedData: FrameData;
-  trustedData: {
-    messageBytes: string;
-  };
-}
-
-export type FrameValidationResponse =
-  | { isValid: true; message: NeynarFrameValidationResponse }
-  | { isValid: false; message: undefined };
+import { NeynarFrameValidationInternalModel } from '../utils/neynar/frame/types';
 
 export interface FrameData {
   fid: number;
@@ -24,6 +13,34 @@ export interface FrameData {
   };
 }
 
+export interface FrameRequest {
+  untrustedData: FrameData;
+  trustedData: {
+    messageBytes: string;
+  };
+}
+
+/**
+ * Simplified Object model with the raw Neynar data if-needed.
+ */
+export interface FrameValidationData {
+  valid: boolean;
+  button: number;
+  liked: boolean;
+  recasted: boolean;
+  following: boolean;
+  interactor: {
+    fid: number;
+    custody_address: string;
+    verified_accounts: string[];
+  };
+  raw: NeynarFrameValidationInternalModel;
+}
+
+export type FrameValidationResponse =
+  | { isValid: true; message: FrameValidationData }
+  | { isValid: false; message: undefined };
+
 export function convertToFrame(json: any) {
   return {
     fid: json.fid,

src/index.ts

@@ -1,9 +1,6 @@
-// 🌲
-const version = '0.3.1';
-
-export { version };
+// 🌲☀️🌲
+export { version } from './version';
 export { getFrameHtmlResponse } from './core/getFrameHtmlResponse';
-export { getFrameAccountAddress } from './core/getFrameAccountAddress';
 export { getFrameMetadata } from './core/getFrameMetadata';
 export { getFrameMessage } from './core/getFrameMessage';
-export type { FrameRequest, FrameData } from './core/farcasterTypes';
+export type { FrameRequest, FrameValidationData } from './core/farcasterTypes';

src/utils/neynar/frame/neynarFrameFunctions.ts

@@ -1,5 +1,7 @@
+import { version } from '../../../version';
+import { FrameValidationData } from '../../../core/farcasterTypes';
 import { FetchError } from '../exceptions/FetchError';
-import { convertToNeynarResponseModel, NeynarFrameValidationResponse } from './neynarFrameModels';
+import { convertToNeynarResponseModel } from './neynarFrameModels';
 
 export const NEYNAR_DEFAULT_API_KEY = 'NEYNAR_ONCHAIN_KIT';
 
@@ -8,11 +10,16 @@ export async function neynarFrameValidation(
   apiKey: string = NEYNAR_DEFAULT_API_KEY,
   castReactionContext = true,
   followContext = true,
-): Promise<NeynarFrameValidationResponse | undefined> {
+): Promise<FrameValidationData | undefined> {
   const options = {
     method: 'POST',
     url: `https://api.neynar.com/v2/farcaster/frame/validate`,
-    headers: { accept: 'application/json', api_key: apiKey, 'content-type': 'application/json' },
+    headers: {
+      accept: 'application/json',
+      api_key: apiKey,
+      'content-type': 'application/json',
+      onchainkit_version: version,
+    },
     body: JSON.stringify({
       message_bytes_in_hex: messageBytes,
       cast_reaction_context: castReactionContext, // Returns if the user has liked/recasted