added manifest

Author: soheimam

minikit/mini-neynar/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["next/core-web-vitals", "next/typescript"]
+}

minikit/mini-neynar/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

minikit/mini-neynar/.prettierrc

@@ -0,0 +1 @@
+{}

minikit/mini-neynar/.yarnrc.yml

@@ -0,0 +1,2 @@
+# You can remove this file if you don't want to use Yarn package manager.
+nodeLinker: node-modules

minikit/mini-neynar/README.md

@@ -0,0 +1,104 @@
+# MiniKit Template
+
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-onchain --mini`](), configured with:
+
+- [MiniKit](https://docs.base.org/builderkits/minikit/overview)
+- [OnchainKit](https://www.base.org/builders/onchainkit)
+- [Tailwind CSS](https://tailwindcss.com)
+- [Next.js](https://nextjs.org/docs)
+
+## Getting Started
+
+1. Install dependencies:
+```bash
+npm install
+# or
+yarn install
+# or
+pnpm install
+# or
+bun install
+```
+
+2. Verify environment variables, these will be set up by the `npx create-onchain --mini` command:
+
+You can regenerate the FARCASTER Account Association environment variables by running `npx create-onchain --manifest` in your project directory.
+
+The environment variables enable the following features:
+
+- Frame metadata - Sets up the Frame Embed that will be shown when you cast your frame
+- Account association - Allows users to add your frame to their account, enables notifications
+- Redis API keys - Enable Webhooks and background notifications for your application by storing users notification details
+
+```bash
+# Required for Frame metadata
+NEXT_PUBLIC_URL=
+NEXT_PUBLIC_VERSION=
+NEXT_PUBLIC_ONCHAINKIT_PROJECT_NAME=
+NEXT_PUBLIC_ICON_URL=
+NEXT_PUBLIC_IMAGE_URL=
+NEXT_PUBLIC_SPLASH_IMAGE_URL=
+NEXT_PUBLIC_SPLASH_BACKGROUND_COLOR=
+
+# Required to allow users to add your frame
+FARCASTER_HEADER=
+FARCASTER_PAYLOAD=
+FARCASTER_SIGNATURE=
+
+# Required for webhooks and background notifications
+REDIS_URL=
+REDIS_TOKEN=
+```
+
+3. Start the development server:
+```bash
+npm run dev
+```
+
+## Template Features
+
+### Frame Configuration
+- `.well-known/farcaster.json` endpoint configured for Frame metadata and account association
+- Frame metadata automatically added to page headers in `layout.tsx`
+
+### Background Notifications
+- Redis-backed notification system using Upstash
+- Ready-to-use notification endpoints in `api/notify` and `api/webhook`
+- Notification client utilities in `lib/notification-client.ts`
+
+### Theming
+- Custom theme defined in `theme.css` with OnchainKit variables
+- Pixel font integration with Pixelify Sans
+- Dark/light mode support through OnchainKit
+
+### MiniKit Provider
+The app is wrapped with `MiniKitProvider` in `providers.tsx`, configured with:
+- OnchainKit integration
+- Access to Frames context
+- Sets up Wagmi Connectors
+- Sets up Frame SDK listeners
+- Applies Safe Area Insets
+
+## Customization
+
+To get started building your own frame, follow these steps:
+
+1. Remove the DemoComponents:
+   - Delete `components/DemoComponents.tsx`
+   - Remove demo-related imports from `page.tsx`
+
+2. Start building your Frame:
+   - Modify `page.tsx` to create your Frame UI
+   - Update theme variables in `theme.css`
+   - Adjust MiniKit configuration in `providers.tsx`
+
+3. Add your frame to your account:
+   - Cast your frame to see it in action
+   - Share your frame with others to start building your community
+
+## Learn More
+
+- [MiniKit Documentation](https://docs.base.org/builderkits/minikit/overview)
+- [OnchainKit Documentation](https://docs.base.org/builderkits/onchainkit/getting-started)
+- [Next.js Documentation](https://nextjs.org/docs)
+- [Tailwind CSS Documentation](https://tailwindcss.com/docs)

minikit/mini-neynar/app/.well-known/farcaster.json/route.ts

@@ -0,0 +1,22 @@
+export async function GET() {
+  const URL = process.env.NEXT_PUBLIC_URL;
+
+  return Response.json({
+    accountAssociation: {
+      header: process.env.FARCASTER_HEADER,
+      payload: process.env.FARCASTER_PAYLOAD,
+      signature: process.env.FARCASTER_SIGNATURE,
+    },
+    frame: {
+      version: process.env.NEXT_PUBLIC_VERSION,
+      name: process.env.NEXT_PUBLIC_ONCHAINKIT_PROJECT_NAME,
+      homeUrl: URL,
+      iconUrl: process.env.NEXT_PUBLIC_ICON_URL,
+      imageUrl: process.env.NEXT_PUBLIC_IMAGE_URL,
+      buttonTitle: `Launch ${process.env.NEXT_PUBLIC_ONCHAINKIT_PROJECT_NAME}`,
+      splashImageUrl: process.env.NEXT_PUBLIC_SPLASH_IMAGE_URL,
+      splashBackgroundColor: `#${process.env.NEXT_PUBLIC_SPLASH_BACKGROUND_COLOR}`,
+      webhookUrl: `${URL}/api/webhook`,
+    },
+  });
+}

minikit/mini-neynar/app/api/get-friend/route.ts

@@ -0,0 +1,33 @@
+import { getFollows } from '@/lib/neynar';
+import { NextRequest, NextResponse } from 'next/server';
+
+export const dynamic = 'force-dynamic';
+
+export async function GET(request: NextRequest) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const fid = searchParams.get('fid');
+    const limit = searchParams.get('limit') || '10';
+
+    if (!fid) {
+      return NextResponse.json(
+        { error: 'Missing required parameter: fid' },
+        { status: 400 }
+      );
+    }
+
+    const follows = await getFollows(Number(fid), Number(limit));
+
+    return NextResponse.json(follows);
+  } catch (error) {
+    // Handle any errors
+    console.error('Error in GET route:', error);
+    return NextResponse.json(
+      { 
+        success: false, 
+        error: 'Internal server error'
+      },
+      { status: 500 }
+    );
+  }
+}

minikit/mini-neynar/app/api/notify/route.ts

@@ -0,0 +1,32 @@
+import { sendFrameNotification } from "@/lib/notification-client";
+import { NextResponse } from "next/server";
+
+export async function POST(request: Request) {
+  try {
+    const body = await request.json();
+    const { fid, notification } = body;
+
+    const result = await sendFrameNotification({
+      fid,
+      title: notification.title,
+      body: notification.body,
+      notificationDetails: notification.notificationDetails,
+    });
+
+    if (result.state === "error") {
+      return NextResponse.json(
+        { error: result.error },
+        { status: 500 },
+      );
+    }
+
+    return NextResponse.json({ success: true }, { status: 200 });
+  } catch (error) {
+    return NextResponse.json(
+      {
+        error: error instanceof Error ? error.message : "Unknown error",
+      },
+      { status: 400 },
+    );
+  }
+}

minikit/mini-neynar/app/api/webhook/route.ts

@@ -0,0 +1,124 @@
+import {
+  setUserNotificationDetails,
+  deleteUserNotificationDetails,
+} from "@/lib/notification";
+import { sendFrameNotification } from "@/lib/notification-client";
+import { http } from "viem";
+import { createPublicClient } from "viem";
+import { optimism } from "viem/chains";
+
+const appName = process.env.NEXT_PUBLIC_ONCHAINKIT_PROJECT_NAME;
+
+const KEY_REGISTRY_ADDRESS = "0x00000000Fc1237824fb747aBDE0FF18990E59b7e";
+
+const KEY_REGISTRY_ABI = [
+  {
+    inputs: [
+      { name: "fid", type: "uint256" },
+      { name: "key", type: "bytes" },
+    ],
+    name: "keyDataOf",
+    outputs: [
+      {
+        components: [
+          { name: "state", type: "uint8" },
+          { name: "keyType", type: "uint32" },
+        ],
+        name: "",
+        type: "tuple",
+      },
+    ],
+    stateMutability: "view",
+    type: "function",
+  },
+] as const;
+
+async function verifyFidOwnership(fid: number, appKey: `0x${string}`) {
+  const client = createPublicClient({
+    chain: optimism,
+    transport: http(),
+  });
+
+  try {
+    const result = await client.readContract({
+      address: KEY_REGISTRY_ADDRESS,
+      abi: KEY_REGISTRY_ABI,
+      functionName: "keyDataOf",
+      args: [BigInt(fid), appKey],
+    });
+
+    return result.state === 1 && result.keyType === 1;
+  } catch (error) {
+    console.error("Key Registry verification failed:", error);
+    return false;
+  }
+}
+
+function decode(encoded: string) {
+  return JSON.parse(Buffer.from(encoded, "base64url").toString("utf-8"));
+}
+
+export async function POST(request: Request) {
+  const requestJson = await request.json();
+
+  const { header: encodedHeader, payload: encodedPayload } = requestJson;
+
+  const headerData = decode(encodedHeader);
+  const event = decode(encodedPayload);
+
+  const { fid, key } = headerData;
+
+  const valid = await verifyFidOwnership(fid, key);
+
+  if (!valid) {
+    return Response.json(
+      { success: false, error: "Invalid FID ownership" },
+      { status: 401 },
+    );
+  }
+
+  switch (event.event) {
+    case "frame_added":
+      console.log(
+        "frame_added",
+        "event.notificationDetails",
+        event.notificationDetails,
+      );
+      if (event.notificationDetails) {
+        await setUserNotificationDetails(fid, event.notificationDetails);
+        await sendFrameNotification({
+          fid,
+          title: `Welcome to ${appName}`,
+          body: `Thank you for adding ${appName}`,
+        });
+      } else {
+        await deleteUserNotificationDetails(fid);
+      }
+
+      break;
+    case "frame_removed": {
+      console.log("frame_removed");
+      await deleteUserNotificationDetails(fid);
+      break;
+    }
+    case "notifications_enabled": {
+      console.log("notifications_enabled", event.notificationDetails);
+      await setUserNotificationDetails(fid, event.notificationDetails);
+      await sendFrameNotification({
+        fid,
+        title: `Welcome to ${appName}`,
+        body: `Thank you for enabling notifications for ${appName}`,
+      });
+
+      break;
+    }
+    case "notifications_disabled": {
+      console.log("notifications_disabled");
+      await deleteUserNotificationDetails(fid);
+
+      break;
+    }
+  }
+
+  return Response.json({ success: true });
+}