refactor: move env vars to constants file

src/app/app.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import dynamic from "next/dynamic";
-
+import { APP_NAME } from "~/lib/constants";
 
 // note: dynamic import is required for components that use the Frame SDK
 const Demo = dynamic(() => import("~/components/Demo"), {
@@ -9,7 +9,7 @@ const Demo = dynamic(() => import("~/components/Demo"), {
 });
 
 export default function App(
-  { title }: { title?: string } = { title: process.env.NEXT_PUBLIC_FRAME_NAME || "Frames v2 Demo" }
+  { title }: { title?: string } = { title: APP_NAME }
 ) {
   return <Demo title={title} />;
 }

src/app/layout.tsx

@@ -3,10 +3,11 @@ import type { Metadata } from "next";
 import { getSession } from "~/auth"
 import "~/app/globals.css";
 import { Providers } from "~/app/providers";
+import { APP_NAME, APP_DESCRIPTION } from "~/lib/constants";
 
 export const metadata: Metadata = {
-  title: process.env.NEXT_PUBLIC_FRAME_NAME || "Frames v2 Demo",
-  description: process.env.NEXT_PUBLIC_FRAME_DESCRIPTION || "A Farcaster Frames v2 demo app",
+  title: APP_NAME,
+  description: APP_DESCRIPTION,
 };
 
 export default async function RootLayout({

src/app/opengraph-image.tsx

@@ -1,6 +1,7 @@
 import { ImageResponse } from "next/og";
+import { APP_NAME } from "~/lib/constants";
 
-export const alt = process.env.NEXT_PUBLIC_FRAME_NAME || "Frames V2 Demo";
+export const alt = APP_NAME;
 export const size = {
   width: 600,
   height: 400,

src/app/page.tsx

@@ -1,25 +1,19 @@
 import { Metadata } from "next";
 import App from "./app";
-
-const appUrl = process.env.NEXT_PUBLIC_URL;
-
-// frame preview metadata
-const appName = process.env.NEXT_PUBLIC_FRAME_NAME;
-const splashImageUrl = `${appUrl}/splash.png`;
-const iconUrl = `${appUrl}/icon.png`;
+import { APP_URL, APP_NAME, APP_DESCRIPTION, APP_OG_IMAGE_URL, APP_ICON_URL, APP_SPLASH_URL, APP_SPLASH_BACKGROUND_COLOR, APP_BUTTON_TEXT } from "~/lib/constants";
 
 const framePreviewMetadata = {
   version: "next",
-  imageUrl: `${appUrl}/opengraph-image`,
+  imageUrl: APP_OG_IMAGE_URL,
   button: {
-    title: process.env.NEXT_PUBLIC_FRAME_BUTTON_TEXT,
+    title: APP_BUTTON_TEXT,
     action: {
       type: "launch_frame",
-      name: appName,
-      url: appUrl,
-      splashImageUrl,
-      iconUrl,
-      splashBackgroundColor: "#f7f7f7",
+      name: APP_NAME,
+      url: APP_URL,
+      splashImageUrl: APP_SPLASH_URL,
+      iconUrl: APP_ICON_URL,
+      splashBackgroundColor: APP_SPLASH_BACKGROUND_COLOR,
     },
   },
 };
@@ -28,10 +22,10 @@ export const revalidate = 300;
 
 export async function generateMetadata(): Promise<Metadata> {
   return {
-    title: appName,
+    title: APP_NAME,
     openGraph: {
-      title: appName,
-      description: process.env.NEXT_PUBLIC_FRAME_DESCRIPTION,
+      title: APP_NAME,
+      description: APP_DESCRIPTION,
     },
     other: {
       "fc:frame": JSON.stringify(framePreviewMetadata),