wip: debugging

framegear/app/api/postFrame/route.ts

@@ -0,0 +1,18 @@
+import { NextRequest } from 'next/server';
+import { getDebugFrameRequest } from '@coinbase/onchainkit';
+
+export async function POST(req: NextRequest) {
+  const data = await req.json();
+  const { frameData, options } = data;
+  const postUrl = frameData.url;
+  const debugPayload = getDebugFrameRequest({ untrustedData: frameData }, options);
+
+  const res = await fetch(postUrl, {
+    method: 'POST',
+    body: JSON.stringify(debugPayload),
+  });
+
+  const text = await res.text();
+
+  return Response.json({ text });
+}

framegear/components/Frame/Frame.tsx

@@ -1,3 +1,4 @@
+import { postFrame } from '@/utils/postFrame';
 import { frameResultsAtom } from '@/utils/store';
 import { useAtom } from 'jotai';
 import { PropsWithChildren, useMemo } from 'react';
@@ -26,8 +27,12 @@ function ValidFrame({ tags }: { tags: Record<string, string> }) {
     // TODO: when debugger is live we will also need to extract actions, etc.
     const buttons = [1, 2, 3, 4].map((index) => {
       const key = `fc:frame:button:${index}`;
+      const actionKey = `${key}:action`;
+      const targetKey = `${key}:target`;
       const value = tags[key];
-      return value ? { key, value } : undefined;
+      const action = tags[actionKey];
+      const target = tags[targetKey];
+      return value ? { key, value, action, target } : undefined;
     });
     return {
       image,
@@ -82,7 +87,21 @@ function FrameButton({ children }: PropsWithChildren<{}>) {
     <button
       className="border-button w-[45%] grow rounded-lg border bg-white p-2 text-black"
       type="button"
-      disabled
+      onClick={() =>
+        postFrame({
+          buttonIndex: 1,
+          castId: {
+            fid: 0,
+            hash: '0xthisisnotreal',
+          },
+          inputText: '',
+          fid: 0,
+          messageHash: '0xthisisnotreal',
+          network: 0,
+          timestamp: 0,
+          url: 'http://localhost:3000/api/frame',
+        })
+      }
     >
       <span>{children}</span>
     </button>

framegear/package.json

@@ -10,6 +10,7 @@
     "test": "jest"
   },
   "dependencies": {
+    "@coinbase/onchainkit": "portal:./..",
     "@radix-ui/react-icons": "^1.3.0",
     "jotai": "^2.6.4",
     "next": "14.1.0",

framegear/utils/postFrame.ts

@@ -0,0 +1,18 @@
+import { FrameRequest, DebugFrameRequestOptions } from '@coinbase/onchainkit';
+
+type FrameData = FrameRequest['untrustedData'];
+
+export async function postFrame(frameData: FrameData, options?: DebugFrameRequestOptions) {
+  const res = await fetch('/api/postFrame', {
+    body: JSON.stringify({
+      frameData,
+      options,
+    }),
+    method: 'POST',
+    headers: {
+      contentType: 'application/json',
+    },
+  });
+  const json = await res.json();
+  console.log(json.text);
+}

framegear/yarn.lock

@@ -438,6 +438,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@coinbase/onchainkit@portal:./..::locator=framegear%40workspace%3A.":
+  version: 0.0.0-use.local
+  resolution: "@coinbase/onchainkit@portal:./..::locator=framegear%40workspace%3A."
+  peerDependencies:
+    graphql: ^14
+    graphql-request: ^6
+    react: ^18
+    react-dom: ^18
+    viem: ^2.7.0
+  languageName: node
+  linkType: soft
+
 "@cspotcode/source-map-support@npm:^0.8.0":
   version: 0.8.1
   resolution: "@cspotcode/source-map-support@npm:0.8.1"
@@ -3179,6 +3191,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "framegear@workspace:."
   dependencies:
+    "@coinbase/onchainkit": "portal:./.."
     "@radix-ui/react-icons": "npm:^1.3.0"
     "@testing-library/jest-dom": "npm:^6.4.2"
     "@testing-library/react": "npm:^14.2.1"

src/core/getDebugFrameRequest.ts

@@ -0,0 +1,50 @@
+import { FrameRequest, FrameValidationData } from './types';
+
+export type DebugFrameRequestOptions = {
+  following?: boolean; // Indicates if the viewer clicking the frame follows the cast author
+  interactor?: {
+    fid?: number; // Viewer Farcaster ID
+    custody_address?: string; // Viewer custody address
+    verified_accounts?: string[]; // Viewer account addresses
+  };
+  liked?: boolean; // Indicates if the viewer clicking the frame liked the cast
+  recasted?: boolean; // Indicates if the viewer clicking the frame recasted the cast
+};
+
+type DebugFrameRequest = FrameRequest & { onchainkitDebug: Required<FrameValidationData> };
+
+/**
+ * Modify a standard frame request to include simulated values (e.g., indicate the viewer
+ * follows the cast author) for development/debugging purposes.
+ * @param request A standard frame request.
+ * @param options An object containing values we will pretend are real for the purposes of debugging.
+ * @returns
+ */
+function getDebugFrameRequest(
+  request: FrameRequest,
+  options?: DebugFrameRequestOptions,
+): DebugFrameRequest {
+  return {
+    ...request,
+    onchainkitDebug: {
+      button: request.untrustedData.buttonIndex,
+      input: request.untrustedData.inputText,
+      following: !!options?.following,
+      interactor: {
+        fid: options?.interactor?.fid || 0,
+        custody_address: options?.interactor?.custody_address || '0xnotarealaddress',
+        verified_accounts: options?.interactor?.verified_accounts || [],
+      },
+      liked: !!options?.liked,
+      recasted: !!options?.recasted,
+      valid: true,
+      raw: {
+        valid: true,
+        // TODO: unjank
+        action: {} as any,
+      },
+    },
+  };
+}
+
+export { getDebugFrameRequest, type DebugFrameRequest };

src/core/getFrameMessage.test.ts

@@ -3,6 +3,7 @@ import { getFrameMessage } from './getFrameMessage';
 import { neynarBulkUserLookup } from '../utils/neynar/user/neynarUserFunctions';
 import { FrameRequest } from './types';
 import { neynarFrameValidation } from '../utils/neynar/frame/neynarFrameFunctions';
+import { getDebugFrameRequest } from './getDebugFrameRequest';
 
 jest.mock('../utils/neynar/user/neynarUserFunctions', () => {
   return {
@@ -24,6 +25,57 @@ describe('getFrameValidatedMessage', () => {
     expect(result?.isValid).toEqual(false);
   });
 
+  it('should consider debug messages valid, if allowed', async () => {
+    const result = await getFrameMessage(
+      getDebugFrameRequest({
+        untrustedData: {
+          buttonIndex: 1,
+          castId: {
+            fid: 0,
+            hash: '0xthisisnotreal',
+          },
+          inputText: '',
+          fid: 0,
+          network: 0,
+          messageHash: '0xthisisnotreal',
+          timestamp: 0,
+          url: 'https://localhost:3000',
+        },
+        trustedData: {
+          messageBytes: '0xthisisnotreal',
+        },
+      }),
+      { allowDebug: true },
+    );
+    expect(result?.isValid).toEqual(true);
+    expect(result.message?.button).toEqual(1);
+  });
+
+  it('should consider debug messages invalid, if not allowed (default)', async () => {
+    const result = await getFrameMessage(
+      getDebugFrameRequest({
+        untrustedData: {
+          buttonIndex: 1,
+          castId: {
+            fid: 0,
+            hash: '0xthisisnotreal',
+          },
+          inputText: '',
+          fid: 0,
+          network: 0,
+          messageHash: '0xthisisnotreal',
+          timestamp: 0,
+          url: 'https://localhost:3000',
+        },
+        trustedData: {
+          messageBytes: '0xthisisnotreal',
+        },
+      }),
+    );
+    expect(result?.isValid).toEqual(false);
+    expect(result.message).toBeUndefined();
+  });
+
   it('should return the message if the message is valid', async () => {
     const fid = 1234;
     const addresses = ['0xaddr1'];

src/core/getFrameMessage.ts

@@ -3,12 +3,14 @@ import {
   NEYNAR_DEFAULT_API_KEY,
   neynarFrameValidation,
 } from '../utils/neynar/frame/neynarFrameFunctions';
+import { DebugFrameRequest } from './getDebugFrameRequest';
 
 type FrameMessageOptions =
   | {
       neynarApiKey?: string;
       castReactionContext?: boolean;
       followContext?: boolean;
+      allowDebug?: boolean;
     }
   | undefined;
 
@@ -20,9 +22,19 @@ type FrameMessageOptions =
  * @param body The JSON received by server on frame callback
  */
 async function getFrameMessage(
-  body: FrameRequest,
+  body: FrameRequest | DebugFrameRequest,
   messageOptions?: FrameMessageOptions,
 ): Promise<FrameValidationResponse> {
+  // Skip validation only when allowed and when receiving a debug request
+  if (messageOptions?.allowDebug) {
+    if ((body as DebugFrameRequest).onchainkitDebug) {
+      return {
+        isValid: true,
+        message: (body as DebugFrameRequest).onchainkitDebug,
+      };
+    }
+  }
+
   // Validate the message
   const response = await neynarFrameValidation(
     body?.trustedData?.messageBytes,

src/index.ts

@@ -1,5 +1,6 @@
 // 🌲☀️🌲
 export { version } from './version';
+export { getDebugFrameRequest, type DebugFrameRequestOptions } from './core/getDebugFrameRequest';
 export { getEASAttestations } from './core/getEASAttestations';
 export { getFrameHtmlResponse } from './core/getFrameHtmlResponse';
 export { getFrameMetadata } from './core/getFrameMetadata';