Refactor Farcaster frame validation

Author: jnsdls

apps/dashboard/src/classes/CoinbaseKit.ts

@@ -0,0 +1,18 @@
+import {
+  type FrameRequest,
+  type FrameValidationData,
+  getFrameMessage,
+} from "@coinbase/onchainkit";
+
+export function validateFrameMessage(body: FrameRequest) {
+  return getFrameMessage(body, {
+    neynarApiKey: process.env.NEYNAR_API_KEY,
+  });
+}
+
+export function getFarcasterAccountAddress(
+  interactor: FrameValidationData["interactor"],
+) {
+  // Get the first verified account or custody account if first verified account doesn't exist
+  return interactor.verified_accounts[0] ?? interactor.custody_address;
+}

apps/dashboard/src/lib/farcaster-frames.ts

@@ -1,14 +1,13 @@
 import { getThirdwebClient } from "@/constants/thirdweb.server";
-import type { FrameRequest } from "@coinbase/onchainkit";
-import { CoinbaseKit } from "classes/CoinbaseKit";
+import {
+  getFarcasterAccountAddress,
+  validateFrameMessage,
+} from "lib/farcaster-frames";
 import type { NextApiRequest, NextApiResponse } from "next";
 import { getContract } from "thirdweb";
 import { base } from "thirdweb/chains";
 import { errorResponse } from "utils/api";
-import {
-  getErc721PreparedEncodedData,
-  getFarcasterAccountAddress,
-} from "utils/tx-frame";
+import { getErc721PreparedEncodedData } from "utils/tx-frame";
 import { abi } from "./abi";
 
 // https://thirdweb.com/base/0x352810fF1c51a42B568662D46570A30B590a715a
@@ -24,9 +23,7 @@ export default async function handler(
   }
 
   // Validate message with @coinbase/onchainkit
-  const { isValid, message } = await CoinbaseKit.validateMessage(
-    req.body as FrameRequest,
-  );
+  const { isValid, message } = await validateFrameMessage(req.body);
 
   // Validate if message is valid
   if (!isValid || !message) {

apps/dashboard/src/pages/api/frame/base/get-tx-frame.ts

@@ -1,13 +1,14 @@
-import type { FrameRequest } from "@coinbase/onchainkit";
-import { CoinbaseKit } from "classes/CoinbaseKit";
 import { ConnectFrame } from "classes/ConnectFrame";
+import {
+  getFarcasterAccountAddress,
+  validateFrameMessage,
+} from "lib/farcaster-frames";
 import type { NextRequest } from "next/server";
 import {
   errorResponse,
   redirectResponse,
   successHtmlResponse,
 } from "utils/api";
-import { getFarcasterAccountAddress } from "utils/farcaster";
 
 export const config = {
   runtime: "edge",
@@ -18,9 +19,8 @@ export default async function handler(req: NextRequest) {
     return errorResponse("Invalid method", 400);
   }
 
-  const body = (await req.json()) as FrameRequest;
-
-  const { isValid, message } = await CoinbaseKit.validateMessage(body);
+  const body = await req.json();
+  const { isValid, message } = await validateFrameMessage(body);
 
   if (!isValid || !message) {
     return errorResponse("Invalid message", 400);

apps/dashboard/src/pages/api/frame/connect.ts

@@ -1,14 +1,16 @@
-import { type FrameRequest, getFrameHtmlResponse } from "@coinbase/onchainkit";
-import { CoinbaseKit } from "classes/CoinbaseKit";
+import { getFrameHtmlResponse } from "@coinbase/onchainkit";
 import { ThirdwebDegenEngine } from "classes/ThirdwebDegenEngine";
+import {
+  getFarcasterAccountAddress,
+  validateFrameMessage,
+} from "lib/farcaster-frames";
 import { getAbsoluteUrl } from "lib/vercel-utils";
 import type { NextRequest } from "next/server";
 import {
   errorResponse,
   redirectResponse,
   successHtmlResponse,
 } from "utils/api";
-import { getFarcasterAccountAddress } from "utils/farcaster";
 import { shortenAddress } from "utils/string";
 
 const postUrl = `${getAbsoluteUrl()}/api/frame/degen/mint`;
@@ -26,9 +28,9 @@ export default async function handler(req: NextRequest) {
     return errorResponse("Invalid method", 400);
   }
 
-  const body = (await req.json()) as FrameRequest;
+  const body = await req.json();
 
-  const { isValid, message } = await CoinbaseKit.validateMessage(body);
+  const { isValid, message } = await validateFrameMessage(body);
 
   if (!isValid || !message) {
     return errorResponse("Invalid message", 400);

apps/dashboard/src/pages/api/frame/degen/mint.ts

@@ -1,13 +1,14 @@
-import type { FrameRequest } from "@coinbase/onchainkit";
-import { CoinbaseKit } from "classes/CoinbaseKit";
 import { ConnectFrame } from "classes/ConnectFrame";
+import {
+  getFarcasterAccountAddress,
+  validateFrameMessage,
+} from "lib/farcaster-frames";
 import type { NextRequest } from "next/server";
 import {
   errorResponse,
   redirectResponse,
   successHtmlResponse,
 } from "utils/api";
-import { getFarcasterAccountAddress } from "utils/farcaster";
 
 export const config = {
   runtime: "edge",
@@ -18,9 +19,9 @@ export default async function handler(req: NextRequest) {
     return errorResponse("Invalid method", 400);
   }
 
-  const body = (await req.json()) as FrameRequest;
+  const body = await req.json();
 
-  const { isValid, message } = await CoinbaseKit.validateMessage(body);
+  const { isValid, message } = await validateFrameMessage(body);
 
   if (!isValid || !message) {
     return errorResponse("Invalid message", 400);

apps/dashboard/src/pages/api/frame/engine.ts

@@ -1,6 +1,5 @@
-import type { FrameRequest } from "@coinbase/onchainkit";
-import { CoinbaseKit } from "classes/CoinbaseKit";
 import { SuperChainFrame } from "classes/SuperChainFrame";
+import { validateFrameMessage } from "lib/farcaster-frames";
 import {
   finalGrowthPlanFrameMetaData,
   growthPlanFrameMetaData,
@@ -23,9 +22,9 @@ export default async function handler(req: NextRequest) {
     return errorResponse("Invalid method", 400);
   }
 
-  const body = (await req.json()) as FrameRequest;
+  const body = await req.json();
 
-  const { isValid, message } = await CoinbaseKit.validateMessage(body);
+  const { isValid, message } = await validateFrameMessage(body);
 
   if (!isValid || !message) {
     return errorResponse("Invalid message", 400);

apps/dashboard/src/pages/api/frame/superchain.ts

@@ -1,7 +1,6 @@
-import type { FrameRequest } from "@coinbase/onchainkit";
 import * as Sentry from "@sentry/nextjs";
-import { CoinbaseKit } from "classes/CoinbaseKit";
 import { SuperChainFormFrame } from "classes/SuperchainFormFrame";
+import { validateFrameMessage } from "lib/farcaster-frames";
 import type { NextRequest } from "next/server";
 import {
   errorResponse,
@@ -27,9 +26,9 @@ export default async function handler(req: NextRequest) {
   }
 
   try {
-    const body = (await req.json()) as FrameRequest;
+    const body = await req.json();
 
-    const { isValid, message } = await CoinbaseKit.validateMessage(body);
+    const { isValid, message } = await validateFrameMessage(body);
 
     if (!isValid || !message) {
       return errorResponse("Invalid message", 400);

apps/dashboard/src/pages/api/superchain/frame.ts

@@ -1,4 +1,3 @@
-import type { FrameValidationData } from "@coinbase/onchainkit";
 import { type ThirdwebContract, encode } from "thirdweb";
 import { claimTo } from "thirdweb/extensions/erc721";
 
@@ -15,10 +14,3 @@ export async function getErc721PreparedEncodedData(
   // Return encoded transaction data
   return encodedTransactionData;
 }
-
-export const getFarcasterAccountAddress = (
-  interactor: FrameValidationData["interactor"],
-) => {
-  // Get the first verified account or custody account if first verified account doesn't exist
-  return interactor.verified_accounts[0] ?? interactor.custody_address;
-};