Version Packages (#5301)

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

.github/workflows/linear.yml

@@ -0,0 +1,26 @@
+name: Check for linked issue in pull request body
+
+on:
+  pull_request:
+    types:
+      - opened
+      - edited
+
+jobs:
+  check_linear_in_pr_body:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check for linked issue in pull request body
+        run: |
+          pr_body=$(curl -s \
+            -H "Authorization: token ${{ secrets.GITHUB_TOKEN }}" \
+            https://api.github.com/repos/${{ github.repository }}/pulls/${{ github.event.number }} | jq -r .body)
+
+          echo "Pull Request Body: $pr_body"
+
+          if echo "$pr_body" | grep -iE "CNCT|DASH"; then
+            echo "Linked issue found in the pull request body."
+          else
+            echo "No linked issue found in the pull request body."
+            exit 1
+          fi

.github/workflows/stale.yml

@@ -0,0 +1,15 @@
+name: 'Close stale issues and PRs'
+on:
+  schedule:
+    - cron: '30 1 * * *'
+
+jobs:
+  stale:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/stale@v9
+        with:
+          stale-issue-message: 'This issue has been inactive for 30 days. It is now marked as stale and will be closed in 5 days if no further activity occurs.'
+          stale-pr-message: 'This PR has been inactive for 30 days. It is now marked as stale and will be closed in 5 days if no further activity occurs.'
+          days-before-stale: 30
+          days-before-close: 5

.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=""
@@ -96,4 +87,8 @@ UNTHREAD_PRO_TIER_ID=""
 NEXT_PUBLIC_DEMO_ENGINE_URL=""
 
 # API server secret (required for thirdweb.com SIWE login). Copy from Vercel.
-API_SERVER_SECRET=""
+API_SERVER_SECRET=""
+
+# Used for the Faucet page (/<chain_id>)
+NEXT_PUBLIC_TURNSTILE_SITE_KEY=""
+TURNSTILE_SECRET_KEY=""

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/README.md

@@ -23,4 +23,17 @@ Some env vars can be overridden that are required for some external services to
 
 To define env vars please create a `.env` file based on the `.env.example` template at the root level of the project. This file is ignored by git so you can safely add it to your local copy of the project.
 
-**Add your thirdweb clientID and secret key to build a basic functioning version of the site.**
+**Add your thirdweb clientID and secret key to build a basic functioning version of the site.**
+
+## Code Structure and Style Guide
+
+### Components
+- Components should go in a `components` folder next to the app page they are used in.
+- If a component is reused in multiple pages, it should go in the lowest level route folder it is used in. For example, if a chart component is used in all analytics subroutes `/analytics/...`, it should go in the `/analytics/components` folder.
+- All low-level components such as buttons, inputs, etc. should be shadcn components found in `@/ui`.
+- All composed components reused across all page routes are `blocks`, and should also go in the `@/ui` folder.
+
+### Data fetching
+- Use RSC wherever possible.
+- Write data fetching code in its own function in the same file as the component it is used in, not exported.
+- If the same data fetching function is used in multiple components, place it in a file in an `api` folder at the lowest level possible (just like components). If you need to do this you probable aren't organizing your components properly.

apps/dashboard/framer-rewrites.js

@@ -0,0 +1,20 @@
+// add framer paths here
+module.exports = [
+  // -- home
+  "/",
+  // -- product landing pages --
+  // -- connect
+  "/connect/sign-in",
+  // -- contracts
+  "/contracts/modular-contracts",
+  "/contracts/explore",
+  "/contracts/deployment-tool",
+  // -- engine
+  "/engine",
+  // -- solutions pages --
+  "/solutions/gaming",
+  "/solutions/consumer-apps",
+  "/solutions/defi",
+  // -- campaigns --
+  "/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,9 +6,9 @@ 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;
+  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:;
   worker-src 'self' blob:;
   block-all-mixed-content;
@@ -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,10 +25,10 @@
     "@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",
+    "@marsidev/react-turnstile": "^1.0.2",
     "@n8tb1t/use-scroll-position": "^2.0.3",
     "@radix-ui/react-alert-dialog": "^1.1.2",
     "@radix-ui/react-avatar": "^1.1.1",
@@ -45,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",
@@ -61,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",
@@ -84,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",
@@ -107,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",
@@ -135,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/redirects.js

@@ -284,6 +284,43 @@ function redirects() {
       destination: "/explore",
       permanent: false,
     },
+
+    // framer redirects
+    {
+      source: "/deploy",
+      destination: "/contracts/deployment-tool",
+      permanent: false,
+    },
+    {
+      source: "/publish",
+      destination: "/contracts/deployment-tool",
+      permanent: false,
+    },
+    {
+      source: "/smart-contracts",
+      destination: "/contracts/explore",
+      permanent: false,
+    },
+    {
+      source: "/build",
+      destination: "/contracts/modular-contracts",
+      permanent: false,
+    },
+    {
+      source: "/ui-components",
+      destination: "/sdk",
+      permanent: false,
+    },
+    {
+      source: "/interact",
+      destination: "/sdk",
+      permanent: false,
+    },
+    {
+      source: "/sponsored-transactions",
+      destination: "/account-abstraction",
+      permanent: false,
+    },
   ];
 }
 

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

@@ -1,6 +1,7 @@
 /* eslint-disable @next/next/no-img-element */
 "use client";
-import { useState } from "react";
+import { useRef, useState } from "react";
+import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
 import { cn } from "../../lib/utils";
 
 type imgElementProps = React.DetailedHTMLProps<
@@ -25,19 +26,39 @@ export function Img(props: imgElementProps) {
   const { className, fallback, skeleton, ...restProps } = props;
   const defaultSkeleton = <div className="animate-pulse bg-accent" />;
   const defaultFallback = <div className="bg-muted" />;
+  const imgRef = useRef<HTMLImageElement>(null);
+
+  useIsomorphicLayoutEffect(() => {
+    const imgEl = imgRef.current;
+    if (!imgEl) {
+      return;
+    }
+    if (imgEl.complete) {
+      setStatus("loaded");
+    } else {
+      function handleLoad() {
+        setStatus("loaded");
+      }
+      imgEl.addEventListener("load", handleLoad);
+      return () => {
+        imgEl.removeEventListener("load", handleLoad);
+      };
+    }
+  }, []);
 
   return (
     <div className="relative">
       <img
         {...restProps}
-        onLoad={() => {
-          setStatus("loaded");
-        }}
+        // avoid setting empty src string to prevent request to the entire page
+        src={restProps.src || undefined}
+        ref={imgRef}
         onError={() => {
           setStatus("fallback");
         }}
         style={{
           opacity: status === "loaded" ? 1 : 0,
+          ...restProps.style,
         }}
         alt={restProps.alt || ""}
         className={cn(
@@ -48,6 +69,7 @@ export function Img(props: imgElementProps) {
 
       {status !== "loaded" && (
         <div
+          style={restProps.style}
           className={cn(
             "fade-in-0 absolute inset-0 overflow-hidden transition-opacity duration-300 [&>*]:h-full [&>*]:w-full",
             className,

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/multi-select.tsx

@@ -119,13 +119,18 @@ export const MultiSelect = forwardRef<HTMLButtonElement, MultiSelectProps>(
         if (filteredOptions.length >= itemsToShow) {
           break;
         }
+        const option = options[i];
+        if (!option) {
+          continue;
+        }
+
         if (overrideSearchFn) {
-          if (overrideSearchFn(options[i], searchValLowercase)) {
-            filteredOptions.push(options[i]);
+          if (overrideSearchFn(option, searchValLowercase)) {
+            filteredOptions.push(option);
           }
         } else {
-          if (options[i].label.toLowerCase().includes(searchValLowercase)) {
-            filteredOptions.push(options[i]);
+          if (option.label.toLowerCase().includes(searchValLowercase)) {
+            filteredOptions.push(option);
           }
         }
       }

apps/dashboard/src/@/components/blocks/select-with-search.tsx

@@ -63,14 +63,18 @@ export const SelectWithSearch = React.forwardRef<
         if (filteredOptions.length >= itemsToShow) {
           break;
         }
+        const option = options[i];
+        if (!option) {
+          continue;
+        }
 
         if (overrideSearchFn) {
-          if (overrideSearchFn(options[i], searchValLowercase)) {
-            filteredOptions.push(options[i]);
+          if (overrideSearchFn(option, searchValLowercase)) {
+            filteredOptions.push(option);
           }
         } else {
-          if (options[i].label.toLowerCase().includes(searchValLowercase)) {
-            filteredOptions.push(options[i]);
+          if (option.label.toLowerCase().includes(searchValLowercase)) {
+            filteredOptions.push(option);
           }
         }
       }

apps/dashboard/src/@/components/blocks/skeletons/GenericLoadingPage.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import { Spinner } from "@/components/ui/Spinner/Spinner";
+
+export function GenericLoadingPage() {
+  return (
+    <div className="flex min-h-[500px] grow items-center justify-center rounded-lg border border-border">
+      <Spinner className="size-10" />
+    </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/chart.tsx

@@ -143,7 +143,7 @@ const ChartTooltipContent = React.forwardRef<
       }
 
       const [item] = payload;
-      const key = `${labelKey || item.dataKey || item.name || "value"}`;
+      const key = `${labelKey || item?.dataKey || item?.name || "value"}`;
       const itemConfig = getPayloadConfigFromPayload(config, item, key);
       const value =
         !labelKey && typeof label === "string"

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/image-upload.tsx

@@ -16,7 +16,9 @@ const ImageUpload = React.forwardRef<HTMLInputElement, ImageUploadProps>(
     const [activeFile, setActiveFile] = React.useState<File | null>(null);
     const onDrop = React.useCallback(
       (acceptedFiles: File[]) => {
-        setActiveFile(acceptedFiles[0]);
+        if (acceptedFiles[0]) {
+          setActiveFile(acceptedFiles[0]);
+        }
         onUpload?.(acceptedFiles);
       },
       [onUpload],

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

@@ -35,7 +35,8 @@ const InputOTPSlot = React.forwardRef<
   React.ComponentPropsWithoutRef<"div"> & { index: number }
 >(({ index, className, ...props }, ref) => {
   const inputOTPContext = React.useContext(OTPInputContext);
-  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];
+  // biome-ignore lint/style/noNonNullAssertion: pure shadcn component - it works
+  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]!;
 
   return (
     <div
@@ -62,7 +63,7 @@ const InputOTPSeparator = React.forwardRef<
   React.ElementRef<"div">,
   React.ComponentPropsWithoutRef<"div">
 >(({ ...props }, ref) => (
-  // biome-ignore lint/a11y/useFocusableInteractive: <explanation>
+  // biome-ignore lint/a11y/useFocusableInteractive: pure shadcn component - it works
   <div ref={ref} role="separator" {...props}>
     <Dot />
   </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

@@ -1,15 +1,16 @@
-const LOGGED_IN_ONLY_PATHS = [
-  // anything that _starts_ with /dashboard is logged in only
-  "/dashboard",
-  // team pages are logged in only
-  "/team",
-  // anything that _starts_ with /cli is logged in only
-  "/cli",
-  "/support",
-  // publish page
-  "/contracts/publish",
-];
-
 export function isLoginRequired(pathname: string) {
-  return LOGGED_IN_ONLY_PATHS.some((path) => pathname.startsWith(path));
+  // remove '/' in front and then split by '/'
+  const paths = pathname.slice(1).split("/");
+
+  // /dashboard, /team, /cli
+  if (paths[0] === "dashboard" || paths[0] === "team" || paths[0] === "cli") {
+    return true;
+  }
+
+  // /contracts/publish
+  if (paths[0] === "contracts" && paths[1] === "publish") {
+    return true;
+  }
+
+  return false;
 }

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

@@ -23,3 +23,6 @@ export const DASHBOARD_STORAGE_URL =
 
 export const API_SERVER_URL =
   process.env.NEXT_PUBLIC_THIRDWEB_API_HOST || "https://api.thirdweb.com";
+
+export const TURNSTILE_SITE_KEY =
+  process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY || "";

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/cache-keys.ts

@@ -63,8 +63,11 @@ export const embeddedWalletsKeys = {
   all: ["embeddedWallets"] as const,
   wallet: (walletAddress: string) =>
     [...embeddedWalletsKeys.all, walletAddress] as const,
-  embeddedWallets: (walletAddress: string, clientId: string | undefined) =>
-    [...embeddedWalletsKeys.wallet(walletAddress), clientId] as const,
+  embeddedWallets: (
+    walletAddress: string,
+    clientId: string | undefined,
+    page: number,
+  ) => [...embeddedWalletsKeys.wallet(walletAddress), clientId, page] as const,
 };
 
 export const engineKeys = {

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

@@ -44,13 +44,12 @@ export function useActivity(contract: ThirdwebContract, autoUpdate?: boolean) {
     }
     const obj = eventsQuery.data.slice(0, 100).reduce(
       (acc, curr) => {
-        if (acc[curr.transactionHash]) {
-          acc[curr.transactionHash].events.push(curr);
-          acc[curr.transactionHash].events.sort(
-            (a, b) => b.logIndex - a.logIndex,
-          );
-          if (acc[curr.transactionHash].blockNumber > curr.blockNumber) {
-            acc[curr.transactionHash].blockNumber = curr.blockNumber;
+        const internalTx = acc[curr.transactionHash];
+        if (internalTx) {
+          internalTx.events.push(curr);
+          internalTx.events.sort((a, b) => b.logIndex - a.logIndex);
+          if (internalTx.blockNumber > curr.blockNumber) {
+            internalTx.blockNumber = curr.blockNumber;
           }
         } else {
           acc[curr.transactionHash] = {

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

@@ -5,27 +5,31 @@ 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";
 
 // FIXME: We keep repeating types, API server should provide them
 
-export enum AccountStatus {
-  NoCustomer = "noCustomer",
-  NoPayment = "noPayment",
-  PaymentVerification = "paymentVerification",
-  ValidPayment = "validPayment",
-  InvalidPayment = "invalidPayment",
-  InvalidPaymentMethod = "invalidPaymentMethod",
-}
+export const accountStatus = {
+  noCustomer: "noCustomer",
+  noPayment: "noPayment",
+  paymentVerification: "paymentVerification",
+  validPayment: "validPayment",
+  invalidPayment: "invalidPayment",
+  invalidPaymentMethod: "invalidPaymentMethod",
+} as const;
 
-export enum AccountPlan {
-  Free = "free",
-  Growth = "growth",
-  Pro = "pro",
-  Enterprise = "enterprise",
-}
+export const accountPlan = {
+  free: "free",
+  growth: "growth",
+  pro: "pro",
+  enterprise: "enterprise",
+} as const;
+
+export type AccountStatus = (typeof accountStatus)[keyof typeof accountStatus];
+export type AccountPlan = (typeof accountPlan)[keyof typeof accountPlan];
 
 export type AuthorizedWallet = {
   id: string;
@@ -234,6 +238,14 @@ export interface WalletStats {
   walletType: string;
 }
 
+export interface InAppWalletStats {
+  date: string;
+  authenticationMethod: string;
+  uniqueWalletsConnected: number;
+}
+
+export interface EcosystemWalletStats extends InAppWalletStats {}
+
 export interface UserOpStats {
   date: string;
   successful: number;
@@ -241,6 +253,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;
@@ -427,6 +447,43 @@ async function getUserOpUsage(args: {
   return json.data;
 }
 
+export async function getInAppWalletUsage(args: {
+  clientId: string;
+  from?: Date;
+  to?: Date;
+  period?: "day" | "week" | "month" | "year" | "all";
+}) {
+  const { clientId, from, to, period } = args;
+
+  const searchParams = new URLSearchParams();
+  searchParams.append("clientId", clientId);
+  if (from) {
+    searchParams.append("from", from.toISOString());
+  }
+  if (to) {
+    searchParams.append("to", to.toISOString());
+  }
+  if (period) {
+    searchParams.append("period", period);
+  }
+  const res = await fetch(
+    `${THIRDWEB_ANALYTICS_API_HOST}/v1/wallets/in-app?${searchParams.toString()}`,
+    {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+      },
+    },
+  );
+  const json = await res?.json();
+
+  if (!res || res.status !== 200) {
+    throw new Error(json.message);
+  }
+
+  return json.data;
+}
+
 export function useUserOpUsageAggregate(args: {
   clientId: string;
   from?: Date;
@@ -434,8 +491,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 +502,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;
@@ -48,7 +48,7 @@ export async function fetchDashboardContractMetadata(
   if (compilerMetadata?.name.includes(":")) {
     const _name = compilerMetadata.name.split(":")[1];
     if (_name) {
-      compilerMetadata.name = compilerMetadata.name.split(":")[1];
+      compilerMetadata.name = _name;
     }
   }
 

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

@@ -1,51 +1,43 @@
-import { useQuery } from "@tanstack/react-query";
+import { keepPreviousData, useQuery } from "@tanstack/react-query";
 import { THIRDWEB_EWS_API_HOST } from "constants/urls";
+import type { WalletUser } from "thirdweb/wallets";
 import { embeddedWalletsKeys } from "../cache-keys";
 import { useLoggedInUser } from "./useLoggedInUser";
 
-// FIXME: Make API to return camelCase or transform
-export type EmbeddedWalletUser = {
-  id: string;
-  client_id: string;
-  created_at: string;
-  last_accessed_at: string;
-  embedded_wallet?: {
-    id: string;
-    address: string;
-    chain: string;
-    wallet_user_id: string;
-  }[];
-  ews_authed_user: {
-    id: string;
-    authed_user_id: string;
-    email: string;
-  }[];
-};
-
-export function useEmbeddedWallets(clientId: string) {
+export function useEmbeddedWallets(clientId: string, page: number) {
   const { user, isLoggedIn } = useLoggedInUser();
 
   return useQuery({
     queryKey: embeddedWalletsKeys.embeddedWallets(
       user?.address as string,
-      clientId as string,
+      clientId,
+      page,
     ),
     queryFn: async () => {
-      const res = await fetch(
-        `${THIRDWEB_EWS_API_HOST}/api/thirdweb/embedded-wallet?clientId=${clientId}&lastAccessedAt=0`,
-        {
-          method: "GET",
-          headers: {
-            "Content-Type": "application/json",
-            Authorization: `Bearer ${user?.jwt}`,
-          },
-        },
+      const url = new URL(
+        `${THIRDWEB_EWS_API_HOST}/api/2024-05-05/account/list`,
       );
+      url.searchParams.append("clientId", clientId);
+      url.searchParams.append("page", page.toString());
+
+      const res = await fetch(url.href, {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${user?.jwt}`,
+        },
+      });
+      if (!res.ok) {
+        throw new Error(`Failed to fetch wallets: ${await res.text()}`);
+      }
 
       const json = await res.json();
-
-      return json.walletUsers as EmbeddedWalletUser[];
+      return json as {
+        users: WalletUser[];
+        totalPages: number;
+      };
     },
+    placeholderData: keepPreviousData,
     enabled: !!user?.address && isLoggedIn && !!clientId,
   });
 }

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

@@ -2,17 +2,24 @@
 
 import { Spinner } from "@/components/ui/Spinner/Spinner";
 import { Button } from "@/components/ui/button";
-import { THIRDWEB_ENGINE_FAUCET_WALLET } from "@/constants/env";
+import { Form, FormControl, FormField, FormItem } from "@/components/ui/form";
+import {
+  THIRDWEB_ENGINE_FAUCET_WALLET,
+  TURNSTILE_SITE_KEY,
+} from "@/constants/env";
 import { useThirdwebClient } from "@/constants/thirdweb.client";
 import { CustomConnectWallet } from "@3rdweb-sdk/react/components/connect-wallet";
+import { Turnstile } from "@marsidev/react-turnstile";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import type { CanClaimResponseType } from "app/api/testnet-faucet/can-claim/CanClaimResponseType";
 import { mapV4ChainToV5Chain } from "contexts/map-chains";
 import { useTrack } from "hooks/analytics/useTrack";
+import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { toUnits } from "thirdweb";
 import type { ChainMetadata } from "thirdweb/chains";
 import { useActiveAccount, useWalletBalance } from "thirdweb/react";
+import { z } from "zod";
 
 function formatTime(seconds: number) {
   const rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
@@ -29,12 +36,18 @@ function formatTime(seconds: number) {
   return rtf.format(+seconds, "second");
 }
 
+const claimFaucetSchema = z.object({
+  turnstileToken: z.string().min(1, {
+    message: "Captcha validation is required.",
+  }),
+});
+
 export function FaucetButton({
   chain,
   amount,
 }: {
   chain: ChainMetadata;
-  amount: string;
+  amount: number;
 }) {
   const client = useThirdwebClient();
   const address = useActiveAccount()?.address;
@@ -52,7 +65,7 @@ export function FaucetButton({
   const queryClient = useQueryClient();
 
   const claimMutation = useMutation({
-    mutationFn: async () => {
+    mutationFn: async (turnstileToken: string) => {
       trackEvent({
         category: "faucet",
         action: "claim",
@@ -67,6 +80,7 @@ export function FaucetButton({
         body: JSON.stringify({
           chainId: chainId,
           toAddress: address,
+          turnstileToken,
         }),
       });
 
@@ -117,6 +131,8 @@ export function FaucetButton({
     faucetWalletBalanceQuery.data !== undefined &&
     faucetWalletBalanceQuery.data.value < toUnits("1", 17);
 
+  const form = useForm<z.infer<typeof claimFaucetSchema>>();
+
   // loading state
   if (faucetWalletBalanceQuery.isPending || canClaimFaucetQuery.isPending) {
     return (
@@ -161,28 +177,47 @@ export function FaucetButton({
     );
   }
 
+  const claimFunds = (values: z.infer<typeof claimFaucetSchema>) => {
+    // Instead of having a dedicated endpoint (/api/verify-token),
+    // we can just attach the token in the payload and send it to the claim-faucet endpoint, to avoid a round-trip request
+    const claimPromise = claimMutation.mutateAsync(values.turnstileToken);
+    toast.promise(claimPromise, {
+      success: `${amount} ${chain.nativeCurrency.symbol} sent successfully`,
+      error: `Failed to claim ${amount} ${chain.nativeCurrency.symbol}`,
+    });
+  };
+
   // eligible to claim and faucet has balance
   return (
     <div className="flex w-full flex-col text-center">
-      <Button
-        variant="primary"
-        className="w-full gap-2"
-        onClick={() => {
-          const claimPromise = claimMutation.mutateAsync();
-          toast.promise(claimPromise, {
-            success: `${amount} ${chain.nativeCurrency.symbol} sent successfully`,
-            error: `Failed to claim ${amount} ${chain.nativeCurrency.symbol}`,
-          });
-        }}
-      >
-        {claimMutation.isPending ? (
-          <>
-            Claiming <Spinner className="size-3" />
-          </>
-        ) : (
-          `Get ${amount} ${chain.nativeCurrency.symbol}`
-        )}
-      </Button>
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(claimFunds)}>
+          <Button variant="primary" className="w-full gap-2" type="submit">
+            {claimMutation.isPending ? (
+              <>
+                Claiming <Spinner className="size-3" />
+              </>
+            ) : (
+              `Get ${amount} ${chain.nativeCurrency.symbol}`
+            )}
+          </Button>
+          <FormField
+            control={form.control}
+            name="turnstileToken"
+            render={({ field }) => (
+              <FormItem>
+                <FormControl>
+                  <Turnstile
+                    className="mt-4"
+                    siteKey={TURNSTILE_SITE_KEY}
+                    onSuccess={(token) => field.onChange(token)}
+                  />
+                </FormControl>
+              </FormItem>
+            )}
+          />
+        </form>
+      </Form>
 
       {faucetWalletBalanceQuery.data && (
         <p className="mt-3 text-muted-foreground text-xs">

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]/(chainPage)/layout.tsx

@@ -46,6 +46,10 @@ export async function generateMetadata({
   return {
     title,
     description,
+    openGraph: {
+      title,
+      description,
+    },
   };
 }
 

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

@@ -122,6 +122,7 @@ export default async function Image({
             right: -2,
             height: 150,
             width: 150,
+            objectFit: "contain",
           }}
         />
       )}

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

@@ -2,11 +2,11 @@
 
 import { TransactionButton } from "components/buttons/TransactionButton";
 import { useTrack } from "hooks/analytics/useTrack";
-import { useTxNotifications } from "hooks/useTxNotifications";
+import { useAllChainsData } from "hooks/chains/allChains";
+import { toast } from "sonner";
 import type { ThirdwebContract } from "thirdweb";
 import { cancelAuction, cancelListing } from "thirdweb/extensions/marketplace";
 import { useSendAndConfirmTransaction } from "thirdweb/react";
-import { useAllChainsData } from "../../../hooks/chains/allChains";
 
 interface CancelTabProps {
   id: string;
@@ -25,14 +25,9 @@ export const CancelTab: React.FC<CancelTabProps> = ({
   const transaction = isAuction
     ? cancelAuction({ contract, auctionId: BigInt(id) })
     : cancelListing({ contract, listingId: BigInt(id) });
-  const { onSuccess, onError } = useTxNotifications(
-    "Listing cancelled",
-    "Error cancelling listing",
-  );
   const cancelQuery = useSendAndConfirmTransaction();
   return (
     <div className="flex flex-col gap-3 pt-3">
-      {/* maybe some text? */}
       <TransactionButton
         txChainID={contract.chain.id}
         transactionCount={1}
@@ -43,7 +38,7 @@ export const CancelTab: React.FC<CancelTabProps> = ({
             action: "cancel-listing",
             label: "attempt",
           });
-          cancelQuery.mutate(transaction, {
+          const promise = cancelQuery.mutateAsync(transaction, {
             onSuccess: () => {
               trackEvent({
                 category: "marketplace",
@@ -51,7 +46,6 @@ export const CancelTab: React.FC<CancelTabProps> = ({
                 label: "success",
                 network,
               });
-              onSuccess();
             },
             onError: (error) => {
               trackEvent({
@@ -61,14 +55,19 @@ export const CancelTab: React.FC<CancelTabProps> = ({
                 network,
                 error,
               });
-              onError(error);
+              console.error(error);
             },
           });
+          toast.promise(promise, {
+            loading: `Cancelling ${isAuction ? "auction" : "listing"}`,
+            success: "Item cancelled successfully",
+            error: "Failed to cancel",
+          });
         }}
         colorScheme="primary"
         alignSelf="flex-end"
       >
-        Cancel Listing
+        Cancel {isAuction ? "Auction" : "Listing"}
       </TransactionButton>
     </div>
   );

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

@@ -0,0 +1,55 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/ui/sheet";
+import { ListerOnly } from "@3rdweb-sdk/react/components/roles/lister-only";
+import { PlusIcon } from "lucide-react";
+import { useState } from "react";
+import type { ThirdwebContract } from "thirdweb";
+import { useActiveAccount } from "thirdweb/react";
+import { CreateListingsForm } from "./list-form";
+
+interface CreateListingButtonProps {
+  contract: ThirdwebContract;
+  createText?: string;
+  type?: "direct-listings" | "english-auctions";
+}
+
+export const CreateListingButton: React.FC<CreateListingButtonProps> = ({
+  createText = "Create",
+  type,
+  contract,
+  ...restButtonProps
+}) => {
+  const address = useActiveAccount()?.address;
+  const [open, setOpen] = useState(false);
+
+  return (
+    <ListerOnly contract={contract}>
+      <Sheet open={open} onOpenChange={setOpen}>
+        <SheetTrigger asChild>
+          <Button variant="primary" {...restButtonProps} disabled={!address}>
+            {createText} <PlusIcon className="ml-2 size-5" />
+          </Button>
+        </SheetTrigger>
+        <SheetContent className="w-full overflow-y-auto sm:min-w-[540px] lg:min-w-[700px]">
+          <SheetHeader>
+            <SheetTitle className="mb-5 text-left">{createText}</SheetTitle>
+          </SheetHeader>
+          <CreateListingsForm
+            contract={contract}
+            type={type}
+            actionText={createText}
+            setOpen={setOpen}
+          />
+        </SheetContent>
+      </Sheet>
+    </ListerOnly>
+  );
+};

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

@@ -1,4 +1,5 @@
 import { Alert, AlertTitle } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
 import { useDashboardOwnedNFTs } from "@3rdweb-sdk/react/hooks/useDashboardOwnedNFTs";
 import { useWalletNFTs } from "@3rdweb-sdk/react/hooks/useWalletNFTs";
@@ -10,18 +11,18 @@ import {
   Select,
   Spinner,
   Tooltip,
-  useModalContext,
 } from "@chakra-ui/react";
+import { TransactionButton } from "components/buttons/TransactionButton";
 import { CurrencySelector } from "components/shared/CurrencySelector";
 import { SolidityInput } from "contract-ui/components/solidity-inputs";
 import { useTrack } from "hooks/analytics/useTrack";
-import { useTxNotifications } from "hooks/useTxNotifications";
+import { useAllChainsData } from "hooks/chains/allChains";
 import { isAlchemySupported } from "lib/wallet/nfts/alchemy";
 import { isMoralisSupported } from "lib/wallet/nfts/moralis";
 import { isSimpleHashSupported } from "lib/wallet/nfts/simpleHash";
 import type { WalletNFT } from "lib/wallet/nfts/types";
 import { CircleAlertIcon, InfoIcon } from "lucide-react";
-import { useMemo } from "react";
+import { type Dispatch, type SetStateAction, useMemo, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import {
@@ -57,7 +58,7 @@ import {
 import { NFTMediaWithEmptyState } from "tw-components/nft-media";
 import { shortenIfAddress } from "utils/usedapp-external";
 
-import { useAllChainsData } from "../../../../hooks/chains/allChains";
+const LIST_FORM_ID = "marketplace-list-form";
 
 type ListForm =
   | (Omit<CreateListingParams, "quantity" | "currencyContractAddress"> & {
@@ -80,9 +81,9 @@ type ListForm =
 
 type CreateListingsFormProps = {
   contract: ThirdwebContract;
-  formId: string;
+  actionText: string;
+  setOpen: Dispatch<SetStateAction<boolean>>;
   type?: "direct-listings" | "english-auctions";
-  setIsFormLoading: (loading: boolean) => void;
 };
 
 const auctionTimes = [
@@ -97,14 +98,15 @@ const auctionTimes = [
 
 export const CreateListingsForm: React.FC<CreateListingsFormProps> = ({
   contract,
-  formId,
   type,
-  setIsFormLoading,
+  actionText,
+  setOpen,
 }) => {
   const trackEvent = useTrack();
   const chainId = contract.chain.id;
   const { idToChain } = useAllChainsData();
   const network = idToChain.get(chainId);
+  const [isFormLoading, setIsFormLoading] = useState(false);
 
   const isSupportedChain =
     chainId &&
@@ -204,17 +206,10 @@ export const CreateListingsForm: React.FC<CreateListingsFormProps> = ({
 
   const noNfts = !nfts?.length;
 
-  const modalContext = useModalContext();
-
-  const { onSuccess, onError } = useTxNotifications(
-    "NFT listed successfully",
-    "Failed to list NFT",
-  );
-
   return (
     <form
-      className="flex flex-col gap-6"
-      id={formId}
+      className="flex flex-col gap-6 pb-16"
+      id={LIST_FORM_ID}
       onSubmit={form.handleSubmit(async (formData) => {
         if (!formData.selected || !selectedContract) {
           return;
@@ -248,12 +243,13 @@ export const CreateListingsForm: React.FC<CreateListingsFormProps> = ({
               approved: true,
             });
 
-            try {
-              await sendAndConfirmTx.mutateAsync(approveTx);
-            } catch {
-              setIsFormLoading(false);
-              return toast.error("Failed to approve NFT for marketplace");
-            }
+            const promise = sendAndConfirmTx.mutateAsync(approveTx);
+            toast.promise(promise, {
+              loading: "Approving NFT for listing",
+              success: "NFT approved succesfully",
+              error: "Failed to approve NFT",
+            });
+            await promise;
           }
 
           if (formData.listingType === "direct") {
@@ -271,12 +267,14 @@ export const CreateListingsForm: React.FC<CreateListingsFormProps> = ({
               pricePerToken: String(formData.pricePerToken),
               endTimestamp,
             });
-            await sendAndConfirmTx.mutateAsync(transaction, {
-              onSuccess: () => {
-                onSuccess();
-                modalContext.onClose();
-              },
-              onError,
+
+            const promise = sendAndConfirmTx.mutateAsync(transaction, {
+              onSuccess: () => setOpen(false),
+            });
+            toast.promise(promise, {
+              loading: "Listing NFT",
+              success: "NFT listed successfully",
+              error: "Failed to list NFT",
             });
           } else if (formData.listingType === "auction") {
             let minimumBidAmountWei: bigint;
@@ -324,16 +322,15 @@ export const CreateListingsForm: React.FC<CreateListingsFormProps> = ({
                 buyoutBidAmountWei * BigInt(formData.quantity),
             });
 
-            await sendAndConfirmTx.mutateAsync(transaction, {
+            const promise = sendAndConfirmTx.mutateAsync(transaction, {
               onSuccess: () => {
-                onSuccess();
                 trackEvent({
                   category: "marketplace",
                   action: "add-listing",
                   label: "success",
                   network,
                 });
-                modalContext.onClose();
+                setOpen(false);
               },
               onError: (error) => {
                 trackEvent({
@@ -343,11 +340,16 @@ export const CreateListingsForm: React.FC<CreateListingsFormProps> = ({
                   network,
                   error,
                 });
-                onError(error);
               },
             });
+            toast.promise(promise, {
+              loading: "Creating auction",
+              success: "Auction created successfully",
+              error: "Failed to create auction",
+            });
           }
-        } catch {
+        } catch (err) {
+          console.error(err);
           toast.error("Failed to list NFT");
         }
 
@@ -541,6 +543,27 @@ export const CreateListingsForm: React.FC<CreateListingsFormProps> = ({
           <AlertTitle>No NFT selected</AlertTitle>
         </Alert>
       )}
+
+      {/* Need to pin these at the bottom because this is a very long form */}
+      <div className="fixed right-6 bottom-4 flex flex-row items-center justify-end gap-3">
+        <Button
+          disabled={isFormLoading}
+          variant="default"
+          onClick={() => setOpen(false)}
+        >
+          Cancel
+        </Button>
+        <TransactionButton
+          txChainID={contract.chain.id}
+          isLoading={isFormLoading}
+          transactionCount={2}
+          form={LIST_FORM_ID}
+          type="submit"
+          colorScheme="primary"
+        >
+          {actionText}
+        </TransactionButton>
+      </div>
     </form>
   );
 };

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

@@ -0,0 +1,180 @@
+import { WalletAddress } from "@/components/blocks/wallet-address";
+import { CopyAddressButton } from "@/components/ui/CopyAddressButton";
+import { CopyTextButton } from "@/components/ui/CopyTextButton";
+import { Sheet, SheetContent } from "@/components/ui/sheet";
+import { Flex, GridItem, SimpleGrid, usePrevious } from "@chakra-ui/react";
+import type { ThirdwebContract } from "thirdweb";
+import type {
+  DirectListing,
+  EnglishAuction,
+} from "thirdweb/extensions/marketplace";
+import { useActiveAccount } from "thirdweb/react";
+import { Badge, Card, CodeBlock, Heading, Text } from "tw-components";
+import { NFTMediaWithEmptyState } from "tw-components/nft-media";
+import { CancelTab } from "./cancel-tab";
+import { LISTING_STATUS } from "./types";
+
+interface NFTDrawerProps {
+  contract: ThirdwebContract;
+  isOpen: boolean;
+  onClose: () => void;
+  data: DirectListing | EnglishAuction | null;
+}
+
+export const ListingDrawer: React.FC<NFTDrawerProps> = ({
+  contract,
+  isOpen,
+  onClose,
+  data,
+}) => {
+  const address = useActiveAccount()?.address;
+  const prevData = usePrevious(data);
+
+  const renderData = data || prevData;
+  const isOwner =
+    address?.toLowerCase() === renderData?.creatorAddress.toLowerCase();
+
+  const tokenId = renderData?.asset.id.toString() || "";
+
+  if (!renderData) {
+    return null;
+  }
+
+  return (
+    <Sheet open={isOpen} onOpenChange={onClose}>
+      <SheetContent className="flex w-full flex-col gap-6 py-6 md:min-w-[600px]">
+        <div className="flex flex-row gap-6">
+          <NFTMediaWithEmptyState
+            metadata={renderData.asset.metadata}
+            requireInteraction
+            width="150px"
+            height="150px"
+          />
+          <Flex flexDir="column" gap={2} w="70%">
+            <Heading size="title.lg">{renderData.asset.metadata.name}</Heading>
+            <Text size="label.md" noOfLines={6}>
+              {renderData.asset.metadata.name}
+            </Text>
+          </Flex>
+        </div>
+
+        <Flex flexDir="column" gap={4}>
+          <Card as={Flex} flexDir="column" gap={3}>
+            <SimpleGrid rowGap={3} columns={12} placeItems="center left">
+              <GridItem colSpan={3}>
+                <Heading size="label.md">Asset contract address</Heading>
+              </GridItem>
+              <GridItem colSpan={9}>
+                <CopyAddressButton
+                  address={renderData.assetContractAddress}
+                  copyIconPosition="right"
+                />
+              </GridItem>
+              <GridItem colSpan={3}>
+                <Heading size="label.md">Token ID</Heading>
+              </GridItem>
+              <GridItem colSpan={9}>
+                <CopyTextButton
+                  textToCopy={tokenId}
+                  textToShow={tokenId}
+                  copyIconPosition="right"
+                  tooltip="Token ID"
+                />
+              </GridItem>
+              <GridItem colSpan={3}>
+                <Heading size="label.md">Seller</Heading>
+              </GridItem>
+              <GridItem colSpan={9}>
+                <WalletAddress address={renderData.creatorAddress} />
+              </GridItem>
+              <GridItem colSpan={3}>
+                <Heading size="label.md">Listing ID</Heading>
+              </GridItem>
+              <GridItem colSpan={9}>
+                <CopyTextButton
+                  textToCopy={renderData.id.toString()}
+                  textToShow={renderData.id.toString()}
+                  copyIconPosition="right"
+                  tooltip="Listing ID"
+                />
+              </GridItem>
+              <GridItem colSpan={3}>
+                <Heading size="label.md">Type</Heading>
+              </GridItem>
+              <GridItem colSpan={9}>
+                <Text fontFamily="mono" size="body.md">
+                  {renderData.asset.type}
+                </Text>
+              </GridItem>
+              <GridItem colSpan={3}>
+                <Heading size="label.md">Status</Heading>
+              </GridItem>
+              <GridItem colSpan={9}>
+                <Badge
+                  size="label.sm"
+                  variant="subtle"
+                  textTransform="capitalize"
+                >
+                  {LISTING_STATUS[renderData.status]}
+                </Badge>
+              </GridItem>
+              <GridItem colSpan={3}>
+                <Heading size="label.md">Quantity</Heading>
+              </GridItem>
+              <GridItem colSpan={9}>
+                <Text fontFamily="mono" size="body.md">
+                  {(renderData.quantity || 0n).toString()}{" "}
+                  {/* For listings that are completed, the `quantity` would be `0`
+                    So we show this text to make it clear */}
+                  {LISTING_STATUS[renderData.status] === "Completed"
+                    ? "(Sold out)"
+                    : ""}
+                </Text>
+              </GridItem>
+
+              {renderData.type === "direct-listing" && (
+                <>
+                  <GridItem colSpan={3}>
+                    <Heading size="label.md">Price</Heading>
+                  </GridItem>
+                  <GridItem colSpan={9}>
+                    <Text fontFamily="mono" size="body.md">
+                      {renderData.currencyValuePerToken.displayValue}{" "}
+                      {renderData.currencyValuePerToken.symbol}
+                    </Text>
+                  </GridItem>
+                </>
+              )}
+
+              {/*
+                  Todo: Add a Buy button somewhere in this section once the Dashboard is fully migrated to v5 (?)
+                  Kien already shipped a prebuilt component for the Marketplace Buy Button in SDK v5
+                */}
+            </SimpleGrid>
+          </Card>
+          {data?.asset.metadata.properties ? (
+            <Card as={Flex} flexDir="column" gap={4}>
+              <Heading size="label.md">Attributes</Heading>
+              <CodeBlock
+                code={
+                  JSON.stringify(data.asset.metadata.properties, null, 2) || ""
+                }
+                language="json"
+                canCopy={false}
+                wrap={false}
+                overflow="auto"
+              />
+            </Card>
+          ) : null}
+        </Flex>
+        {isOwner && (
+          <CancelTab
+            contract={contract}
+            id={renderData.id.toString()}
+            isAuction={renderData.type === "english-auction"}
+          />
+        )}
+      </SheetContent>
+    </Sheet>
+  );
+};

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

@@ -17,7 +17,6 @@ import {
 } from "@chakra-ui/react";
 import type { UseQueryResult } from "@tanstack/react-query";
 import { MediaCell } from "components/contract-pages/table/table-columns/cells/media-cell";
-import { ListingDrawer } from "contract-ui/tabs/shared-components/listing-drawer";
 import {
   ChevronFirstIcon,
   ChevronLastIcon,
@@ -40,6 +39,7 @@ import type {
 } from "thirdweb/extensions/marketplace";
 import { min } from "thirdweb/utils";
 import { Button, Text } from "tw-components";
+import { ListingDrawer } from "./listing-drawer";
 import { LISTING_STATUS } from "./types";
 
 const tableColumns: Column<DirectListing | EnglishAuction>[] = [
@@ -100,7 +100,6 @@ interface MarketplaceTableProps {
       start: number;
     }>
   >;
-  type: "direct-listings" | "english-auctions";
 }
 
 const DEFAULT_QUERY_STATE = { count: 50, start: 0 };
@@ -112,7 +111,6 @@ export const MarketplaceTable: React.FC<MarketplaceTableProps> = ({
   totalCountQuery,
   queryParams,
   setQueryParams,
-  type,
 }) => {
   const [listingsToShow, setListingsToShow_] = useState<"all" | "valid">("all");
 
@@ -215,7 +213,6 @@ export const MarketplaceTable: React.FC<MarketplaceTableProps> = ({
           data={tokenRow}
           isOpen={!!tokenRow}
           onClose={() => setTokenRow(null)}
-          type={type}
         />
         <Table {...getTableProps()}>
           <Thead>

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/ContractDirectListingsPage.tsx

@@ -2,7 +2,7 @@
 
 import type { ThirdwebContract } from "thirdweb";
 import { Heading } from "tw-components";
-import { CreateListingButton } from "../shared-components/list-button";
+import { CreateListingButton } from "../components/list-button";
 import { DirectListingsTable } from "./components/table";
 
 interface ContractDirectListingsPageProps {

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

@@ -1,6 +1,5 @@
 "use client";
 
-import { MarketplaceTable } from "contract-ui/tabs/shared-components/marketplace-table";
 import { useState } from "react";
 import type { ThirdwebContract } from "thirdweb";
 import {
@@ -9,6 +8,7 @@ import {
   totalListings,
 } from "thirdweb/extensions/marketplace";
 import { useReadContract } from "thirdweb/react";
+import { MarketplaceTable } from "../../components/marketplace-table";
 
 interface DirectListingsTableProps {
   contract: ThirdwebContract;
@@ -40,7 +40,6 @@ export const DirectListingsTable: React.FC<DirectListingsTableProps> = ({
       totalCountQuery={totalCountQuery}
       queryParams={queryParams}
       setQueryParams={setQueryParams}
-      type="direct-listings"
     />
   );
 };

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 { ContractDirectListingsPage } from "../../../../../../contract-ui/tabs/direct-listings/page";
-import { getContractPageParamsInfo } from "../_utils/getContractFromParams";
-import { getContractPageMetadata } from "../_utils/getContractPageMetadata";
+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/ContractEnglishAuctionsPage.tsx

@@ -2,7 +2,7 @@
 
 import type { ThirdwebContract } from "thirdweb";
 import { Heading } from "tw-components";
-import { CreateListingButton } from "../shared-components/list-button";
+import { CreateListingButton } from "../components/list-button";
 import { EnglishAuctionsTable } from "./components/table";
 
 interface ContractEnglishAuctionsProps {

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

@@ -1,6 +1,5 @@
 "use client";
 
-import { MarketplaceTable } from "contract-ui/tabs/shared-components/marketplace-table";
 import { useState } from "react";
 import type { ThirdwebContract } from "thirdweb";
 import {
@@ -9,6 +8,7 @@ import {
   totalAuctions,
 } from "thirdweb/extensions/marketplace";
 import { useReadContract } from "thirdweb/react";
+import { MarketplaceTable } from "../../components/marketplace-table";
 
 interface EnglishAuctionsTableProps {
   contract: ThirdwebContract;
@@ -40,7 +40,6 @@ export const EnglishAuctionsTable: React.FC<EnglishAuctionsTableProps> = ({
       totalCountQuery={totalCountQuery}
       queryParams={queryParams}
       setQueryParams={setQueryParams}
-      type="english-auctions"
     />
   );
 };

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 { ContractEnglishAuctionsPage } from "../../../../../../contract-ui/tabs/english-auctions/page";
-import { getContractPageParamsInfo } from "../_utils/getContractFromParams";
-import { getContractPageMetadata } from "../_utils/getContractPageMetadata";
+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/Inputs/CreatorInput.tsx

@@ -1,4 +1,4 @@
-import { Input } from "@chakra-ui/react";
+import { Input } from "@/components/ui/input";
 import { useActiveAccount } from "thirdweb/react";
 import { CustomFormControl } from "../common";
 import { useClaimConditionsFormContext } from "../index";

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

@@ -1,4 +1,4 @@
-import { Input } from "@chakra-ui/react";
+import { Input } from "@/components/ui/input";
 import { CustomFormControl } from "../common";
 import { useClaimConditionsFormContext } from "../index";
 
@@ -18,7 +18,7 @@ export const PhaseNameInput: React.FC = () => {
       helperText="This does not affect how your claim phase functions and is for organizational purposes only."
     >
       <Input
-        isDisabled={formDisabled}
+        disabled={formDisabled}
         type="text"
         value={inputValue}
         placeholder={inputPlaceholder}

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

@@ -1,6 +1,5 @@
 "use client";
 
-import { Flex } from "@chakra-ui/react";
 import type { ThirdwebContract } from "thirdweb";
 import { ClaimConditionsForm } from "./claim-conditions-form/index";
 
@@ -17,36 +16,26 @@ export const ClaimConditions: React.FC<ClaimConditionsProps> = ({
   isERC20,
 }) => {
   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"
-        >
-          {/* Info */}
-          <section>
-            <h2 className="mb-1 font-semibold text-xl tracking-tight">
-              Set Claim Conditions
-            </h2>
-            <p className="text-muted-foreground text-sm">
-              Control when the {isERC20 ? "tokens" : "NFTs"} get dropped, how
-              much they cost, and more.
-            </p>
-          </section>
+    <div className="flex w-full flex-col gap-6">
+      <section>
+        <h2 className="mb-1 font-semibold text-xl tracking-tight">
+          Set Claim Conditions
+        </h2>
+        <p className="text-muted-foreground text-sm">
+          Control when the {isERC20 ? "tokens" : "NFTs"} get dropped, how much
+          they cost, and more.
+        </p>
+      </section>
 
-          {/* Set Claim Conditions */}
-          <ClaimConditionsForm
-            isErc20={isERC20}
-            contract={contract}
-            tokenId={tokenId}
-            isColumn={isColumn}
-            // always multi phase!
-            isMultiPhase={true}
-          />
-        </Flex>
-      </Flex>
+      {/* Set Claim Conditions */}
+      <ClaimConditionsForm
+        isErc20={isERC20}
+        contract={contract}
+        tokenId={tokenId}
+        isColumn={isColumn}
+        // always multi phase!
+        isMultiPhase={true}
+      />
     </div>
   );
 };

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]/_layout/metadata-header.tsx

@@ -117,7 +117,7 @@ export const MetadataHeader: React.FC<MetadataHeaderProps> = ({
             <BadgeLink
               key={validBlockExplorer.url}
               name={validBlockExplorer.name}
-              href={`${validBlockExplorer.url}/address/${address}`}
+              href={`${validBlockExplorer.url.endsWith("/") ? validBlockExplorer.url : `${validBlockExplorer.url}/`}address/${address}`}
             />
           ))}
 

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).catch(() => 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,17 +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,
@@ -19,8 +24,6 @@ import {
   Heading,
   Text,
 } from "tw-components";
-import { useAllChainsData } from "../../../../hooks/chains/allChains";
-import type { StoredChain } from "../../../../stores/chainStores";
 
 interface EmbedSetupProps {
   contract: ThirdwebContract;
@@ -171,7 +174,7 @@ function minimizeChain(
   return {
     name: chain.name,
     chain: chain.chain,
-    rpc: [firstRpc],
+    rpc: [firstRpc || ""],
     nativeCurrency: chain.nativeCurrency,
     shortName: chain.shortName,
     chainId: chain.chainId,
@@ -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")}>
@@ -509,7 +506,7 @@ export const EmbedSetup: React.FC<EmbedSetupProps> = ({
               )}
               {colorOptions.map((color) => (
                 <option key={color} value={color}>
-                  {color[0].toUpperCase() + color.substring(1)}
+                  {color[0]?.toUpperCase() + color.substring(1)}
                 </option>
               ))}
             </Select>
@@ -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>
@@ -524,7 +522,7 @@ export const EmbedSetup: React.FC<EmbedSetupProps> = ({
               <Select {...register("secondaryColor")}>
                 {colorOptions.map((color) => (
                   <option key={color} value={color}>
-                    {color[0].toUpperCase() + color.substring(1)}
+                    {color[0]?.toUpperCase() + color.substring(1)}
                   </option>
                 ))}
               </Select>
@@ -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,7 +1,9 @@
 import { notFound, redirect } from "next/navigation";
-import { EmbedSetup } from "../../../../../../contract-ui/tabs/embed/components/embed-setup";
+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: {
   params: {
@@ -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} />;
 }