refactor: update frame to mini app and fix dark mode

src/lib/constants.ts

@@ -1,13 +1,13 @@
 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_PRIMARY_CATEGORY = process.env.NEXT_PUBLIC_FRAME_PRIMARY_CATEGORY;
-export const APP_TAGS = process.env.NEXT_PUBLIC_FRAME_TAGS?.split(',');
+export const APP_NAME = process.env.NEXT_PUBLIC_MINI_APP_NAME;
+export const APP_DESCRIPTION = process.env.NEXT_PUBLIC_MINI_APP_DESCRIPTION;
+export const APP_PRIMARY_CATEGORY = process.env.NEXT_PUBLIC_MINI_APP_PRIMARY_CATEGORY;
+export const APP_TAGS = process.env.NEXT_PUBLIC_MINI_APP_TAGS?.split(',');
 export const APP_ICON_URL = `${APP_URL}/icon.png`;
 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;
+export const APP_BUTTON_TEXT = process.env.NEXT_PUBLIC_MINI_APP_BUTTON_TEXT;
 export const APP_WEBHOOK_URL = process.env.NEYNAR_API_KEY && process.env.NEYNAR_CLIENT_ID 
     ? `https://api.neynar.com/f/app/${process.env.NEYNAR_CLIENT_ID}/event`
     : `${APP_URL}/api/webhook`;

src/lib/neynar.ts

@@ -31,7 +31,7 @@ export async function getNeynarUser(fid: number): Promise<User | null> {
   }
 }
 
-type SendFrameNotificationResult =
+type SendMiniAppNotificationResult =
   | {
       state: "error";
       error: unknown;
@@ -40,7 +40,7 @@ type SendFrameNotificationResult =
   | { state: "rate_limit" }
   | { state: "success" };
 
-export async function sendNeynarFrameNotification({
+export async function sendNeynarMiniAppNotification({
   fid,
   title,
   body,
@@ -48,7 +48,7 @@ export async function sendNeynarFrameNotification({
   fid: number;
   title: string;
   body: string;
-}): Promise<SendFrameNotificationResult> {
+}): Promise<SendMiniAppNotificationResult> {
   try {
     const client = getNeynarClient();
     const targetFids = [fid];

src/lib/notifs.ts

@@ -5,7 +5,7 @@ import {
 import { getUserNotificationDetails } from "~/lib/kv";
 import { APP_URL } from "./constants";
 
-type SendFrameNotificationResult =
+type SendMiniAppNotificationResult =
   | {
       state: "error";
       error: unknown;
@@ -14,7 +14,7 @@ type SendFrameNotificationResult =
   | { state: "rate_limit" }
   | { state: "success" };
 
-export async function sendFrameNotification({
+export async function sendMiniAppNotification({
   fid,
   title,
   body,
@@ -22,7 +22,7 @@ export async function sendFrameNotification({
   fid: number;
   title: string;
   body: string;
-}): Promise<SendFrameNotificationResult> {
+}): Promise<SendMiniAppNotificationResult> {
   const notificationDetails = await getUserNotificationDetails(fid);
   if (!notificationDetails) {
     return { state: "no_token" };

src/lib/utils.ts

@@ -4,7 +4,7 @@ import { mnemonicToAccount } from 'viem/accounts';
 import { APP_BUTTON_TEXT, APP_DESCRIPTION, APP_ICON_URL, APP_NAME, APP_OG_IMAGE_URL, APP_PRIMARY_CATEGORY, APP_SPLASH_BACKGROUND_COLOR, APP_TAGS, APP_URL, APP_WEBHOOK_URL } from './constants';
 import { APP_SPLASH_URL } from './constants';
 
-interface FrameMetadata {
+interface MiniAppMetadata {
   version: string;
   name: string;
   iconUrl: string;
@@ -19,13 +19,13 @@ interface FrameMetadata {
   tags?: string[];
 };
 
-interface FrameManifest {
+interface MiniAppManifest {
   accountAssociation?: {
     header: string;
     payload: string;
     signature: string;
   };
-  frame: FrameMetadata;
+  frame: MiniAppMetadata;
 }
 
 export function cn(...inputs: ClassValue[]) {
@@ -43,7 +43,7 @@ export function getSecretEnvVars() {
   return { seedPhrase, fid };
 }
 
-export function getFrameEmbedMetadata(ogImageUrl?: string) {
+export function getMiniAppEmbedMetadata(ogImageUrl?: string) {
   return {
     version: "next",
     imageUrl: ogImageUrl ?? APP_OG_IMAGE_URL,
@@ -64,15 +64,15 @@ export function getFrameEmbedMetadata(ogImageUrl?: string) {
   };
 }
 
-export async function getFarcasterMetadata(): Promise<FrameManifest> {
-  // First check for FRAME_METADATA in .env and use that if it exists
-  if (process.env.FRAME_METADATA) {
+export async function getFarcasterMetadata(): Promise<MiniAppManifest> {
+  // First check for MINI_APP_METADATA in .env and use that if it exists
+  if (process.env.MINI_APP_METADATA) {
     try {
-      const metadata = JSON.parse(process.env.FRAME_METADATA);
-      console.log('Using pre-signed frame metadata from environment');
+      const metadata = JSON.parse(process.env.MINI_APP_METADATA);
+      console.log('Using pre-signed mini app metadata from environment');
       return metadata;
     } catch (error) {
-      console.warn('Failed to parse FRAME_METADATA from environment:', error);
+      console.warn('Failed to parse MINI_APP_METADATA from environment:', error);
     }
   }
 
@@ -123,11 +123,11 @@ export async function getFarcasterMetadata(): Promise<FrameManifest> {
     accountAssociation,
     frame: {
       version: "1",
-      name: APP_NAME ?? "Frames v2 Demo",
+      name: APP_NAME ?? "Neynar Starter Kit",
       iconUrl: APP_ICON_URL,
       homeUrl: APP_URL,
       imageUrl: APP_OG_IMAGE_URL,
-      buttonTitle: APP_BUTTON_TEXT ?? "Launch Frame",
+      buttonTitle: APP_BUTTON_TEXT ?? "Launch Mini App",
       splashImageUrl: APP_SPLASH_URL,
       splashBackgroundColor: APP_SPLASH_BACKGROUND_COLOR,
       webhookUrl: APP_WEBHOOK_URL,