chore: emit events

Author: michalkvasnicak

packages/debugger/app/components/frame-app-debugger-notifications.tsx

@@ -1,7 +1,6 @@
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Console } from "console-feed";
 import { InboxIcon, Loader2Icon, TrashIcon } from "lucide-react";
-import type { ParseFramesV2ResultWithFrameworkDetails } from "frames.js/frame-parsers";
 import { useEffect, useState } from "react";
 import { Message } from "console-feed/lib/definitions/Component";
 import { useQuery } from "@tanstack/react-query";
@@ -10,14 +9,16 @@ import { useFrameAppNotificationsManagerContext } from "../providers/FrameAppNot
 import type { GETEventsResponseBody } from "../notifications/[namespaceId]/events/route";
 import { Button } from "@/components/ui/button";
 import { WithTooltip } from "./with-tooltip";
+import { UseFrameAppInIframeReturn } from "@frames.js/render/src/frame-app/iframe";
 
 type FrameAppDebuggerNotificationsProps = {
-  frame: ParseFramesV2ResultWithFrameworkDetails;
+  frameApp: Extract<UseFrameAppInIframeReturn, { status: "success" }>;
 };
 
 export function FrameAppDebuggerNotifications({
-  frame,
+  frameApp,
 }: FrameAppDebuggerNotificationsProps) {
+  const frame = frameApp.frame;
   const frameAppNotificationManager = useFrameAppNotificationsManagerContext();
   const [events, setEvents] = useState<Message[]>([]);
   const notificationsQuery = useQuery({
@@ -152,7 +153,7 @@ export function FrameAppDebuggerNotifications({
   return (
     <div className="flex flex-row flex-grow gap-4 w-full h-full">
       <div className="w-1/3">
-        <FrameAppNotificationsControlPanel />
+        <FrameAppNotificationsControlPanel frameApp={frameApp} />
       </div>
       {events.length === 0 ? (
         <div className="flex flex-grow border rounded-lg p-2 items-center justify-center w-full">

packages/debugger/app/components/frame-app-debugger.tsx

@@ -343,7 +343,7 @@ export function FrameAppDebugger({
                     className="overflow-hidden"
                     value="notifications"
                   >
-                    <FrameAppDebuggerNotifications frame={frameApp.frame} />
+                    <FrameAppDebuggerNotifications frameApp={frameApp} />
                   </TabsContent>
                   <TabsContent
                     className="overflow-y-auto"

packages/debugger/app/components/frame-app-notifications-control-panel.tsx

@@ -13,10 +13,15 @@ import { useFrameAppNotificationsManagerContext } from "../providers/FrameAppNot
 import { useCallback, useState } from "react";
 import { cn } from "@/lib/utils";
 import { WithTooltip } from "./with-tooltip";
+import { UseFrameAppInIframeReturn } from "@frames.js/render/frame-app/iframe";
 
-type FrameAppNotificationsControlPanelProps = {};
+type FrameAppNotificationsControlPanelProps = {
+  frameApp: Extract<UseFrameAppInIframeReturn, { status: "success" }>;
+};
 
-export function FrameAppNotificationsControlPanel({}: FrameAppNotificationsControlPanelProps) {
+export function FrameAppNotificationsControlPanel({
+  frameApp,
+}: FrameAppNotificationsControlPanelProps) {
   const [state, setState] = useState<
     | "idle"
     | "adding-frame"
@@ -45,10 +50,13 @@ export function FrameAppNotificationsControlPanel({}: FrameAppNotificationsContr
     try {
       setState("removing-frame");
       await frameAppNotificationManager.removeFrame();
+      frameApp.emitter.emit({
+        event: "frame_removed",
+      });
     } finally {
       setState("idle");
     }
-  }, [frameAppNotificationManager]);
+  }, [frameAppNotificationManager, frameApp.emitter]);
 
   const reloadSettings = useCallback(async () => {
     try {
@@ -65,16 +73,24 @@ export function FrameAppNotificationsControlPanel({}: FrameAppNotificationsContr
       try {
         if (newValue) {
           setState("enabling-notifications");
-          await frameAppNotificationManager.enableNotifications();
+          const notificationDetails =
+            await frameAppNotificationManager.enableNotifications();
+          frameApp.emitter.emit({
+            event: "notifications_enabled",
+            notificationDetails,
+          });
         } else {
           setState("disabling-notifications");
           await frameAppNotificationManager.disableNotifications();
+          frameApp.emitter.emit({
+            event: "notifications_disabled",
+          });
         }
       } finally {
         setState("idle");
       }
     },
-    [frameAppNotificationManager]
+    [frameApp.emitter, frameAppNotificationManager]
   );
 
   return (

packages/debugger/app/providers/FrameAppNotificationsManagerProvider.tsx

@@ -12,6 +12,7 @@ import type {
   POSTNotificationsDetailRequestBody,
   POSTNotificationsDetailResponseBody,
 } from "../notifications/[namespaceId]/route";
+import type { FrameNotificationDetails } from "@farcaster/frame-sdk";
 
 export const notificationManagerQueryKeys = {
   settingsQuery: (fid: string, frameAppUrl: string): string[] => [
@@ -27,7 +28,7 @@ export type FrameAppNotificationsManager = {
     Extract<NotificationSettings, { enabled: true }>["details"]
   >;
   removeFrame(): Promise<void>;
-  enableNotifications(): Promise<void>;
+  enableNotifications(): Promise<FrameNotificationDetails>;
   disableNotifications(): Promise<void>;
   reload(): Promise<void>;
 };
@@ -39,7 +40,9 @@ const FrameAppNotificationsManagerContext =
       throw new Error("Not implemented");
     },
     async removeFrame() {},
-    async enableNotifications() {},
+    async enableNotifications() {
+      throw new Error("Not implemented");
+    },
     async disableNotifications() {},
     async reload() {},
   });
@@ -183,14 +186,20 @@ export function useFrameAppNotificationsManager({
             });
           },
           async enableNotifications() {
-            await sendEvent.mutateAsync({
+            const result = await sendEvent.mutateAsync({
               action: "enable_notifications",
             });
 
             // refetch notification settings
             await queryClient.refetchQueries({
               queryKey,
             });
+
+            if (result.type === "notifications_enabled") {
+              return result.notificationDetails;
+            }
+
+            throw new Error("Server returned incorrect response");
           },
           async disableNotifications() {
             await sendEvent.mutateAsync({

packages/render/src/frame-app/iframe.ts

@@ -171,6 +171,8 @@ export function useFrameAppInIframe(
     endpointRef.current = endpoint;
     emitterRef.current = iframeFrameApp.getEmitter(endpoint);
 
+    logDebug("iframe endpoint created");
+
     return () => {
       logDebug("iframe unmounted, cleaning up");
       endpointRef.current = null;

packages/render/src/frame-app/web-view.ts

@@ -171,6 +171,8 @@ export function useFrameAppInWebView(
     endpointRef.current = endpoint;
     emitterRef.current = webViewFrameApp.getEmitter(endpoint);
 
+    logDebug("WebView endpoint created");
+
     return () => {
       logDebug("WebView unmounted, cleaning up");
       webViewRef.current = null;