feat: handle transactions from composer actions in debugger

Author: stephancill

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

@@ -447,6 +447,7 @@ export const ActionDebugger = React.forwardRef<
                     composerActionState: composerState,
                   });
                 }}
+                onTransaction={farcasterFrameConfig.onTransaction}
               />
             )}
           </TabsContent>

packages/debugger/app/components/composer-form-action-dialog.tsx

@@ -5,41 +5,82 @@ import {
   DialogFooter,
   DialogContent,
 } from "@/components/ui/dialog";
+import { OnTransactionFunc } from "@frames.js/render";
 import type {
   ComposerActionFormResponse,
   ComposerActionState,
 } from "frames.js/types";
-import { useEffect, useRef } from "react";
+import { useCallback, useEffect, useRef } from "react";
 import { z } from "zod";
 
-const composerFormCreateCastMessageSchema = z.object({
-  type: z.literal("createCast"),
-  data: z.object({
-    cast: z.object({
-      parent: z.string().optional(),
-      text: z.string(),
-      embeds: z.array(z.string().min(1).url()).min(1),
-    }),
-  }),
+const miniappMessageSchema = z.object({
+  type: z.string(),
+  data: z.record(z.unknown()),
 });
 
 type ComposerFormActionDialogProps = {
   composerActionForm: ComposerActionFormResponse;
   onClose: () => void;
   onSave: (arg: { composerState: ComposerActionState }) => void;
+  onTransaction?: OnTransactionFunc;
 };
 
 export function ComposerFormActionDialog({
   composerActionForm,
   onClose,
   onSave,
+  onTransaction,
 }: ComposerFormActionDialogProps) {
   const onSaveRef = useRef(onSave);
   onSaveRef.current = onSave;
 
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+
+  const postMessageToIframe = useCallback(
+    (message: any) => {
+      if (iframeRef.current && iframeRef.current.contentWindow) {
+        iframeRef.current.contentWindow.postMessage(
+          message,
+          new URL(composerActionForm.url).origin
+        );
+      }
+    },
+    [composerActionForm.url]
+  );
+
   useEffect(() => {
     const handleMessage = (event: MessageEvent) => {
-      const result = composerFormCreateCastMessageSchema.safeParse(event.data);
+      const result = miniappMessageSchema.parse(event.data);
+
+      if (result?.type === "requestTransaction") {
+        onTransaction?.({
+          transactionData: result.data.tx as any,
+        }).then((txHash) => {
+          if (txHash) {
+            postMessageToIframe({
+              type: "transactionResponse",
+              data: {
+                requestId: result.data.requestId,
+                success: true,
+                receipt: {
+                  // address: farcasterFrameConfig.connectedAddress,
+                  transactionId: txHash,
+                },
+              },
+            });
+          } else {
+            postMessageToIframe({
+              type: "transactionResponse",
+              data: {
+                requestId: result.data.requestId,
+                success: false,
+                message: "User rejected the request",
+              },
+            });
+          }
+        });
+        return;
+      }
 
       // on error is not called here because there can be different messages that don't have anything to do with composer form actions
       // instead we are just waiting for the correct message
@@ -80,6 +121,7 @@ export function ComposerFormActionDialog({
         <div>
           <iframe
             className="h-[600px] w-full opacity-100 transition-opacity duration-300"
+            ref={iframeRef}
             src={composerActionForm.url}
             sandbox="allow-forms allow-scripts allow-same-origin"
           ></iframe>

templates/next-starter-with-examples/app/examples/transaction-miniapp/frames/actions/miniapp/route.tsx

@@ -0,0 +1,34 @@
+import { NextRequest } from "next/server";
+import { appURL } from "../../../../../utils";
+import { frames } from "../../frames";
+import { composerAction, composerActionForm, error } from "frames.js/core";
+
+export const GET = async (req: NextRequest) => {
+  return composerAction({
+    action: {
+      type: "post",
+    },
+    icon: "credit-card",
+    name: "Send a tx",
+    aboutUrl: `${appURL()}/examples/transaction-miniapp`,
+    description: "Send ETH to address",
+    imageUrl: "https://framesjs.org/logo.png",
+  });
+};
+
+export const POST = frames(async (ctx) => {
+  const walletAddress = await ctx.walletAddress();
+
+  const miniappUrl = new URL("/examples/transaction-miniapp/miniapp", appURL());
+
+  if (walletAddress) {
+    miniappUrl.searchParams.set("fromAddress", walletAddress);
+  } else {
+    return error("Must be authenticated");
+  }
+
+  return composerActionForm({
+    title: "Send ETH",
+    url: miniappUrl.toString(),
+  });
+});

templates/next-starter-with-examples/app/examples/transaction-miniapp/frames/frames.ts

@@ -0,0 +1,18 @@
+import { createFrames } from "frames.js/next";
+import { appURL } from "../../../utils";
+import {
+  farcasterHubContext,
+  warpcastComposerActionState,
+} from "frames.js/middleware";
+import { DEFAULT_DEBUGGER_HUB_URL } from "../../../debug";
+
+export const frames = createFrames({
+  baseUrl: `${appURL()}/examples/transaction-miniapp/frames`,
+  debug: process.env.NODE_ENV === "development",
+  middleware: [
+    farcasterHubContext({
+      hubHttpUrl: DEFAULT_DEBUGGER_HUB_URL,
+    }),
+    warpcastComposerActionState(), // necessary to detect and parse state necessary for composer actions
+  ],
+});

templates/next-starter-with-examples/app/examples/transaction-miniapp/frames/route.tsx

@@ -0,0 +1,29 @@
+/* eslint-disable react/jsx-key */
+import { Button } from "frames.js/next";
+import { frames } from "./frames";
+import { appURL } from "../../../utils";
+
+function constructCastActionUrl(params: { url: string }): string {
+  // Construct the URL
+  const baseUrl = "https://warpcast.com/~/composer-action";
+  const urlParams = new URLSearchParams({
+    url: params.url,
+  });
+
+  return `${baseUrl}?${urlParams.toString()}`;
+}
+
+export const GET = frames(async (ctx) => {
+  const transactionMiniappUrl = constructCastActionUrl({
+    url: `${appURL()}/examples/transaction-miniapp/frames/actions/miniapp`,
+  });
+
+  return {
+    image: <div>Transaction Miniapp Example</div>,
+    buttons: [
+      <Button action="link" target={transactionMiniappUrl}>
+        Transaction Miniapp
+      </Button>,
+    ],
+  };
+});

templates/next-starter-with-examples/app/examples/transaction-miniapp/miniapp/page.tsx

@@ -0,0 +1,106 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+
+// pass state from frame message
+export default function MiniappPage({
+  searchParams,
+}: {
+  // provided by URL returned from composer action server
+  searchParams: {
+    fromAddress: string;
+  };
+}) {
+  const [message, setMessage] = useState<any>(null);
+
+  const handleMessage = useCallback((m: MessageEvent) => {
+    console.log("received", m);
+
+    if (m.source === window.parent) {
+      setMessage(m.data);
+    }
+  }, []);
+
+  useEffect(() => {
+    window.addEventListener("message", handleMessage);
+
+    return () => {
+      window.removeEventListener("message", handleMessage);
+    };
+  }, []);
+
+  const handleSubmit = useCallback(
+    (e: React.FormEvent<HTMLFormElement>) => {
+      e.preventDefault();
+      const formData = new FormData(e.currentTarget);
+      const ethAmount = formData.get("ethAmount") as string;
+      const recipientAddress = formData.get(
+        "recipientAddress"
+      ) as `0x${string}`;
+
+      // Handle form submission here
+      window.parent.postMessage(
+        {
+          type: "requestTransaction",
+          data: {
+            requestId: "01ef6570-5a51-48fa-910c-f419400a6d0d",
+            tx: {
+              chainId: "eip155:10",
+              method: "eth_sendTransaction",
+              params: {
+                abi: [],
+                to: recipientAddress,
+                value: (BigInt(ethAmount) * BigInt(10 ** 18)).toString(),
+              },
+            },
+          },
+        },
+        "*"
+      );
+    },
+    [window?.parent]
+  );
+
+  return (
+    <div>
+      <form className="flex flex-col gap-4" onSubmit={handleSubmit}>
+        <label htmlFor="eth-amount" className="font-semibold">
+          ETH Amount
+        </label>
+        <input
+          className="rounded border border-slate-800 p-2"
+          id="eth-amount"
+          name="ethAmount"
+          placeholder="0.1"
+          type="number"
+          step="0.000000000000000001"
+          min="0"
+          value={"0"}
+          required
+        />
+
+        <label htmlFor="recipient-address" className="font-semibold">
+          Recipient Address
+        </label>
+        <input
+          className="rounded border border-slate-800 p-2"
+          id="recipient-address"
+          name="recipientAddress"
+          placeholder="0x..."
+          type="text"
+          value={searchParams.fromAddress}
+          required
+        />
+
+        <button className="rounded bg-slate-800 text-white p-2" type="submit">
+          Send ETH
+        </button>
+      </form>
+      {message?.data?.success ? (
+        <div>Transaction sent successfully</div>
+      ) : (
+        <div className="text-red-500">{message?.data?.message}</div>
+      )}
+    </div>
+  );
+}

templates/next-starter-with-examples/app/examples/transaction-miniapp/page.tsx

@@ -0,0 +1,26 @@
+import { createExampleURL } from "../../utils";
+import type { Metadata } from "next";
+import { fetchMetadata } from "frames.js/next";
+import { Frame } from "../../components/Frame";
+
+export async function generateMetadata(): Promise<Metadata> {
+  return {
+    title: "Frames.js Transaction Miniapp",
+    other: {
+      ...(await fetchMetadata(
+        createExampleURL("/examples/transaction-miniapp/frames")
+      )),
+    },
+  };
+}
+
+export default async function Home() {
+  const metadata = await generateMetadata();
+
+  return (
+    <Frame
+      metadata={metadata}
+      url={createExampleURL("/examples/transaction-miniapp/frames")}
+    />
+  );
+}