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.

Sign up for GitHub

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: document getFrameAccountAddress #26

Merged
merged 1 commit into from
Jan 28, 2024
Merged

docs: document getFrameAccountAddress #26

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
106 changes: 104 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,21 +17,82 @@ npm install @coinbase/onchainkit
pnpm add @coinbase/onchainkit
```

<br />
<br />

## FrameKit 🖼️
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://warpcast.notion.site/Farcaster-Frames-4bd47fe97dc74a42a48d3a234636d8c5)".

### getFrameAccountAddress()

When a user interacts with your Frame, you will receive a JSON message called `Frame Signature Packet`. From this message, you can extract the Account Address using the `getFrameAccountAddress()` function.

This Account Address can then be utilized for subsequent operations, enhancing the personalized experience of using the Frame for each individual.

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.

```ts
// Steps 1. import getFrameAccountAddress from @coinbase/onchainkit
import { getFrameAccountAddress } from '@coinbase/onchainkit';
import { NextRequest, NextResponse } from 'next/server';

async function getResponse(req: NextRequest): Promise<NextResponse> {
let accountAddress = '';
try {
// Step 2. Read the body from the Next Request
const body = await req.json();
// Step 3. Get from the body the Account Address of the user using the Frame
accountAddress = await getFrameAccountAddress(body, { NEYNAR_API_KEY: 'NEYNAR_API_DOCS' });
} catch (err) {
console.error(err);
}

// Step 4. Use the account address for your next step
return new NextResponse(`
<!DOCTYPE html>
<html>
<head>
<title>BOAT</title>
<meta name="fc:frame" content="vNext">
<meta name="fc:frame:image" content="https://build-onchain-apps.vercel.app/release/v-0-17.png">
<meta name="fc:frame:post_url" content="post_url_test">
<meta name="fc:frame:button:1" content="${accountAddress}">
</head>
<body>
<p>BOAT Text</p>
</body>
</html>
`);
}

export async function POST(req: NextRequest): Promise<Response> {
return getResponse(req);
}

export const dynamic = 'force-dynamic';
```

`getFrameAccountAddress` params

- `body`: The Frame Signature Packet body
- `options`:
- `NEYNAR_API_KEY`: The NEYNAR_API_KEY used to access [Neynar Farcaster Indexer](https://docs.neynar.com/reference/user-bulk)

<br />

### getFrameMetadata()

With Next.js App routing, use the `getFrameMetadata` inside your `page.ts` to get the metadata need it for your Frame.

```ts
// Steps 1. import generateFrameNextMetadata from @coinbase/onchainkit
// Steps 1. import getFrameMetadata from @coinbase/onchainkit
import { getFrameMetadata } from '@coinbase/onchainkit';
import type { Metadata } from 'next';
import HomePage from './home';

// Step 2. Use generateFrameNextMetadata to shape your Frame metadata
// Step 2. Use getFrameMetadata to shape your Frame metadata
const frameMetadata = getFrameMetadata({
buttons: ['boat'],
image: 'https://build-onchain-apps.vercel.app/release/v-0-17.png',
Expand All @@ -56,3 +117,44 @@ export default function Page() {
- `buttons`: A list of strings which are the label for the buttons in the frame (max 4 buttons).
- `image`: An image which must be smaller than 10MB and should have an aspect ratio of 1.91:1
- `post_url`: A valid POST URL to send the Signature Packet to.

<br />

## The Team and Our Community ☁️ 🌁 ☁️

OnchainKit is all about community; for any questions, feel free to:

1. Reach out to the core maintainers on Twitter or Farcaster
<table>
<tbody>
<tr>
<td align="center" valign="top">
<a href="https://twitter.com/Zizzamia">
<img width="80" height="80" src="https://github.com/zizzamia.png?s=100">
</a>
<br />
<a href="https://twitter.com/Zizzamia">Leonardo Zizzamia</a>
</td>
<td align="center" valign="top">
<a href="https://twitter.com/alvaroraminelli">
<img width="80" height="80" src="https://github.com/alvaroraminelli.png?s=100">
</a>
<br />
<a href="https://twitter.com/alvaroraminelli">Alvaro Raminelli</a>
</td>
<td align="center" valign="top">
<a href="https://twitter.com/0xr0b_eth">
<img width="80" height="80" src="https://github.com/robpolak.png?s=100">
</a>
<br />
<a href="https://twitter.com/0xr0b_eth">Rob Polak</a>
</td>
</tr>
</tbody>
</table>

<br>

## License

This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details
Loading