fix: transaction frame debugger errors

app/frames/frames.ts

@@ -1,33 +1,33 @@
 /* eslint-disable react/jsx-key */
-import {farcasterHubContext, openframes} from "frames.js/middleware";
-import {imagesWorkerMiddleware} from "frames.js/middleware/images-worker";
-import {createFrames} from "frames.js/next";
-import {DEFAULT_DEBUGGER_HUB_URL} from "../debug";
-import {getLensFrameMessage, isLensFrameActionPayload} from "frames.js/lens";
+import { openframes } from "frames.js/middleware";
+import { imagesWorkerMiddleware } from "frames.js/middleware/images-worker";
+import { createFrames } from "frames.js/next";
+import { JsonValue } from "frames.js/types";
+
+interface MessageWithWalletAddressImplementation {
+  walletAddress: () => Promise<string | undefined>;
+}
 
 export const frames = createFrames({
-    basePath: "/frames",
-    initialState: {
-        pageIndex: 0,
-    },
-    middleware: [
-        imagesWorkerMiddleware({
-            imagesRoute: "/images",
-        }),
-        openframes({
-            clientProtocol: {
-                id: "lens",
-                version: "1.0.0",
-            },
-            handler: {
-                isValidPayload: (body: JSON) => isLensFrameActionPayload(body),
-                getFrameMessage: async (body: JSON) => {
-                    if (!isLensFrameActionPayload(body)) {
-                        return undefined;
-                    }
-                    return {...await getLensFrameMessage(body)};
-                },
-            },
-        }),
-    ],
+  basePath: "/frames",
+  initialState: {
+    pageIndex: 0,
+  },
+  middleware: [
+    imagesWorkerMiddleware({
+      imagesRoute: "/images",
+    }),
+    openframes({
+      clientProtocol: {
+        id: "anonymous",
+        version: "1.0.0",
+      },
+      handler: {
+        isValidPayload: (body: JsonValue) => true,
+        getFrameMessage: async (body: JsonValue) => {
+          return body as unknown as MessageWithWalletAddressImplementation;
+        },
+      },
+    }),
+  ],
 });

app/frames/route.tsx

@@ -1,23 +1,43 @@
 /* eslint-disable react/jsx-key */
-import {Button} from "frames.js/next";
-import {frames} from "./frames";
+import { Button } from "frames.js/next";
+import { frames } from "./frames";
 
 const handleRequest = frames(async (ctx) => {
+  const txnId =
+    (ctx.message as any)?.untrustedData?.transactionId ||
+    (ctx.message as any)?.untrustedData?.actionResponse;
+  if (txnId) {
     return {
-        image: (
-            <div tw="flex flex-col">
-                <div tw="flex">Click the button</div>
-            </div>
-        ),
-        buttons: [
-            <Button action="post" target="/who-am-i">
-                Who am I?
-            </Button>,
-            <Button action="tx" target="/tx/approve" post_url="/">
-                Approve
-            </Button>,
-        ],
+      image: (
+        <div tw="flex flex-col">
+          <div tw="flex">Tx Hash: {txnId}</div>
+        </div>
+      ),
+      buttons: [
+        <Button action="post" target="/who-am-i">
+          Who am I?
+        </Button>,
+        <Button action="tx" target="/tx/approve" post_url="/">
+          Approve
+        </Button>,
+      ],
     };
+  }
+  return {
+    image: (
+      <div tw="flex flex-col">
+        <div tw="flex">Click the button</div>
+      </div>
+    ),
+    buttons: [
+      <Button action="post" target="/who-am-i">
+        Who am I?
+      </Button>,
+      <Button action="tx" target="/tx/approve" post_url="/">
+        Approve
+      </Button>,
+    ],
+  };
 });
 
 export const GET = handleRequest;

app/frames/who-am-i/route.tsx

@@ -6,15 +6,15 @@ import { frames } from "../frames";
 export const POST = frames(async (ctx) => {
   let walletAddress: string | undefined =
     // farcaster
-    ctx.message?.requesterCustodyAddress ||
+    (ctx.message as any)?.requesterCustodyAddress ||
     // xmtp
-    ctx.message?.verifiedWalletAddress;
+    (ctx.message as any)?.verifiedWalletAddress;
 
   if (ctx.clientProtocol?.id === "lens") {
     const lensClient = new LensClient({ environment: production });
 
     const profile = await lensClient.profile.fetch({
-      forProfileId: ctx.message?.profileId,
+      forProfileId: (ctx.message as any)?.profileId,
     });
 
     walletAddress = profile?.ownedBy.address;

package.json

@@ -11,29 +11,29 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@ethersproject/units": "^5.7.0",
     "@lens-protocol/client": "^2.0.0",
+    "@types/dompurify": "^3.0.5",
+    "@types/jsonwebtoken": "^9.0.6",
     "@vercel/kv": "^1.0.1",
     "@xmtp/frames-validator": "^0.6.1",
+    "bignumber.js": "^9.1.2",
     "clsx": "^2.1.0",
-    "frames.js": "^0.16.4",
+    "dompurify": "^3.1.6",
+    "ethers": "^6.13.2",
+    "frames.js": "^0.18.1",
+    "jsonwebtoken": "^9.0.2",
     "next": "^14.1.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "tailwindcss-animate": "^1.0.7",
-    "@ethersproject/units": "^5.7.0",
-    "@types/dompurify": "^3.0.5",
-    "@types/jsonwebtoken": "^9.0.6",
-    "bignumber.js": "^9.1.2",
-    "dompurify": "^3.1.6",
-    "ethers": "^6.13.2",
-    "jsonwebtoken": "^9.0.2",
     "viem": "^2.18.2"
   },
   "engines": {
     "node": ">=18.17.0"
   },
   "devDependencies": {
-    "@frames.js/debugger": "^0.2.12",
+    "@frames.js/debugger": "^0.3.7",
     "@types/node": "^18.17.0",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",