feat(market): add metadata (#208)

ArkProjectNFTs · Nov 20, 2024 · 8e8a04f · 8e8a04f
1 parent 3963b2b
commit 8e8a04f
Show file tree

Hide file tree

Showing 4 changed files with 139 additions and 70 deletions.
diff --git a/apps/arkmarket/src/app/collection/[collectionAddress]/activity/page.tsx b/apps/arkmarket/src/app/collection/[collectionAddress]/activity/page.tsx
@@ -1,11 +1,36 @@
+import type { Metadata } from "next";
 import { notFound } from "next/navigation";
 
+import { env } from "~/env";
 import getCollection from "~/lib/getCollection";
 import CollectionActivity from "../components/collection-activity";
 import CollectionBanner from "../components/collection-banner";
 import CollectionHeader from "../components/collection-header";
 import MobileCollectionHeader from "../components/mobile-collection-header";
 
+interface GenerateMetadataProps {
+  params: Promise<{ collectionAddress: string }>;
+}
+
+export async function generateMetadata({
+  params,
+}: GenerateMetadataProps): Promise<Metadata> {
+  const collectionAddress = (await params).collectionAddress;
+  const collection = await getCollection({ collectionAddress });
+  const platform =
+    env.NEXT_PUBLIC_THEME === "unframed" ? "Unframed" : "Ark Market";
+  const name = collection?.name ?? "Collection";
+
+  return {
+    title: `${name} | ${platform}`,
+    openGraph: {
+      images: [
+        `https://ark-market-unframed.vercel.app/api/og/collection?collection_address=${collectionAddress}`,
+      ],
+    },
+  };
+}
+
 interface CollectionPageProps {
   params: {
     collectionAddress: string;

diff --git a/apps/arkmarket/src/app/collection/[collectionAddress]/page.tsx b/apps/arkmarket/src/app/collection/[collectionAddress]/page.tsx
@@ -1,11 +1,36 @@
+import type { Metadata } from "next";
 import { notFound } from "next/navigation";
 
+import { env } from "~/env";
 import getCollection from "~/lib/getCollection";
 import CollectionBanner from "./components/collection-banner";
 import CollectionHeader from "./components/collection-header";
 import CollectionItems from "./components/collection-items";
 import MobileCollectionHeader from "./components/mobile-collection-header";
 
+interface GenerateMetadataProps {
+  params: Promise<{ collectionAddress: string }>;
+}
+
+export async function generateMetadata({
+  params,
+}: GenerateMetadataProps): Promise<Metadata> {
+  const collectionAddress = (await params).collectionAddress;
+  const collection = await getCollection({ collectionAddress });
+  const platform =
+    env.NEXT_PUBLIC_THEME === "unframed" ? "Unframed" : "Ark Market";
+  const name = collection?.name ?? "Collection";
+
+  return {
+    title: `${name} | ${platform}`,
+    openGraph: {
+      images: [
+        `https://ark-market-unframed.vercel.app/api/og/collection?collection_address=${collectionAddress}`,
+      ],
+    },
+  };
+}
+
 interface CollectionPageProps {
   params: {
     collectionAddress: string;
@@ -21,32 +46,23 @@ export default async function CollectionPage({ params }: CollectionPageProps) {
   }
 
   return (
-    <>
-      <head>
-        <meta
-          property="og:image"
-          content={`https://ark-market-unframed.vercel.app/api/og/collection?collection_address=${collectionAddress}`}
-        />
-      </head>
-
-      <div className="flex min-h-[calc(100vh-var(--site-header-height))] flex-col">
-        <CollectionBanner
-          className="hidden md:block"
-          collectionAddress={collectionAddress}
-        />
-        <CollectionHeader
-          collectionAddress={collectionAddress}
-          collection={collection}
-        />
-        <MobileCollectionHeader
-          collectionAddress={collectionAddress}
-          collection={collection}
-        />
-        <CollectionItems
-          collectionAddress={collectionAddress}
-          collectionTokenCount={collection.token_count}
-        />
-      </div>
-    </>
+    <div className="flex min-h-[calc(100vh-var(--site-header-height))] flex-col">
+      <CollectionBanner
+        className="hidden md:block"
+        collectionAddress={collectionAddress}
+      />
+      <CollectionHeader
+        collectionAddress={collectionAddress}
+        collection={collection}
+      />
+      <MobileCollectionHeader
+        collectionAddress={collectionAddress}
+        collection={collection}
+      />
+      <CollectionItems
+        collectionAddress={collectionAddress}
+        collectionTokenCount={collection.token_count}
+      />
+    </div>
   );
 }
diff --git a/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/page.tsx b/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/page.tsx
@@ -1,8 +1,10 @@
 "use server";
 
+import type { Metadata } from "next";
 import { notFound } from "next/navigation";
 
 import type { Token, TokenMarketData } from "~/types";
+import { env } from "~/env";
 import getToken from "~/lib/getToken";
 import getTokenMarketData from "~/lib/getTokenMarketData";
 import TokenAbout from "./components/token-about";
@@ -13,6 +15,30 @@ import TokenStats from "./components/token-stats";
 import TokenSummary from "./components/token-summary";
 import TokenTraits from "./components/token-traits";
 
+interface GenerateMetadataProps {
+  params: { contractAddress: string; tokenId: string };
+}
+
+export async function generateMetadata({
+  params,
+}: GenerateMetadataProps): Promise<Metadata> {
+  const { contractAddress, tokenId } = params;
+  const token = await getToken({ contractAddress, tokenId });
+  const platform =
+    env.NEXT_PUBLIC_THEME === "unframed" ? "Unframed" : "Ark Market";
+  const name =
+    token.metadata?.name ?? `${token.collection_name} #${token.token_id}`;
+
+  return {
+    title: `${name} | ${platform}`,
+    openGraph: {
+      images: [
+        `https://ark-market-unframed.vercel.app/api/og/token?collection_address=${contractAddress}&token_id=${tokenId}`,
+      ],
+    },
+  };
+}
+
 interface TokenPageProps {
   params: {
     contractAddress: string;
@@ -46,56 +72,48 @@ export default async function TokenPage({
   }
 
   return (
-    <>
-      <head>
-        <meta
-          property="og:image"
-          content={`https://ark-market-unframed.vercel.app/api/og/token?collection_address=${contractAddress}&token_id=${tokenId}`}
+    <main className="mx-auto max-w-[120rem] p-5 pt-0 lg:p-8">
+      <div className="grid grid-cols-1 gap-5 lg:grid-cols-[minmax(0,1fr)_minmax(0,2fr)] lg:gap-8">
+        <TokenSummary
+          className="top-[calc(var(--site-header-height)+2rem)] h-fit lg:sticky"
+          token={token}
         />
-      </head>
-      <main className="mx-auto max-w-[120rem] p-5 pt-0 lg:p-8">
-        <div className="grid grid-cols-1 gap-5 lg:grid-cols-[minmax(0,1fr)_minmax(0,2fr)] lg:gap-8">
-          <TokenSummary
-            className="top-[calc(var(--site-header-height)+2rem)] h-fit lg:sticky"
-            token={token}
-          />
-          <div className="flex flex-col lg:gap-8">
-            <div className="flex flex-col-reverse gap-5 lg:flex-col lg:gap-8">
-              <TokenStats
-                token={token}
-                tokenMarketData={tokenMarketData}
-                className="mb-5 lg:mb-0"
-              />
-              <TokenActions
-                token={token}
-                tokenMarketData={tokenMarketData}
-                className="-mx-5 lg:mx-0"
-              />
-            </div>
-            <TokenOffers
+        <div className="flex flex-col lg:gap-8">
+          <div className="flex flex-col-reverse gap-5 lg:flex-col lg:gap-8">
+            <TokenStats
               token={token}
               tokenMarketData={tokenMarketData}
-              className="-mx-5 lg:mx-0"
-            />
-            <TokenTraits
-              className="-mx-5 lg:mx-0"
-              contractAddress={contractAddress}
-              tokenAttributes={token.metadata?.attributes ?? []}
+              className="mb-5 lg:mb-0"
             />
-            <TokenAbout
-              className="-mx-5 lg:mx-0"
-              contractAddress={contractAddress}
+            <TokenActions
               token={token}
-              tokenId={tokenId}
+              tokenMarketData={tokenMarketData}
+              className="-mx-5 lg:mx-0"
             />
           </div>
+          <TokenOffers
+            token={token}
+            tokenMarketData={tokenMarketData}
+            className="-mx-5 lg:mx-0"
+          />
+          <TokenTraits
+            className="-mx-5 lg:mx-0"
+            contractAddress={contractAddress}
+            tokenAttributes={token.metadata?.attributes ?? []}
+          />
+          <TokenAbout
+            className="-mx-5 lg:mx-0"
+            contractAddress={contractAddress}
+            token={token}
+            tokenId={tokenId}
+          />
         </div>
-        <TokenActivity
-          className="mt-6 lg:mt-20"
-          contractAddress={contractAddress}
-          tokenId={tokenId}
-        />
-      </main>
-    </>
+      </div>
+      <TokenActivity
+        className="mt-6 lg:mt-20"
+        contractAddress={contractAddress}
+        tokenId={tokenId}
+      />
+    </main>
   );
 }
diff --git a/apps/arkmarket/src/app/wallet/[walletAddress]/page.tsx b/apps/arkmarket/src/app/wallet/[walletAddress]/page.tsx
@@ -1,5 +1,15 @@
+import type { Metadata } from "next";
+
+import { env } from "~/env";
 import Portfolio from "./components/portfolio";
 
+const platform =
+  env.NEXT_PUBLIC_THEME === "unframed" ? "Unframed" : "Ark Market";
+
+export const metadata: Metadata = {
+  title: `Porfolio | ${platform}`,
+};
+
 interface WalletPageProps {
   params: {
     walletAddress: string;