Merge pull request #248 from framesjs/feat/custom-middleware-example

feat: custom middleware example

Author: stephancill

.changeset/yellow-zoos-promise.md

@@ -0,0 +1,5 @@
+---
+"framesjs-starter": patch
+---
+
+feat: custom middleware example

examples/framesjs-starter/app/examples/new-api-custom-middleware/frames/frames.ts

@@ -0,0 +1,27 @@
+import { createFrames, types } from "frames.js/next";
+
+const priceMiddleware: types.FramesMiddleware<
+  any,
+  { ethPrice?: number }
+> = async (ctx, next) => {
+  try {
+    const res = await fetch(
+      "https://api.coingecko.com/api/v3/simple/price?ids=ethereum&vs_currencies=usd"
+    );
+    const {
+      ethereum: { usd: ethPrice },
+    } = await res.json();
+    return next({ ethPrice });
+  } catch (error) {
+    console.error("Error fetching ETH price:", error);
+  }
+  return next();
+};
+
+export const frames = createFrames({
+  basePath: "/",
+  initialState: {
+    pageIndex: 0,
+  },
+  middleware: [priceMiddleware],
+});

examples/framesjs-starter/app/examples/new-api-custom-middleware/frames/route.tsx

@@ -0,0 +1,13 @@
+/* eslint-disable react/jsx-key */
+import { Button } from "frames.js/next";
+import { frames } from "./frames";
+
+const handler = frames(async (ctx) => {
+  return {
+    image: <div tw="flex">ETH price: ${ctx.ethPrice}</div>,
+    buttons: [<Button action="post">Refresh</Button>],
+  };
+});
+
+export const GET = handler;
+export const POST = handler;

examples/framesjs-starter/app/examples/new-api-custom-middleware/page.tsx

@@ -0,0 +1,33 @@
+import Link from "next/link";
+import { currentURL, vercelURL } from "../../utils";
+import { createDebugUrl } from "../../debug";
+import type { Metadata } from "next";
+import { fetchMetadata } from "frames.js/next";
+
+export async function generateMetadata(): Promise<Metadata> {
+  return {
+    title: "New api example",
+    description: "This is a new api example",
+    other: {
+      ...(await fetchMetadata(
+        new URL(
+          "/examples/new-api-custom-middleware/frames",
+          vercelURL() || "http://localhost:3000"
+        )
+      )),
+    },
+  };
+}
+
+export default async function Home() {
+  const url = currentURL("/examples/new-api-cache-control");
+
+  return (
+    <div>
+      Custom middleware example{" "}
+      <Link href={createDebugUrl(url)} className="underline">
+        Debug
+      </Link>
+    </div>
+  );
+}