[TOOL-4802] NFT Asset Page

Author: MananTank

apps/dashboard/src/@/components/Responsive.tsx

@@ -0,0 +1,25 @@
+"use client";
+import { Suspense } from "react";
+import { ClientOnly } from "../../components/ClientOnly/ClientOnly";
+import { useIsMobile } from "../hooks/use-mobile";
+
+export function ResponsiveLayout(props: {
+  desktop: React.ReactNode;
+  mobile: React.ReactNode;
+  fallback: React.ReactNode;
+  debugMode?: boolean;
+}) {
+  const isMobile = useIsMobile();
+
+  if (props.debugMode) {
+    return props.fallback;
+  }
+
+  return (
+    <Suspense fallback={props.fallback}>
+      <ClientOnly ssr={props.fallback}>
+        {isMobile ? props.mobile : props.desktop}
+      </ClientOnly>
+    </Suspense>
+  );
+}

apps/dashboard/src/@/components/blocks/wallet-address.tsx

@@ -24,6 +24,7 @@ export function WalletAddress(props: {
   className?: string;
   iconClassName?: string;
   client: ThirdwebClient;
+  preventOpenOnFocus?: boolean;
 }) {
   // default back to zero address if no address provided
   const address = useMemo(() => props.address || ZERO_ADDRESS, [props.address]);
@@ -64,7 +65,10 @@ export function WalletAddress(props: {
 
   return (
     <HoverCard>
-      <HoverCardTrigger asChild>
+      <HoverCardTrigger
+        asChild
+        tabIndex={props.preventOpenOnFocus ? -1 : undefined}
+      >
         <Button
           onClick={(e) => e.stopPropagation()}
           variant="link"

apps/dashboard/src/@/components/pagination-buttons.tsx

@@ -19,6 +19,7 @@ export const PaginationButtons = (props: {
   activePage: number;
   totalPages: number;
   onPageClick: (page: number) => void;
+  className?: string;
 }) => {
   const { activePage, totalPages, onPageClick: setPage } = props;
   const [inputHasError, setInputHasError] = useState(false);
@@ -40,11 +41,37 @@ export const PaginationButtons = (props: {
     }
   }
 
+  // if only two pages, show "prev" and "next"
+  if (totalPages === 2) {
+    return (
+      <Pagination className={props.className}>
+        <PaginationContent>
+          <PaginationItem>
+            <PaginationPrevious
+              disabled={activePage === 1}
+              onClick={() => {
+                setPage(activePage - 1);
+              }}
+            />
+          </PaginationItem>
+          <PaginationItem>
+            <PaginationNext
+              disabled={activePage === totalPages}
+              onClick={() => {
+                setPage(activePage + 1);
+              }}
+            />
+          </PaginationItem>
+        </PaginationContent>
+      </Pagination>
+    );
+  }
+
   // just render all the page buttons directly
   if (totalPages <= 6) {
     const pages = [...Array(totalPages)].map((_, i) => i + 1);
     return (
-      <Pagination>
+      <Pagination className={props.className}>
         <PaginationContent>
           {pages.map((page) => (
             <PaginationItem key={page}>
@@ -64,7 +91,7 @@ export const PaginationButtons = (props: {
   }
 
   return (
-    <Pagination>
+    <Pagination className={props.className}>
       <PaginationContent>
         <PaginationItem>
           <PaginationPrevious

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_utils/newPublicPage.ts

@@ -1,8 +1,10 @@
 import { resolveFunctionSelectors } from "lib/selectors";
 import type { ThirdwebContract } from "thirdweb";
-import { isERC20 } from "thirdweb/extensions/erc20";
+import * as ERC721Ext from "thirdweb/extensions/erc721";
+import * as ERC1155Ext from "thirdweb/extensions/erc1155";
+import { supportedERCs } from "./detectedFeatures/supportedERCs";
 
-export type NewPublicPageType = "erc20";
+export type NewPublicPageType = "erc20" | "erc1155" | "erc721";
 
 export async function shouldRenderNewPublicPage(
   contract: ThirdwebContract,
@@ -16,9 +18,29 @@ export async function shouldRenderNewPublicPage(
       return false;
     }
 
-    const isERC20Contract = isERC20(functionSelectors);
+    const _supportedERCs = supportedERCs(functionSelectors);
 
-    if (isERC20Contract) {
+    // Edition Drop
+    if (
+      _supportedERCs.isERC1155 &&
+      ERC1155Ext.isGetNFTsSupported(functionSelectors)
+    ) {
+      return {
+        type: "erc1155",
+      };
+    }
+
+    // NFT Drop
+    if (
+      _supportedERCs.isERC721 &&
+      ERC721Ext.isGetNFTsSupported(functionSelectors)
+    ) {
+      return {
+        type: "erc721",
+      };
+    }
+
+    if (_supportedERCs.isERC20) {
       return {
         type: "erc20",
       };

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/shared-nfts-token-page.tsx

@@ -5,6 +5,8 @@ import { redirectToContractLandingPage } from "../../../../../../team/[team_slug
 import { buildContractPagePath } from "../../_utils/contract-page-path";
 import { getContractPageParamsInfo } from "../../_utils/getContractFromParams";
 import { getContractPageMetadata } from "../../_utils/getContractPageMetadata";
+import { shouldRenderNewPublicPage } from "../../_utils/newPublicPage";
+import { NFTPublicPage } from "../../public-pages/nft/nft-page";
 import { TokenIdPageClient } from "./TokenIdPage.client";
 import { TokenIdPage } from "./token-id";
 
@@ -40,6 +42,22 @@ export async function SharedNFTTokenPage(props: {
     );
   }
 
+  // public /nfts/[tokenId] page
+  if (!props.projectMeta) {
+    const meta = await shouldRenderNewPublicPage(info.serverContract);
+    if (meta && (meta.type === "erc721" || meta.type === "erc1155")) {
+      return (
+        <NFTPublicPage
+          serverContract={info.serverContract}
+          clientContract={info.clientContract}
+          chainMetadata={info.chainMetadata}
+          tokenId={props.tokenId}
+          type={meta.type}
+        />
+      );
+    }
+  }
+
   const { clientContract, serverContract, isLocalhostChain } = info;
   if (isLocalhostChain) {
     return (

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/shared-nfts-page.tsx

@@ -3,6 +3,7 @@ import type { ProjectMeta } from "../../../../../team/[team_slug]/[project_slug]
 import { redirectToContractLandingPage } from "../../../../../team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/utils";
 import { getContractPageParamsInfo } from "../_utils/getContractFromParams";
 import { getContractPageMetadata } from "../_utils/getContractPageMetadata";
+import { shouldRenderNewPublicPage } from "../_utils/newPublicPage";
 import { ContractNFTPage } from "./ContractNFTPage";
 import { ContractNFTPageClient } from "./ContractNFTPage.client";
 
@@ -44,6 +45,18 @@ export async function SharedNFTPage(props: {
     });
   }
 
+  // public nft page doesn't have /nfts page
+  if (!props.projectMeta) {
+    const shouldHide = await shouldRenderNewPublicPage(info.serverContract);
+    if (shouldHide) {
+      redirectToContractLandingPage({
+        contractAddress: props.contractAddress,
+        chainIdOrSlug: props.chainIdOrSlug,
+        projectMeta: props.projectMeta,
+      });
+    }
+  }
+
   return (
     <ContractNFTPage
       contract={clientContract}

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/_components/PageHeader.tsx

@@ -1,15 +1,23 @@
 import { ToggleThemeButton } from "@/components/color-mode-toggle";
 import Link from "next/link";
+import { cn } from "../../../../../../../../@/lib/utils";
 import { ThirdwebMiniLogo } from "../../../../../../components/ThirdwebMiniLogo";
 import { PublicPageConnectButton } from "./PublicPageConnectButton";
 
-export function PageHeader() {
+export function PageHeader(props: {
+  containerClassName?: string;
+}) {
   return (
     <div className="border-b border-dashed">
-      <header className="container flex max-w-8xl justify-between py-3">
+      <header
+        className={cn(
+          "container flex max-w-8xl justify-between py-3",
+          props.containerClassName,
+        )}
+      >
         <div className="flex items-center gap-4">
           <Link href="/team" className="flex items-center gap-2">
-            <ThirdwebMiniLogo className="h-6" />
+            <ThirdwebMiniLogo className="h-5" />
             <span className="hidden font-bold text-2xl tracking-tight lg:block">
               thirdweb
             </span>

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/_components/token-price.tsx

@@ -0,0 +1,39 @@
+import { SkeletonContainer } from "@/components/ui/skeleton";
+
+export function TokenPrice(props: {
+  strikethrough: boolean;
+  data:
+    | {
+        priceInTokens: number;
+        symbol: string;
+      }
+    | undefined;
+}) {
+  return (
+    <SkeletonContainer
+      skeletonData={"0.00 ETH"}
+      loadedData={
+        props.data
+          ? props.data.priceInTokens === 0
+            ? "FREE"
+            : `${compactNumberFormatter.format(props.data.priceInTokens)} ${props.data.symbol}`
+          : undefined
+      }
+      render={(v) => {
+        if (props.strikethrough) {
+          return (
+            <s className="font-medium text-muted-foreground text-sm line-through decoration-muted-foreground/50">
+              {v}
+            </s>
+          );
+        }
+        return <span className="font-medium text-foreground text-sm">{v}</span>;
+      }}
+    />
+  );
+}
+
+const compactNumberFormatter = new Intl.NumberFormat("en-US", {
+  notation: "compact",
+  maximumFractionDigits: 10,
+});

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/ContractHeader.tsx

@@ -41,6 +41,7 @@ export function ContractHeaderUI(props: {
   chainMetadata: ChainMetadata;
   clientContract: ThirdwebContract;
   socialUrls: object;
+  imageClassName?: string;
 }) {
   const socialUrls = useMemo(() => {
     const socialUrlsValue: { name: string; href: string }[] = [];
@@ -67,7 +68,10 @@ export function ContractHeaderUI(props: {
     <div className="flex flex-col items-start gap-4 border-b border-dashed py-8 lg:flex-row lg:items-center">
       {props.image && (
         <Img
-          className="size-20 shrink-0 rounded-full border bg-muted"
+          className={cn(
+            "size-20 shrink-0 rounded-full border bg-muted",
+            props.imageClassName,
+          )}
           src={
             props.image
               ? resolveSchemeWithErrorHandler({