From 9c736ec546cd83c0940609d88a1ab8148af3f41a Mon Sep 17 00:00:00 2001
From: horsefacts <webmaster@terminally.online>
Date: Thu, 13 Feb 2025 14:28:01 -0500
Subject: [PATCH] add view token embed

---
 .../[chainId]/[address]/opengraph-image.tsx   | 35 ++++++++++++++
 .../frames/token/[chainId]/[address]/page.tsx | 46 +++++++++++++++++++
 2 files changed, 81 insertions(+)
 create mode 100644 src/app/frames/token/[chainId]/[address]/opengraph-image.tsx
 create mode 100644 src/app/frames/token/[chainId]/[address]/page.tsx

diff --git a/src/app/frames/token/[chainId]/[address]/opengraph-image.tsx b/src/app/frames/token/[chainId]/[address]/opengraph-image.tsx
new file mode 100644
index 0000000..019c4dd
--- /dev/null
+++ b/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,
+    }
+  );
+}
diff --git a/src/app/frames/token/[chainId]/[address]/page.tsx b/src/app/frames/token/[chainId]/[address]/page.tsx
new file mode 100644
index 0000000..d92ba84
--- /dev/null
+++ b/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>;
+}