add view token embed

src/app/frames/token/[chainId]/[address]/opengraph-image.tsx

@@ -0,0 +1,35 @@
+import { ImageResponse } from "next/og";
+
+export const runtime = "edge";
+
+export const alt = "Hello Frame";
+export const size = {
+  width: 600,
+  height: 400,
+};
+
+export const contentType = "image/png";
+
+interface Props {
+  params: Promise<{
+    chainId: string;
+    address: string;
+  }>;
+}
+
+export default async function Image({ params }: Props) {
+  const { chainId, address } = await params;
+  const token = `eip155:${chainId}/erc20:${address}`;
+
+  return new ImageResponse(
+    (
+      <div tw="h-full w-full flex flex-col justify-center items-center relative bg-white">
+        <h1 tw="text-6xl">View Token</h1>
+        <p>{token}</p>
+      </div>
+    ),
+    {
+      ...size,
+    }
+  );
+}

src/app/frames/token/[chainId]/[address]/page.tsx

@@ -0,0 +1,46 @@
+import { Metadata } from "next";
+
+const appUrl = process.env.NEXT_PUBLIC_URL;
+
+interface Props {
+  params: Promise<{
+    chainId: string;
+    address: string;
+  }>;
+}
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { chainId, address } = await params;
+  const token = `eip155:${chainId}/erc20:${address}`;
+
+  const frame = {
+    version: "next",
+    imageUrl: `${appUrl}/frames/token/${chainId}/${address}/opengraph-image`,
+    button: {
+      title: "View Token",
+      action: {
+        type: "view_token",
+        token,
+      },
+    },
+  };
+
+  return {
+    title: "View Token",
+    description: token,
+    openGraph: {
+      title: "View Token",
+      description: token,
+    },
+    other: {
+      "fc:frame": JSON.stringify(frame),
+    },
+  };
+}
+
+export default async function HelloNameFrame({ params }: Props) {
+  const { chainId, address } = await params;
+  const token = `eip155:${chainId}/erc20:${address}`;
+
+  return <h1>View token: {token}</h1>;
+}