Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: polish getFrameMessage types #186

Merged
merged 2 commits into from
Feb 24, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
107 changes: 43 additions & 64 deletions site/docs/pages/frame/get-frame-message.mdx
Original file line number Diff line number Diff line change
@@ -1,90 +1,69 @@
# getFrameMessage

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[]
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.

Note that if the `message` is not valid, it will be undefined.

## Usage

```ts
// Step 1. import getFrameMessage from @coinbase/onchainkit
import { FrameRequest, getFrameMessage } from '@coinbase/onchainkit/frame';
import { FrameRequest, getFrameMessage } from '@coinbase/onchainkit/frame'; // [!code focus]
import { NextRequest, NextResponse } from 'next/server';

async function getResponse(req: NextRequest): Promise<NextResponse> {
// 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
const frameRequest: FrameRequest = await req.json();
const { isValid, message } = await getFrameMessage(frameRequest); // [!code focus]

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<Response> {
return getResponse(req);
}
```

## Returns

[`Promise<FrameValidationResponse>`](/frame/types#framevalidationresponse)

## Parameters

### FrameRequest

- [`FrameRequest`](/frame/types#framerequest)

### options.neynarApiKey

- **Type:** `string`

Default to OnchainKit's default key.

```ts
type Promise<FrameValidationResponse>;

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
}
const { isValid, message } = await getFrameMessage(frameRequest, {
neynarApiKey: 'MY_NEYNAR_API_KEY', // [!code focus]
});
```

## Parameters
### options.castReactionContext

- **Type:** `boolean`

Whether to cast the reaction context. Default: true

```ts
const { isValid, message } = await getFrameMessage(frameRequest, {
castReactionContext: true, // [!code focus]
});
```

### options.followContext

- **Type:** `boolean`

Whether to follow the context. Default: true

```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;
const { isValid, message } = await getFrameMessage(frameRequest, {
followContext: true, // [!code focus]
});
```
42 changes: 42 additions & 0 deletions site/docs/pages/frame/types.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -70,3 +70,45 @@ type FrameMetadataType = {
refreshPeriod?: number;
};
```

## `FrameRequest`

```ts
interface FrameRequest {
untrustedData: FrameData;
trustedData: {
messageBytes: string;
};
}
```

## `FrameValidationData`

```ts
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
verified_addresses: {
eth_addresses: string[] | null;
sol_addresses: string[] | null;
};
};
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
}
```

## `FrameValidationResponse`

```ts
type FrameValidationResponse =
| { isValid: true; message: FrameValidationData }
| { isValid: false; message: undefined };
```
Loading