Version Packages (#7245)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

.gitignore

@@ -16,6 +16,7 @@ yalc.lock
 ./build/
 playwright-report/
 .env/
+.pnpm-store/
 
 # codecov binary
 codecov

apps/dashboard/framer-rewrites.js

@@ -27,10 +27,7 @@ module.exports = [
   // -- engine
   "/engine",
   // -- solutions pages --
-  "/solutions/gaming",
-  "/solutions/consumer-apps",
-  "/solutions/defi",
-  "/solutions/ecosystem",
+  "/solutions/:solution_slug",
   // -- campaigns --
   // "/unlimited-wallets", -- OFF for now
   // -- TPP --

apps/dashboard/package.json

@@ -40,8 +40,8 @@
     "@radix-ui/react-popover": "^1.1.10",
     "@radix-ui/react-progress": "^1.1.4",
     "@radix-ui/react-radio-group": "^1.3.3",
-    "@radix-ui/react-select": "^2.2.2",
-    "@radix-ui/react-separator": "^1.1.4",
+    "@radix-ui/react-select": "^2.2.5",
+    "@radix-ui/react-separator": "^1.1.7",
     "@radix-ui/react-slot": "^1.2.0",
     "@radix-ui/react-switch": "^1.2.2",
     "@radix-ui/react-tooltip": "1.2.3",
@@ -77,7 +77,7 @@
     "nextjs-toploader": "^1.6.12",
     "nuqs": "^2.4.3",
     "p-limit": "^6.2.0",
-    "papaparse": "^5.5.2",
+    "papaparse": "^5.5.3",
     "pluralize": "^8.0.0",
     "posthog-js": "1.67.1",
     "prettier": "3.5.3",
@@ -89,7 +89,7 @@
     "react-dropzone": "^14.3.8",
     "react-error-boundary": "^5.0.0",
     "react-hook-form": "7.55.0",
-    "react-markdown": "^9.0.1",
+    "react-markdown": "10.1.0",
     "react-table": "^7.8.0",
     "recharts": "2.15.3",
     "remark-gfm": "4.0.1",
@@ -105,7 +105,7 @@
     "thirdweb": "workspace:*",
     "tiny-invariant": "^1.3.3",
     "use-debounce": "^10.0.4",
-    "zod": "3.24.3"
+    "zod": "3.25.24"
   },
   "devDependencies": {
     "@chakra-ui/cli": "^2.4.1",

apps/dashboard/src/@/actions/getWalletNFTs.ts

@@ -12,7 +12,7 @@ import type { WalletNFT } from "lib/wallet/nfts/types";
 import { getVercelEnv } from "../../lib/vercel-utils";
 import { isAlchemySupported } from "../../lib/wallet/nfts/isAlchemySupported";
 import { isMoralisSupported } from "../../lib/wallet/nfts/isMoralisSupported";
-import { NET_PUBLIC_DASHBOARD_THIRDWEB_CLIENT_ID } from "../constants/public-envs";
+import { NEXT_PUBLIC_DASHBOARD_CLIENT_ID } from "../constants/public-envs";
 import { MORALIS_API_KEY } from "../constants/server-envs";
 
 type WalletNFTApiReturn =
@@ -149,7 +149,7 @@ async function getWalletNFTsFromInsight(params: {
 
   const response = await fetch(url, {
     headers: {
-      "x-client-id": NET_PUBLIC_DASHBOARD_THIRDWEB_CLIENT_ID,
+      "x-client-id": NEXT_PUBLIC_DASHBOARD_CLIENT_ID,
     },
   });
 

apps/dashboard/src/@/actions/stripe-actions.ts

@@ -59,3 +59,16 @@ export async function getTeamInvoices(
     throw new Error("Failed to fetch billing history");
   }
 }
+
+async function getStripeCustomer(customerId: string) {
+  return await getStripe().customers.retrieve(customerId);
+}
+
+export async function getStripeBalance(customerId: string) {
+  const customer = await getStripeCustomer(customerId);
+  if (customer.deleted) {
+    return 0;
+  }
+  // Stripe returns a positive balance for credits, so we need to divide by -100 to get the actual balance (as long as the balance is not 0)
+  return customer.balance === 0 ? 0 : customer.balance / -100;
+}

apps/dashboard/src/@/api/analytics.ts

@@ -3,6 +3,7 @@ import "server-only";
 import type {
   AnalyticsQueryParams,
   EcosystemWalletStats,
+  EngineCloudStats,
   InAppWalletStats,
   RpcMethodStats,
   TransactionStats,
@@ -425,9 +426,30 @@ export async function getUniversalBridgeWalletUsage(args: {
     console.error(
       `Failed to fetch universal bridge wallet stats: ${res?.status} - ${res.statusText} - ${reason}`,
     );
-    return null;
+    return [];
   }
 
   const json = await res.json();
   return json.data as UniversalBridgeWalletStats[];
 }
+
+export async function getEngineCloudMethodUsage(
+  params: AnalyticsQueryParams,
+): Promise<EngineCloudStats[]> {
+  const searchParams = buildSearchParams(params);
+  const res = await fetchAnalytics(
+    `v2/engine-cloud/requests?${searchParams.toString()}`,
+    {
+      method: "GET",
+      headers: { "Content-Type": "application/json" },
+    },
+  );
+
+  if (res?.status !== 200) {
+    console.error("Failed to fetch Engine Cloud method usage");
+    return [];
+  }
+
+  const json = await res.json();
+  return json.data as EngineCloudStats[];
+}

apps/dashboard/src/@/api/insight/webhooks.ts

@@ -0,0 +1,239 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+"use server";
+
+import { getAuthToken } from "app/(app)/api/lib/getAuthToken";
+import { THIRDWEB_INSIGHT_API_DOMAIN } from "constants/urls";
+
+export interface WebhookResponse {
+  id: string;
+  name: string;
+  team_id: string;
+  project_id: string;
+  webhook_url: string;
+  webhook_secret: string;
+  filters: WebhookFilters;
+  suspended_at: string | null;
+  suspended_reason: string | null;
+  disabled: boolean;
+  created_at: string;
+  updated_at: string | null;
+}
+
+export interface WebhookFilters {
+  "v1.events"?: {
+    chain_ids?: string[];
+    addresses?: string[];
+    signatures?: Array<{
+      sig_hash: string;
+      abi?: string;
+      params?: Record<string, unknown>;
+    }>;
+  };
+  "v1.transactions"?: {
+    chain_ids?: string[];
+    from_addresses?: string[];
+    to_addresses?: string[];
+    signatures?: Array<{
+      sig_hash: string;
+      abi?: string;
+      params?: Record<string, unknown>;
+    }>;
+  };
+}
+
+interface CreateWebhookPayload {
+  name: string;
+  webhook_url: string;
+  filters: WebhookFilters;
+}
+
+interface WebhooksListResponse {
+  data: WebhookResponse[];
+  error?: string;
+}
+
+interface WebhookSingleResponse {
+  data: WebhookResponse | null;
+  error?: string;
+}
+
+interface TestWebhookPayload {
+  webhook_url: string;
+  type?: "event" | "transaction";
+}
+
+interface TestWebhookResponse {
+  success: boolean;
+  error?: string;
+}
+
+type SupportedWebhookChainsResponse =
+  | { chains: Array<number> }
+  | { error: string };
+
+export async function createWebhook(
+  payload: CreateWebhookPayload,
+  clientId: string,
+): Promise<WebhookSingleResponse> {
+  try {
+    const authToken = await getAuthToken();
+    const response = await fetch(
+      `https://${THIRDWEB_INSIGHT_API_DOMAIN}/v1/webhooks`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "x-client-id": clientId,
+          Authorization: `Bearer ${authToken}`,
+        },
+        body: JSON.stringify(payload),
+      },
+    );
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      return {
+        data: null,
+        error: `Failed to create webhook: ${errorText}`,
+      };
+    }
+
+    return (await response.json()) as WebhookSingleResponse;
+  } catch (error) {
+    return {
+      data: null,
+      error: `Network or parsing error: ${error instanceof Error ? error.message : "Unknown error"}`,
+    };
+  }
+}
+
+export async function getWebhooks(
+  clientId: string,
+): Promise<WebhooksListResponse> {
+  try {
+    const authToken = await getAuthToken();
+    const response = await fetch(
+      `https://${THIRDWEB_INSIGHT_API_DOMAIN}/v1/webhooks`,
+      {
+        method: "GET",
+        headers: {
+          "x-client-id": clientId,
+          Authorization: `Bearer ${authToken}`,
+        },
+      },
+    );
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      return {
+        data: [],
+        error: `Failed to get webhooks: ${errorText}`,
+      };
+    }
+
+    return (await response.json()) as WebhooksListResponse;
+  } catch (error) {
+    return {
+      data: [],
+      error: `Network or parsing error: ${error instanceof Error ? error.message : "Unknown error"}`,
+    };
+  }
+}
+
+export async function deleteWebhook(
+  webhookId: string,
+  clientId: string,
+): Promise<WebhookSingleResponse> {
+  try {
+    const authToken = await getAuthToken();
+    const response = await fetch(
+      `https://${THIRDWEB_INSIGHT_API_DOMAIN}/v1/webhooks/${encodeURIComponent(webhookId)}`,
+      {
+        method: "DELETE",
+        headers: {
+          "x-client-id": clientId,
+          Authorization: `Bearer ${authToken}`,
+        },
+      },
+    );
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      return {
+        data: null,
+        error: `Failed to delete webhook: ${errorText}`,
+      };
+    }
+
+    return (await response.json()) as WebhookSingleResponse;
+  } catch (error) {
+    return {
+      data: null,
+      error: `Network or parsing error: ${error instanceof Error ? error.message : "Unknown error"}`,
+    };
+  }
+}
+
+export async function testWebhook(
+  payload: TestWebhookPayload,
+  clientId: string,
+): Promise<TestWebhookResponse> {
+  try {
+    const authToken = await getAuthToken();
+    const response = await fetch(
+      `https://${THIRDWEB_INSIGHT_API_DOMAIN}/v1/webhooks/test`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "x-client-id": clientId,
+          Authorization: `Bearer ${authToken}`,
+        },
+        body: JSON.stringify(payload),
+      },
+    );
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      return {
+        success: false,
+        error: `Failed to test webhook: ${errorText}`,
+      };
+    }
+
+    return (await response.json()) as TestWebhookResponse;
+  } catch (error) {
+    return {
+      success: false,
+      error: `Network or parsing error: ${error instanceof Error ? error.message : "Unknown error"}`,
+    };
+  }
+}
+
+export async function getSupportedWebhookChains(): Promise<SupportedWebhookChainsResponse> {
+  try {
+    const response = await fetch(
+      `https://${THIRDWEB_INSIGHT_API_DOMAIN}/service/chains`,
+      {
+        method: "GET",
+        headers: {
+          "x-service-api-key": process.env.INSIGHT_SERVICE_API_KEY || "",
+        },
+      },
+    );
+
+    if (!response.ok) {
+      const errorText = await response.json();
+      return { error: `Failed to fetch supported chains: ${errorText.error}` };
+    }
+
+    const data = await response.json();
+    if (Array.isArray(data.data)) {
+      return { chains: data.data };
+    }
+    return { error: "Unexpected response format" };
+  } catch (error) {
+    console.error("Error fetching supported chains:", error);
+    return { error: `Failed to fetch supported chains: ${error}` };
+  }
+}

apps/dashboard/src/@/api/universal-bridge/links.ts

@@ -15,7 +15,7 @@ type PaymentLink = {
     chainId: number;
   };
   amount: bigint | undefined;
-  purchaseData: unknown;
+  purchaseData: Record<string, unknown> | undefined;
 };
 
 export async function getPaymentLink(props: {

apps/dashboard/src/@/api/universal-bridge/tokens.ts

@@ -1,5 +1,7 @@
 "use server";
 import { DASHBOARD_THIRDWEB_SECRET_KEY } from "@/constants/server-envs";
+import type { ProjectResponse } from "@thirdweb-dev/service-utils";
+import { getAuthToken } from "app/(app)/api/lib/getAuthToken";
 import { UB_BASE_URL } from "./constants";
 
 export type TokenMetadata = {
@@ -37,3 +39,33 @@ export async function getUniversalBridgeTokens(props: {
   const json = await res.json();
   return json.data as Array<TokenMetadata>;
 }
+
+export async function addUniversalBridgeTokenRoute(props: {
+  chainId: number;
+  tokenAddress: string;
+  project: ProjectResponse;
+}) {
+  const authToken = await getAuthToken();
+  const url = new URL(`${UB_BASE_URL}/v1/tokens`);
+
+  const res = await fetch(url.toString(), {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${authToken}`,
+      "x-client-id": props.project.publishableKey,
+    } as Record<string, string>,
+    body: JSON.stringify({
+      chainId: props.chainId,
+      tokenAddress: props.tokenAddress,
+    }),
+  });
+
+  if (!res.ok) {
+    const text = await res.text();
+    throw new Error(text);
+  }
+
+  const json = await res.json();
+  return json.data as Array<TokenMetadata>;
+}

apps/dashboard/src/@/components/blocks/NetworkSelectors.tsx

@@ -3,10 +3,10 @@
 import { MultiSelect } from "@/components/blocks/multi-select";
 import { SelectWithSearch } from "@/components/blocks/select-with-search";
 import { Badge } from "@/components/ui/badge";
+import { ChainIconClient } from "components/icons/ChainIcon";
+import { useAllChainsData } from "hooks/chains/allChains";
 import { useCallback, useMemo } from "react";
 import type { ThirdwebClient } from "thirdweb";
-import { ChainIconClient } from "../../../components/icons/ChainIcon";
-import { useAllChainsData } from "../../../hooks/chains/allChains";
 
 function cleanChainName(chainName: string) {
   return chainName.replace("Mainnet", "");
@@ -27,8 +27,15 @@ export function MultiNetworkSelector(props: {
   side?: "left" | "right" | "top" | "bottom";
   showSelectedValuesInModal?: boolean;
   client: ThirdwebClient;
+  chainIds?: number[];
 }) {
-  const { allChains, idToChain } = useAllChainsData();
+  let { allChains, idToChain } = useAllChainsData();
+
+  if (props.chainIds && props.chainIds.length > 0) {
+    allChains = allChains.filter((chain) =>
+      props.chainIds?.includes(chain.chainId),
+    );
+  }
 
   const options = useMemo(() => {
     let sortedChains = allChains;

apps/dashboard/src/@/components/blocks/RouteDiscoveryCard.tsx

@@ -0,0 +1,84 @@
+import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import type React from "react";
+
+export function RouteDiscoveryCard(
+  props: React.PropsWithChildren<{
+    bottomText: React.ReactNode;
+    header?: {
+      description: string | undefined;
+      title: string;
+    };
+    errorText: string | undefined;
+    noPermissionText: string | undefined;
+    saveButton?: {
+      onClick?: () => void;
+      disabled: boolean;
+      isPending: boolean;
+      type?: "submit";
+      variant?:
+        | "ghost"
+        | "default"
+        | "primary"
+        | "destructive"
+        | "outline"
+        | "secondary";
+      className?: string;
+      label?: string;
+    };
+  }>,
+) {
+  return (
+    <div className="relative rounded-lg border border-border bg-card">
+      <div
+        className={cn(
+          "relative border-border border-b px-4 py-6 lg:px-6",
+          props.noPermissionText && "cursor-not-allowed",
+        )}
+      >
+        {props.header && (
+          <>
+            <h3 className="font-semibold text-xl tracking-tight">
+              {props.header.title}
+            </h3>
+            {props.header.description && (
+              <p className="mt-1.5 mb-4 text-foreground text-sm">
+                {props.header.description}
+              </p>
+            )}
+          </>
+        )}
+
+        {props.children}
+      </div>
+
+      <div className="flex min-h-[60px] items-center justify-between gap-2 px-4 py-3 lg:px-6">
+        {props.noPermissionText ? (
+          <p className="text-muted-foreground text-sm">
+            {props.noPermissionText}
+          </p>
+        ) : props.errorText ? (
+          <p className="text-destructive-text text-sm">{props.errorText}</p>
+        ) : (
+          <p className="text-muted-foreground text-sm">{props.bottomText}</p>
+        )}
+
+        {props.saveButton && !props.noPermissionText && (
+          <Button
+            size="sm"
+            className={cn("gap-2", props.saveButton.className)}
+            onClick={props.saveButton.onClick}
+            disabled={props.saveButton.disabled || props.saveButton.isPending}
+            variant={props.saveButton.variant || "outline"}
+            type={props.saveButton.type}
+          >
+            {props.saveButton.isPending && <Spinner className="size-3" />}
+            {props.saveButton.label ||
+              (props.saveButton.isPending ? "Submit" : "Submit Token")}
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}

apps/dashboard/src/@/components/blocks/TokenSelector.tsx

@@ -1,3 +1,5 @@
+import { useAllChainsData } from "hooks/chains/allChains";
+import { useTokensData } from "hooks/tokens/tokens";
 import { useCallback, useMemo } from "react";
 import {
   NATIVE_TOKEN_ADDRESS,
@@ -5,8 +7,6 @@ import {
   getAddress,
 } from "thirdweb";
 import { shortenAddress } from "thirdweb/utils";
-import { useAllChainsData } from "../../../hooks/chains/allChains";
-import { useTokensData } from "../../../hooks/tokens/tokens";
 import { replaceIpfsUrl } from "../../../lib/sdk";
 import { fallbackChainIcon } from "../../../utils/chain-icons";
 import type { TokenMetadata } from "../../api/universal-bridge/tokens";

apps/dashboard/src/@/components/blocks/UpsellBannerCard.tsx

@@ -41,6 +41,7 @@ type UpsellBannerCardProps = {
   cta: {
     text: React.ReactNode;
     icon?: React.ReactNode;
+    target?: "_blank";
     link: string;
   };
   trackingCategory: string;
@@ -55,7 +56,7 @@ export function UpsellBannerCard(props: UpsellBannerCardProps) {
   return (
     <div
       className={cn(
-        "relative overflow-hidden rounded-lg border bg-gradient-to-r p-5",
+        "relative overflow-hidden rounded-lg border bg-gradient-to-r p-4 lg:p-6",
         color.border,
         color.bgFrom,
       )}
@@ -73,7 +74,7 @@ export function UpsellBannerCard(props: UpsellBannerCardProps) {
           {props.icon ? (
             <div
               className={cn(
-                "mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-full",
+                "mt-0.5 hidden h-9 w-9 shrink-0 items-center justify-center rounded-full lg:flex",
                 color.iconBg,
               )}
             >
@@ -90,9 +91,7 @@ export function UpsellBannerCard(props: UpsellBannerCardProps) {
             >
               {props.title}
             </h3>
-            <p className={cn("mt-0.5 text-sm", color.desc)}>
-              {props.description}
-            </p>
+            <p className={cn("text-sm", color.desc)}>{props.description}</p>
           </div>
         </div>
 
@@ -108,6 +107,7 @@ export function UpsellBannerCard(props: UpsellBannerCardProps) {
             href={props.cta.link}
             category={props.trackingCategory}
             label={props.trackingLabel}
+            target={props.cta.target}
           >
             {props.cta.text}
             {props.cta.icon && <span className="ml-2">{props.cta.icon}</span>}

apps/dashboard/src/@/components/blocks/charts/area-chart.tsx

@@ -15,14 +15,14 @@ import {
   ChartTooltip,
   ChartTooltipContent,
 } from "@/components/ui/chart";
-import { formatDate } from "date-fns";
-import { useMemo } from "react";
-import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts";
+import { cn } from "@/lib/utils";
 import {
   EmptyChartState,
   LoadingChartState,
-} from "../../../../components/analytics/empty-chart-state";
-import { cn } from "../../../lib/utils";
+} from "components/analytics/empty-chart-state";
+import { formatDate } from "date-fns";
+import { useMemo } from "react";
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts";
 
 type ThirdwebAreaChartProps<TConfig extends ChartConfig> = {
   header?: {
@@ -46,8 +46,12 @@ type ThirdwebAreaChartProps<TConfig extends ChartConfig> = {
   // chart className
   chartClassName?: string;
   isPending: boolean;
+  className?: string;
+  cardContentClassName?: string;
   hideLabel?: boolean;
   toolTipLabelFormatter?: (label: string, payload: unknown) => React.ReactNode;
+  toolTipValueFormatter?: (value: unknown) => React.ReactNode;
+  emptyChartState?: React.ReactElement;
 };
 
 export function ThirdwebAreaChart<TConfig extends ChartConfig>(
@@ -56,7 +60,7 @@ export function ThirdwebAreaChart<TConfig extends ChartConfig>(
   const configKeys = useMemo(() => Object.keys(props.config), [props.config]);
 
   return (
-    <Card>
+    <Card className={props.className}>
       {props.header && (
         <CardHeader>
           <CardTitle className={cn("mb-2", props.header.titleClassName)}>
@@ -70,12 +74,16 @@ export function ThirdwebAreaChart<TConfig extends ChartConfig>(
 
       {props.customHeader && props.customHeader}
 
-      <CardContent className={cn(!props.header && "pt-6")}>
+      <CardContent
+        className={cn(!props.header && "pt-6", props.cardContentClassName)}
+      >
         <ChartContainer config={props.config} className={props.chartClassName}>
           {props.isPending ? (
             <LoadingChartState />
           ) : props.data.length === 0 ? (
-            <EmptyChartState />
+            <EmptyChartState type="area">
+              {props.emptyChartState}
+            </EmptyChartState>
           ) : (
             <AreaChart accessibilityLayer data={props.data}>
               <CartesianGrid vertical={false} />
@@ -100,6 +108,7 @@ export function ThirdwebAreaChart<TConfig extends ChartConfig>(
                       props.hideLabel !== undefined ? props.hideLabel : true
                     }
                     labelFormatter={props.toolTipLabelFormatter}
+                    valueFormatter={props.toolTipValueFormatter}
                   />
                 }
               />

apps/dashboard/src/@/components/blocks/charts/bar-chart.tsx

@@ -17,13 +17,13 @@ import {
   ChartTooltip,
   ChartTooltipContent,
 } from "@/components/ui/chart";
-import { formatDate } from "date-fns";
-import { useMemo } from "react";
+import { cn } from "@/lib/utils";
 import {
   EmptyChartState,
   LoadingChartState,
-} from "../../../../components/analytics/empty-chart-state";
-import { cn } from "../../../lib/utils";
+} from "components/analytics/empty-chart-state";
+import { formatDate } from "date-fns";
+import { useMemo } from "react";
 
 type ThirdwebBarChartProps<TConfig extends ChartConfig> = {
   // metadata
@@ -75,7 +75,9 @@ export function ThirdwebBarChart<TConfig extends ChartConfig>(
           {props.isPending ? (
             <LoadingChartState />
           ) : props.data.length === 0 ? (
-            <EmptyChartState>{props.emptyChartState}</EmptyChartState>
+            <EmptyChartState type="bar">
+              {props.emptyChartState}
+            </EmptyChartState>
           ) : (
             <BarChart accessibilityLayer data={props.data}>
               <CartesianGrid vertical={false} />

apps/dashboard/src/@/components/blocks/dismissible-alert.tsx

@@ -1,7 +1,7 @@
 "use client";
 
+import { useLocalStorage } from "hooks/useLocalStorage";
 import { XIcon } from "lucide-react";
-import { useLocalStorage } from "../../../hooks/useLocalStorage";
 import { Button } from "../ui/button";
 
 export function DismissibleAlert(props: {

apps/dashboard/src/@/components/blocks/distribution-chart.tsx

@@ -10,6 +10,7 @@ type DistributionBarChartProps = {
   segments: Segment[];
   title: string;
 };
+
 export function DistributionBarChart(props: DistributionBarChartProps) {
   const totalPercentage = props.segments.reduce(
     (sum, segment) => sum + segment.percent,
@@ -59,7 +60,13 @@ export function DistributionBarChart(props: DistributionBarChartProps) {
                   backgroundColor: segment.color,
                 }}
               />
-              <p className="text-sm">
+              <p
+                className={cn(
+                  "text-sm",
+                  (segment.percent > 100 || segment.percent < 0) &&
+                    "text-destructive-text",
+                )}
+              >
                 {segment.label}: {segment.percent}%
               </p>
             </div>

apps/dashboard/src/@/components/blocks/multi-step-status/multi-step-status.stories.tsx

@@ -22,41 +22,36 @@ export const AllStates: Story = {
   args: {
     steps: [
       {
-        status: "completed",
+        status: { type: "completed" },
         label: "Connect Wallet",
-        retryLabel: "Failed to connect wallet",
         execute: async () => {
           await sleep(1000);
         },
       },
       {
-        status: "pending",
+        status: { type: "pending" },
         label: "Sign Message",
-        retryLabel: "Failed to sign message",
         execute: async () => {
           await sleep(1000);
         },
       },
       {
-        status: "error",
+        status: { type: "error", message: "This is an error message" },
         label: "Approve Transaction",
-        retryLabel: "Transaction approval failed",
         execute: async () => {
           await sleep(1000);
         },
       },
       {
-        status: "idle",
+        status: { type: "idle" },
         label: "Confirm Transaction",
-        retryLabel: "Transaction confirmation failed",
         execute: async () => {
           await sleep(1000);
         },
       },
       {
-        status: "idle",
+        status: { type: "idle" },
         label: "Finalize",
-        retryLabel: "Finalization failed",
         execute: async () => {
           await sleep(1000);
         },

apps/dashboard/src/@/components/blocks/multi-step-status/multi-step-status.tsx

@@ -11,8 +11,14 @@ import { DynamicHeight } from "../../ui/DynamicHeight";
 import { Spinner } from "../../ui/Spinner/Spinner";
 
 export type MultiStepState = {
-  status: "idle" | "pending" | "completed" | "error";
-  retryLabel: string;
+  status:
+    | {
+        type: "idle" | "pending" | "completed";
+      }
+    | {
+        type: "error";
+        message: string | React.ReactNode;
+      };
   label: string;
   execute: () => Promise<void>;
 };
@@ -25,11 +31,11 @@ export function MultiStepStatus(props: {
       <div className="space-y-4">
         {props.steps.map((step) => (
           <div key={step.label} className="flex items-start space-x-3 ">
-            {step.status === "completed" ? (
+            {step.status.type === "completed" ? (
               <CircleCheckIcon className="mt-0.5 size-5 flex-shrink-0 text-green-500" />
-            ) : step.status === "pending" ? (
+            ) : step.status.type === "pending" ? (
               <Spinner className="mt-0.5 size-5 flex-shrink-0 text-foreground" />
-            ) : step.status === "error" ? (
+            ) : step.status.type === "error" ? (
               <AlertCircleIcon className="mt-0.5 size-5 flex-shrink-0 text-red-500" />
             ) : (
               <CircleIcon className="mt-0.5 size-5 flex-shrink-0 text-muted-foreground/70" />
@@ -37,11 +43,11 @@ export function MultiStepStatus(props: {
             <div className="flex-1">
               <p
                 className={`font-medium ${
-                  step.status === "pending"
+                  step.status.type === "pending"
                     ? "text-foreground"
-                    : step.status === "completed"
+                    : step.status.type === "completed"
                       ? "text-green-500"
-                      : step.status === "error"
+                      : step.status.type === "error"
                         ? "text-red-500"
                         : "text-muted-foreground/70"
                 }`}
@@ -49,9 +55,11 @@ export function MultiStepStatus(props: {
                 {step.label}
               </p>
 
-              {step.status === "error" && (
+              {step.status.type === "error" && (
                 <div className="mt-1 space-y-2">
-                  <p className="mb-1 text-red-500 text-sm">{step.retryLabel}</p>
+                  <p className="mb-1 text-red-500 text-sm">
+                    {step.status.message}
+                  </p>
                   <Button
                     variant="destructive"
                     size="sm"

apps/dashboard/src/@/components/blocks/pricing-card.tsx

@@ -4,13 +4,13 @@ import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { ToolTipLabel } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
-import { CheckIcon, CircleDollarSignIcon } from "lucide-react";
+import { RenewSubscriptionButton } from "components/settings/Account/Billing/renew-subscription/renew-subscription-button";
+import { useTrack } from "hooks/analytics/useTrack";
+import { CheckIcon, DollarSignIcon } from "lucide-react";
 import Link from "next/link";
 import type React from "react";
+import { remainingDays } from "utils/date-utils";
 import { TEAM_PLANS } from "utils/pricing";
-import { RenewSubscriptionButton } from "../../../components/settings/Account/Billing/renew-subscription/renew-subscription-button";
-import { useTrack } from "../../../hooks/analytics/useTrack";
-import { remainingDays } from "../../../utils/date-utils";
 import type { ProductSKU } from "../../lib/billing";
 import { CheckoutButton } from "../billing";
 
@@ -105,9 +105,12 @@ export const PricingCard: React.FC<PricingCardProps> = ({
 
         {/* Price */}
         <div className="flex flex-col gap-0.5">
+          {plan.isStartingPriceOnly && (
+            <span className="text-muted-foreground text-xs">Starting at</span>
+          )}
           <div className="flex items-center gap-2">
             <span className="font-semibold text-2xl text-foreground tracking-tight">
-              ${plan.price}
+              ${plan.price.toLocaleString()}
             </span>
 
             {!isCustomPrice && (
@@ -183,10 +186,10 @@ const billingPlanToSkuMap: Record<Team["billingPlan"], ProductSKU | undefined> =
   {
     starter: "plan:starter",
     growth: "plan:growth",
-    accelerate: "plan:accelerate",
     scale: "plan:scale",
+    pro: "plan:pro",
     // we can't render checkout buttons for these plans:
-    pro: undefined,
+    accelerate: undefined,
     free: undefined,
     growth_legacy: undefined,
     starter_legacy: undefined,
@@ -201,16 +204,19 @@ function FeatureItem({ text }: FeatureItemProps) {
 
   return (
     <div className="flex items-center gap-2 text-sm">
-      <CheckIcon className="size-4 shrink-0 text-green-500" />
+      {Array.isArray(text) ? (
+        <ToolTipLabel label={text[1]}>
+          <DollarSignIcon className="size-4 shrink-0 text-green-500" />
+        </ToolTipLabel>
+      ) : (
+        <CheckIcon className="size-4 shrink-0 text-green-500" />
+      )}
       {Array.isArray(text) ? (
         <div className="flex items-center gap-2">
           <p className="text-muted-foreground">
             {titleStr}{" "}
             <span className="text-muted-foreground md:hidden">{text[1]}</span>
           </p>
-          <ToolTipLabel label={text[1]}>
-            <CircleDollarSignIcon className="hidden size-4 text-muted-foreground md:block" />
-          </ToolTipLabel>
         </div>
       ) : (
         <p className="text-muted-foreground">{titleStr}</p>

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

@@ -5,7 +5,6 @@ import {
   HoverCardContent,
   HoverCardTrigger,
 } from "@/components/ui/hover-card";
-import { useThirdwebClient } from "@/constants/thirdweb.client";
 import { resolveSchemeWithErrorHandler } from "@/lib/resolveSchemeWithErrorHandler";
 import { useClipboard } from "hooks/useClipboard";
 import { CheckIcon, CopyIcon, XIcon } from "lucide-react";
@@ -24,8 +23,8 @@ export function WalletAddress(props: {
   shortenAddress?: boolean;
   className?: string;
   iconClassName?: string;
+  client: ThirdwebClient;
 }) {
-  const thirdwebClient = useThirdwebClient();
   // default back to zero address if no address provided
   const address = useMemo(() => props.address || ZERO_ADDRESS, [props.address]);
 
@@ -40,7 +39,7 @@ export function WalletAddress(props: {
 
   const profiles = useSocialProfiles({
     address: address,
-    client: thirdwebClient,
+    client: props.client,
   });
 
   const { onCopy, hasCopied } = useClipboard(address, 2000);
@@ -78,7 +77,7 @@ export function WalletAddress(props: {
             <WalletAvatar
               address={address}
               profiles={profiles.data || []}
-              thirdwebClient={thirdwebClient}
+              thirdwebClient={props.client}
               iconClassName={props.iconClassName}
             />
           )}
@@ -122,7 +121,7 @@ export function WalletAddress(props: {
           ) : (
             profiles.data?.map((profile) => {
               const walletAvatarLink = resolveSchemeWithErrorHandler({
-                client: thirdwebClient,
+                client: props.client,
                 uri: profile.avatar,
               });
 

apps/dashboard/src/@/components/ui/LoadingDots.tsx

@@ -0,0 +1,10 @@
+export function LoadingDots() {
+  return (
+    <div className="fade-in-0 flex animate-in gap-2 duration-300">
+      <span className="sr-only">Loading...</span>
+      <div className="size-4 animate-bounce rounded-full bg-foreground [animation-delay:-0.3s]" />
+      <div className="size-4 animate-bounce rounded-full bg-foreground [animation-delay:-0.15s]" />
+      <div className="size-4 animate-bounce rounded-full bg-foreground" />
+    </div>
+  );
+}

apps/dashboard/src/@/components/ui/NavLink.tsx

@@ -1,9 +1,9 @@
 "use client";
 
 import { cn } from "@/lib/utils";
+import { useTrack } from "hooks/analytics/useTrack";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { useTrack } from "../../../hooks/analytics/useTrack";
 
 export type NavButtonProps = {
   className?: string;

apps/dashboard/src/@/components/ui/code/code.server.tsx

@@ -6,13 +6,17 @@ export type CodeProps = {
   code: string;
   lang: BundledLanguage;
   className?: string;
+  ignoreFormattingErrors?: boolean;
 };
 
 export const CodeServer: React.FC<CodeProps> = async ({
   code,
   lang,
   className,
+  ignoreFormattingErrors,
 }) => {
-  const { html, formattedCode } = await getCodeHtml(code, lang);
+  const { html, formattedCode } = await getCodeHtml(code, lang, {
+    ignoreFormattingErrors,
+  });
   return <RenderCode code={formattedCode} html={html} className={className} />;
 };

apps/dashboard/src/@/components/ui/decimal-input.tsx

@@ -0,0 +1,35 @@
+import { Input } from "./input";
+export function DecimalInput(props: {
+  value: string;
+  onChange: (value: string) => void;
+  maxValue?: number;
+  id?: string;
+  className?: string;
+}) {
+  return (
+    <Input
+      id={props.id}
+      type="text"
+      value={props.value}
+      className={props.className}
+      inputMode="decimal"
+      onChange={(e) => {
+        const number = Number(e.target.value);
+        // ignore if string becomes invalid number
+        if (Number.isNaN(number)) {
+          return;
+        }
+        if (props.maxValue && number > props.maxValue) {
+          return;
+        }
+        // replace leading multiple zeros with single zero
+        let cleanedValue = e.target.value.replace(/^0+/, "0");
+        // replace leading zero before decimal point
+        if (!cleanedValue.includes(".")) {
+          cleanedValue = cleanedValue.replace(/^0+/, "");
+        }
+        props.onChange(cleanedValue || "0");
+      }}
+    />
+  );
+}

apps/dashboard/src/@/components/ui/tabs.tsx

@@ -22,6 +22,7 @@ export function TabLinks(props: {
   tabContainerClassName?: string;
   shadowColor?: string;
   scrollableClassName?: string;
+  bottomLineClassName?: string;
 }) {
   const { containerRef, lineRef, activeTabRef } =
     useUnderline<HTMLAnchorElement>();
@@ -29,7 +30,12 @@ export function TabLinks(props: {
   return (
     <div className={cn("relative", props.className)}>
       {/* Bottom line */}
-      <div className="absolute right-0 bottom-0 left-0 h-[1px] bg-border" />
+      <div
+        className={cn(
+          "absolute right-0 bottom-0 left-0 h-[1px] bg-border",
+          props.bottomLineClassName,
+        )}
+      />
 
       <ScrollShadow
         scrollableClassName={cn("pb-[8px] relative", props.scrollableClassName)}
@@ -216,6 +222,7 @@ export function TabPathLinks(props: {
   tabContainerClassName?: string;
   shadowColor?: string;
   scrollableClassName?: string;
+  bottomLineClassName?: string;
 }) {
   const pathname = usePathname() || "";
   const { links, ...restProps } = props;

apps/dashboard/src/@/constants/public-envs.ts

@@ -1,4 +1,4 @@
-export const NET_PUBLIC_DASHBOARD_THIRDWEB_CLIENT_ID =
+export const NEXT_PUBLIC_DASHBOARD_CLIENT_ID =
   process.env.NEXT_PUBLIC_DASHBOARD_CLIENT_ID || "";
 
 export const NEXT_PUBLIC_NEBULA_APP_CLIENT_ID =

apps/dashboard/src/@/constants/thirdweb.client.ts

@@ -1,51 +0,0 @@
-import { useQuery } from "@tanstack/react-query";
-import { useMemo } from "react";
-import { useActiveAccount } from "thirdweb/react";
-import type { GetAuthTokenResponse } from "../../app/(app)/api/auth/get-auth-token/route";
-import { LAST_USED_TEAM_ID } from "../../constants/cookies";
-import { getCookie } from "../../lib/cookie";
-import { getClientThirdwebClient } from "./thirdweb-client.client";
-
-// returns a thirdweb client with optional JWT passed i
-
-export function useThirdwebClient(jwt?: string) {
-  const account = useActiveAccount();
-  const lastUsedTeamId = getCookie(LAST_USED_TEAM_ID);
-
-  const query = useQuery({
-    queryKey: ["jwt", account?.address],
-    // only enable the query if there is an account and no JWT is passed in directly
-    enabled: !!account && !jwt,
-    retry: false,
-    queryFn: async () => {
-      if (!account) {
-        throw new Error("No account");
-      }
-      const res = await fetch(
-        `/api/auth/get-auth-token?address=${account.address}`,
-      );
-      if (!res.ok) {
-        throw new Error("Failed to get auth token");
-      }
-      const json = (await res.json()) as GetAuthTokenResponse;
-      if (!json.jwt) {
-        throw new Error("No JWT in response");
-      }
-      return json.jwt;
-    },
-  });
-
-  return useMemo(
-    // prefer jwt from props over the one from the token query if it exists
-    () =>
-      getClientThirdwebClient({
-        jwt: jwt || query.data,
-        teamId: lastUsedTeamId,
-      }),
-    [jwt, query.data, lastUsedTeamId],
-  );
-}
-
-/**
- * DO NOT ADD ANYTHING TO THIS FILE IF YOU ARE NOT ABSOLUTELY SURE IT IS OK
- */

apps/dashboard/src/@/constants/thirdweb.server.ts

@@ -1,5 +1,5 @@
 import {
-  NET_PUBLIC_DASHBOARD_THIRDWEB_CLIENT_ID,
+  NEXT_PUBLIC_DASHBOARD_CLIENT_ID,
   NEXT_PUBLIC_IPFS_GATEWAY_URL,
 } from "@/constants/public-envs";
 import {
@@ -42,10 +42,13 @@ export function getConfiguredThirdwebClient(options: {
 
   if (!getTransactionDecorator()) {
     setTransactionDecorator(async ({ account, transaction }) => {
-      // special override for sophon testnet (zk chain)
+      // special override for sophon (zk chain)
       // sophon only allows transactions through their paymaster
       // so always use eip712 tx + paymaster
-      if (transaction.chain.id === 531050104) {
+      if (
+        transaction.chain.id === 531050104 ||
+        transaction.chain.id === 50104
+      ) {
         const serializedTx = await populateEip712Transaction({
           transaction,
           account,
@@ -76,7 +79,7 @@ export function getConfiguredThirdwebClient(options: {
   return createThirdwebClient({
     teamId: options.teamId,
     secretKey: options.secretKey,
-    clientId: NET_PUBLIC_DASHBOARD_THIRDWEB_CLIENT_ID,
+    clientId: NEXT_PUBLIC_DASHBOARD_CLIENT_ID,
     config: {
       storage: {
         gatewayUrl: NEXT_PUBLIC_IPFS_GATEWAY_URL,

apps/dashboard/src/@/lib/billing.ts

@@ -5,6 +5,7 @@ export type ProductSKU =
   | "plan:custom"
   | "plan:accelerate"
   | "plan:scale"
+  | "plan:pro"
   | "product:ecosystem_wallets"
   | "product:engine_standard"
   | "product:engine_premium"

apps/dashboard/src/@/lib/time.ts

@@ -1,9 +1,9 @@
-import { differenceInCalendarDays } from "date-fns";
 import {
   type DurationId,
   type Range,
   getLastNDaysRange,
-} from "../../components/analytics/date-range-selector";
+} from "components/analytics/date-range-selector";
+import { differenceInCalendarDays } from "date-fns";
 
 export function normalizeTime(date: Date) {
   const newDate = new Date(date);

apps/dashboard/src/@3rdweb-sdk/react/components/connect-wallet/index.tsx

@@ -1,18 +1,19 @@
 "use client";
 
 import { Button } from "@/components/ui/button";
-import { useThirdwebClient } from "@/constants/thirdweb.client";
 import { useStore } from "@/lib/reactive";
 import { getSDKTheme } from "app/(app)/components/sdk-component-theme";
+import { LazyConfigureNetworkModal } from "components/configure-networks/LazyConfigureNetworkModal";
 import { CustomChainRenderer } from "components/selects/CustomChainRenderer";
 import { mapV4ChainToV5Chain } from "contexts/map-chains";
 import { useTrack } from "hooks/analytics/useTrack";
+import { useAllChainsData } from "hooks/chains/allChains";
 import { useTheme } from "next-themes";
 import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { useCallback, useMemo, useState } from "react";
-import type { Chain } from "thirdweb";
+import type { Chain, ThirdwebClient } from "thirdweb";
 import {
   ConnectButton,
   type NetworkSelectorProps,
@@ -21,8 +22,6 @@ import {
 } from "thirdweb/react";
 import { useFavoriteChainIds } from "../../../../app/(app)/(dashboard)/(chain)/components/client/star-button";
 import { doLogout } from "../../../../app/(app)/login/auth-actions";
-import { LazyConfigureNetworkModal } from "../../../../components/configure-networks/LazyConfigureNetworkModal";
-import { useAllChainsData } from "../../../../hooks/chains/allChains";
 import {
   type StoredChain,
   addRecentlyUsedChainId,
@@ -36,9 +35,11 @@ export const CustomConnectWallet = (props: {
   signInLinkButtonClassName?: string;
   detailsButtonClassName?: string;
   chain?: Chain;
+  client: ThirdwebClient;
   isLoggedIn: boolean;
 }) => {
-  const thirdwebClient = useThirdwebClient();
+  const client = props.client;
+
   const loginRequired =
     props.loginRequired === undefined ? true : props.loginRequired;
 
@@ -140,7 +141,7 @@ export const CustomConnectWallet = (props: {
     <>
       <ConnectButton
         theme={getSDKTheme(t)}
-        client={thirdwebClient}
+        client={client}
         connectModal={{
           privacyPolicyUrl: "/privacy-policy",
           termsOfServiceUrl: "/terms",
@@ -175,7 +176,7 @@ export const CustomConnectWallet = (props: {
             renderChain(props) {
               return (
                 <CustomChainRenderer
-                  client={thirdwebClient}
+                  client={client}
                   {...props}
                   openEditChainModal={(c) => {
                     setIsNetworkConfigModalOpen(true);
@@ -197,6 +198,7 @@ export const CustomConnectWallet = (props: {
         open={isNetworkConfigModalOpen}
         onOpenChange={setIsNetworkConfigModalOpen}
         editChain={editChain}
+        client={client}
       />
     </>
   );
@@ -276,12 +278,11 @@ function ConnectWalletWelcomeScreen(props: {
 export function useCustomConnectModal() {
   const { connect } = useConnectModal();
   const { theme } = useTheme();
-  const thirdwebClient = useThirdwebClient();
 
   return useCallback(
-    (options?: { chain?: Chain }) => {
+    (options: { chain?: Chain; client: ThirdwebClient }) => {
       return connect({
-        client: thirdwebClient,
+        client: options.client,
         appMetadata: {
           name: "thirdweb",
           logoUrl: "https://thirdweb.com/favicon.ico",
@@ -299,7 +300,7 @@ export function useCustomConnectModal() {
         theme: getSDKTheme(theme === "light" ? "light" : "dark"),
       });
     },
-    [connect, theme, thirdwebClient],
+    [connect, theme],
   );
 }
 

apps/dashboard/src/@3rdweb-sdk/react/hooks/useApi.ts

@@ -1,6 +1,5 @@
 import { apiServerProxy } from "@/actions/proxies";
 import type { Project } from "@/api/projects";
-import type { Team } from "@/api/team";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { useActiveAccount } from "thirdweb/react";
 import { accountKeys, authorizedWallets } from "../cache-keys";
@@ -188,7 +187,7 @@ export function useUpdateNotifications() {
 export const verifyEmailClient = async (input: ConfirmEmailInput) => {
   type Result = {
     error?: { message: string };
-    data: { team: Team; account: Account };
+    data: { account: Account };
   };
 
   const res = await apiServerProxy<Result>({

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

@@ -1,18 +1,17 @@
-import { useThirdwebClient } from "@/constants/thirdweb.client";
 import { useMutation } from "@tanstack/react-query";
+import type { ThirdwebClient } from "thirdweb";
 import { upload } from "thirdweb/storage";
 
 type DashboardUploadOptions = {
   uploadWithoutDirectory?: boolean;
   metadata?: Record<string, string>;
+  client: ThirdwebClient;
 };
 
-export function useDashboardStorageUpload(options?: DashboardUploadOptions) {
-  const thirdwebClient = useThirdwebClient();
+export function useDashboardStorageUpload(options: DashboardUploadOptions) {
   return useMutation({
     mutationFn: async (files: Array<File | string>): Promise<string[]> => {
       const uris = await upload({
-        client: thirdwebClient,
         files,
         ...options,
       });

apps/dashboard/src/app/(app)/(dashboard)/(bridge)/bridge/components/client/UniversalBridgeEmbed.tsx

@@ -1,29 +0,0 @@
-"use client";
-
-import { getSDKTheme } from "app/(app)/components/sdk-component-theme";
-import { useV5DashboardChain } from "lib/v5-adapter";
-import { useTheme } from "next-themes";
-import type { ThirdwebClient } from "thirdweb";
-import { PayEmbed } from "thirdweb/react";
-
-export function UniversalBridgeEmbed({
-  chainId,
-  client,
-}: { chainId?: number; client: ThirdwebClient }) {
-  const { theme } = useTheme();
-  const chain = useV5DashboardChain(chainId || 1);
-
-  return (
-    <PayEmbed
-      client={client}
-      payOptions={{
-        mode: "fund_wallet",
-        prefillBuy: {
-          chain,
-          amount: "0.01",
-        },
-      }}
-      theme={getSDKTheme(theme === "light" ? "light" : "dark")}
-    />
-  );
-}

apps/dashboard/src/app/(app)/(dashboard)/(bridge)/layout.tsx

@@ -0,0 +1,16 @@
+import { TeamHeader } from "../../team/components/TeamHeader/team-header";
+
+export default function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="flex grow flex-col">
+      <div className="border-border border-b bg-card">
+        <TeamHeader />
+      </div>
+      {children}
+    </div>
+  );
+}

apps/dashboard/src/app/(app)/(dashboard)/(bridge)/routes/components/server/routelist-card.tsx

@@ -1,8 +1,8 @@
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { serverThirdwebClient } from "@/constants/thirdweb-client.server";
 import { resolveSchemeWithErrorHandler } from "@/lib/resolveSchemeWithErrorHandler";
 import { defineChain } from "thirdweb";
 import { getChainMetadata } from "thirdweb/chains";
-import { serverThirdwebClient } from "../../../../../../../@/constants/thirdweb-client.server";
 
 type RouteListCardProps = {
   originChainId: number;

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/FaucetButton.tsx

@@ -23,7 +23,6 @@ import {
   NEXT_PUBLIC_THIRDWEB_ENGINE_FAUCET_WALLET,
   NEXT_PUBLIC_TURNSTILE_SITE_KEY,
 } from "@/constants/public-envs";
-import { useThirdwebClient } from "@/constants/thirdweb.client";
 import { CustomConnectWallet } from "@3rdweb-sdk/react/components/connect-wallet";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Turnstile } from "@marsidev/react-turnstile";
@@ -77,13 +76,14 @@ export function FaucetButton({
   chain,
   amount,
   isLoggedIn,
+  client,
 }: {
   chain: ChainMetadata;
   amount: number;
   isLoggedIn: boolean;
+  client: ThirdwebClient;
 }) {
   const pathname = usePathname();
-  const client = useThirdwebClient();
   const address = useActiveAccount()?.address;
   const chainId = chain.chainId;
   // do not include local overrides for chain pages
@@ -407,6 +407,7 @@ function SendFundsToFaucetModalContent(props: {
             isLoggedIn={props.isLoggedIn}
             connectButtonClassName="!w-full"
             detailsButtonClassName="!w-full"
+            client={props.client}
           />
         )}
 

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/PayModal.tsx

@@ -1,16 +1,19 @@
 "use client";
 import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
-import { useThirdwebClient } from "@/constants/thirdweb.client";
 import { useTrack } from "hooks/analytics/useTrack";
 import { defineDashboardChain } from "lib/defineDashboardChain";
 import { useTheme } from "next-themes";
+import type { ThirdwebClient } from "thirdweb";
 import { PayEmbed } from "thirdweb/react";
 import { getSDKTheme } from "../../../../../../components/sdk-component-theme";
 
-export function PayModalButton(props: { chainId: number; label: string }) {
+export function PayModalButton(props: {
+  chainId: number;
+  label: string;
+  client: ThirdwebClient;
+}) {
   const { theme } = useTheme();
-  const client = useThirdwebClient();
   const trackEvent = useTrack();
   return (
     <Dialog>
@@ -35,7 +38,7 @@ export function PayModalButton(props: { chainId: number; label: string }) {
         dialogCloseClassName="focus:ring-0"
       >
         <PayEmbed
-          client={client}
+          client={props.client}
           theme={getSDKTheme(theme === "dark" ? "dark" : "light")}
           className="!w-auto"
           payOptions={{

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/add-chain-to-wallet.tsx

@@ -6,7 +6,7 @@ import { ToolTipLabel } from "@/components/ui/tooltip";
 import { useCustomConnectModal } from "@3rdweb-sdk/react/components/connect-wallet";
 import { useMutation } from "@tanstack/react-query";
 import { toast } from "sonner";
-import type { Chain } from "thirdweb";
+import type { Chain, ThirdwebClient } from "thirdweb";
 import {
   useActiveAccount,
   useActiveWalletChain,
@@ -16,6 +16,7 @@ import { useDebounce } from "use-debounce";
 
 type AddChainToWalletProps = {
   chain: Chain;
+  client: ThirdwebClient;
 };
 
 export const AddChainToWallet: React.FC<AddChainToWalletProps> = (props) => {
@@ -49,7 +50,10 @@ export const AddChainToWallet: React.FC<AddChainToWalletProps> = (props) => {
         onClick={() => {
           // Connect directly to this chain
           if (!account) {
-            return customConnectModal({ chain: props.chain });
+            return customConnectModal({
+              chain: props.chain,
+              client: props.client,
+            });
           }
 
           // switch to this chain

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/live-stats.tsx

@@ -4,7 +4,7 @@ import { CopyTextButton } from "@/components/ui/CopyTextButton";
 import { Skeleton } from "@/components/ui/skeleton";
 import { ToolTipLabel } from "@/components/ui/tooltip";
 import { isProd } from "@/constants/env-utils";
-import { NET_PUBLIC_DASHBOARD_THIRDWEB_CLIENT_ID } from "@/constants/public-envs";
+import { NEXT_PUBLIC_DASHBOARD_CLIENT_ID } from "@/constants/public-envs";
 import { useQuery } from "@tanstack/react-query";
 import { CircleCheckIcon, XIcon } from "lucide-react";
 import { hostnameEndsWith } from "utils/url";
@@ -14,7 +14,7 @@ function useChainStatswithRPC(_rpcUrl: string) {
   let rpcUrl = _rpcUrl.replace(
     // eslint-disable-next-line no-template-curly-in-string
     "${THIRDWEB_API_KEY}",
-    NET_PUBLIC_DASHBOARD_THIRDWEB_CLIENT_ID,
+    NEXT_PUBLIC_DASHBOARD_CLIENT_ID,
   );
 
   // based on the environment hit dev or production

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/server/BuyFundsSection.tsx

@@ -1,5 +1,6 @@
 import { ExternalLinkIcon } from "lucide-react";
 import Link from "next/link";
+import type { ThirdwebClient } from "thirdweb";
 import type { ChainMetadata } from "thirdweb/chains";
 import { ChainIcon } from "../../../../components/server/chain-icon";
 import { PayModalButton } from "../client/PayModal";
@@ -8,6 +9,7 @@ import { SectionTitle } from "./SectionTitle";
 
 export function BuyFundsSection(props: {
   chain: ChainMetadata;
+  client: ThirdwebClient;
 }) {
   const sanitizedChainName = props.chain.name.replace("Mainnet", "").trim();
 
@@ -45,6 +47,7 @@ export function BuyFundsSection(props: {
           <PayModalButton
             chainId={props.chain.chainId}
             label={`Bridge to ${sanitizedChainName}`}
+            client={props.client}
           />
 
           <div className="h-4" />

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/server/FaucetSection.tsx

@@ -1,3 +1,4 @@
+import type { ThirdwebClient } from "thirdweb";
 import type { ChainMetadata } from "thirdweb/chains";
 import { getFaucetClaimAmount } from "../../../../../../api/testnet-faucet/claim/claim-amount";
 import { ChainIcon } from "../../../../components/server/chain-icon";
@@ -8,8 +9,9 @@ import { SectionTitle } from "./SectionTitle";
 export async function FaucetSection(props: {
   chain: ChainMetadata;
   isLoggedIn: boolean;
+  client: ThirdwebClient;
 }) {
-  const { chain, isLoggedIn } = props;
+  const { chain, isLoggedIn, client } = props;
 
   // Check eligibility.
   const sanitizedChainName = chain.name.replace("Mainnet", "").trim();
@@ -44,6 +46,7 @@ export async function FaucetSection(props: {
           <div className="h-8" />
 
           <FaucetButton
+            client={client}
             chain={chain}
             amount={amountToGive}
             isLoggedIn={isLoggedIn}

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/server/chain-header.tsx

@@ -1,6 +1,7 @@
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 import Link from "next/link";
+import type { ThirdwebClient } from "thirdweb";
 import type { ChainMetadata } from "thirdweb/chains";
 import { mapV4ChainToV5Chain } from "../../../../../../../../contexts/map-chains";
 import { ChainIcon } from "../../../../components/server/chain-icon";
@@ -10,6 +11,7 @@ type ChainHeaderProps = {
   headerImageUrl?: string;
   logoUrl?: string;
   chain: ChainMetadata;
+  client: ThirdwebClient;
 };
 
 // TODO: improve the behavior when clicking "Get started with thirdweb", currently just redirects to the dashboard
@@ -51,6 +53,7 @@ export function ChainHeader(props: ChainHeaderProps) {
           {/* Desktop only */}
           <div className="hidden flex-row gap-2 lg:flex">
             <AddChainToWallet
+              client={props.client}
               chain={
                 // Do not include chain overrides for chain pages
                 // eslint-disable-next-line no-restricted-syntax

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/layout.tsx

@@ -24,6 +24,7 @@ import {
   getAuthToken,
   getAuthTokenWalletAddress,
 } from "../../../../api/lib/getAuthToken";
+import { TeamHeader } from "../../../../team/components/TeamHeader/team-header";
 import { StarButton } from "../../components/client/star-button";
 import { getChain, getChainMetadata } from "../../utils";
 import { AddChainToWallet } from "./components/client/add-chain-to-wallet";
@@ -95,7 +96,10 @@ The following is the user's message:
   }
 
   return (
-    <>
+    <div className="flex grow flex-col">
+      <div className="border-border border-b bg-card">
+        <TeamHeader />
+      </div>
       <NebulaChatButton
         isLoggedIn={!!authToken}
         networks={chain.testnet ? "testnet" : "mainnet"}
@@ -160,6 +164,7 @@ The following is the user's message:
             headerImageUrl={chainMetadata?.headerImgUrl}
             logoUrl={chain.icon?.url}
             chain={chain}
+            client={client}
           />
 
           <div className="h-4 md:h-8" />
@@ -206,6 +211,7 @@ The following is the user's message:
             <div className="w-full sm:hidden">
               <div className="grid grid-cols-2 gap-2">
                 <AddChainToWallet
+                  client={client}
                   chain={
                     // Do not include chain overrides for chain pages
                     // eslint-disable-next-line no-restricted-syntax
@@ -225,7 +231,7 @@ The following is the user's message:
           {children}
         </div>
       </div>
-    </>
+    </div>
   );
 }
 

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/opengraph-image.tsx

@@ -1,7 +1,7 @@
+import { serverThirdwebClient } from "@/constants/thirdweb-client.server";
 import { ImageResponse } from "next/og";
 import { download } from "thirdweb/storage";
 import { fetchChain } from "utils/fetchChain";
-import { serverThirdwebClient } from "../../../../../../@/constants/thirdweb-client.server";
 
 // Route segment config
 export const runtime = "edge";

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

@@ -1,3 +1,4 @@
+import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
 import { CircleAlertIcon } from "lucide-react";
 import { getRawAccount } from "../../../../account/settings/getAccount";
 import { getChain, getChainMetadata } from "../../utils";
@@ -16,6 +17,7 @@ export default async function Page(props: {
   const params = await props.params;
   const chain = await getChain(params.chain_id);
   const chainMetadata = await getChainMetadata(chain.chainId);
+  const client = getClientThirdwebClient();
   const isDeprecated = chain.status === "deprecated";
 
   const account = await getRawAccount();
@@ -42,9 +44,9 @@ export default async function Page(props: {
 
       {/* Faucet / Buy Funds */}
       {chain.testnet ? (
-        <FaucetSection chain={chain} isLoggedIn={!!account} />
+        <FaucetSection chain={chain} isLoggedIn={!!account} client={client} />
       ) : chain.services.find((c) => c.service === "pay" && c.enabled) ? (
-        <BuyFundsSection chain={chain} />
+        <BuyFundsSection chain={chain} client={client} />
       ) : null}
 
       {/* Chain Overview */}

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/cancel-tab.tsx

@@ -30,6 +30,7 @@ export const CancelTab: React.FC<CancelTabProps> = ({
   return (
     <div className="flex flex-col gap-3 pt-3">
       <TransactionButton
+        client={contract.client}
         isLoggedIn={isLoggedIn}
         txChainID={contract.chain.id}
         transactionCount={1}

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/list-form.tsx

@@ -485,6 +485,7 @@ export const CreateListingsForm: React.FC<CreateListingsFormProps> = ({
                 >
                   <FormLabel>Contract address</FormLabel>
                   <SolidityInput
+                    client={contract.client}
                     solidityType="address"
                     formContext={form}
                     {...form.register("selected.contractAddress", {
@@ -558,6 +559,7 @@ export const CreateListingsForm: React.FC<CreateListingsFormProps> = ({
                           width="140px"
                           height="140px"
                           requireInteraction
+                          client={contract.client}
                         />
                       </Box>
                     </Tooltip>
@@ -658,6 +660,7 @@ export const CreateListingsForm: React.FC<CreateListingsFormProps> = ({
           Cancel
         </Button>
         <TransactionButton
+          client={contract.client}
           isLoggedIn={isLoggedIn}
           txChainID={contract.chain.id}
           isPending={isFormLoading}

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/listing-drawer.tsx

@@ -51,6 +51,7 @@ export const ListingDrawer: React.FC<NFTDrawerProps> = ({
         <div className="flex flex-row gap-6">
           <NFTMediaWithEmptyState
             metadata={renderData.asset.metadata}
+            client={contract.client}
             requireInteraction
             width="150px"
             height="150px"
@@ -92,7 +93,10 @@ export const ListingDrawer: React.FC<NFTDrawerProps> = ({
                 <p className="font-bold">Seller</p>
               </GridItem>
               <GridItem colSpan={9}>
-                <WalletAddress address={renderData.creatorAddress} />
+                <WalletAddress
+                  address={renderData.creatorAddress}
+                  client={contract.client}
+                />
               </GridItem>
               <GridItem colSpan={3}>
                 <p className="font-bold">Listing ID</p>

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/marketplace-table.tsx

@@ -40,49 +40,6 @@ import { min } from "thirdweb/utils";
 import { ListingDrawer } from "./listing-drawer";
 import { LISTING_STATUS } from "./types";
 
-const tableColumns: Column<DirectListing | EnglishAuction>[] = [
-  {
-    Header: "Listing Id",
-    accessor: (row) => row.id.toString(),
-  },
-  {
-    Header: "Media",
-    accessor: (row) => row.asset.metadata,
-    // biome-ignore lint/suspicious/noExplicitAny: FIXME
-    Cell: (cell: any) => <MediaCell cell={cell} />,
-  },
-  {
-    Header: "Name",
-    accessor: (row) => row.asset.metadata.name ?? "N/A",
-  },
-  {
-    Header: "Creator",
-    accessor: (row) => row.creatorAddress,
-    // biome-ignore lint/suspicious/noExplicitAny: FIXME
-    Cell: ({ cell }: { cell: Cell<any, string> }) => (
-      <WalletAddress address={cell.value} />
-    ),
-  },
-  {
-    Header: "Price",
-    accessor: (row) =>
-      (row as DirectListing)?.currencyValuePerToken ||
-      (row as EnglishAuction)?.buyoutCurrencyValue,
-    // biome-ignore lint/suspicious/noExplicitAny: FIXME
-    Cell: ({ cell }: { cell: Cell<any, any> }) => {
-      return (
-        <p className="whitespace-nowrap text-muted-foreground">
-          {cell.value.displayValue} {cell.value.symbol}
-        </p>
-      );
-    },
-  },
-  {
-    Header: "Status",
-    accessor: (row) => LISTING_STATUS[row.status],
-  },
-];
-
 interface MarketplaceTableProps {
   contract: ThirdwebContract;
   getAllQueryResult: UseQueryResult<DirectListing[] | EnglishAuction[]>;
@@ -132,6 +89,51 @@ export const MarketplaceTable: React.FC<MarketplaceTableProps> = ({
     return getValidQueryResult?.data || prevData;
   }, [getAllQueryResult, getValidQueryResult, listingsToShow, prevData]);
 
+  const tableColumns: Column<DirectListing | EnglishAuction>[] = useMemo(() => {
+    return [
+      {
+        Header: "Listing Id",
+        accessor: (row) => row.id.toString(),
+      },
+      {
+        Header: "Media",
+        accessor: (row) => row.asset.metadata,
+        // biome-ignore lint/suspicious/noExplicitAny: FIXME
+        Cell: (cell: any) => <MediaCell cell={cell} client={contract.client} />,
+      },
+      {
+        Header: "Name",
+        accessor: (row) => row.asset.metadata.name ?? "N/A",
+      },
+      {
+        Header: "Creator",
+        accessor: (row) => row.creatorAddress,
+        // biome-ignore lint/suspicious/noExplicitAny: FIXME
+        Cell: ({ cell }: { cell: Cell<any, string> }) => (
+          <WalletAddress address={cell.value} client={contract.client} />
+        ),
+      },
+      {
+        Header: "Price",
+        accessor: (row) =>
+          (row as DirectListing)?.currencyValuePerToken ||
+          (row as EnglishAuction)?.buyoutCurrencyValue,
+        // biome-ignore lint/suspicious/noExplicitAny: FIXME
+        Cell: ({ cell }: { cell: Cell<any, any> }) => {
+          return (
+            <p className="whitespace-nowrap text-muted-foreground">
+              {cell.value.displayValue} {cell.value.symbol}
+            </p>
+          );
+        },
+      },
+      {
+        Header: "Status",
+        accessor: (row) => LISTING_STATUS[row.status],
+      },
+    ];
+  }, [contract.client]);
+
   const {
     getTableProps,
     getTableBodyProps,
@@ -235,7 +237,7 @@ export const MarketplaceTable: React.FC<MarketplaceTableProps> = ({
                   </Th>
                 ))}
                 {/* // Need to add an empty header for the drawer button */}
-                <Th border="none" />
+                <Th border="none" key="drawer" />
               </Tr>
             ))}
           </Thead>

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

@@ -1,6 +1,7 @@
 "use client";
 
 import type { ThirdwebContract } from "thirdweb";
+import type { ProjectMeta } from "../../../../../../team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/types";
 import { ErrorPage, LoadingPage } from "../../_components/page-skeletons";
 import { RedirectToContractOverview } from "../../_components/redirect-contract-overview.client";
 import { useContractPageMetadata } from "../../_hooks/useContractPageMetadata";
@@ -9,6 +10,7 @@ import { ContractDirectListingsPage } from "./ContractDirectListingsPage";
 export function ContractDirectListingsPageClient(props: {
   contract: ThirdwebContract;
   isLoggedIn: boolean;
+  projectMeta: ProjectMeta | undefined;
 }) {
   const metadataQuery = useContractPageMetadata(props.contract);
 
@@ -21,7 +23,12 @@ export function ContractDirectListingsPageClient(props: {
   }
 
   if (!metadataQuery.data.isDirectListingSupported) {
-    return <RedirectToContractOverview contract={props.contract} />;
+    return (
+      <RedirectToContractOverview
+        contract={props.contract}
+        projectMeta={props.projectMeta}
+      />
+    );
   }
 
   return (

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

@@ -1,45 +1,18 @@
-import { notFound, redirect } from "next/navigation";
 import { getRawAccount } from "../../../../../../account/settings/getAccount";
-import { getContractPageParamsInfo } from "../../_utils/getContractFromParams";
-import { getContractPageMetadata } from "../../_utils/getContractPageMetadata";
-import { ContractDirectListingsPage } from "./ContractDirectListingsPage";
-import { ContractDirectListingsPageClient } from "./ContractDirectListingsPage.client";
+import type { PublicContractPageParams } from "../../types";
+import { SharedDirectListingsPage } from "./shared-direct-listings-page";
 
 export default async function Page(props: {
-  params: Promise<{
-    contractAddress: string;
-    chain_id: string;
-  }>;
+  params: Promise<PublicContractPageParams>;
 }) {
-  const params = await props.params;
-  const account = await getRawAccount();
-  const info = await getContractPageParamsInfo(params);
-
-  if (!info) {
-    notFound();
-  }
-
-  if (info.isLocalhostChain) {
-    return (
-      <ContractDirectListingsPageClient
-        contract={info.clientContract}
-        isLoggedIn={!!account}
-      />
-    );
-  }
-
-  const { isDirectListingSupported, isInsightSupported } =
-    await getContractPageMetadata(info.serverContract);
-
-  if (!isDirectListingSupported) {
-    redirect(`/${params.chain_id}/${params.contractAddress}`);
-  }
+  const [params, account] = await Promise.all([props.params, getRawAccount()]);
 
   return (
-    <ContractDirectListingsPage
-      contract={info.clientContract}
+    <SharedDirectListingsPage
+      contractAddress={params.contractAddress}
+      chainIdOrSlug={params.chain_id}
+      projectMeta={undefined}
       isLoggedIn={!!account}
-      isInsightSupported={isInsightSupported}
     />
   );
 }

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

@@ -0,0 +1,53 @@
+import { notFound } from "next/navigation";
+import type { ProjectMeta } from "../../../../../../team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/types";
+import { redirectToContractLandingPage } from "../../../../../../team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/utils";
+import { getContractPageParamsInfo } from "../../_utils/getContractFromParams";
+import { getContractPageMetadata } from "../../_utils/getContractPageMetadata";
+import { ContractDirectListingsPage } from "./ContractDirectListingsPage";
+import { ContractDirectListingsPageClient } from "./ContractDirectListingsPage.client";
+
+export async function SharedDirectListingsPage(props: {
+  contractAddress: string;
+  chainIdOrSlug: string;
+  projectMeta: ProjectMeta | undefined;
+  isLoggedIn: boolean;
+}) {
+  const info = await getContractPageParamsInfo({
+    contractAddress: props.contractAddress,
+    chainIdOrSlug: props.chainIdOrSlug,
+    teamId: props.projectMeta?.teamId,
+  });
+
+  if (!info) {
+    notFound();
+  }
+
+  if (info.isLocalhostChain) {
+    return (
+      <ContractDirectListingsPageClient
+        contract={info.clientContract}
+        isLoggedIn={props.isLoggedIn}
+        projectMeta={props.projectMeta}
+      />
+    );
+  }
+
+  const { isDirectListingSupported, isInsightSupported } =
+    await getContractPageMetadata(info.serverContract);
+
+  if (!isDirectListingSupported) {
+    redirectToContractLandingPage({
+      chainIdOrSlug: props.chainIdOrSlug,
+      contractAddress: props.contractAddress,
+      projectMeta: props.projectMeta,
+    });
+  }
+
+  return (
+    <ContractDirectListingsPage
+      contract={info.clientContract}
+      isLoggedIn={props.isLoggedIn}
+      isInsightSupported={isInsightSupported}
+    />
+  );
+}

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

@@ -1,6 +1,7 @@
 "use client";
 
 import type { ThirdwebContract } from "thirdweb";
+import type { ProjectMeta } from "../../../../../../team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/types";
 import { ErrorPage, LoadingPage } from "../../_components/page-skeletons";
 import { RedirectToContractOverview } from "../../_components/redirect-contract-overview.client";
 import { useContractPageMetadata } from "../../_hooks/useContractPageMetadata";
@@ -9,6 +10,7 @@ import { ContractEnglishAuctionsPage } from "./ContractEnglishAuctionsPage";
 export function ContractEnglishAuctionsPageClient(props: {
   contract: ThirdwebContract;
   isLoggedIn: boolean;
+  projectMeta: ProjectMeta | undefined;
 }) {
   const metadataQuery = useContractPageMetadata(props.contract);
 
@@ -21,7 +23,12 @@ export function ContractEnglishAuctionsPageClient(props: {
   }
 
   if (!metadataQuery.data.isEnglishAuctionSupported) {
-    return <RedirectToContractOverview contract={props.contract} />;
+    return (
+      <RedirectToContractOverview
+        contract={props.contract}
+        projectMeta={props.projectMeta}
+      />
+    );
   }
 
   return (

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

@@ -1,46 +1,18 @@
-import { notFound, redirect } from "next/navigation";
 import { getRawAccount } from "../../../../../../account/settings/getAccount";
-import { getContractPageParamsInfo } from "../../_utils/getContractFromParams";
-import { getContractPageMetadata } from "../../_utils/getContractPageMetadata";
-import { ContractEnglishAuctionsPage } from "./ContractEnglishAuctionsPage";
-import { ContractEnglishAuctionsPageClient } from "./ContractEnglishAuctionsPage.client";
+import type { PublicContractPageParams } from "../../types";
+import { SharedEnglishAuctionsPage } from "./shared-english-auctions-page";
 
 export default async function Page(props: {
-  params: Promise<{
-    contractAddress: string;
-    chain_id: string;
-  }>;
+  params: Promise<PublicContractPageParams>;
 }) {
-  const params = await props.params;
-  const info = await getContractPageParamsInfo(params);
-
-  if (!info) {
-    notFound();
-  }
-
-  const twAccount = await getRawAccount();
-
-  if (info.isLocalhostChain) {
-    return (
-      <ContractEnglishAuctionsPageClient
-        contract={info.clientContract}
-        isLoggedIn={!!twAccount}
-      />
-    );
-  }
-
-  const { isEnglishAuctionSupported, isInsightSupported } =
-    await getContractPageMetadata(info.serverContract);
-
-  if (!isEnglishAuctionSupported) {
-    redirect(`/${params.chain_id}/${params.contractAddress}`);
-  }
+  const [params, account] = await Promise.all([props.params, getRawAccount()]);
 
   return (
-    <ContractEnglishAuctionsPage
-      contract={info.clientContract}
-      isLoggedIn={!!twAccount}
-      isInsightSupported={isInsightSupported}
+    <SharedEnglishAuctionsPage
+      contractAddress={params.contractAddress}
+      chainIdOrSlug={params.chain_id}
+      projectMeta={undefined}
+      isLoggedIn={!!account}
     />
   );
 }

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

@@ -0,0 +1,52 @@
+import { notFound } from "next/navigation";
+import type { ProjectMeta } from "../../../../../../team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/types";
+import { redirectToContractLandingPage } from "../../../../../../team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/utils";
+import { getContractPageParamsInfo } from "../../_utils/getContractFromParams";
+import { getContractPageMetadata } from "../../_utils/getContractPageMetadata";
+import { ContractEnglishAuctionsPage } from "./ContractEnglishAuctionsPage";
+import { ContractEnglishAuctionsPageClient } from "./ContractEnglishAuctionsPage.client";
+
+export async function SharedEnglishAuctionsPage(props: {
+  contractAddress: string;
+  chainIdOrSlug: string;
+  projectMeta: ProjectMeta | undefined;
+  isLoggedIn: boolean;
+}) {
+  const info = await getContractPageParamsInfo({
+    contractAddress: props.contractAddress,
+    chainIdOrSlug: props.chainIdOrSlug,
+    teamId: props.projectMeta?.teamId,
+  });
+
+  if (!info) {
+    notFound();
+  }
+
+  if (info.isLocalhostChain) {
+    return (
+      <ContractEnglishAuctionsPageClient
+        contract={info.clientContract}
+        isLoggedIn={props.isLoggedIn}
+        projectMeta={props.projectMeta}
+      />
+    );
+  }
+
+  const metadata = await getContractPageMetadata(info.serverContract);
+
+  if (!metadata.isEnglishAuctionSupported) {
+    redirectToContractLandingPage({
+      contractAddress: props.contractAddress,
+      chainIdOrSlug: props.chainIdOrSlug,
+      projectMeta: props.projectMeta,
+    });
+  }
+
+  return (
+    <ContractEnglishAuctionsPage
+      contract={info.clientContract}
+      isLoggedIn={props.isLoggedIn}
+      isInsightSupported={metadata.isInsightSupported}
+    />
+  );
+}

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/NFTCards.tsx

@@ -1,8 +1,10 @@
 import { SkeletonContainer } from "@/components/ui/skeleton";
 import { TrackedLinkTW } from "@/components/ui/tracked-link";
 import { useMemo } from "react";
-import { type NFT, ZERO_ADDRESS } from "thirdweb";
+import { type NFT, type ThirdwebClient, ZERO_ADDRESS } from "thirdweb";
 import { NFTMediaWithEmptyState } from "tw-components/nft-media";
+import type { ProjectMeta } from "../../../../../team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/types";
+import { buildContractPagePath } from "../_utils/contract-page-path";
 
 type NFTWithContract = NFT & { contractAddress: string; chainId: number };
 
@@ -29,6 +31,8 @@ interface NFTCardsProps {
   trackingCategory: string;
   isPending: boolean;
   allNfts?: boolean;
+  projectMeta: ProjectMeta | undefined;
+  client: ThirdwebClient;
 }
 
 export const NFTCards: React.FC<NFTCardsProps> = ({
@@ -36,6 +40,8 @@ export const NFTCards: React.FC<NFTCardsProps> = ({
   trackingCategory,
   isPending,
   allNfts,
+  projectMeta,
+  client,
 }) => {
   const dummyData = useMemo(() => {
     return Array.from({
@@ -69,6 +75,7 @@ export const NFTCards: React.FC<NFTCardsProps> = ({
                       requireInteraction
                       width="100%"
                       height="100%"
+                      client={client}
                     />
                   );
                 }}
@@ -87,7 +94,12 @@ export const NFTCards: React.FC<NFTCardsProps> = ({
                       <TrackedLinkTW
                         category={trackingCategory}
                         label="view_nft"
-                        href={`/${token.chainId}/${token.contractAddress}/nfts/${tokenId}`}
+                        href={buildContractPagePath({
+                          projectMeta,
+                          chainIdOrSlug: token.chainId.toString(),
+                          contractAddress: token.contractAddress,
+                          subpath: `/nfts/${tokenId}`,
+                        })}
                         className="before:absolute before:inset-0"
                       >
                         {v.name}

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

@@ -528,6 +528,7 @@ export const ClaimConditionsForm: React.FC<ClaimConditionsFormProps> = ({
                     form.setValue(`phases.${index}.snapshot`, snapshot)
                   }
                   isDisabled={!canEditForm}
+                  client={contract.client}
                 />
 
                 <ClaimsConditionFormContext.Provider
@@ -658,6 +659,7 @@ export const ClaimConditionsForm: React.FC<ClaimConditionsFormProps> = ({
                   hasRemovedPhases ||
                   !isMultiPhase ? (
                     <TransactionButton
+                      client={contract.client}
                       isLoggedIn={isLoggedIn}
                       txChainID={contract.chain.id}
                       transactionCount={1}

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

@@ -94,6 +94,7 @@ export const ResetClaimEligibility: React.FC<ResetClaimEligibilityProps> = ({
   return (
     <AdminOnly contract={contract} fallback={<div className="pb-5" />}>
       <TransactionButton
+        client={contract.client}
         isLoggedIn={isLoggedIn}
         transactionCount={1}
         type="button"

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

@@ -14,7 +14,7 @@ import { useCsvUpload } from "hooks/useCsvUpload";
 import { CircleAlertIcon, DownloadIcon, UploadIcon } from "lucide-react";
 import { useRef } from "react";
 import type { Column } from "react-table";
-import { ZERO_ADDRESS } from "thirdweb";
+import { type ThirdwebClient, ZERO_ADDRESS } from "thirdweb";
 import { CsvDataTable } from "../csv-data-table";
 
 interface SnapshotAddressInput {
@@ -30,6 +30,7 @@ interface SnapshotUploadProps {
   isDisabled: boolean;
   value?: SnapshotAddressInput[] | undefined;
   onClose: () => void;
+  client: ThirdwebClient;
 }
 
 const csvParser = (items: SnapshotAddressInput[]): SnapshotAddressInput[] => {
@@ -49,6 +50,7 @@ const SnapshotViewerSheetContent: React.FC<SnapshotUploadProps> = ({
   isDisabled,
   value,
   onClose,
+  client,
 }) => {
   const {
     normalizeQuery,
@@ -59,7 +61,11 @@ const SnapshotViewerSheetContent: React.FC<SnapshotUploadProps> = ({
     noCsv,
     reset,
     removeInvalid,
-  } = useCsvUpload<SnapshotAddressInput>({ csvParser, defaultRawData: value });
+  } = useCsvUpload<SnapshotAddressInput>({
+    csvParser,
+    defaultRawData: value,
+    client,
+  });
 
   const paginationPortalRef = useRef<HTMLDivElement>(null);
   const normalizeData = normalizeQuery.data;

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

@@ -3,10 +3,13 @@
 import { useDashboardRouter } from "@/lib/DashboardRouter";
 import { useEffect, useRef } from "react";
 import type { ThirdwebContract } from "thirdweb";
+import type { ProjectMeta } from "../../../../../team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/types";
+import { buildContractPagePath } from "../_utils/contract-page-path";
 import { LoadingPage } from "./page-skeletons";
 
 export function RedirectToContractOverview(props: {
   contract: ThirdwebContract;
+  projectMeta: ProjectMeta | undefined;
 }) {
   const router = useDashboardRouter();
   const redirected = useRef(false);
@@ -17,8 +20,14 @@ export function RedirectToContractOverview(props: {
       return;
     }
     redirected.current = true;
-    router.replace(`/${props.contract.chain.id}/${props.contract.address}`);
-  }, [router, props.contract]);
+    const landingPage = buildContractPagePath({
+      projectMeta: props.projectMeta,
+      chainIdOrSlug: props.contract.chain.id.toString(),
+      contractAddress: props.contract.address,
+    });
+
+    router.replace(landingPage);
+  }, [router, props]);
 
   return <LoadingPage />;
 }

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

@@ -6,9 +6,11 @@ import { ConfigureNetworks } from "components/configure-networks/ConfigureNetwor
 import { CheckIcon, CircleAlertIcon, RotateCcwIcon } from "lucide-react";
 import { useState } from "react";
 import { addChainOverrides } from "stores/chainStores";
+import type { ThirdwebClient } from "thirdweb";
 
 export function ConfigureCustomChain(props: {
   chainSlug: string;
+  client: ThirdwebClient;
 }) {
   const { chainSlug } = props;
   const isSlugNumber = Number.isInteger(Number(chainSlug));
@@ -61,6 +63,7 @@ export function ConfigureCustomChain(props: {
             }
           }}
           editChain={undefined}
+          client={props.client}
         />
       </div>
     </div>

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

@@ -43,7 +43,6 @@ export async function getContractMetadataHeaderData(
     fetchDashboardContractMetadata(contract),
     fetchPublishedContractsFromDeploy({
       contract,
-      client: contract.client,
     }),
   ]);
 

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

@@ -2,8 +2,9 @@
 
 import { useQuery } from "@tanstack/react-query";
 import type { MinimalTeamsAndProjects } from "components/contract-components/contract-deploy-form/add-to-project-card";
-import type { ThirdwebClient, ThirdwebContract } from "thirdweb";
+import type { ThirdwebContract } from "thirdweb";
 import type { ChainMetadata } from "thirdweb/chains";
+import type { ProjectMeta } from "../../../../../team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/types";
 import { ErrorPage, LoadingPage } from "../_components/page-skeletons";
 import { useContractPageMetadata } from "../_hooks/useContractPageMetadata";
 import { getContractPageSidebarLinks } from "../_utils/getContractPageSidebarLinks";
@@ -15,7 +16,7 @@ export function ContractPageLayoutClient(props: {
   contract: ThirdwebContract;
   children: React.ReactNode;
   teamsAndProjects: MinimalTeamsAndProjects | undefined;
-  client: ThirdwebClient;
+  projectMeta: ProjectMeta | undefined;
 }) {
   const metadataQuery = useContractPageMetadata(props.contract);
   const headerMetadataQuery = useQuery({
@@ -39,6 +40,7 @@ export function ContractPageLayoutClient(props: {
     chainSlug: props.chainMetadata.slug,
     contractAddress: props.contract.address,
     metadata: metadataQuery.data,
+    projectMeta: props.projectMeta,
   });
 
   return (

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

@@ -4,8 +4,9 @@ import { SidebarLayout } from "@/components/blocks/SidebarLayout";
 import type { DashboardContractMetadata } from "@3rdweb-sdk/react/hooks/useDashboardContractMetadata";
 import type { MinimalTeamsAndProjects } from "components/contract-components/contract-deploy-form/add-to-project-card";
 import { DeprecatedAlert } from "components/shared/DeprecatedAlert";
-import type { ThirdwebClient, ThirdwebContract } from "thirdweb";
+import type { ThirdwebContract } from "thirdweb";
 import type { ChainMetadata } from "thirdweb/chains";
+import type { ProjectMeta } from "../../../../../team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/types";
 import { ContractMetadata } from "./contract-metadata";
 import { PrimaryDashboardButton } from "./primary-dashboard-button";
 
@@ -15,8 +16,8 @@ export function ContractPageLayout(props: {
   children: React.ReactNode;
   sidebarLinks: SidebarLink[];
   dashboardContractMetadata: DashboardContractMetadata | undefined;
-  client: ThirdwebClient;
   teamsAndProjects: MinimalTeamsAndProjects | undefined;
+  projectMeta: ProjectMeta | undefined;
   externalLinks:
     | {
         name: string;
@@ -31,7 +32,7 @@ export function ContractPageLayout(props: {
     dashboardContractMetadata,
     externalLinks,
     teamsAndProjects,
-    client,
+    projectMeta,
   } = props;
 
   return (
@@ -46,6 +47,7 @@ export function ContractPageLayout(props: {
               externalLinks={externalLinks}
             />
             <PrimaryDashboardButton
+              projectMeta={projectMeta}
               contractAddress={contract.address}
               chain={contract.chain}
               contractInfo={{
@@ -54,7 +56,7 @@ export function ContractPageLayout(props: {
                 contractAddress: contract.address,
               }}
               teamsAndProjects={teamsAndProjects}
-              client={client}
+              client={contract.client}
             />
           </div>
           <DeprecatedAlert chain={chainMetadata} />

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

@@ -82,21 +82,19 @@ export const MetadataHeader: React.FC<MetadataHeaderProps> = ({
               </h1>
             )}
 
-            {chain && (
-              <Link
-                href={`/${chain.slug}`}
-                className="flex w-fit shrink-0 items-center gap-2 rounded-3xl border border-border bg-card px-2.5 py-1.5 hover:bg-accent"
-              >
-                <ChainIconClient
-                  src={chain.icon?.url}
-                  client={client}
-                  className="size-4"
-                />
-                {cleanedChainName && (
-                  <span className="text-xs">{cleanedChainName}</span>
-                )}
-              </Link>
-            )}
+            <Link
+              href={`/${chain.slug}`}
+              className="flex w-fit shrink-0 items-center gap-2 rounded-3xl border border-border bg-card px-2.5 py-1.5 hover:bg-accent"
+            >
+              <ChainIconClient
+                src={chain.icon?.url}
+                client={client}
+                className="size-4"
+              />
+              {cleanedChainName && (
+                <span className="text-xs">{cleanedChainName}</span>
+              )}
+            </Link>
           </div>
         )}
 
@@ -115,7 +113,7 @@ export const MetadataHeader: React.FC<MetadataHeaderProps> = ({
           <CopyAddressButton
             address={address}
             copyIconPosition="left"
-            className="bg-card text-xs"
+            className="bg-card px-2.5 py-1.5 text-xs"
             variant="outline"
           />
 

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/primary-dashboard-button.tsx

@@ -26,6 +26,8 @@ import { useState } from "react";
 import { toast } from "sonner";
 import type { Chain, ThirdwebClient } from "thirdweb";
 import { useAddContractToProject } from "../../../../../team/[team_slug]/[project_slug]/(sidebar)/hooks/project-contracts";
+import type { ProjectMeta } from "../../../../../team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/types";
+import { buildContractPagePath } from "../_utils/contract-page-path";
 
 const TRACKING_CATEGORY = "add_to_dashboard_upsell";
 
@@ -36,6 +38,7 @@ type AddToDashboardCardProps = {
   hideCodePageLink?: boolean;
   teamsAndProjects: MinimalTeamsAndProjects | undefined;
   client: ThirdwebClient;
+  projectMeta: ProjectMeta | undefined;
 };
 
 export const PrimaryDashboardButton: React.FC<AddToDashboardCardProps> = ({
@@ -45,9 +48,17 @@ export const PrimaryDashboardButton: React.FC<AddToDashboardCardProps> = ({
   hideCodePageLink,
   teamsAndProjects,
   client,
+  projectMeta,
 }) => {
   const pathname = usePathname();
 
+  const codePagePath = buildContractPagePath({
+    projectMeta,
+    chainIdOrSlug: contractInfo.chainSlug,
+    contractAddress: contractAddress,
+    subpath: "/code",
+  });
+
   // if user is not logged in
   if (!teamsAndProjects) {
     if (hideCodePageLink) {
@@ -57,9 +68,7 @@ export const PrimaryDashboardButton: React.FC<AddToDashboardCardProps> = ({
     if (!pathname?.endsWith("/code")) {
       return (
         <Button variant="outline" asChild className="gap-2">
-          <Link
-            href={`/${contractInfo.chainSlug}/${contractInfo.contractAddress}/code`}
-          >
+          <Link href={codePagePath}>
             <CodeIcon className="size-4" />
             Code Snippets
           </Link>
@@ -70,6 +79,21 @@ export const PrimaryDashboardButton: React.FC<AddToDashboardCardProps> = ({
     return null;
   }
 
+  // if user is on a project page
+  if (projectMeta) {
+    return (
+      <Button variant="default" asChild>
+        <Link
+          href={`/${contractInfo.chainSlug}/${contractAddress}`}
+          target="_blank"
+          className="gap-2"
+        >
+          View Asset Page <ExternalLinkIcon className="size-3.5" />
+        </Link>
+      </Button>
+    );
+  }
+
   return (
     <AddToProjectButton
       contractAddress={contractAddress}

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_utils/contract-page-path.ts

@@ -0,0 +1,15 @@
+import type { ProjectMeta } from "../../../../../team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/types";
+
+export function buildContractPagePath(params: {
+  projectMeta: ProjectMeta | undefined;
+  chainIdOrSlug: string;
+  contractAddress: string;
+  subpath?: `/${string}`;
+}) {
+  const { projectMeta, chainIdOrSlug, contractAddress, subpath } = params;
+  if (projectMeta) {
+    return `/team/${projectMeta.teamSlug}/${projectMeta.projectSlug}/contract/${chainIdOrSlug}/${contractAddress}${subpath || ""}`;
+  }
+
+  return `/${chainIdOrSlug}/${contractAddress}${subpath || ""}`;
+}

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

@@ -7,10 +7,11 @@ import { getUserThirdwebClient } from "../../../../../api/lib/getAuthToken";
 
 export async function getContractPageParamsInfo(params: {
   contractAddress: string;
-  chain_id: string;
+  chainIdOrSlug: string;
+  teamId: string | undefined;
 }) {
   const contractAddress = getCheckSummedAddress(params.contractAddress);
-  const chainSlugOrId = params.chain_id;
+  const chainSlugOrId = params.chainIdOrSlug;
   const chainMetadata = await fetchChainWithLocalOverrides(chainSlugOrId);
 
   if (!chainMetadata) {
@@ -31,7 +32,9 @@ export async function getContractPageParamsInfo(params: {
     // eslint-disable-next-line no-restricted-syntax
     chain: mapV4ChainToV5Chain(chainMetadata),
     // if we have the auth token pass it into the client
-    client: await getUserThirdwebClient(),
+    client: await getUserThirdwebClient({
+      teamId: params.teamId,
+    }),
   });
 
   return {

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

@@ -1,4 +1,6 @@
 import type { SidebarBaseLink, SidebarLink } from "@/components/blocks/Sidebar";
+import type { ProjectMeta } from "../../../../../team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/types";
+import { buildContractPagePath } from "./contract-page-path";
 import type { ContractPageMetadata } from "./getContractPageMetadata";
 
 type SidebarBaseLinkWithHide = SidebarBaseLink & {
@@ -9,8 +11,13 @@ export function getContractPageSidebarLinks(data: {
   metadata: ContractPageMetadata;
   contractAddress: string;
   chainSlug: string;
+  projectMeta: ProjectMeta | undefined;
 }) {
-  const layoutPrefix = `/${data.chainSlug}/${data.contractAddress}`;
+  const layoutPrefix = buildContractPagePath({
+    projectMeta: data.projectMeta,
+    chainIdOrSlug: data.chainSlug,
+    contractAddress: data.contractAddress,
+  });
 
   const generalLinks: SidebarBaseLinkWithHide[] = [
     {

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

@@ -0,0 +1,31 @@
+import { resolveFunctionSelectors } from "lib/selectors";
+import type { ThirdwebContract } from "thirdweb";
+import { isERC20 } from "thirdweb/extensions/erc20";
+
+export type NewPublicPageType = "erc20";
+
+export async function shouldRenderNewPublicPage(
+  contract: ThirdwebContract,
+): Promise<false | { type: NewPublicPageType }> {
+  try {
+    const functionSelectors = await resolveFunctionSelectors(contract).catch(
+      () => undefined,
+    );
+
+    if (!functionSelectors) {
+      return false;
+    }
+
+    const isERC20Contract = isERC20(functionSelectors);
+
+    if (isERC20Contract) {
+      return {
+        type: "erc20",
+      };
+    }
+
+    return false;
+  } catch {
+    return false;
+  }
+}

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

@@ -1,6 +1,7 @@
 "use client";
 
 import type { ThirdwebContract } from "thirdweb";
+import type { ProjectMeta } from "../../../../../team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/types";
 import { ErrorPage, LoadingPage } from "../_components/page-skeletons";
 import { RedirectToContractOverview } from "../_components/redirect-contract-overview.client";
 import { useContractPageMetadata } from "../_hooks/useContractPageMetadata";
@@ -8,6 +9,7 @@ import { AccountSigners } from "./components/account-signers";
 
 export function AccountSignersClient(props: {
   contract: ThirdwebContract;
+  projectMeta: ProjectMeta | undefined;
 }) {
   const metadataQuery = useContractPageMetadata(props.contract);
 
@@ -20,7 +22,12 @@ export function AccountSignersClient(props: {
   }
 
   if (!metadataQuery.data.isAccountPermissionsSupported) {
-    return <RedirectToContractOverview contract={props.contract} />;
+    return (
+      <RedirectToContractOverview
+        contract={props.contract}
+        projectMeta={props.projectMeta}
+      />
+    );
   }
 
   return <AccountSigners contract={props.contract} />;

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

@@ -3,6 +3,7 @@ import { Badge } from "@/components/ui/badge";
 import { Flex, SimpleGrid, useBreakpointValue } from "@chakra-ui/react";
 import { formatDistance } from "date-fns/formatDistance";
 import { useAllChainsData } from "hooks/chains/allChains";
+import type { ThirdwebClient } from "thirdweb";
 import { useActiveAccount } from "thirdweb/react";
 import { Card, Heading, Text } from "tw-components";
 
@@ -16,11 +17,13 @@ export type AccountSignerType = {
 interface AccountSignerProps {
   item: AccountSignerType;
   contractChainId: number;
+  client: ThirdwebClient;
 }
 
 export const AccountSigner: React.FC<AccountSignerProps> = ({
   item,
   contractChainId,
+  client,
 }) => {
   const address = useActiveAccount()?.address;
   const { idToChain } = useAllChainsData();
@@ -43,7 +46,11 @@ export const AccountSigner: React.FC<AccountSignerProps> = ({
             flexDir={{ base: "column", lg: "row" }}
           >
             <Heading size="label.lg">
-              <WalletAddress shortenAddress={isMobile} address={signer} />
+              <WalletAddress
+                shortenAddress={isMobile}
+                address={signer}
+                client={client}
+              />
             </Heading>
             <div className="flex flex-row gap-2">
               {isAdmin ? <Badge>Admin Key</Badge> : <Badge>Scoped key</Badge>}

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

@@ -40,6 +40,7 @@ export const AccountSigners: React.FC<AccountSignersProps> = ({ contract }) => {
           <AccountSigner
             key={item.signer}
             item={item}
+            client={contract.client}
             contractChainId={contract.chain.id}
           />
         ))}

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

@@ -1,34 +1,15 @@
-import { notFound, redirect } from "next/navigation";
-import { getContractPageParamsInfo } from "../_utils/getContractFromParams";
-import { getContractPageMetadata } from "../_utils/getContractPageMetadata";
-import { AccountSignersClient } from "./AccountSigners.client";
-import { AccountSigners } from "./components/account-signers";
+import type { PublicContractPageParams } from "../types";
+import { SharedContractAccountPermissionsPage } from "./shared-account-permissions-page";
 
 export default async function Page(props: {
-  params: Promise<{
-    contractAddress: string;
-    chain_id: string;
-  }>;
+  params: Promise<PublicContractPageParams>;
 }) {
   const params = await props.params;
-  const info = await getContractPageParamsInfo(params);
-
-  if (!info) {
-    notFound();
-  }
-
-  const { clientContract, serverContract, isLocalhostChain } = info;
-
-  if (isLocalhostChain) {
-    return <AccountSignersClient contract={clientContract} />;
-  }
-
-  const { isAccountPermissionsSupported } =
-    await getContractPageMetadata(serverContract);
-
-  if (!isAccountPermissionsSupported) {
-    redirect(`/${params.chain_id}/${params.contractAddress}`);
-  }
-
-  return <AccountSigners contract={clientContract} />;
+  return (
+    <SharedContractAccountPermissionsPage
+      contractAddress={params.contractAddress}
+      chainIdOrSlug={params.chain_id}
+      projectMeta={undefined}
+    />
+  );
 }

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

@@ -0,0 +1,47 @@
+import { notFound } from "next/navigation";
+import type { ProjectMeta } from "../../../../../team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/types";
+import { redirectToContractLandingPage } from "../../../../../team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/utils";
+import { getContractPageParamsInfo } from "../_utils/getContractFromParams";
+import { getContractPageMetadata } from "../_utils/getContractPageMetadata";
+import { AccountSignersClient } from "./AccountSigners.client";
+import { AccountSigners } from "./components/account-signers";
+
+export async function SharedContractAccountPermissionsPage(props: {
+  contractAddress: string;
+  chainIdOrSlug: string;
+  projectMeta: ProjectMeta | undefined;
+}) {
+  const info = await getContractPageParamsInfo({
+    contractAddress: props.contractAddress,
+    chainIdOrSlug: props.chainIdOrSlug,
+    teamId: props.projectMeta?.teamId,
+  });
+
+  if (!info) {
+    notFound();
+  }
+
+  const { clientContract, serverContract, isLocalhostChain } = info;
+
+  if (isLocalhostChain) {
+    return (
+      <AccountSignersClient
+        contract={clientContract}
+        projectMeta={props.projectMeta}
+      />
+    );
+  }
+
+  const { isAccountPermissionsSupported } =
+    await getContractPageMetadata(serverContract);
+
+  if (!isAccountPermissionsSupported) {
+    redirectToContractLandingPage({
+      chainIdOrSlug: props.chainIdOrSlug,
+      contractAddress: props.contractAddress,
+      projectMeta: props.projectMeta,
+    });
+  }
+
+  return <AccountSigners contract={clientContract} />;
+}

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

@@ -2,6 +2,7 @@
 
 import type { ThirdwebContract } from "thirdweb";
 import type { ChainMetadata } from "thirdweb/chains";
+import type { ProjectMeta } from "../../../../../team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/types";
 import { ErrorPage, LoadingPage } from "../_components/page-skeletons";
 import { RedirectToContractOverview } from "../_components/redirect-contract-overview.client";
 import { useContractPageMetadata } from "../_hooks/useContractPageMetadata";
@@ -11,6 +12,7 @@ export function AccountPageClient(props: {
   contract: ThirdwebContract;
   chainMetadata: ChainMetadata;
   isLoggedIn: boolean;
+  projectMeta: ProjectMeta | undefined;
 }) {
   const metadataQuery = useContractPageMetadata(props.contract);
 
@@ -23,7 +25,12 @@ export function AccountPageClient(props: {
   }
 
   if (!metadataQuery.data.isAccount) {
-    return <RedirectToContractOverview contract={props.contract} />;
+    return (
+      <RedirectToContractOverview
+        contract={props.contract}
+        projectMeta={props.projectMeta}
+      />
+    );
   }
 
   return (
@@ -32,6 +39,7 @@ export function AccountPageClient(props: {
       chainMetadata={props.chainMetadata}
       isLoggedIn={props.isLoggedIn}
       isInsightSupported={metadataQuery.data.isInsightSupported}
+      projectMeta={props.projectMeta}
     />
   );
 }

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

@@ -3,6 +3,7 @@
 import type { ThirdwebContract } from "thirdweb";
 import type { ChainMetadata } from "thirdweb/chains";
 import { Heading } from "tw-components";
+import type { ProjectMeta } from "../../../../../team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/types";
 import { AccountBalance } from "./components/account-balance";
 import { DepositNative } from "./components/deposit-native";
 import { NftsOwned } from "./components/nfts-owned";
@@ -12,6 +13,7 @@ interface AccountPageProps {
   chainMetadata: ChainMetadata;
   isLoggedIn: boolean;
   isInsightSupported: boolean;
+  projectMeta: ProjectMeta | undefined;
 }
 
 export const AccountPage: React.FC<AccountPageProps> = ({
@@ -19,6 +21,7 @@ export const AccountPage: React.FC<AccountPageProps> = ({
   chainMetadata,
   isLoggedIn,
   isInsightSupported,
+  projectMeta,
 }) => {
   const symbol = chainMetadata.nativeCurrency.symbol || "Native Token";
 
@@ -38,13 +41,18 @@ export const AccountPage: React.FC<AccountPageProps> = ({
           address={contract.address}
           symbol={symbol}
           chain={chainMetadata}
+          client={contract.client}
         />
       )}
 
       <div className="flex flex-row items-center justify-between">
         <Heading size="title.sm">NFTs owned</Heading>
       </div>
-      <NftsOwned contract={contract} isInsightSupported={isInsightSupported} />
+      <NftsOwned
+        contract={contract}
+        isInsightSupported={isInsightSupported}
+        projectMeta={projectMeta}
+      />
     </div>
   );
 };

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/account/components/deposit-native.tsx

@@ -1,12 +1,11 @@
 "use client";
 
-import { useThirdwebClient } from "@/constants/thirdweb.client";
 import { Input } from "@chakra-ui/react";
 import { TransactionButton } from "components/buttons/TransactionButton";
 import { useV5DashboardChain } from "lib/v5-adapter";
 import { type ChangeEvent, useState } from "react";
 import type { StoredChain } from "stores/chainStores";
-import { prepareTransaction, toWei } from "thirdweb";
+import { type ThirdwebClient, prepareTransaction, toWei } from "thirdweb";
 import { useSendAndConfirmTransaction } from "thirdweb/react";
 import { Card } from "tw-components";
 
@@ -15,6 +14,7 @@ interface DepositNativeProps {
   symbol: string;
   chain: StoredChain;
   isLoggedIn: boolean;
+  client: ThirdwebClient;
 }
 
 export const DepositNative: React.FC<DepositNativeProps> = ({
@@ -22,8 +22,8 @@ export const DepositNative: React.FC<DepositNativeProps> = ({
   symbol,
   chain,
   isLoggedIn,
+  client,
 }) => {
-  const client = useThirdwebClient();
   const { mutate: transfer, isPending } = useSendAndConfirmTransaction();
   const [amount, setAmount] = useState("");
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
@@ -48,6 +48,7 @@ export const DepositNative: React.FC<DepositNativeProps> = ({
         value={amount}
       />
       <TransactionButton
+        client={client}
         isLoggedIn={isLoggedIn}
         txChainID={v5Chain.id}
         transactionCount={1}

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/account/components/nfts-owned.tsx

@@ -2,16 +2,19 @@
 
 import { useWalletNFTs } from "@3rdweb-sdk/react";
 import type { ThirdwebContract } from "thirdweb";
+import type { ProjectMeta } from "../../../../../../team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/types";
 import { NFTCards } from "../../_components/NFTCards";
 
 interface NftsOwnedProps {
   contract: ThirdwebContract;
   isInsightSupported: boolean;
+  projectMeta: ProjectMeta | undefined;
 }
 
 export const NftsOwned: React.FC<NftsOwnedProps> = ({
   contract,
   isInsightSupported,
+  projectMeta,
 }) => {
   const { data: walletNFTs, isPending: isWalletNFTsLoading } = useWalletNFTs({
     chainId: contract.chain.id,
@@ -24,6 +27,8 @@ export const NftsOwned: React.FC<NftsOwnedProps> = ({
 
   return nfts.length !== 0 ? (
     <NFTCards
+      client={contract.client}
+      projectMeta={projectMeta}
       nfts={nfts.map((nft) => ({
         id: BigInt(nft.id),
         supply: BigInt(nft.supply),

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

@@ -1,51 +1,17 @@
-import { notFound, redirect } from "next/navigation";
 import { getRawAccount } from "../../../../../account/settings/getAccount";
-import { getContractPageParamsInfo } from "../_utils/getContractFromParams";
-import { getContractPageMetadata } from "../_utils/getContractPageMetadata";
-import { AccountPage } from "./AccountPage";
-import { AccountPageClient } from "./AccountPage.client";
+import type { PublicContractPageParams } from "../types";
+import { SharedContractAccountPage } from "./shared-account-page";
 
 export default async function Page(props: {
-  params: Promise<{
-    contractAddress: string;
-    chain_id: string;
-  }>;
+  params: Promise<PublicContractPageParams>;
 }) {
-  const params = await props.params;
-  const info = await getContractPageParamsInfo(params);
-
-  if (!info) {
-    notFound();
-  }
-
-  const { clientContract, serverContract, chainMetadata, isLocalhostChain } =
-    info;
-
-  const account = await getRawAccount();
-
-  if (isLocalhostChain) {
-    return (
-      <AccountPageClient
-        contract={clientContract}
-        chainMetadata={chainMetadata}
-        isLoggedIn={!!account}
-      />
-    );
-  }
-
-  const { isAccount, isInsightSupported } =
-    await getContractPageMetadata(serverContract);
-
-  if (!isAccount) {
-    redirect(`/${params.chain_id}/${params.contractAddress}`);
-  }
-
+  const [params, account] = await Promise.all([props.params, getRawAccount()]);
   return (
-    <AccountPage
-      contract={clientContract}
-      chainMetadata={chainMetadata}
+    <SharedContractAccountPage
+      contractAddress={params.contractAddress}
+      chainIdOrSlug={params.chain_id}
+      projectMeta={undefined}
       isLoggedIn={!!account}
-      isInsightSupported={isInsightSupported}
     />
   );
 }

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

@@ -0,0 +1,57 @@
+import { notFound } from "next/navigation";
+import type { ProjectMeta } from "../../../../../team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/types";
+import { redirectToContractLandingPage } from "../../../../../team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/utils";
+import { getContractPageParamsInfo } from "../_utils/getContractFromParams";
+import { getContractPageMetadata } from "../_utils/getContractPageMetadata";
+import { AccountPage } from "./AccountPage";
+import { AccountPageClient } from "./AccountPage.client";
+
+export async function SharedContractAccountPage(props: {
+  contractAddress: string;
+  chainIdOrSlug: string;
+  projectMeta: ProjectMeta | undefined;
+  isLoggedIn: boolean;
+}) {
+  const info = await getContractPageParamsInfo({
+    contractAddress: props.contractAddress,
+    chainIdOrSlug: props.chainIdOrSlug,
+    teamId: props.projectMeta?.teamId,
+  });
+
+  if (!info) {
+    notFound();
+  }
+
+  if (info.isLocalhostChain) {
+    return (
+      <AccountPageClient
+        contract={info.clientContract}
+        chainMetadata={info.chainMetadata}
+        isLoggedIn={props.isLoggedIn}
+        projectMeta={props.projectMeta}
+      />
+    );
+  }
+
+  const { isAccount, isInsightSupported } = await getContractPageMetadata(
+    info.serverContract,
+  );
+
+  if (!isAccount) {
+    redirectToContractLandingPage({
+      chainIdOrSlug: props.chainIdOrSlug,
+      contractAddress: props.contractAddress,
+      projectMeta: props.projectMeta,
+    });
+  }
+
+  return (
+    <AccountPage
+      contract={info.clientContract}
+      chainMetadata={info.chainMetadata}
+      isLoggedIn={props.isLoggedIn}
+      isInsightSupported={isInsightSupported}
+      projectMeta={props.projectMeta}
+    />
+  );
+}

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

@@ -1,6 +1,7 @@
 "use client";
 
 import type { ThirdwebContract } from "thirdweb";
+import type { ProjectMeta } from "../../../../../team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/types";
 import { ErrorPage, LoadingPage } from "../_components/page-skeletons";
 import { RedirectToContractOverview } from "../_components/redirect-contract-overview.client";
 import { useContractPageMetadata } from "../_hooks/useContractPageMetadata";
@@ -9,6 +10,7 @@ import { AccountsPage } from "./AccountsPage";
 export function AccountsPageClient(props: {
   contract: ThirdwebContract;
   isLoggedIn: boolean;
+  projectMeta: ProjectMeta | undefined;
 }) {
   const metadataQuery = useContractPageMetadata(props.contract);
 
@@ -21,10 +23,19 @@ export function AccountsPageClient(props: {
   }
 
   if (!metadataQuery.data.isAccountFactory) {
-    return <RedirectToContractOverview contract={props.contract} />;
+    return (
+      <RedirectToContractOverview
+        contract={props.contract}
+        projectMeta={props.projectMeta}
+      />
+    );
   }
 
   return (
-    <AccountsPage contract={props.contract} isLoggedIn={props.isLoggedIn} />
+    <AccountsPage
+      contract={props.contract}
+      isLoggedIn={props.isLoggedIn}
+      projectMeta={props.projectMeta}
+    />
   );
 }

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

@@ -3,6 +3,7 @@
 import { ButtonGroup, Flex } from "@chakra-ui/react";
 import type { ThirdwebContract } from "thirdweb";
 import { Heading, TrackedLinkButton } from "tw-components";
+import type { ProjectMeta } from "../../../../../team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/types";
 import { AccountsCount } from "./components/accounts-count";
 import { AccountsTable } from "./components/accounts-table";
 import { CreateAccountButton } from "./components/create-account-button";
@@ -10,11 +11,13 @@ import { CreateAccountButton } from "./components/create-account-button";
 interface AccountsPageProps {
   contract: ThirdwebContract;
   isLoggedIn: boolean;
+  projectMeta: ProjectMeta | undefined;
 }
 
 export const AccountsPage: React.FC<AccountsPageProps> = ({
   contract,
   isLoggedIn,
+  projectMeta,
 }) => {
   return (
     <Flex direction="column" gap={6}>
@@ -43,7 +46,7 @@ export const AccountsPage: React.FC<AccountsPageProps> = ({
         </ButtonGroup>
       </Flex>
       <AccountsCount contract={contract} />
-      <AccountsTable contract={contract} />
+      <AccountsTable contract={contract} projectMeta={projectMeta} />
     </Flex>
   );
 };

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/accounts-count.tsx

@@ -1,16 +1,9 @@
 "use client";
 
-import {
-  SimpleGrid,
-  Skeleton,
-  Stat,
-  StatLabel,
-  StatNumber,
-} from "@chakra-ui/react";
 import type { ThirdwebContract } from "thirdweb";
 import { totalAccounts } from "thirdweb/extensions/erc4337";
 import { useReadContract } from "thirdweb/react";
-import { Card } from "tw-components";
+import { StatCard } from "../../overview/components/stat-card";
 
 type AccountsCountProps = {
   contract: ThirdwebContract;
@@ -19,13 +12,12 @@ type AccountsCountProps = {
 export const AccountsCount: React.FC<AccountsCountProps> = ({ contract }) => {
   const totalAccountsQuery = useReadContract(totalAccounts, { contract });
   return (
-    <SimpleGrid columns={{ base: 1, md: 3 }} spacing={{ base: 3, md: 6 }}>
-      <Card as={Stat}>
-        <StatLabel mb={{ base: 1, md: 0 }}>Total Accounts</StatLabel>
-        <Skeleton isLoaded={totalAccountsQuery.isSuccess}>
-          <StatNumber>{totalAccountsQuery.data?.toString()}</StatNumber>
-        </Skeleton>
-      </Card>
-    </SimpleGrid>
+    <div className="grid grid-cols-1 gap-3 md:grid-cols-3 md:gap-6">
+      <StatCard
+        label="Total Accounts"
+        value={totalAccountsQuery.data?.toString() || "0"}
+        isPending={totalAccountsQuery.isPending}
+      />
+    </div>
   );
 };

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/accounts-table.tsx

@@ -16,6 +16,8 @@ import type { ThirdwebContract } from "thirdweb";
 import { getAccounts, totalAccounts } from "thirdweb/extensions/erc4337";
 import { useReadContract } from "thirdweb/react";
 import { Text, TrackedCopyButton } from "tw-components";
+import type { ProjectMeta } from "../../../../../../team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/types";
+import { buildContractPagePath } from "../../_utils/contract-page-path";
 
 const columnHelper = createColumnHelper<{ account: string }>();
 
@@ -38,9 +40,13 @@ const columns = [
 
 type AccountsTableProps = {
   contract: ThirdwebContract;
+  projectMeta: ProjectMeta | undefined;
 };
 
-export const AccountsTable: React.FC<AccountsTableProps> = ({ contract }) => {
+export const AccountsTable: React.FC<AccountsTableProps> = ({
+  contract,
+  projectMeta,
+}) => {
   const router = useDashboardRouter();
   const chainSlug = useChainSlug(contract.chain.id);
 
@@ -92,7 +98,13 @@ export const AccountsTable: React.FC<AccountsTableProps> = ({ contract }) => {
         isPending={accountsQuery.isPending}
         isFetched={accountsQuery.isFetched}
         onRowClick={(row) => {
-          router.push(`/${chainSlug}/${row.account}`);
+          const accountContractPagePath = buildContractPagePath({
+            projectMeta,
+            chainIdOrSlug: chainSlug.toString(),
+            contractAddress: row.account,
+          });
+
+          router.push(accountContractPagePath);
         }}
       />
       {/* pagination */}

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/create-account-button.tsx

@@ -61,6 +61,7 @@ export const CreateAccountButton: React.FC<CreateAccountButtonProps> = ({
 
   return (
     <TransactionButton
+      client={contract.client}
       isLoggedIn={isLoggedIn}
       txChainID={contract.chain.id}
       onClick={() => {

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

@@ -1,41 +1,17 @@
-import { notFound, redirect } from "next/navigation";
 import { getRawAccount } from "../../../../../account/settings/getAccount";
-import { getContractPageParamsInfo } from "../_utils/getContractFromParams";
-import { getContractPageMetadata } from "../_utils/getContractPageMetadata";
-import { AccountsPage } from "./AccountsPage";
-import { AccountsPageClient } from "./AccountsPage.client";
+import type { PublicContractPageParams } from "../types";
+import { SharedAccountsPage } from "./shared-accounts-page";
 
 export default async function Page(props: {
-  params: Promise<{
-    contractAddress: string;
-    chain_id: string;
-  }>;
+  params: Promise<PublicContractPageParams>;
 }) {
-  const params = await props.params;
-  const info = await getContractPageParamsInfo(params);
-
-  if (!info) {
-    notFound();
-  }
-
-  const { clientContract, serverContract, isLocalhostChain } = info;
-
-  const [account, { isAccountFactory }] = await Promise.all([
-    getRawAccount(),
-    isLocalhostChain
-      ? { isAccountFactory: undefined }
-      : getContractPageMetadata(serverContract),
-  ]);
-
-  if (isLocalhostChain) {
-    return (
-      <AccountsPageClient contract={clientContract} isLoggedIn={!!account} />
-    );
-  }
-
-  if (!isAccountFactory) {
-    redirect(`/${params.chain_id}/${params.contractAddress}`);
-  }
-
-  return <AccountsPage contract={clientContract} isLoggedIn={!!account} />;
+  const [params, account] = await Promise.all([props.params, getRawAccount()]);
+  return (
+    <SharedAccountsPage
+      contractAddress={params.contractAddress}
+      chainIdOrSlug={params.chain_id}
+      projectMeta={undefined}
+      isLoggedIn={!!account}
+    />
+  );
 }

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

@@ -0,0 +1,54 @@
+import { notFound } from "next/navigation";
+import type { ProjectMeta } from "../../../../../team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/types";
+import { redirectToContractLandingPage } from "../../../../../team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/utils";
+import { getContractPageParamsInfo } from "../_utils/getContractFromParams";
+import { getContractPageMetadata } from "../_utils/getContractPageMetadata";
+import { AccountsPage } from "./AccountsPage";
+import { AccountsPageClient } from "./AccountsPage.client";
+
+export async function SharedAccountsPage(props: {
+  contractAddress: string;
+  chainIdOrSlug: string;
+  projectMeta: ProjectMeta | undefined;
+  isLoggedIn: boolean;
+}) {
+  const info = await getContractPageParamsInfo({
+    contractAddress: props.contractAddress,
+    chainIdOrSlug: props.chainIdOrSlug,
+    teamId: props.projectMeta?.teamId,
+  });
+
+  if (!info) {
+    notFound();
+  }
+
+  const { clientContract, serverContract, isLocalhostChain } = info;
+
+  if (isLocalhostChain) {
+    return (
+      <AccountsPageClient
+        contract={clientContract}
+        isLoggedIn={props.isLoggedIn}
+        projectMeta={props.projectMeta}
+      />
+    );
+  }
+
+  const { isAccountFactory } = await getContractPageMetadata(serverContract);
+
+  if (!isAccountFactory) {
+    redirectToContractLandingPage({
+      chainIdOrSlug: props.chainIdOrSlug,
+      contractAddress: props.contractAddress,
+      projectMeta: props.projectMeta,
+    });
+  }
+
+  return (
+    <AccountsPage
+      contract={clientContract}
+      isLoggedIn={props.isLoggedIn}
+      projectMeta={props.projectMeta}
+    />
+  );
+}

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

@@ -1,71 +1,15 @@
-import { notFound, redirect } from "next/navigation";
-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 type { PublicContractPageParams } from "../types";
+import { SharedAnalyticsPage } from "./shared-analytics-page";
 
 export default async function Page(props: {
-  params: Promise<{
-    contractAddress: string;
-    chain_id: string;
-  }>;
+  params: Promise<PublicContractPageParams>;
 }) {
   const params = await props.params;
-  const info = await getContractPageParamsInfo(params);
-
-  if (!info) {
-    notFound();
-  }
-
-  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.clientContract}
-      writeFnSelectorToNameRecord={writeFnSelectorToName}
-      eventSelectorToNameRecord={eventSelectorToName}
+    <SharedAnalyticsPage
+      contractAddress={params.contractAddress}
+      chainIdOrSlug={params.chain_id}
+      projectMeta={undefined}
     />
   );
 }
-
-async function getSelectors(contract: ThirdwebContract) {
-  try {
-    const abi = await resolveContractAbi<Abi>(contract);
-    const writeFnSelectorToName: Record<string, string> = {};
-    const eventSelectorToName: Record<string, string> = {};
-
-    for (const item of abi) {
-      if (item.type === "event") {
-        eventSelectorToName[toEventSelector(item)] = item.name;
-      } else if (
-        // if write function
-        item.type === "function" &&
-        item.stateMutability !== "view" &&
-        item.stateMutability !== "pure"
-      ) {
-        writeFnSelectorToName[toFunctionSelector(item)] = item.name;
-      }
-    }
-
-    return {
-      writeFnSelectorToName,
-      eventSelectorToName,
-    };
-  } catch {
-    return {
-      writeFnSelectorToName: {},
-      eventSelectorToName: {},
-    };
-  }
-}

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

@@ -0,0 +1,92 @@
+import { notFound } from "next/navigation";
+import { type ThirdwebContract, resolveContractAbi } from "thirdweb/contract";
+import { type Abi, toEventSelector, toFunctionSelector } from "thirdweb/utils";
+import type { ProjectMeta } from "../../../../../team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/types";
+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 { ContractAnalyticsPage } from "./ContractAnalyticsPage";
+
+export async function SharedAnalyticsPage(props: {
+  contractAddress: string;
+  chainIdOrSlug: string;
+  projectMeta: ProjectMeta | undefined;
+}) {
+  const info = await getContractPageParamsInfo({
+    contractAddress: props.contractAddress,
+    chainIdOrSlug: props.chainIdOrSlug,
+    teamId: props.projectMeta?.teamId,
+  });
+
+  if (!info) {
+    notFound();
+  }
+
+  // new public page can't show /analytics page
+  if (!props.projectMeta) {
+    const shouldHide = await shouldRenderNewPublicPage(info.serverContract);
+    if (shouldHide) {
+      redirectToContractLandingPage({
+        contractAddress: props.contractAddress,
+        chainIdOrSlug: props.chainIdOrSlug,
+        projectMeta: props.projectMeta,
+      });
+    }
+  }
+
+  const [
+    { eventSelectorToName, writeFnSelectorToName },
+    { isInsightSupported },
+  ] = await Promise.all([
+    getSelectors(info.serverContract),
+    getContractPageMetadata(info.serverContract),
+  ]);
+
+  if (!isInsightSupported) {
+    redirectToContractLandingPage({
+      chainIdOrSlug: props.chainIdOrSlug,
+      contractAddress: props.contractAddress,
+      projectMeta: props.projectMeta,
+    });
+  }
+
+  return (
+    <ContractAnalyticsPage
+      contract={info.clientContract}
+      writeFnSelectorToNameRecord={writeFnSelectorToName}
+      eventSelectorToNameRecord={eventSelectorToName}
+    />
+  );
+}
+
+async function getSelectors(contract: ThirdwebContract) {
+  try {
+    const abi = await resolveContractAbi<Abi>(contract);
+    const writeFnSelectorToName: Record<string, string> = {};
+    const eventSelectorToName: Record<string, string> = {};
+
+    for (const item of abi) {
+      if (item.type === "event") {
+        eventSelectorToName[toEventSelector(item)] = item.name;
+      } else if (
+        // if write function
+        item.type === "function" &&
+        item.stateMutability !== "view" &&
+        item.stateMutability !== "pure"
+      ) {
+        writeFnSelectorToName[toFunctionSelector(item)] = item.name;
+      }
+    }
+
+    return {
+      writeFnSelectorToName,
+      eventSelectorToName,
+    };
+  } catch {
+    return {
+      writeFnSelectorToName: {},
+      eventSelectorToName: {},
+    };
+  }
+}

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

@@ -1,6 +1,7 @@
 "use client";
 
 import type { ThirdwebContract } from "thirdweb";
+import type { ProjectMeta } from "../../../../../team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/types";
 import { ClaimConditions } from "../_components/claim-conditions/claim-conditions";
 import { ErrorPage, LoadingPage } from "../_components/page-skeletons";
 import { RedirectToContractOverview } from "../_components/redirect-contract-overview.client";
@@ -9,6 +10,7 @@ import { useContractPageMetadata } from "../_hooks/useContractPageMetadata";
 export function ClaimConditionsClient(props: {
   contract: ThirdwebContract;
   isLoggedIn: boolean;
+  projectMeta: ProjectMeta | undefined;
 }) {
   const metadataQuery = useContractPageMetadata(props.contract);
 
@@ -27,7 +29,12 @@ export function ClaimConditionsClient(props: {
   } = metadataQuery.data;
 
   if (!isERC20ClaimConditionsSupported && !isERC721ClaimConditionsSupported) {
-    return <RedirectToContractOverview contract={props.contract} />;
+    return (
+      <RedirectToContractOverview
+        contract={props.contract}
+        projectMeta={props.projectMeta}
+      />
+    );
   }
 
   return (

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

@@ -1,58 +1,17 @@
-import { notFound, redirect } from "next/navigation";
 import { getRawAccount } from "../../../../../account/settings/getAccount";
-import { ClaimConditions } from "../_components/claim-conditions/claim-conditions";
-import { getContractPageParamsInfo } from "../_utils/getContractFromParams";
-import { getContractPageMetadata } from "../_utils/getContractPageMetadata";
-import { ClaimConditionsClient } from "./ClaimConditions.client";
+import type { PublicContractPageParams } from "../types";
+import { SharedClaimConditionsPage } from "./shared-claim-conditions-page";
 
 export default async function Page(props: {
-  params: Promise<{
-    contractAddress: string;
-    chain_id: string;
-  }>;
+  params: Promise<PublicContractPageParams>;
 }) {
-  const params = await props.params;
-  const info = await getContractPageParamsInfo(params);
-
-  if (!info) {
-    notFound();
-  }
-  const { clientContract, serverContract, isLocalhostChain } = info;
-
-  const [
-    account,
-    {
-      isERC20ClaimConditionsSupported,
-      isERC721ClaimConditionsSupported,
-      supportedERCs,
-    },
-  ] = await Promise.all([
-    getRawAccount(),
-    isLocalhostChain
-      ? {
-          isERC20ClaimConditionsSupported: undefined,
-          isERC721ClaimConditionsSupported: undefined,
-          supportedERCs: undefined,
-        }
-      : getContractPageMetadata(serverContract),
-  ]);
-
-  if (isLocalhostChain) {
-    return (
-      <ClaimConditionsClient contract={clientContract} isLoggedIn={!!account} />
-    );
-  }
-
-  if (!isERC20ClaimConditionsSupported && !isERC721ClaimConditionsSupported) {
-    redirect(`/${params.chain_id}/${params.contractAddress}`);
-  }
-
+  const [params, account] = await Promise.all([props.params, getRawAccount()]);
   return (
-    <ClaimConditions
-      contract={clientContract}
-      isERC20={supportedERCs.isERC20}
+    <SharedClaimConditionsPage
+      contractAddress={params.contractAddress}
+      chainIdOrSlug={params.chain_id}
+      projectMeta={undefined}
       isLoggedIn={!!account}
-      isMultiphase={true}
     />
   );
 }

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

@@ -0,0 +1,72 @@
+import { notFound } from "next/navigation";
+import type { ProjectMeta } from "../../../../../team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/types";
+import { redirectToContractLandingPage } from "../../../../../team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/utils";
+import { ClaimConditions } from "../_components/claim-conditions/claim-conditions";
+import { getContractPageParamsInfo } from "../_utils/getContractFromParams";
+import { getContractPageMetadata } from "../_utils/getContractPageMetadata";
+import { shouldRenderNewPublicPage } from "../_utils/newPublicPage";
+import { ClaimConditionsClient } from "./ClaimConditions.client";
+
+export async function SharedClaimConditionsPage(props: {
+  contractAddress: string;
+  chainIdOrSlug: string;
+  projectMeta: ProjectMeta | undefined;
+  isLoggedIn: boolean;
+}) {
+  const info = await getContractPageParamsInfo({
+    contractAddress: props.contractAddress,
+    chainIdOrSlug: props.chainIdOrSlug,
+    teamId: props.projectMeta?.teamId,
+  });
+
+  if (!info) {
+    notFound();
+  }
+
+  // new public page can't show /claim-conditions page
+  if (!props.projectMeta) {
+    const shouldHide = await shouldRenderNewPublicPage(info.serverContract);
+    if (shouldHide) {
+      redirectToContractLandingPage({
+        contractAddress: props.contractAddress,
+        chainIdOrSlug: props.chainIdOrSlug,
+        projectMeta: props.projectMeta,
+      });
+    }
+  }
+
+  const { clientContract, serverContract, isLocalhostChain } = info;
+
+  if (isLocalhostChain) {
+    return (
+      <ClaimConditionsClient
+        contract={clientContract}
+        isLoggedIn={props.isLoggedIn}
+        projectMeta={props.projectMeta}
+      />
+    );
+  }
+
+  const {
+    isERC20ClaimConditionsSupported,
+    isERC721ClaimConditionsSupported,
+    supportedERCs,
+  } = await getContractPageMetadata(serverContract);
+
+  if (!isERC20ClaimConditionsSupported && !isERC721ClaimConditionsSupported) {
+    redirectToContractLandingPage({
+      chainIdOrSlug: props.chainIdOrSlug,
+      contractAddress: props.contractAddress,
+      projectMeta: props.projectMeta,
+    });
+  }
+
+  return (
+    <ClaimConditions
+      contract={clientContract}
+      isERC20={supportedERCs.isERC20}
+      isLoggedIn={props.isLoggedIn}
+      isMultiphase={true}
+    />
+  );
+}

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

@@ -1,41 +1,15 @@
-import { notFound } from "next/navigation";
-import { resolveContractAbi } from "thirdweb/contract";
-import { getContractPageParamsInfo } from "../_utils/getContractFromParams";
-import { ContractCodePage } from "./contract-code-page";
-import { ContractCodePageClient } from "./contract-code-page.client";
+import type { PublicContractPageParams } from "../types";
+import { SharedCodePage } from "./shared-code-page";
 
 export default async function Page(props: {
-  params: Promise<{
-    contractAddress: string;
-    chain_id: string;
-  }>;
+  params: Promise<PublicContractPageParams>;
 }) {
   const params = await props.params;
-  const info = await getContractPageParamsInfo(params);
-
-  if (!info) {
-    notFound();
-  }
-
-  const { clientContract, serverContract, chainMetadata, isLocalhostChain } =
-    info;
-
-  if (isLocalhostChain) {
-    return (
-      <ContractCodePageClient
-        contract={clientContract}
-        chainMetadata={chainMetadata}
-      />
-    );
-  }
-
-  const abi = await resolveContractAbi(serverContract).catch(() => undefined);
-
   return (
-    <ContractCodePage
-      abi={abi}
-      contract={clientContract}
-      chainMetadata={chainMetadata}
+    <SharedCodePage
+      contractAddress={params.contractAddress}
+      chainIdOrSlug={params.chain_id}
+      projectMeta={undefined}
     />
   );
 }

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

@@ -0,0 +1,58 @@
+import { notFound } from "next/navigation";
+import { resolveContractAbi } from "thirdweb/contract";
+import type { ProjectMeta } from "../../../../../team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/types";
+import { redirectToContractLandingPage } from "../../../../../team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/utils";
+import { getContractPageParamsInfo } from "../_utils/getContractFromParams";
+import { shouldRenderNewPublicPage } from "../_utils/newPublicPage";
+import { ContractCodePage } from "./contract-code-page";
+import { ContractCodePageClient } from "./contract-code-page.client";
+
+export async function SharedCodePage(props: {
+  contractAddress: string;
+  chainIdOrSlug: string;
+  projectMeta: ProjectMeta | undefined;
+}) {
+  const info = await getContractPageParamsInfo({
+    contractAddress: props.contractAddress,
+    chainIdOrSlug: props.chainIdOrSlug,
+    teamId: props.projectMeta?.teamId,
+  });
+
+  if (!info) {
+    notFound();
+  }
+
+  // new public page can't show /code page
+  if (!props.projectMeta) {
+    const shouldHide = await shouldRenderNewPublicPage(info.serverContract);
+    if (shouldHide) {
+      redirectToContractLandingPage({
+        contractAddress: props.contractAddress,
+        chainIdOrSlug: props.chainIdOrSlug,
+        projectMeta: props.projectMeta,
+      });
+    }
+  }
+
+  const { clientContract, serverContract, chainMetadata, isLocalhostChain } =
+    info;
+
+  if (isLocalhostChain) {
+    return (
+      <ContractCodePageClient
+        contract={clientContract}
+        chainMetadata={chainMetadata}
+      />
+    );
+  }
+
+  const abi = await resolveContractAbi(serverContract).catch(() => undefined);
+
+  return (
+    <ContractCodePage
+      abi={abi}
+      contract={clientContract}
+      chainMetadata={chainMetadata}
+    />
+  );
+}

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/cross-chain/data-table.tsx

@@ -58,6 +58,8 @@ import {
 import { useActiveAccount, useSwitchActiveWalletChain } from "thirdweb/react";
 import { concatHex, padHex } from "thirdweb/utils";
 import { z } from "zod";
+import type { ProjectMeta } from "../../../../../team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/types";
+import { buildContractPagePath } from "../_utils/contract-page-path";
 import { SingleNetworkSelector } from "./single-network-selector";
 
 type CrossChain = {
@@ -91,6 +93,7 @@ export function DataTable({
   inputSalt,
   initCode,
   isDirectDeploy,
+  projectMeta,
 }: {
   data: CrossChain[];
   coreMetadata: FetchDeployMetadataResult;
@@ -100,6 +103,7 @@ export function DataTable({
   inputSalt?: `0x${string}`;
   initCode?: `0x${string}`;
   isDirectDeploy: boolean;
+  projectMeta: ProjectMeta | undefined;
 }) {
   const activeAccount = useActiveAccount();
   const switchChain = useSwitchActiveWalletChain();
@@ -235,11 +239,17 @@ export function DataTable({
       header: "Network",
       cell: ({ row }) => {
         if (row.getValue("status") === "DEPLOYED") {
+          const href = buildContractPagePath({
+            projectMeta,
+            chainIdOrSlug: `${row.getValue("chainId")}`,
+            contractAddress: coreContract.address,
+          });
+
           return (
             <Link
               target="_blank"
               className="text-blue-500 underline"
-              href={`/${row.getValue("chainId")}/${coreContract.address}`}
+              href={href}
             >
               {row.getValue("network")}
             </Link>
@@ -405,9 +415,17 @@ export function DataTable({
         });
       }
       deployStatusModal.nextStep();
-      deployStatusModal.setViewContractLink(
-        `/${chain.id}/${crosschainContractAddress}`,
-      );
+
+      if (crosschainContractAddress) {
+        const contractLink = buildContractPagePath({
+          projectMeta,
+          chainIdOrSlug: `${chain.id}`,
+          contractAddress: crosschainContractAddress,
+        });
+
+        deployStatusModal.setViewContractLink(contractLink);
+      }
+
       deployStatusModal.close();
 
       setCustomChainData((prevData) =>

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

@@ -1,287 +1,15 @@
-import { fetchPublishedContractsFromDeploy } from "components/contract-components/fetchPublishedContractsFromDeploy";
-import { notFound } from "next/navigation";
-import {
-  type ContractOptions,
-  eth_getTransactionByHash,
-  eth_getTransactionReceipt,
-  getContractEvents,
-  parseEventLogs,
-  prepareEvent,
-} from "thirdweb";
-import { defineChain, getChainMetadata } from "thirdweb/chains";
-import {
-  type FetchDeployMetadataResult,
-  getContract,
-  getDeployedCloneFactoryContract,
-  resolveContractAbi,
-} from "thirdweb/contract";
-import { moduleInstalledEvent } from "thirdweb/modules";
-import { eth_getCode, getRpcClient } from "thirdweb/rpc";
-import type { TransactionReceipt } from "thirdweb/transaction";
-import { type AbiFunction, decodeFunctionData } from "thirdweb/utils";
-import { getContractPageParamsInfo } from "../_utils/getContractFromParams";
-import { getContractPageMetadata } from "../_utils/getContractPageMetadata";
-import { DataTable } from "./data-table";
-import { NoCrossChainPrompt } from "./no-crosschain-prompt";
-
-export function getModuleInstallParams(mod: FetchDeployMetadataResult) {
-  return (
-    mod.abi
-      .filter((a) => a.type === "function")
-      .find((f) => f.name === "encodeBytesOnInstall")?.inputs || []
-  );
-}
+import type { PublicContractPageParams } from "../types";
+import { SharedCrossChainPage } from "./shared-cross-chain-page";
 
 export default async function Page(props: {
-  params: Promise<{
-    contractAddress: string;
-    chain_id: string;
-  }>;
+  params: Promise<PublicContractPageParams>;
 }) {
   const params = await props.params;
-  const info = await getContractPageParamsInfo(params);
-
-  const ProxyDeployedEvent = prepareEvent({
-    signature:
-      "event ProxyDeployedV2(address indexed implementation, address indexed proxy, address indexed deployer, bytes32 inputSalt, bytes data, bytes extraData)",
-    filters: {
-      proxy: params.contractAddress.toLowerCase(),
-    },
-  });
-
-  if (!info) {
-    notFound();
-  }
-
-  const { clientContract, serverContract } = info;
-
-  const isModularCore = (await getContractPageMetadata(serverContract))
-    .isModularCore;
-
-  let twCloneFactoryContract: Readonly<
-    ContractOptions<[], `0x${string}`>
-  > | null = null;
-  try {
-    twCloneFactoryContract = await getDeployedCloneFactoryContract({
-      chain: serverContract.chain,
-      client: serverContract.client,
-    });
-  } catch {}
-
-  const originalCode = await eth_getCode(
-    getRpcClient({
-      client: serverContract.client,
-      chain: serverContract.chain,
-    }),
-    {
-      address: serverContract.address,
-    },
-  );
-
-  let initCode: `0x${string}` = "0x";
-  let creationTxReceipt: TransactionReceipt | undefined;
-  let isDirectDeploy = false;
-  try {
-    const res = await fetch(
-      `https://contract.thirdweb-dev.com/creation/${serverContract.chain.id}/${serverContract.address}`,
-    );
-    const creationData = await res.json();
-
-    if (creationData.status === "1" && creationData.result[0]?.txHash) {
-      const rpcClient = getRpcClient({
-        client: serverContract.client,
-        chain: serverContract.chain,
-      });
-      creationTxReceipt = await eth_getTransactionReceipt(rpcClient, {
-        hash: creationData.result[0]?.txHash,
-      });
-
-      const creationTx = await eth_getTransactionByHash(rpcClient, {
-        hash: creationData.result[0]?.txHash,
-      });
-
-      initCode = creationTx.input;
-      isDirectDeploy =
-        creationTx.to?.toLowerCase() ===
-        "0x4e59b44847b379578588920cA78FbF26c0B4956C".toLowerCase();
-    }
-  } catch (e) {
-    console.debug(e);
-  }
-
-  let initializeData: `0x${string}` | undefined;
-  let inputSalt: `0x${string}` | undefined;
-  let creationBlockNumber: bigint | undefined;
-
-  if (twCloneFactoryContract) {
-    const events = await getContractEvents({
-      contract: twCloneFactoryContract,
-      events: [ProxyDeployedEvent],
-    });
-    const event = events.find(
-      (e) =>
-        e.args.proxy.toLowerCase() === params.contractAddress.toLowerCase(),
-    );
-
-    initializeData = event?.args.data;
-    inputSalt = event?.args.inputSalt;
-    creationBlockNumber = event?.blockNumber;
-  }
-
-  const defaultChains = [
-    1, 137, 8453, 10, 42161, 11155111, 84532, 11155420, 421614,
-  ];
-
-  const chainsDeployedOn = (
-    await Promise.all(
-      defaultChains.map(async (c) => {
-        // eslint-disable-next-line no-restricted-syntax
-        const chain = defineChain(c);
-
-        try {
-          const chainMetadata = await getChainMetadata(chain);
-
-          const rpcRequest = getRpcClient({
-            client: serverContract.client,
-            chain,
-          });
-          const code = await eth_getCode(rpcRequest, {
-            address: params.contractAddress,
-          });
-
-          return {
-            id: chain.id,
-            network: chainMetadata.name,
-            chainId: chain.id,
-            status:
-              code === originalCode
-                ? ("DEPLOYED" as const)
-                : ("NOT_DEPLOYED" as const),
-          };
-        } catch {
-          return {
-            id: chain.id,
-            network: "",
-            chainId: chain.id,
-            status: "NOT_DEPLOYED" as const,
-          };
-        }
-      }),
-    )
-  ).filter((c) => c.chainId !== serverContract.chain.id);
-
-  let coreMetadata: FetchDeployMetadataResult | undefined;
-  try {
-    coreMetadata = (
-      await fetchPublishedContractsFromDeploy({
-        contract: serverContract,
-        client: serverContract.client,
-      })
-    ).at(-1) as FetchDeployMetadataResult;
-  } catch {}
-
-  if (!coreMetadata) {
-    return NoCrossChainPrompt();
-  }
-
-  let modulesMetadata: FetchDeployMetadataResult[] | undefined;
-
-  if (isModularCore) {
-    let modules: string[] | undefined;
-    const moduleEvent = moduleInstalledEvent();
-    // extract module address in ModuleInstalled events from transaction receipt
-    if (creationTxReceipt) {
-      const decodedEvent = parseEventLogs({
-        events: [moduleEvent],
-        logs: creationTxReceipt.logs,
-      });
-
-      modules = decodedEvent.map((e) => e.args.installedModule);
-    }
-
-    // fetch events from contract
-    if (!modules && creationBlockNumber) {
-      const events = await getContractEvents({
-        contract: serverContract,
-        events: [moduleEvent],
-      });
-
-      const filteredEvents = events.filter(
-        (e) => e.blockNumber === creationBlockNumber,
-      );
-
-      modules = filteredEvents.map((e) => e.args.installedModule);
-    }
-
-    // if receipt not available, try extracting module address from initialize data
-    if (!modules && initializeData) {
-      // biome-ignore lint/suspicious/noExplicitAny: FIXME
-      const decodedData: any = await decodeFunctionData({
-        contract: serverContract,
-        data: initializeData,
-      });
-
-      const abi = await resolveContractAbi(serverContract).catch(
-        () => undefined,
-      );
-
-      if (abi) {
-        const initializeFunction = abi.find(
-          (i: AbiFunction) => i.type === "function" && i.name === "initialize",
-        ) as unknown as AbiFunction;
-
-        const moduleIndex = initializeFunction.inputs.findIndex(
-          (i) => i.name === "_modules" || i.name === "modules",
-        );
-
-        modules = moduleIndex ? decodedData[moduleIndex] : undefined;
-      }
-    }
-
-    modulesMetadata = modules
-      ? ((await Promise.all(
-          modules.map(async (m) =>
-            (
-              await fetchPublishedContractsFromDeploy({
-                contract: getContract({
-                  chain: serverContract.chain,
-                  client: serverContract.client,
-                  address: m,
-                }),
-                client: serverContract.client,
-              })
-            ).at(-1),
-          ),
-        )) as FetchDeployMetadataResult[])
-      : undefined;
-  }
-
-  if (!isDirectDeploy && !initializeData) {
-    return NoCrossChainPrompt();
-  }
-
   return (
-    <>
-      <div>
-        <h2 className="mb-1 font-bold text-2xl tracking-tight">
-          Cross-chain contracts
-        </h2>
-        <p className="text-muted-foreground">
-          Deterministically deploy and interact with your contracts on multiple
-          networks.
-        </p>
-      </div>
-      <div className="h-10" />
-      <DataTable
-        coreMetadata={coreMetadata}
-        modulesMetadata={modulesMetadata}
-        initializeData={initializeData}
-        inputSalt={inputSalt}
-        data={chainsDeployedOn}
-        coreContract={clientContract}
-        initCode={initCode}
-        isDirectDeploy={isDirectDeploy}
-      />
-    </>
+    <SharedCrossChainPage
+      contractAddress={params.contractAddress}
+      chainIdOrSlug={params.chain_id}
+      projectMeta={undefined}
+    />
   );
 }

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

@@ -0,0 +1,294 @@
+import { fetchPublishedContractsFromDeploy } from "components/contract-components/fetchPublishedContractsFromDeploy";
+import { notFound } from "next/navigation";
+import {
+  type ContractOptions,
+  eth_getTransactionByHash,
+  eth_getTransactionReceipt,
+  getContractEvents,
+  parseEventLogs,
+  prepareEvent,
+} from "thirdweb";
+import { defineChain, getChainMetadata } from "thirdweb/chains";
+import {
+  type FetchDeployMetadataResult,
+  getContract,
+  getDeployedCloneFactoryContract,
+  resolveContractAbi,
+} from "thirdweb/contract";
+import { moduleInstalledEvent } from "thirdweb/modules";
+import { eth_getCode, getRpcClient } from "thirdweb/rpc";
+import type { TransactionReceipt } from "thirdweb/transaction";
+import { type AbiFunction, decodeFunctionData } from "thirdweb/utils";
+import type { ProjectMeta } from "../../../../../team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/types";
+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 { DataTable } from "./data-table";
+import { NoCrossChainPrompt } from "./no-crosschain-prompt";
+
+export async function SharedCrossChainPage(props: {
+  contractAddress: string;
+  chainIdOrSlug: string;
+  projectMeta: ProjectMeta | undefined;
+}) {
+  const info = await getContractPageParamsInfo({
+    contractAddress: props.contractAddress,
+    chainIdOrSlug: props.chainIdOrSlug,
+    teamId: props.projectMeta?.teamId,
+  });
+
+  const ProxyDeployedEvent = prepareEvent({
+    signature:
+      "event ProxyDeployedV2(address indexed implementation, address indexed proxy, address indexed deployer, bytes32 inputSalt, bytes data, bytes extraData)",
+    filters: {
+      proxy: props.contractAddress.toLowerCase(),
+    },
+  });
+
+  if (!info) {
+    notFound();
+  }
+
+  // new public page can't show /cross-chain page
+  if (!props.projectMeta) {
+    const shouldHide = await shouldRenderNewPublicPage(info.serverContract);
+    if (shouldHide) {
+      redirectToContractLandingPage({
+        contractAddress: props.contractAddress,
+        chainIdOrSlug: props.chainIdOrSlug,
+        projectMeta: props.projectMeta,
+      });
+    }
+  }
+
+  const { clientContract, serverContract } = info;
+
+  const isModularCore = (await getContractPageMetadata(serverContract))
+    .isModularCore;
+
+  let twCloneFactoryContract: Readonly<
+    ContractOptions<[], `0x${string}`>
+  > | null = null;
+  try {
+    twCloneFactoryContract = await getDeployedCloneFactoryContract({
+      chain: serverContract.chain,
+      client: serverContract.client,
+    });
+  } catch {}
+
+  const originalCode = await eth_getCode(
+    getRpcClient({
+      client: serverContract.client,
+      chain: serverContract.chain,
+    }),
+    {
+      address: serverContract.address,
+    },
+  );
+
+  let initCode: `0x${string}` = "0x";
+  let creationTxReceipt: TransactionReceipt | undefined;
+  let isDirectDeploy = false;
+  try {
+    const res = await fetch(
+      `https://contract.thirdweb-dev.com/creation/${serverContract.chain.id}/${serverContract.address}`,
+    );
+    const creationData = await res.json();
+
+    if (creationData.status === "1" && creationData.result[0]?.txHash) {
+      const rpcClient = getRpcClient({
+        client: serverContract.client,
+        chain: serverContract.chain,
+      });
+      creationTxReceipt = await eth_getTransactionReceipt(rpcClient, {
+        hash: creationData.result[0]?.txHash,
+      });
+
+      const creationTx = await eth_getTransactionByHash(rpcClient, {
+        hash: creationData.result[0]?.txHash,
+      });
+
+      initCode = creationTx.input;
+      isDirectDeploy =
+        creationTx.to?.toLowerCase() ===
+        "0x4e59b44847b379578588920cA78FbF26c0B4956C".toLowerCase();
+    }
+  } catch (e) {
+    console.debug(e);
+  }
+
+  let initializeData: `0x${string}` | undefined;
+  let inputSalt: `0x${string}` | undefined;
+  let creationBlockNumber: bigint | undefined;
+
+  if (twCloneFactoryContract) {
+    const events = await getContractEvents({
+      contract: twCloneFactoryContract,
+      events: [ProxyDeployedEvent],
+    });
+    const event = events.find(
+      (e) => e.args.proxy.toLowerCase() === props.contractAddress.toLowerCase(),
+    );
+
+    initializeData = event?.args.data;
+    inputSalt = event?.args.inputSalt;
+    creationBlockNumber = event?.blockNumber;
+  }
+
+  const defaultChains = [
+    1, 137, 8453, 10, 42161, 11155111, 84532, 11155420, 421614,
+  ];
+
+  const chainsDeployedOn = (
+    await Promise.all(
+      defaultChains.map(async (c) => {
+        // eslint-disable-next-line no-restricted-syntax
+        const chain = defineChain(c);
+
+        try {
+          const chainMetadata = await getChainMetadata(chain);
+
+          const rpcRequest = getRpcClient({
+            client: serverContract.client,
+            chain,
+          });
+          const code = await eth_getCode(rpcRequest, {
+            address: props.contractAddress,
+          });
+
+          return {
+            id: chain.id,
+            network: chainMetadata.name,
+            chainId: chain.id,
+            status:
+              code === originalCode
+                ? ("DEPLOYED" as const)
+                : ("NOT_DEPLOYED" as const),
+          };
+        } catch {
+          return {
+            id: chain.id,
+            network: "",
+            chainId: chain.id,
+            status: "NOT_DEPLOYED" as const,
+          };
+        }
+      }),
+    )
+  ).filter((c) => c.chainId !== serverContract.chain.id);
+
+  let coreMetadata: FetchDeployMetadataResult | undefined;
+  try {
+    coreMetadata = (
+      await fetchPublishedContractsFromDeploy({
+        contract: serverContract,
+      })
+    ).at(-1) as FetchDeployMetadataResult;
+  } catch {}
+
+  if (!coreMetadata) {
+    return NoCrossChainPrompt();
+  }
+
+  let modulesMetadata: FetchDeployMetadataResult[] | undefined;
+
+  if (isModularCore) {
+    let modules: string[] | undefined;
+    const moduleEvent = moduleInstalledEvent();
+    // extract module address in ModuleInstalled events from transaction receipt
+    if (creationTxReceipt) {
+      const decodedEvent = parseEventLogs({
+        events: [moduleEvent],
+        logs: creationTxReceipt.logs,
+      });
+
+      modules = decodedEvent.map((e) => e.args.installedModule);
+    }
+
+    // fetch events from contract
+    if (!modules && creationBlockNumber) {
+      const events = await getContractEvents({
+        contract: serverContract,
+        events: [moduleEvent],
+      });
+
+      const filteredEvents = events.filter(
+        (e) => e.blockNumber === creationBlockNumber,
+      );
+
+      modules = filteredEvents.map((e) => e.args.installedModule);
+    }
+
+    // if receipt not available, try extracting module address from initialize data
+    if (!modules && initializeData) {
+      // biome-ignore lint/suspicious/noExplicitAny: FIXME
+      const decodedData: any = await decodeFunctionData({
+        contract: serverContract,
+        data: initializeData,
+      });
+
+      const abi = await resolveContractAbi(serverContract).catch(
+        () => undefined,
+      );
+
+      if (abi) {
+        const initializeFunction = abi.find(
+          (i: AbiFunction) => i.type === "function" && i.name === "initialize",
+        ) as unknown as AbiFunction;
+
+        const moduleIndex = initializeFunction.inputs.findIndex(
+          (i) => i.name === "_modules" || i.name === "modules",
+        );
+
+        modules = moduleIndex ? decodedData[moduleIndex] : undefined;
+      }
+    }
+
+    modulesMetadata = modules
+      ? ((await Promise.all(
+          modules.map(async (m) =>
+            (
+              await fetchPublishedContractsFromDeploy({
+                contract: getContract({
+                  chain: serverContract.chain,
+                  client: serverContract.client,
+                  address: m,
+                }),
+              })
+            ).at(-1),
+          ),
+        )) as FetchDeployMetadataResult[])
+      : undefined;
+  }
+
+  if (!isDirectDeploy && !initializeData) {
+    return NoCrossChainPrompt();
+  }
+
+  return (
+    <>
+      <div>
+        <h2 className="mb-1 font-bold text-2xl tracking-tight">
+          Cross-chain contracts
+        </h2>
+        <p className="text-muted-foreground">
+          Deterministically deploy and interact with your contracts on multiple
+          networks.
+        </p>
+      </div>
+      <div className="h-10" />
+      <DataTable
+        coreMetadata={coreMetadata}
+        modulesMetadata={modulesMetadata}
+        initializeData={initializeData}
+        inputSalt={inputSalt}
+        data={chainsDeployedOn}
+        coreContract={clientContract}
+        initCode={initCode}
+        isDirectDeploy={isDirectDeploy}
+        projectMeta={props.projectMeta}
+      />
+    </>
+  );
+}