Version Packages (#5188)

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

.gitignore

@@ -29,3 +29,5 @@ packages/*/typedoc/*
 *storybook.log
 storybook-static
 .aider*
+
+tsconfig.tsbuildinfo

apps/dashboard/.env.example

@@ -75,15 +75,6 @@ GITHUB_API_TOKEN="ghp_..."
 # Upload server url
 NEXT_PUBLIC_DASHBOARD_UPLOAD_SERVER="https://storage.thirdweb-preview.com"
 
-# Payments Admin Secret. For dev, get this value from paper-web-dev (on Zeet)'s "HASURA_ADMIN_SECRET_KEY" env var
-PAYMENTS_ADMIN_SECRET=""
-
-# Disable telemetry
-NEXT_TELEMETRY_DISABLED=1
-
-# Use trench for KYC
-NEXT_PUBLIC_TRENCH_2_API_ENDPOINT=""
-
 # Unthread variables - only required for submitting the support form in /support
 UNTHREAD_API_KEY=""
 UNTHREAD_TRIAGE_CHANNEL_ID=""

apps/dashboard/.eslintrc.js

@@ -34,6 +34,11 @@ module.exports = {
         message:
           "Use useV5DashboardChain instead if you are using it inside a component",
       },
+      {
+        selector: "CallExpression[callee.name='resolveScheme']",
+        message:
+          "resolveScheme can throw error if resolution fails. Either catch the error and ignore the lint warning or Use `resolveSchemeWithErrorHandler` / `replaceIpfsUrl` utility in dashboard instead",
+      },
     ],
     "no-restricted-imports": [
       "error",

apps/dashboard/framer-rewrites.js

@@ -0,0 +1,7 @@
+// add framer paths here
+module.exports = [
+  "/",
+  "/connect/sign-in",
+  "/contracts/modular-contracts",
+  "/unlimited-wallets",
+];

apps/dashboard/next-sitemap.config.js

@@ -1,4 +1,5 @@
 // @ts-check
+
 /**
  *
  */
@@ -77,8 +78,16 @@ module.exports = {
     };
   },
   additionalPaths: async (config) => {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    const FRAMER_PATHS = require("./framer-rewrites");
     const allChains = await fetchChainsFromApi();
     return [
+      ...FRAMER_PATHS.map((path) => ({
+        loc: path,
+        changefreq: config.changefreq,
+        priority: config.priority,
+        lastmod: config.autoLastmod ? new Date().toISOString() : undefined,
+      })),
       ...allChains.map((chain) => {
         return {
           loc: `/${chain.slug}`,

apps/dashboard/next.config.js

@@ -6,7 +6,7 @@ const ContentSecurityPolicy = `
   media-src * data: blob:;
   object-src 'none';
   style-src 'self' 'unsafe-inline' vercel.live;
-  font-src 'self' vercel.live assets.vercel.com framerusercontent.com;
+  font-src 'self' vercel.live assets.vercel.com framerusercontent.com fonts.gstatic.com;
   frame-src * data:;
   script-src 'self' 'unsafe-eval' 'unsafe-inline' 'wasm-unsafe-eval' 'inline-speculation-rules' *.thirdweb.com *.thirdweb-dev.com vercel.live js.stripe.com framerusercontent.com events.framer.com challenges.cloudflare.com;
   connect-src * data: blob:;
@@ -38,13 +38,7 @@ const securityHeaders = [
 ];
 
 const redirects = require("./redirects");
-
-// add framer paths here
-const FRAMER_PATHS = [
-  "/connect/sign-in",
-  "/contracts/modular-contracts",
-  "/unlimited-wallets",
-];
+const FRAMER_PATHS = require("./framer-rewrites");
 
 /**
  * @returns {import('next').RemotePattern[]}
@@ -135,6 +129,11 @@ const moduleExports = {
         source: "/thirdweb.eth/:path*",
         destination: "/deployer.thirdweb.eth/:path*",
       },
+      // re-write /home to / (this is so that logged in users will be able to go to /home and NOT be redirected to the logged in app)
+      {
+        source: "/home",
+        destination: "/",
+      },
       ...FRAMER_PATHS.map((path) => ({
         source: path,
         destination: `https://landing.thirdweb.com${path}`,
@@ -191,7 +190,7 @@ module.exports = withBundleAnalyzer(
       // An auth token is required for uploading source maps.
       authToken: process.env.SENTRY_AUTH_TOKEN,
       // Suppresses source map uploading logs during build
-      silent: false,
+      silent: true,
       // For all available options, see:
       // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
 

apps/dashboard/package.json

@@ -25,7 +25,6 @@
     "@chakra-ui/react": "^2.8.2",
     "@chakra-ui/styled-system": "^2.9.2",
     "@chakra-ui/theme-tools": "^2.1.2",
-    "@coinbase/onchainkit": "^0.14.2",
     "@emotion/react": "11.13.3",
     "@emotion/styled": "11.13.0",
     "@hookform/resolvers": "^3.9.0",
@@ -46,11 +45,11 @@
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-switch": "^1.1.1",
     "@radix-ui/react-tooltip": "1.1.3",
-    "@sentry/nextjs": "8.34.0",
-    "@shazow/whatsabi": "^0.15.3",
+    "@sentry/nextjs": "8.35.0",
+    "@shazow/whatsabi": "^0.15.4",
     "@stripe/react-stripe-js": "^2.8.1",
     "@stripe/stripe-js": "^3.5.0",
-    "@tanstack/react-query": "5.59.13",
+    "@tanstack/react-query": "5.59.16",
     "@tanstack/react-table": "^8.17.3",
     "@thirdweb-dev/service-utils": "workspace:*",
     "@vercel/og": "^0.6.2",
@@ -62,13 +61,13 @@
     "compare-versions": "^6.1.0",
     "date-fns": "4.1.0",
     "flat": "^6.0.1",
-    "framer-motion": "11.11.8",
+    "framer-motion": "11.11.10",
     "fuse.js": "7.0.0",
     "input-otp": "^1.2.4",
     "ioredis": "^5.4.1",
     "ipaddr.js": "^2.2.0",
     "lottie-react": "^2.4.0",
-    "lucide-react": "0.452.0",
+    "lucide-react": "0.454.0",
     "next": "14.2.15",
     "next-plausible": "^3.12.0",
     "next-seo": "^6.5.0",
@@ -85,8 +84,8 @@
     "react-day-picker": "^8.10.1",
     "react-dom": "18.3.1",
     "react-dropzone": "^14.2.9",
+    "react-error-boundary": "^4.1.2",
     "react-hook-form": "7.52.0",
-    "react-intersection-observer": "^9.10.3",
     "react-markdown": "^9.0.1",
     "react-responsive-carousel": "^3.2.23",
     "react-table": "^7.8.0",
@@ -108,19 +107,19 @@
     "@chromatic-com/storybook": "2.0.2",
     "@next/bundle-analyzer": "14.2.15",
     "@next/eslint-plugin-next": "14.2.15",
-    "@playwright/test": "1.47.2",
-    "@storybook/addon-essentials": "8.3.5",
-    "@storybook/addon-interactions": "8.3.5",
-    "@storybook/addon-links": "8.3.5",
-    "@storybook/addon-onboarding": "8.3.5",
-    "@storybook/addon-viewport": "8.3.5",
-    "@storybook/blocks": "8.3.5",
-    "@storybook/nextjs": "8.3.5",
-    "@storybook/react": "8.3.5",
-    "@storybook/test": "8.3.5",
-    "@types/color": "^3.0.6",
+    "@playwright/test": "1.48.2",
+    "@storybook/addon-essentials": "8.3.6",
+    "@storybook/addon-interactions": "8.3.6",
+    "@storybook/addon-links": "8.3.6",
+    "@storybook/addon-onboarding": "8.3.6",
+    "@storybook/addon-viewport": "8.3.6",
+    "@storybook/blocks": "8.3.6",
+    "@storybook/nextjs": "8.3.6",
+    "@storybook/react": "8.3.6",
+    "@storybook/test": "8.3.6",
+    "@types/color": "4.2.0",
     "@types/node": "20.14.9",
-    "@types/papaparse": "^5.3.14",
+    "@types/papaparse": "^5.3.15",
     "@types/pluralize": "^0.0.33",
     "@types/qrcode": "^1.5.5",
     "@types/react": "^18.3.11",
@@ -136,11 +135,11 @@
     "eslint-config-biome": "1.9.3",
     "eslint-plugin-react-compiler": "0.0.0-experimental-fa06e2c-20241014",
     "eslint-plugin-storybook": "^0.9.0",
-    "knip": "^5.33.3",
+    "knip": "5.34.2",
     "next-sitemap": "^4.2.3",
     "postcss": "8.4.47",
-    "storybook": "8.3.5",
-    "tailwindcss": "3.4.13",
+    "storybook": "8.3.6",
+    "tailwindcss": "3.4.14",
     "typescript": "5.6.3"
   }
 }

apps/dashboard/src/@/components/blocks/app-footer.tsx

@@ -119,13 +119,7 @@ export function AppFooter(props: AppFooterProps) {
           >
             Terms of Service
           </Link>
-          <Link
-            className="px-[10px] py-[6px] text-muted-foreground text-sm hover:underline"
-            href="https://thirdweb.com/gas"
-            target="_blank"
-          >
-            Gas Estimator
-          </Link>
+
           <Link
             className="px-[10px] py-[6px] text-muted-foreground text-sm hover:underline"
             href="https://thirdweb.com/chainlist"

apps/dashboard/src/@/components/blocks/error-fallbacks/unexpect-value-error-message.tsx

@@ -0,0 +1,44 @@
+import { CopyTextButton } from "@/components/ui/CopyTextButton";
+import { ScrollShadow } from "@/components/ui/ScrollShadow/ScrollShadow";
+import { useMemo } from "react";
+
+export function UnexpectedValueErrorMessage(props: {
+  value: unknown;
+  title: string;
+  description: string;
+  className?: string;
+}) {
+  const stringifiedValue = useMemo(() => {
+    try {
+      return JSON.stringify(props.value, null, 2);
+    } catch {
+      return undefined;
+    }
+  }, [props.value]);
+
+  return (
+    <div className={props.className}>
+      <p className="text-base text-destructive-text"> {props.title} </p>
+      <p className="text-foreground text-sm">{props.description}</p>
+      {stringifiedValue && (
+        <div className="mt-3">
+          <p className="mb-0.5 text-muted-foreground text-sm">Value Received</p>
+          <ScrollShadow className="rounded-lg bg-muted/50">
+            <code className="block whitespace-pre p-4 font-mono text-xs">
+              {stringifiedValue}
+            </code>
+          </ScrollShadow>
+
+          <CopyTextButton
+            copyIconPosition="left"
+            textToShow="Copy value"
+            textToCopy={stringifiedValue}
+            tooltip="Copy value"
+            className="-translate-x-2 mt-1 text-muted-foreground"
+            variant="ghost"
+          />
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -1,5 +1,4 @@
 "use client";
-
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import {
   HoverCard,
@@ -7,6 +6,7 @@ import {
   HoverCardTrigger,
 } from "@/components/ui/hover-card";
 import { useThirdwebClient } from "@/constants/thirdweb.client";
+import { resolveSchemeWithErrorHandler } from "@/lib/resolveSchemeWithErrorHandler";
 import { useClipboard } from "hooks/useClipboard";
 import { Check, Copy, ExternalLinkIcon } from "lucide-react";
 import { useMemo } from "react";
@@ -18,7 +18,6 @@ import {
   type SocialProfile,
   useSocialProfiles,
 } from "thirdweb/react";
-import { resolveScheme } from "thirdweb/storage";
 import { cn } from "../../lib/utils";
 import { Badge } from "../ui/badge";
 import { Button } from "../ui/button";
@@ -113,22 +112,20 @@ export function WalletAddress(props: {
           ) : !profiles.data?.length ? (
             <p className="text-muted-foreground text-sm">No profiles found</p>
           ) : (
-            profiles.data?.map((profile) => (
-              <div
-                className="flex flex-row items-center gap-2"
-                key={profile.type + profile.name}
-              >
-                {profile.avatar &&
-                  (profile.avatar.startsWith("http") ||
-                    profile.avatar?.startsWith("ipfs")) && (
+            profiles.data?.map((profile) => {
+              const walletAvatarLink = resolveSchemeWithErrorHandler({
+                client: thirdwebClient,
+                uri: profile.avatar,
+              });
+
+              return (
+                <div
+                  className="flex flex-row items-center gap-2"
+                  key={profile.type + profile.name}
+                >
+                  {walletAvatarLink && (
                     <Avatar>
-                      <AvatarImage
-                        src={resolveScheme({
-                          client: thirdwebClient,
-                          uri: profile.avatar,
-                        })}
-                        alt={profile.name}
-                      />
+                      <AvatarImage src={walletAvatarLink} alt={profile.name} />
                       {profile.name && (
                         <AvatarFallback>
                           {profile.name.slice(0, 2)}
@@ -136,19 +133,20 @@ export function WalletAddress(props: {
                       )}
                     </Avatar>
                   )}
-                <div className="flex w-full flex-col gap-1">
-                  <div className="flex w-full flex-row items-center justify-between gap-4">
-                    <h4 className="font-semibold text-md">{profile.name}</h4>
-                    <Badge variant="outline">{profile.type}</Badge>
+                  <div className="flex w-full flex-col gap-1">
+                    <div className="flex w-full flex-row items-center justify-between gap-4">
+                      <h4 className="font-semibold text-md">{profile.name}</h4>
+                      <Badge variant="outline">{profile.type}</Badge>
+                    </div>
+                    {profile.bio && (
+                      <p className="line-clamp-1 whitespace-normal text-muted-foreground text-sm">
+                        {profile.bio}
+                      </p>
+                    )}
                   </div>
-                  {profile.bio && (
-                    <p className="line-clamp-1 whitespace-normal text-muted-foreground text-sm">
-                      {profile.bio}
-                    </p>
-                  )}
                 </div>
-              </div>
-            ))
+              );
+            })
           )}
           <Button
             asChild

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

@@ -0,0 +1,36 @@
+"use client";
+
+import { useClipboard } from "hooks/useClipboard";
+import { CheckIcon, CopyIcon } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { Button } from "./button";
+
+export function PlainTextCodeBlock(props: {
+  code: string;
+  copyButtonClassName?: string;
+}) {
+  const { hasCopied, onCopy } = useClipboard(props.code);
+
+  return (
+    <div className="relative">
+      <code className="block whitespace-pre rounded-lg border border-border bg-muted/50 p-4">
+        {props.code}
+      </code>
+      <Button
+        size="sm"
+        variant="outline"
+        onClick={onCopy}
+        className={cn(
+          "absolute top-3.5 right-3.5 h-auto p-2",
+          props.copyButtonClassName,
+        )}
+      >
+        {hasCopied ? (
+          <CheckIcon className="size-3 text-green-500" />
+        ) : (
+          <CopyIcon className="size-3 text-muted-foreground" />
+        )}
+      </Button>
+    </div>
+  );
+}

apps/dashboard/src/@/components/ui/radio-group.tsx

@@ -51,12 +51,12 @@ const RadioGroupItemButton = React.forwardRef<
     <RadioGroupPrimitive.Item
       ref={ref}
       className={cn(
-        "group flex min-w-32 cursor-pointer items-center space-x-3 space-y-0 rounded-md border-2 px-3 py-4 font-medium transition-all hover:border-foreground/25 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 peer-hover:border-nonce data-[state=checked]:border-inverted",
+        "group flex min-w-32 cursor-pointer items-center space-x-3 space-y-0 rounded-lg border px-4 py-3 font-medium transition-all hover:border-foreground/25 hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 peer-hover:border-nonce data-[state=checked]:border-muted-foreground",
         className,
       )}
       {...props}
     >
-      <div className="flex aspect-square h-4 w-4 items-center justify-center rounded-full border-2 text-inverted ring-offset-background transition-all focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 group-hover:border-foreground/25 group-data-[state=checked]:border-inverted">
+      <div className="flex aspect-square h-4 w-4 items-center justify-center rounded-full border text-inverted ring-offset-background transition-all focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 group-hover:border-foreground/25 group-data-[state=checked]:border-inverted">
         {/* Show on checked */}
         <RadioGroupPrimitive.Indicator className="flex items-center justify-center rounded-full transition-all">
           <Circle className="h-2 w-2 fill-current text-current" />

apps/dashboard/src/@/constants/auth.ts

@@ -5,7 +5,6 @@ const LOGGED_IN_ONLY_PATHS = [
   "/team",
   // anything that _starts_ with /cli is logged in only
   "/cli",
-  "/support",
   // publish page
   "/contracts/publish",
 ];

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

@@ -0,0 +1,21 @@
+import type { ThirdwebClient } from "thirdweb";
+import { resolveScheme } from "thirdweb/storage";
+
+export function resolveSchemeWithErrorHandler(options: {
+  uri: string | undefined;
+  client: ThirdwebClient;
+}) {
+  if (!options.uri) {
+    return undefined;
+  }
+  try {
+    // eslint-disable-next-line no-restricted-syntax
+    return resolveScheme({
+      uri: options.uri,
+      client: options.client,
+    });
+  } catch (err) {
+    console.error("error resolving ipfs url", options.uri, err);
+    return undefined;
+  }
+}

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

@@ -5,6 +5,7 @@ import {
   useQueryClient,
 } from "@tanstack/react-query";
 import { THIRDWEB_ANALYTICS_API_HOST, THIRDWEB_API_HOST } from "constants/urls";
+import { useAllChainsData } from "hooks/chains/allChains";
 import invariant from "tiny-invariant";
 import { accountKeys, apiKeys, authorizedWallets } from "../cache-keys";
 import { useLoggedInUser } from "./useLoggedInUser";
@@ -241,6 +242,14 @@ export interface UserOpStats {
   sponsoredUsd: number;
 }
 
+export interface UserOpStatsByChain {
+  date: string;
+  successful: number;
+  failed: number;
+  sponsoredUsd: number;
+  chainId?: string;
+}
+
 interface BillingProduct {
   name: string;
   id: string;
@@ -434,8 +443,9 @@ export function useUserOpUsageAggregate(args: {
 }) {
   const { clientId, from, to } = args;
   const { user, isLoggedIn } = useLoggedInUser();
+  const chainStore = useAllChainsData();
 
-  return useQuery({
+  return useQuery<UserOpStats>({
     queryKey: accountKeys.userOpStats(
       user?.address as string,
       clientId as string,
@@ -444,12 +454,37 @@ export function useUserOpUsageAggregate(args: {
       "all",
     ),
     queryFn: async () => {
-      return getUserOpUsage({
-        clientId,
-        from,
-        to,
-        period: "all",
-      });
+      const userOpStats: (UserOpStats & { chainId?: string })[] =
+        await getUserOpUsage({
+          clientId,
+          from,
+          to,
+          period: "all",
+        });
+
+      // Aggregate stats across wallet types
+      return userOpStats.reduce(
+        (acc, curr) => {
+          // Skip testnets from the aggregated stats
+          if (curr.chainId) {
+            const chain = chainStore.idToChain.get(Number(curr.chainId));
+            if (chain?.testnet) {
+              return acc;
+            }
+          }
+
+          acc.successful += curr.successful;
+          acc.failed += curr.failed;
+          acc.sponsoredUsd += curr.sponsoredUsd;
+          return acc;
+        },
+        {
+          date: (from || new Date()).toISOString(),
+          successful: 0,
+          failed: 0,
+          sponsoredUsd: 0,
+        },
+      );
     },
     enabled: !!clientId && !!user?.address && isLoggedIn,
   });

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

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

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

@@ -1,7 +1,7 @@
 "use client";
 
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import type { ResultItem } from "components/engine/system-metrics/components/StatusCodes";
+import type { ResultItem } from "app/team/[team_slug]/[project_slug]/engine/(instance)/[engineId]/metrics/components/StatusCodes";
 import { THIRDWEB_API_HOST } from "constants/urls";
 import type { EngineBackendWalletType } from "lib/engine";
 import { useState } from "react";

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

@@ -47,7 +47,7 @@ export function FaucetButton({
   amount,
 }: {
   chain: ChainMetadata;
-  amount: string;
+  amount: number;
 }) {
   const client = useThirdwebClient();
   const address = useActiveAccount()?.address;

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

@@ -1,16 +1,16 @@
 import type { ChainMetadata } from "thirdweb/chains";
+import { getFaucetClaimAmount } from "../../../../../../api/testnet-faucet/claim/claim-amount";
 import { ChainIcon } from "../../../../components/server/chain-icon";
 import { FaucetButton } from "../client/FaucetButton";
 import { GiftIcon } from "../icons/GiftIcon";
 import { SectionTitle } from "./SectionTitle";
 
-const amountToGive = "0.01";
-
 export async function FaucetSection(props: { chain: ChainMetadata }) {
   const { chain } = props;
 
   // Check eligibilty.
   const sanitizedChainName = chain.name.replace("Mainnet", "").trim();
+  const amountToGive = getFaucetClaimAmount(props.chain.chainId);
 
   return (
     <section>

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

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

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

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

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

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

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

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

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

@@ -1,5 +1,6 @@
 "use client";
 
+import { Spinner } from "@/components/ui/Spinner/Spinner";
 import { ToolTipLabel } from "@/components/ui/tooltip";
 import { AdminOnly } from "@3rdweb-sdk/react/components/roles/admin-only";
 import { useIsAdmin } from "@3rdweb-sdk/react/hooks/useContractRoles";
@@ -13,7 +14,6 @@ import {
   Menu,
   MenuButton,
   MenuList,
-  Spinner,
 } from "@chakra-ui/react";
 import { TransactionButton } from "components/buttons/TransactionButton";
 import { useTrack } from "hooks/analytics/useTrack";
@@ -445,19 +445,16 @@ export const ClaimConditionsForm: React.FC<ClaimConditionsFormProps> = ({
     };
   }, [claimConditionsQuery.data, controlledFields, isMultiPhase]);
 
+  if (isFetchingData) {
+    return (
+      <div className="flex h-[400px] w-full items-center justify-center rounded-lg border border-border">
+        <Spinner className="size-10" />
+      </div>
+    );
+  }
+
   return (
     <>
-      {/* spinner */}
-      {isFetchingData && (
-        <Spinner
-          color="primary"
-          size="xs"
-          position="absolute"
-          top={2}
-          right={4}
-        />
-      )}
-
       <Flex onSubmit={handleFormSubmit} direction="column" as="form" gap={10}>
         <Flex direction="column" gap={6}>
           {/* Show the reason why the form is disabled */}
@@ -553,7 +550,7 @@ export const ClaimConditionsForm: React.FC<ClaimConditionsFormProps> = ({
 
           <Flex
             justifyContent="space-between"
-            flexDir={{ base: "column", md: isColumn ? "column" : "row" }}
+            flexDir={{ base: "column", md: "row" }}
             gap={2}
           >
             <div className="flex flex-row gap-2">

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

@@ -19,12 +19,7 @@ export const ClaimConditions: React.FC<ClaimConditionsProps> = ({
   return (
     <div className="flex w-full flex-col gap-8">
       <Flex p={0} position="relative">
-        <Flex
-          pt={{ base: isColumn ? 0 : 6, md: 6 }}
-          direction="column"
-          gap={8}
-          w="full"
-        >
+        <Flex direction="column" gap={6} w="full">
           {/* Info */}
           <section>
             <h2 className="mb-1 font-semibold text-xl tracking-tight">

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -20,27 +20,25 @@ export async function getContractPageParamsInfo(params: {
     // move on
   }
 
-  if (!chainMetadata) {
-    const cookieStore = cookies();
-    const localChainStoreValue = cookieStore.get(TW_LOCAL_CHAIN_STORE)?.value;
+  const cookieStore = cookies();
+  const localChainStoreValue = cookieStore.get(TW_LOCAL_CHAIN_STORE)?.value;
 
-    if (localChainStoreValue) {
-      try {
-        const chains = JSON.parse(decodeURIComponent(localChainStoreValue));
-        if (typeof chains === "object" && Array.isArray(chains)) {
-          const chainOverrides = chains as ChainMetadata[];
-          const chain = chainOverrides.find(
-            (c) =>
-              c.slug === chainSlugOrId ||
-              c.chainId === Number.parseInt(chainSlugOrId),
-          );
-          if (chain) {
-            chainMetadata = chain;
-          }
+  if (localChainStoreValue) {
+    try {
+      const chains = JSON.parse(decodeURIComponent(localChainStoreValue));
+      if (typeof chains === "object" && Array.isArray(chains)) {
+        const chainOverrides = chains as ChainMetadata[];
+        const chain = chainOverrides.find(
+          (c) =>
+            c.slug === chainSlugOrId ||
+            c.chainId === Number.parseInt(chainSlugOrId),
+        );
+        if (chain) {
+          chainMetadata = chain;
         }
-      } catch {
-        // noop
       }
+    } catch {
+      // noop
     }
   }
 

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

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

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

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

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

@@ -31,14 +31,19 @@ export const AccountSigners: React.FC<AccountSignersProps> = ({ contract }) => {
   );
   const data = transformedAdmins.concat(transformedSigners || []);
   return (
-    <div className="flex flex-col gap-6">
-      {data.map((item) => (
-        <AccountSigner
-          key={item.signer}
-          item={item}
-          contractChainId={contract.chain.id}
-        />
-      ))}
+    <div>
+      <h1 className="mb-4 font-semibold text-2xl tracking-tight">
+        Account Signers
+      </h1>
+      <div className="flex flex-col gap-6">
+        {data.map((item) => (
+          <AccountSigner
+            key={item.signer}
+            item={item}
+            contractChainId={contract.chain.id}
+          />
+        ))}
+      </div>
     </div>
   );
 };

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

@@ -1,6 +1,8 @@
 import { notFound, redirect } from "next/navigation";
+import { localhost } from "thirdweb/chains";
 import { getContractPageParamsInfo } from "../_utils/getContractFromParams";
 import { getContractPageMetadata } from "../_utils/getContractPageMetadata";
+import { AccountSignersClient } from "./AccountSigners.client";
 import { AccountSigners } from "./components/account-signers";
 
 export default async function Page(props: {
@@ -15,7 +17,12 @@ export default async function Page(props: {
     notFound();
   }
 
-  const { contract } = info;
+  const { contract, chainMetadata } = info;
+
+  if (chainMetadata.chainId === localhost.id) {
+    return <AccountSignersClient contract={contract} />;
+  }
+
   const { isAccountPermissionsSupported } =
     await getContractPageMetadata(contract);
 
@@ -23,12 +30,5 @@ export default async function Page(props: {
     redirect(`/${props.params.chain_id}/${props.params.contractAddress}`);
   }
 
-  return (
-    <div>
-      <h1 className="mb-4 font-semibold text-2xl tracking-tight">
-        Account Signers
-      </h1>
-      <AccountSigners contract={contract} />
-    </div>
-  );
+  return <AccountSigners contract={contract} />;
 }

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

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

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

@@ -1,7 +1,9 @@
 import { notFound, redirect } from "next/navigation";
+import { localhost } from "thirdweb/chains";
 import { getContractPageParamsInfo } from "../_utils/getContractFromParams";
 import { getContractPageMetadata } from "../_utils/getContractPageMetadata";
 import { AccountPage } from "./AccountPage";
+import { AccountPageClient } from "./AccountPage.client";
 
 export default async function Page(props: {
   params: {
@@ -16,6 +18,12 @@ export default async function Page(props: {
   }
 
   const { contract, chainMetadata } = info;
+  if (contract.chain.id === localhost.id) {
+    return (
+      <AccountPageClient contract={contract} chainMetadata={chainMetadata} />
+    );
+  }
+
   const { isAccount } = await getContractPageMetadata(contract);
 
   if (!isAccount) {

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,38 @@
+"use client";
+
+import type { ThirdwebContract } from "thirdweb";
+import { ClaimConditions } from "../_components/claim-conditions/claim-conditions";
+import { ErrorPage, LoadingPage } from "../_components/page-skeletons";
+import { RedirectToContractOverview } from "../_components/redirect-contract-overview.client";
+import { useContractPageMetadata } from "../_hooks/useContractPageMetadata";
+
+export function ClaimConditionsClient(props: {
+  contract: ThirdwebContract;
+}) {
+  const metadataQuery = useContractPageMetadata(props.contract);
+
+  if (metadataQuery.isPending) {
+    return <LoadingPage />;
+  }
+
+  if (metadataQuery.isError) {
+    return <ErrorPage />;
+  }
+
+  const {
+    isERC20ClaimConditionsSupported,
+    isERC721ClaimConditionsSupported,
+    supportedERCs,
+  } = metadataQuery.data;
+
+  if (!isERC20ClaimConditionsSupported && !isERC721ClaimConditionsSupported) {
+    return <RedirectToContractOverview contract={props.contract} />;
+  }
+
+  return (
+    <ClaimConditions
+      contract={props.contract}
+      isERC20={supportedERCs.isERC20}
+    />
+  );
+}

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

@@ -1,7 +1,9 @@
 import { notFound, redirect } from "next/navigation";
+import { localhost } from "thirdweb/chains";
 import { ClaimConditions } from "../_components/claim-conditions/claim-conditions";
 import { getContractPageParamsInfo } from "../_utils/getContractFromParams";
 import { getContractPageMetadata } from "../_utils/getContractPageMetadata";
+import { ClaimConditionsClient } from "./ClaimConditions.client";
 
 export default async function Page(props: {
   params: {
@@ -14,8 +16,12 @@ export default async function Page(props: {
   if (!info) {
     notFound();
   }
+  const { contract, chainMetadata } = info;
+
+  if (chainMetadata.chainId === localhost.id) {
+    return <ClaimConditionsClient contract={contract} />;
+  }
 
-  const { contract } = info;
   const {
     isERC20ClaimConditionsSupported,
     isERC721ClaimConditionsSupported,

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

@@ -0,0 +1,26 @@
+"use client";
+
+import type { ChainMetadata } from "thirdweb/chains";
+import type { ThirdwebContract } from "thirdweb/contract";
+import { LoadingPage } from "../_components/page-skeletons";
+import { useResolveContractABI } from "../_hooks/useResolveContractABI";
+import { ContractCodePage } from "./contract-code-page";
+
+export function ContractCodePageClient(props: {
+  contract: ThirdwebContract;
+  chainMetadata: ChainMetadata;
+}) {
+  const abiQuery = useResolveContractABI(props.contract);
+
+  if (abiQuery.isPending) {
+    return <LoadingPage />;
+  }
+
+  return (
+    <ContractCodePage
+      abi={abiQuery.data}
+      contract={props.contract}
+      chainMetadata={props.chainMetadata}
+    />
+  );
+}

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

@@ -0,0 +1,33 @@
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import type { Abi } from "abitype";
+import { CircleAlertIcon } from "lucide-react";
+import type { ChainMetadata } from "thirdweb/chains";
+import type { ThirdwebContract } from "thirdweb/contract";
+import { CodeOverview } from "../../../../../../contract-ui/tabs/code/components/code-overview";
+
+export function ContractCodePage(props: {
+  abi: Abi | undefined;
+  contract: ThirdwebContract;
+  chainMetadata: ChainMetadata;
+}) {
+  if (props.abi) {
+    return (
+      <CodeOverview
+        abi={props.abi}
+        contractAddress={props.contract.address}
+        chainId={props.contract.chain.id}
+      />
+    );
+  }
+
+  return (
+    <Alert variant="destructive">
+      <CircleAlertIcon className="size-5" />
+      <AlertTitle>Failed to resolve contract ABI</AlertTitle>
+      <AlertDescription>
+        Please verify that contract address is correct and deployed on "
+        {props.chainMetadata.name}" chain.
+      </AlertDescription>
+    </Alert>
+  );
+}

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

@@ -1,9 +1,9 @@
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { CircleAlertIcon } from "lucide-react";
 import { notFound } from "next/navigation";
+import { localhost } from "thirdweb/chains";
 import { resolveContractAbi } from "thirdweb/contract";
-import { CodeOverview } from "../../../../../../contract-ui/tabs/code/components/code-overview";
 import { getContractPageParamsInfo } from "../_utils/getContractFromParams";
+import { ContractCodePage } from "./contract-code-page";
+import { ContractCodePageClient } from "./contract-code-page.client";
 
 export default async function Page(props: {
   params: {
@@ -19,26 +19,22 @@ export default async function Page(props: {
 
   const { contract, chainMetadata } = info;
 
-  try {
-    const abi = await resolveContractAbi(contract);
-
+  if (contract.chain.id === localhost.id) {
     return (
-      <CodeOverview
-        abi={abi}
-        contractAddress={contract.address}
-        chainId={contract.chain.id}
+      <ContractCodePageClient
+        contract={contract}
+        chainMetadata={chainMetadata}
       />
     );
-  } catch {
-    return (
-      <Alert variant="destructive">
-        <CircleAlertIcon className="size-5" />
-        <AlertTitle>Failed to resolve contract ABI</AlertTitle>
-        <AlertDescription>
-          Please verify that contract address is correct and deployed on "
-          {chainMetadata.name}" chain.
-        </AlertDescription>
-      </Alert>
-    );
   }
+
+  const abi = await resolveContractAbi(contract).then(() => undefined);
+
+  return (
+    <ContractCodePage
+      abi={abi}
+      contract={contract}
+      chainMetadata={chainMetadata}
+    />
+  );
 }

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/embed/EmbedSetup.client.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import type { ThirdwebContract } from "thirdweb";
+import { ErrorPage, LoadingPage } from "../_components/page-skeletons";
+import { RedirectToContractOverview } from "../_components/redirect-contract-overview.client";
+import { useContractPageMetadata } from "../_hooks/useContractPageMetadata";
+import { EmbedSetup } from "./embed-setup";
+
+export function EmbedSetupClient(props: {
+  contract: ThirdwebContract;
+}) {
+  const metadataQuery = useContractPageMetadata(props.contract);
+
+  if (metadataQuery.isPending) {
+    return <LoadingPage />;
+  }
+
+  if (metadataQuery.isError) {
+    return <ErrorPage />;
+  }
+
+  if (metadataQuery.data.embedType === null) {
+    return <RedirectToContractOverview contract={props.contract} />;
+  }
+
+  return (
+    <EmbedSetup
+      contract={props.contract}
+      ercOrMarketplace={metadataQuery.data.embedType}
+    />
+  );
+}

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/embed/embed-setup.tsx

@@ -1,19 +1,22 @@
 "use client";
 
+import { Button } from "@/components/ui/button";
 import { useApiKeys, useCreateApiKey } from "@3rdweb-sdk/react/hooks/useApi";
-import { Flex, FormControl, Input, Link, Select } from "@chakra-ui/react";
+import { Flex, FormControl, Input, Select } from "@chakra-ui/react";
+import { LazyCreateAPIKeyDialog } from "components/settings/ApiKeys/Create/LazyCreateAPIKeyDialog";
 import { useTrack } from "hooks/analytics/useTrack";
 import { useAllChainsData } from "hooks/chains/allChains";
 import { useClipboard } from "hooks/useClipboard";
-import { useTxNotifications } from "hooks/useTxNotifications";
 import { CheckIcon, CopyIcon } from "lucide-react";
-import { useMemo } from "react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { useMemo, useState } from "react";
 import { useForm } from "react-hook-form";
 import type { StoredChain } from "stores/chainStores";
 import type { ThirdwebContract } from "thirdweb";
 import type { ChainMetadata } from "thirdweb/chains";
+import { useActiveAccount } from "thirdweb/react";
 import {
-  Button,
   Card,
   CodeBlock,
   FormHelperText,
@@ -211,10 +214,6 @@ export const EmbedSetup: React.FC<EmbedSetupProps> = ({
 
   const apiKeys = useApiKeys();
   const createKeyMutation = useCreateApiKey();
-  const { onSuccess, onError } = useTxNotifications(
-    "API key created",
-    "Failed to create API key",
-  );
 
   const validApiKey = (apiKeys.data || []).find(
     (apiKey) =>
@@ -298,14 +297,35 @@ export const EmbedSetup: React.FC<EmbedSetupProps> = ({
   );
 
   const { hasCopied, onCopy } = useClipboard(embedCode, 3000);
+  const [showCreateAPIKeyModal, setShowCreateAPIKeyModal] = useState(false);
+  const activeAccount = useActiveAccount();
+  const pathname = usePathname();
 
   return (
     <Flex gap={8} direction="column">
+      <LazyCreateAPIKeyDialog
+        wording="api-key"
+        prefill={{
+          name: "Embed API Key",
+          domains: "embed.ipfscdn.io",
+        }}
+        open={showCreateAPIKeyModal}
+        onOpenChange={setShowCreateAPIKeyModal}
+        onCreateAndComplete={() => {
+          trackEvent({
+            category: "api-keys",
+            action: "create",
+            label: "success",
+            fromEmbed: true,
+          });
+          apiKeys.refetch();
+        }}
+      />
+
       <Flex gap={8} direction={{ base: "column", md: "row" }}>
-        <Card className="flex w-full flex-col gap-2 md:w-1/2">
-          <Heading size="title.sm" mb={4}>
-            Configuration
-          </Heading>
+        <Card className="flex w-full flex-col gap-5 md:w-1/2">
+          <Heading size="title.sm">Configuration</Heading>
+
           {ercOrMarketplace === "marketplace" ? (
             <FormControl>
               <FormLabel>Listing ID</FormLabel>
@@ -315,6 +335,7 @@ export const EmbedSetup: React.FC<EmbedSetupProps> = ({
               </FormHelperText>
             </FormControl>
           ) : null}
+
           {ercOrMarketplace === "marketplace-v3" ? (
             <FormControl>
               <FormLabel>Listing type</FormLabel>
@@ -327,6 +348,7 @@ export const EmbedSetup: React.FC<EmbedSetupProps> = ({
               </FormHelperText>
             </FormControl>
           ) : null}
+
           {ercOrMarketplace === "marketplace-v3" &&
           watch("listingType") === "direct-listing" ? (
             <FormControl>
@@ -337,6 +359,7 @@ export const EmbedSetup: React.FC<EmbedSetupProps> = ({
               </FormHelperText>
             </FormControl>
           ) : null}
+
           {ercOrMarketplace === "marketplace-v3" &&
           watch("listingType") === "english-auction" ? (
             <FormControl>
@@ -347,6 +370,7 @@ export const EmbedSetup: React.FC<EmbedSetupProps> = ({
               </FormHelperText>
             </FormControl>
           ) : null}
+
           {ercOrMarketplace === "erc1155" ? (
             <FormControl>
               <FormLabel>Token ID</FormLabel>
@@ -356,9 +380,20 @@ export const EmbedSetup: React.FC<EmbedSetupProps> = ({
               </FormHelperText>
             </FormControl>
           ) : null}
+
           <FormControl>
             <FormLabel>Client ID</FormLabel>
-            {validApiKey ? (
+            {!activeAccount ? (
+              <Button asChild className="w-full">
+                <Link
+                  href={`/login${
+                    pathname ? `?next=${encodeURIComponent(pathname)}` : ""
+                  }`}
+                >
+                  Sign in to create a client ID
+                </Link>
+              </Button>
+            ) : validApiKey ? (
               <Input
                 readOnly
                 disabled
@@ -366,11 +401,7 @@ export const EmbedSetup: React.FC<EmbedSetupProps> = ({
               />
             ) : (
               <Button
-                bgColor="bgBlack"
-                color="bgWhite"
-                _hover={{
-                  opacity: 0.8,
-                }}
+                className="w-full"
                 onClick={() => {
                   trackEvent({
                     category: "api-keys",
@@ -379,44 +410,7 @@ export const EmbedSetup: React.FC<EmbedSetupProps> = ({
                     fromEmbed: true,
                   });
 
-                  createKeyMutation.mutate(
-                    {
-                      name: "Embed API key",
-                      domains: ["embed.ipfscdn.io"],
-                      services: [
-                        {
-                          name: "rpc",
-                          targetAddresses: ["*"],
-                        },
-                        {
-                          name: "storage",
-                          targetAddresses: ["*"],
-                          actions: ["read"],
-                        },
-                      ],
-                    },
-                    {
-                      onSuccess: () => {
-                        onSuccess();
-                        trackEvent({
-                          category: "api-keys",
-                          action: "create",
-                          label: "success",
-                          fromEmbed: true,
-                        });
-                      },
-                      onError: (err) => {
-                        onError(err);
-                        trackEvent({
-                          category: "api-keys",
-                          action: "create",
-                          label: "error",
-                          error: err,
-                          fromEmbed: true,
-                        });
-                      },
-                    },
-                  );
+                  setShowCreateAPIKeyModal(true);
                 }}
                 disabled={createKeyMutation.isPending}
               >
@@ -428,14 +422,15 @@ export const EmbedSetup: React.FC<EmbedSetupProps> = ({
               You need a client ID to use embeds.{" "}
               <Link
                 href="https://portal.thirdweb.com/account/api-keys"
-                color="primary.500"
-                isExternal
+                className="text-link-foreground hover:text-foreground"
+                target="_blank"
               >
                 Learn more
               </Link>
               .
             </FormHelperText>
           </FormControl>
+
           <FormControl>
             <FormLabel>RPC Url</FormLabel>
             <Input type="url" {...register("rpcUrl")} />
@@ -477,8 +472,8 @@ export const EmbedSetup: React.FC<EmbedSetupProps> = ({
                 A relayer can be used to make the transaction gasless for the
                 end user.{" "}
                 <Link
-                  isExternal
-                  color="blue.500"
+                  target="_blank"
+                  className="text-link-foreground hover:text-foreground"
                   href="https://blog.thirdweb.com/guides/setup-gasless-transactions"
                 >
                   Learn more
@@ -486,6 +481,7 @@ export const EmbedSetup: React.FC<EmbedSetupProps> = ({
               </FormHelperText>
             </FormControl>
           )}
+
           <FormControl>
             <Heading size="title.sm" my={4}>
               Customization
@@ -501,6 +497,7 @@ export const EmbedSetup: React.FC<EmbedSetupProps> = ({
               on the user system&apos;s preferences.
             </FormHelperText>
           </FormControl>
+
           <FormControl>
             <FormLabel>Primary Color</FormLabel>
             <Select {...register("primaryColor")}>
@@ -517,6 +514,7 @@ export const EmbedSetup: React.FC<EmbedSetupProps> = ({
               Used for the main actions button backgrounds.
             </FormHelperText>
           </FormControl>
+
           {ercOrMarketplace === "marketplace" ||
           ercOrMarketplace === "marketplace-v3" ? (
             <FormControl>
@@ -535,6 +533,7 @@ export const EmbedSetup: React.FC<EmbedSetupProps> = ({
             </FormControl>
           ) : null}
         </Card>
+
         <Card className="flex w-full flex-col gap-2 md:w-1/2">
           <Heading size="title.sm">Embed Code</Heading>
           <CodeBlock
@@ -545,8 +544,7 @@ export const EmbedSetup: React.FC<EmbedSetupProps> = ({
             language="markup"
           />
           <Button
-            colorScheme="purple"
-            w="auto"
+            className="w-auto gap-2"
             variant="outline"
             onClick={() => {
               onCopy();
@@ -558,14 +556,12 @@ export const EmbedSetup: React.FC<EmbedSetupProps> = ({
                 chainId,
               });
             }}
-            leftIcon={
-              hasCopied ? (
-                <CheckIcon className="size-4" />
-              ) : (
-                <CopyIcon className="size-4" />
-              )
-            }
           >
+            {hasCopied ? (
+              <CheckIcon className="size-4" />
+            ) : (
+              <CopyIcon className="size-4" />
+            )}
             {hasCopied ? "Copied!" : "Copy to clipboard"}
           </Button>
         </Card>

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

@@ -1,6 +1,8 @@
 import { notFound, redirect } from "next/navigation";
+import { localhost } from "thirdweb/chains";
 import { getContractPageParamsInfo } from "../_utils/getContractFromParams";
 import { getContractPageMetadata } from "../_utils/getContractPageMetadata";
+import { EmbedSetupClient } from "./EmbedSetup.client";
 import { EmbedSetup } from "./embed-setup";
 
 export default async function Page(props: {
@@ -15,11 +17,16 @@ export default async function Page(props: {
     notFound();
   }
 
-  const { embedType } = await getContractPageMetadata(info.contract);
+  const { contract } = info;
+  if (contract.chain.id === localhost.id) {
+    return <EmbedSetupClient contract={contract} />;
+  }
+
+  const { embedType } = await getContractPageMetadata(contract);
 
   if (embedType === null) {
     redirect(`/${props.params.chain_id}/${props.params.contractAddress}`);
   }
 
-  return <EmbedSetup contract={info.contract} ercOrMarketplace={embedType} />;
+  return <EmbedSetup contract={contract} ercOrMarketplace={embedType} />;
 }

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/explorer/ContractExplorerPage.client.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import type { ThirdwebContract } from "thirdweb";
+import type { ChainMetadata } from "thirdweb/chains";
+import { LoadingPage } from "../_components/page-skeletons";
+import { useResolveContractABI } from "../_hooks/useResolveContractABI";
+import { ContractExplorerPage } from "./ContractExplorerPage";
+
+interface ContractExplorePageProps {
+  contract: ThirdwebContract;
+  chainMetadata: ChainMetadata;
+}
+
+export const ContractExplorerPageClient: React.FC<ContractExplorePageProps> = ({
+  contract,
+  chainMetadata,
+}) => {
+  const abiQuery = useResolveContractABI(contract);
+
+  if (abiQuery.isPending) {
+    return <LoadingPage />;
+  }
+
+  return (
+    <ContractExplorerPage
+      abi={abiQuery.data}
+      contract={contract}
+      chainMetadata={chainMetadata}
+    />
+  );
+};

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/explorer/ContractExplorerPage.tsx

@@ -1,21 +1,36 @@
-"use client";
-
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Flex } from "@chakra-ui/react";
 import type { Abi } from "abitype";
 import { getContractFunctionsFromAbi } from "components/contract-components/getContractFunctionsFromAbi";
 import { ContractFunctionsOverview } from "components/contract-functions/contract-functions";
+import { CircleAlertIcon } from "lucide-react";
 import type { ThirdwebContract } from "thirdweb";
-
-// TODO - figure out why we have to add "use client" here and it does not work without it
+import type { ChainMetadata } from "thirdweb/chains";
 
 interface ContractExplorePageProps {
   contract: ThirdwebContract;
-  abi: Abi;
+  abi: Abi | undefined;
+  chainMetadata: ChainMetadata;
 }
+
 export const ContractExplorerPage: React.FC<ContractExplorePageProps> = ({
   contract,
   abi,
+  chainMetadata,
 }) => {
+  if (!abi) {
+    return (
+      <Alert variant="destructive">
+        <CircleAlertIcon className="size-5" />
+        <AlertTitle>Failed to resolve contract ABI</AlertTitle>
+        <AlertDescription>
+          Please verify that contract address is correct and deployed on "
+          {chainMetadata.name}" chain.
+        </AlertDescription>
+      </Alert>
+    );
+  }
+
   const functions = getContractFunctionsFromAbi(abi);
   return (
     <Flex direction="column" h="70vh">

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

@@ -1,9 +1,9 @@
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { CircleAlertIcon } from "lucide-react";
 import { notFound } from "next/navigation";
+import { localhost } from "thirdweb/chains";
 import { resolveContractAbi } from "thirdweb/contract";
 import { getContractPageParamsInfo } from "../_utils/getContractFromParams";
 import { ContractExplorerPage } from "./ContractExplorerPage";
+import { ContractExplorerPageClient } from "./ContractExplorerPage.client";
 
 export default async function Page(props: {
   params: {
@@ -19,19 +19,22 @@ export default async function Page(props: {
 
   const { contract, chainMetadata } = info;
 
-  try {
-    const abi = await resolveContractAbi(contract);
-    return <ContractExplorerPage contract={contract} abi={abi} />;
-  } catch {
+  if (contract.chain.id === localhost.id) {
     return (
-      <Alert variant="destructive">
-        <CircleAlertIcon className="size-5" />
-        <AlertTitle>Failed to resolve contract ABI</AlertTitle>
-        <AlertDescription>
-          Please verify that contract address is correct and deployed on "
-          {chainMetadata.name}" chain.
-        </AlertDescription>
-      </Alert>
+      <ContractExplorerPageClient
+        contract={contract}
+        chainMetadata={chainMetadata}
+      />
     );
   }
+
+  const abi = await resolveContractAbi(contract).catch(() => undefined);
+
+  return (
+    <ContractExplorerPage
+      contract={contract}
+      abi={abi}
+      chainMetadata={chainMetadata}
+    />
+  );
 }

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

@@ -1,13 +1,14 @@
-import { ChakraProviderSetup } from "@/components/ChakraProviderSetup";
-import { SidebarLayout } from "@/components/blocks/SidebarLayout";
-import { ContractMetadata } from "components/custom-contract/contract-header/contract-metadata";
-import { DeprecatedAlert } from "components/shared/DeprecatedAlert";
 import type { Metadata } from "next";
+import { notFound } from "next/navigation";
+import { localhost } from "thirdweb/chains";
 import { getContractMetadata } from "thirdweb/extensions/common";
+import { isAddress, isContractDeployed } from "thirdweb/utils";
 import { resolveFunctionSelectors } from "../../../../../lib/selectors";
 import { shortenIfAddress } from "../../../../../utils/usedapp-external";
-import { ConfigureCustomChain } from "./ConfigureCustomChain";
-import { PrimaryDashboardButton } from "./_components/primary-dashboard-button";
+import { ConfigureCustomChain } from "./_layout/ConfigureCustomChain";
+import { getContractMetadataHeaderData } from "./_layout/contract-metadata";
+import { ContractPageLayout } from "./_layout/contract-page-layout";
+import { ContractPageLayoutClient } from "./_layout/contract-page-layout.client";
 import { supportedERCs } from "./_utils/detectedFeatures/supportedERCs";
 import { getContractPageParamsInfo } from "./_utils/getContractFromParams";
 import { getContractPageMetadata } from "./_utils/getContractPageMetadata";
@@ -20,6 +21,10 @@ export default async function Layout(props: {
   };
   children: React.ReactNode;
 }) {
+  if (!isAddress(props.params.contractAddress)) {
+    return notFound();
+  }
+
   const info = await getContractPageParamsInfo(props.params);
 
   if (!info) {
@@ -27,37 +32,49 @@ export default async function Layout(props: {
   }
 
   const { contract, chainMetadata } = info;
+
+  if (chainMetadata.status === "deprecated") {
+    notFound();
+  }
+
+  if (contract.chain.id === localhost.id) {
+    return (
+      <ContractPageLayoutClient
+        chainMetadata={chainMetadata}
+        contract={contract}
+      >
+        {props.children}
+      </ContractPageLayoutClient>
+    );
+  }
+
+  // check if the contract exists
+  const isValidContract = await isContractDeployed(contract).catch(() => false);
+  if (!isValidContract) {
+    // TODO - replace 404 with a better page to upsale deploy or other thirdweb products
+    notFound();
+  }
   const contractPageMetadata = await getContractPageMetadata(contract);
+
   const sidebarLinks = getContractPageSidebarLinks({
     chainSlug: chainMetadata.slug,
     contractAddress: contract.address,
     metadata: contractPageMetadata,
   });
 
+  const { contractMetadata, externalLinks } =
+    await getContractMetadataHeaderData(contract);
+
   return (
-    <ChakraProviderSetup>
-      <SidebarLayout sidebarLinks={sidebarLinks}>
-        <div className="border-border border-b pb-8">
-          <div className="flex flex-col gap-4 ">
-            <div className="flex flex-col justify-between gap-4 md:flex-row">
-              <ContractMetadata contract={contract} chain={chainMetadata} />
-              <PrimaryDashboardButton
-                contractAddress={contract.address}
-                chain={contract.chain}
-                contractInfo={{
-                  chain: chainMetadata,
-                  chainSlug: chainMetadata.slug,
-                  contractAddress: contract.address,
-                }}
-              />
-            </div>
-            <DeprecatedAlert chain={chainMetadata} />
-          </div>
-        </div>
-        <div className="h-8" />
-        <div className="pb-10">{props.children}</div>
-      </SidebarLayout>
-    </ChakraProviderSetup>
+    <ContractPageLayout
+      chainMetadata={chainMetadata}
+      contract={contract}
+      sidebarLinks={sidebarLinks}
+      dashboardContractMetadata={contractMetadata}
+      externalLinks={externalLinks}
+    >
+      {props.children}
+    </ContractPageLayout>
   );
 }
 

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/ContractEditModulesPage.client.tsx

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

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/InstalledModulesTable.tsx

@@ -1,35 +1,11 @@
 "use client";
 
-import { WalletAddress } from "@/components/blocks/wallet-address";
-import { CopyAddressButton } from "@/components/ui/CopyAddressButton";
 import { ScrollShadow } from "@/components/ui/ScrollShadow/ScrollShadow";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
 import { Alert, AlertTitle } from "@/components/ui/alert";
-import { Button } from "@/components/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import { Skeleton } from "@/components/ui/skeleton";
-import { ToolTipLabel } from "@/components/ui/tooltip";
-import { useMutation } from "@tanstack/react-query";
-import { TransactionButton } from "components/buttons/TransactionButton";
-import { CircleSlash, TrashIcon } from "lucide-react";
-import { useState } from "react";
-import { toast } from "sonner";
-import {
-  type ContractOptions,
-  getContract,
-  sendTransaction,
-  waitForReceipt,
-} from "thirdweb";
-import { uninstallModuleByProxy } from "thirdweb/modules";
+import { CircleSlash } from "lucide-react";
+import type { ContractOptions } from "thirdweb";
 import type { Account } from "thirdweb/wallets";
-import { useModuleContractInfo } from "./moduleContractInfo";
+import { ModuleCard } from "./module-card";
 
 export const InstalledModulesTable = (props: {
   contract: ContractOptions;
@@ -38,7 +14,7 @@ export const InstalledModulesTable = (props: {
     isPending: boolean;
   };
   refetchModules: () => void;
-  ownerAccount?: Account;
+  ownerAccount: Account | undefined;
 }) => {
   const { installedModules, ownerAccount } = props;
 
@@ -66,249 +42,18 @@ export const InstalledModulesTable = (props: {
     <>
       {sectionTitle}
       <ScrollShadow scrollableClassName="rounded-lg">
-        <table className="w-full selection:bg-inverted selection:text-inverted-foreground">
-          <thead>
-            <TableHeadingRow>
-              <TableHeading> Module Name </TableHeading>
-              <TableHeading> Description </TableHeading>
-              <TableHeading> Publisher Address </TableHeading>
-              <TableHeading> Module Address </TableHeading>
-              <TableHeading> Version </TableHeading>
-              {ownerAccount && <TableHeading> Remove </TableHeading>}
-            </TableHeadingRow>
-          </thead>
-
-          <tbody>
-            {installedModules.isPending ? (
-              <>
-                <SkeletonRow ownerAccount={ownerAccount} />
-                <SkeletonRow ownerAccount={ownerAccount} />
-                <SkeletonRow ownerAccount={ownerAccount} />
-              </>
-            ) : (
-              <>
-                {installedModules.data?.map((e, i) => (
-                  <ModuleRow
-                    // biome-ignore lint/suspicious/noArrayIndexKey: FIXME
-                    key={i}
-                    moduleAddress={e}
-                    contract={props.contract}
-                    onRemoveModule={props.refetchModules}
-                    ownerAccount={ownerAccount}
-                  />
-                ))}
-              </>
-            )}
-          </tbody>
-        </table>
+        <div className="flex flex-col gap-6">
+          {installedModules.data?.map((moduleAddress) => (
+            <ModuleCard
+              key={moduleAddress}
+              moduleAddress={moduleAddress}
+              contract={props.contract}
+              onRemoveModule={props.refetchModules}
+              ownerAccount={ownerAccount}
+            />
+          ))}
+        </div>
       </ScrollShadow>
     </>
   );
 };
-
-function SkeletonRow(props: { ownerAccount?: Account }) {
-  return (
-    <TableRow>
-      <TableData>
-        <Skeleton className="h-6" />
-      </TableData>
-      <TableData>
-        <Skeleton className="h-6" />
-      </TableData>
-      <TableData>
-        <Skeleton className="h-6" />
-      </TableData>
-      <TableData>
-        <Skeleton className="h-6" />
-      </TableData>
-
-      {/* Version */}
-      <TableData>
-        <Skeleton className="h-6" />
-      </TableData>
-
-      {/* Remove */}
-      {props.ownerAccount && (
-        <TableData>
-          <Skeleton className="h-6" />
-        </TableData>
-      )}
-    </TableRow>
-  );
-}
-
-function ModuleRow(props: {
-  moduleAddress: string;
-  contract: ContractOptions;
-  onRemoveModule: () => void;
-  ownerAccount?: Account;
-}) {
-  const { contract, moduleAddress, ownerAccount } = props;
-  const [isUninstallModalOpen, setIsUninstallModalOpen] = useState(false);
-
-  const contractInfo = useModuleContractInfo(
-    getContract({
-      address: moduleAddress,
-      chain: contract.chain,
-      client: contract.client,
-    }),
-  );
-
-  const uninstallMutation = useMutation({
-    mutationFn: async (account: Account) => {
-      const uninstallTransaction = uninstallModuleByProxy({
-        contract,
-        chain: contract.chain,
-        client: contract.client,
-        moduleProxyAddress: moduleAddress,
-        moduleData: "0x",
-      });
-
-      const txResult = await sendTransaction({
-        transaction: uninstallTransaction,
-        account,
-      });
-
-      await waitForReceipt(txResult);
-    },
-    onSuccess() {
-      toast.success("Module Removed successfully");
-      props.onRemoveModule();
-    },
-    onError(error) {
-      toast.error("Failed to remove module");
-      console.error("Error during uninstallation:", error);
-    },
-  });
-
-  const handleRemove = async () => {
-    if (!ownerAccount) {
-      return;
-    }
-
-    setIsUninstallModalOpen(false);
-    uninstallMutation.mutate(ownerAccount);
-  };
-
-  if (!contractInfo) {
-    return <SkeletonRow ownerAccount={ownerAccount} />;
-  }
-
-  return (
-    <TableRow>
-      <TableData>
-        <p>{contractInfo.name}</p>
-      </TableData>
-      <TableData>
-        <p>{contractInfo.description || "..."}</p>
-      </TableData>
-      <TableData>
-        <WalletAddress address={contractInfo.publisher || ""} />
-      </TableData>
-      <TableData>
-        <CopyAddressButton
-          className="text-xs"
-          address={moduleAddress || ""}
-          copyIconPosition="left"
-          variant="outline"
-        />
-      </TableData>
-
-      {/* Version */}
-      <TableData>
-        <p>{contractInfo.version}</p>
-      </TableData>
-
-      {/* Remove */}
-      {ownerAccount && (
-        <TableData>
-          <div>
-            <ToolTipLabel label="Remove Module">
-              <Button
-                onClick={() => setIsUninstallModalOpen(true)}
-                variant="outline"
-                className="rounded-xl p-3 text-red-500"
-              >
-                {uninstallMutation.isPending ? (
-                  <Spinner className="size-4" />
-                ) : (
-                  <TrashIcon className="size-4" />
-                )}
-              </Button>
-            </ToolTipLabel>
-          </div>
-        </TableData>
-      )}
-
-      <Dialog
-        open={isUninstallModalOpen}
-        onOpenChange={setIsUninstallModalOpen}
-      >
-        <DialogContent className="z-[10001]" dialogOverlayClassName="z-[10000]">
-          <form
-            onSubmit={(e) => {
-              e.preventDefault();
-              handleRemove();
-            }}
-          >
-            <DialogHeader>
-              <DialogTitle>Uninstall Module</DialogTitle>
-              <DialogDescription>
-                Are you sure you want to uninstall{" "}
-                <span className="font-medium text-foreground ">
-                  {contractInfo.name}
-                </span>{" "}
-                ?
-              </DialogDescription>
-            </DialogHeader>
-
-            <DialogFooter className="mt-10 flex-row justify-end gap-3 md:gap-1">
-              <Button
-                type="button"
-                onClick={() => setIsUninstallModalOpen(false)}
-                variant="outline"
-              >
-                Cancel
-              </Button>
-
-              <TransactionButton
-                txChainID={contract.chain.id}
-                transactionCount={1}
-                isLoading={uninstallMutation.isPending}
-                type="submit"
-                colorScheme="red"
-                className="flex"
-              >
-                Uninstall
-              </TransactionButton>
-            </DialogFooter>
-          </form>
-        </DialogContent>
-      </Dialog>
-    </TableRow>
-  );
-}
-
-function TableRow(props: { children: React.ReactNode }) {
-  return (
-    <tr className="border-border border-b [&:last-child]:border-b-0">
-      {props.children}
-    </tr>
-  );
-}
-
-function TableData({ children }: { children: React.ReactNode }) {
-  return <td className="px-3 py-4 text-sm">{children}</td>;
-}
-
-function TableHeading(props: { children: React.ReactNode }) {
-  return (
-    <th className="min-w-[150px] border-border border-b px-3 py-3 text-left font-medium text-muted-foreground text-sm">
-      {props.children}
-    </th>
-  );
-}
-
-function TableHeadingRow({ children }: { children: React.ReactNode }) {
-  return <tr className="relative bg-muted/50">{children}</tr>;
-}

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/module-card.stories.tsx

@@ -0,0 +1,120 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useMutation } from "@tanstack/react-query";
+import { Toaster } from "sonner";
+import { BadgeContainer, mobileViewport } from "stories/utils";
+import { ThirdwebProvider } from "thirdweb/react";
+import { ModuleCardUI } from "./module-card";
+
+const meta = {
+  title: "Modules/ModuleCard",
+  component: Component,
+  parameters: {
+    layout: "centered",
+  },
+} satisfies Meta<typeof Component>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Desktop: Story = {
+  args: {},
+};
+
+export const Mobile: Story = {
+  args: {},
+  parameters: {
+    viewport: mobileViewport("iphone14"),
+  },
+};
+
+function Component() {
+  const removeMutation = useMutation({
+    mutationFn: async () => {
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+    },
+  });
+
+  const updateMutation = useMutation({
+    mutationFn: async () => {
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+    },
+  });
+
+  const contractInfo = {
+    name: "Module Name",
+    description:
+      "lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore ",
+    publisher: "0xdd99b75f095d0c4d5112aCe938e4e6ed962fb024",
+    version: "1.0.0",
+  };
+
+  return (
+    <ThirdwebProvider>
+      <div className="container flex max-w-[1150px] flex-col gap-10 py-10">
+        <BadgeContainer label="No Update, No Children, Owner Account">
+          <ModuleCardUI
+            contractInfo={contractInfo}
+            moduleAddress="0x0000000000000000000000000000000000000000"
+            uninstallButton={{
+              onClick: () => removeMutation.mutateAsync(),
+              isPending: removeMutation.isPending,
+            }}
+            isOwnerAccount={true}
+          />
+        </BadgeContainer>
+
+        <BadgeContainer label="No Update, No Children, Not Owner Account">
+          <ModuleCardUI
+            contractInfo={contractInfo}
+            moduleAddress="0x0000000000000000000000000000000000000000"
+            uninstallButton={{
+              onClick: () => removeMutation.mutateAsync(),
+              isPending: removeMutation.isPending,
+            }}
+            isOwnerAccount={false}
+          />
+        </BadgeContainer>
+
+        <BadgeContainer label="Update Button (disabled), No Children, Owner">
+          <ModuleCardUI
+            contractInfo={contractInfo}
+            moduleAddress="0x0000000000000000000000000000000000000000"
+            uninstallButton={{
+              onClick: () => removeMutation.mutateAsync(),
+              isPending: removeMutation.isPending,
+            }}
+            updateButton={{
+              isDisabled: true,
+              isPending: updateMutation.isPending,
+              onClick: () => updateMutation.mutateAsync(),
+            }}
+            isOwnerAccount={true}
+          />
+        </BadgeContainer>
+
+        <BadgeContainer label="Update Button (enabled), Children, Owner">
+          <ModuleCardUI
+            contractInfo={contractInfo}
+            moduleAddress="0x0000000000000000000000000000000000000000"
+            uninstallButton={{
+              onClick: () => removeMutation.mutateAsync(),
+              isPending: removeMutation.isPending,
+            }}
+            updateButton={{
+              isDisabled: false,
+              isPending: updateMutation.isPending,
+              onClick: () => updateMutation.mutateAsync(),
+            }}
+            isOwnerAccount={true}
+          >
+            <div className="flex h-36 items-center justify-center rounded-lg bg-muted text-muted-foreground text-sm">
+              CHILDREN
+            </div>
+          </ModuleCardUI>
+        </BadgeContainer>
+
+        <Toaster richColors />
+      </div>
+    </ThirdwebProvider>
+  );
+}

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/module-card.tsx

@@ -0,0 +1,288 @@
+import { WalletAddress } from "@/components/blocks/wallet-address";
+import { CopyAddressButton } from "@/components/ui/CopyAddressButton";
+import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Skeleton } from "@/components/ui/skeleton";
+import { useMutation } from "@tanstack/react-query";
+import { TransactionButton } from "components/buttons/TransactionButton";
+import { InfoIcon } from "lucide-react";
+import { useState } from "react";
+import { toast } from "sonner";
+import {
+  type ContractOptions,
+  getContract,
+  sendTransaction,
+  waitForReceipt,
+} from "thirdweb";
+import { uninstallModuleByProxy } from "thirdweb/modules";
+import type { Account } from "thirdweb/wallets";
+import { useModuleContractInfo } from "./moduleContractInfo";
+
+type ModuleProps = {
+  moduleAddress: string;
+  contract: ContractOptions;
+  onRemoveModule: () => void;
+  ownerAccount: Account | undefined;
+};
+
+export function ModuleCard(props: ModuleProps) {
+  const { contract, moduleAddress, ownerAccount } = props;
+  const [isUninstallModalOpen, setIsUninstallModalOpen] = useState(false);
+
+  const contractInfo = useModuleContractInfo(
+    getContract({
+      address: moduleAddress,
+      chain: contract.chain,
+      client: contract.client,
+    }),
+  );
+
+  const uninstallMutation = useMutation({
+    mutationFn: async (account: Account) => {
+      const uninstallTransaction = uninstallModuleByProxy({
+        contract,
+        chain: contract.chain,
+        client: contract.client,
+        moduleProxyAddress: moduleAddress,
+        moduleData: "0x",
+      });
+
+      const txResult = await sendTransaction({
+        transaction: uninstallTransaction,
+        account,
+      });
+
+      await waitForReceipt(txResult);
+    },
+    onSuccess() {
+      toast.success("Module uninstalled successfully");
+      props.onRemoveModule();
+    },
+    onError(error) {
+      toast.error("Failed to uninstall module");
+      console.error(error);
+    },
+  });
+
+  const handleRemove = async () => {
+    if (!ownerAccount) {
+      toast.error("Wallet is not connected");
+      return;
+    }
+
+    uninstallMutation.mutate(ownerAccount);
+  };
+
+  if (!contractInfo) {
+    return <Skeleton className="h-[190px] w-full border border-border" />;
+  }
+
+  return (
+    <>
+      <ModuleCardUI
+        contractInfo={{
+          name: contractInfo.name,
+          description: contractInfo.description,
+          publisher: contractInfo.publisher,
+          version: contractInfo.version,
+        }}
+        isOwnerAccount={!!ownerAccount}
+        uninstallButton={{
+          onClick: () => {
+            setIsUninstallModalOpen(true);
+          },
+          isPending: uninstallMutation.isPending,
+        }}
+        moduleAddress={moduleAddress}
+      />
+
+      <Dialog
+        open={isUninstallModalOpen}
+        onOpenChange={setIsUninstallModalOpen}
+      >
+        <DialogContent className="z-[10001]" dialogOverlayClassName="z-[10000]">
+          <form
+            onSubmit={(e) => {
+              e.preventDefault();
+              handleRemove();
+            }}
+          >
+            <DialogHeader>
+              <DialogTitle>Uninstall Module</DialogTitle>
+              <DialogDescription>
+                Are you sure you want to uninstall{" "}
+                <span className="font-medium text-foreground ">
+                  {contractInfo.name}
+                </span>{" "}
+                ?
+              </DialogDescription>
+            </DialogHeader>
+
+            <DialogFooter className="mt-10 flex-row justify-end gap-3 md:gap-1">
+              <Button
+                type="button"
+                onClick={() => setIsUninstallModalOpen(false)}
+                variant="outline"
+              >
+                Cancel
+              </Button>
+
+              <TransactionButton
+                txChainID={contract.chain.id}
+                transactionCount={1}
+                isLoading={uninstallMutation.isPending}
+                type="submit"
+                colorScheme="red"
+                className="flex"
+              >
+                Uninstall
+              </TransactionButton>
+            </DialogFooter>
+          </form>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}
+
+export type ModuleCardUIProps = {
+  children?: React.ReactNode;
+  contractInfo: {
+    name: string;
+    description?: string;
+    version?: string;
+    publisher?: string;
+  };
+  moduleAddress: string;
+  isOwnerAccount: boolean;
+  uninstallButton: {
+    onClick: () => void;
+    isPending: boolean;
+  };
+  updateButton?: {
+    onClick: () => void;
+    isPending: boolean;
+    isDisabled: boolean;
+  };
+};
+
+export function ModuleCardUI(props: ModuleCardUIProps) {
+  return (
+    <section className="rounded-lg border border-border bg-muted/50">
+      {/* Header */}
+      <div className="relative p-4 lg:p-6">
+        {/* Title */}
+        <div className="pr-14">
+          <h3 className="mb-1 gap-2 font-semibold text-xl tracking-tight">
+            {props.contractInfo.name}
+
+            {/* Info Dialog */}
+            <Dialog>
+              <DialogTrigger asChild>
+                <Button
+                  variant="ghost"
+                  className="absolute top-4 right-4 h-auto w-auto p-2 text-muted-foreground"
+                >
+                  <InfoIcon className="size-5" />
+                </Button>
+              </DialogTrigger>
+              <DialogContent>
+                <DialogHeader>
+                  <DialogTitle>{props.contractInfo.name}</DialogTitle>
+                  <DialogDescription>
+                    {props.contractInfo.description}
+                  </DialogDescription>
+
+                  {/* Avoid adding focus on other elements to prevent tooltips from opening on modal open */}
+                  <input className="sr-only" aria-hidden />
+
+                  <div className="h-2" />
+
+                  <div className="flex flex-col gap-4">
+                    {props.contractInfo.version && (
+                      <div>
+                        <p className="text-muted-foreground text-sm">
+                          {" "}
+                          Version{" "}
+                        </p>
+                        <p> {props.contractInfo.version}</p>
+                      </div>
+                    )}
+
+                    {props.contractInfo.publisher && (
+                      <div>
+                        <p className="text-muted-foreground text-sm">
+                          Published By
+                        </p>
+                        <WalletAddress address={props.contractInfo.publisher} />
+                      </div>
+                    )}
+
+                    <div>
+                      <p className="mb-1 text-muted-foreground text-sm">
+                        Module Address
+                      </p>
+                      <CopyAddressButton
+                        className="text-xs"
+                        address={props.moduleAddress}
+                        copyIconPosition="left"
+                        variant="outline"
+                      />
+                    </div>
+                  </div>
+                </DialogHeader>
+              </DialogContent>
+            </Dialog>
+          </h3>
+
+          {/* Description */}
+          <p className="text-muted-foreground">
+            {props.contractInfo.description}
+          </p>
+        </div>
+
+        {props.children ? (
+          <>
+            <div className="h-5" />
+            {props.children}
+          </>
+        ) : null}
+      </div>
+
+      <div className="flex flex-row justify-end gap-3 border-border border-t p-4 lg:p-6">
+        <Button
+          size="sm"
+          onClick={props.uninstallButton.onClick}
+          variant="destructive"
+          className="min-w-24 gap-2"
+          disabled={!props.isOwnerAccount}
+        >
+          {props.uninstallButton.isPending && <Spinner className="size-4" />}
+          Uninstall
+        </Button>
+
+        {props.isOwnerAccount && props.updateButton && (
+          <Button
+            size="sm"
+            className="min-w-24 gap-2"
+            type="submit"
+            onClick={props.updateButton.onClick}
+            disabled={props.updateButton.isPending || !props.isOwnerAccount}
+          >
+            {props.updateButton.isPending && <Spinner className="size-4" />}
+            Update
+          </Button>
+        )}
+      </div>
+    </section>
+  );
+}

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

@@ -1,7 +1,9 @@
 import { notFound, redirect } from "next/navigation";
+import { localhost } from "thirdweb/chains";
 import { getContractPageParamsInfo } from "../_utils/getContractFromParams";
 import { getContractPageMetadata } from "../_utils/getContractPageMetadata";
 import { ContractEditModulesPage } from "./ContractEditModulesPage";
+import { ContractEditModulesPageClient } from "./ContractEditModulesPage.client";
 
 export default async function Page(props: {
   params: {
@@ -15,11 +17,16 @@ export default async function Page(props: {
     notFound();
   }
 
-  const { isModularCore } = await getContractPageMetadata(info.contract);
+  const { contract } = info;
+  if (contract.chain.id === localhost.id) {
+    return <ContractEditModulesPageClient contract={contract} />;
+  }
+
+  const { isModularCore } = await getContractPageMetadata(contract);
 
   if (!isModularCore) {
     redirect(`/${props.params.chain_id}/${props.params.contractAddress}`);
   }
 
-  return <ContractEditModulesPage contract={info.contract} />;
+  return <ContractEditModulesPage contract={contract} />;
 }

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/ContractNFTPage.client.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import type { ThirdwebContract } from "thirdweb";
+import { ErrorPage, LoadingPage } from "../_components/page-skeletons";
+import { RedirectToContractOverview } from "../_components/redirect-contract-overview.client";
+import { useContractPageMetadata } from "../_hooks/useContractPageMetadata";
+import { ContractNFTPage } from "./ContractNFTPage";
+
+export function ContractNFTPageClient(props: {
+  contract: ThirdwebContract;
+}) {
+  const metadataQuery = useContractPageMetadata(props.contract);
+
+  if (metadataQuery.isPending) {
+    return <LoadingPage />;
+  }
+
+  if (metadataQuery.isError) {
+    return <ErrorPage />;
+  }
+
+  const { supportedERCs, functionSelectors } = metadataQuery.data;
+
+  if (!supportedERCs.isERC721 && !supportedERCs.isERC1155) {
+    return <RedirectToContractOverview contract={props.contract} />;
+  }
+
+  return (
+    <ContractNFTPage
+      contract={props.contract}
+      isErc721={supportedERCs.isERC721}
+      functionSelectors={functionSelectors}
+    />
+  );
+}

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/TokenIdPage.client.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import type { ThirdwebContract } from "thirdweb";
+import { ErrorPage, LoadingPage } from "../../_components/page-skeletons";
+import { RedirectToContractOverview } from "../../_components/redirect-contract-overview.client";
+import { useContractPageMetadata } from "../../_hooks/useContractPageMetadata";
+import { TokenIdPage } from "./token-id";
+
+export function TokenIdPageClient(props: {
+  contract: ThirdwebContract;
+  tokenId: string;
+}) {
+  const { contract } = props;
+  const metadataQuery = useContractPageMetadata(props.contract);
+
+  if (metadataQuery.isPending) {
+    return <LoadingPage />;
+  }
+
+  if (metadataQuery.isError) {
+    return <ErrorPage />;
+  }
+
+  const { supportedERCs } = metadataQuery.data;
+
+  if (!supportedERCs.isERC721 && !supportedERCs.isERC1155) {
+    return <RedirectToContractOverview contract={props.contract} />;
+  }
+
+  return (
+    <TokenIdPage
+      contract={contract}
+      isErc721={supportedERCs.isERC721}
+      tokenId={props.tokenId}
+    />
+  );
+}

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/components/airdrop-tab.tsx

@@ -1,17 +1,28 @@
 "use client";
 
-import { Flex, useDisclosure } from "@chakra-ui/react";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/ui/sheet";
+import { Flex } from "@chakra-ui/react";
 import { TransactionButton } from "components/buttons/TransactionButton";
 import { useTrack } from "hooks/analytics/useTrack";
-import { useTxNotifications } from "hooks/useTxNotifications";
 import { UploadIcon } from "lucide-react";
+import { useState } from "react";
 import { useForm } from "react-hook-form";
+import { toast } from "sonner";
 import type { ThirdwebContract } from "thirdweb";
 import { multicall } from "thirdweb/extensions/common";
 import { balanceOf, encodeSafeTransferFrom } from "thirdweb/extensions/erc1155";
 import { useActiveAccount, useSendAndConfirmTransaction } from "thirdweb/react";
 import { Button, Text } from "tw-components";
-import { type AirdropAddressInput, AirdropUpload } from "./airdrop-upload";
+import {
+  type AirdropAddressInput,
+  AirdropUpload,
+} from "../../../tokens/components/airdrop-upload";
 
 interface AirdropTabProps {
   contract: ThirdwebContract;
@@ -22,8 +33,6 @@ interface AirdropTabProps {
  * This component must only take in ERC1155 contracts
  */
 const AirdropTab: React.FC<AirdropTabProps> = ({ contract, tokenId }) => {
-  const account = useActiveAccount();
-
   const address = useActiveAccount()?.address;
   const { handleSubmit, setValue, watch, reset, formState } = useForm<{
     addresses: AirdropAddressInput[];
@@ -31,100 +40,106 @@ const AirdropTab: React.FC<AirdropTabProps> = ({ contract, tokenId }) => {
     defaultValues: { addresses: [] },
   });
   const trackEvent = useTrack();
-
-  const { isOpen, onOpen, onClose } = useDisclosure();
-
-  const { mutate, isPending } = useSendAndConfirmTransaction();
-
-  const { onSuccess, onError } = useTxNotifications(
-    "Airdrop successful",
-    "Error transferring",
-    contract,
-  );
-
+  const sendAndConfirmTx = useSendAndConfirmTransaction();
   const addresses = watch("addresses");
+  const [open, setOpen] = useState(false);
 
   return (
     <div className="flex w-full flex-col gap-2">
       <form
         onSubmit={handleSubmit(async (_data) => {
-          trackEvent({
-            category: "nft",
-            action: "airdrop",
-            label: "attempt",
-            contract_address: contract.address,
-            token_id: tokenId,
-          });
-          const totalOwned = await balanceOf({
-            contract,
-            tokenId: BigInt(tokenId),
-            owner: account?.address ?? "",
-          });
-          // todo: make a batch-transfer extension for erc1155?
-          const totalToAirdrop = _data.addresses.reduce((prev, curr) => {
-            return BigInt(prev) + BigInt(curr?.quantity || 1);
-          }, 0n);
-          if (totalOwned < totalToAirdrop) {
-            return onError(
-              new Error(
-                `The caller owns ${totalOwned.toString()} NFTs, but wants to airdrop ${totalToAirdrop.toString()} NFTs.`,
-              ),
-            );
-          }
-          const data = _data.addresses.map(({ address: to, quantity }) =>
-            encodeSafeTransferFrom({
-              from: account?.address ?? "",
-              to,
-              value: BigInt(quantity),
-              data: "0x",
+          try {
+            trackEvent({
+              category: "nft",
+              action: "airdrop",
+              label: "attempt",
+              contract_address: contract.address,
+              token_id: tokenId,
+            });
+            const totalOwned = await balanceOf({
+              contract,
               tokenId: BigInt(tokenId),
-            }),
-          );
-          const transaction = multicall({ contract, data });
-          mutate(transaction, {
-            onSuccess: () => {
-              trackEvent({
-                category: "nft",
-                action: "airdrop",
-                label: "success",
-                contract_address: contract.address,
-                token_id: tokenId,
-              });
-              onSuccess();
-              reset();
-            },
-            onError: (error) => {
-              trackEvent({
-                category: "nft",
-                action: "airdrop",
-                label: "success",
-                contract_address: contract.address,
-                token_id: tokenId,
-                error,
-              });
-              onError(error);
-            },
-          });
+              owner: address ?? "",
+            });
+            // todo: make a batch-transfer extension for erc1155?
+            const totalToAirdrop = _data.addresses.reduce((prev, curr) => {
+              return BigInt(prev) + BigInt(curr?.quantity || 1);
+            }, 0n);
+            if (totalOwned < totalToAirdrop) {
+              return toast.error(
+                `The caller owns ${totalOwned.toString()} NFTs, but wants to airdrop ${totalToAirdrop.toString()} NFTs.`,
+              );
+            }
+            const data = _data.addresses.map(({ address: to, quantity }) =>
+              encodeSafeTransferFrom({
+                from: address ?? "",
+                to,
+                value: BigInt(quantity),
+                data: "0x",
+                tokenId: BigInt(tokenId),
+              }),
+            );
+            const transaction = multicall({ contract, data });
+            const promise = sendAndConfirmTx.mutateAsync(transaction, {
+              onSuccess: () => {
+                trackEvent({
+                  category: "nft",
+                  action: "airdrop",
+                  label: "success",
+                  contract_address: contract.address,
+                  token_id: tokenId,
+                });
+                reset();
+              },
+              onError: (error) => {
+                trackEvent({
+                  category: "nft",
+                  action: "airdrop",
+                  label: "success",
+                  contract_address: contract.address,
+                  token_id: tokenId,
+                  error,
+                });
+              },
+            });
+            toast.promise(promise, {
+              loading: "Airdropping NFTs",
+              success: "Airdropped successfully",
+              error: "Failed to airdrop",
+            });
+          } catch (err) {
+            console.error(err);
+            toast.error("Failed to airdrop NFTs");
+          }
         })}
       >
         <div className="flex flex-col gap-2">
           <div className="mb-3 flex w-full flex-col gap-6 md:flex-row">
-            <AirdropUpload
-              isOpen={isOpen}
-              onClose={onClose}
-              setAirdrop={(value) =>
-                setValue("addresses", value, { shouldDirty: true })
-              }
-            />
             <Flex direction={{ base: "column", md: "row" }} gap={4}>
-              <Button
-                colorScheme="primary"
-                borderRadius="md"
-                onClick={onOpen}
-                rightIcon={<UploadIcon className="size-5" />}
-              >
-                Upload addresses
-              </Button>
+              <Sheet open={open} onOpenChange={setOpen}>
+                <SheetTrigger asChild>
+                  <Button
+                    colorScheme="primary"
+                    borderRadius="md"
+                    rightIcon={<UploadIcon className="size-5" />}
+                  >
+                    Upload addresses
+                  </Button>
+                </SheetTrigger>
+                <SheetContent className="w-full overflow-y-auto sm:min-w-[540px] lg:min-w-[700px]">
+                  <SheetHeader>
+                    <SheetTitle className="mb-5 text-left">
+                      Aidrop NFTs
+                    </SheetTitle>
+                  </SheetHeader>
+                  <AirdropUpload
+                    onClose={() => setOpen(false)}
+                    setAirdrop={(value) =>
+                      setValue("addresses", value, { shouldDirty: true })
+                    }
+                  />
+                </SheetContent>
+              </Sheet>
 
               <Flex
                 gap={2}
@@ -149,7 +164,7 @@ const AirdropTab: React.FC<AirdropTabProps> = ({ contract, tokenId }) => {
           <TransactionButton
             txChainID={contract.chain.id}
             transactionCount={1}
-            isLoading={isPending}
+            isLoading={sendAndConfirmTx.isPending}
             type="submit"
             colorScheme="primary"
             disabled={!!address && addresses.length === 0}

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/components/airdrop-upload.tsx

@@ -1,494 +0,0 @@
-import { UnorderedList } from "@/components/ui/List/List";
-import { useThirdwebClient } from "@/constants/thirdweb.client";
-import { cn } from "@/lib/utils";
-import {
-  Box,
-  Container,
-  Flex,
-  IconButton,
-  Link,
-  Portal,
-  Select,
-  Table,
-  TableContainer,
-  Tbody,
-  Td,
-  Th,
-  Thead,
-  Tooltip,
-  Tr,
-} from "@chakra-ui/react";
-import { Logo } from "components/logo";
-import {
-  ChevronFirstIcon,
-  ChevronLastIcon,
-  ChevronLeftIcon,
-  ChevronRightIcon,
-  CircleAlertIcon,
-  UploadIcon,
-} from "lucide-react";
-import Papa from "papaparse";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { type DropzoneOptions, useDropzone } from "react-dropzone";
-import { type Column, usePagination, useTable } from "react-table";
-import { resolveAddress } from "thirdweb/extensions/ens";
-import { isAddress } from "thirdweb/utils";
-import { Button, Drawer, Heading, Text } from "tw-components";
-import { csvMimeTypes } from "utils/batch";
-
-export interface AirdropAddressInput {
-  address: string;
-  quantity: string;
-  isValid?: boolean;
-}
-interface AirdropUploadProps {
-  setAirdrop: (airdrop: AirdropAddressInput[]) => void;
-  isOpen: boolean;
-  onClose: () => void;
-}
-
-export const AirdropUpload: React.FC<AirdropUploadProps> = ({
-  setAirdrop,
-  isOpen,
-  onClose,
-}) => {
-  const client = useThirdwebClient();
-  const [validAirdrop, setValidAirdrop] = useState<AirdropAddressInput[]>([]);
-  const [airdropData, setAirdropData] = useState<AirdropAddressInput[]>([]);
-  const [noCsv, setNoCsv] = useState(false);
-  const [invalidFound, setInvalidFound] = useState(false);
-
-  const reset = useCallback(() => {
-    setValidAirdrop([]);
-    setNoCsv(false);
-  }, []);
-
-  const _onClose = useCallback(() => {
-    onClose();
-  }, [onClose]);
-
-  const onDrop = useCallback<Required<DropzoneOptions>["onDrop"]>(
-    (acceptedFiles) => {
-      setNoCsv(false);
-
-      const csv = acceptedFiles.find(
-        (f) => csvMimeTypes.includes(f.type) || f.name?.endsWith(".csv"),
-      );
-      if (!csv) {
-        console.error(
-          "No valid CSV file found, make sure you have an address column.",
-        );
-        setNoCsv(true);
-        return;
-      }
-
-      Papa.parse(csv, {
-        header: true,
-        complete: (results) => {
-          const data: AirdropAddressInput[] = (
-            results.data as AirdropAddressInput[]
-          )
-            .map(({ address, quantity }) => ({
-              address: (address || "").trim(),
-              quantity: (quantity || "1").trim(),
-            }))
-            .filter(({ address }) => address !== "");
-
-          if (!data[0]?.address) {
-            setNoCsv(true);
-            return;
-          }
-
-          setValidAirdrop(data);
-        },
-      });
-    },
-    [],
-  );
-
-  // FIXME: this can be a mutation or query instead!
-  // eslint-disable-next-line no-restricted-syntax
-  useEffect(() => {
-    if (validAirdrop.length === 0) {
-      return setAirdropData([]);
-    }
-
-    const normalizeAddresses = async (snapshot: AirdropAddressInput[]) => {
-      const normalized = await Promise.all(
-        snapshot.map(async ({ address, ...rest }) => {
-          let isValid = true;
-          let resolvedAddress = address;
-
-          try {
-            resolvedAddress = isAddress(address)
-              ? address
-              : await resolveAddress({ name: address, client });
-            isValid = !!resolvedAddress;
-          } catch {
-            isValid = false;
-          }
-
-          return {
-            address,
-            resolvedAddress,
-            isValid,
-            ...rest,
-          };
-        }),
-      );
-
-      const seen = new Set();
-      const filteredData = normalized.filter((el) => {
-        const duplicate = seen.has(el.resolvedAddress);
-        seen.add(el.resolvedAddress);
-        return !duplicate;
-      });
-
-      const valid = filteredData.filter(({ isValid }) => isValid);
-      const invalid = filteredData.filter(({ isValid }) => !isValid);
-
-      if (invalid?.length > 0) {
-        setInvalidFound(true);
-      }
-      const ordered = [...invalid, ...valid];
-      setAirdropData(ordered);
-    };
-    normalizeAddresses(validAirdrop);
-  }, [validAirdrop, client]);
-
-  const removeInvalid = useCallback(() => {
-    const filteredData = airdropData.filter(({ isValid }) => isValid);
-    setValidAirdrop(filteredData);
-    setInvalidFound(false);
-  }, [airdropData]);
-
-  const { getRootProps, getInputProps, isDragActive } = useDropzone({
-    onDrop,
-  });
-
-  const paginationPortalRef = useRef<HTMLDivElement>(null);
-
-  const onSave = () => {
-    setAirdrop(airdropData);
-    onClose();
-  };
-
-  return (
-    <Drawer
-      allowPinchZoom
-      preserveScrollBarGap
-      size="xl"
-      onClose={_onClose}
-      isOpen={isOpen}
-    >
-      <Flex direction="column" gap={6} h="100%">
-        <Flex shadow="sm">
-          <Container maxW="container.page">
-            <Flex align="center" justify="space-between" p={4}>
-              <div className="flex flex-row gap-2">
-                <Logo hideWordmark />
-                <Heading size="title.md">
-                  {validAirdrop.length ? "Edit" : "Upload"} Airdrop
-                </Heading>
-              </div>
-            </Flex>
-          </Container>
-        </Flex>
-
-        {validAirdrop.length > 0 ? (
-          <AirdropTable portalRef={paginationPortalRef} data={airdropData} />
-        ) : (
-          <Flex flexGrow={1} align="center" overflow="auto">
-            <Container maxW="container.page">
-              <Flex gap={8} flexDir="column">
-                <div className="relative aspect-[21/9] w-full">
-                  <div
-                    className={cn(
-                      "flex h-full cursor-pointer rounded-md border border-border hover:border-primary",
-                      noCsv ? "bg-red-200" : "bg-card",
-                    )}
-                    {...getRootProps()}
-                  >
-                    <input {...getInputProps()} />
-                    <div className="m-auto flex flex-col p-6">
-                      <UploadIcon
-                        size={16}
-                        className={cn("mx-auto mb-2 text-gray-500", {
-                          "text-red-500": noCsv,
-                        })}
-                      />
-                      {isDragActive ? (
-                        <Heading
-                          as={Text}
-                          size="label.md"
-                          className="text-center"
-                        >
-                          Drop the files here
-                        </Heading>
-                      ) : (
-                        <Heading
-                          as={Text}
-                          size="label.md"
-                          color={noCsv ? "red.500" : "gray.600"}
-                          className="text-center"
-                        >
-                          {noCsv
-                            ? `No valid CSV file found, make sure your CSV includes the "address" column.`
-                            : "Drag & Drop a CSV file here"}
-                        </Heading>
-                      )}
-                    </div>
-                  </div>
-                </div>
-                <div className="flex flex-row gap-2">
-                  <Heading size="subtitle.sm">Requirements</Heading>
-                  <UnorderedList>
-                    <li>
-                      Files <em>must</em> contain one .csv file with an address
-                      and quantity column, if the quantity column is not
-                      provided, it will default to 1 NFT per wallet. -{" "}
-                      <Link download color="primary.500" href="/airdrop.csv">
-                        Download an example CSV
-                      </Link>
-                    </li>
-                    <li>
-                      Repeated addresses will be removed and only the first
-                      found will be kept.
-                    </li>
-                  </UnorderedList>
-                </div>
-              </Flex>
-            </Container>
-          </Flex>
-        )}
-
-        <Flex borderTop="1px solid" borderTopColor="borderColor">
-          <Container maxW="container.page">
-            <Flex
-              align="center"
-              justify="space-between"
-              p={{ base: 0, md: 4 }}
-              flexDir={{ base: "column", md: "row" }}
-              mt={{ base: 4, md: 0 }}
-            >
-              <Box ref={paginationPortalRef} />
-              <Flex
-                gap={2}
-                align="center"
-                mt={{ base: 4, md: 0 }}
-                w={{ base: "100%", md: "auto" }}
-              >
-                <Button
-                  borderRadius="md"
-                  disabled={validAirdrop.length === 0}
-                  onClick={() => {
-                    reset();
-                  }}
-                  w={{ base: "100%", md: "auto" }}
-                >
-                  Reset
-                </Button>
-                {invalidFound ? (
-                  <Button
-                    borderRadius="md"
-                    colorScheme="primary"
-                    disabled={validAirdrop.length === 0}
-                    onClick={() => {
-                      removeInvalid();
-                    }}
-                    w={{ base: "100%", md: "auto" }}
-                  >
-                    Remove invalid
-                  </Button>
-                ) : (
-                  <Button
-                    borderRadius="md"
-                    colorScheme="primary"
-                    onClick={onSave}
-                    w={{ base: "100%", md: "auto" }}
-                    isDisabled={validAirdrop.length === 0}
-                  >
-                    Next
-                  </Button>
-                )}
-              </Flex>
-            </Flex>
-          </Container>
-        </Flex>
-      </Flex>
-    </Drawer>
-  );
-};
-
-interface AirdropTableProps {
-  data: AirdropAddressInput[];
-  portalRef: React.RefObject<HTMLDivElement>;
-}
-
-const AirdropTable: React.FC<AirdropTableProps> = ({ data, portalRef }) => {
-  const columns = useMemo(() => {
-    return [
-      {
-        Header: "Address",
-        accessor: ({ address, isValid }) => {
-          if (isValid) {
-            return address;
-          }
-          return (
-            <div className="flex flex-row items-center gap-2">
-              <Tooltip
-                label={
-                  address.startsWith("0x")
-                    ? "Address is not valid"
-                    : "Address couldn't be resolved"
-                }
-              >
-                <div className="flex flex-row items-center gap-2">
-                  <CircleAlertIcon className="size-5 text-red-500" />
-                  <Text fontWeight="bold" color="red.500" cursor="default">
-                    {address}
-                  </Text>
-                </div>
-              </Tooltip>
-            </div>
-          );
-        },
-      },
-      {
-        Header: "Quantity",
-        accessor: ({ quantity }: { quantity: string }) => {
-          return quantity || "1";
-        },
-      },
-    ] as Column<AirdropAddressInput>[];
-  }, []);
-
-  const {
-    getTableProps,
-    getTableBodyProps,
-    headerGroups,
-    prepareRow,
-    // Instead of using 'rows', we'll use page,
-    page,
-    // which has only the rows for the active page
-
-    // The rest of these things are super handy, too ;)
-    canPreviousPage,
-    canNextPage,
-    pageOptions,
-    pageCount,
-    gotoPage,
-    nextPage,
-    previousPage,
-    setPageSize,
-    state: { pageIndex, pageSize },
-  } = useTable(
-    {
-      columns,
-      data,
-      initialState: {
-        pageSize: 50,
-        pageIndex: 0,
-      },
-    },
-    // old package: this will be removed
-    // eslint-disable-next-line react-compiler/react-compiler
-    usePagination,
-  );
-
-  // Render the UI for your table
-  return (
-    <Flex flexGrow={1}>
-      <TableContainer>
-        <Table {...getTableProps()}>
-          <Thead>
-            {headerGroups.map((headerGroup, headerGroupIndex) => (
-              // biome-ignore lint/suspicious/noArrayIndexKey: FIXME
-              <Tr {...headerGroup.getHeaderGroupProps()} key={headerGroupIndex}>
-                {headerGroup.headers.map((column, columnIndex) => (
-                  <Th
-                    {...column.getHeaderProps()}
-                    border="none"
-                    // biome-ignore lint/suspicious/noArrayIndexKey: FIXME
-                    key={columnIndex}
-                  >
-                    <Text as="label" size="label.sm" color="faded">
-                      {column.render("Header")}
-                    </Text>
-                  </Th>
-                ))}
-              </Tr>
-            ))}
-          </Thead>
-          <Tbody {...getTableBodyProps()}>
-            {page.map((row, rowIndex) => {
-              prepareRow(row);
-              return (
-                // biome-ignore lint/suspicious/noArrayIndexKey: FIXME
-                <Tr {...row.getRowProps()} key={rowIndex}>
-                  {row.cells.map((cell, cellIndex) => (
-                    <Td
-                      {...cell.getCellProps()}
-                      borderColor="borderColor"
-                      // biome-ignore lint/suspicious/noArrayIndexKey: FIXME
-                      key={cellIndex}
-                    >
-                      {cell.render("Cell")}
-                    </Td>
-                  ))}
-                </Tr>
-              );
-            })}
-          </Tbody>
-        </Table>
-      </TableContainer>
-      <Portal containerRef={portalRef}>
-        <div className="flex w-full items-center justify-center">
-          <div className="flex flex-row gap-1">
-            <IconButton
-              isDisabled={!canPreviousPage}
-              aria-label="first page"
-              icon={<ChevronFirstIcon className="size-4" />}
-              onClick={() => gotoPage(0)}
-            />
-            <IconButton
-              isDisabled={!canPreviousPage}
-              aria-label="previous page"
-              icon={<ChevronLeftIcon className="size-4" />}
-              onClick={() => previousPage()}
-            />
-            <p className="my-auto whitespace-nowrap">
-              Page <strong>{pageIndex + 1}</strong> of{" "}
-              <strong>{pageOptions.length}</strong>
-            </p>
-            <IconButton
-              isDisabled={!canNextPage}
-              aria-label="next page"
-              icon={<ChevronRightIcon className="size-4" />}
-              onClick={() => nextPage()}
-            />
-            <IconButton
-              isDisabled={!canNextPage}
-              aria-label="last page"
-              icon={<ChevronLastIcon className="size-4" />}
-              onClick={() => gotoPage(pageCount - 1)}
-            />
-
-            <Select
-              onChange={(e) => {
-                setPageSize(Number.parseInt(e.target.value as string, 10));
-              }}
-              value={pageSize}
-            >
-              <option value="25">25</option>
-              <option value="50">50</option>
-              <option value="100">100</option>
-              <option value="250">250</option>
-              <option value="500">500</option>
-            </Select>
-          </div>
-        </div>
-      </Portal>
-    </Flex>
-  );
-};

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/components/claim-tab.tsx

@@ -3,7 +3,6 @@
 import { Flex, FormControl, Input } from "@chakra-ui/react";
 import { TransactionButton } from "components/buttons/TransactionButton";
 import { useTrack } from "hooks/analytics/useTrack";
-import { useTxNotifications } from "hooks/useTxNotifications";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { type ThirdwebContract, ZERO_ADDRESS } from "thirdweb";
@@ -23,13 +22,6 @@ const ClaimTabERC1155: React.FC<ClaimTabProps> = ({ contract, tokenId }) => {
   const form = useForm<{ to: string; amount: string }>({
     defaultValues: { amount: "1", to: address },
   });
-
-  const { onSuccess, onError } = useTxNotifications(
-    "Claimed successfully",
-    "Failed to claim",
-    contract,
-  );
-
   const sendAndConfirmTx = useSendAndConfirmTransaction();
   const account = useActiveAccount();
   return (
@@ -59,28 +51,34 @@ const ClaimTabERC1155: React.FC<ClaimTabProps> = ({ contract, tokenId }) => {
             account,
           });
           if (approveTx) {
-            try {
-              await sendAndConfirmTx.mutateAsync(approveTx);
-            } catch {
-              return toast.error("Error approving ERC20 token");
-            }
+            const approvalPromise = sendAndConfirmTx.mutateAsync(approveTx);
+            toast.promise(approvalPromise, {
+              loading: "Approving ERC20 token for this claim",
+              success: "Approved succesfully",
+              error: "Failed to approve ERC20",
+            });
+            await approvalPromise;
           }
-          await sendAndConfirmTx.mutateAsync(transaction);
+          const promise = sendAndConfirmTx.mutateAsync(transaction);
+          toast.promise(promise, {
+            loading: "Claiming NFT",
+            success: "NFT claimed successfully",
+            error: "Failed to claim NFT",
+          });
           trackEvent({
             category: "nft",
             action: "claim",
             label: "success",
           });
-          onSuccess();
           form.reset();
         } catch (error) {
+          console.error(error);
           trackEvent({
             category: "nft",
             action: "claim",
             label: "error",
             error,
           });
-          onError(error);
         }
       })}
     >

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/components/mint-supply-tab.tsx

@@ -29,7 +29,7 @@ const mintAdditionalSupplyFormSchema = z.object({
   to: z.string().refine((value) => isAddress(value), {
     message: "Invalid Ethereum address",
   }),
-  amount: z.number().int().min(1, "Amount must be at least 1"),
+  amount: z.coerce.number().int().min(1, "Amount must be at least 1"),
 });
 
 const MintSupplyTab: React.FC<MintSupplyTabProps> = ({ contract, tokenId }) => {
@@ -96,7 +96,7 @@ const MintSupplyTab: React.FC<MintSupplyTabProps> = ({ contract, tokenId }) => {
             <FormItem>
               <FormLabel>Amount</FormLabel>
               <FormControl>
-                <Input {...field} />
+                <Input {...field} type="number" />
               </FormControl>
               <FormDescription>
                 How many would you like to mint?

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

@@ -1,6 +1,8 @@
 import { notFound, redirect } from "next/navigation";
+import { localhost } from "thirdweb/chains";
 import { getContractPageParamsInfo } from "../../_utils/getContractFromParams";
 import { getContractPageMetadata } from "../../_utils/getContractPageMetadata";
+import { TokenIdPageClient } from "./TokenIdPage.client";
 import { TokenIdPage } from "./token-id";
 
 export default async function Page(props: {
@@ -16,18 +18,24 @@ export default async function Page(props: {
     notFound();
   }
 
+  if (!isOnlyNumbers(props.params.tokenId)) {
+    // redirect to nfts index page
+    redirect(`/${props.params.chain_id}/${props.params.contractAddress}/nfts`);
+  }
+
   const { contract } = info;
+  if (contract.chain.id === localhost.id) {
+    return (
+      <TokenIdPageClient contract={contract} tokenId={props.params.tokenId} />
+    );
+  }
+
   const { supportedERCs } = await getContractPageMetadata(contract);
 
   if (!supportedERCs.isERC721 && !supportedERCs.isERC1155) {
     redirect(`/${props.params.chain_id}/${props.params.contractAddress}`);
   }
 
-  if (!isOnlyNumbers(props.params.tokenId)) {
-    // redirect to nfts index page
-    redirect(`/${props.params.chain_id}/${props.params.contractAddress}/nfts`);
-  }
-
   return (
     <TokenIdPage
       contract={contract}

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

@@ -1,10 +1,12 @@
 "use client";
 
+import { UnexpectedValueErrorMessage } from "@/components/blocks/error-fallbacks/unexpect-value-error-message";
 import { WalletAddress } from "@/components/blocks/wallet-address";
 import { CopyTextButton } from "@/components/ui/CopyTextButton";
 import { Spinner } from "@/components/ui/Spinner/Spinner";
 import { useThirdwebClient } from "@/constants/thirdweb.client";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
+import { resolveSchemeWithErrorHandler } from "@/lib/resolveSchemeWithErrorHandler";
 import {
   Box,
   ButtonGroup,
@@ -24,7 +26,6 @@ import type { ThirdwebContract } from "thirdweb";
 import { getNFT as getErc721NFT } from "thirdweb/extensions/erc721";
 import { getNFT as getErc1155NFT } from "thirdweb/extensions/erc1155";
 import { useReadContract } from "thirdweb/react";
-import { resolveScheme } from "thirdweb/storage";
 import { Badge, Button, Card, CodeBlock, Heading, Text } from "tw-components";
 import { NFTMediaWithEmptyState } from "tw-components/nft-media";
 import { shortenString } from "utils/usedapp-external";
@@ -53,6 +54,8 @@ interface TokenIdPageProps {
   isErc721: boolean;
 }
 
+// TODO: verify the entire nft object with zod schema and display an error message
+
 export const TokenIdPage: React.FC<TokenIdPageProps> = ({
   contract,
   tokenId,
@@ -80,6 +83,15 @@ export const TokenIdPage: React.FC<TokenIdPageProps> = ({
     },
   );
 
+  const tokenURIHttpLink = resolveSchemeWithErrorHandler({
+    client,
+    uri: nft?.tokenURI,
+  });
+  const nftImageLink = resolveSchemeWithErrorHandler({
+    client,
+    uri: nft?.metadata.image,
+  });
+
   if (isPending) {
     return (
       <div className="flex h-[400px] items-center justify-center">
@@ -132,15 +144,15 @@ export const TokenIdPage: React.FC<TokenIdPageProps> = ({
           height={isMobile ? "100%" : "300px"}
         />
       </Card>
+
       <Flex flexDir="column" gap={6} w="full" px={2}>
-        <Flex flexDir="column" gap={2}>
-          <Heading size="title.lg">{nft.metadata.name}</Heading>
+        <Flex flexDir="column" gap={1.5}>
+          <NFTName value={nft.metadata.name} />
           {nft.metadata?.description && (
-            <Text size="label.md" noOfLines={50} whiteSpace="pre-wrap">
-              {nft.metadata.description}
-            </Text>
+            <NFTDescription value={nft.metadata.description} />
           )}
         </Flex>
+
         <Flex flexDir="column" gap={{ base: 0, md: 4 }}>
           <Box
             w="full"
@@ -260,15 +272,39 @@ export const TokenIdPage: React.FC<TokenIdPageProps> = ({
                     tooltip="The URI of this NFT"
                     copyIconPosition="right"
                   />
-                  <Button variant="ghost">
-                    <Link
-                      href={resolveScheme({ client, uri: nft.tokenURI })}
-                      target="_blank"
-                    >
-                      <ExternalLinkIcon className="size-4" />
-                    </Link>
-                  </Button>
+                  {tokenURIHttpLink && (
+                    <Button variant="ghost" size="sm">
+                      <Link href={tokenURIHttpLink} target="_blank">
+                        <ExternalLinkIcon className="size-4" />
+                      </Link>
+                    </Button>
+                  )}
                 </GridItem>
+                {nft.metadata.image && (
+                  <>
+                    <GridItem colSpan={4}>
+                      <Heading size="label.md">Media URI</Heading>
+                    </GridItem>
+                    <GridItem
+                      colSpan={8}
+                      className="flex flex-row items-center gap-1"
+                    >
+                      <CopyTextButton
+                        textToCopy={nft.metadata.image}
+                        textToShow={shortenString(nft.metadata.image)}
+                        tooltip="The media URI of this NFT"
+                        copyIconPosition="right"
+                      />
+                      {nftImageLink && (
+                        <Button variant="ghost" size="sm">
+                          <Link href={nftImageLink} target="_blank">
+                            <ExternalLinkIcon className="size-4" />
+                          </Link>
+                        </Button>
+                      )}
+                    </GridItem>
+                  </>
+                )}
               </SimpleGrid>
             </Card>
             {properties ? (
@@ -309,3 +345,39 @@ export const TokenIdPage: React.FC<TokenIdPageProps> = ({
     </Flex>
   );
 };
+
+function NFTName(props: {
+  value: unknown;
+}) {
+  if (typeof props.value === "string") {
+    return (
+      <h2 className="font-semibold text-lg tracking-tight"> {props.value}</h2>
+    );
+  }
+
+  return (
+    <UnexpectedValueErrorMessage
+      title="Invalid Name"
+      description="Name is not a string"
+      value={props.value}
+      className="mb-3 rounded-lg border border-border p-4"
+    />
+  );
+}
+
+function NFTDescription(props: {
+  value: unknown;
+}) {
+  if (typeof props.value === "string") {
+    return <p className="text-muted-foreground"> {props.value}</p>;
+  }
+
+  return (
+    <UnexpectedValueErrorMessage
+      title="Invalid Description"
+      description="Description is not a string"
+      value={props.value}
+      className="mb-3 rounded-lg border border-border p-4"
+    />
+  );
+}

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

@@ -1,7 +1,10 @@
 "use client";
 
+import { UnexpectedValueErrorMessage } from "@/components/blocks/error-fallbacks/unexpect-value-error-message";
 import { WalletAddress } from "@/components/blocks/wallet-address";
+import { CopyTextButton } from "@/components/ui/CopyTextButton";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
+import { cn } from "@/lib/utils";
 import {
   Flex,
   IconButton,
@@ -16,6 +19,7 @@ import {
   Thead,
   Tr,
 } from "@chakra-ui/react";
+import * as Sentry from "@sentry/nextjs";
 import { MediaCell } from "components/contract-pages/table/table-columns/cells/media-cell";
 import { useChainSlug } from "hooks/chains/chainSlug";
 import {
@@ -26,6 +30,7 @@ import {
   ChevronRightIcon,
 } from "lucide-react";
 import { useEffect, useMemo, useState } from "react";
+import { ErrorBoundary, type FallbackProps } from "react-error-boundary";
 import {
   type CellProps,
   type Column,
@@ -72,24 +77,51 @@ export const NFTGetAllTable: React.FC<ContractOverviewNFTGetAllProps> = ({
       {
         Header: "Name",
         accessor: (row) => row.metadata.name,
-        Cell: (cell: CellProps<NFT, string>) => (
-          <Text noOfLines={1} size="label.md">
-            {cell.value}
-          </Text>
-        ),
+        Cell: (cell: CellProps<NFT, string>) => {
+          if (typeof cell.value !== "string") {
+            return (
+              <UnexpectedValueErrorMessage
+                title="Invalid Name"
+                description="Name is not a string"
+                value={cell.value}
+                className="w-[300px] py-3"
+              />
+            );
+          }
+
+          return (
+            <p className="line-clamp-1 text-muted-foreground text-sm">
+              {cell.value}
+            </p>
+          );
+        },
       },
       {
         Header: "Description",
         accessor: (row) => row.metadata.description,
-        Cell: (cell: CellProps<NFT, string>) => (
-          <Text
-            noOfLines={4}
-            size="body.md"
-            fontStyle={!cell.value ? "italic" : "normal"}
-          >
-            {cell.value || "No description"}
-          </Text>
-        ),
+        Cell: (cell: CellProps<NFT, string>) => {
+          if (typeof cell.value !== "string") {
+            return (
+              <UnexpectedValueErrorMessage
+                title="Invalid description"
+                description="Description is not a string"
+                value={cell.value}
+                className="w-[300px] py-3"
+              />
+            );
+          }
+
+          return (
+            <p
+              className={cn(
+                "line-clamp-4 max-w-[200px] whitespace-normal text-muted-foreground text-sm",
+                { italic: !cell.value },
+              )}
+            >
+              {cell.value || "No description"}
+            </p>
+          );
+        },
       },
     ];
     if (isErc721) {
@@ -280,18 +312,22 @@ export const NFTGetAllTable: React.FC<ContractOverviewNFTGetAllProps> = ({
                   // biome-ignore lint/suspicious/noArrayIndexKey: FIXME
                   key={rowIndex}
                 >
-                  {row.cells.map((cell, cellIndex) => (
-                    <Td
-                      {...cell.getCellProps()}
-                      borderBottomWidth="inherit"
-                      borderColor="borderColor"
-                      maxW="sm"
-                      // biome-ignore lint/suspicious/noArrayIndexKey: FIXME
-                      key={cellIndex}
-                    >
-                      {cell.render("Cell")}
-                    </Td>
-                  ))}
+                  {row.cells.map((cell, cellIndex) => {
+                    return (
+                      <Td
+                        {...cell.getCellProps()}
+                        borderBottomWidth="inherit"
+                        borderColor="borderColor"
+                        maxW="sm"
+                        // biome-ignore lint/suspicious/noArrayIndexKey: FIXME
+                        key={cellIndex}
+                      >
+                        <ErrorBoundary FallbackComponent={NFTCellErrorBoundary}>
+                          {cell.render("Cell")}
+                        </ErrorBoundary>
+                      </Td>
+                    );
+                  })}
                   <Td borderBottomWidth="inherit" borderColor="borderColor">
                     {!failedToLoad && <ArrowRightIcon className="size-4" />}
                   </Td>
@@ -374,3 +410,25 @@ export const NFTGetAllTable: React.FC<ContractOverviewNFTGetAllProps> = ({
     </Flex>
   );
 };
+
+function NFTCellErrorBoundary(errorProps: FallbackProps) {
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    Sentry.withScope((scope) => {
+      scope.setTag("component-crashed", "true");
+      scope.setTag("component-crashed-boundary", "NFTCellErrorBoundary");
+      scope.setLevel("fatal");
+      Sentry.captureException(errorProps.error);
+    });
+  }, [errorProps.error]);
+
+  return (
+    <CopyTextButton
+      textToShow={errorProps.error.message}
+      textToCopy={errorProps.error.message}
+      copyIconPosition="left"
+      tooltip={errorProps.error.message}
+      className="max-w-[250px] truncate text-destructive-text"
+    />
+  );
+}

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

@@ -1,8 +1,9 @@
 import { notFound, redirect } from "next/navigation";
-import { resolveFunctionSelectors } from "../../../../../../lib/selectors";
+import { localhost } from "thirdweb/chains";
 import { getContractPageParamsInfo } from "../_utils/getContractFromParams";
 import { getContractPageMetadata } from "../_utils/getContractPageMetadata";
 import { ContractNFTPage } from "./ContractNFTPage";
+import { ContractNFTPageClient } from "./ContractNFTPage.client";
 
 export default async function Page(props: {
   params: {
@@ -17,14 +18,17 @@ export default async function Page(props: {
   }
 
   const { contract } = info;
-  const { supportedERCs } = await getContractPageMetadata(contract);
+  if (contract.chain.id === localhost.id) {
+    return <ContractNFTPageClient contract={contract} />;
+  }
+
+  const { supportedERCs, functionSelectors } =
+    await getContractPageMetadata(contract);
 
   if (!supportedERCs.isERC721 && !supportedERCs.isERC1155) {
     redirect(`/${props.params.chain_id}/${props.params.contractAddress}`);
   }
 
-  const functionSelectors = await resolveFunctionSelectors(contract);
-
   return (
     <ContractNFTPage
       contract={contract}

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/ContractOverviewPage.tsx

@@ -1,6 +1,3 @@
-"use client";
-
-import { PublishedBy } from "components/contract-components/shared/published-by";
 import type { ThirdwebContract } from "thirdweb";
 import { AnalyticsOverview } from "./components/Analytics";
 import { BuildYourApp } from "./components/BuildYourApp";
@@ -21,6 +18,8 @@ interface ContractOverviewPageProps {
   isPermissionsEnumerable: boolean;
   chainSlug: string;
   isAnalyticsSupported: boolean;
+  functionSelectors: string[];
+  publishedBy: React.ReactNode;
 }
 
 const TRACKING_CATEGORY = "contract_overview";
@@ -35,6 +34,8 @@ export const ContractOverviewPage: React.FC<ContractOverviewPageProps> = ({
   isPermissionsEnumerable,
   chainSlug,
   isAnalyticsSupported,
+  functionSelectors,
+  publishedBy,
 }) => {
   return (
     <div className="flex flex-col gap-8 lg:flex-row">
@@ -45,6 +46,7 @@ export const ContractOverviewPage: React.FC<ContractOverviewPageProps> = ({
           isErc20={isErc20}
           contract={contract}
           chainSlug={chainSlug}
+          functionSelectors={functionSelectors}
         />
 
         {isAnalyticsSupported && (
@@ -97,9 +99,7 @@ export const ContractOverviewPage: React.FC<ContractOverviewPageProps> = ({
           contractAddress={contract.address}
         />
       </div>
-      <div className="shrink-0 lg:w-[300px]">
-        <PublishedBy contract={contract} />
-      </div>
+      <div className="shrink-0 lg:w-[300px]">{publishedBy}</div>
     </div>
   );
 };

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/Analytics.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { ThirdwebAreaChart } from "@/components/blocks/charts/area-chart";
 import { Button } from "@/components/ui/button";
 import {

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/BuildYourApp.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   Flex,
   GridItem,
@@ -7,7 +9,9 @@ import {
 } from "@chakra-ui/react";
 import { ChakraNextImage as Image } from "components/Image";
 import { PRODUCTS } from "components/product-pages/common/nav/data";
-import { Card, Text, TrackedLink, type TrackedLinkProps } from "tw-components";
+import { Card } from "tw-components/card";
+import { TrackedLink, type TrackedLinkProps } from "tw-components/link";
+import { Text } from "tw-components/text";
 
 const RENDERED_PRODUCTS = ["sdk", "storage", "ui-components", "auth"];
 

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/ContractChecklist.tsx

@@ -1,7 +1,8 @@
+"use client";
+
 import { AdminOnly } from "@3rdweb-sdk/react/components/roles/admin-only";
 import { useIsMinter } from "@3rdweb-sdk/react/hooks/useContractRoles";
 import { StepsCard } from "components/dashboard/StepsCard";
-import { useContractFunctionSelectors } from "contract-ui/hooks/useContractFunctionSelectors";
 import Link from "next/link";
 import { useMemo } from "react";
 import type { ThirdwebContract } from "thirdweb";
@@ -18,6 +19,7 @@ interface ContractChecklistProps {
   isErc1155: boolean;
   isErc20: boolean;
   chainSlug: string;
+  functionSelectors: string[];
 }
 
 type Step = {
@@ -27,13 +29,10 @@ type Step = {
 };
 
 export const ContractChecklist: React.FC<ContractChecklistProps> = (props) => {
-  const functionSelectorQuery = useContractFunctionSelectors(props.contract);
   return (
     // if no permissions, simply return null (do not fail open)
     <AdminOnly contract={props.contract} failOpen={false}>
-      {!!functionSelectorQuery.data?.length && (
-        <Inner functionSelectors={functionSelectorQuery.data} {...props} />
-      )}
+      <Inner {...props} />
     </AdminOnly>
   );
 };

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/LatestEvents.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   type InternalTransaction,
   useActivity,

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/MarketplaceDetails.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { WalletAddress } from "@/components/blocks/wallet-address";
 import { Badge } from "@/components/ui/badge";
 import { SkeletonContainer } from "@/components/ui/skeleton";

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/NFTDetails.tsx

@@ -1,9 +1,11 @@
+"use client";
+
 import { Flex, useBreakpointValue } from "@chakra-ui/react";
 import type { ThirdwebContract } from "thirdweb";
 import * as ERC721 from "thirdweb/extensions/erc721";
 import * as ERC1155 from "thirdweb/extensions/erc1155";
 import { useReadContract } from "thirdweb/react";
-import { TrackedLink, type TrackedLinkProps } from "tw-components";
+import { TrackedLink, type TrackedLinkProps } from "tw-components/link";
 import { NFTCards } from "../../_components/NFTCards";
 
 interface NFTDetailsProps {

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/PermissionsTable.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { ToolTipLabel } from "@/components/ui/tooltip";
 import { Box, Flex, List, SimpleGrid, Tag } from "@chakra-ui/react";
 import { getAllRoleMembers } from "contract-ui/hooks/permissions";
@@ -8,14 +10,11 @@ import { useMemo } from "react";
 import { toast } from "sonner";
 import { type ThirdwebContract, ZERO_ADDRESS } from "thirdweb";
 import { useReadContract } from "thirdweb/react";
-import {
-  Button,
-  Card,
-  Heading,
-  Text,
-  TrackedLink,
-  type TrackedLinkProps,
-} from "tw-components";
+import { Button } from "tw-components/button";
+import { Card } from "tw-components/card";
+import { Heading } from "tw-components/heading";
+import { TrackedLink, type TrackedLinkProps } from "tw-components/link";
+import { Text } from "tw-components/text";
 import { shortenIfAddress } from "utils/usedapp-external";
 
 interface PermissionsTableProps {

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/published-by-ui.tsx

@@ -0,0 +1,164 @@
+import { ContractCard } from "components/explore/contract-card";
+import { THIRDWEB_DEPLOYER_ADDRESS } from "constants/addresses";
+import type { ThirdwebClient, ThirdwebContract } from "thirdweb";
+import { polygon } from "thirdweb/chains";
+import { getBytecode, getContract } from "thirdweb/contract";
+import { getPublishedUriFromCompilerUri } from "thirdweb/extensions/thirdweb";
+import { getInstalledModules } from "thirdweb/modules";
+import { download } from "thirdweb/storage";
+import { extractIPFSUri } from "thirdweb/utils";
+import { fetchPublishedContractsFromDeploy } from "../../../../../../../components/contract-components/fetchPublishedContractsFromDeploy";
+import { isEnsName, resolveEns } from "../../../../../../../lib/ens";
+
+type ModuleMetadataPickedKeys = {
+  publisher: string;
+  moduleId: string;
+  name: string;
+  version: string;
+};
+
+export async function getPublishedByCardProps(params: {
+  address: string | null;
+  contract: ThirdwebContract;
+  client: ThirdwebClient;
+}) {
+  const { address, contract, client } = params;
+
+  const publishedContractsFromDeploy = await fetchPublishedContractsFromDeploy({
+    contract,
+    client,
+  });
+
+  const reversedPublishedContractsFromDeploy = [
+    ...(publishedContractsFromDeploy || []),
+  ].reverse();
+
+  const publishedContractToShow =
+    reversedPublishedContractsFromDeploy.find(
+      (publishedContract) => publishedContract.publisher === address,
+    ) ||
+    reversedPublishedContractsFromDeploy.find(
+      (publishedContract) =>
+        publishedContract.publisher === THIRDWEB_DEPLOYER_ADDRESS,
+    ) ||
+    reversedPublishedContractsFromDeploy[
+      reversedPublishedContractsFromDeploy.length - 1
+    ] ||
+    undefined;
+
+  if (!publishedContractToShow || !publishedContractToShow.publisher) {
+    return null;
+  }
+
+  // get publisher address/ens
+  let publisherAddressOrEns = publishedContractToShow.publisher;
+  if (!isEnsName(publishedContractToShow.publisher)) {
+    try {
+      const res = await resolveEns(publishedContractToShow.publisher);
+      if (res.ensName) {
+        publisherAddressOrEns = res.ensName;
+      }
+    } catch {
+      // no op
+    }
+  }
+
+  // Get Modules metadata for modular contract
+  let modules: ModuleMetadataPickedKeys[] = [];
+  if (publishedContractToShow?.routerType === "modular") {
+    try {
+      const installedModules = await getInstalledModules({
+        contract,
+      });
+
+      if (installedModules.length !== 0) {
+        const moduleContracts = installedModules.map((module) => {
+          return getContract({ ...contract, address: module.implementation });
+        });
+
+        const metadataUris = await Promise.allSettled(
+          moduleContracts.map(async (c) => {
+            const byteCode = await getBytecode(c);
+            const ipfsUri = extractIPFSUri(byteCode);
+
+            if (!ipfsUri) {
+              throw new Error("No IPFS URI found in bytecode");
+            }
+            let uris = await getPublishedUriFromCompilerUri({
+              contract: {
+                chain: polygon,
+                client: contract.client,
+                address: "0xf5b896Ddb5146D5dA77efF4efBb3Eae36E300808",
+              },
+              compilerMetadataUri: ipfsUri,
+            }).catch((e) => {
+              console.error("Error fetching published URI", e);
+              return [];
+            });
+
+            uris = uris.filter((uri) => uri.length > 0);
+            if (uris.length === 0) {
+              throw new Error("No published URI found");
+            }
+
+            const results = await Promise.allSettled(
+              uris.map(async (uri) => {
+                const content = await download({
+                  uri,
+                  client: contract.client,
+                });
+                return JSON.parse(
+                  await content.text(),
+                ) as ModuleMetadataPickedKeys;
+              }),
+            );
+
+            return results
+              .filter((r) => r.status === "fulfilled")
+              .map((r) => r.value);
+          }),
+        );
+
+        const filtered = metadataUris
+          .filter((m) => m.status === "fulfilled")
+          .map((m) => m.value);
+
+        modules = filtered.map((m) => m[0]).filter((m) => m !== undefined);
+      }
+    } catch {
+      // no op
+    }
+  }
+
+  return {
+    modules,
+    name: publishedContractToShow.name,
+    publisher: publisherAddressOrEns,
+    version: publishedContractToShow.version,
+    isBeta: (publishedContractToShow.displayName || "")
+      .toLowerCase()
+      .includes("beta"),
+  };
+}
+
+export function PublishedByUI(props: {
+  modules: ModuleMetadataPickedKeys[];
+  name: string;
+  publisher: string;
+  version: string | undefined;
+  isBeta: boolean;
+}) {
+  return (
+    <ContractCard
+      contractId={props.name}
+      publisher={props.publisher}
+      version={props.version}
+      isBeta={props.isBeta}
+      modules={props.modules.map((m) => ({
+        publisher: m.publisher,
+        moduleId: m.name,
+        version: m.version,
+      }))}
+    />
+  );
+}

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/published-by.server.tsx

@@ -0,0 +1,32 @@
+import { getThirdwebClient } from "@/constants/thirdweb.server";
+import type { ThirdwebContract } from "thirdweb";
+import { getAuthTokenWalletAddress } from "../../../../../../api/lib/getAuthToken";
+import { PublishedByUI, getPublishedByCardProps } from "./published-by-ui";
+
+interface PublishedByProps {
+  contract: ThirdwebContract;
+}
+
+export const PublishedBy: React.FC<PublishedByProps> = async ({ contract }) => {
+  const client = getThirdwebClient();
+  const address = getAuthTokenWalletAddress();
+  const props = await getPublishedByCardProps({
+    address,
+    contract,
+    client,
+  });
+
+  if (!props) {
+    return null;
+  }
+
+  return (
+    <PublishedByUI
+      isBeta={props.isBeta}
+      modules={props.modules}
+      name={props.name}
+      publisher={props.publisher}
+      version={props.version}
+    />
+  );
+};