Render contract pages on client side for localhost chain

apps/dashboard/src/@3rdweb-sdk/react/hooks/useDashboardContractMetadata.tsx

@@ -18,7 +18,7 @@ export function useDashboardContractMetadata(contract: ThirdwebContract) {
   });
 }
 
-type DashboardContractMetadata = {
+export type DashboardContractMetadata = {
   name: string;
   symbol: string;
   image: string;

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/direct-listings/ContractDirectListingsPage.client.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import type { ThirdwebContract } from "thirdweb";
+import { ErrorPage, LoadingPage } from "../../_components/page-skeletons";
+import { RedirectToContractOverview } from "../../_components/redirect-contract-overview.client";
+import { useContractPageMetadata } from "../../_hooks/useContractPageMetadata";
+import { ContractDirectListingsPage } from "./ContractDirectListingsPage";
+
+export function ContractDirectListingsPageClient(props: {
+  contract: ThirdwebContract;
+}) {
+  const metadataQuery = useContractPageMetadata(props.contract);
+
+  if (metadataQuery.isPending) {
+    return <LoadingPage />;
+  }
+
+  if (metadataQuery.isError) {
+    return <ErrorPage />;
+  }
+
+  if (!metadataQuery.data.isDirectListingSupported) {
+    return <RedirectToContractOverview contract={props.contract} />;
+  }
+
+  return <ContractDirectListingsPage contract={props.contract} />;
+}

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/direct-listings/page.tsx

@@ -1,7 +1,9 @@
 import { notFound, redirect } from "next/navigation";
+import { localhost } from "thirdweb/chains";
 import { getContractPageParamsInfo } from "../../_utils/getContractFromParams";
 import { getContractPageMetadata } from "../../_utils/getContractPageMetadata";
 import { ContractDirectListingsPage } from "./ContractDirectListingsPage";
+import { ContractDirectListingsPageClient } from "./ContractDirectListingsPage.client";
 
 export default async function Page(props: {
   params: {
@@ -15,6 +17,10 @@ export default async function Page(props: {
     notFound();
   }
 
+  if (info.chainMetadata.chainId === localhost.id) {
+    return <ContractDirectListingsPageClient contract={info.contract} />;
+  }
+
   const { isDirectListingSupported } = await getContractPageMetadata(
     info.contract,
   );

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/english-auctions/ContractEnglishAuctionsPage.client.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import type { ThirdwebContract } from "thirdweb";
+import { ErrorPage, LoadingPage } from "../../_components/page-skeletons";
+import { RedirectToContractOverview } from "../../_components/redirect-contract-overview.client";
+import { useContractPageMetadata } from "../../_hooks/useContractPageMetadata";
+import { ContractEnglishAuctionsPage } from "./ContractEnglishAuctionsPage";
+
+export function ContractEnglishAuctionsPageClient(props: {
+  contract: ThirdwebContract;
+}) {
+  const metadataQuery = useContractPageMetadata(props.contract);
+
+  if (metadataQuery.isPending) {
+    return <LoadingPage />;
+  }
+
+  if (metadataQuery.isError) {
+    return <ErrorPage />;
+  }
+
+  if (!metadataQuery.data.isEnglishAuctionSupported) {
+    return <RedirectToContractOverview contract={props.contract} />;
+  }
+
+  return <ContractEnglishAuctionsPage contract={props.contract} />;
+}

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/english-auctions/page.tsx

@@ -1,7 +1,9 @@
 import { notFound, redirect } from "next/navigation";
+import { localhost } from "thirdweb/chains";
 import { getContractPageParamsInfo } from "../../_utils/getContractFromParams";
 import { getContractPageMetadata } from "../../_utils/getContractPageMetadata";
 import { ContractEnglishAuctionsPage } from "./ContractEnglishAuctionsPage";
+import { ContractEnglishAuctionsPageClient } from "./ContractEnglishAuctionsPage.client";
 
 export default async function Page(props: {
   params: {
@@ -15,6 +17,10 @@ export default async function Page(props: {
     notFound();
   }
 
+  if (info.chainMetadata.chainId === localhost.id) {
+    return <ContractEnglishAuctionsPageClient contract={info.contract} />;
+  }
+
   const { isEnglishAuctionSupported } = await getContractPageMetadata(
     info.contract,
   );

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

@@ -0,0 +1,17 @@
+import { Spinner } from "@/components/ui/Spinner/Spinner";
+
+export function LoadingPage() {
+  return (
+    <div className="flex min-h-[300px] grow items-center justify-center">
+      <Spinner className="size-10" />
+    </div>
+  );
+}
+
+export function ErrorPage() {
+  return (
+    <div className="flex min-h-[300px] grow items-center justify-center">
+      <p className="text-destructive-text">Failed to load contract</p>
+    </div>
+  );
+}

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/redirect-contract-overview.client.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import { useDashboardRouter } from "@/lib/DashboardRouter";
+import { useEffect, useRef } from "react";
+import type { ThirdwebContract } from "thirdweb";
+import { LoadingPage } from "./page-skeletons";
+
+export function RedirectToContractOverview(props: {
+  contract: ThirdwebContract;
+}) {
+  const router = useDashboardRouter();
+  const redirected = useRef(false);
+
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    if (redirected.current) {
+      return;
+    }
+    redirected.current = true;
+    router.replace(`/${props.contract.chain.id}/${props.contract.address}`);
+  }, [router, props.contract]);
+
+  return <LoadingPage />;
+}

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_hooks/useContractPageMetadata.ts

@@ -0,0 +1,18 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+import type { ThirdwebContract } from "thirdweb";
+import { getContractPageMetadataSetup } from "../_utils/getContractPageMetadata";
+
+export function useContractPageMetadata(contract: ThirdwebContract) {
+  return useQuery({
+    queryKey: ["getContractPageMetadataSetup", contract],
+    queryFn: () => {
+      return getContractPageMetadataSetup(contract, () =>
+        Promise.resolve(false),
+      );
+    },
+    retry: false,
+    refetchOnWindowFocus: false,
+  });
+}

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_hooks/useResolveContractABI.ts

@@ -0,0 +1,13 @@
+import { useQuery } from "@tanstack/react-query";
+import { type ThirdwebContract, resolveContractAbi } from "thirdweb/contract";
+
+export function useResolveContractABI(contract: ThirdwebContract) {
+  return useQuery({
+    queryKey: ["resolveContractAbi", contract],
+    queryFn: () => {
+      return resolveContractAbi(contract);
+    },
+    retry: false,
+    refetchOnWindowFocus: false,
+  });
+}

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/ConfigureCustomChain.tsx → apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/ConfigureCustomChain.tsx

@@ -4,8 +4,8 @@ import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
 import { CheckIcon, CircleAlertIcon, RotateCcwIcon } from "lucide-react";
 import { useState } from "react";
-import { ConfigureNetworks } from "../../../../../components/configure-networks/ConfigureNetworks";
-import { addChainOverrides } from "../../../../../stores/chainStores";
+import { addChainOverrides } from "stores/chainStores";
+import { ConfigureNetworks } from "../../../../../../components/configure-networks/ConfigureNetworks";
 
 export function ConfigureCustomChain(props: {
   chainSlug: string;

apps/dashboard/src/components/custom-contract/contract-header/contract-metadata.tsx → apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/contract-metadata.tsx

@@ -1,5 +1,8 @@
 import { getThirdwebClient } from "@/constants/thirdweb.server";
-import { fetchDashboardContractMetadata } from "@3rdweb-sdk/react/hooks/useDashboardContractMetadata";
+import {
+  type DashboardContractMetadata,
+  fetchDashboardContractMetadata,
+} from "@3rdweb-sdk/react/hooks/useDashboardContractMetadata";
 import { fetchPublishedContractsFromDeploy } from "components/contract-components/fetchPublishedContractsFromDeploy";
 import type { ThirdwebContract } from "thirdweb";
 import type { ChainMetadata } from "thirdweb/chains";
@@ -8,12 +11,34 @@ import { MetadataHeader } from "./metadata-header";
 interface ContractMetadataProps {
   contract: ThirdwebContract;
   chain: ChainMetadata;
+  contractMetadata: DashboardContractMetadata | undefined;
+  externalLinks:
+    | {
+        name: string;
+        url: string;
+      }[]
+    | undefined;
 }
 
-export async function ContractMetadata({
+export function ContractMetadata({
   contract,
   chain,
+  contractMetadata,
+  externalLinks,
 }: ContractMetadataProps) {
+  return (
+    <MetadataHeader
+      data={contractMetadata}
+      chain={chain}
+      address={contract.address}
+      externalLinks={externalLinks}
+    />
+  );
+}
+
+export async function getContractMetadataHeaderData(
+  contract: ThirdwebContract,
+) {
   const settledResults = await Promise.allSettled([
     fetchDashboardContractMetadata(contract),
     fetchPublishedContractsFromDeploy({
@@ -34,12 +59,8 @@ export async function ContractMetadata({
 
   const latestPublished = publishedContractsFromDeploy?.slice(-1)[0];
 
-  return (
-    <MetadataHeader
-      data={contractMetadata}
-      chain={chain}
-      address={contract.address}
-      externalLinks={latestPublished?.externalLinks}
-    />
-  );
+  return {
+    contractMetadata,
+    externalLinks: latestPublished?.externalLinks,
+  };
 }

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/contract-page-layout.client.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+import type { ThirdwebContract } from "thirdweb";
+import type { ChainMetadata } from "thirdweb/chains";
+import { ErrorPage, LoadingPage } from "../_components/page-skeletons";
+import { useContractPageMetadata } from "../_hooks/useContractPageMetadata";
+import { getContractPageSidebarLinks } from "../_utils/getContractPageSidebarLinks";
+import { getContractMetadataHeaderData } from "./contract-metadata";
+import { ContractPageLayout } from "./contract-page-layout";
+
+export function ContractPageLayoutClient(props: {
+  chainMetadata: ChainMetadata;
+  contract: ThirdwebContract;
+  children: React.ReactNode;
+}) {
+  const metadataQuery = useContractPageMetadata(props.contract);
+  const headerMetadataQuery = useQuery({
+    queryKey: ["getContractMetadataHeaderData", props.contract],
+    queryFn: async () => {
+      return await getContractMetadataHeaderData(props.contract);
+    },
+    retry: false,
+    refetchOnWindowFocus: false,
+  });
+
+  if (metadataQuery.isPending) {
+    return <LoadingPage />;
+  }
+
+  if (metadataQuery.isError) {
+    return <ErrorPage />;
+  }
+
+  const sidebarLinks = getContractPageSidebarLinks({
+    chainSlug: props.chainMetadata.slug,
+    contractAddress: props.contract.address,
+    metadata: metadataQuery.data,
+  });
+
+  return (
+    <ContractPageLayout
+      {...props}
+      sidebarLinks={sidebarLinks}
+      dashboardContractMetadata={headerMetadataQuery.data?.contractMetadata}
+      externalLinks={headerMetadataQuery.data?.externalLinks}
+    />
+  );
+}

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/contract-page-layout.tsx

@@ -0,0 +1,62 @@
+import { ChakraProviderSetup } from "@/components/ChakraProviderSetup";
+import type { SidebarLink } from "@/components/blocks/Sidebar";
+import { SidebarLayout } from "@/components/blocks/SidebarLayout";
+import type { DashboardContractMetadata } from "@3rdweb-sdk/react/hooks/useDashboardContractMetadata";
+import { DeprecatedAlert } from "components/shared/DeprecatedAlert";
+import type { ThirdwebContract } from "thirdweb";
+import type { ChainMetadata } from "thirdweb/chains";
+import { ContractMetadata } from "./contract-metadata";
+import { PrimaryDashboardButton } from "./primary-dashboard-button";
+
+export function ContractPageLayout(props: {
+  chainMetadata: ChainMetadata;
+  contract: ThirdwebContract;
+  children: React.ReactNode;
+  sidebarLinks: SidebarLink[];
+  dashboardContractMetadata: DashboardContractMetadata | undefined;
+  externalLinks:
+    | {
+        name: string;
+        url: string;
+      }[]
+    | undefined;
+}) {
+  const {
+    chainMetadata,
+    contract,
+    sidebarLinks,
+    dashboardContractMetadata,
+    externalLinks,
+  } = props;
+
+  return (
+    <ChakraProviderSetup>
+      <SidebarLayout sidebarLinks={sidebarLinks}>
+        <div className="border-border border-b pb-8">
+          <div className="flex flex-col gap-4 ">
+            <div className="flex flex-col justify-between gap-4 md:flex-row">
+              <ContractMetadata
+                contract={contract}
+                chain={chainMetadata}
+                contractMetadata={dashboardContractMetadata}
+                externalLinks={externalLinks}
+              />
+              <PrimaryDashboardButton
+                contractAddress={contract.address}
+                chain={contract.chain}
+                contractInfo={{
+                  chain: chainMetadata,
+                  chainSlug: chainMetadata.slug,
+                  contractAddress: contract.address,
+                }}
+              />
+            </div>
+            <DeprecatedAlert chain={chainMetadata} />
+          </div>
+        </div>
+        <div className="h-8" />
+        <div className="pb-10">{props.children}</div>
+      </SidebarLayout>
+    </ChakraProviderSetup>
+  );
+}

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

@@ -46,16 +46,21 @@ export type ContractPageMetadata = {
   functionSelectors: string[];
 };
 
-export async function getContractPageMetadata(
+export async function getContractPageMetadata(contract: ThirdwebContract) {
+  return getContractPageMetadataSetup(contract, isAnalyticsSupportedForChain);
+}
+
+export async function getContractPageMetadataSetup(
   contract: ThirdwebContract,
+  isAnalyticsSupportedFn: (chainId: number) => Promise<boolean>,
 ): Promise<ContractPageMetadata> {
   const [
     functionSelectorsResult,
     isAnalyticsSupportedResult,
     contractTypeResult,
   ] = await Promise.allSettled([
     resolveFunctionSelectors(contract),
-    isAnalyticsSupportedForChain(contract.chain.id),
+    isAnalyticsSupportedFn(contract.chain.id),
     getContractType({ contract }),
   ]);