feat: handle multi protocol result in render package

Author: michalkvasnicak

packages/debugger/app/debugger-page.tsx

@@ -10,6 +10,7 @@ import {
   type OnSignatureFunc,
   type FrameActionBodyPayload,
   type OnConnectWalletFunc,
+  type FarcasterFrameContext,
 } from "@frames.js/render";
 import { attribution } from "@frames.js/render/farcaster";
 import { useFrame } from "@frames.js/render/use-frame";
@@ -174,7 +175,7 @@ export default function DebuggerPage({
 
       const searchParams = new URLSearchParams({
         url: newUrl || url,
-        specification: protocolConfiguration?.specification,
+        specification: protocolConfiguration.specification,
         actions: "true",
       });
       const proxiedUrl = `/frames?${searchParams.toString()}`;
@@ -196,7 +197,7 @@ export default function DebuggerPage({
             setInitialAction(json);
             setInitialFrame(undefined);
           } else if (json.type === "frame") {
-            setInitialFrame(json);
+            setInitialFrame(json[protocolConfiguration.specification]);
             setInitialAction(undefined);
           }
         })
@@ -573,7 +574,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))

packages/debugger/app/frames/route.ts

@@ -1,11 +1,13 @@
-import { type FrameActionPayload, getFrame } from "frames.js";
+import { type FrameActionPayload } from "frames.js";
 import { type NextRequest } from "next/server";
 import { getAction } from "../actions/getAction";
 import { persistMockResponsesForDebugHubRequests } from "../utils/mock-hub-utils";
 import type { SupportedParsingSpecification } from "frames.js";
+import { parseFramesWithReports } from "frames.js/parseFramesWithReports";
 import { z } from "zod";
 import type { ParseActionResult } from "../actions/types";
-import type { ParseResult } from "frames.js/frame-parsers";
+import type { ParseFramesWithReportsResult } from "frames.js/frame-parsers";
+import type { JsonObject } from "frames.js/types";
 
 const castActionMessageParser = z.object({
   type: z.literal("message"),
@@ -43,7 +45,7 @@ export type CastActionDefinitionResponse = ParseActionResult & {
   url: string;
 };
 
-export type FrameDefinitionResponse = ParseResult & {
+export type FrameDefinitionResponse = ParseFramesWithReportsResult & {
   type: "frame";
 };
 
@@ -91,17 +93,16 @@ export async function GET(request: NextRequest): Promise<Response> {
       } satisfies CastActionDefinitionResponse);
     }
 
-    const htmlString = await urlRes.text();
+    const html = await urlRes.text();
 
-    const result = getFrame({
-      htmlString,
-      url,
-      specification,
+    const parseResult = parseFramesWithReports({
+      html,
+      fallbackPostUrl: url,
       fromRequestMethod: "GET",
     });
 
     return Response.json({
-      ...result,
+      ...parseResult,
       type: "frame",
     } satisfies FrameDefinitionResponse);
   } catch (err) {
@@ -138,7 +139,7 @@ export async function POST(req: NextRequest): Promise<Response> {
   }
 
   if (!postUrl) {
-    return Response.error();
+    return Response.json({ message: "Invalid post URL" }, { status: 400 });
   }
 
   try {
@@ -197,7 +198,7 @@ export async function POST(req: NextRequest): Promise<Response> {
     }
 
     if (isTransactionRequest) {
-      const transaction = (await r.json()) as JSON;
+      const transaction = (await r.json()) as JsonObject;
       return Response.json(transaction);
     }
 
@@ -221,19 +222,26 @@ export async function POST(req: NextRequest): Promise<Response> {
       });
     }
 
-    const htmlString = await r.text();
+    const html = await r.text();
 
-    const result = getFrame({
-      htmlString,
-      url: body.untrustedData.url,
-      specification,
+    const parseResult = parseFramesWithReports({
+      html,
+      fallbackPostUrl: body.untrustedData.url,
       fromRequestMethod: "POST",
     });
 
-    return Response.json(result);
+    return Response.json({
+      type: "frame",
+      ...parseResult,
+    } satisfies FrameDefinitionResponse);
   } catch (err) {
     // eslint-disable-next-line no-console -- provide feedback to the user
     console.error(err);
-    return Response.error();
+    return Response.json(
+      {
+        message: String(err),
+      },
+      { status: 500 }
+    );
   }
 }

packages/render/src/collapsed-frame-ui.tsx

@@ -138,7 +138,7 @@ export function CollapsedFrameUI({
               cursor: isLoading ? undefined : "pointer",
             }}
           >
-            {frame.buttons.length === 1 && frame.buttons[0].label.length < 12
+            {!!frame.buttons[0] && frame.buttons[0].label.length < 12
               ? frame.buttons[0].label
               : "View"}
           </button>

packages/render/src/fallback-frame-context.ts

@@ -1,4 +1,4 @@
-import type { FarcasterFrameContext } from "./farcaster";
+import type { FarcasterFrameContext } from "./farcaster/types";
 
 export const fallbackFrameContext: FarcasterFrameContext = {
   castId: {

packages/render/src/farcaster/frames.tsx

@@ -16,17 +16,14 @@ import type {
   SignFrameActionFunc,
 } from "../types";
 import type { FarcasterSigner } from "./signers";
-
-export type FarcasterFrameContext = {
-  /** Connected address of user, only sent with transaction data request */
-  address?: `0x${string}`;
-  castId: { hash: `0x${string}`; fid: number };
-};
+import type { FarcasterFrameContext } from "./types";
 
 /** Creates a frame action for use with `useFrame` and a proxy */
-export const signFrameAction: SignFrameActionFunc<FarcasterSigner> = async (
-  actionContext
-) => {
+export const signFrameAction: SignFrameActionFunc<
+  FarcasterSigner,
+  FrameActionBodyPayload,
+  FarcasterFrameContext
+> = async (actionContext) => {
   const {
     frameButton,
     signer,

packages/render/src/farcaster/index.ts

@@ -1,3 +1,4 @@
 export * from "./frames";
 export * from "./signers";
 export * from "./attribution";
+export * from "./types";

packages/render/src/farcaster/signers.tsx

@@ -1,7 +1,12 @@
-import type { SignerStateInstance } from "..";
+import type { FrameActionBodyPayload, SignerStateInstance } from "../types";
+import type { FarcasterFrameContext } from "./types";
 
 export type FarcasterSignerState<TSignerType = FarcasterSigner | null> =
-  SignerStateInstance<TSignerType>;
+  SignerStateInstance<
+    TSignerType,
+    FrameActionBodyPayload,
+    FarcasterFrameContext
+  >;
 
 export type FarcasterSignerPendingApproval = {
   status: "pending_approval";

packages/render/src/farcaster/types.ts

@@ -0,0 +1,5 @@
+export type FarcasterFrameContext = {
+  /** Connected address of user, only sent with transaction data request */
+  address?: `0x${string}`;
+  castId: { hash: `0x${string}`; fid: number };
+};

packages/render/src/helpers.ts

@@ -1,3 +1,5 @@
+import type { ParseFramesWithReportsResult } from "frames.js/frame-parsers";
+
 export async function tryCallAsync<TResult>(
   promiseFn: () => Promise<TResult>
 ): Promise<TResult | Error> {
@@ -25,3 +27,14 @@ export function tryCall<TReturn>(fn: () => TReturn): TReturn | Error {
     return new TypeError("Unexpected error, check the console for details");
   }
 }
+
+export function isParseFramesWithReportsResult(
+  value: unknown
+): value is ParseFramesWithReportsResult {
+  return (
+    typeof value === "object" &&
+    value !== null &&
+    "openframes" in value &&
+    "farcaster" in value
+  );
+}

packages/render/src/hooks/use-fresh-ref.ts

@@ -0,0 +1,7 @@
+import { useRef } from "react";
+
+export function useFreshRef<T>(value: T): React.MutableRefObject<T> {
+  const ref = useRef(value);
+  ref.current = value;
+  return ref;
+}