+ {frame.manifest.status === "failure" && (
+
+
+ Invalid manifest!
+
+ Please check the diagnostics of initial frame
+
+
+ )}
+ {farcasterSigner?.status === "impersonating" && (
+
+
+ Warning: Unsupported Farcaster signer
+
+ You are using an impersonated signer, please approve a real signer
+ to use the debugger's Frames V2 webhooks
+
+
+ )}
+
+ {farcasterSigner?.status === "approved" && (
+
+
+
+
+ {events.length === 0 ? (
+
+
+
+
+ {!notificationsEnabled && (
+
+ )}
+
+
+ {!notificationsEnabled
+ ? "Notifications are not enabled"
+ : "No notifications"}
+
+
+ {!notificationsEnabled
+ ? "Notifications will appear here once they are enabled and the application sents any of them."
+ : "No notifications received yet."}
+
+
+
+ ) : (
+
+
+ Event log
+
+
+
+
+
+
+
+
+ )}
+
+ )}
+
+ );
+}
diff --git a/packages/debugger/app/components/frame-app-debugger.tsx b/packages/debugger/app/components/frame-app-debugger.tsx
new file mode 100644
index 000000000..e86b19402
--- /dev/null
+++ b/packages/debugger/app/components/frame-app-debugger.tsx
@@ -0,0 +1,382 @@
+import { Button } from "@/components/ui/button";
+import type { FrameLaunchedInContext } from "./frame-debugger";
+import { WithTooltip } from "./with-tooltip";
+import { Loader2Icon, RefreshCwIcon } from "lucide-react";
+import { Card, CardContent } from "@/components/ui/card";
+import { useFrameAppInIframe } from "@frames.js/render/frame-app/iframe";
+import { useCallback, useRef, useState } from "react";
+import { useWagmiProvider } from "@frames.js/render/frame-app/provider/wagmi";
+import { useToast } from "@/components/ui/use-toast";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { cn } from "@/lib/utils";
+import { DebuggerConsole } from "./debugger-console";
+import Image from "next/image";
+import { fallbackFrameContext } from "@frames.js/render";
+import type { FarcasterSignerInstance } from "@frames.js/render/identity/farcaster";
+import { FrameAppDebuggerNotifications } from "./frame-app-debugger-notifications";
+import {
+ FrameAppNotificationsManagerProvider,
+ useFrameAppNotificationsManager,
+} from "../providers/FrameAppNotificationsManagerProvider";
+import { ToastAction } from "@/components/ui/toast";
+import type {
+ FramePrimaryButton,
+ ResolveClientFunction,
+} from "@frames.js/render/frame-app/types";
+
+type TabValues = "events" | "console" | "notifications";
+
+type FrameAppDebuggerProps = {
+ context: FrameLaunchedInContext;
+ farcasterSigner: FarcasterSignerInstance;
+ onClose: () => void;
+};
+
+// in debugger we don't want to automatically reject repeated add frame calls
+const addFrameRequestsCache = new (class extends Set {
+ has(key: string) {
+ return false;
+ }
+
+ add(key: string) {
+ return this;
+ }
+
+ delete(key: string) {
+ return true;
+ }
+})();
+
+export function FrameAppDebugger({
+ context,
+ farcasterSigner,
+ onClose,
+}: FrameAppDebuggerProps) {
+ const farcasterSignerRef = useRef(farcasterSigner);
+ farcasterSignerRef.current = farcasterSigner;
+ const frameAppNotificationManager = useFrameAppNotificationsManager({
+ farcasterSigner,
+ context,
+ });
+ const { toast } = useToast();
+ const debuggerConsoleTabRef = useRef(null);
+ const iframeRef = useRef(null);
+ const [activeTab, setActiveTab] = useState("notifications");
+ const [isAppReady, setIsAppReady] = useState(false);
+ const [primaryButton, setPrimaryButton] = useState<{
+ button: FramePrimaryButton;
+ callback: () => void;
+ } | null>(null);
+ const provider = useWagmiProvider({
+ debug: true,
+ });
+ /**
+ * we have to store promise in ref otherwise it will always invalidate the frame app hooks
+ * which happens for example when you disable notifications from notifications panel
+ */
+ const frameAppNotificationManagerPromiseRef = useRef(
+ frameAppNotificationManager.promise
+ );
+ const resolveClient: ResolveClientFunction = useCallback(async () => {
+ try {
+ const { manager } = await frameAppNotificationManagerPromiseRef.current;
+ const clientFid = parseInt(process.env.FARCASTER_DEVELOPER_FID ?? "-1");
+
+ if (!manager.state || manager.state.frame.status === "removed") {
+ return {
+ clientFid,
+ added: false,
+ };
+ }
+
+ return {
+ clientFid: parseInt(process.env.FARCASTER_DEVELOPER_FID ?? "-1"),
+ added: true,
+ notificationDetails:
+ manager.state.frame.notificationDetails ?? undefined,
+ };
+ } catch (e) {
+ console.error(e);
+
+ toast({
+ title: "Unexpected error",
+ description:
+ "Failed to load notifications settings. Check the console for more details.",
+ variant: "destructive",
+ });
+ }
+
+ return {
+ clientFid: parseInt(process.env.FARCASTER_DEVELOPER_FID ?? "-1"),
+ added: false,
+ };
+ }, [toast]);
+ const frameApp = useFrameAppInIframe({
+ debug: true,
+ source: context.parseResult,
+ client: resolveClient,
+ location:
+ context.context === "button_press"
+ ? {
+ type: "launcher",
+ }
+ : {
+ type: "cast_embed",
+ cast: fallbackFrameContext.castId,
+ },
+ farcasterSigner,
+ provider,
+ proxyUrl: "/frames",
+ addFrameRequestsCache,
+ onReady(options) {
+ console.info("sdk.actions.ready() called", { options });
+ setIsAppReady(true);
+ },
+ onClose() {
+ console.info("sdk.actions.close() called");
+ toast({
+ title: "Frame app closed",
+ description:
+ "The frame app called close() action. Would you like to close it?",
+ action: (
+ {
+ onClose();
+ }}
+ >
+ Close
+
+ ),
+ });
+ },
+ onOpenUrl(url) {
+ console.info("sdk.actions.openUrl() called", { url });
+ window.open(url, "_blank");
+ },
+ onPrimaryButtonSet(button, buttonCallback) {
+ console.info("sdk.actions.setPrimaryButton() called", { button });
+ setPrimaryButton({
+ button,
+ callback: () => {
+ console.info("primary button clicked");
+ buttonCallback();
+ },
+ });
+ },
+ async onAddFrameRequested(parseResult) {
+ console.info("sdk.actions.addFrame() called");
+
+ if (frameAppNotificationManager.status === "pending") {
+ toast({
+ title: "Notifications manager not ready",
+ description:
+ "Notifications manager is not ready. Please wait a moment.",
+ variant: "destructive",
+ });
+
+ throw new Error("Notifications manager is not ready");
+ }
+
+ if (frameAppNotificationManager.status === "error") {
+ toast({
+ title: "Notifications manager error",
+ description:
+ "Notifications manager failed to load. Please check the console for more details.",
+ variant: "destructive",
+ });
+
+ throw new Error("Notifications manager failed to load");
+ }
+
+ const webhookUrl = parseResult.manifest?.manifest.frame?.webhookUrl;
+
+ if (!webhookUrl) {
+ toast({
+ title: "Webhook URL not found",
+ description:
+ "Webhook URL is not found in the manifest. It is required in order to enable notifications.",
+ variant: "destructive",
+ });
+
+ return false;
+ }
+
+ // check what is the status of notifications for this app and signer
+ // if there are no settings ask for user's consent and store the result
+ const consent = window.confirm(
+ "Do you want to add the frame to the app?"
+ );
+
+ if (!consent) {
+ return false;
+ }
+
+ try {
+ const result =
+ await frameAppNotificationManager.data.manager.addFrame();
+
+ return {
+ added: true,
+ notificationDetails: result,
+ };
+ } catch (e) {
+ console.error(e);
+
+ toast({
+ title: "Failed to add frame",
+ description:
+ "Failed to add frame to the notifications manager. Check the console for more details.",
+ variant: "destructive",
+ });
+
+ throw e;
+ }
+ },
+ });
+
+ return (
+