Dashboard: Contract pages cleanup (#6991)

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR primarily focuses on refactoring the contract-related code to consistently use `clientContract` and `serverContract` variables instead of `contract`. This improves clarity and ensures that the correct contract instance is used in various components.

### Detailed summary
- Replaced instances of `info.contract` with `info.clientContract` or `info.serverContract` across multiple files.
- Updated conditions checking for localhost to use `info.isLocalhostChain`.
- Modified return statements in several components to use the appropriate contract variable.
- Adjusted metadata fetching and handling to align with the new contract structure.
- Removed `ContractAnalyticsPageClient` usage in favor of direct `ContractAnalyticsPage` with `clientContract`.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

Author: MananTank

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

@@ -1,5 +1,4 @@
 import { notFound, redirect } from "next/navigation";
-import { localhost } from "thirdweb/chains";
 import { getRawAccount } from "../../../../../../account/settings/getAccount";
 import { getContractPageParamsInfo } from "../../_utils/getContractFromParams";
 import { getContractPageMetadata } from "../../_utils/getContractPageMetadata";
@@ -20,25 +19,25 @@ export default async function Page(props: {
     notFound();
   }
 
-  if (info.chainMetadata.chainId === localhost.id) {
+  if (info.isLocalhostChain) {
     return (
       <ContractDirectListingsPageClient
-        contract={info.contract}
+        contract={info.clientContract}
         isLoggedIn={!!account}
       />
     );
   }
 
   const { isDirectListingSupported, isInsightSupported } =
-    await getContractPageMetadata(info.contract);
+    await getContractPageMetadata(info.serverContract);
 
   if (!isDirectListingSupported) {
     redirect(`/${params.chain_id}/${params.contractAddress}`);
   }
 
   return (
     <ContractDirectListingsPage
-      contract={info.contract}
+      contract={info.clientContract}
       isLoggedIn={!!account}
       isInsightSupported={isInsightSupported}
     />

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

@@ -1,5 +1,4 @@
 import { notFound, redirect } from "next/navigation";
-import { localhost } from "thirdweb/chains";
 import { getRawAccount } from "../../../../../../account/settings/getAccount";
 import { getContractPageParamsInfo } from "../../_utils/getContractFromParams";
 import { getContractPageMetadata } from "../../_utils/getContractPageMetadata";
@@ -21,25 +20,25 @@ export default async function Page(props: {
 
   const twAccount = await getRawAccount();
 
-  if (info.chainMetadata.chainId === localhost.id) {
+  if (info.isLocalhostChain) {
     return (
       <ContractEnglishAuctionsPageClient
-        contract={info.contract}
+        contract={info.clientContract}
         isLoggedIn={!!twAccount}
       />
     );
   }
 
   const { isEnglishAuctionSupported, isInsightSupported } =
-    await getContractPageMetadata(info.contract);
+    await getContractPageMetadata(info.serverContract);
 
   if (!isEnglishAuctionSupported) {
     redirect(`/${params.chain_id}/${params.contractAddress}`);
   }
 
   return (
     <ContractEnglishAuctionsPage
-      contract={info.contract}
+      contract={info.clientContract}
       isLoggedIn={!!twAccount}
       isInsightSupported={isInsightSupported}
     />

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

@@ -1,5 +1,7 @@
+import { serverThirdwebClient } from "@/constants/thirdweb-client.server";
 import { mapV4ChainToV5Chain } from "contexts/map-chains";
 import { getAddress, getContract, isAddress } from "thirdweb";
+import { localhost } from "thirdweb/chains";
 import { fetchChainWithLocalOverrides } from "../../../../../../../utils/fetchChainWithLocalOverrides";
 import { getUserThirdwebClient } from "../../../../../api/lib/getAuthToken";
 
@@ -17,7 +19,14 @@ export async function getContractPageParamsInfo(params: {
 
   // attempt to get the auth token
 
-  const contract = getContract({
+  const serverContract = getContract({
+    address: contractAddress,
+    // eslint-disable-next-line no-restricted-syntax
+    chain: mapV4ChainToV5Chain(chainMetadata),
+    client: serverThirdwebClient,
+  });
+
+  const clientContract = getContract({
     address: contractAddress,
     // eslint-disable-next-line no-restricted-syntax
     chain: mapV4ChainToV5Chain(chainMetadata),
@@ -27,7 +36,9 @@ export async function getContractPageParamsInfo(params: {
 
   return {
     chainMetadata,
-    contract,
+    serverContract,
+    clientContract,
+    isLocalhostChain: chainMetadata.chainId === localhost.id,
   };
 }
 

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

@@ -1,5 +1,4 @@
 import { notFound, redirect } from "next/navigation";
-import { localhost } from "thirdweb/chains";
 import { getContractPageParamsInfo } from "../_utils/getContractFromParams";
 import { getContractPageMetadata } from "../_utils/getContractPageMetadata";
 import { AccountSignersClient } from "./AccountSigners.client";
@@ -18,18 +17,18 @@ export default async function Page(props: {
     notFound();
   }
 
-  const { contract, chainMetadata } = info;
+  const { clientContract, serverContract, isLocalhostChain } = info;
 
-  if (chainMetadata.chainId === localhost.id) {
-    return <AccountSignersClient contract={contract} />;
+  if (isLocalhostChain) {
+    return <AccountSignersClient contract={clientContract} />;
   }
 
   const { isAccountPermissionsSupported } =
-    await getContractPageMetadata(contract);
+    await getContractPageMetadata(serverContract);
 
   if (!isAccountPermissionsSupported) {
     redirect(`/${params.chain_id}/${params.contractAddress}`);
   }
 
-  return <AccountSigners contract={contract} />;
+  return <AccountSigners contract={clientContract} />;
 }

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/account/page.tsx

@@ -1,5 +1,4 @@
 import { notFound, redirect } from "next/navigation";
-import { localhost } from "thirdweb/chains";
 import { getRawAccount } from "../../../../../account/settings/getAccount";
 import { getContractPageParamsInfo } from "../_utils/getContractFromParams";
 import { getContractPageMetadata } from "../_utils/getContractPageMetadata";
@@ -19,30 +18,31 @@ export default async function Page(props: {
     notFound();
   }
 
-  const { contract, chainMetadata } = info;
+  const { clientContract, serverContract, chainMetadata, isLocalhostChain } =
+    info;
 
   const account = await getRawAccount();
 
-  if (contract.chain.id === localhost.id) {
+  if (isLocalhostChain) {
     return (
       <AccountPageClient
-        contract={contract}
+        contract={clientContract}
         chainMetadata={chainMetadata}
         isLoggedIn={!!account}
       />
     );
   }
 
   const { isAccount, isInsightSupported } =
-    await getContractPageMetadata(contract);
+    await getContractPageMetadata(serverContract);
 
   if (!isAccount) {
     redirect(`/${params.chain_id}/${params.contractAddress}`);
   }
 
   return (
     <AccountPage
-      contract={contract}
+      contract={clientContract}
       chainMetadata={chainMetadata}
       isLoggedIn={!!account}
       isInsightSupported={isInsightSupported}

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/page.tsx

@@ -1,5 +1,4 @@
 import { notFound, redirect } from "next/navigation";
-import { localhost } from "thirdweb/chains";
 import { getRawAccount } from "../../../../../account/settings/getAccount";
 import { getContractPageParamsInfo } from "../_utils/getContractFromParams";
 import { getContractPageMetadata } from "../_utils/getContractPageMetadata";
@@ -19,19 +18,24 @@ export default async function Page(props: {
     notFound();
   }
 
-  const { contract, chainMetadata } = info;
+  const { clientContract, serverContract, isLocalhostChain } = info;
 
-  const account = await getRawAccount();
+  const [account, { isAccountFactory }] = await Promise.all([
+    getRawAccount(),
+    isLocalhostChain
+      ? { isAccountFactory: undefined }
+      : getContractPageMetadata(serverContract),
+  ]);
 
-  if (chainMetadata.chainId === localhost.id) {
-    return <AccountsPageClient contract={contract} isLoggedIn={!!account} />;
+  if (isLocalhostChain) {
+    return (
+      <AccountsPageClient contract={clientContract} isLoggedIn={!!account} />
+    );
   }
 
-  const { isAccountFactory } = await getContractPageMetadata(contract);
-
   if (!isAccountFactory) {
     redirect(`/${params.chain_id}/${params.contractAddress}`);
   }
 
-  return <AccountsPage contract={contract} isLoggedIn={!!account} />;
+  return <AccountsPage contract={clientContract} isLoggedIn={!!account} />;
 }

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/analytics/ContractAnalyticsPage.client.tsx

@@ -1,11 +1,9 @@
 import { notFound, redirect } from "next/navigation";
-import { localhost } from "thirdweb/chains";
 import { type ThirdwebContract, resolveContractAbi } from "thirdweb/contract";
 import { type Abi, toEventSelector, toFunctionSelector } from "thirdweb/utils";
 import { getContractPageParamsInfo } from "../_utils/getContractFromParams";
 import { getContractPageMetadata } from "../_utils/getContractPageMetadata";
 import { ContractAnalyticsPage } from "./ContractAnalyticsPage";
-import { ContractAnalyticsPageClient } from "./ContractAnalyticsPage.client";
 
 export default async function Page(props: {
   params: Promise<{
@@ -20,29 +18,21 @@ export default async function Page(props: {
     notFound();
   }
 
-  const { eventSelectorToName, writeFnSelectorToName } = await getSelectors(
-    info.contract,
-  );
-
-  if (info.chainMetadata.chainId === localhost.id) {
-    return (
-      <ContractAnalyticsPageClient
-        contract={info.contract}
-        writeFnSelectorToNameRecord={writeFnSelectorToName}
-        eventSelectorToNameRecord={eventSelectorToName}
-      />
-    );
-  }
-
-  const { isInsightSupported } = await getContractPageMetadata(info.contract);
+  const [
+    { eventSelectorToName, writeFnSelectorToName },
+    { isInsightSupported },
+  ] = await Promise.all([
+    getSelectors(info.serverContract),
+    getContractPageMetadata(info.serverContract),
+  ]);
 
   if (!isInsightSupported) {
     redirect(`/${params.chain_id}/${params.contractAddress}`);
   }
 
   return (
     <ContractAnalyticsPage
-      contract={info.contract}
+      contract={info.clientContract}
       writeFnSelectorToNameRecord={writeFnSelectorToName}
       eventSelectorToNameRecord={eventSelectorToName}
     />

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/analytics/page.tsx

@@ -1,5 +1,4 @@
 import { notFound, redirect } from "next/navigation";
-import { localhost } from "thirdweb/chains";
 import { getRawAccount } from "../../../../../account/settings/getAccount";
 import { ClaimConditions } from "../_components/claim-conditions/claim-conditions";
 import { getContractPageParamsInfo } from "../_utils/getContractFromParams";
@@ -18,27 +17,39 @@ export default async function Page(props: {
   if (!info) {
     notFound();
   }
-  const { contract, chainMetadata } = info;
+  const { clientContract, serverContract, isLocalhostChain } = info;
 
-  const account = await getRawAccount();
+  const [
+    account,
+    {
+      isERC20ClaimConditionsSupported,
+      isERC721ClaimConditionsSupported,
+      supportedERCs,
+    },
+  ] = await Promise.all([
+    getRawAccount(),
+    isLocalhostChain
+      ? {
+          isERC20ClaimConditionsSupported: undefined,
+          isERC721ClaimConditionsSupported: undefined,
+          supportedERCs: undefined,
+        }
+      : getContractPageMetadata(serverContract),
+  ]);
 
-  if (chainMetadata.chainId === localhost.id) {
-    return <ClaimConditionsClient contract={contract} isLoggedIn={!!account} />;
+  if (isLocalhostChain) {
+    return (
+      <ClaimConditionsClient contract={clientContract} isLoggedIn={!!account} />
+    );
   }
 
-  const {
-    isERC20ClaimConditionsSupported,
-    isERC721ClaimConditionsSupported,
-    supportedERCs,
-  } = await getContractPageMetadata(contract);
-
   if (!isERC20ClaimConditionsSupported && !isERC721ClaimConditionsSupported) {
     redirect(`/${params.chain_id}/${params.contractAddress}`);
   }
 
   return (
     <ClaimConditions
-      contract={contract}
+      contract={clientContract}
       isERC20={supportedERCs.isERC20}
       isLoggedIn={!!account}
       isMultiphase={true}

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

@@ -1,5 +1,4 @@
 import { notFound } from "next/navigation";
-import { localhost } from "thirdweb/chains";
 import { resolveContractAbi } from "thirdweb/contract";
 import { getContractPageParamsInfo } from "../_utils/getContractFromParams";
 import { ContractCodePage } from "./contract-code-page";
@@ -18,23 +17,24 @@ export default async function Page(props: {
     notFound();
   }
 
-  const { contract, chainMetadata } = info;
+  const { clientContract, serverContract, chainMetadata, isLocalhostChain } =
+    info;
 
-  if (contract.chain.id === localhost.id) {
+  if (isLocalhostChain) {
     return (
       <ContractCodePageClient
-        contract={contract}
+        contract={clientContract}
         chainMetadata={chainMetadata}
       />
     );
   }
 
-  const abi = await resolveContractAbi(contract).catch(() => undefined);
+  const abi = await resolveContractAbi(serverContract).catch(() => undefined);
 
   return (
     <ContractCodePage
       abi={abi}
-      contract={contract}
+      contract={clientContract}
       chainMetadata={chainMetadata}
     />
   );