CopyBot/create-farcaster-mini-app
1
0
Fork 0
mirror of https://github.com/neynarxyz/create-farcaster-mini-app.git synced 2025-11-16 08:08:56 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat: neynar data in opengraph share image

Browse Source
This commit is contained in:
veganbeef 2025-05-09 10:55:22 -07:00
parent f3f8924fa9
commit 681f287c20
No known key found for this signature in database
6 changed files with 49 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "@neynar/create-farcaster-mini-app",
"version": "1.2.21",
"version": "1.2.22",
"type": "module",
"private": false,
"access": "public",

2
scripts/build.js
View File

@ -172,7 +172,7 @@ async function generateFarcasterMetadata(domain, fid, accountAddress, seedPhrase
name: process.env.NEXT_PUBLIC_FRAME_NAME,
iconUrl: `https://${domain}/icon.png`,
homeUrl: `https://${domain}`,
imageUrl: `https://${domain}/opengraph-image`,
imageUrl: `https://${domain}/api/opengraph-image`,
buttonTitle: process.env.NEXT_PUBLIC_FRAME_BUTTON_TEXT,
splashImageUrl: `https://${domain}/splash.png`,
splashBackgroundColor: "#f7f7f7",

2
scripts/deploy.js
View File

@ -83,7 +83,7 @@ async function generateFarcasterMetadata(domain, fid, accountAddress, seedPhrase
name: process.env.NEXT_PUBLIC_FRAME_NAME?.trim(),
iconUrl: `https://${trimmedDomain}/icon.png`,
homeUrl: `https://${trimmedDomain}`,
imageUrl: `https://${trimmedDomain}/opengraph-image`,
imageUrl: `https://${trimmedDomain}/api/opengraph-image`,
buttonTitle: process.env.NEXT_PUBLIC_FRAME_BUTTON_TEXT?.trim(),
splashImageUrl: `https://${trimmedDomain}/splash.png`,
splashBackgroundColor: "#f7f7f7",

30
src/app/api/opengraph-image/route.tsx Normal file
View File

@ -0,0 +1,30 @@
import { ImageResponse } from "next/og";
import { NextRequest } from "next/server";
import { getNeynarUser } from "~/lib/neynar";
export const dynamic = 'force-dynamic';
export async function GET(request: NextRequest) {
const { searchParams } = new URL(request.url);
const fid = searchParams.get('fid');
const user = await getNeynarUser(Number(fid));
return new ImageResponse(
(
<div tw="flex h-full w-full flex-col justify-center items-center relative bg-purple-600">
{user?.pfp_url && (
<div tw="flex w-96 h-96 rounded-full overflow-hidden mb-8 border-8 border-white">
<img src={user.pfp_url} alt="Profile" tw="w-full h-full object-cover" />
</div>
)}
<h1 tw="text-8xl text-white">{user?.display_name ? `Hello from ${user.display_name ?? user.username}!` : 'Hello!'}</h1>
<p tw="text-5xl mt-4 text-white opacity-80">Powered by Neynar 🪐</p>
</div>
),
{
width: 1200,
height: 800,
}
);
}

4
src/lib/constants.ts
View File

@ -1,8 +1,8 @@
export const APP_URL = process.env.NEXT_PUBLIC_URL;
export const APP_URL = process.env.NEXT_PUBLIC_URL!;
export const APP_NAME = process.env.NEXT_PUBLIC_FRAME_NAME;
export const APP_DESCRIPTION = process.env.NEXT_PUBLIC_FRAME_DESCRIPTION;
export const APP_ICON_URL = `${APP_URL}/icon.png`;
export const APP_OG_IMAGE_URL = `${APP_URL}/opengraph-image`;
export const APP_OG_IMAGE_URL = `${APP_URL}/api/opengraph-image`;
export const APP_SPLASH_URL = `${APP_URL}/splash.png`;
export const APP_SPLASH_BACKGROUND_COLOR = "#f7f7f7";
export const APP_BUTTON_TEXT = process.env.NEXT_PUBLIC_FRAME_BUTTON_TEXT;

15
src/lib/neynar.ts
View File

@ -1,4 +1,4 @@
import { NeynarAPIClient, Configuration } from '@neynar/nodejs-sdk';
import { NeynarAPIClient, Configuration, WebhookUserCreated } from '@neynar/nodejs-sdk';
import { APP_URL } from './constants';
let neynarClient: NeynarAPIClient | null = null;
@ -18,6 +18,19 @@ export function getNeynarClient() {
return neynarClient;
}
type User = WebhookUserCreated['data'];
export async function getNeynarUser(fid: number): Promise<User | null> {
try {
const client = getNeynarClient();
const usersResponse = await client.fetchBulkUsers({ fids: [fid] });
return usersResponse.users[0];
} catch (error) {
console.error('Error getting Neynar user:', error);
return null;
}
}
type SendFrameNotificationResult =
| {
state: "error";