feat: debugger use new multiprotocol support

michalkvasnicak · michalkvasnicak · commit b081ddebf13f · 2024-10-22T15:33:50.000+02:00
diff --git a/packages/debugger/app/components/cast-composer.tsx b/packages/debugger/app/components/cast-composer.tsx
@@ -23,6 +23,7 @@ import { useToast } from "@/components/ui/use-toast";
 import { ToastAction } from "@radix-ui/react-toast";
 import Link from "next/link";
 import type { FarcasterSigner } from "@frames.js/render/identity/farcaster";
+import { getFrameParseResultFromStackItemBySpecifications } from "@frames.js/render/helpers";
 
 type CastComposerProps = {
   composerAction: Partial<ComposerActionResponse>;
@@ -139,11 +140,15 @@ function createDebugUrl(frameUrl: string, currentUrl: string) {
 }
 
 function isAtLeastPartialFrame(stackItem: FrameStackDone): boolean {
+  const result = getFrameParseResultFromStackItemBySpecifications(stackItem, [
+    "farcaster",
+  ]);
+
   return (
-    stackItem.frameResult.status === "success" ||
-    (!!stackItem.frameResult.frame &&
-      !!stackItem.frameResult.frame.buttons &&
-      stackItem.frameResult.frame.buttons.length > 0)
+    result.status === "success" ||
+    (!!result.frame &&
+      !!result.frame.buttons &&
+      result.frame.buttons.length > 0)
   );
 }
 
diff --git a/packages/debugger/app/components/frame-debugger.tsx b/packages/debugger/app/components/frame-debugger.tsx
@@ -22,6 +22,7 @@ import {
   CollapsedFrameUI,
   defaultTheme,
 } from "@frames.js/render";
+import { getFrameParseResultFromStackItemBySpecifications } from "@frames.js/render/helpers";
 import { FrameImageNext } from "@frames.js/render/next";
 import { Table, TableBody, TableCell, TableRow } from "@/components/table";
 import {
@@ -59,21 +60,18 @@ import { urlSearchParamsToObject } from "../utils/url-search-params-to-object";
 import { FrameUI } from "./frame-ui";
 import { useToast } from "@/components/ui/use-toast";
 import { ToastAction } from "@/components/ui/toast";
-import type { AnonymousSigner } from "@frames.js/render/identity/anonymous";
-import type { LensSigner } from "@frames.js/render/identity/lens";
-import type { FarcasterSigner } from "@frames.js/render/identity/farcaster";
-import type { XmtpSigner } from "@frames.js/render/identity/xmtp";
 
 type FrameDiagnosticsProps = {
   stackItem: FramesStackItem;
+  specification: SupportedParsingSpecification;
 };
 
 function isPropertyExperimental([key, value]: [string, string]) {
   // tx is experimental
   return false;
 }
 
-function FrameDiagnostics({ stackItem }: FrameDiagnosticsProps) {
+function FrameDiagnostics({ stackItem, specification }: FrameDiagnosticsProps) {
   const properties = useMemo(() => {
     /** tuple of key and value */
     const validProperties: [string, string][] = [];
@@ -97,7 +95,9 @@ function FrameDiagnostics({ stackItem }: FrameDiagnosticsProps) {
       return { validProperties, invalidProperties, isValid: true };
     }
 
-    const result = stackItem.frameResult;
+    const result = getFrameParseResultFromStackItemBySpecifications(stackItem, [
+      specification,
+    ]);
 
     // we need to check validation errors first because getFrame incorrectly return a value for a key even if it's invalid
     for (const [key, reports] of Object.entries(result.reports)) {
@@ -160,8 +160,8 @@ function FrameDiagnostics({ stackItem }: FrameDiagnosticsProps) {
             {stackItem.speed > 5
               ? `Request took more than 5s (${stackItem.speed} seconds). This may be normal: first request will take longer in development (as next.js builds), but in production, clients will timeout requests after 5s`
               : stackItem.speed > 4
-              ? `Warning: Request took more than 4s (${stackItem.speed} seconds). Requests will fail at 5s. This may be normal: first request will take longer in development (as next.js builds), but in production, if there's variance here, requests could fail in production if over 5s`
-              : `${stackItem.speed} seconds`}
+                ? `Warning: Request took more than 4s (${stackItem.speed} seconds). Requests will fail at 5s. This may be normal: first request will take longer in development (as next.js builds), but in production, if there's variance here, requests could fail in production if over 5s`
+                : `${stackItem.speed} seconds`}
           </TableCell>
         </TableRow>
         {properties.validProperties.map(([propertyKey, value]) => {
@@ -248,7 +248,8 @@ function ShortenedText({
 
 const FramesRequestCardContentIcon: React.FC<{
   stackItem: FramesStackItem;
-}> = ({ stackItem }) => {
+  specification: SupportedParsingSpecification;
+}> = ({ stackItem, specification }) => {
   if (stackItem.status === "pending") {
     return <LoaderIcon className="animate-spin" size={20} />;
   }
@@ -269,11 +270,15 @@ const FramesRequestCardContentIcon: React.FC<{
     return <ExternalLinkIcon size={20} color="green" />;
   }
 
-  if (stackItem.frameResult?.status === "failure") {
+  const result = getFrameParseResultFromStackItemBySpecifications(stackItem, [
+    specification,
+  ]);
+
+  if (result.status === "failure") {
     return <XCircle size={20} color="red" />;
   }
 
-  if (hasWarnings(stackItem.frameResult.reports)) {
+  if (hasWarnings(result.reports)) {
     return <AlertTriangle size={20} color="orange" />;
   }
 
@@ -282,10 +287,9 @@ const FramesRequestCardContentIcon: React.FC<{
 
 const FramesRequestCardContent: React.FC<{
   stack: FramesStack;
-  fetchFrame: FrameState<
-    FarcasterSigner | XmtpSigner | LensSigner | AnonymousSigner | null
-  >["fetchFrame"];
-}> = ({ fetchFrame, stack }) => {
+  fetchFrame: FrameState["fetchFrame"];
+  specification: SupportedParsingSpecification;
+}> = ({ fetchFrame, specification, stack }) => {
   return stack.map((frameStackItem, i) => {
     return (
       <button
@@ -312,7 +316,8 @@ const FramesRequestCardContent: React.FC<{
           <span className="ml-auto">
             <FramesRequestCardContentIcon
               stackItem={frameStackItem}
-            ></FramesRequestCardContentIcon>
+              specification={specification}
+            />
           </span>
         </span>
         <span className="flex flex-row w-full">
@@ -369,10 +374,10 @@ type FrameDebuggerSharedProps = {
 type FrameDebuggerProps = FrameDebuggerSharedProps &
   (
     | {
-        useFrameHook: () => FrameState<any, any>;
+        useFrameHook: () => FrameState;
       }
     | {
-        frameState: FrameState<any, any>;
+        frameState: FrameState;
       }
   );
 
@@ -478,10 +483,16 @@ export const FrameDebugger = React.forwardRef<
       [toast, showConsole]
     );
 
+    const currentParseResult =
+      currentFrameStackItem && currentFrameStackItem.status === "done"
+        ? getFrameParseResultFromStackItemBySpecifications(
+            currentFrameStackItem,
+            [specification]
+          )
+        : undefined;
+
     const isImageDebuggingAvailable =
-      currentFrameStackItem &&
-      "frameResult" in currentFrameStackItem &&
-      !!currentFrameStackItem.frameResult.framesDebugInfo?.image;
+      currentParseResult?.framesDebugInfo?.image;
 
     return (
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-[300px_500px_1fr] p-4 gap-4 bg-slate-50 max-w-full w-full">
@@ -541,6 +552,7 @@ export const FrameDebugger = React.forwardRef<
               <FramesRequestCardContent
                 fetchFrame={frameState.fetchFrame}
                 stack={frameState.framesStack}
+                specification={specification}
               ></FramesRequestCardContent>
             </CardContent>
           </Card>
@@ -621,8 +633,11 @@ export const FrameDebugger = React.forwardRef<
                 )}
                 <div className="space-y-1">
                   {currentFrameStackItem?.status === "done" &&
-                    currentFrameStackItem.frameResult.frame.buttons
-                      ?.filter(
+                    getFrameParseResultFromStackItemBySpecifications(
+                      currentFrameStackItem,
+                      [specification]
+                    )
+                      .frame.buttons?.filter(
                         (button) =>
                           button.target?.startsWith(
                             "https://warpcast.com/~/add-cast-action"
@@ -685,7 +700,8 @@ export const FrameDebugger = React.forwardRef<
                   <TabsContent className="overflow-y-auto" value="diagnostics">
                     <FrameDiagnostics
                       stackItem={currentFrameStackItem}
-                    ></FrameDiagnostics>
+                      specification={specification}
+                    />
                   </TabsContent>
                   <TabsContent
                     className="overflow-y-auto"
@@ -719,15 +735,15 @@ export const FrameDebugger = React.forwardRef<
                         <button
                           className="underline"
                           onClick={() => {
-                            if (!currentFrameStackItem) {
-                              return;
-                            }
+                            const frame =
+                              getFrameParseResultFromStackItemBySpecifications(
+                                currentFrameStackItem,
+                                [specification]
+                              ).frame;
 
                             // Copy the text inside the text field
                             navigator.clipboard.writeText(
-                              getFrameHtmlHead(
-                                currentFrameStackItem.frameResult.frame
-                              )
+                              getFrameHtmlHead(frame)
                             );
                             setCopySuccess(true);
                           }}
@@ -748,7 +764,10 @@ export const FrameDebugger = React.forwardRef<
                             "sourceFrame" in currentFrameStackItem.request &&
                               currentFrameStackItem.request.sourceFrame
                               ? currentFrameStackItem.request.sourceFrame
-                              : currentFrameStackItem.frameResult.frame
+                              : getFrameParseResultFromStackItemBySpecifications(
+                                  currentFrameStackItem,
+                                  [specification]
+                                ).frame
                           )
                             .split("<meta")
                             .filter((t) => !!t)
diff --git a/packages/debugger/app/debugger-page.tsx b/packages/debugger/app/debugger-page.tsx
@@ -10,6 +10,7 @@ import {
   type OnSignatureFunc,
   type FrameActionBodyPayload,
   type OnConnectWalletFunc,
+  FarcasterFrameContext,
 } from "@frames.js/render";
 import { attribution } from "@frames.js/render/farcaster";
 import { useFrame } from "@frames.js/render/use-frame";
@@ -38,7 +39,10 @@ import {
   ActionDebugger,
   ActionDebuggerRef,
 } from "./components/action-debugger";
-import type { ParseResult } from "frames.js/frame-parsers";
+import type {
+  ParseFramesWithReportsResult,
+  SupportedParsingSpecification,
+} from "frames.js/frame-parsers";
 import { Loader2 } from "lucide-react";
 import { useToast } from "@/components/ui/use-toast";
 import { ToastAction } from "@/components/ui/toast";
@@ -120,7 +124,8 @@ export default function DebuggerPage({
       return undefined;
     }
   }, [searchParams.url]);
-  const [initialFrame, setInitialFrame] = useState<ParseResult>();
+  const [initialFrame, setInitialFrame] =
+    useState<ParseFramesWithReportsResult>();
   const [initialAction, setInitialAction] =
     useState<CastActionDefinitionResponse>();
   const [mockHubContext, setMockHubContext] = useState<
@@ -573,7 +578,8 @@ export default function DebuggerPage({
 
   const farcasterFrameConfig: UseFrameOptions<
     FarcasterSigner | null,
-    FrameActionBodyPayload
+    FrameActionBodyPayload,
+    FarcasterFrameContext
   > = useMemo(() => {
     const attributionData = process.env.NEXT_PUBLIC_FARCASTER_ATTRIBUTION_FID
       ? attribution(parseInt(process.env.NEXT_PUBLIC_FARCASTER_ATTRIBUTION_FID))
@@ -599,44 +605,82 @@ export default function DebuggerPage({
     return () => {
       const selectedProtocol = protocolConfiguration?.protocol ?? "farcaster";
 
-      switch (selectedProtocol) {
-        case "anonymous": {
-          // eslint-disable-next-line react-hooks/rules-of-hooks -- this is used as a hook in FrameDebugger
-          return useFrame({
-            ...useFrameConfig,
-            signerState: anonymousSignerState,
-            specification: "openframes",
-            frameContext: anonymousFrameContext,
-          });
-        }
-        case "lens": {
-          // eslint-disable-next-line react-hooks/rules-of-hooks -- this is used as a hook in FrameDebugger
-          return useFrame({
-            ...useFrameConfig,
-            signerState: lensSignerState,
-            specification: "openframes",
-            frameContext: lensFrameContext.frameContext,
-          });
-        }
-        case "xmtp": {
-          // eslint-disable-next-line react-hooks/rules-of-hooks -- this is used as a hook in FrameDebugger
-          return useFrame({
-            ...useFrameConfig,
-            signerState: xmtpSignerState,
-            specification: "openframes",
-            frameContext: xmtpFrameContext.frameContext,
-          });
-        }
-        default: {
-          // eslint-disable-next-line react-hooks/rules-of-hooks -- this is used as a hook in FrameDebugger
-          return useFrame(farcasterFrameConfig);
-        }
+      /**
+       * We need to send specification to server because of cast and composer actions
+       */
+      function createFetchFn(
+        specification: SupportedParsingSpecification
+      ): typeof fetch {
+        return (input, init) => {
+          if (typeof input !== "string") {
+            throw new Error(
+              "Expected first argument to fetchFn to be a string"
+            );
+          }
+
+          let url: string = input;
+
+          if (URL.canParse(input)) {
+            const parsed = new URL(input);
+
+            parsed.searchParams.set("protocol", specification);
+
+            url = parsed.toString();
+          } else {
+            const temporaryUrl = "http://temporary-for-parsing-purposes.tld";
+            const parsed = new URL(input, temporaryUrl);
+
+            parsed.searchParams.set("protocol", specification);
+
+            url = parsed.toString().replace(temporaryUrl, "");
+          }
+
+          return fetch(url, init);
+        };
       }
+
+      // eslint-disable-next-line react-hooks/rules-of-hooks -- this is used as a hook in FrameDebugger
+      return useFrame({
+        ...useFrameConfig,
+        fetchFn: createFetchFn(
+          selectedProtocol === "farcaster" ? "farcaster" : "openframes"
+        ),
+        signerState: anonymousSignerState,
+        frameContext: anonymousFrameContext,
+        // in debugger we to show only one specification at the time
+        specification:
+          selectedProtocol === "farcaster" ? "farcaster" : "openframes",
+        async resolveActionContext() {
+          switch (selectedProtocol) {
+            case "anonymous":
+              return {
+                signerState: anonymousSignerState,
+                frameContext: anonymousFrameContext,
+              };
+            case "lens":
+              return {
+                signerState: lensSignerState,
+                frameContext: lensFrameContext.frameContext,
+              };
+            case "xmtp":
+              return {
+                signerState: xmtpSignerState,
+                frameContext: xmtpFrameContext.frameContext,
+              };
+            default:
+              return {
+                signerState: farcasterSignerState,
+                frameContext: farcasterFrameContext.frameContext,
+              };
+          }
+        },
+      });
     };
   }, [
-    anonymousSignerState,
     anonymousFrameContext,
-    farcasterFrameConfig,
+    anonymousSignerState,
+    farcasterFrameContext.frameContext,
+    farcasterSignerState,
     lensFrameContext.frameContext,
     lensSignerState,
     protocolConfiguration?.protocol,
diff --git a/packages/debugger/app/frames/route.ts b/packages/debugger/app/frames/route.ts
