initialize frog.fm migration

package.json

@@ -44,6 +44,7 @@
  },
  "packageManager": "[email protected]",
  "dependencies": {
- "permissionless": "^0.1.44"
+ "permissionless": "^0.1.44",
+ "recharts": "^2.12.7"
  }
 }

packages/nextjs/app/api/frog/[...routes]/route.tsx

@@ -0,0 +1,115 @@
+/** @jsxImportSource frog/jsx */
+import { Button, Frog, TextInput, parseEther } from "frog";
+import { FrameData } from "frog/_lib/types/frame";
+import { devtools } from "frog/dev";
+import { handle } from "frog/next";
+import { serveStatic } from "frog/serve-static";
+import { ABI } from "~~/constants";
+import Analytics from "~~/model/analytics";
+import { getFrameAtServer } from "~~/services/frames";
+import { Frame } from "~~/types/commontypes";
+import { makeFrogFrame } from "~~/utils/general";
+
+const app = new Frog({
+ basePath: "/api/frog",
+ title: "Frog Frame",
+});
+
+const storeAnalytics = async (frameData: FrameData, journeyId: string, frameId: string, type: string) => {
+ const analyticsEntry = new Analytics({
+ journeyId: journeyId || "",
+ frameId: frameId || "",
+ fid: frameData.fid,
+ buttonClicked: frameData.buttonIndex || 0,
+ inputtedText: frameData.inputText || "",
+ timestamp: frameData.timestamp,
+ typeOfFrame: type || "",
+ state: frameData.state || "",
+ });
+ await analyticsEntry.save();
+};
+
+app.frame(`/:journeyId/:frameId`, async c => {
+ const match = c.req.path.match(/^\/api\/frog\/([a-zA-Z0-9]+)\/([a-zA-Z0-9]+)$/);
+
+ if (!match || match.length < 3) {
+ throw new Error("Invalid journey or frame ID");
+ }
+ const [, journeyId, frameId] = match;
+ if (c.req.method === "POST") {
+ storeAnalytics(c.frameData as FrameData, journeyId, frameId, "submit-frame");
+ }
+ // await storeAnalytics(c.frameData as FrameData, journeyId, frameId[1], "render-frame");
+ const data: Frame = await getFrameAtServer(frameId);
+ const frame = makeFrogFrame(data.frameJson);
+ const intents = frame.intents.map((intent: any) => {
+ const props = intent.props || {};
+ switch (true) {
+ case intent.type === "Button":
+ return (
+ <Button value={props.value} action={props.action}>
+ {intent.content}
+ </Button>
+ );
+ case intent.type === "Button.Link":
+ return <Button.Link href={props.href}>{intent.content}</Button.Link>;
+ case intent.type === "Button.Mint":
+ return <Button.Mint target={props.target}>{intent.content}</Button.Mint>;
+ case intent.type === "Button.Redirect":
+ return <Button.Redirect location={props.location}>{intent.content}</Button.Redirect>;
+ case intent.type === "Button.Reset":
+ return <Button.Reset>{intent.content}</Button.Reset>;
+ case intent.type === "Button.Transaction":
+ return <Button.Transaction target={props.target}>{intent.content}</Button.Transaction>;
+ case intent.type.includes("TextInput"):
+ return <TextInput placeholder={props.placeholder} />;
+ default:
+ return null;
+ }
+ });
+ const image =
+ frame.image.type === "src" ? frame.image.src : <div style={frame.image.style}>{frame.image.content}</div>;
+ return c.res({
+ image: image as string,
+ intents,
+ });
+});
+
+app.transaction("/:journeyId/:frameId/send-ether", async c => {
+ const match = c.req.path.match(/\/([a-zA-Z0-9]+)\/([a-zA-Z0-9]+)/);
+
+ if (!match || match.length < 3) {
+ throw new Error("Invalid journey or frame ID");
+ }
+ const [, journeyId, frameId] = match;
+
+ storeAnalytics(c.frameData as FrameData, journeyId, frameId, "send-ether");
+ return c.send({
+ chainId: "eip155:10",
+ to: "0xd2135CfB216b74109775236E36d4b433F1DF507B",
+ value: parseEther("1"),
+ });
+});
+
+app.transaction("/:journeyId/:frameId/send-contract", c => {
+ const match = c.req.path.match(/\/([a-zA-Z0-9]+)\/([a-zA-Z0-9]+)/);
+
+ if (!match || match.length < 3) {
+ throw new Error("Invalid journey or frame ID");
+ }
+ const [, journeyId, frameId] = match;
+
+ storeAnalytics(c.frameData as FrameData, journeyId, frameId, "contract-transaction");
+
+ return c.contract({
+ chainId: "eip155:10",
+ abi: ABI,
+ functionName: "transfer",
+ args: [],
+ to: "0xd2135CfB216b74109775236E36d4b433F1DF507B",
+ });
+});
+
+devtools(app, { serveStatic });
+export const GET = handle(app);
+export const POST = handle(app);

packages/nextjs/app/api/journey/route.ts

@@ -5,7 +5,6 @@ import connectDB from "~~/services/connectDB";
 export async function GET() {
  await connectDB();
  const journeys = await Journey.find();
- console.log(journeys);
  return new NextResponse(JSON.stringify(journeys));
 }
 

packages/nextjs/app/api/transactions/[id]/route.ts

@@ -0,0 +1,36 @@
+import { NextRequest, NextResponse } from "next/server";
+import Transaction from "~~/model/transaction";
+import connectDB from "~~/services/connectDB";
+
+// all of this is based on frame_id
+
+export async function GET(req: NextRequest, { params }: { params: { id: string } }) {
+ await connectDB();
+ const frame_id = params.id;
+ const transaction = await Transaction.findOne({ frameId: frame_id });
+ if (!transaction) {
+ return new NextResponse(JSON.stringify({ message: "transaction not found" }), { status: 404 });
+ }
+ return new NextResponse(JSON.stringify(transaction));
+}
+
+export async function PUT(req: NextRequest, { params }: { params: { id: string } }) {
+ await connectDB();
+ const frame_id = params.id;
+ const payload = await req.json();
+ const transaction = await Transaction.updateOne({ frameId: frame_id }, payload, { new: true });
+ if (!transaction) {
+ return new NextResponse(JSON.stringify({ message: "transaction not found" }), { status: 404 });
+ }
+ return new NextResponse(JSON.stringify(transaction));
+}
+
+export async function DELETE(req: NextRequest, { params }: { params: { id: string } }) {
+ await connectDB();
+ const frame_id = params.id;
+ const transaction = await Transaction.deleteOne({ frameId: frame_id });
+ if (!transaction) {
+ return new NextResponse(JSON.stringify({ message: "transaction not found" }), { status: 404 });
+ }
+ return new NextResponse(JSON.stringify(transaction));
+}

packages/nextjs/app/api/transactions/route.ts

@@ -0,0 +1,17 @@
+import { NextRequest, NextResponse } from "next/server";
+import Transaction from "~~/model/transaction";
+import connectDB from "~~/services/connectDB";
+
+export async function GET() {
+ await connectDB();
+ const transaction = await Transaction.find();
+ return new NextResponse(JSON.stringify(transaction));
+}
+
+export async function POST(req: NextRequest) {
+ await connectDB();
+ const payload = await req.json();
+ const transaction = new Transaction(payload);
+ await transaction.save();
+ return new NextResponse(JSON.stringify(transaction));
+}

packages/nextjs/app/frame/[journeyId]/[frameId]/page.tsx

@@ -0,0 +1,32 @@
+import { getFrameMetadata } from "frog/next";
+import { Metadata } from "next";
+import { APP_URL } from "~~/constants";
+
+type Props = {
+ params: { frameId: string; journeyId: string };
+ searchParams: { [key: string]: string | string[] | undefined };
+};
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+ const frameid = params.frameId;
+ const journeyId = params.journeyId;
+ console.log("frameId", frameid);
+ console.log("journeyId", journeyId);
+ try {
+ const frameMetadata = await getFrameMetadata(`${APP_URL}/api/frog/${journeyId}/${frameid}`);
+ return {
+ title: "EZ Frames",
+ description: "Check this on warpcast",
+ other: frameMetadata,
+ };
+ } catch (error: any) {
+ throw new Error(error.message);
+ }
+}
+export default function Page() {
+ return (
+ <>
+ <h1>Frames Check this on warpcast</h1>
+ </>
+ );
+}

packages/nextjs/components/Button/CustomButton.tsx

@@ -0,0 +1,62 @@
+import React from "react";
+import { Button as MuiButton } from "@mui/material";
+
+interface Props {
+ buttonType: "success" | "delete" | "config" | "frame";
+ variant: "contained" | "outlined" | "text";
+ children: React.ReactNode;
+}
+
+const style = (buttonType: string) => {
+ switch (buttonType) {
+ case "success":
+ return {
+ backgroundColor: "#4caf50",
+ color: "white",
+ "&:hover": {
+ backgroundColor: "#388e3c",
+ },
+ };
+ case "delete":
+ return {
+ backgroundColor: "#f44336",
+ color: "white",
+ "&:hover": {
+ backgroundColor: "#d32f2f",
+ },
+ };
+ case "config":
+ return {
+ backgroundColor: "#2196f3",
+ color: "white",
+ "&:hover": {
+ backgroundColor: "#1976d2",
+ },
+ };
+ case "frame":
+ return {
+ backgroundColor: "#ff9800",
+ color: "white",
+ "&:hover": {
+ backgroundColor: "#f57c00",
+ },
+ };
+ default:
+ return {};
+ }
+};
+const CustomButton: React.FC<Props> = ({ buttonType, children, variant, ...muiButtonProps }) => {
+ return (
+ <MuiButton
+ variant={variant}
+ sx={style(buttonType)}
+ {...muiButtonProps}
+ style={{ textTransform: "none" }}
+ size="small"
+ >
+ {children}
+ </MuiButton>
+ );
+};
+
+export default CustomButton;