refactor: provide parse result and current specification to resolveActionContext

michalkvasnicak · michalkvasnicak · commit 3fad5bacef11 · 2024-10-23T13:16:53.000+02:00
diff --git a/packages/render/src/collapsed-frame-ui.tsx b/packages/render/src/collapsed-frame-ui.tsx
@@ -149,7 +149,9 @@ export function CollapsedFrameUI({
               cursor: isLoading ? undefined : "pointer",
             }}
           >
-            {frame.buttons.length === 1 && frame.buttons[0].label.length < 12
+            {frame.buttons.length === 1 &&
+            !!frame.buttons[0] &&
+            frame.buttons[0].label.length < 12
               ? frame.buttons[0].label
               : "View"}
           </button>
diff --git a/packages/render/src/frame-ui.tsx b/packages/render/src/frame-ui.tsx
@@ -1,6 +1,14 @@
 import type { ImgHTMLAttributes } from "react";
 import React, { useState } from "react";
-import type { Frame, FrameButton } from "frames.js";
+import type {
+  Frame,
+  FrameButton,
+  SupportedParsingSpecification,
+} from "frames.js";
+import type {
+  ParseFramesWithReportsResult,
+  ParseResult,
+} from "frames.js/frame-parsers";
 import type { FrameTheme, FrameState } from "./types";
 import {
   getErrorMessageFromFramesStackItem,
@@ -146,28 +154,35 @@ export function FrameUI({
   }
 
   let frame: Frame | Partial<Frame> | undefined;
+  let parseResult: ParseFramesWithReportsResult | undefined;
+  let specification: SupportedParsingSpecification | undefined;
   let debugImage: string | undefined;
 
   if (currentFrameStackItem.status === "done") {
-    const parseResult = getFrameParseResultFromStackItemBySpecifications(
+    const parseResultBySpec = getFrameParseResultFromStackItemBySpecifications(
       currentFrameStackItem,
       specifications
     );
 
-    frame = parseResult.frame;
+    frame = parseResultBySpec.frame;
+    parseResult = currentFrameStackItem.parseResult;
+    specification = parseResultBySpec.specification;
     debugImage = enableImageDebugging
-      ? parseResult.framesDebugInfo?.image
+      ? parseResultBySpec.framesDebugInfo?.image
       : undefined;
   } else if (
     currentFrameStackItem.status === "message" ||
     currentFrameStackItem.status === "doneRedirect"
   ) {
     frame = currentFrameStackItem.request.sourceFrame;
+    parseResult = currentFrameStackItem.request.sourceParseResult;
+    specification = currentFrameStackItem.request.specification;
   } else if (currentFrameStackItem.status === "requestError") {
-    frame =
-      "sourceFrame" in currentFrameStackItem.request
-        ? currentFrameStackItem.request.sourceFrame
-        : undefined;
+    if ("sourceFrame" in currentFrameStackItem.request) {
+      frame = currentFrameStackItem.request.sourceFrame;
+      parseResult = currentFrameStackItem.request.sourceParseResult;
+      specification = currentFrameStackItem.request.specification;
+    }
   }
 
   const ImageEl = FrameImage ? FrameImage : "img";
@@ -233,7 +248,11 @@ export function FrameUI({
           }}
         />
       ) : null}
-      {!!frame && !!frame.buttons && frame.buttons.length > 0 ? (
+      {!!parseResult &&
+      !!specification &&
+      !!frame &&
+      !!frame.buttons &&
+      frame.buttons.length > 0 ? (
         <div className="flex gap-[8px] px-2 pb-2">
           {frame.buttons.map((frameButton: FrameButton, index: number) => (
             <button
@@ -252,12 +271,12 @@ export function FrameUI({
               }}
               onClick={() => {
                 Promise.resolve(
-                  frameState.onButtonPress(
-                    // Partial frame could have enough data to handle button press
-                    frame as Frame,
+                  frameState.onButtonPress({
+                    parseResult,
                     frameButton,
-                    index
-                  )
+                    index,
+                    specification,
+                  })
                 ).catch((e: unknown) => {
                   // eslint-disable-next-line no-console -- provide feedback to the user
                   console.error(e);
diff --git a/packages/render/src/helpers.ts b/packages/render/src/helpers.ts
@@ -72,7 +72,12 @@ export function createParseFramesWithReportsObject(
       // this is open frame
       return {
         openframes: input,
-        farcaster: { status: "failure", frame: input.frame, reports: {} },
+        farcaster: {
+          status: "failure",
+          frame: input.frame,
+          reports: {},
+          specification: "farcaster",
+        },
       };
     }
 
@@ -81,18 +86,38 @@ export function createParseFramesWithReportsObject(
       openframes:
         "accepts" in input.frame || "accepts" in input.reports
           ? input
-          : { status: "failure", frame: input.frame, reports: {} },
+          : {
+              status: "failure",
+              frame: input.frame,
+              reports: {},
+              specification: "openframes",
+            },
     };
   }
 
   return {
     // always treat the frame as farcaster frame
-    farcaster: { status: "success", frame: input, reports: {} },
+    farcaster: {
+      status: "success",
+      frame: input,
+      reports: {},
+      specification: "farcaster",
+    },
     openframes:
       // detect if it is a valid openframe
       !input.accepts || input.accepts.length === 0
-        ? { status: "failure", frame: input, reports: {} }
-        : { status: "success", frame: input, reports: {} },
+        ? {
+            status: "failure",
+            frame: input,
+            reports: {},
+            specification: "openframes",
+          }
+        : {
+            status: "success",
+            frame: input,
+            reports: {},
+            specification: "openframes",
+          },
   };
 }
 
diff --git a/packages/render/src/types.ts b/packages/render/src/types.ts
@@ -80,15 +80,8 @@ export type SignFrameActionFunc<
   actionContext: SignerStateActionContext<TSignerStorageType, TFrameContextType>
 ) => Promise<SignedFrameAction<TFrameActionBodyType>>;
 
-export type UseFetchFrameSignFrameActionFunction = (arg: {
-  actionContext: SignerStateActionContext;
-  /**
-   * @defaultValue false
-   */
-  forceRealSigner?: boolean;
-}) => Promise<SignedFrameAction>;
-
 export type UseFetchFrameOptions = {
+  dangerousSkipSigning: boolean;
   stackAPI: FrameStackAPI;
   /**
    * URL or path to the frame proxy handling GET requests.
@@ -102,7 +95,6 @@ export type UseFetchFrameOptions = {
    * Extra payload to be sent with the POST request.
    */
   extraButtonRequestPayload?: Record<string, unknown>;
-  signFrameAction: UseFetchFrameSignFrameActionFunction;
   /**
    * Called after transaction data has been returned from the server and user needs to approve the transaction.
    */
@@ -195,10 +187,25 @@ export type UseFetchFrameOptions = {
   onTransactionProcessingError?: (error: Error) => void;
 };
 
+export type ResolveFrameActionContextArgumentAction =
+  | { type: "composer" }
+  | { type: "cast" }
+  | {
+      type: "frame";
+      /**
+       * Current parse result that is active
+       */
+      parseResult: ParseFramesWithReportsResult;
+      /**
+       * Specification that is currently active
+       */
+      specification: SupportedParsingSpecification;
+    };
+
 export type ResolveFrameActionContextArgument = {
-  readonly dangerouslySkipSigning: boolean;
   readonly frameStack: FramesStack;
   readonly specifications: SupportedParsingSpecification[];
+  readonly action: ResolveFrameActionContextArgumentAction;
 };
 
 export type ResolveFrameActionContextResult = {
@@ -420,19 +427,25 @@ export type FramePOSTRequest =
       source?: never;
       frameButton: FrameButtonPost | FrameButtonTx;
       signerStateActionContext: SignerStateActionContext;
+      signerState: SignerStateInstance<any, any, any>;
       isDangerousSkipSigning: boolean;
       /**
        * The frame that was the source of the button press.
        */
       sourceFrame: Frame;
+      sourceParseResult: ParseFramesWithReportsResult;
+      specification: SupportedParsingSpecification;
     }
   | {
       method: "POST";
       source: "cast-action" | "composer-action";
       frameButton: FrameButtonPost | FrameButtonTx;
       signerStateActionContext: SignerStateActionContext;
+      signerState: SignerStateInstance<any, any, any>;
       isDangerousSkipSigning: boolean;
       sourceFrame: undefined;
+      sourceParseResult: undefined;
+      specification: undefined;
     };
 
 export type FrameRequest = FrameGETRequest | FramePOSTRequest;
@@ -541,12 +554,13 @@ export type FrameReducerActions =
       homeframeUrl: string;
     };
 
-export type ButtonPressFunction = (
-  frame: Frame,
-  frameButton: FrameButton,
-  index: number,
-  fetchFrameOverride?: FetchFrameFunction
-) => void | Promise<void>;
+export type ButtonPressFunction = (arg: {
+  frameButton: FrameButton;
+  parseResult: ParseFramesWithReportsResult;
+  specification: SupportedParsingSpecification;
+  index: number;
+  fetchFrameOverride?: FetchFrameFunction;
+}) => void | Promise<void>;
 
 type CastActionButtonPressFunctionArg = {
   castAction: CastActionResponse & {
@@ -581,7 +595,12 @@ export type ComposerActionButtonPressFunction = (
 
 export type CastActionRequest = Omit<
   FramePOSTRequest,
-  "method" | "frameButton" | "sourceFrame" | "signerStateActionContext"
+  | "method"
+  | "frameButton"
+  | "specification"
+  | "sourceFrame"
+  | "sourceParseResult"
+  | "signerStateActionContext"
 > & {
   method: "CAST_ACTION";
   action: CastActionResponse & {
@@ -595,7 +614,12 @@ export type CastActionRequest = Omit<
 
 export type ComposerActionRequest = Omit<
   FramePOSTRequest,
-  "method" | "frameButton" | "sourceFrame" | "signerStateActionContext"
+  | "method"
+  | "frameButton"
+  | "specification"
+  | "sourceFrame"
+  | "sourceParseResult"
+  | "signerStateActionContext"
 > & {
   method: "COMPOSER_ACTION";
   action: CastActionResponse & {
diff --git a/packages/render/src/ui/frame.base.tsx b/packages/render/src/ui/frame.base.tsx
@@ -150,7 +150,7 @@ export function BaseFrameUI<TStylingProps extends Record<string, unknown>>({
     case "requestError": {
       if (
         "sourceFrame" in currentFrameStackItem.request &&
-        currentFrameStackItem.request.sourceFrame
+        currentFrameStackItem.request.sourceParseResult
       ) {
         frameUiState = {
           status: "complete",
@@ -159,6 +159,8 @@ export function BaseFrameUI<TStylingProps extends Record<string, unknown>>({
           isImageLoading,
           id: currentFrameStackItem.timestamp.getTime(),
           frameState,
+          parseResult: currentFrameStackItem.request.sourceParseResult,
+          specification: currentFrameStackItem.request.specification,
         };
       } else {
         return components.Error(
@@ -192,6 +194,8 @@ export function BaseFrameUI<TStylingProps extends Record<string, unknown>>({
         isImageLoading,
         id: currentFrameStackItem.timestamp.getTime(),
         frameState,
+        parseResult: currentFrameStackItem.request.sourceParseResult,
+        specification: currentFrameStackItem.request.specification,
       };
 
       break;
@@ -211,6 +215,8 @@ export function BaseFrameUI<TStylingProps extends Record<string, unknown>>({
           isImageLoading,
           id: currentFrameStackItem.timestamp.getTime(),
           frameState,
+          parseResult: currentFrameStackItem.request.sourceParseResult,
+          specification: currentFrameStackItem.request.specification,
         };
       }
 
@@ -233,6 +239,8 @@ export function BaseFrameUI<TStylingProps extends Record<string, unknown>>({
           isImageLoading,
           id: currentFrameStackItem.timestamp.getTime(),
           frameState,
+          parseResult: currentFrameStackItem.parseResult,
+          specification: parseResult.specification,
         };
       } else if (isPartialFrameParseResult(parseResult) && allowPartialFrame) {
         frameUiState = {
@@ -245,6 +253,8 @@ export function BaseFrameUI<TStylingProps extends Record<string, unknown>>({
           isImageLoading,
           id: currentFrameStackItem.timestamp.getTime(),
           frameState,
+          parseResult: currentFrameStackItem.parseResult,
+          specification: parseResult.specification,
         };
       } else {
         return components.Error(
@@ -284,12 +294,12 @@ export function BaseFrameUI<TStylingProps extends Record<string, unknown>>({
             rootDimensionsRef.current = rootRef.current?.computeDimensions();
 
             Promise.resolve(
-              frameState.onButtonPress(
-                // @todo change the type onButtonPress to accept partial frame as well because that can happen if partial frames are enabled
-                frameUiState.frame as Frame,
+              frameState.onButtonPress({
                 frameButton,
-                index
-              )
+                index,
+                parseResult: frameUiState.parseResult,
+                specification: frameUiState.specification,
+              })
             ).catch((error) => {
               // eslint-disable-next-line no-console -- provide feedback to the user
               console.error(error);
diff --git a/packages/render/src/ui/types.ts b/packages/render/src/ui/types.ts
@@ -1,5 +1,10 @@
-import type { Frame, FrameButton } from "frames.js";
+import type {
+  Frame,
+  FrameButton,
+  SupportedParsingSpecification,
+} from "frames.js";
 import type { createElement, ReactElement } from "react";
+import type { ParseFramesWithReportsResult } from "frames.js/frame-parsers";
 import type { FrameState } from "../types";
 
 /**
@@ -44,6 +49,8 @@ export type FrameUIState =
       frameState: FrameState;
       debugImage?: string;
       isImageLoading: boolean;
+      parseResult: ParseFramesWithReportsResult;
+      specification: SupportedParsingSpecification;
     }
   | {
       id: number;
@@ -53,6 +60,8 @@ export type FrameUIState =
       frameState: FrameState;
       debugImage?: string;
       isImageLoading: boolean;
+      parseResult: ParseFramesWithReportsResult;
+      specification: SupportedParsingSpecification;
     };
 
 type FrameUIStateProps = {
diff --git a/packages/render/src/use-fetch-frame.ts b/packages/render/src/use-fetch-frame.ts
diff --git a/packages/render/src/use-frame.tsx b/packages/render/src/use-frame.tsx
