Version Packages (#4044)

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

.changeset/config.json

@@ -20,6 +20,7 @@
     "playground-web",
     "thirdweb-dashboard",
     "wallet-ui",
+    "portal",
     "@thirdweb-dev/auth",
     "@thirdweb-dev/chains",
     "@thirdweb-dev/cli",

.github/CODEOWNERS

@@ -44,7 +44,8 @@ packages/unity-js-bridge/ @joaquim-verges @0xFirekeeper @jnsdls
 apps/ @jnsdls @joaquim-verges
 apps/dashboard/ @jnsdls @MananTank @joaquim-verges
 apps/playground-web/ @joaquim-verges @gregfromstl @jnsdls @joaquim-verges
-apps/wallet-ui/ @gregfromstl @jnsdls @joaquim-verges
+apps/wallet-ui/ @gregfromstl @jnsdls @joaquim-verges @MananTank
+apps/portal/ @gregfromstl @jnsdls @joaquim-verges @MananTank
 
 # .github folder + .changeset + turbo config is owned by jonas for now
 scripts/ @jnsdls @joaquim-verges

.github/contributing.md

@@ -77,6 +77,21 @@ Many of the tests use forked versions of live chains like mainnet. We fork these
 
 If you need to use accounts in your tests, use the predefined accounts in `test/src/test-wallets.ts`. These are the default anvil accounts that are pre-funded on the local test forks.
 
+##### Mocking Network Calls
+
+If your test depends on a downstream network call, you must mock the call using `msw`. You can use one of the existing mocks in `test/src/mocks` or create your own. Once you've created a mock request, setup the server and add all your mocks like so:
+
+```ts
+import { setupServer } from "msw/node";
+import { downloadMock, uploadMock } from "../../../test/src/mocks/storage.js";
+
+const server = setupServer(uploadMock("HASH"), downloadMock({ name: "Test NFT" }));
+
+beforeAll(() => server.listen());
+afterEach(() => server.resetHandlers());
+afterAll(() => server.close());
+```
+
 #### Linting
 
 We use a linter to maintain best practices across projects. Once your changes are complete (or periodically while making changes), run the linter with the following command from the repo root:

.github/labeler.yml

@@ -11,3 +11,6 @@ legacy_packages:
 packages:
   - changed-files:
     - any-glob-to-any-file: "packages/**/*"
+portal:
+  - changed-files:
+    - any-glob-to-any-file: "apps/portal/**/*"

.github/workflows/CI.yml

@@ -142,31 +142,6 @@ jobs:
             echo "Bundling failed"
             exit 1
           fi
-      
-
-  benchmark:
-    # cannot run benchmarks on merge group
-    if: github.event_name != 'merge_group'
-    timeout-minutes: 15
-    name: "Benchmarks"
-    runs-on: ubuntu-latest
-    steps:
-      - name: Check out the code
-        uses: actions/checkout@v4
-
-      - name: Setup & Install
-        uses: ./.github/composite-actions/install
-
-      - name: Set up foundry
-        uses: foundry-rs/foundry-toolchain@v1
-        with:
-          cache: false
-
-      - name: Run benchmarks
-        uses: CodSpeedHQ/action@v3
-        with:
-          token: ${{ secrets.CODSPEED_TOKEN }}
-          run: "pnpm bench"
 
   size:
     # only run on pull requests

.github/workflows/release-artifacts.yml

@@ -1,75 +0,0 @@
-# On the Version Packages branch
-# Generate and Commit the Typedoc JSON files and the Snippets JSON files
-
-name: Commit Release Artifacts
-
-on:
-  push:
-    branches:
-      - changeset-release/main
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  # cancel any previous runs if they were started before this one
-  cancel-in-progress: true
-
-env:
-  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
-  TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
-  TW_SECRET_KEY: ${{ secrets.TW_SECRET_KEY }}
-
-jobs:
-  release-artifacts:
-    timeout-minutes: 60
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout branch
-        uses: actions/checkout@v4
-
-      # bun setup is required, because pnpm typdoc will run pnpm build and some packages uses bun for build
-      - name: Setup bun
-        uses: oven-sh/setup-bun@v1
-        with:
-          bun-version: 1.0.35
-
-      - name: Install
-        uses: ./.github/composite-actions/install
-
-      - name: Build
-        run: pnpm build
-
-      - name: Typedoc
-        run: pnpm typedoc
-
-      - name: Generate Docs
-        run: |
-          cd legacy_packages/sdk
-          pnpm generate-docs
-          cd ../react-core
-          pnpm generate-docs
-          cd ../react
-          pnpm generate-docs
-          cd ../..
-
-      - name: Generate Snippets
-        run: pnpm generate-snippets
-
-      - name: Commit changes
-        run: |
-          git config --local user.email "[email protected]"
-          git config --local user.name "GitHub Action"
-          git status
-          git add legacy_packages/react/typedoc/documentation.json.gz
-          git add legacy_packages/react-core/typedoc/documentation.json.gz
-          git add legacy_packages/react-native/typedoc/documentation.json.gz
-          git add legacy_packages/sdk/typedoc/documentation.json.gz
-          git add legacy_packages/storage/typedoc/documentation.json.gz
-          git add legacy_packages/wallets/typedoc/documentation.json.gz
-          git add packages/thirdweb/typedoc/documentation.json.gz
-          git add snippets/feature_snippets_react.json
-          git add snippets/feature_snippets_sdk.json
-          git add snippets/snippets.json
-          git commit -m "Commit Release Artifacts [skip ci]"
-          git push
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -14,7 +14,7 @@ public/dist
 .idea/
 .yalc/
 yalc.lock
-build/
+./build/
 playwright-report/
 .env/
 
@@ -25,4 +25,8 @@ legacy_packages/cli/artifacts/
 codecov
 
 # Remove sitemap files (generated at build time)
-sitemap*.xml
+sitemap*.xml
+
+# typedoc
+legacy_packages/*/typedoc/*
+packages/*/typedoc/*

.vscode/settings.json

@@ -18,5 +18,8 @@
   },
   "[json]": {
     "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[markdown]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
   }
 }

apps/dashboard/.eslintrc.js

@@ -15,6 +15,21 @@ module.exports = {
         message:
           'Are you *sure* you need to use "useEffect" here? If you loading any async function prefer using "useQuery".',
       },
+      {
+        selector: "CallExpression[callee.name='defineChain']",
+        message:
+          "Use useV5DashboardChain instead if you are using it inside a component",
+      },
+      {
+        selector: "CallExpression[callee.name='defineDashboardChain']",
+        message:
+          "Use useV5DashboardChain instead if you are using it inside a component",
+      },
+      {
+        selector: "CallExpression[callee.name='mapV4ChainToV5Chain']",
+        message:
+          "Use useV5DashboardChain instead if you are using it inside a component",
+      },
     ],
     "no-restricted-imports": [
       "error",

apps/dashboard/package.json

@@ -27,7 +27,7 @@
     "@coinbase/onchainkit": "^0.14.2",
     "@emotion/react": "11.11.4",
     "@emotion/styled": "11.11.5",
-    "@hookform/resolvers": "^3.6.0",
+    "@hookform/resolvers": "^3.9.0",
     "@n8tb1t/use-scroll-position": "^2.0.3",
     "@radix-ui/react-alert-dialog": "^1.1.1",
     "@radix-ui/react-aspect-ratio": "^1.0.3",
@@ -40,23 +40,22 @@
     "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-switch": "^1.1.0",
     "@radix-ui/react-toggle": "^1.1.0",
     "@radix-ui/react-toggle-group": "^1.1.0",
     "@radix-ui/react-tooltip": "1.1.2",
     "@react-icons/all-files": "^4.1.0",
     "@sentry/nextjs": "^8.8.0",
-    "@stripe/react-stripe-js": "^2.7.2",
+    "@stripe/react-stripe-js": "^2.7.3",
     "@stripe/stripe-js": "^3.5.0",
     "@tanstack/query-async-storage-persister": "^4.36.1",
     "@tanstack/react-query": "^4.36.1",
     "@tanstack/react-query-persist-client": "^4.36.1",
     "@tanstack/react-table": "^8.17.3",
     "@thirdweb-dev/react": "workspace:*",
-    "@thirdweb-dev/react-core": "workspace:*",
     "@thirdweb-dev/sdk": "workspace:*",
     "@thirdweb-dev/service-utils": "workspace:*",
     "@thirdweb-dev/storage": "workspace:*",
-    "@thirdweb-dev/wallets": "workspace:*",
     "@vercel/og": "^0.6.2",
     "abitype": "1.0.5",
     "chakra-react-select": "^4.7.6",
@@ -106,13 +105,13 @@
     "server-only": "^0.0.1",
     "sonner": "^1.5.0",
     "spdx-correct": "^3.2.0",
-    "spin-wheel-game": "1.0.3-alpha.3",
     "swagger-ui-react": "^5.17.14",
     "tailwind-merge": "^2.4.0",
     "tailwindcss-animate": "^1.0.7",
     "thirdweb": "workspace:*",
     "tiny-invariant": "^1.3.3",
     "use-debounce": "^10.0.1",
+    "vaul": "^0.9.1",
     "zksync-ethers": "5.9.0",
     "zod": "3.23.8"
   },
@@ -120,7 +119,7 @@
     "@chakra-ui/cli": "^2.4.1",
     "@next/bundle-analyzer": "^14.2.4",
     "@next/eslint-plugin-next": "^14.2.4",
-    "@playwright/test": "^1.44.1",
+    "@playwright/test": "1.44.1",
     "@types/color": "^3.0.6",
     "@types/node": "20.14.9",
     "@types/papaparse": "^5.3.14",
@@ -150,7 +149,7 @@
     "next-sitemap": "^4.2.3",
     "next-unused": "^0.0.6",
     "tailwindcss": "^3.4.4",
-    "typescript": "5.5.2"
+    "typescript": "5.5.4"
   },
   "next-unused": {
     "alias": {},

apps/dashboard/public/.well-known/apple-app-site-association

@@ -0,0 +1,7 @@
+{
+  "applinks": {},
+  "webcredentials": {
+    "apps": ["XYHGSFAMHX.com.thirdweb.demo"]
+  },
+  "appclips": {}
+}

apps/dashboard/public/.well-known/assetlinks.json

@@ -0,0 +1,15 @@
+[
+  {
+    "relation": [
+      "delegate_permission/common.handle_all_urls",
+      "delegate_permission/common.get_login_creds"
+    ],
+    "target": {
+      "namespace": "android_app",
+      "package_name": "com.thirdweb.demo",
+      "sha256_cert_fingerprints": [
+        "40:EB:0D:96:57:F3:D8:1F:BA:87:B8:E4:26:E0:3A:DB:C8:35:96:A8:A2:B2:55:F0:B1:64:F1:39:F8:6F:7E:EB"
+      ]
+    }
+  }
+]

apps/dashboard/redirects.js

@@ -282,6 +282,13 @@ function redirects() {
         "https://support.thirdweb.com/troubleshooting-errors/7Y1BqKNvtLdBv5fZkRZZB3/issue-linking-device-on-the-authorization-page-via-thirdweb-cli/cn9LRA3ax7XCP6uxwRYdvx",
       permanent: false,
     },
+
+    // temporary redirect gas -> explore page
+    {
+      source: "/gas",
+      destination: "/explore",
+      permanent: false,
+    },
   ];
 }
 

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

@@ -0,0 +1,49 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
+import { MenuIcon } from "lucide-react";
+import { useState } from "react";
+import { NavLink } from "../ui/NavLink";
+
+export function BurgerMenuButton(props: {
+  links?: { href: string; label: React.ReactNode }[];
+  footer?: React.ReactNode;
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogTrigger asChild>
+        <Button size="icon" variant="outline">
+          <MenuIcon strokeWidth={1} />
+        </Button>
+      </DialogTrigger>
+      <DialogContent
+        className="p-6 rounded-xl"
+        dialogCloseClassName="hidden"
+        onClick={(e) => {
+          if (e.target instanceof HTMLAnchorElement) {
+            setIsOpen(false);
+          }
+        }}
+      >
+        <div className="flex flex-col gap-2">
+          {props.links?.map((link) => {
+            return (
+              <Button size="sm" variant="ghost" asChild key={link.href}>
+                <NavLink
+                  href={link.href}
+                  className="!text-left justify-start flex gap-2 h-auto py-3"
+                  activeClassName="bg-accent"
+                >
+                  {link.label}
+                </NavLink>
+              </Button>
+            );
+          })}
+        </div>
+        {props.footer}
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,33 @@
+import type React from "react";
+import { cn } from "../../lib/utils";
+import { NavLink } from "../ui/NavLink";
+
+export type SidebarContentProps = {
+  header?: React.ReactNode;
+  links?: { href: string; label: React.ReactNode }[];
+  className?: string;
+};
+
+export function Sidebar(props: SidebarContentProps) {
+  return (
+    <aside
+      className={cn("w-[240px] flex-shrink-0 hidden lg:block", props.className)}
+    >
+      <div className="sticky top-0 pt-8">
+        {props.header}
+        <div className="flex flex-col border-l-2 border-border">
+          {props.links?.map((link) => (
+            <NavLink
+              key={link.href}
+              href={link.href}
+              className="text-sm py-1.5 pl-4 text-muted-foreground hover:text-foreground border-l-2 ml-[-2px] border-transparent hover:border-foreground transition-colors"
+              activeClassName="text-foreground border-link-foreground"
+            >
+              {link.label}
+            </NavLink>
+          ))}
+        </div>
+      </div>
+    </aside>
+  );
+}

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

@@ -1,5 +1,6 @@
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
+import { ThirdwebMiniLogo } from "app/components/ThirdwebMiniLogo";
 import Link from "next/link";
 import {
   SiDiscord,
@@ -11,7 +12,6 @@ import {
   SiX,
   SiYoutube,
 } from "react-icons/si";
-import { ThirdwebMiniLogo } from "../../../app/components/ThirdwebMiniLogo";
 
 type AppFooterProps = {
   className?: string;

apps/dashboard/src/@/components/color-mode-toggle.tsx

@@ -1,10 +1,10 @@
 "use client";
 
 import { Button } from "@/components/ui/button";
+import { ClientOnly } from "components/ClientOnly/ClientOnly";
 import { Moon, Sun } from "lucide-react";
 import { useTheme } from "next-themes";
 import * as React from "react";
-import { ClientOnly } from "../../components/ClientOnly/ClientOnly";
 import { Skeleton } from "./ui/skeleton";
 
 export function ColorModeToggle() {

apps/dashboard/src/@/components/theme-provider.tsx

@@ -1,9 +1,18 @@
 "use client";
 
-import { ThemeProvider as NextThemesProvider } from "next-themes";
+import { ThemeProvider as NextThemesProvider, useTheme } from "next-themes";
 import type { ThemeProviderProps } from "next-themes/dist/types";
-import * as React from "react";
+import { useEffect } from "react";
 
 export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
   return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
 }
+
+export function useForceDarkTheme() {
+  const { setTheme } = useTheme();
+
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    setTheme("dark");
+  }, [setTheme]);
+}

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

@@ -0,0 +1,47 @@
+import { Highlight } from "prism-react-renderer";
+import React from "react";
+import { cn } from "../../lib/utils";
+import { CopyButton } from "./CopyButton";
+import { Card } from "./card";
+
+interface CodeBlockProps {
+  code: string;
+  language?: string;
+  className?: string;
+  canCopy?: boolean;
+}
+
+export const CodeBlock = ({
+  code,
+  language = "sh",
+  canCopy = true,
+}: CodeBlockProps) => {
+  return (
+    <Highlight code={code} language={language}>
+      {({ className, tokens, getLineProps, getTokenProps }) => (
+        <Card className={className}>
+          {canCopy && (
+            <CopyButton text={code} className="float-right p-2 m-2" />
+          )}
+
+          <div
+            className={cn(
+              "block font-mono text-sm whitespace-pre-wrap p-4 overflow-auto",
+              className,
+            )}
+          >
+            {tokens.map((line, i) => (
+              // biome-ignore lint/suspicious/noArrayIndexKey: index IS the key here
+              <div {...getLineProps({ line, key: i })} key={i}>
+                {line.map((token, key) => (
+                  // biome-ignore lint/suspicious/noArrayIndexKey: index IS the key here
+                  <span {...getTokenProps({ token, key })} key={key} />
+                ))}
+              </div>
+            ))}
+          </div>
+        </Card>
+      )}
+    </Highlight>
+  );
+};

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

@@ -10,9 +10,9 @@ import {
   AlertDialogTrigger,
 } from "@/components/ui/alert-dialog";
 import type { buttonVariants } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
 import type { VariantProps } from "class-variance-authority";
 import type React from "react";
-import { cn } from "../../lib/utils";
 
 export interface ConfirmationDialogProps
   extends VariantProps<typeof buttonVariants> {

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { cn } from "../../lib/utils";
+import { cn } from "@/lib/utils";
 import { CopyTextButton } from "./CopyTextButton";
 
 export function CopyAddressButton(props: {

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

@@ -1,8 +1,8 @@
 "use client";
 
+import { cn } from "@/lib/utils";
 import { CheckIcon, CopyIcon } from "lucide-react";
 import { useState } from "react";
-import { cn } from "../../lib/utils";
 import { Button } from "./button";
 import { ToolTipLabel } from "./tooltip";
 

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

@@ -1,8 +1,8 @@
 "use client";
 
+import { cn } from "@/lib/utils";
 import { CheckIcon, CopyIcon } from "lucide-react";
 import { useState } from "react";
-import { cn } from "../../lib/utils";
 import { Button } from "./button";
 import { ToolTipLabel } from "./tooltip";
 
@@ -23,10 +23,15 @@ export function CopyTextButton(props: {
 }) {
   const [isCopied, setIsCopied] = useState(false);
   const copyButton = isCopied ? (
-    <CheckIcon className={cn("size-3 text-green-500", props.iconClassName)} />
+    <CheckIcon
+      className={cn("size-3 text-green-500 shrink-0", props.iconClassName)}
+    />
   ) : (
     <CopyIcon
-      className={cn("size-3 text-muted-foreground", props.iconClassName)}
+      className={cn(
+        "size-3 text-muted-foreground shrink-0",
+        props.iconClassName,
+      )}
     />
   );
 
@@ -36,7 +41,7 @@ export function CopyTextButton(props: {
         variant={props.variant || "outline"}
         aria-label={props.tooltip}
         className={cn(
-          "h-auto w-auto px-2.5 py-1.5 flex gap-2 rounded-lg text-foreground",
+          "h-auto w-auto px-2.5 py-1.5 flex gap-2 rounded-lg text-foreground font-normal",
           props.className,
         )}
         onClick={() => {
@@ -47,13 +52,13 @@ export function CopyTextButton(props: {
       >
         {props.copyIconPosition === "right" ? (
           <>
-            {props.textToShow}
+            <span className="truncate min-w-0"> {props.textToShow} </span>
             {copyButton}
           </>
         ) : (
           <>
             {copyButton}
-            {props.textToShow}
+            <span className="truncate min-w-0"> {props.textToShow} </span>
           </>
         )}
       </Button>

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

@@ -1,7 +1,8 @@
 "use client";
 
+import { useIsomorphicLayoutEffect } from "@/lib/useIsomorphicLayoutEffect";
 import type React from "react";
-import { useLayoutEffect, useRef, useState } from "react";
+import { useRef, useState } from "react";
 
 export function DynamicHeight(props: {
   children: React.ReactNode;
@@ -37,7 +38,7 @@ export function useHeightObserver() {
   const elementRef = useRef<HTMLDivElement>(null);
   const [height, setHeight] = useState<number | undefined>();
 
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     const element = elementRef.current;
     if (!element) {
       return;

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

@@ -0,0 +1,24 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+export type NavButtonProps = {
+  className?: string;
+  activeClassName?: string;
+  href: string;
+};
+
+export function NavLink(props: React.PropsWithChildren<NavButtonProps>) {
+  const pathname = usePathname();
+  const isActive = pathname === props.href;
+  return (
+    <Link
+      href={props.href}
+      className={cn(props.className, isActive && props.activeClassName)}
+    >
+      {props.children}
+    </Link>
+  );
+}

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

@@ -1,7 +1,8 @@
 "use client";
 
+import { useIsomorphicLayoutEffect } from "@/lib/useIsomorphicLayoutEffect";
 import { cn } from "@/lib/utils";
-import { useLayoutEffect, useRef } from "react";
+import { useRef } from "react";
 import styles from "./ScrollShadow.module.css";
 
 export function ScrollShadow(props: {
@@ -17,7 +18,7 @@ export function ScrollShadow(props: {
   const shadowRightEl = useRef<HTMLDivElement>(null);
   const wrapperEl = useRef<HTMLDivElement>(null);
 
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     const content = scrollableEl.current;
     const shadowTop = shadowTopEl.current;
     const shadowBottom = shadowBottomEl.current;

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

@@ -10,7 +10,7 @@ const alertVariants = cva(
       variant: {
         default: "bg-background text-foreground",
         destructive:
-          "bg-destructive/10 border-destructive/50 dark:border-destructive [&>svg]:text-destructive",
+          "bg-destructive/30 border-destructive/50 dark:border-destructive [&>svg]:text-destructive",
         info: "bg-primary/10 border-primary/50 dark:border-primary [&>svg]:text-primary",
         warning:
           "bg-warning/10 border-warning/50 dark:border-warning [&>svg]:text-warning",

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

@@ -44,10 +44,13 @@ export interface ButtonProps
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
+    const btnOnlyProps =
+      Comp === "button" ? { type: "button" as const } : undefined;
     return (
       <Comp
         className={cn(buttonVariants({ variant, size, className }))}
         ref={ref}
+        {...btnOnlyProps}
         {...props}
       />
     );

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

@@ -28,3 +28,19 @@ const Checkbox = React.forwardRef<
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 
 export { Checkbox };
+
+export function CheckboxWithLabel(props: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <label
+      className={cn(
+        "flex gap-2 items-start text-secondary-foreground text-sm cursor-pointer select-none [&>button]:mt-0.5",
+        props.className,
+      )}
+    >
+      {props.children}
+    </label>
+  );
+}

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

@@ -31,14 +31,17 @@ DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
+    dialogOverlayClassName?: string;
+    dialogCloseClassName?: string;
+  }
 >(({ className, children, ...props }, ref) => (
   <DialogPortal>
-    <DialogOverlay />
+    <DialogOverlay className={props.dialogOverlayClassName} />
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed grid w-full max-w-lg gap-4 border bg-background p-6 shadow-lg duration-300 rounded-lg border-border",
+        "fixed grid w-full max-w-lg gap-4 border bg-background p-6 shadow-lg duration-300 rounded-t-xl md:rounded-lg border-border",
         // on mobile - put the dialog at the bottom of the screen, animate - slide up and fade in
         "bottom-0 left-0 right-0",
         "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
@@ -54,7 +57,12 @@ const DialogContent = React.forwardRef<
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+      <DialogPrimitive.Close
+        className={cn(
+          "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",
+          props.dialogCloseClassName,
+        )}
+      >
         <X className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>

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

@@ -0,0 +1,118 @@
+"use client";
+
+import * as React from "react";
+import { Drawer as DrawerPrimitive } from "vaul";
+
+import { cn } from "@/lib/utils";
+
+const Drawer = ({
+  shouldScaleBackground = true,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
+  <DrawerPrimitive.Root
+    shouldScaleBackground={shouldScaleBackground}
+    {...props}
+  />
+);
+Drawer.displayName = "Drawer";
+
+const DrawerTrigger = DrawerPrimitive.Trigger;
+
+const DrawerPortal = DrawerPrimitive.Portal;
+
+const DrawerClose = DrawerPrimitive.Close;
+
+const DrawerOverlay = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Overlay
+    ref={ref}
+    className={cn("fixed inset-0 z-50 bg-black/80", className)}
+    {...props}
+  />
+));
+DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
+
+const DrawerContent = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DrawerPortal>
+    <DrawerOverlay />
+    <DrawerPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
+        className,
+      )}
+      {...props}
+    >
+      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+      {children}
+    </DrawerPrimitive.Content>
+  </DrawerPortal>
+));
+DrawerContent.displayName = "DrawerContent";
+
+const DrawerHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
+    {...props}
+  />
+);
+DrawerHeader.displayName = "DrawerHeader";
+
+const DrawerFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+    {...props}
+  />
+);
+DrawerFooter.displayName = "DrawerFooter";
+
+const DrawerTitle = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className,
+    )}
+    {...props}
+  />
+));
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
+
+const DrawerDescription = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+};

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

@@ -75,7 +75,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         position === "popper" &&
           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
         className,

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

@@ -0,0 +1,29 @@
+"use client";
+
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-foreground data-[state=unchecked]:bg-input",
+      className,
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
+      )}
+    />
+  </SwitchPrimitives.Root>
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+
+export { Switch };

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

@@ -1,6 +1,9 @@
+"use client";
+
+import { useIsomorphicLayoutEffect } from "@/lib/useIsomorphicLayoutEffect";
+import { cn } from "@/lib/utils";
 import Link from "next/link";
-import { useCallback, useLayoutEffect, useRef, useState } from "react";
-import { cn } from "../../lib/utils";
+import { useCallback, useRef, useState } from "react";
 import { ScrollShadow } from "./ScrollShadow/ScrollShadow";
 import { Button } from "./button";
 
@@ -126,7 +129,7 @@ function useUnderline<El extends HTMLElement>() {
     setActiveTabEl(el);
   }, []);
 
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (activeTabEl && containerRef.current && lineRef.current) {
       const containerRect = containerRef.current.getBoundingClientRect();
       const lineEl = lineRef.current;

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

@@ -31,15 +31,24 @@ export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
 
 export function ToolTipLabel(props: {
   children: React.ReactNode;
-  label: string;
+  label: string | undefined;
   rightIcon?: React.ReactNode;
   leftIcon?: React.ReactNode;
 }) {
+  if (!props.label) {
+    return props.children;
+  }
+
   return (
     <TooltipProvider>
       <Tooltip delayDuration={100} disableHoverableContent={true}>
-        <TooltipTrigger asChild>{props.children}</TooltipTrigger>
-        <TooltipContent sideOffset={10}>
+        <TooltipTrigger asChild className="!pointer-events-auto">
+          {props.children}
+        </TooltipTrigger>
+        <TooltipContent
+          sideOffset={10}
+          className="max-w-[300px] leading-relaxed"
+        >
           <div className="p-2 text-sm flex items-center gap-1.5">
             {props.leftIcon}
             {props.label}

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

@@ -1,4 +1,4 @@
-export const LOGGED_IN_ONLY_PATHS = [
+const LOGGED_IN_ONLY_PATHS = [
   // anything that _starts_ with /dashboard is logged in only
   "/dashboard",
   // anything that _starts_ with /cli is logged in only
@@ -6,3 +6,12 @@ export const LOGGED_IN_ONLY_PATHS = [
   "/support",
   // TODO: add any other logged in only paths here
 ];
+
+export function isLoginRequired(pathname: string) {
+  // exceptions from LOGGED_IN_ONLY_PATHS
+  if (pathname.startsWith("/dashboard/connect/playground")) {
+    return false;
+  }
+
+  return LOGGED_IN_ONLY_PATHS.some((path) => pathname.startsWith(path));
+}

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

@@ -0,0 +1,17 @@
+import { toast } from "sonner";
+
+// if browser supports sharing use native sharing - use that, else just copy to clipboard + show toast
+export async function shareLink(_data: ShareData) {
+  const data = { ..._data, url: _data.url || window.location.href };
+
+  if (
+    "canShare" in navigator &&
+    navigator.canShare &&
+    navigator.canShare(data)
+  ) {
+    await navigator.share(data);
+  } else {
+    await navigator.clipboard.writeText(data.url);
+    toast.info("URL copied to clipboard");
+  }
+}

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

@@ -0,0 +1,4 @@
+import { useEffect, useLayoutEffect } from "react";
+
+export const useIsomorphicLayoutEffect =
+  typeof window !== "undefined" ? useLayoutEffect : useEffect;

apps/dashboard/src/@/styles/globals.css

@@ -55,7 +55,7 @@
     --inverted: var(--foreground);
 
     /* bg - colorful */
-    --primary: 215.88 100% 55%;
+    --primary: 221 83% 54%;
     --destructive: 0 62.8% 15%;
     --success: 156.2 71.6% 10%;
     --warning: 40.61deg 96.12% 8%;
@@ -93,23 +93,23 @@
 
 /* shadcn charts */
 @layer base {
-    :root {
-      --chart-1: 12 76% 61%;
-      --chart-2: 173 58% 39%;
-      --chart-3: 197 37% 24%;
-      --chart-4: 43 74% 66%;
-      --chart-5: 27 87% 67%;
-    }
-   
-    .dark {
-      --chart-1: 220 70% 50%;
-      --chart-2: 160 60% 45%;
-      --chart-3: 30 80% 55%;
-      --chart-4: 280 65% 60%;
-      --chart-5: 340 75% 55%;
-    }
+  :root {
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
   }
 
+  .dark {
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
+
 @keyframes skeleton {
   0%,
   100% {

apps/dashboard/src/@3rdweb-sdk/react/cache-keys.ts

@@ -90,8 +90,10 @@ export const engineKeys = {
   health: (instance: string) =>
     [...engineKeys.all, instance, "health"] as const,
   latestVersion: () => [...engineKeys.all, "latestVersion"] as const,
-  metrics: (engineId: string) =>
-    [...engineKeys.all, engineId, "metrics"] as const,
+  systemMetrics: (engineId: string) =>
+    [...engineKeys.all, engineId, "systemMetrics"] as const,
+  queueMetrics: (engineId: string) =>
+    [...engineKeys.all, engineId, "queueMetrics"] as const,
 };
 
 export const contractKeys = {

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

@@ -14,13 +14,22 @@ import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { useCallback, useMemo } from "react";
-import { defineChain } from "thirdweb";
-import { AutoConnect, ConnectButton } from "thirdweb/react";
+import type { Chain } from "thirdweb";
+import { AutoConnect, ConnectButton, useConnectModal } from "thirdweb/react";
+import { getSDKTheme } from "../../../../app/components/sdk-component-theme";
+import { CustomChainRenderer } from "../../../../components/selects/CustomChainRenderer";
+import { mapV4ChainToV5Chain } from "../../../../contexts/map-chains";
+import { useSetIsNetworkConfigModalOpen } from "../../../../hooks/networkConfigModal";
 import { useFavoriteChains } from "../../hooks/useFavoriteChains";
 import { useLoggedInUser } from "../../hooks/useLoggedInUser";
 import { popularChains } from "../popularChains";
 
-export const CustomConnectWallet: React.FC = () => {
+export const CustomConnectWallet = (props: {
+  loginRequired?: boolean;
+  connectButtonClassName?: string;
+}) => {
+  const loginRequired =
+    props.loginRequired === undefined ? true : props.loginRequired;
   const { theme } = useTheme();
   const recentChainsv4 = useRecentlyUsedChains();
   const addRecentlyUsedChainId = useAddRecentlyUsedChainId();
@@ -28,16 +37,16 @@ export const CustomConnectWallet: React.FC = () => {
   const t = theme === "light" ? "light" : "dark";
   const allv4Chains = useSupportedChains();
   const favChainsQuery = useFavoriteChains();
-
+  const setIsNetworkConfigModalOpen = useSetIsNetworkConfigModalOpen();
   const allChains = useMemo(() => {
-    return allv4Chains.map((c) => defineChain(c));
+    return allv4Chains.map(mapV4ChainToV5Chain);
   }, [allv4Chains]);
 
   const chainSections = useMemo(() => {
     return [
       {
         label: "Favorites",
-        chains: favChainsQuery.data.map(defineChain),
+        chains: favChainsQuery.data.map(mapV4ChainToV5Chain),
       },
       {
         label: "Popular",
@@ -45,7 +54,7 @@ export const CustomConnectWallet: React.FC = () => {
       },
       {
         label: "Recent",
-        chains: recentChainsv4.map(defineChain),
+        chains: recentChainsv4.map(mapV4ChainToV5Chain),
       },
     ];
   }, [recentChainsv4, favChainsQuery.data]);
@@ -57,7 +66,7 @@ export const CustomConnectWallet: React.FC = () => {
   if (isLoading) {
     return (
       <>
-        <div className="w-[144px] h-[48px] bg-muted border rounded-lg flex items-center justify-center">
+        <div className="w-[144px] h-[48px] bg-muted border border-border rounded-lg flex items-center justify-center">
           <Spinner className="size-4" />
         </div>
         {/* need autoconnect here so that we actually connect */}
@@ -66,7 +75,7 @@ export const CustomConnectWallet: React.FC = () => {
     );
   }
 
-  if (!isLoggedIn) {
+  if (!isLoggedIn && loginRequired) {
     return (
       <>
         <Button asChild variant="default" className="gap-2" size="lg">
@@ -84,7 +93,7 @@ export const CustomConnectWallet: React.FC = () => {
 
   return (
     <ConnectButton
-      theme={t}
+      theme={getSDKTheme(t)}
       client={thirdwebClient}
       connectModal={{
         privacyPolicyUrl: "/privacy",
@@ -107,6 +116,9 @@ export const CustomConnectWallet: React.FC = () => {
           console.error("Failed to log out", err);
         }
       }}
+      connectButton={{
+        className: props.connectButtonClassName,
+      }}
       chains={allChains}
       detailsModal={{
         networkSelector: {
@@ -114,8 +126,10 @@ export const CustomConnectWallet: React.FC = () => {
           onSwitch(chain) {
             addRecentlyUsedChainId(chain.id);
           },
-          // TODO: bring this back when it works reliably
-          // renderChain: CustomChainRenderer,
+          renderChain: CustomChainRenderer,
+          onCustomClick: () => {
+            setIsNetworkConfigModalOpen(true);
+          },
         },
       }}
     />
@@ -193,6 +207,35 @@ export function ConnectWalletWelcomeScreen(props: {
   );
 }
 
+export function useCustomConnectModal() {
+  const { connect } = useConnectModal();
+  const { theme } = useTheme();
+
+  return useCallback(
+    (options?: { chain?: Chain }) => {
+      return connect({
+        client: thirdwebClient,
+        appMetadata: {
+          name: "thirdweb",
+          logoUrl: "https://thirdweb.com/favicon.ico",
+          url: "https://thirdweb.com",
+        },
+        chain: options?.chain,
+        privacyPolicyUrl: "/privacy",
+        termsOfServiceUrl: "/tos",
+        showThirdwebBranding: false,
+        welcomeScreen: () => (
+          <ConnectWalletWelcomeScreen
+            theme={theme === "light" ? "light" : "dark"}
+          />
+        ),
+        theme: getSDKTheme(theme === "light" ? "light" : "dark"),
+      });
+    },
+    [connect, theme],
+  );
+}
+
 /**
  * A link component extends the `Link` component and adds tracking.
  */

apps/dashboard/src/@3rdweb-sdk/react/components/roles/admin-only.tsx

@@ -2,11 +2,11 @@ import {
   useIsAdmin,
   useIsAdminOrSelf,
 } from "@3rdweb-sdk/react/hooks/useContractRoles";
-import type { ValidContractInstance } from "@thirdweb-dev/sdk";
+import type { ThirdwebContract } from "thirdweb";
 import type { ComponentWithChildren } from "types/component-with-children";
 
 interface AdminOnlyProps {
-  contract?: ValidContractInstance;
+  contract: ThirdwebContract;
   fallback?: JSX.Element;
 }
 
@@ -22,7 +22,9 @@ export const AdminOnly: ComponentWithChildren<AdminOnlyProps> = ({
   return <>{children}</>;
 };
 
-interface AdminOrSelfOnlyProps extends AdminOnlyProps {
+interface AdminOrSelfOnlyProps {
+  contract: ThirdwebContract;
+  fallback?: JSX.Element;
   /**
    * The address of the account to check against
    */

apps/dashboard/src/@3rdweb-sdk/react/components/roles/lister-only.tsx

@@ -1,9 +1,9 @@
 import { useIsLister } from "@3rdweb-sdk/react/hooks/useContractRoles";
-import type { ValidContractInstance } from "@thirdweb-dev/sdk";
+import type { ThirdwebContract } from "thirdweb";
 import type { ComponentWithChildren } from "types/component-with-children";
 
 interface IListerOnlyProps {
-  contract?: ValidContractInstance;
+  contract: ThirdwebContract;
 }
 
 export const ListerOnly: ComponentWithChildren<IListerOnlyProps> = ({

apps/dashboard/src/@3rdweb-sdk/react/components/roles/minter-only.tsx

@@ -1,9 +1,9 @@
 import { useIsMinter } from "@3rdweb-sdk/react/hooks/useContractRoles";
-import type { ValidContractInstance } from "@thirdweb-dev/sdk";
+import type { ThirdwebContract } from "thirdweb";
 import type { ComponentWithChildren } from "types/component-with-children";
 
 interface IMinterOnlyProps {
-  contract?: ValidContractInstance;
+  contract: ThirdwebContract;
 }
 
 export const MinterOnly: ComponentWithChildren<IMinterOnlyProps> = ({

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

@@ -4,9 +4,9 @@ import {
   useQuery,
   useQueryClient,
 } from "@tanstack/react-query";
+import { THIRDWEB_API_HOST } from "constants/urls";
 import type { ChainMetadata } from "thirdweb/chains";
 import invariant from "tiny-invariant";
-import { THIRDWEB_API_HOST } from "../../../constants/urls";
 import { accountKeys, apiKeys, authorizedWallets } from "../cache-keys";
 import { useMutationWithInvalidate } from "./query/useQueryWithNetwork";
 import { useLoggedInUser } from "./useLoggedInUser";
@@ -913,12 +913,7 @@ export function useAuthorizedWallets() {
 export async function fetchChainsFromApi() {
   // always fetch from prod for chains for now
   // TODO: re-visit this
-  const res = await fetch("https://api.thirdweb.com/v1/chains", {
-    method: "GET",
-    headers: {
-      "Content-Type": "application/json",
-    },
-  });
+  const res = await fetch("https://api.thirdweb.com/v1/chains");
   const json = await res.json();
 
   if (json.error) {

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

@@ -1,110 +1,73 @@
-import {
-  type ContractWithRoles,
-  type RolesForContract,
-  useContractType,
-  useRoleMembers,
-} from "@thirdweb-dev/react";
-import type { ValidContractInstance } from "@thirdweb-dev/sdk";
-import { ZERO_ADDRESS } from "thirdweb";
-import { useActiveAccount } from "thirdweb/react";
+import { type ThirdwebContract, ZERO_ADDRESS } from "thirdweb";
+import { hasRole } from "thirdweb/extensions/permissions";
+import { useActiveAccount, useReadContract } from "thirdweb/react";
 import type { RequiredParam } from "utils/types";
 
-function isContractWithRoles(
-  contract: RequiredParam<ValidContractInstance>,
-): contract is ContractWithRoles {
-  if (contract && "roles" in contract) {
-    return true;
-  }
-  return false;
-}
-
-function useIsAccountRole<TContract extends ContractWithRoles>(
-  role: RolesForContract<TContract>[number],
-  contract: RequiredParam<TContract>,
-  account: RequiredParam<string>,
-): boolean {
-  const contractHasRoles = isContractWithRoles(contract);
-  const { data } = useRoleMembers(contract, role);
-
-  if (contractHasRoles === false) {
-    return false;
-  }
-
-  if (data?.includes(ZERO_ADDRESS)) {
-    return true;
-  }
-
-  return !!(account && data?.includes(account));
-}
-
-export function useIsAdmin<TContract extends ValidContractInstance>(
-  contract: RequiredParam<TContract>,
-) {
+export function useIsAdmin(contract: ThirdwebContract) {
   const address = useActiveAccount()?.address;
-  const { data: contractType } = useContractType(contract?.getAddress());
+  const { data: userIsAdmin, isError } = useReadContract(hasRole, {
+    contract,
+    targetAccountAddress: address ?? "",
+    role: "admin",
+    queryOptions: { enabled: !!address },
+  });
 
-  const contractHasRoles = isContractWithRoles(contract);
-  const isAccountRole = useIsAccountRole(
-    "admin",
-    contractHasRoles ? contract : undefined,
-    address,
-  );
-
-  if (contractType === "custom") {
-    return true;
-  }
-  return isAccountRole;
+  // If the request results in an error, it's likely that the contract is a non-thirdweb contract
+  // in that case we return `true` anyway
+  return userIsAdmin || isError;
 }
 
-export function useIsAdminOrSelf<TContract extends ValidContractInstance>(
-  contract: RequiredParam<TContract>,
+export function useIsAdminOrSelf(
+  contract: ThirdwebContract,
   self: RequiredParam<string>,
 ) {
   const address = useActiveAccount()?.address;
-  const { data: contractType } = useContractType(contract?.getAddress());
   const isAdmin = useIsAdmin(contract);
-
   if (address === self) {
     return true;
   }
-  if (contractType === "custom") {
-    return true;
-  }
   return isAdmin;
 }
 
-export function useIsMinter<TContract extends ValidContractInstance>(
-  contract: RequiredParam<TContract>,
-) {
+export function useIsMinter(contract: ThirdwebContract) {
   const address = useActiveAccount()?.address;
-  const { data: contractType } = useContractType(contract?.getAddress());
-  const contractHasRoles = isContractWithRoles(contract);
-  const isAccountRole = useIsAccountRole(
-    "minter",
-    contractHasRoles ? contract : undefined,
-    address,
-  );
+  const userCanMintQuery = useReadContract(hasRole, {
+    contract,
+    targetAccountAddress: address ?? "",
+    role: "minter",
+    queryOptions: { enabled: !!address },
+  });
 
-  if (contractType === "custom") {
-    return true;
-  }
-  return isAccountRole;
+  const anyoneCanMintQuery = useReadContract(hasRole, {
+    contract,
+    targetAccountAddress: ZERO_ADDRESS,
+    role: "minter",
+  });
+
+  // If both requests "error out", we can safely assume that
+  // this is a custom (aka. non-thirdweb) contract
+  // so we just return `true` in that case
+  const isCustomContract =
+    userCanMintQuery.isError && anyoneCanMintQuery.isError;
+
+  return anyoneCanMintQuery.data || userCanMintQuery.data || isCustomContract;
 }
 
-export function useIsLister<TContract extends ValidContractInstance>(
-  contract: RequiredParam<TContract>,
-) {
+// Applicable to Marketplace v3 only
+export function useIsLister(contract: ThirdwebContract) {
   const address = useActiveAccount()?.address;
-  const { data: contractType } = useContractType(contract?.getAddress());
-  const contractHasRoles = isContractWithRoles(contract);
-  const isAccountRole = useIsAccountRole(
-    "lister",
-    contractHasRoles ? contract : undefined,
-    address,
-  );
+  const { data: userCanList } = useReadContract(hasRole, {
+    contract,
+    targetAccountAddress: address ?? "",
+    role: "lister",
+    queryOptions: { enabled: !!address },
+  });
 
-  if (contractType === "custom") {
-    return true;
-  }
-  return isAccountRole;
+  const { data: anyoneCanList } = useReadContract(hasRole, {
+    contract,
+    targetAccountAddress: ZERO_ADDRESS,
+    role: "lister",
+  });
+
+  return anyoneCanList || userCanList;
 }

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

@@ -0,0 +1,54 @@
+import { useQuery } from "@tanstack/react-query";
+import type { ThirdwebContract } from "thirdweb";
+import { getCompilerMetadata } from "thirdweb/contract";
+import { getContractMetadata, name, symbol } from "thirdweb/extensions/common";
+
+/**
+ * Fetch the contract metadata for Dashboard
+ *
+ * If the contract itself doesn't implement the metadata extension,
+ * we try to fall back to:
+ * 1. name(), symbol()
+ * 2. our API endpoint
+ */
+export function useDashboardContractMetadata(contract: ThirdwebContract) {
+  return useQuery(
+    ["contract-metadata-header", contract.chain.id, contract.address],
+    async () => {
+      const [contractMetadata, _name, _symbol, compilerMetadata] =
+        await Promise.all([
+          getContractMetadata({ contract }).catch(() => ({
+            image: "",
+            name: "",
+            symbol: "",
+          })),
+          name({ contract }).catch(() => ""),
+          symbol({ contract }).catch(() => ""),
+          getCompilerMetadata(contract).catch(() => undefined),
+        ]);
+
+      /**
+       * Handle the case where the contract.thirdweb.com endpoint returns a very long name
+       * example url: https://contract.thirdweb.com/metadata/324/0x66E298335c5992d599132582De8eaAF75348e6e6
+       * In that case, we split the solidity name on ":" and take the second part
+       */
+      if (compilerMetadata?.name.includes(":")) {
+        const _name = compilerMetadata.name.split(":")[1];
+        if (_name) {
+          compilerMetadata.name = compilerMetadata.name.split(":")[1];
+        }
+      }
+
+      const contractName =
+        contractMetadata?.name || _name || compilerMetadata?.name || "";
+      const contractSymbol = contractMetadata?.symbol || _symbol || "";
+
+      return {
+        name: contractName,
+        symbol: contractSymbol,
+        image: contractMetadata.image || "",
+        contractType: compilerMetadata?.name || "",
+      };
+    },
+  );
+}

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

@@ -0,0 +1,26 @@
+import { thirdwebClient } from "@/constants/client";
+import { useMutation } from "@tanstack/react-query";
+import { upload } from "thirdweb/storage";
+
+type DashboardUploadOptions = {
+  uploadWithoutDirectory?: boolean;
+  metadata?: Record<string, string>;
+};
+
+export function useDashboardStorageUpload(options?: DashboardUploadOptions) {
+  return useMutation({
+    mutationFn: async (files: Array<File | string>): Promise<string[]> => {
+      const uris = await upload({
+        client: thirdwebClient,
+        files,
+        ...options,
+      });
+      // the upload method in SDK v5 has this logic
+      // that will make it return only a string if you upload only 1 file
+      if (typeof uris === "string") {
+        return [uris];
+      }
+      return uris;
+    },
+  });
+}

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

@@ -1,9 +1,9 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import type { ResultItem } from "components/engine/system-metrics/components/StatusCodes";
 import { THIRDWEB_API_HOST } from "constants/urls";
 import { useState } from "react";
 import { useActiveAccount, useActiveWalletChain } from "thirdweb/react";
 import invariant from "tiny-invariant";
-import type { ResultItem } from "../../../components/engine/system-metrics/components/StatusCodes";
 import { engineKeys } from "../cache-keys";
 import { useMutationWithInvalidate } from "./query/useQueryWithNetwork";
 import { useLoggedInUser } from "./useLoggedInUser";
@@ -126,9 +126,9 @@ export function useEngineSystemHealth(
   instanceUrl: string,
   pollInterval: number | false = false,
 ) {
-  return useQuery(
-    engineKeys.health(instanceUrl),
-    async () => {
+  return useQuery({
+    queryKey: engineKeys.health(instanceUrl),
+    queryFn: async () => {
       const res = await fetch(`${instanceUrl}system/health`, {
         headers: getEngineRequestHeaders(null),
       });
@@ -138,23 +138,57 @@ export function useEngineSystemHealth(
       const json = (await res.json()) as EngineSystemHealth;
       return json;
     },
-    {
-      enabled: !!instanceUrl,
-      refetchInterval: pollInterval,
+    enabled: !!instanceUrl,
+    refetchInterval: pollInterval,
+  });
+}
+
+export interface EngineSystemQueueMetrics {
+  result: {
+    queued: number;
+    pending: number;
+    latency?: {
+      msToSend: { p50: number; p90: number };
+      msToMine: { p50: number; p90: number };
+    };
+  };
+}
+
+export function useEngineQueueMetrics(
+  instanceUrl: string,
+  pollInterval: number | false = false,
+) {
+  const token = useLoggedInUser().user?.jwt ?? null;
+
+  return useQuery({
+    queryKey: engineKeys.queueMetrics(instanceUrl),
+    queryFn: async () => {
+      const res = await fetch(`${instanceUrl}system/queue`, {
+        headers: getEngineRequestHeaders(token),
+      });
+      if (!res.ok) {
+        throw new Error(`Unexpected status ${res.status}: ${await res.text()}`);
+      }
+      return (await res.json()) as EngineSystemQueueMetrics;
     },
-  );
+    enabled: !!instanceUrl && !!token,
+    refetchInterval: pollInterval,
+  });
 }
 
 export function useEngineLatestVersion() {
-  return useQuery(engineKeys.latestVersion(), async () => {
-    const res = await fetch(`${THIRDWEB_API_HOST}/v1/engine/latest-version`, {
-      method: "GET",
-    });
-    if (!res.ok) {
-      throw new Error(`Unexpected status ${res.status}: ${await res.text()}`);
-    }
-    const json = await res.json();
-    return json.data.version as string;
+  return useQuery({
+    queryKey: engineKeys.latestVersion(),
+    queryFn: async () => {
+      const res = await fetch(`${THIRDWEB_API_HOST}/v1/engine/latest-version`, {
+        method: "GET",
+      });
+      if (!res.ok) {
+        throw new Error(`Unexpected status ${res.status}: ${await res.text()}`);
+      }
+      const json = await res.json();
+      return json.data.version as string;
+    },
   });
 }
 
@@ -1462,11 +1496,11 @@ export interface EngineResourceMetrics {
   };
 }
 
-export function useEngineResourceMetrics(engineId: string) {
+export function useEngineSystemMetrics(engineId: string) {
   const [enabled, setEnabled] = useState(true);
 
   return useQuery(
-    engineKeys.metrics(engineId),
+    engineKeys.systemMetrics(engineId),
     async () => {
       const res = await fetch(
         `${THIRDWEB_API_HOST}/v1/engine/${engineId}/metrics`,

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

@@ -1,7 +1,7 @@
 import { useSupportedChains } from "@thirdweb-dev/react";
+import { useFavouriteChainIds } from "app/(dashboard)/(chain)/components/client/star-button";
 import { useMemo } from "react";
 import type { ChainMetadata } from "thirdweb/chains";
-import { useFavouriteChainIds } from "../../../app/(dashboard)/(chain)/components/client/star-button";
 
 export function useFavoriteChains() {
   const allChains = useSupportedChains();

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

@@ -1,12 +1,12 @@
-import { LOGGED_IN_ONLY_PATHS } from "@/constants/auth";
+import { isLoginRequired } from "@/constants/auth";
 import { useQuery } from "@tanstack/react-query";
+import type { EnsureLoginResponse } from "app/api/auth/ensure-login/route";
 import { usePathname, useRouter } from "next/navigation";
 import { useRef } from "react";
 import {
   useActiveAccount,
   useActiveWalletConnectionStatus,
 } from "thirdweb/react";
-import type { EnsureLoginResponse } from "../../../app/api/auth/ensure-login/route";
 
 // define "TW_AUTH_TOKEN" to exist on the window object
 declare global {
@@ -35,12 +35,12 @@ export function useLoggedInUser(): {
     // enabled if:
     // - there is a pathname
     // - we are not already currently connecting
-    // - the pathname is one of the LOGGED_IN_ONLY_PATHS
+    // - the pathname requires login
     enabled:
       !!pathname &&
       connectionStatus !== "connecting" &&
       statusWasEverConnecting.current &&
-      LOGGED_IN_ONLY_PATHS.some((path) => pathname.startsWith(path)),
+      isLoginRequired(pathname),
     // the last "persist", part of the queryKey, is to make sure that we do not cache this query in indexDB
     // convention in v4 of the SDK that we are (ab)using here
     queryKey: ["logged_in_user", connectedAddress, { persist: false }],
@@ -113,7 +113,7 @@ export function useLoggedInUser(): {
   }
 
   // if we are not on a logged in path, we can simply return the connected address
-  if (!LOGGED_IN_ONLY_PATHS.some((path) => pathname.startsWith(path))) {
+  if (!isLoginRequired(pathname)) {
     return {
       isLoading: false,
       isLoggedIn: true,

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

@@ -8,8 +8,8 @@ import type { BasicContract } from "contract-ui/types/types";
 import { getAllMultichainRegistry } from "dashboard-extensions/common/read/getAllMultichainRegistry";
 import { useAllChainsData } from "hooks/chains/allChains";
 import { useSupportedChainsRecord } from "hooks/chains/configureChains";
+import { defineDashboardChain } from "lib/defineDashboardChain";
 import { thirdwebClient } from "lib/thirdweb-client";
-import { defineDashboardChain } from "lib/v5-adapter";
 import { useMemo } from "react";
 import { getContract } from "thirdweb";
 import { polygon } from "thirdweb/chains";
@@ -22,7 +22,8 @@ const MULTICHAIN_REGISTRY_ADDRESS =
 const registryContract = getContract({
   client: thirdwebClient,
   address: MULTICHAIN_REGISTRY_ADDRESS,
-  chain: defineDashboardChain(polygon.id),
+  // eslint-disable-next-line no-restricted-syntax
+  chain: defineDashboardChain(polygon.id, undefined),
 });
 
 function useMultiChainRegContractList(walletAddress?: string) {

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

@@ -1,29 +1,21 @@
-import { useToast } from "@chakra-ui/react";
-import { useSDKChainId } from "@thirdweb-dev/react";
-import type { Split } from "@thirdweb-dev/sdk";
 import type {
   BalanceQueryRequest,
   BalanceQueryResponse,
 } from "pages/api/moralis/balances";
+import { toast } from "sonner";
+import type { ThirdwebContract } from "thirdweb";
+import { distribute, distributeByToken } from "thirdweb/extensions/split";
+import { useSendAndConfirmTransaction } from "thirdweb/react";
 import invariant from "tiny-invariant";
-import { parseErrorToMessage } from "utils/errorParser";
 import { splitsKeys } from "..";
 import {
   useMutationWithInvalidate,
   useQueryWithNetwork,
 } from "./query/useQueryWithNetwork";
 
-export function useSplitData(contract?: Split) {
-  return useQueryWithNetwork(
-    splitsKeys.list(contract?.getAddress()),
-    async () => contract?.getAllRecipients(),
-    {
-      enabled: !!contract,
-    },
-  );
-}
-export function useSplitBalances(contractAddress?: string) {
-  const chainId = useSDKChainId();
+export function useSplitBalances(contract: ThirdwebContract) {
+  const chainId = contract.chain.id;
+  const contractAddress = contract.address;
   const currencies = useQueryWithNetwork(
     splitsKeys.currencies(contractAddress),
     async () => {
@@ -48,72 +40,31 @@ export function useSplitBalances(contractAddress?: string) {
   return currencies;
 }
 
-export function useSplitDistributeFunds(contract?: Split) {
-  const contractAddress = contract?.getAddress();
-  const balances = useSplitBalances(contractAddress);
-  const toast = useToast();
+export function useSplitDistributeFunds(contract: ThirdwebContract) {
+  const contractAddress = contract.address;
+  const balances = useSplitBalances(contract);
+  const { mutateAsync } = useSendAndConfirmTransaction();
 
   return useMutationWithInvalidate(
     async () => {
       invariant(contract, "split contract is not ready");
       invariant(balances.data, "No balances to distribute");
-
       const distributions = (balances.data || [])
         .filter((token) => token.display_balance !== "0.0")
         .map(async (currency) => {
-          if (currency.name === "Native Token") {
-            await contract
-              .distribute()
-              .then(() => {
-                toast({
-                  position: "bottom",
-                  variant: "solid",
-                  title: "Success",
-                  description: `Successfully distributed ${currency.name}`,
-                  status: "success",
-                  duration: 5000,
-                  isClosable: true,
+          const transaction =
+            currency.name === "Native Token"
+              ? distribute({ contract })
+              : distributeByToken({
+                  contract,
+                  tokenAddress: currency.token_address,
                 });
-                return void 0;
-              })
-              .catch((err: unknown) => {
-                toast({
-                  position: "bottom",
-                  variant: "solid",
-                  title: `Error distributing ${currency.name}`,
-                  description: parseErrorToMessage(err),
-                  status: "error",
-                  duration: 9000,
-                  isClosable: true,
-                });
-              });
-          } else {
-            await contract
-              .distributeToken(currency.token_address)
-              .then(() => {
-                toast({
-                  position: "bottom",
-                  variant: "solid",
-                  title: "Success",
-                  description: `Successfully distributed ${currency.name}`,
-                  status: "success",
-                  duration: 5000,
-                  isClosable: true,
-                });
-                return void 0;
-              })
-              .catch((err: unknown) => {
-                toast({
-                  position: "bottom",
-                  variant: "solid",
-                  title: `Error distributing ${currency.name}`,
-                  description: parseErrorToMessage(err),
-                  status: "error",
-                  duration: 9000,
-                  isClosable: true,
-                });
-              });
-          }
+          const promise = mutateAsync(transaction);
+          toast.promise(promise, {
+            success: `Successfully distributed ${currency.name}`,
+            error: `Error distributing ${currency.name}`,
+            loading: "Distributing funds",
+          });
         });
 
       return await Promise.all(distributions);

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

@@ -1,59 +0,0 @@
-import { redirect } from "next/navigation";
-import { getChain } from "../../../utils";
-import { InfoCard } from "../components/server/info-card";
-
-export default async function Page(props: { params: { chain_id: string } }) {
-  const chain = await getChain(props.params.chain_id);
-  const enabled = chain.services.find(
-    (s) => s.service === "account-abstraction",
-  )?.enabled;
-
-  if (!enabled) {
-    redirect(`/${props.params.chain_id}`);
-  }
-
-  return (
-    <div>
-      <InfoCard
-        title="Account Abstraction"
-        links={[
-          {
-            label: "Get Started",
-            href: "/dashboard/connect/account-abstraction",
-          },
-          {
-            label: "Learn More",
-            href: "https://portal.thirdweb.com/connect/account-abstraction/how-it-works",
-          },
-        ]}
-      >
-        <p>
-          Everything you need to leverage account abstraction technology to
-          enable seamless user experiences for your users.
-        </p>
-        <p>
-          You get all the tools to integrate account abstraction into your app.
-          This includes:
-        </p>
-
-        <div className="h-3" />
-
-        <ul className="text-secondary-foreground pl-4 [&_li]:list-disc [&_li]:mb-3 [&_li]:pl-1">
-          <li>
-            Account factory contracts that let you spin up smart accounts for
-            your users
-          </li>
-
-          <li>
-            Bundler, which is the infrastructure needed to process account
-            abstraction transactions (known as User Ops)
-          </li>
-
-          <li>
-            Paymaster, which lets you sponsor transaction fees for your users
-          </li>
-        </ul>
-      </InfoCard>
-    </div>
-  );
-}

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

@@ -0,0 +1,195 @@
+"use client";
+
+import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Button } from "@/components/ui/button";
+import { THIRDWEB_ENGINE_FAUCET_WALLET } from "@/constants/env";
+import { CustomConnectWallet } from "@3rdweb-sdk/react/components/connect-wallet";
+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 { thirdwebClient } from "lib/thirdweb-client";
+import { toast } from "sonner";
+import { toUnits } from "thirdweb";
+import type { ChainMetadata } from "thirdweb/chains";
+import { useActiveAccount, useWalletBalance } from "thirdweb/react";
+
+function formatTime(seconds: number) {
+  const rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
+  const hours = Math.floor(seconds / 3600);
+  const minutes = Math.floor((seconds % 3600) / 60);
+  if (hours > 0) {
+    return rtf.format(+hours, "hour");
+  }
+
+  if (minutes > 0) {
+    return rtf.format(+minutes, "minute");
+  }
+
+  return rtf.format(+seconds, "second");
+}
+
+export function FaucetButton({
+  chain,
+  amount,
+}: {
+  chain: ChainMetadata;
+  amount: string;
+}) {
+  const address = useActiveAccount()?.address;
+  const chainId = chain.chainId;
+  // do not include local overrides for chain pages
+  // eslint-disable-next-line no-restricted-syntax
+  const definedChain = mapV4ChainToV5Chain(chain);
+  const faucetWalletBalanceQuery = useWalletBalance({
+    address: THIRDWEB_ENGINE_FAUCET_WALLET,
+    chain: definedChain,
+    client: thirdwebClient,
+  });
+  const trackEvent = useTrack();
+
+  const queryClient = useQueryClient();
+
+  const claimMutation = useMutation({
+    mutationFn: async () => {
+      trackEvent({
+        category: "faucet",
+        action: "claim",
+        label: "attempt",
+        chain_id: chainId,
+      });
+      const response = await fetch("/api/testnet-faucet/claim", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          chainId: chainId,
+          toAddress: address,
+        }),
+      });
+
+      if (!response.ok) {
+        const data = await response.json();
+        throw new Error(data?.error || "Failed to claim funds");
+      }
+    },
+    onSuccess: () => {
+      trackEvent({
+        category: "faucet",
+        action: "claim",
+        label: "success",
+        chain_id: chainId,
+      });
+    },
+    onError: (error) => {
+      trackEvent({
+        category: "faucet",
+        action: "claim",
+        label: "error",
+        chain_id: chainId,
+        errorMsg: error instanceof Error ? error.message : "Unknown error",
+      });
+    },
+    onSettled: () => {
+      return queryClient.invalidateQueries([
+        "testnet-faucet-can-claim",
+        chainId,
+      ]);
+    },
+  });
+
+  const canClaimFaucetQuery = useQuery({
+    queryKey: ["testnet-faucet-can-claim", chainId],
+    queryFn: async () => {
+      const response = await fetch(
+        `/api/testnet-faucet/can-claim?chainId=${chainId}`,
+      );
+      if (!response.ok) {
+        throw new Error("Failed to get claim status");
+      }
+      const data = (await response.json()) as CanClaimResponseType;
+      return data;
+    },
+  });
+
+  const isFaucetEmpty =
+    faucetWalletBalanceQuery.data !== undefined &&
+    faucetWalletBalanceQuery.data.value < toUnits("1", 17);
+
+  // loading state
+  if (faucetWalletBalanceQuery.isLoading || canClaimFaucetQuery.isLoading) {
+    return (
+      <Button variant="secondary" className="w-full gap-2">
+        Checking Faucet <Spinner className="size-3" />
+      </Button>
+    );
+  }
+
+  // faucet is empty
+  if (isFaucetEmpty) {
+    return (
+      <Button variant="secondary" disabled className="w-full !opacity-100 ">
+        Faucet is empty right now
+      </Button>
+    );
+  }
+
+  // Can not claim
+  if (canClaimFaucetQuery.data && canClaimFaucetQuery.data.canClaim === false) {
+    return (
+      <Button variant="secondary" className="w-full !opacity-100 " disabled>
+        {canClaimFaucetQuery.data.type === "throttle" && (
+          <>
+            Your next claim is available{" "}
+            {formatTime(canClaimFaucetQuery.data.ttlSeconds)}
+          </>
+        )}
+
+        {canClaimFaucetQuery.data.type === "unsupported-chain" &&
+          "Faucet is empty right now"}
+      </Button>
+    );
+  }
+
+  if (!address) {
+    return (
+      <CustomConnectWallet
+        loginRequired={false}
+        connectButtonClassName="!w-full !rounded !bg-primary !text-primary-foreground !px-4 !py-2 !text-sm"
+      />
+    );
+  }
+
+  // eligible to claim and faucet has balance
+  return (
+    <div className="flex flex-col w-full 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.isLoading ? (
+          <>
+            Claiming <Spinner className="size-3" />
+          </>
+        ) : (
+          `Get ${amount} ${chain.nativeCurrency.symbol}`
+        )}
+      </Button>
+
+      {faucetWalletBalanceQuery.data && (
+        <p className="mt-3 text-xs text-secondary-foreground">
+          {Number(faucetWalletBalanceQuery.data.displayValue).toFixed(3)}{" "}
+          {faucetWalletBalanceQuery.data.symbol} left in the faucet
+        </p>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,84 @@
+"use client";
+import { Button } from "@/components/ui/button";
+import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
+import { thirdwebClient } from "@/constants/client";
+import { useTrack } from "hooks/analytics/useTrack";
+import { defineDashboardChain } from "lib/defineDashboardChain";
+import { useTheme } from "next-themes";
+import { PayEmbed } from "thirdweb/react";
+import { getSDKTheme } from "../../../../../../components/sdk-component-theme";
+
+export function PayModalButton(props: { chainId: number; label: string }) {
+  const { theme } = useTheme();
+  const trackEvent = useTrack();
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button
+          variant="primary"
+          className="w-full"
+          onClick={() => {
+            trackEvent({
+              category: "pay",
+              action: "buy",
+              label: "attempt",
+            });
+          }}
+        >
+          {props.label}
+        </Button>
+      </DialogTrigger>
+      <DialogContent
+        className="md:max-w-[360px] p-0 border-none bg-transparent"
+        dialogOverlayClassName="backdrop-blur-lg"
+        dialogCloseClassName="focus:ring-0"
+      >
+        <PayEmbed
+          client={thirdwebClient}
+          theme={getSDKTheme(theme === "dark" ? "dark" : "light")}
+          className="!w-auto"
+          payOptions={{
+            onPurchaseSuccess(info) {
+              if (
+                info.type === "crypto" &&
+                info.status.status !== "NOT_FOUND"
+              ) {
+                trackEvent({
+                  category: "pay",
+                  action: "buy",
+                  label: "success",
+                  type: info.type,
+                  chainId: info.status.quote.toToken.chainId,
+                  tokenAddress: info.status.quote.toToken.tokenAddress,
+                  amount: info.status.quote.toAmount,
+                });
+              }
+
+              if (info.type === "fiat" && info.status.status !== "NOT_FOUND") {
+                trackEvent({
+                  category: "pay",
+                  action: "buy",
+                  label: "success",
+                  type: info.type,
+                  chainId: info.status.quote.toToken.chainId,
+                  tokenAddress: info.status.quote.toToken.tokenAddress,
+                  amount: info.status.quote.estimatedToTokenAmount,
+                });
+              }
+            },
+            prefillBuy: {
+              // Do not include local chain overrides for chain pages
+              // eslint-disable-next-line no-restricted-syntax
+              chain: defineDashboardChain(props.chainId, undefined),
+              allowEdits: {
+                chain: false,
+                amount: true,
+                token: true,
+              },
+            },
+          }}
+        />
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -3,8 +3,9 @@
 import { Spinner } from "@/components/ui/Spinner/Spinner";
 import { Button } from "@/components/ui/button";
 import { ToolTipLabel } from "@/components/ui/tooltip";
-import { cn } from "@/lib/utils";
+import { useCustomConnectModal } from "@3rdweb-sdk/react/components/connect-wallet";
 import { useMutation } from "@tanstack/react-query";
+import { toast } from "sonner";
 import type { Chain } from "thirdweb";
 import {
   useActiveAccount,
@@ -14,56 +15,54 @@ import {
 import { useDebounce } from "use-debounce";
 
 type AddChainToWalletProps = {
-  chain?: Chain;
-  hasBackground?: boolean;
+  chain: Chain;
 };
 
 export const AddChainToWallet: React.FC<AddChainToWalletProps> = (props) => {
-  const address = useActiveAccount()?.address;
+  const account = useActiveAccount();
   const switchChain = useSwitchActiveWalletChain();
   const activeWalletChainId = useActiveWalletChain()?.id;
+  const customConnectModal = useCustomConnectModal();
 
   const switchChainMutation = useMutation({
     mutationFn: async () => {
-      if (!props.chain) {
-        throw new Error("Chain is not defined");
-      }
       await switchChain(props.chain);
     },
   });
 
-  // debounce the loading state to prevent flickering
   const [debouncedLoading] = useDebounce(switchChainMutation.isLoading, 50);
 
-  const buttonContent = (
-    <Button
-      disabled={
-        !address || debouncedLoading || activeWalletChainId === props.chain?.id
-      }
-      className={cn(
-        "w-full md:min-w-40 gap-2",
-        props.hasBackground && "invert dark:invert-0",
-      )}
-      onClick={() => switchChainMutation.mutate()}
-    >
-      <span>Add to wallet</span>
-      {debouncedLoading && <Spinner className="size-3" />}
-    </Button>
-  );
-
-  if (address && activeWalletChainId !== props.chain?.id) {
-    return buttonContent;
-  }
+  const disabled = debouncedLoading || activeWalletChainId === props.chain?.id;
 
   return (
     <ToolTipLabel
       label={
-        activeWalletChainId === props.chain?.id
-          ? "You are already connected to this chain"
-          : "Connect your wallet first"
+        activeWalletChainId === props.chain.id
+          ? "Wallet is already connected to this chain"
+          : undefined
       }
     >
-      <div className="cursor-not-allowed">{buttonContent}</div>
+      <Button
+        disabled={disabled}
+        className="gap-2 w-full"
+        variant="outline"
+        onClick={() => {
+          // Connct directly to this chain
+          if (!account) {
+            return customConnectModal({ chain: props.chain });
+          }
+
+          // switch to this chain
+          const switchPromise = switchChainMutation.mutateAsync();
+          toast.promise(switchPromise, {
+            success: `${props.chain.name} added to wallet`,
+            error: `Failed to add ${props.chain.name} to wallet`,
+          });
+        }}
+      >
+        <span>Add to wallet</span>
+        {debouncedLoading && <Spinner className="size-3" />}
+      </Button>
     </ToolTipLabel>
   );
 };

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { CopyButton } from "@/components/ui/CopyButton";
+import { CopyTextButton } from "@/components/ui/CopyTextButton";
 import { Skeleton } from "@/components/ui/skeleton";
 import { ToolTipLabel } from "@/components/ui/tooltip";
 import { useQuery } from "@tanstack/react-query";
@@ -9,7 +9,7 @@ import { thirdwebClient } from "lib/thirdweb-client";
 import { CircleCheck, XIcon } from "lucide-react";
 import { useState } from "react";
 import { hostnameEndsWith } from "utils/url";
-import { PrimaryInfoItem } from "../../../components/server/primary-info-item";
+import { PrimaryInfoItem } from "../server/primary-info-item";
 
 function useChainStatswithRPC(_rpcUrl: string) {
   const [shouldRefetch, setShouldRefetch] = useState(true);
@@ -79,19 +79,24 @@ export function ChainLiveStats(props: { rpc: string }) {
         }
       >
         <div className="flex items-center gap-1">
-          <div className="text-lg">{new URL(props.rpc).origin}</div>
-          <CopyButton text={new URL(props.rpc).origin} />
+          <CopyTextButton
+            tooltip="Copy RPC URL"
+            textToShow={new URL(props.rpc).origin}
+            textToCopy={props.rpc}
+            copyIconPosition="right"
+            variant="ghost"
+            className="px-2 py-1 -translate-x-2 text-base"
+            iconClassName="size-4"
+          />
         </div>
       </PrimaryInfoItem>
 
       {/* Latency */}
       <PrimaryInfoItem title="RPC Latency" titleIcon={<PulseDot />}>
         {stats.isError ? (
-          <p className="text-lg fade-in-0 animate-in text-destructive-text">
-            N/A
-          </p>
+          <p className="fade-in-0 animate-in text-destructive-text">N/A</p>
         ) : stats.data ? (
-          <p className="text-lg fade-in-0 animate-in">{stats.data.latency}ms</p>
+          <p className="fade-in-0 animate-in">{stats.data.latency}ms</p>
         ) : (
           <div className="flex py-1 h-[28px] w-[70px]">
             <Skeleton className="h-full w-full" />
@@ -102,13 +107,9 @@ export function ChainLiveStats(props: { rpc: string }) {
       {/* Block Height */}
       <PrimaryInfoItem title="Block Height" titleIcon={<PulseDot />}>
         {stats.isError ? (
-          <p className="text-lg fade-in-0 animate-in text-destructive-text">
-            N/A
-          </p>
+          <p className="fade-in-0 animate-in text-destructive-text">N/A</p>
         ) : stats.data ? (
-          <p className="text-lg fade-in-0 animate-in">
-            {stats.data.blockNumber}
-          </p>
+          <p className="fade-in-0 animate-in">{stats.data.blockNumber}</p>
         ) : (
           <div className="flex py-1 h-[28px] w-[140px]">
             <Skeleton className="h-full w-full" />
@@ -122,9 +123,9 @@ export function ChainLiveStats(props: { rpc: string }) {
 function PulseDot() {
   return (
     <ToolTipLabel label={"Live Data"}>
-      <span className="relative flex size-3">
+      <span className="relative flex size-2">
         <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-sky-400 opacity-75" />
-        <span className="relative inline-flex rounded-full size-3 bg-primary" />
+        <span className="relative inline-flex rounded-full size-2 bg-primary" />
       </span>
     </ToolTipLabel>
   );

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

@@ -1,50 +0,0 @@
-"use client";
-
-import { TabLinks } from "@/components/ui/tabs";
-import { useSelectedLayoutSegment } from "next/navigation";
-import { useMemo } from "react";
-import { products } from "../../../../components/server/products";
-import type { ChainSupportedService } from "../../../../types/chain";
-
-export function getEnabledTabs(enabledServices: ChainSupportedService[]) {
-  return products
-    .map((p) => ({
-      name: p.name,
-      segment: p.id === "contracts" ? "" : p.id,
-      serviceId: p.id,
-      icon: p.icon,
-      isEnabled: enabledServices.includes(p.id) ?? false,
-    }))
-    .sort((a, b) => {
-      if (a.isEnabled && !b.isEnabled) {
-        return -1;
-      }
-      if (!a.isEnabled && b.isEnabled) {
-        return 1;
-      }
-      return 0;
-    });
-}
-
-export function ChainPageTabs(props: {
-  chainSlug: string;
-  enabledServices: ChainSupportedService[];
-}) {
-  const layoutSegment = useSelectedLayoutSegment() || "";
-
-  const links = useMemo(() => {
-    return getEnabledTabs(props.enabledServices);
-  }, [props.enabledServices]);
-
-  return (
-    <TabLinks
-      links={links.map((tab) => ({
-        name: tab.name,
-        href: `/${props.chainSlug}/${tab.segment}`,
-        isActive: layoutSegment === tab.segment,
-        isEnabled: tab.isEnabled,
-        icon: tab.icon,
-      }))}
-    />
-  );
-}

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/components/icons/CreditCardIcon.tsx

@@ -0,0 +1,89 @@
+export function CreditCardIcon(props: {
+  bg: string;
+  className?: string;
+}) {
+  return (
+    <svg
+      width={48}
+      height={48}
+      viewBox="0 0 48 48"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      className={props.className}
+    >
+      <rect width={48} height={48} rx={16} fill={props.bg} />
+      <rect
+        x={1}
+        y={1}
+        width={46}
+        height={46}
+        rx={15}
+        stroke="url(#paint0_linear_1315_3638)"
+        strokeOpacity="0.2"
+        strokeWidth={2}
+      />
+      <rect x={5} y={5} width={38} height={38} rx={11} fill={props.bg} />
+      <rect
+        x={5}
+        y={5}
+        width={38}
+        height={38}
+        rx={11}
+        stroke="url(#paint1_linear_1315_3638)"
+        strokeWidth={2}
+      />
+      <path
+        d="M32.3337 22.3333H15.667M23.167 25.6666H19.0003M15.667 20.8333L15.667 27.1666C15.667 28.1 15.667 28.5668 15.8486 28.9233C16.0084 29.2369 16.2634 29.4918 16.577 29.6516C16.9335 29.8333 17.4002 29.8333 18.3337 29.8333L29.667 29.8333C30.6004 29.8333 31.0671 29.8333 31.4236 29.6516C31.7372 29.4918 31.9922 29.2369 32.152 28.9233C32.3337 28.5668 32.3337 28.1 32.3337 27.1666V20.8333C32.3337 19.8999 32.3337 19.4332 32.152 19.0766C31.9922 18.763 31.7372 18.5081 31.4236 18.3483C31.0671 18.1666 30.6004 18.1666 29.667 18.1666L18.3337 18.1666C17.4002 18.1666 16.9335 18.1666 16.577 18.3483C16.2634 18.5081 16.0084 18.763 15.8486 19.0766C15.667 19.4332 15.667 19.8999 15.667 20.8333Z"
+        stroke="url(#paint2_linear_1315_3638)"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_1315_3638"
+          x1="-3.26045"
+          y1="15.4021"
+          x2="45.7807"
+          y2="50.1547"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#F213A4" />
+          <stop offset="0.1517" stopColor="#E011A7" />
+          <stop offset="0.4554" stopColor="#B20DAF" />
+          <stop offset="0.8789" stopColor="#6806BB" />
+          <stop offset={1} stopColor="#5204BF" />
+        </linearGradient>
+        <linearGradient
+          id="paint1_linear_1315_3638"
+          x1="1.28296"
+          y1="16.835"
+          x2="42.1506"
+          y2="45.7956"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#F213A4" />
+          <stop offset="0.1517" stopColor="#E011A7" />
+          <stop offset="0.4554" stopColor="#B20DAF" />
+          <stop offset="0.8789" stopColor="#6806BB" />
+          <stop offset={1} stopColor="#5204BF" />
+        </linearGradient>
+        <linearGradient
+          id="paint2_linear_1315_3638"
+          x1="14.5349"
+          y1="21.9102"
+          x2="27.1676"
+          y2="34.6989"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#F213A4" />
+          <stop offset="0.1517" stopColor="#E011A7" />
+          <stop offset="0.4554" stopColor="#B20DAF" />
+          <stop offset="0.8789" stopColor="#6806BB" />
+          <stop offset={1} stopColor="#5204BF" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+}

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/components/icons/GiftIcon.tsx

@@ -0,0 +1,98 @@
+export function GiftIcon(props: {
+  bg: string;
+  className?: string;
+}) {
+  return (
+    <svg
+      width={48}
+      height={48}
+      viewBox="0 0 48 48"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+    >
+      <rect width={48} height={48} rx={16} fill={props.bg} />
+      <rect
+        x={1}
+        y={1}
+        width={46}
+        height={46}
+        rx={15}
+        stroke="url(#paint0_linear_1214_43510)"
+        strokeOpacity="0.2"
+        strokeWidth={2}
+      />
+      <rect x={5} y={5} width={38} height={38} rx={11} fill={props.bg} />
+      <rect
+        x={5}
+        y={5}
+        width={38}
+        height={38}
+        rx={11}
+        stroke="url(#paint1_linear_1214_43510)"
+        strokeWidth={2}
+      />
+      <g clipPath="url(#clip0_1214_43510)">
+        <path
+          d="M23.9993 19.0001V32.3334M23.9993 19.0001H21.0529C20.6188 19.0001 20.2024 18.8245 19.8955 18.5119C19.5885 18.1994 19.416 17.7754 19.416 17.3334C19.416 16.8914 19.5885 16.4675 19.8955 16.1549C20.2024 15.8423 20.6188 15.6667 21.0529 15.6667C23.3446 15.6667 23.9993 19.0001 23.9993 19.0001ZM23.9993 19.0001H26.9458C27.3799 19.0001 27.7963 18.8245 28.1032 18.5119C28.4102 18.1994 28.5827 17.7754 28.5827 17.3334C28.5827 16.8914 28.4102 16.4675 28.1032 16.1549C27.7963 15.8423 27.3799 15.6667 26.9458 15.6667C24.6541 15.6667 23.9993 19.0001 23.9993 19.0001ZM30.666 23.1667V29.6667C30.666 30.6002 30.666 31.0669 30.4844 31.4234C30.3246 31.737 30.0696 31.992 29.756 32.1518C29.3995 32.3334 28.9328 32.3334 27.9993 32.3334L19.9993 32.3334C19.0659 32.3334 18.5992 32.3334 18.2427 32.1518C17.9291 31.992 17.6741 31.737 17.5143 31.4234C17.3327 31.0669 17.3327 30.6002 17.3327 29.6667V23.1667M15.666 20.3334L15.666 21.8334C15.666 22.3001 15.666 22.5335 15.7568 22.7117C15.8367 22.8685 15.9642 22.996 16.121 23.0759C16.2993 23.1667 16.5326 23.1667 16.9993 23.1667L30.9994 23.1667C31.4661 23.1667 31.6994 23.1667 31.8777 23.0759C32.0345 22.996 32.162 22.8685 32.2419 22.7117C32.3327 22.5335 32.3327 22.3001 32.3327 21.8334V20.3334C32.3327 19.8667 32.3327 19.6333 32.2419 19.4551C32.162 19.2983 32.0345 19.1708 31.8777 19.0909C31.6994 19.0001 31.4661 19.0001 30.9993 19.0001L16.9993 19.0001C16.5326 19.0001 16.2993 19.0001 16.121 19.0909C15.9642 19.1708 15.8367 19.2983 15.7568 19.4551C15.666 19.6333 15.666 19.8667 15.666 20.3334Z"
+          stroke="url(#paint2_linear_1214_43510)"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <defs>
+        <linearGradient
+          id="paint0_linear_1214_43510"
+          x1="-3.26045"
+          y1="15.4021"
+          x2="45.7807"
+          y2="50.1547"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#F213A4" />
+          <stop offset="0.1517" stopColor="#E011A7" />
+          <stop offset="0.4554" stopColor="#B20DAF" />
+          <stop offset="0.8789" stopColor="#6806BB" />
+          <stop offset={1} stopColor="#5204BF" />
+        </linearGradient>
+        <linearGradient
+          id="paint1_linear_1214_43510"
+          x1="1.28296"
+          y1="16.835"
+          x2="42.1506"
+          y2="45.7956"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#F213A4" />
+          <stop offset="0.1517" stopColor="#E011A7" />
+          <stop offset="0.4554" stopColor="#B20DAF" />
+          <stop offset="0.8789" stopColor="#6806BB" />
+          <stop offset={1} stopColor="#5204BF" />
+        </linearGradient>
+        <linearGradient
+          id="paint2_linear_1214_43510"
+          x1="14.5339"
+          y1="21.0147"
+          x2="31.5621"
+          y2="33.0816"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#F213A4" />
+          <stop offset="0.1517" stopColor="#E011A7" />
+          <stop offset="0.4554" stopColor="#B20DAF" />
+          <stop offset="0.8789" stopColor="#6806BB" />
+          <stop offset={1} stopColor="#5204BF" />
+        </linearGradient>
+        <clipPath id="clip0_1214_43510">
+          <rect
+            width={20}
+            height={20}
+            fill="white"
+            transform="translate(14 14)"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}

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

@@ -0,0 +1,61 @@
+import { ExternalLinkIcon } from "lucide-react";
+import Link from "next/link";
+import type { ChainMetadata } from "thirdweb/chains";
+import { ChainIcon } from "../../../../components/server/chain-icon";
+import { PayModalButton } from "../client/PayModal";
+import { CreditCardIcon } from "../icons/CreditCardIcon";
+import { SectionTitle } from "./SectionTitle";
+
+export function BuyFundsSection(props: { chain: ChainMetadata }) {
+  const sanitizedChainName = props.chain.name.replace("Mainnet", "").trim();
+
+  return (
+    <section>
+      <SectionTitle title="Buy Funds" />
+      <div className="border border-border px-4 py-10 rounded-lg flex justify-center">
+        <div className="max-w-[520px] flex flex-col items-center ">
+          <div className="flex items-center">
+            <ChainIcon
+              className="size-12 -mr-2 rounded-full border p-1"
+              iconUrl={props.chain.icon?.url}
+            />
+            <CreditCardIcon
+              bg="hsl(var(--background))"
+              className="size-12 -ml-2"
+            />
+          </div>
+
+          <div className="h-6" />
+
+          <h2 className="text-lg tracking-tight font-semibold text-center px-4">
+            Buy Funds on {sanitizedChainName} using thirdweb Pay
+          </h2>
+
+          <div className="h-2" />
+
+          <p className="text-secondary-foreground text-sm max-w-[520px] text-center px-4">
+            Instantly onramp, bridge & swap into {sanitizedChainName} with any
+            token.
+          </p>
+
+          <div className="h-8" />
+
+          <PayModalButton
+            chainId={props.chain.chainId}
+            label={`Buy Funds on ${sanitizedChainName}`}
+          />
+
+          <div className="h-4" />
+
+          <Link
+            href="https://portal.thirdweb.com/connect/pay/overview"
+            className="inline-flex gap-1.5 items-center text-sm text-secondary-foreground hover:text-foreground"
+          >
+            Learn more about thirdweb Pay{" "}
+            <ExternalLinkIcon className="size-3" />
+          </Link>
+        </div>
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +1,52 @@
+import { CopyTextButton } from "@/components/ui/CopyTextButton";
+import { ExternalLinkIcon } from "lucide-react";
+import Link from "next/link";
+import React from "react";
+import type { ChainMetadata } from "thirdweb/chains";
+import { ChainLiveStats } from "../client/live-stats";
+import { SectionTitle } from "./SectionTitle";
+import { PrimaryInfoItem } from "./primary-info-item";
+
+export function ChainOverviewSection(props: { chain: ChainMetadata }) {
+  const { chain } = props;
+  return (
+    <section>
+      <SectionTitle title="Chain Overview" />
+      <div className="grid grid-cols-1 gap-6 lg:gap-8 md:grid-cols-2 lg:grid-cols-3 border rounded-lg p-4 md:p-6">
+        {/* Info */}
+        {chain.infoURL && (
+          <PrimaryInfoItem title="Info">
+            <Link
+              href={chain.infoURL}
+              target="_blank"
+              className="inline-flex items-center gap-1.5 hover:text-link-foreground"
+            >
+              {new URL(chain.infoURL).hostname}
+              <ExternalLinkIcon className="size-4" />
+            </Link>
+          </PrimaryInfoItem>
+        )}
+
+        {/* Chain Id */}
+        <PrimaryInfoItem title="Chain ID">
+          <CopyTextButton
+            textToCopy={chain.chainId.toString()}
+            textToShow={chain.chainId.toString()}
+            tooltip="Copy Chain ID"
+            variant="ghost"
+            className="-translate-x-2 py-1 px-2 text-base"
+            iconClassName="size-4"
+            copyIconPosition="right"
+          />
+        </PrimaryInfoItem>
+
+        {/* Native token */}
+        <PrimaryInfoItem title="Native Token">
+          {chain.nativeCurrency.name} ({chain.nativeCurrency.symbol})
+        </PrimaryInfoItem>
+
+        {chain.rpc[0] && <ChainLiveStats rpc={chain.rpc[0]} />}
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +1,30 @@
+import { Button } from "@/components/ui/button";
+import { ExternalLinkIcon } from "lucide-react";
+import Link from "next/link";
+import { SectionTitle } from "./SectionTitle";
+
+export function ClaimChainSection() {
+  return (
+    <section>
+      <SectionTitle title="Claim Chain" />
+      <div className="border p-4 rounded-lg">
+        <p className="mb-1"> This chain page is unclaimed </p>
+        <p className="text-secondary-foreground text-sm mb-5">
+          Are you the owner of this ecosystem? Claim this page to add additional
+          information on this page to help your developers get started!
+        </p>
+
+        <Button variant="outline" asChild>
+          <Link
+            className="gap-2"
+            href="https://share.hsforms.com/1o01TyfsZRAao2eCrzuXSVgea58c"
+            target="_blank"
+          >
+            <span>Claim Chain</span>
+            <ExternalLinkIcon className="size-4 -mt-[3px]" />
+          </Link>
+        </Button>
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +1,48 @@
+import type { ChainMetadata } from "thirdweb/chains";
+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();
+
+  return (
+    <section>
+      <SectionTitle title="Faucet" />
+      <div className="border border-border px-4 py-10 rounded-lg flex justify-center">
+        <div className="max-w-[520px] w-full flex flex-col items-center ">
+          <div className="flex items-center">
+            <ChainIcon
+              className="size-12 -mr-2 rounded-full border p-1"
+              iconUrl={props.chain.icon?.url}
+            />
+            <GiftIcon bg="hsl(var(--background))" className="size-12 -ml-2" />
+          </div>
+
+          <div className="h-6" />
+
+          <h2 className="text-lg tracking-tight font-semibold text-center px-4">
+            {sanitizedChainName} Faucet
+          </h2>
+
+          <div className="h-2" />
+
+          <p className="text-secondary-foreground text-sm max-w-[520px] text-center px-4">
+            Get free {chain.nativeCurrency.symbol} fast and reliably.{" "}
+            {amountToGive} {chain.nativeCurrency.symbol}/day.
+          </p>
+
+          <div className="h-8" />
+
+          <FaucetButton chain={chain} amount={amountToGive} />
+        </div>
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +1,5 @@
+export function SectionTitle(props: { title: string }) {
+  return (
+    <h2 className="text-xl tracking-tight mb-2 font-semibold">{props.title}</h2>
+  );
+}

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

@@ -0,0 +1,53 @@
+import { CircleCheckIcon } from "lucide-react";
+import Link from "next/link";
+import { products } from "../../../../components/server/products";
+import type { ChainMetadataWithServices } from "../../../../types/chain";
+import { SectionTitle } from "./SectionTitle";
+
+export function SupportedProductsSection(props: {
+  services: ChainMetadataWithServices["services"];
+}) {
+  const enabledProducts = products.filter((product) => {
+    return props.services.find(
+      (service) => service.service === product.id && service.enabled,
+    );
+  });
+
+  if (enabledProducts.length === 0) {
+    return null;
+  }
+
+  return (
+    <section>
+      <SectionTitle title="thirdweb Products" />
+      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
+        {enabledProducts.map((product) => {
+          return (
+            <div
+              key={product.id}
+              className="border rounded-lg p-4 flex gap-3 relative hover:bg-secondary transition-colors duration-300 pr-8"
+            >
+              <CircleCheckIcon className="size-5 text-success-text absolute top-4 right-4" />
+              <product.icon className="size-5 shrink-0 mt-0.5" />
+              <div>
+                <h3 className="font-medium mb-1.5">
+                  <Link
+                    href={product.link}
+                    className="before:absolute before:inset-0"
+                    target="_blank"
+                  >
+                    {" "}
+                    {product.name}{" "}
+                  </Link>
+                </h3>
+                <p className="text-sm text-secondary-foreground">
+                  {product.description}
+                </p>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +1,67 @@
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Button } from "@/components/ui/button";
+import Link from "next/link";
+import type { ChainMetadata } from "thirdweb/chains";
+import { mapV4ChainToV5Chain } from "../../../../../../../contexts/map-chains";
+import { ChainIcon } from "../../../../components/server/chain-icon";
+import { AddChainToWallet } from "../client/add-chain-to-wallet";
+
+type ChainHeaderProps = {
+  headerImageUrl?: string;
+  logoUrl?: string;
+  chain: ChainMetadata;
+};
+
+// TODO: improve the behavior when clicking "Get started with thirdweb", currently just redirects to the dashboard
+
+export function ChainHeader(props: ChainHeaderProps) {
+  return (
+    // force the banner image to be 4:1 aspect ratio and full-width on mobile devices
+    <div className="flex flex-col">
+      {!props.headerImageUrl && <div className="h-8 md:hidden" />}
+
+      <AspectRatio
+        ratio={props.headerImageUrl ? 4 : 8}
+        className="border-b border-border -mx-4 lg:-mx-6"
+      >
+        {props.headerImageUrl && (
+          // eslint-disable-next-line @next/next/no-img-element
+          <img
+            src={props.headerImageUrl}
+            alt=""
+            className="object-cover object-center h-full w-full"
+          />
+        )}
+      </AspectRatio>
+
+      {/* below header */}
+      <div className="relative flex flex-row justify-end items-end">
+        {/* chain logo */}
+
+        <ChainIcon
+          iconUrl={props.logoUrl}
+          className="p-2 lg:p-4 absolute top-0 left-0 size-20 lg:size-36 rounded-full bg-background -translate-y-[50%] overflow-hidden border border-border"
+        />
+
+        {/* action group */}
+        <div className="pt-3 lg:pt-6">
+          {/* Desktop only */}
+          <div className="hidden lg:flex flex-row gap-2">
+            <AddChainToWallet
+              chain={
+                // Do not include chain overrides for chain pages
+                // eslint-disable-next-line no-restricted-syntax
+                mapV4ChainToV5Chain(props.chain)
+              }
+            />
+            <Button variant="primary" asChild>
+              <Link href="https://thirdweb.com/dashboard" target="_blank">
+                Get started with thirdweb
+              </Link>
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -11,36 +11,33 @@ export type ChainCTAProps = {
 
 export function ChainCTA(props: ChainCTAProps) {
   return (
-    <div className="container">
-      <div
-        className="w-full overflow-hidden rounded-xl shadow-lg bg-cover bg-center bg-no-repeat"
-        style={{
-          backgroundImage: `url(${props.backgroundImageUrl})`,
-        }}
-      >
-        <div className="grid items-center justify-center gap-6 bg-gradient-to-r from-accent/0 to-accent/0 p-8 sm:p-12 md:grid-cols-[1fr_auto] md:gap-12 lg:p-16">
-          <div className="space-y-4 text-center md:text-left">
-            <h2 className="text-3xl font-bold tracking-tighter text-white sm:text-4xl md:text-5xl">
-              {props.title}
-            </h2>
-            {props.description && (
-              <p className="max-w-[600px] md:text-lg text-white">
-                {props.description}
-              </p>
-            )}
-          </div>
-          <Button asChild size="lg" className="invert dark:invert-0">
-            <Link
-              href={props.buttonLink}
-              prefetch={false}
-              target={
-                props.buttonLink.startsWith("http") ? "_blank" : undefined
-              }
-            >
-              {props.buttonText}
-            </Link>
-          </Button>
+    <div
+      className="bg-cover bg-center bg-no-repeat rounded-xl border border-border overflow-hidden"
+      style={{
+        backgroundImage: `url(${props.backgroundImageUrl})`,
+      }}
+    >
+      <div className="grid items-center justify-center gap-6 p-8 md:grid-cols-[1fr_auto] md:gap-12 bg-gradient-to-r from-background to-background/90">
+        <div className="space-y-4 text-center md:text-left">
+          <h2 className="text-2xl md:text-3xl font-bold tracking-tighter text-foreground md:max-w-[85%]">
+            {props.title}
+          </h2>
+          {props.description && (
+            <p className="max-w-[600px] text-secondary-foreground leading-relaxed text-sm md:text-base">
+              {props.description}
+            </p>
+          )}
         </div>
+        <Button asChild>
+          <Link
+            href={props.buttonLink}
+            prefetch={false}
+            target={props.buttonLink.startsWith("http") ? "_blank" : undefined}
+            className="font-semibold"
+          >
+            {props.buttonText}
+          </Link>
+        </Button>
       </div>
     </div>
   );

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

@@ -1,22 +1,22 @@
 import { ExternalLinkIcon } from "lucide-react";
 import Link from "next/link";
 import type { ChainMetadataWithServices } from "../../../../types/chain";
+import { SectionTitle } from "./SectionTitle";
 
 export function ExplorersSection(props: {
   explorers: NonNullable<ChainMetadataWithServices["explorers"]>;
 }) {
   return (
-    <div>
-      <h2 className="text-base text-muted-foreground mb-2 font-medium">
-        Explorers
-      </h2>
+    <section>
+      <SectionTitle title="Explorers" />
       <div className="grid grid-cols-1 gap-3 md:gap-4 md:grid-cols-2 lg:grid-cols-3">
         {props.explorers.map((explorer) => {
           return (
             <div
               key={explorer.url}
-              className="p-4 border rounded-xl relative bg-secondary hover:bg-muted"
+              className="p-4 border rounded-xl relative hover:bg-secondary"
             >
+              <ExternalLinkIcon className="size-4 absolute top-4 right-4 text-muted-foreground" />
               <h3 className="mb-1 text-base font-semibold capitalize">
                 {explorer.name}
               </h3>
@@ -29,11 +29,10 @@ export function ExplorersSection(props: {
                   ? explorer.url.slice(0, -1)
                   : explorer.url}
               </Link>
-              <ExternalLinkIcon className="size-4 absolute top-4 right-4 text-muted-foreground" />
             </div>
           );
         })}
       </div>
-    </div>
+    </section>
   );
 }

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

@@ -1,44 +0,0 @@
-import { ExternalLinkIcon } from "lucide-react";
-import Link from "next/link";
-
-export function FaucetsSection(props: { faucets: readonly string[] }) {
-  return (
-    <div>
-      <h2 className="text-base text-muted-foreground mb-2 font-medium">
-        Faucets
-      </h2>
-      <div className="grid grid-cols-1 gap-3 md:gap-4 md:grid-cols-2 lg:grid-cols-3">
-        {props.faucets.map((faucet) => {
-          const url = new URL(faucet);
-          const hostnameSplit = url.hostname.split(".");
-          const tld = hostnameSplit.pop();
-          const domain = hostnameSplit.pop();
-          const displayTitle = `${domain}.${tld}`;
-          let displayUrl = url.port + url.hostname + url.pathname;
-          displayUrl = displayUrl.endsWith("/")
-            ? displayUrl.slice(0, -1)
-            : displayUrl;
-
-          return (
-            <div
-              key={faucet}
-              className="p-4 border rounded-xl relative bg-secondary hover:bg-muted"
-            >
-              <h3 className="mb-1 text-base font-semibold capitalize">
-                {displayTitle}
-              </h3>
-              <Link
-                href={faucet}
-                target="_blank"
-                className="text-sm flex gap-1.5 items-center before:absolute before:inset-0 before:z-0 text-muted-foreground"
-              >
-                {displayUrl}
-              </Link>
-              <ExternalLinkIcon className="size-4 absolute top-4 right-4 text-muted-foreground" />
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-}

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

@@ -1,41 +0,0 @@
-import { Button } from "@/components/ui/button";
-import { ExternalLinkIcon } from "lucide-react";
-import Link from "next/link";
-import type React from "react";
-
-export function InfoCard(props: {
-  title: string;
-  links?: { label: string; href: string }[];
-  children: React.ReactNode;
-}) {
-  return (
-    <div className="border rounded-xl px-4 py-4 bg-secondary relative">
-      <h2 className="text-xl font-semibold tracking-tight mb-4">
-        {props.title}
-      </h2>
-
-      <div className="[&_p]:mb-3 [&_p]:text-secondary-foreground max-w-[1000px]">
-        {props.children}
-      </div>
-
-      {props.links && (
-        <div className="flex flex-col lg:flex-row mt-7 gap-3">
-          {props.links.map((link) => {
-            return (
-              <Button asChild variant="outline" key={link.label}>
-                <Link
-                  href={link.href}
-                  className="items-center gap-2"
-                  target="_blank"
-                >
-                  {link.label}{" "}
-                  <ExternalLinkIcon className="size-3 text-muted-foreground" />
-                </Link>
-              </Button>
-            );
-          })}
-        </div>
-      )}
-    </div>
-  );
-}

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

@@ -4,14 +4,14 @@ export function PrimaryInfoItem(props: {
   children: React.ReactNode;
 }) {
   return (
-    <section className="border-b pb-4 lg:pb-6">
+    <div>
       <div className="flex items-center gap-2">
-        <h2 className="text-base text-muted-foreground font-medium">
+        <h3 className="text-base text-muted-foreground font-medium">
           {props.title}
-        </h2>
+        </h3>
         {props.titleIcon}
       </div>
       {props.children}
-    </section>
+    </div>
   );
 }

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

@@ -1,104 +0,0 @@
-import Link from "next/link";
-import { redirect } from "next/navigation";
-import { FaReact } from "react-icons/fa";
-import { FaUnity } from "react-icons/fa6";
-import { SiDotnet, SiSolidity, SiTypescript } from "react-icons/si";
-import { getChain } from "../../../utils";
-import { InfoCard } from "../components/server/info-card";
-
-type SDKInfo = {
-  name: string;
-  href: string;
-  icon: React.FC<{ className?: string }>;
-};
-
-const sdks: SDKInfo[] = [
-  {
-    name: "TypeScript",
-    href: "https://portal.thirdweb.com/typescript/v5",
-    icon: SiTypescript,
-  },
-  {
-    name: "React",
-    href: "https://portal.thirdweb.com/typescript/v5/react",
-    icon: FaReact,
-  },
-  {
-    name: "React Native",
-    href: "https://portal.thirdweb.com/typescript/v5/react-native",
-    icon: FaReact,
-  },
-  {
-    name: "Unity",
-    href: "https://portal.thirdweb.com/unity",
-    icon: FaUnity,
-  },
-  {
-    name: "Solidity",
-    href: "https://portal.thirdweb.com/contracts/build/overview",
-    icon: SiSolidity,
-  },
-  {
-    name: ".NET SDK",
-    href: "https://portal.thirdweb.com/dotnet",
-    icon: SiDotnet,
-  },
-];
-
-export default async function Page(props: { params: { chain_id: string } }) {
-  const chain = await getChain(props.params.chain_id);
-  const enabled = chain.services.find(
-    (s) => s.service === "connect-sdk",
-  )?.enabled;
-
-  if (!enabled) {
-    redirect(`/${props.params.chain_id}`);
-  }
-
-  return (
-    <div>
-      <InfoCard
-        title="Connect SDK"
-        links={[
-          {
-            label: "Learn More",
-            href: "https://portal.thirdweb.com/connect",
-          },
-        ]}
-      >
-        <p>
-          Connect is the complete toolkit for connecting every user to your
-          application.
-        </p>
-        <p>
-          It features customizable onboarding flows, self-custodial in-app
-          wallets, account abstraction, onramps, and more.
-        </p>
-      </InfoCard>
-
-      <div className="h-10" />
-
-      <h3 className="text-foreground text-3xl tracking-tighter font-semibold">
-        Get Started
-      </h3>
-
-      <div className="h-3" />
-
-      <div className="grid gap-3 md:gap-4 grid-cols-1 md:grid-cols-3 lg:grid-cols-4">
-        {sdks.map((sdk) => {
-          return (
-            <Link
-              key={sdk.name}
-              href={sdk.href}
-              target="_blank"
-              className="border p-4 bg-secondary rounded-lg hover:bg-muted font-medium flex items-center gap-3"
-            >
-              <sdk.icon className="size-5 text-muted-foreground" />
-              {sdk.name}
-            </Link>
-          );
-        })}
-      </div>
-    </div>
-  );
-}

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

@@ -1,35 +0,0 @@
-import { redirect } from "next/navigation";
-import { getChain } from "../../../utils";
-import { InfoCard } from "../components/server/info-card";
-
-export default async function Page(props: { params: { chain_id: string } }) {
-  const chain = await getChain(props.params.chain_id);
-  const enabled = chain.services.find((s) => s.service === "engine")?.enabled;
-
-  if (!enabled) {
-    redirect(`/${props.params.chain_id}`);
-  }
-
-  return (
-    <div>
-      <InfoCard
-        title="thirdweb Engine"
-        links={[
-          {
-            label: "Setup Engine Instance",
-            href: "/dashboard/engine",
-          },
-          {
-            label: "Learn More",
-            href: "https://portal.thirdweb.com/engine",
-          },
-        ]}
-      >
-        <p>
-          thirdweb Engine is a backend HTTP server that reads, writes, and
-          deploys contracts at production scale.
-        </p>
-      </InfoCard>
-    </div>
-  );
-}

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/faucet/components/SpinWheel.tsx

@@ -1,205 +0,0 @@
-"use client";
-
-import { CopyTextButton } from "@/components/ui/CopyTextButton";
-import { Button } from "@/components/ui/button";
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog";
-import { Skeleton } from "@/components/ui/skeleton";
-import { THIRDWEB_ENGINE_FAUCET_WALLET } from "@/constants/env";
-import { CustomConnectWallet } from "@3rdweb-sdk/react/components/connect-wallet";
-import { useMutation } from "@tanstack/react-query";
-import type { ChainMetadataWithServices } from "app/(dashboard)/(chain)/types/chain";
-import { thirdwebClient } from "lib/thirdweb-client";
-import { useRouter } from "next/navigation";
-import Confetti from "react-confetti";
-import { toast } from "sonner";
-import { type ISpinWheelProps, SpinWheel } from "spin-wheel-game";
-import { defineChain, toUnits } from "thirdweb";
-import { useActiveAccount, useWalletBalance } from "thirdweb/react";
-
-const segments = [
-  { segmentText: "Come back tomorrow", segColor: "#f771c9" }, // Mid-dark, optimized for dark mode
-  { segmentText: "0.1", segColor: "#f65ac0" }, // Lightest, optimized for dark mode
-  { segmentText: "Come back tomorrow", segColor: "#f542b7" }, // Slightly darker, optimized
-  { segmentText: "0.01", segColor: "#f32bae" }, // Mid-light, optimized for dark mode
-  { segmentText: "0.05", segColor: "#f213a5" }, // Mid, optimized for dark mode
-  { segmentText: "0.01", segColor: "#da1195" }, // Mid-dark, optimized for dark mode
-  { segmentText: "0.05", segColor: "#c20f84" }, // Darker, optimized for dark mode
-  { segmentText: "0.01", segColor: "#a90d73" }, // Even darker, optimized
-  { segmentText: "0.05", segColor: "#910b63" }, // Near darkest, optimized for dark mode
-  { segmentText: "0.01", segColor: "#790a53" }, // Lightest, optimized for dark mode
-  { segmentText: "0.05", segColor: "#610842" }, // Slightly darker, optimized
-  { segmentText: "0.01", segColor: "#490632" }, // Mid-light, optimized for dark mode
-];
-
-function formatTime(seconds: number) {
-  const rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
-
-  const hours = Math.floor(seconds / 3600);
-  const minutes = Math.floor((seconds % 3600) / 60);
-
-  if (hours > 0) {
-    return rtf.format(+hours, "hour");
-  }
-
-  if (minutes > 0) {
-    return rtf.format(+minutes, "minute");
-  }
-
-  return rtf.format(+seconds, "second");
-}
-
-export function TestnetSpinWheel({
-  chain,
-  ttlSeconds,
-}: {
-  chain: ChainMetadataWithServices;
-  ttlSeconds: number;
-}) {
-  const address = useActiveAccount()?.address;
-  const chainId = chain.chainId;
-  const definedChain = defineChain(chainId);
-  const { data: evmBalance, isLoading } = useWalletBalance({
-    address: THIRDWEB_ENGINE_FAUCET_WALLET,
-    chain: definedChain,
-    client: thirdwebClient,
-  });
-  const router = useRouter();
-
-  const claimMutation = useMutation({
-    mutationFn: async (result: string) => {
-      const amount = result === "Come back tomorrow" ? "0.01" : result;
-      const requestBody = {
-        chainId: chainId,
-        toAddress: address,
-        amount: amount,
-      };
-
-      const response = await fetch("/api/testnet-faucet/claim", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify(requestBody),
-      });
-
-      if (!response.ok) {
-        const error = await response.json();
-        throw error.error;
-      }
-    },
-    onError: async (error: string) => {
-      toast.error(error);
-    },
-    onSuccess: () => {
-      router.refresh();
-      const successMessage =
-        claimMutation.variables === "Come back tomorrow"
-          ? "You're not lucky today, but don't worry you got 0.01 💜"
-          : `${claimMutation.variables} ${chain?.nativeCurrency?.name} sent to ${address}`;
-      toast.success(successMessage);
-    },
-  });
-
-  const isFaucetEmpty =
-    evmBalance?.value !== undefined && evmBalance.value < toUnits("1", 17);
-
-  const faucetMessage = isFaucetEmpty ? (
-    <div>
-      <p>
-        There is no {chain.nativeCurrency.symbol} available. Please send funds
-        to the following address:
-      </p>
-      <div className="h-2" />
-      <CopyTextButton
-        textToCopy={THIRDWEB_ENGINE_FAUCET_WALLET}
-        textToShow={THIRDWEB_ENGINE_FAUCET_WALLET}
-        tooltip="Copy"
-        className="text-lg -translate-x-2 py-0.5"
-        copyIconPosition="right"
-      />
-    </div>
-  ) : (
-    <p>You may claim {chain.nativeCurrency.symbol} once every 24 hours.</p>
-  );
-
-  const claimButtonCta =
-    ttlSeconds > 0
-      ? `Your next claim is available ${formatTime(ttlSeconds)}`
-      : `Spin for ${chain.nativeCurrency.symbol}`;
-  const closeButtonCta = ttlSeconds > 0 ? "Done" : "Close";
-
-  const spinWheelProps: ISpinWheelProps = {
-    segments,
-    onFinished: claimMutation.mutateAsync,
-    primaryColor: "black",
-    contrastColor: "white",
-    buttonText: "💜",
-    isOnlyOnce: false,
-    size: 290,
-    // Used to randomize result.
-    upDuration: Math.random() * 100 + 100,
-    downDuration: 600,
-    arrowLocation: "top",
-    showTextOnSpin: false,
-    isSpinSound: false,
-  };
-
-  if (!address) return <CustomConnectWallet />;
-
-  return (
-    <>
-      {isLoading ? (
-        <Skeleton className="h-20" />
-      ) : (
-        <>
-          <div className="mb-3">{faucetMessage}</div>
-          <Dialog>
-            <DialogTrigger asChild>
-              {!isFaucetEmpty && (
-                <Button className="min-w-48" disabled={ttlSeconds > 0}>
-                  {claimButtonCta}
-                </Button>
-              )}
-            </DialogTrigger>
-            <DialogContent className="w-auto h-fit max-w-none">
-              {claimMutation.isSuccess && (
-                <Confetti className="w-full h-full" />
-              )}
-              <DialogHeader>
-                <DialogTitle>
-                  Spin to claim {chain.nativeCurrency.symbol} on {chain.name}
-                </DialogTitle>
-                <DialogDescription>
-                  <p className="py-2">
-                    Click the wheel to get your claim amount.
-                  </p>
-                  <div className="p-4">
-                    <SpinWheel {...spinWheelProps} />
-                  </div>
-                </DialogDescription>
-              </DialogHeader>
-              <DialogFooter className="flex justify-between">
-                <DialogClose asChild>
-                  <Button variant="outline">
-                    <span className="text-muted-foreground">
-                      {closeButtonCta}
-                    </span>
-                  </Button>
-                </DialogClose>
-              </DialogFooter>
-            </DialogContent>
-          </Dialog>
-        </>
-      )}
-    </>
-  );
-}

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

@@ -1,94 +0,0 @@
-import { CopyTextButton } from "@/components/ui/CopyTextButton";
-import { THIRDWEB_ENGINE_FAUCET_WALLET } from "@/constants/env";
-import { ClientOnly } from "components/ClientOnly/ClientOnly";
-import { getIpAddress } from "lib/ip";
-import { cacheTtl } from "lib/redis";
-import { redirect } from "next/navigation";
-import type { Metadata } from "next/types";
-import { getChain } from "../../../utils";
-import { InfoCard } from "../components/server/info-card";
-import { TestnetSpinWheel } from "./components/SpinWheel";
-
-export async function generateMetadata({
-  params,
-}: { params: { chain_id: string } }): Promise<Metadata> {
-  const chain = await getChain(params.chain_id);
-  const sanitizedChainName = chain.name.replace("Mainnet", "").trim();
-
-  return {
-    title: `thirdweb ${sanitizedChainName} faucet`,
-    description: `Get ${chain.nativeCurrency.symbol} testnet funds on ${chain.name}. Powered by thirdweb.`,
-  };
-}
-
-export default async function Page(props: { params: { chain_id: string } }) {
-  const chain = await getChain(props.params.chain_id);
-
-  if (!chain.testnet) {
-    redirect(`/${props.params.chain_id}`);
-  }
-
-  // Check eligibilty.
-  const ipAddress = getIpAddress();
-  const cacheKey = `testnet-faucet:${chain.chainId}:${ipAddress}`;
-  const ttlSeconds = await cacheTtl(cacheKey);
-
-  return (
-    <>
-      <div className="items-center">
-        <h3 className="mb-3 text-lg font-semibold"> Faucet </h3>
-        <ClientOnly ssr={null}>
-          <TestnetSpinWheel chain={chain} ttlSeconds={ttlSeconds} />
-        </ClientOnly>
-
-        <div className="h-10" />
-
-        <InfoCard title="Resources">
-          <h3 className="mb-2 text-lg font-semibold">What is a faucet?</h3>
-          <p>
-            An testnet faucet is an online service that provides free testnet
-            currency to web3 app and blockchain developers. This allows them to
-            experiment with and test smart contracts and decentralized
-            applications (dApps) on EVM testnets like {chain.name} without using
-            real cryptocurrency.
-          </p>
-
-          <h2>How often can I claim from the faucet?</h2>
-          <p>You may claim funds once per testnet chain every 24 hours.</p>
-
-          <h3 className="mb-2 text-lg font-semibold">
-            How can I refill the faucet?
-          </h3>
-          <p>Please send funds the following address:</p>
-          <div>
-            <CopyTextButton
-              textToCopy={THIRDWEB_ENGINE_FAUCET_WALLET}
-              textToShow={THIRDWEB_ENGINE_FAUCET_WALLET}
-              tooltip="Copy"
-              copyIconPosition="right"
-              className="mb-2"
-            />
-          </div>
-
-          <h3 className="mb-2 text-lg font-semibold">
-            How does the faucet work?
-          </h3>
-          <p>
-            When you request testnet funds, a multi-chain backend wallet
-            transfers a small amount of {chain.nativeCurrency.symbol} on{" "}
-            {chain.name} with{" "}
-            <a
-              href="https://thirdweb.com/engine"
-              target="_blank"
-              className="underline"
-              rel="noreferrer"
-            >
-              thirdweb Engine
-            </a>
-            .
-          </p>
-        </InfoCard>
-      </div>
-    </>
-  );
-}

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

@@ -1,36 +1,23 @@
-import { CopyTextButton } from "@/components/ui/CopyTextButton";
-import { Badge } from "@/components/ui/badge";
+import { BurgerMenuButton } from "@/components/blocks/BurgerMenuButton";
+import { Sidebar } from "@/components/blocks/Sidebar";
 import { Button } from "@/components/ui/button";
-import { Separator } from "@/components/ui/separator";
-import { cn } from "@/lib/utils";
-import {
-  ArrowLeftIcon,
-  CircleAlertIcon,
-  ExternalLinkIcon,
-  TicketCheckIcon,
-} from "lucide-react";
+import { ArrowLeftIcon, TicketCheckIcon } from "lucide-react";
 import type { Metadata } from "next";
 import Link from "next/link";
 import { redirect } from "next/navigation";
-import { defineChain } from "thirdweb";
+import { mapV4ChainToV5Chain } from "../../../../../contexts/map-chains";
 import { StarButton } from "../../components/client/star-button";
-import { ChainIcon } from "../../components/server/chain-icon";
 import { getChain, getChainMetadata } from "../../utils";
 import { AddChainToWallet } from "./components/client/add-chain-to-wallet";
-import { ChainPageTabs } from "./components/client/tabs";
-import { ChainCTA } from "./components/server/cta-card";
-import { ExplorersSection } from "./components/server/explorer-section";
-import { PrimaryInfoItem } from "./components/server/primary-info-item";
+import { ChainHeader } from "./components/server/chain-header";
 
-export async function generateMetadata(
-  { params }: { params: { chain_id: string } },
-  // parent: ResolvingMetadata,
-): Promise<Metadata> {
-  // read route params
+// TODO: improve the behavior when clicking "Get started with thirdweb", currently just redirects to the dashboard
+
+export async function generateMetadata({
+  params,
+}: { params: { chain_id: string } }): Promise<Metadata> {
   const chain = await getChain(params.chain_id);
-
   const sanitizedChainName = chain.name.replace("Mainnet", "").trim();
-
   const title = `${sanitizedChainName}: RPC and Chain Settings`;
 
   const description = `Use the best ${sanitizedChainName} RPC and add to your wallet. Discover the chain ID, native token, explorers, and ${
@@ -53,226 +40,137 @@ export default async function ChainPageLayout({
 }) {
   const chain = await getChain(params.chain_id);
 
-  // Enable faucet for all testnet chains.
-  if (chain.testnet) {
-    chain.services = [
-      ...chain.services,
-      {
-        service: "faucet",
-        enabled: true,
-      },
-    ];
-  }
-
   if (params.chain_id !== chain.slug) {
     redirect(chain.slug);
   }
+
   const chainMetadata = await getChainMetadata(chain.chainId);
-  // true if we *have* chainMetadata for the chain
-  const isVerified = !!chainMetadata;
-  const isDeprecated = chain.status === "deprecated";
+
+  const sidebarLinks = [
+    {
+      href: `/${chain.slug}`,
+      label: "Overview",
+    },
+    {
+      href: `/${chain.slug}/popular`,
+      label: "Popular Contracts",
+    },
+  ];
 
   return (
-    <>
-      {isDeprecated && (
-        <>
-          <div className="bg-destructive">
-            <div className="container py-4 flex flex-row items-center gap-4 text-white">
-              <CircleAlertIcon className="size-6 flex-shrink-0" />
-              <h3 className="font-semibold">
-                This chain has been marked as deprecated. Some or all services
-                may no longer function.
-              </h3>
-            </div>
+    <div className="container flex flex-row h-full">
+      <Sidebar
+        header={
+          <div className="flex items-center gap-1.5 mb-5 flex-wrap">
+            <Link
+              href="/chainlist"
+              className="text-secondary-foreground hover:text-foreground text-sm"
+            >
+              Chainlist
+            </Link>
+            <span className="text-secondary-foreground text-sm"> / </span>
+            <Link href={`/${chain.slug}`} className="text-foreground text-sm">
+              {chain.name.replace("Mainnet", "")}
+            </Link>
           </div>
-          <Separator />
-        </>
-      )}
-      <section className="flex flex-col h-full gap-8">
-        {/* Header */}
-        <header
-          className={cn(
-            "py-6 md:py-8 border-b relative overflow-hidden",
-            !chainMetadata?.gasSponsored && !isVerified && "md:pb-2",
-            chainMetadata?.headerImgUrl && "md:py-10",
+        }
+        links={sidebarLinks}
+      />
+
+      <div className="flex flex-col w-full lg:px-6 lg:border-x pb-10">
+        {/* Icon + Background */}
+        <ChainHeader
+          headerImageUrl={chainMetadata?.headerImgUrl}
+          logoUrl={chain.icon?.url}
+          chain={chain}
+        />
+
+        <div className="flex lg:hidden justify-end">
+          <BurgerMenuButton
+            links={sidebarLinks}
+            footer={
+              <div className="mt-5 border-t pt-6 pb-2">
+                <Link
+                  href="/chainlist"
+                  className="px-2 text-sm flex justify-start gap-2 items-center text-secondary-foreground hover:text-foreground"
+                >
+                  <ArrowLeftIcon className="size-4" />
+                  View all chains
+                </Link>
+              </div>
+            }
+          />
+        </div>
+
+        <div className="h-4 md:h-8" />
+
+        <div className="flex flex-col gap-3 md:gap-2">
+          {/* Gas Sponsored badge - Mobile */}
+          {chainMetadata?.gasSponsored && (
+            <div className="md:hidden flex">
+              <GasSponseredBadge />
+            </div>
           )}
-        >
-          {/* header background image shenanigans */}
-          <div className="absolute top-0 left-0 right-0 bottom-0 -z-10">
-            <div
-              className="absolute top-0 left-0 right-0 bottom-0 bg-cover bg-center bg-no-repeat bg-secondary"
-              style={
-                chainMetadata?.headerImgUrl
-                  ? {
-                      backgroundImage: `url(${chainMetadata.headerImgUrl})`,
-                    }
-                  : undefined
-              }
+
+          {/* Chain name */}
+          <div className="flex flex-row gap-1.5 items-center">
+            <h1 className="text-2xl font-semibold lg:text-3xl lg:font-semibold tracking-tight">
+              {chain.name}
+            </h1>
+
+            {/* Favorite */}
+            <StarButton
+              chainId={chain.chainId}
+              iconClassName="size-5"
+              className="p-1"
             />
-            <div className="absolute top-0 left-0 right-0 bottom-0 bg-ba bg-gradient-to-b from-black/25 to-black/0 shadow-inner" />
-          </div>
 
-          {/* end header shaningans */}
-          <div className="container flex flex-col md:flex-row justify-between md:items-center">
-            <div className="flex flex-col gap-2 md:gap-6">
-              <Link
-                href="/chainlist"
-                className={cn(
-                  "text-foreground mt-4 inline-flex items-center gap-1",
-                  // if we have a header image always light text
-                  chainMetadata?.headerImgUrl && "text-white",
-                )}
-              >
-                <ArrowLeftIcon className="size-5" />
-                Chainlist
-              </Link>
-
-              <div className="flex gap-3 md:gap-5 items-center">
-                {chain.icon?.url && (
-                  <div
-                    className={cn(
-                      "bg-secondary p-2 border rounded-full overflow-hidden",
-                    )}
-                  >
-                    <ChainIcon
-                      iconUrl={chain.icon.url}
-                      className={cn(
-                        "size-14 md:size-18 rounded-full",
-                        // if we it's "mantle" chain, invert the icon in dark mode
-                        chain.chainId === 5000 && "dark:invert",
-                      )}
-                    />
-                  </div>
-                )}
-
-                {/* Chain Name */}
-                <h1
-                  className={cn(
-                    "font-semibold tracking-tighter text-4xl md:text-6xl",
-                    // if we have a header image always light text
-                    chainMetadata?.headerImgUrl && "text-white",
-                  )}
-                >
-                  {chain.name}
-                </h1>
-                <StarButton chainId={chain.chainId} variant="secondary" />
+            {/* Gas Sponsored badge - Desktop */}
+            {chainMetadata?.gasSponsored && (
+              <div className="hidden md:block">
+                <GasSponseredBadge />
               </div>
-
-              <div className="flex flex-row gap-2 md:gap-4 items-center h-8 mb-4 md:mb-6">
-                {chainMetadata?.gasSponsored && (
-                  <Badge
-                    variant="secondary"
-                    className="text-accent-foreground pointer-events-none flex flex-row items-center h-full gap-1.5 border border-border"
-                  >
-                    <TicketCheckIcon className="size-5" />
-                    <span className="font-bold text-xs uppercase">
-                      gas sponsored
-                    </span>
-                  </Badge>
-                )}
-              </div>
-            </div>
-            <div className="flex flex-row md:flex-col gap-4">
-              <AddChainToWallet
-                chain={defineChain(chain)}
-                hasBackground={!!chainMetadata?.headerImgUrl}
-              />
-              {isVerified ? null : (
-                <Button
-                  className="w-full md:min-w-40"
-                  variant="outline"
-                  asChild
-                >
-                  <Link
-                    className="gap-2"
-                    href="https://share.hsforms.com/1o01TyfsZRAao2eCrzuXSVgea58c"
-                    target="_blank"
-                  >
-                    <span>Claim this chain</span>
-                    <ExternalLinkIcon className="size-3" />
-                  </Link>
-                </Button>
-              )}
-            </div>
-          </div>
-        </header>
-
-        {chainMetadata?.cta && <ChainCTA {...chainMetadata.cta} />}
-
-        <main className="container pb-20 flex-1">
-          {/* About section */}
-          {chainMetadata?.about && (
-            <>
-              <div className="border rounded-xl px-4 py-4 bg-card relative">
-                <h2 className="text-xl font-semibold tracking-tight mb-4">
-                  About
-                </h2>
-
-                <div className="[&_p]:mb-3 [&_p]:text-card-foreground">
-                  <pre className="text-wrap font-sans">
-                    {chainMetadata.about}
-                  </pre>
-                </div>
-              </div>
-              <div className="h-8" />
-            </>
-          )}
-          {/* Chain Overview */}
-          <div className="flex flex-col gap-10 pt-2">
-            {/* Info Grid */}
-            <div className="grid grid-cols-1 gap-4 lg:gap-6 md:grid-cols-2 lg:grid-cols-3">
-              {/* Info */}
-              {chain.infoURL && (
-                <PrimaryInfoItem title="Info">
-                  <div className="flex items-center gap-1.5 hover:text-primary">
-                    <Link
-                      href={chain.infoURL}
-                      target="_blank"
-                      className="text-lg"
-                    >
-                      {new URL(chain.infoURL).hostname}
-                    </Link>
-                    <ExternalLinkIcon className="size-4" />
-                  </div>
-                </PrimaryInfoItem>
-              )}
-
-              {/* Chain Id */}
-              <PrimaryInfoItem title="Chain ID">
-                <CopyTextButton
-                  textToCopy={chain.chainId.toString()}
-                  textToShow={chain.chainId.toString()}
-                  tooltip="Copy Chain ID"
-                  variant="ghost"
-                  className="text-lg -translate-x-2 py-0.5"
-                  copyIconPosition="right"
-                />
-              </PrimaryInfoItem>
-
-              {/* Native token */}
-              <PrimaryInfoItem title="Native Token">
-                <div className="text-lg">
-                  {chain.nativeCurrency.name} ({chain.nativeCurrency.symbol})
-                </div>
-              </PrimaryInfoItem>
-            </div>
-
-            {/* Explorers */}
-            {chain.explorers && chain.explorers.length > 0 && (
-              <ExplorersSection explorers={chain.explorers} />
             )}
           </div>
-          <div className="h-14" />
-          <ChainPageTabs
-            chainSlug={params.chain_id}
-            enabledServices={chain.services
-              .filter((s) => s.enabled)
-              .map((s) => s.service)}
-          />
-          <div className="h-8" />
-          <div>{children}</div>
-        </main>
-      </section>
-    </>
+
+          {/* description */}
+          {chainMetadata?.about && (
+            <p className="text-secondary-foreground text-sm lg:text-base mb-2">
+              {chainMetadata.about}
+            </p>
+          )}
+
+          {/* mobile action row */}
+          <div className="sm:hidden w-full">
+            <div className="grid grid-cols-2 gap-2">
+              <AddChainToWallet
+                chain={
+                  // Do not include chain overrides for chain pages
+                  // eslint-disable-next-line no-restricted-syntax
+                  mapV4ChainToV5Chain(chain)
+                }
+              />
+              <Button variant="primary">
+                <Link href="https://thirdweb.com/dashboard" target="_blank">
+                  Get started
+                </Link>
+              </Button>
+            </div>
+          </div>
+        </div>
+
+        <div className="h-8" />
+        {children}
+      </div>
+    </div>
+  );
+}
+
+function GasSponseredBadge() {
+  return (
+    <div className="flex items-center gap-2 rounded-full text-[hsl(334,81.12%,69.65%)] bg-[hsla(335,57%,51%,0.2)] px-2.5 py-1">
+      <TicketCheckIcon className="size-4" />
+      <span className="font-medium text-xs">Gas Sponsored</span>
+    </div>
   );
 }

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

@@ -1,166 +1,97 @@
-import { ChevronRight, ShieldCheckIcon } from "lucide-react";
-import Image from "next/image";
+import { Button } from "@/components/ui/button";
+import { fetchTopContracts } from "lib/search";
+import { ArrowRightIcon, CircleAlertIcon } from "lucide-react";
 import Link from "next/link";
-import {
-  type SortBy,
-  type TimeRange,
-  fetchTopContracts,
-} from "../../../../../lib/search";
 import { TrendingContractSection } from "../../../trending/components/trending-table";
-import { getChain } from "../../utils";
-import { InfoCard } from "./components/server/info-card";
-import twPublisherImage from "./tw-publisher.png";
-
-type ContractCardInfo = {
-  name: string;
-  description: string;
-  href: string;
-};
-
-// currently the metadata is hardcoded - TODO:fetch it
-
-const popularContracts: ContractCardInfo[] = [
-  {
-    name: "NFT Drop",
-    description: "Release collection of unique NFTs for a set price",
-    href: "/thirdweb.eth/DropERC721",
-  },
-  {
-    name: "NFT Collection",
-    description: "Create a collection of unique NFTs",
-    href: "/thirdweb.eth/TokenERC721",
-  },
-  {
-    name: "Edition Drop",
-    description: "Release ERC1155 tokens for a set price",
-    href: "/thirdweb.eth/DropERC1155",
-  },
-  {
-    name: "Token",
-    description: "Create cryptocurrency compliant with ERC20 standard",
-    href: "/thirdweb.eth/TokenERC20",
-  },
-  {
-    name: "Edition",
-    description: "Create editions of ERC1155 tokens",
-    href: "/thirdweb.eth/TokenERC1155",
-  },
-];
+import { getChain, getChainMetadata } from "../../utils";
+import { BuyFundsSection } from "./components/server/BuyFundsSection";
+import { ChainOverviewSection } from "./components/server/ChainOverviewSection";
+import { ClaimChainSection } from "./components/server/ClaimChainSection";
+import { FaucetSection } from "./components/server/FaucetSection";
+import { SupportedProductsSection } from "./components/server/SupportedProductsSection";
+import { ChainCTA } from "./components/server/cta-card";
+import { ExplorersSection } from "./components/server/explorer-section";
 
 export default async function Page(props: {
   params: { chain_id: string };
-  searchParams: { timeRange?: TimeRange; page?: number; sortBy?: SortBy };
 }) {
   const chain = await getChain(props.params.chain_id);
+  const chainMetadata = await getChainMetadata(chain.chainId);
+  const isDeprecated = chain.status === "deprecated";
+
   const topContracts = await fetchTopContracts({
     chainId: chain.chainId,
-    timeRange: props.searchParams.timeRange,
-    page: props.searchParams.page,
-    sortBy: props.searchParams.sortBy,
+    perPage: 3,
+    timeRange: "month",
   });
 
   return (
-    <div>
-      <div className="h-4" />
-
-      {topContracts.length > 0 && (
-        <>
-          <div className="flex flex-col gap-4">
-            <h3 className="text-foreground text-2xl tracking-tighter font-semibold">
-              Popular Contracts on {chain.name.split(" ")[0]}
-            </h3>
-            <TrendingContractSection
-              topContracts={topContracts}
-              chainId={chain.chainId}
-              searchParams={props.searchParams}
-            />
-          </div>
-
-          <div className="h-10" />
-        </>
+    <div className="flex flex-col gap-10">
+      {/* Custom CTA */}
+      {(chainMetadata?.cta?.title || chainMetadata?.cta?.description) && (
+        <ChainCTA {...chainMetadata.cta} />
       )}
 
-      <div className="flex items-center justify-between">
-        <h3 className="text-foreground text-2xl tracking-tighter font-semibold">
-          Deploy Contracts on {chain.name.split(" ")[0]}
-        </h3>
-        <Link
-          href="/explore"
-          className="text-link-foreground inline-flex items-center gap-1 text-base hover:text-foreground font-medium"
-        >
-          View All
-          <ChevronRight className="size-5" />
-        </Link>
-      </div>
+      {/* Deprecated Alert */}
+      {isDeprecated && (
+        <section className="bg-destructive rounded-lg text-destructive-foreground border border-destructive-foreground/20">
+          <div className="container py-4 flex flex-row items-center gap-4">
+            <CircleAlertIcon className="size-6 flex-shrink-0" />
+            <h3 className="font-medium">
+              This chain has been marked as deprecated. Some or all services may
+              no longer function.
+            </h3>
+          </div>
+        </section>
+      )}
 
-      <div className="h-3" />
+      {/* Buy Funds */}
+      {chain.services.find((c) => c.service === "pay" && c.enabled) && (
+        <BuyFundsSection chain={chain} />
+      )}
 
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 md:gap-4">
-        {popularContracts.map((c) => {
-          return (
-            <ContractCard
-              key={c.name}
-              name={c.name}
-              description={c.description}
-              href={c.href}
-            />
-          );
-        })}
-      </div>
+      {/* Faucet */}
+      {chain.testnet && <FaucetSection chain={chain} />}
 
-      <div className="h-10" />
+      {/* Chain Overview */}
+      <ChainOverviewSection chain={chain} />
 
-      <InfoCard
-        title="thirdweb Contracts"
-        links={[
-          {
-            label: "Learn More",
-            href: "https://portal.thirdweb.com/contracts",
-          },
-        ]}
-      >
-        <p>End-to-end tools for smart contract development</p>
-        <p>
-          Trusted, modular smart contracts that can be deployed securely on any
-          EVM chain
-        </p>
-      </InfoCard>
-    </div>
-  );
-}
-
-function ContractCard(props: ContractCardInfo) {
-  return (
-    <div className="border bg-secondary rounded-xl p-4 hover:bg-muted relative flex flex-col h-full shadow-sm min-h-[200px]">
-      <div className="text-success-text flex items-center gap-1 mb-4 text-sm font-medium">
-        <ShieldCheckIcon className="size-4 text-success-text" />
-        Audited
-      </div>
-
-      <h3 className="text-lg tracking-tight font-semibold text-foreground mb-1">
-        <Link
-          href={props.href}
-          className="before:absolute before:inset-0 before:z-0"
-        >
-          {props.name}
-        </Link>
-      </h3>
-
-      <p className="text-base text-muted-foreground mb-5">
-        {props.description}
-      </p>
-
-      <Link
-        className="inline-flex items-center gap-1.5 z-10 relative mt-auto text-muted-foreground hover:text-foreground"
-        href="/thirdweb.eth"
-      >
-        <Image
-          src={twPublisherImage}
-          alt="thirdweb.eth"
-          className="size-4 rounded-full"
-        />
-        <p className="text-sm">thirdweb.eth</p>
-      </Link>
+      {/* Explorers */}
+      {chain.explorers && chain.explorers.length > 0 && (
+        <ExplorersSection explorers={chain.explorers} />
+      )}
+
+      {topContracts.length > 0 && (
+        <section>
+          <div className="mb-3 flex items-center justify-between">
+            <h2 className="text-xl tracking-tight font-semibold">
+              Popular Contracts
+            </h2>
+            <Button asChild variant="outline">
+              <Link
+                href={`/${chain.slug}/popular`}
+                className="flex gap-2 items-center"
+              >
+                See All
+                <ArrowRightIcon className="size-4" />
+              </Link>
+            </Button>
+          </div>
+          <TrendingContractSection
+            topContracts={topContracts}
+            chainId={chain.chainId}
+            showPagination={false}
+            searchParams={undefined}
+          />
+        </section>
+      )}
+
+      {chain.services.filter((s) => s.enabled).length > 0 && (
+        <SupportedProductsSection services={chain.services} />
+      )}
+
+      {/* Claim Chain */}
+      {!chainMetadata && <ClaimChainSection />}
     </div>
   );
 }

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

@@ -1,26 +0,0 @@
-"use client";
-
-import { thirdwebClient } from "@/constants/client";
-import { useTheme } from "next-themes";
-import { useMemo } from "react";
-import { defineChain } from "thirdweb";
-import { PayEmbed } from "thirdweb/react";
-
-export function CustomPayEmbed(props: { chainId: number }) {
-  const { resolvedTheme } = useTheme();
-  const theme = resolvedTheme === "dark" ? "dark" : "light";
-  const chain = useMemo(() => defineChain(props.chainId), [props.chainId]);
-  return (
-    <PayEmbed
-      client={thirdwebClient}
-      connectOptions={{ chain }}
-      theme={theme}
-      payOptions={{
-        prefillBuy: {
-          chain,
-          allowEdits: { chain: false, amount: true, token: true },
-        },
-      }}
-    />
-  );
-}

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

@@ -1,34 +0,0 @@
-import { redirect } from "next/navigation";
-import { getChain } from "../../../utils";
-import { InfoCard } from "../components/server/info-card";
-import { CustomPayEmbed } from "./components/pay-embed.client";
-
-export default async function Page(props: { params: { chain_id: string } }) {
-  const chain = await getChain(props.params.chain_id);
-  const enabled = chain.services.find((s) => s.service === "pay")?.enabled;
-
-  if (!enabled) {
-    redirect(`/${props.params.chain_id}`);
-  }
-
-  return (
-    <div className="pb-20 flex flex-col xl:flex-row gap-8">
-      <CustomPayEmbed chainId={chain.chainId} />
-      <InfoCard
-        title="thirdweb Pay"
-        links={[
-          {
-            label: "Get Started",
-            href: "https://portal.thirdweb.com/connect/pay/overview",
-          },
-        ]}
-      >
-        <p>
-          thirdweb Pay allows your users to purchase cryptocurrencies and
-          execute transactions with their credit/debit card, or with any token
-          via cross-chain routing.
-        </p>
-      </InfoCard>
-    </div>
-  );
-}

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

@@ -0,0 +1,54 @@
+import { type SortBy, fetchTopContracts } from "lib/search";
+import { CircleAlertIcon } from "lucide-react";
+import React from "react";
+import { TrendingContractSection } from "../../../../trending/components/trending-table";
+import { getChain } from "../../../utils";
+
+// we're using searchParams here - use dynamic rendering
+export const dynamic = "force-dynamic";
+
+export default async function Page(props: {
+  params: { chain_id: string };
+  searchParams: { page?: number; sortBy?: SortBy };
+}) {
+  const chain = await getChain(props.params.chain_id);
+  const topContracts = await fetchTopContracts({
+    chainId: chain.chainId,
+    page: props.searchParams.page,
+    sortBy: props.searchParams.sortBy,
+    perPage: 15,
+    timeRange: "month",
+  });
+
+  return (
+    <section className="mt-2">
+      <h2 className="text-2xl tracking-tighter font-semibold mb-2">
+        Popular Contracts
+      </h2>
+
+      <p className="text-sm text-secondary-foreground">
+        Explore contracts on Ethereum and sort them by your preferred metrics
+      </p>
+
+      <div className="h-8" />
+
+      {topContracts.length > 0 && (
+        <TrendingContractSection
+          topContracts={topContracts}
+          chainId={chain.chainId}
+          searchParams={props.searchParams}
+          showPagination={true}
+        />
+      )}
+
+      {topContracts.length === 0 && (
+        <div className="text-secondary-foreground text-lg flex border rounded-lg h-[200px] border-border items-center justify-center">
+          <div className="flex items-center gap-2">
+            <CircleAlertIcon className="size-5 text-destructive-text" />
+            No contracts found
+          </div>
+        </div>
+      )}
+    </section>
+  );
+}

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

@@ -1,43 +0,0 @@
-import { redirect } from "next/navigation";
-import { getChain } from "../../../utils";
-import { InfoCard } from "../components/server/info-card";
-import { ChainLiveStats } from "./components/client/live-stats";
-
-export default async function Page(props: { params: { chain_id: string } }) {
-  const chain = await getChain(props.params.chain_id);
-  const enabled = chain.services.find((s) => s.service === "rpc-edge")?.enabled;
-
-  if (!enabled) {
-    redirect(`/${props.params.chain_id}`);
-  }
-
-  return (
-    <div className="pb-20">
-      <InfoCard
-        title="thirdweb RPC Edge"
-        links={[
-          {
-            label: "Learn More",
-            href: "https://portal.thirdweb.com/infrastructure/rpc-edge/overview",
-          },
-        ]}
-      >
-        <p>
-          Remote Procedure Call (RPC) Edge provides reliable access to querying
-          data and interacting with the blockchain through global edge RPCs
-        </p>
-
-        <p>
-          By default, thirdweb provides publicly available RPCs for over 1000+
-          EVM Networks
-        </p>
-      </InfoCard>
-
-      {chain.rpc[0] && (
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 mt-10 gap-4">
-          <ChainLiveStats rpc={chain.rpc[0]} />
-        </div>
-      )}
-    </div>
-  );
-}

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

@@ -0,0 +1,8 @@
+// handle deprecated route
+// redirect /<chain_id>/faucet to /<chain_id>
+
+import { redirect } from "next/navigation";
+
+export default function Page(props: { params: { chain_id: string } }) {
+  redirect(`/${props.params.chain_id}`);
+}

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

@@ -1,14 +1,8 @@
 import { Badge } from "@/components/ui/badge";
 import { Separator } from "@/components/ui/separator";
 import { IPFS_GATEWAY_URL } from "@/constants/env";
-import { DASHBOARD_THIRDWEB_SECRET_KEY, PROD_OR_DEV_URL } from "constants/rpc";
-import {
-  ZERO_ADDRESS,
-  createThirdwebClient,
-  defineChain,
-  toTokens,
-} from "thirdweb";
-import type { ChainMetadata } from "thirdweb/chains";
+import { DASHBOARD_THIRDWEB_SECRET_KEY } from "constants/rpc";
+import { ZERO_ADDRESS, createThirdwebClient, toTokens } from "thirdweb";
 import {
   eth_getBlockByHash,
   eth_getTransactionByHash,
@@ -16,18 +10,9 @@ import {
   getRpcClient,
 } from "thirdweb/rpc";
 import { hexToNumber, shortenAddress, toEther } from "thirdweb/utils";
+import { mapV4ChainToV5Chain } from "../../../../../../contexts/map-chains";
 import { getChain } from "../../../utils";
 
-function defineDashboardChain(chainId: number, dashboardChain?: ChainMetadata) {
-  return defineChain({
-    id: chainId,
-    rpc:
-      dashboardChain?.rpc?.[0] || `https://${chainId}.rpc.${PROD_OR_DEV_URL}`,
-    slug: dashboardChain?.slug,
-    nativeCurrency: dashboardChain?.nativeCurrency,
-  });
-}
-
 export default async function Page(props: {
   params: { chain_id: string; txHash: `0x${string}` };
 }) {
@@ -43,7 +28,9 @@ export default async function Page(props: {
 
   const rpcRequest = getRpcClient({
     client: thirdwebClient,
-    chain: defineDashboardChain(chain.chainId),
+    // Do not include chain overrides for chain pages
+    // eslint-disable-next-line no-restricted-syntax
+    chain: mapV4ChainToV5Chain(chain),
   });
 
   const [transaction, receipt] = await Promise.all([

apps/dashboard/src/app/(dashboard)/(chain)/chainlist/components/client/pagination.tsx

@@ -1,8 +1,8 @@
 "use client";
 
+import { PaginationButtons } from "@/components/pagination-buttons";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { useCallback } from "react";
-import { PaginationButtons } from "../../../../../../@/components/pagination-buttons";
 
 type ChainlistPaginationProps = {
   totalPages: number;