feat: start farcaster frames v2 support.

Author: PaoloRollo

apps/dashboard/package.json

@@ -27,6 +27,8 @@
     "@chakra-ui/theme-tools": "^2.1.2",
     "@emotion/react": "11.14.0",
     "@emotion/styled": "11.14.0",
+    "@farcaster/frame-core": "^0.1.8",
+    "@farcaster/frame-sdk": "^0.0.60",
     "@hookform/resolvers": "^3.9.1",
     "@marsidev/react-turnstile": "^1.1.0",
     "@radix-ui/react-accordion": "^1.2.7",

apps/dashboard/src/app/nebula-app/_farcaster/miniapp-context.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import type { AddMiniAppResult } from "@farcaster/frame-core/dist/actions/AddMiniApp";
+import type { FrameContext } from "@farcaster/frame-core/dist/context";
+import { sdk } from "@farcaster/frame-sdk";
+import { useQuery } from "@tanstack/react-query";
+import {
+  type ReactNode,
+  createContext,
+  useCallback,
+  useContext,
+  useState,
+} from "react";
+
+interface MiniAppContextType {
+  isMiniAppReady: boolean;
+  context: FrameContext | null;
+  setMiniAppReady: () => void;
+  addMiniApp: () => Promise<AddMiniAppResult | null>;
+}
+
+// eslint-disable-next-line no-restricted-syntax
+const MiniAppContext = createContext<MiniAppContextType | undefined>(undefined);
+
+export function MiniAppProvider({
+  addMiniAppOnLoad,
+  children,
+}: {
+  addMiniAppOnLoad?: boolean;
+  children: ReactNode;
+}) {
+  const [context, setContext] = useState<FrameContext | null>(null);
+  const [isMiniAppReady, setIsMiniAppReady] = useState(false);
+
+  const setMiniAppReady = useCallback(async () => {
+    try {
+      const context = await sdk.context;
+      if (context) {
+        setContext(context as FrameContext);
+      }
+      await sdk.actions.ready();
+    } catch (err) {
+      console.error("SDK initialization error:", err);
+    } finally {
+      setIsMiniAppReady(true);
+    }
+  }, []);
+
+  useQuery({
+    queryKey: ["frame-ready"],
+    queryFn: async () => {
+      try {
+        await setMiniAppReady();
+        return true;
+      } catch (error) {
+        console.error("[error] setting mini app ready", error);
+        return false;
+      }
+    },
+  });
+
+  const handleAddMiniApp = useCallback(async () => {
+    try {
+      const result = await sdk.actions.addFrame();
+      if (result) {
+        return result;
+      }
+      return null;
+    } catch (error) {
+      console.error("[error] adding frame", error);
+      return null;
+    }
+  }, []);
+
+  useQuery({
+    queryKey: ["frame-add"],
+    queryFn: async () => {
+      try {
+        await handleAddMiniApp();
+        return true;
+      } catch (error) {
+        console.error("[error] adding frame", error);
+        return false;
+      }
+    },
+    enabled: isMiniAppReady && !context?.client?.added && addMiniAppOnLoad,
+  });
+
+  return (
+    <MiniAppContext.Provider
+      value={{
+        isMiniAppReady,
+        setMiniAppReady,
+        addMiniApp: handleAddMiniApp,
+        context,
+      }}
+    >
+      {children}
+    </MiniAppContext.Provider>
+  );
+}
+
+export function useMiniApp() {
+  const context = useContext(MiniAppContext);
+  if (context === undefined) {
+    throw new Error("useMiniApp must be used within a MiniAppProvider");
+  }
+  return context;
+}

apps/dashboard/src/app/nebula-app/_farcaster/warpcast.ts

@@ -0,0 +1,53 @@
+/**
+ * Get the farcaster manifest for the frame, generate yours from Warpcast Mobile
+ *  On your phone to Settings > Developer > Domains > insert website hostname > Generate domain manifest
+ * @returns The farcaster manifest for the frame
+ */
+export async function getFarcasterManifest() {
+  let frameName = "Nebula";
+  let noindex = false;
+  const appUrl = process.env.NEXT_PUBLIC_URL || "http://nebula.localhost:3000";
+  if (appUrl.includes("localhost")) {
+    frameName += " Local";
+    noindex = true;
+  } else if (appUrl.includes("ngrok")) {
+    frameName += " NGROK";
+    noindex = true;
+  } else if (appUrl.includes("https://dev.")) {
+    frameName += " Dev";
+    noindex = true;
+  }
+  return {
+    accountAssociation: {
+      header: process.env.NEXT_PUBLIC_FARCASTER_HEADER,
+      payload: process.env.NEXT_PUBLIC_FARCASTER_PAYLOAD,
+      signature: process.env.NEXT_PUBLIC_FARCASTER_SIGNATURE,
+    },
+    frame: {
+      version: "1",
+      name: frameName,
+      iconUrl: `${appUrl}/images/icon.png`,
+      homeUrl: appUrl,
+      imageUrl: `${appUrl}/images/feed.png`,
+      buttonTitle: "Launch App",
+      splashImageUrl: `${appUrl}/images/splash.png`,
+      splashBackgroundColor: "#FFFFFF",
+      webhookUrl: `${appUrl}/api/webhook`,
+      // Metadata https://github.com/farcasterxyz/miniapps/discussions/191
+      subtitle: "AI-powered chat", // 30 characters, no emojis or special characters, short description under app name
+      description: "AI-powered chat", // 170 characters, no emojis or special characters, promotional message displayed on Mini App Page
+      primaryCategory: "social",
+      tags: ["nebula", "ai", "defi", "chat", "social"], // up to 5 tags, filtering/search tags
+      tagline: "AI-powered chat", // 30 characters, marketing tagline should be punchy and descriptive
+      ogTitle: `${frameName}`, // 30 characters, app name + short tag, Title case, no emojis
+      ogDescription: "AI-powered chat", // 100 characters, summarize core benefits in 1-2 lines
+      screenshotUrls: [
+        // 1284 x 2778, visual previews of the app, max 3 screenshots
+        `${appUrl}/images/feed.png`,
+      ],
+      heroImageUrl: `${appUrl}/images/feed.png`, // 1200 x 630px (1.91:1), promotional display image on top of the mini app store
+      ogImageUrl: `${appUrl}/images/feed.png`, // 1200 x 630px (1.91:1), promotional image, same as app hero image
+      noindex: noindex,
+    },
+  };
+}

apps/dashboard/src/app/nebula-app/providers.tsx

@@ -7,24 +7,27 @@ import { useMemo } from "react";
 import { Toaster } from "sonner";
 import { ThirdwebProvider, useActiveAccount } from "thirdweb/react";
 import { NebulaConnectWallet } from "./(app)/components/NebulaConnectButton";
+import { MiniAppProvider } from "./_farcaster/miniapp-context";
 
 const queryClient = new QueryClient();
 
 export function NebulaProviders(props: { children: React.ReactNode }) {
   return (
     <QueryClientProvider client={queryClient}>
       <ThirdwebProvider>
-        <ThemeProvider
-          attribute="class"
-          disableTransitionOnChange
-          enableSystem={false}
-          defaultTheme="light"
-        >
-          <ToasterSetup />
-          <SanctionedAddressesChecker>
-            {props.children}
-          </SanctionedAddressesChecker>
-        </ThemeProvider>
+        <MiniAppProvider>
+          <ThemeProvider
+            attribute="class"
+            disableTransitionOnChange
+            enableSystem={false}
+            defaultTheme="light"
+          >
+            <ToasterSetup />
+            <SanctionedAddressesChecker>
+              {props.children}
+            </SanctionedAddressesChecker>
+          </ThemeProvider>
+        </MiniAppProvider>
       </ThirdwebProvider>
     </QueryClientProvider>
   );