From 8e8a04fd7f00e8637525c68be4a32ee64f04df20 Mon Sep 17 00:00:00 2001 From: Paul Launay Date: Wed, 20 Nov 2024 18:20:12 +0100 Subject: [PATCH] feat(market): add metadata (#208) --- .../[collectionAddress]/activity/page.tsx | 25 +++++ .../collection/[collectionAddress]/page.tsx | 70 +++++++----- .../[contractAddress]/[tokenId]/page.tsx | 104 ++++++++++-------- .../src/app/wallet/[walletAddress]/page.tsx | 10 ++ 4 files changed, 139 insertions(+), 70 deletions(-) diff --git a/apps/arkmarket/src/app/collection/[collectionAddress]/activity/page.tsx b/apps/arkmarket/src/app/collection/[collectionAddress]/activity/page.tsx index 5ff9fd44..09286d51 100644 --- 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 { + 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 index 308a017c..026fc681 100644 --- 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 { + 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 ( - <> - - - - -
- - - - -
- +
+ + + + +
); } diff --git a/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/page.tsx b/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/page.tsx index 43d2630b..7610fb98 100644 --- 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 { + 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 ( - <> - - +
+ - -
-
- -
-
- - -
- +
+ - -
+ + +
- -
- +
+ + ); } diff --git a/apps/arkmarket/src/app/wallet/[walletAddress]/page.tsx b/apps/arkmarket/src/app/wallet/[walletAddress]/page.tsx index c5875800..a75b225b 100644 --- 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;