feat: handle interaction to get rewards

.github/workflows/github-actions.yml

@@ -9,6 +9,10 @@ on:
 jobs:
   build:
     runs-on: ubuntu-latest
+    env:
+      DEV_FRAMES_FUN_API_KEY: "api-key"
+      DEV_FRAMES_FUN_API_TRPC_URL: "http://localhost:3000/trpc"
+      FARCASTER_HUB_GRPC_URL: "http://localhost:5000"
     steps:
       - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v4

apps/extension/components/frame-iframe.tsx

@@ -3,10 +3,12 @@ import {
   createMessageConsumer,
   sendMessageToEmbed
 } from "@xframes/shared/messaging"
+import { BROWSER_EXTENSION_INTERACTIONS } from "ffun-trpc-types/dist/lib/interactions"
 import { useCallback, useEffect, useRef, useState } from "react"
 
 import { frameEmbedProxyUrl } from "~constants"
 import { useFarcasterIdentity } from "~hooks/use-farcaster-identity"
+import { dispatchInteractionEvent } from "~services/events"
 
 import { LoadingIndicator } from "./loading-indicator"
 
@@ -45,6 +47,20 @@ export default function FrameIFrame({ url, frameId, theme }: FrameIFrameProps) {
     })
   }, [frameId])
 
+  useEffect(() => {
+    if (signer?.status !== "approved") {
+      return
+    }
+
+    return consumeMessageFromEmbed("frame_button_press", () => {
+      dispatchInteractionEvent(
+        BROWSER_EXTENSION_INTERACTIONS.user_interacted_with_frame,
+        signer.fid,
+        signer.publicKey
+      )
+    })
+  }, [signer])
+
   useEffect(() => {
     const iframe = iframeRef.current?.contentWindow
     if (!iframe) {

apps/extension/constants/index.ts

@@ -6,3 +6,5 @@ export const framesProxyUrl =
   process.env.PLASMO_PUBLIC_FRAMES_PROXY_URL || `${baseProxyUrl}/api/v1/frames`
 export const frameEmbedProxyUrl =
   process.env.PLASMO_FRAME_EMBED_PROXY_URL || `${baseProxyUrl}/embed`
+export const eventsProxyUrl =
+  process.env.PLASMO_EVENTS_PROXY_URL || `${baseProxyUrl}/api/v1/events`

apps/extension/hooks/use-farcaster-identity.tsx

@@ -3,9 +3,11 @@ import type {
   FarcasterSignerApproved as BaseFarcasterSignerApproved,
   FarcasterSignerPendingApproval as BaseFarcasterSignerPendingApproval
 } from "@frames.js/render"
+import { BROWSER_EXTENSION_INTERACTIONS } from "ffun-trpc-types/dist/lib/interactions"
 import { useEffect, useRef, useState } from "react"
 
 import { signerProxyUrl } from "~constants"
+import { dispatchInteractionEvent } from "~services/events"
 // TODO - extract to a common lib
 import {
   convertKeypairToHex,
@@ -107,6 +109,16 @@ export function useFarcasterIdentity(
   const [signer, setSigner, { remove: removeSigner }] = useSignerStorage(null)
   const isSignedInRef = useRef(!!signer)
 
+  useEffect(() => {
+    if (signer?.status === "approved") {
+      dispatchInteractionEvent(
+        BROWSER_EXTENSION_INTERACTIONS.user_installed_extension,
+        signer.fid,
+        signer.publicKey
+      )
+    }
+  }, [signer])
+
   async function logout() {
     if (signer) {
       // this check is just to make typescript happy, this status is not used in the extension at all

apps/extension/package.json

@@ -15,9 +15,10 @@
     "@noble/ed25519": "^2.0.0",
     "@plasmohq/messaging": "^0.6.2",
     "@plasmohq/storage": "^1.9.3",
-    "@xframes/shared": "workspace:*",
     "@uidotdev/usehooks": "^2.4.1",
+    "@xframes/shared": "workspace:*",
     "cheerio": "1.0.0-rc.12",
+    "ffun-trpc-types": "file:ffun-trpc-types-0.1.0.tgz",
     "frames.js": "^0.16.5",
     "plasmo": "0.86.3",
     "posthog-js": "^1.164.1",

apps/extension/services/events.ts

@@ -0,0 +1,22 @@
+import { BROWSER_EXTENSION_INTERACTIONS } from "ffun-trpc-types/dist/lib/interactions"
+
+import { eventsProxyUrl } from "~constants"
+
+export function dispatchInteractionEvent(
+  event: BROWSER_EXTENSION_INTERACTIONS,
+  fid: number,
+  signerPublicKey: string
+) {
+  // we don't care about the result of this request
+  fetch(eventsProxyUrl, {
+    headers: {
+      "X-FID": fid.toString(),
+      "X-Signer-Public-Key": signerPublicKey,
+      "Content-Type": "application/json"
+    },
+    method: "POST",
+    body: JSON.stringify({
+      type: event
+    })
+  })
+}

apps/server/.env.sample

@@ -8,6 +8,8 @@ FARCASTER_SPONSOR_MNEMONIC=
 # FID for the sponsor account
 FARCASTER_SPONSOR_FID=
 
+FARCASTER_HUB_GRPC_URL=""
+
 # Transaction attribution
 NEXT_PUBLIC_FARCASTER_CLIENT_ID=
 
@@ -16,4 +18,10 @@ NEXT_PUBLIC_WALLETCONNECT_ID=
 
 # posthog
 NEXT_PUBLIC_POSTHOG_API_HOST=
-NEXT_PUBLIC_POSTHOG_API_KEY=
+NEXT_PUBLIC_POSTHOG_API_KEY=
+
+# trpc api key
+DEV_FRAMES_FUN_API_KEY=""
+
+# trpc url
+DEV_FRAMES_FUN_API_TRPC_URL="https://dev.frames.fun/api/trpc"

apps/server/app/api/v1/events/route.ts

@@ -0,0 +1,70 @@
+import type { NextRequest } from "next/server";
+import { z } from "zod";
+import { getSSLHubRpcClient } from "@farcaster/hub-nodejs";
+import { hexToBytes } from "viem/utils";
+import { BROWSER_EXTENSION_INTERACTIONS } from "ffun-trpc-types/dist/lib/interactions";
+import { getDevFramesFunApiClient } from "@/services/trpc";
+
+const farcasterHubClient = getSSLHubRpcClient(
+  process.env.FARCASTER_HUB_GRPC_URL
+);
+
+const bodyValidator = z.object({
+  type: z.nativeEnum(BROWSER_EXTENSION_INTERACTIONS),
+});
+
+const headersValidator = z.object({
+  fid: z.coerce.number().int().positive(),
+  signerPublicKey: z.custom<`0x${string}`>(
+    (val) => z.string().startsWith("0x").safeParse(val).success
+  ),
+});
+
+export async function GET() {
+  return new Response(undefined, { status: 204 });
+}
+
+export async function POST(req: NextRequest) {
+  try {
+    const { signerPublicKey, fid } = headersValidator.parse({
+      fid: req.headers.get("x-fid"),
+      signerPublicKey: req.headers.get("x-signer-public-key"),
+    });
+
+    // validate that signerPublicKey is a valid public key
+    const signerOnChain = await farcasterHubClient.getOnChainSigner({
+      fid,
+      signer: hexToBytes(signerPublicKey),
+    });
+
+    if (signerOnChain.isErr()) {
+      return new Response("Unauthenticated", { status: 401 });
+    }
+
+    const body = await req.json();
+    const event = bodyValidator.parse(body);
+
+    const devFrameFunClient = getDevFramesFunApiClient();
+
+    await devFrameFunClient.interaction.recordInteraction.mutate({
+      type: event.type,
+      userFid: fid,
+    });
+
+    return new Response(undefined, {
+      status: 204,
+      headers: {
+        "Cache-Control": "no-cache",
+      },
+    });
+  } catch (e) {
+    console.error(e);
+    if (e instanceof z.ZodError) {
+      return new Response("Invalid event", { status: 400 });
+    }
+
+    console.error(e);
+
+    return new Response("Internal Server Error", { status: 500 });
+  }
+}

apps/server/components/frame-render.tsx

@@ -78,6 +78,12 @@ function FrameComponent({
   };
 
   const trackButtonPress: OnButtonPressFn = ({ button, index, url }) => {
+    sendMessageToExtension({
+      type: "frame_button_press",
+      buttonIndex: index,
+      frameUrl: url,
+    });
+
     posthog.capture("frame_button_press", {
       label: button.label,
       action: button.action,

apps/server/env.d.ts

@@ -7,7 +7,11 @@ declare global {
       FARCASTER_DEVELOPER_MNEMONIC?: string;
       FARCASTER_DEVELOPER_FID?: string;
       FARCASTER_SPONSOR_MNEMONIC?: string;
+      FARCASTER_HUB_GRPC_URL: string;
       FARCASTER_SPONSOR_FID?: string;
+      DEV_FRAMES_FUN_API_KEY: string;
+      DEV_FRAMES_FUN_API_TRPC_URL: string;
+      NEXT_PUBLIC_FARCASTER_CLIENT_ID?: string;
     }
   }
 }

apps/server/next.config.mjs

@@ -1,3 +1,35 @@
+import { z } from "zod";
+
+const envVariablesValidator = z
+  .object({
+    DEV_FRAMES_FUN_API_KEY: z.string().min(1),
+    DEV_FRAMES_FUN_API_TRPC_URL: z.string().min(1).url(),
+    FARCASTER_DEVELOPER_FID: z.string().optional(),
+    FARCASTER_DEVELOPER_MNEMONIC: z.string().optional(),
+    FARCASTER_SPONSOR_FID: z.string().optional(),
+    FARCASTER_SPONSOR_MNEMONIC: z.string().optional(),
+    FARCASTER_HUB_GRPC_URL: z.string(),
+    NEXT_PUBLIC_POSTHOG_API_HOST: z.string().url().optional(),
+    NEXT_PUBLIC_POSTHOG_API_KEY: z.string().optional(),
+    NEXT_PUBLIC_WALLETCONNECT_ID: z.string().optional(),
+    NEXT_PUBLIC_FARCASTER_CLIENT_ID: z.coerce.number().int().optional(),
+  })
+  .passthrough();
+
+const envVariablesValidationResult = envVariablesValidator.safeParse(
+  process.env
+);
+
+if (envVariablesValidationResult.success === false) {
+  for (const issue of envVariablesValidationResult.error.issues) {
+    console.error(
+      `Environment variable ${issue.path.join(".")} error: ${issue.message}`
+    );
+  }
+
+  process.exit(1);
+}
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   async headers() {
@@ -14,7 +46,7 @@ const nextConfig = {
           {
             key: "Access-Control-Allow-Headers",
             value:
-              "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version",
+              "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version, X-Signer-Public-Key, X-FID",
           },
         ],
       },

apps/server/package.json

@@ -9,21 +9,27 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@farcaster/hub-nodejs": "^0.12.7",
     "@frames.js/render": "^0.2.16",
     "@noble/ed25519": "^2.0.0",
     "@rainbow-me/rainbowkit": "^2.1.0",
     "@reservoir0x/reservoir-sdk": "^2.2.3",
     "@tanstack/react-query": "^5.37.1",
+    "@trpc/client": "11.0.0-rc.638",
+    "@trpc/server": "11.0.0-rc.638",
     "@uidotdev/usehooks": "^2.4.1",
-    "@xframes/ui": "workspace:*",
     "@xframes/shared": "workspace:*",
+    "@xframes/ui": "workspace:*",
+    "ffun-trpc-types": "file:ffun-trpc-types-0.1.0.tgz",
     "frames.js": "^0.16.5",
     "next": "14.1.4",
     "posthog-js": "^1.144.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "superjson": "^2.2.1",
     "viem": "^2.9.15",
-    "wagmi": "^2.9.4"
+    "wagmi": "^2.9.4",
+    "zod": "^3.23.8"
   },
   "devDependencies": {
     "@frames.js/debugger": "^0.2.3",

apps/server/services/trpc.ts

@@ -0,0 +1,24 @@
+import { createTRPCClient, httpBatchLink } from "@trpc/client";
+import type { APIRouter } from "ffun-trpc-types/dist/server/api/root";
+import superjson from "superjson";
+
+export function getDevFramesFunApiClient(authToken?: string) {
+  const client = createTRPCClient<APIRouter>({
+    links: [
+      httpBatchLink({
+        url: process.env.DEV_FRAMES_FUN_API_TRPC_URL,
+        transformer: superjson,
+        async headers() {
+          return {
+            ...(authToken && {
+              authorization: authToken,
+            }),
+            "x-api-key": process.env.DEV_FRAMES_FUN_API_KEY,
+          };
+        },
+      }),
+    ],
+  });
+
+  return client;
+}

packages/shared/package.json

@@ -10,7 +10,7 @@
   "scripts": {
     "build": "tsc",
     "dev": "tsc --watch",
-    "lint": "eslint . --max-warnings 0"
+    "lint": "eslint ."
   },
   "devDependencies": {
     "@xframes/eslint-config": "workspace:*",

packages/shared/src/types.ts

@@ -36,10 +36,17 @@ type MessageToServerSignerlessPress = {
   frameId: string;
 };
 
+type MessageToServerFrameButtonPressed = {
+  type: "frame_button_press";
+  frameUrl: string;
+  buttonIndex: number;
+};
+
 export type MessagesToExtension =
   | MessageToServerFrameRendered
   | MessageToServerSignerSignOut
-  | MessageToServerSignerlessPress;
+  | MessageToServerSignerlessPress
+  | MessageToServerFrameButtonPressed;
 
 type MessageFromServerSignerSignedIn = {
   type: "signed_in";