Version Packages (#4945)

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

apps/dashboard/.eslintrc.js

@@ -61,6 +61,7 @@ module.exports = {
               "useToast",
               "useClipboard",
               "Badge",
+              "Stack",
               // also the types
               "ButtonProps",
               "BadgeProps",
@@ -73,6 +74,7 @@ module.exports = {
               "MenuItemProps",
               "AspectRatioProps",
               "BadgeProps",
+              "StackProps",
             ],
             message:
               'Use the equivalent component from "tw-components" instead.',

apps/dashboard/next.config.js

@@ -5,10 +5,10 @@ const ContentSecurityPolicy = `
   img-src * data: blob:;
   media-src * data: blob:;
   object-src 'none';
-  style-src 'self' 'unsafe-inline' https://vercel.live;
-  font-src 'self' https://vercel.live https://assets.vercel.com;
+  style-src 'self' 'unsafe-inline' vercel.live;
+  font-src 'self' vercel.live assets.vercel.com framerusercontent.com;
   frame-src * data:;
-  script-src 'self' 'unsafe-eval' 'unsafe-inline' 'wasm-unsafe-eval' 'inline-speculation-rules' *.thirdweb.com *.thirdweb-dev.com vercel.live js.stripe.com;
+  script-src 'self' 'unsafe-eval' 'unsafe-inline' 'wasm-unsafe-eval' 'inline-speculation-rules' *.thirdweb.com *.thirdweb-dev.com vercel.live js.stripe.com framerusercontent.com events.framer.com;
   connect-src * data: blob:;
   worker-src 'self' blob:;
   block-all-mixed-content;
@@ -39,6 +39,9 @@ const securityHeaders = [
 
 const redirects = require("./redirects");
 
+// add framer paths here
+const FRAMER_PATHS = ["/connect/sign-in", "/contracts/modular-contracts"];
+
 /**
  * @returns {import('next').RemotePattern[]}
  */
@@ -128,6 +131,10 @@ const moduleExports = {
         source: "/thirdweb.eth/:path*",
         destination: "/deployer.thirdweb.eth/:path*",
       },
+      ...FRAMER_PATHS.map((path) => ({
+        source: path,
+        destination: `https://landing.thirdweb.com${path}`,
+      })),
     ];
   },
   images: {

apps/dashboard/package.json

@@ -45,7 +45,7 @@
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-switch": "^1.1.0",
     "@radix-ui/react-tooltip": "1.1.2",
-    "@sentry/nextjs": "8.30.0",
+    "@sentry/nextjs": "8.32.0",
     "@shazow/whatsabi": "^0.14.1",
     "@stripe/react-stripe-js": "^2.7.3",
     "@stripe/stripe-js": "^3.5.0",
@@ -61,8 +61,9 @@
     "compare-versions": "^6.1.0",
     "date-fns": "^3.6.0",
     "flat": "^6.0.1",
-    "framer-motion": "11.5.6",
+    "framer-motion": "11.9.0",
     "fuse.js": "7.0.0",
+    "input-otp": "^1.2.4",
     "ioredis": "^5.4.1",
     "ipaddr.js": "^2.2.0",
     "lottie-react": "^2.4.0",
@@ -87,7 +88,6 @@
     "react-icons": "^5.2.1",
     "react-intersection-observer": "^9.10.3",
     "react-markdown": "^9.0.1",
-    "react-otp-input": "^3.1.1",
     "react-responsive-carousel": "^3.2.23",
     "react-table": "^7.8.0",
     "recharts": "^2.12.7",
@@ -109,21 +109,21 @@
     "@next/bundle-analyzer": "14.2.13",
     "@next/eslint-plugin-next": "14.2.13",
     "@playwright/test": "1.47.2",
-    "@storybook/addon-essentials": "8.3.2",
-    "@storybook/addon-interactions": "8.3.2",
-    "@storybook/addon-links": "8.3.2",
-    "@storybook/addon-onboarding": "8.3.2",
-    "@storybook/addon-viewport": "8.3.2",
-    "@storybook/blocks": "8.3.2",
-    "@storybook/nextjs": "8.3.2",
-    "@storybook/react": "8.3.2",
-    "@storybook/test": "8.3.2",
+    "@storybook/addon-essentials": "8.3.4",
+    "@storybook/addon-interactions": "8.3.4",
+    "@storybook/addon-links": "8.3.4",
+    "@storybook/addon-onboarding": "8.3.4",
+    "@storybook/addon-viewport": "8.3.4",
+    "@storybook/blocks": "8.3.4",
+    "@storybook/nextjs": "8.3.4",
+    "@storybook/react": "8.3.4",
+    "@storybook/test": "8.3.4",
     "@types/color": "^3.0.6",
     "@types/node": "20.14.9",
     "@types/papaparse": "^5.3.14",
     "@types/pluralize": "^0.0.33",
     "@types/qrcode": "^1.5.5",
-    "@types/react": "^18.3.8",
+    "@types/react": "^18.3.10",
     "@types/react-dom": "^18",
     "@types/react-table": "^7.7.20",
     "@types/spdx-correct": "^3.1.3",
@@ -135,12 +135,12 @@
     "eslint": "8.57.0",
     "eslint-config-biome": "1.8.4",
     "eslint-plugin-react-compiler": "0.0.0-experimental-ca16900-20240916",
-    "eslint-plugin-storybook": "^0.8.0",
-    "knip": "^5.30.5",
+    "eslint-plugin-storybook": "^0.9.0",
+    "knip": "^5.30.6",
     "next-sitemap": "^4.2.3",
     "postcss": "8.4.47",
-    "storybook": "8.3.2",
-    "tailwindcss": "3.4.12",
+    "storybook": "8.3.4",
+    "tailwindcss": "3.4.13",
     "typescript": "5.6.2"
   }
 }

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

@@ -1,10 +1,8 @@
 import "server-only";
 import { COOKIE_ACTIVE_ACCOUNT, COOKIE_PREFIX_TOKEN } from "@/constants/cookie";
+import { API_SERVER_URL } from "@/constants/env";
 import { cookies } from "next/headers";
 
-const THIRDWEB_API_HOST =
-  process.env.NEXT_PUBLIC_THIRDWEB_API_HOST || "https://api.thirdweb.com";
-
 export type Project = {
   id: string;
   name: string;
@@ -34,7 +32,7 @@ export async function getProjects(teamSlug: string) {
   }
 
   const teamsRes = await fetch(
-    `${THIRDWEB_API_HOST}/v1/teams/${teamSlug}/projects`,
+    `${API_SERVER_URL}/v1/teams/${teamSlug}/projects`,
     {
       headers: {
         Authorization: `Bearer ${token}`,
@@ -59,7 +57,7 @@ export async function getProject(teamSlug: string, projectSlug: string) {
   }
 
   const teamsRes = await fetch(
-    `${THIRDWEB_API_HOST}/v1/teams/${teamSlug}/projects/${projectSlug}`,
+    `${API_SERVER_URL}/v1/teams/${teamSlug}/projects/${projectSlug}`,
     {
       headers: {
         Authorization: `Bearer ${token}`,

apps/dashboard/src/@/api/team-members.ts

@@ -1,10 +1,8 @@
 import "server-only";
 import { COOKIE_ACTIVE_ACCOUNT, COOKIE_PREFIX_TOKEN } from "@/constants/cookie";
+import { API_SERVER_URL } from "@/constants/env";
 import { cookies } from "next/headers";
 
-const THIRDWEB_API_HOST =
-  process.env.NEXT_PUBLIC_THIRDWEB_API_HOST || "https://api.thirdweb.com";
-
 const TeamAccountRole = {
   OWNER: "OWNER",
   MEMBER: "MEMBER",
@@ -39,7 +37,7 @@ export async function getMembers(teamSlug: string) {
   }
 
   const teamsRes = await fetch(
-    `${THIRDWEB_API_HOST}/v1/teams/${teamSlug}/members`,
+    `${API_SERVER_URL}/v1/teams/${teamSlug}/members`,
     {
       headers: {
         Authorization: `Bearer ${token}`,

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

@@ -1,22 +1,20 @@
 import "server-only";
 import { COOKIE_ACTIVE_ACCOUNT, COOKIE_PREFIX_TOKEN } from "@/constants/cookie";
+import { API_SERVER_URL } from "@/constants/env";
 import { cookies } from "next/headers";
 
-const THIRDWEB_API_HOST =
-  process.env.NEXT_PUBLIC_THIRDWEB_API_HOST || "https://api.thirdweb.com";
-
 export type Team = {
   id: string;
   name: string;
   slug: string;
   createdAt: string;
   updatedAt: string;
-  deletedAt: string | null;
-  bannedAt: string | null;
-  // image: string; // -> TODO
+  deletedAt?: string;
+  bannedAt?: string;
+  image?: string;
   billingPlan: "pro" | "growth" | "free";
   billingStatus: "validPayment" | (string & {}); // what's the other value?
-  // billingEmail: string;
+  billingEmail: string;
   // billingExternalId: string;
   // billingType: "STRIPE" | ??
   // billingCustomerPayload: ?? | null
@@ -35,7 +33,7 @@ export async function getTeamBySlug(slug: string) {
     return null;
   }
 
-  const teamRes = await fetch(`${THIRDWEB_API_HOST}/v1/teams/${slug}`, {
+  const teamRes = await fetch(`${API_SERVER_URL}/v1/teams/${slug}`, {
     headers: {
       Authorization: `Bearer ${token}`,
     },
@@ -57,7 +55,7 @@ export async function getTeams() {
     return [];
   }
 
-  const teamsRes = await fetch(`${THIRDWEB_API_HOST}/v1/teams`, {
+  const teamsRes = await fetch(`${API_SERVER_URL}/v1/teams`, {
     headers: {
       Authorization: `Bearer ${token}`,
     },

apps/dashboard/src/@/components/DashboardTypeCookieSetter.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+import { useEffect } from "react";
+import { setCookie } from "../../stores/SyncStoreToCookies";
+
+export function DashboardTypeCookieSetter(props: {
+  type: "team" | "old";
+}) {
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    setCookie("x-dashboard-type", props.type);
+  }, [props.type]);
+
+  return null;
+}

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

@@ -11,9 +11,12 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
+import { cn } from "../../lib/utils";
 
 export function DangerSettingCard(props: {
   title: string;
+  className?: string;
+  footerClassName?: string;
   description: string;
   buttonLabel: string;
   buttonOnClick: () => void;
@@ -22,18 +25,31 @@ export function DangerSettingCard(props: {
     title: string;
     description: string;
   };
+  children?: React.ReactNode;
 }) {
   return (
-    <div className="overflow-hidden rounded-lg border border-red-500/70">
-      <div className="bg-muted/50 px-4 py-6 lg:px-6">
+    <div
+      className={cn(
+        "overflow-hidden rounded-lg border border-red-500/70",
+        props.className,
+      )}
+    >
+      <div className="px-4 py-6 lg:px-6">
         <h3 className="font-semibold text-xl tracking-tight">{props.title}</h3>
 
         <p className="mt-1.5 mb-4 text-foreground text-sm">
           {props.description}
         </p>
+
+        {props.children}
       </div>
 
-      <div className="flex justify-end border-red-500/70 border-t bg-red-100 px-4 py-4 lg:px-6 dark:bg-red-500/20">
+      <div
+        className={cn(
+          "flex justify-end border-red-500/70 border-t bg-red-100 px-4 py-4 lg:px-6 dark:bg-red-500/20",
+          props.footerClassName,
+        )}
+      >
         <Dialog>
           <DialogTrigger asChild>
             <Button
@@ -46,7 +62,10 @@ export function DangerSettingCard(props: {
             </Button>
           </DialogTrigger>
 
-          <DialogContent>
+          <DialogContent
+            className="z-[10001]"
+            dialogOverlayClassName="z-[10000]"
+          >
             <DialogHeader className="pr-10">
               <DialogTitle className="leading-snug">
                 {props.confirmationDialog.title}

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

@@ -4,25 +4,45 @@ import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
 import { ChevronDownIcon } from "lucide-react";
 import { usePathname } from "next/navigation";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { cn } from "../../lib/utils";
-import { NavLink } from "../ui/NavLink";
-import type { SidebarLink } from "./Sidebar";
+import {
+  RenderSidebarLinks,
+  type SidebarBaseLink,
+  type SidebarLink,
+} from "./Sidebar";
 
 export function MobileSidebar(props: {
-  links?: SidebarLink[];
+  links: SidebarLink[];
   footer?: React.ReactNode;
   trigger?: React.ReactNode;
   triggerClassName?: string;
 }) {
   const [isOpen, setIsOpen] = useState(false);
   const pathname = usePathname();
-  const activeLink = props.links?.find((link) => {
-    if (link.exactMatch) {
-      return link.href === pathname;
+
+  const activeLink = useMemo(() => {
+    function isActive(link: SidebarBaseLink) {
+      if (link.exactMatch) {
+        return link.href === pathname;
+      }
+      return pathname?.startsWith(link.href);
     }
-    return pathname?.startsWith(link.href);
-  });
+
+    for (const link of props.links) {
+      if ("group" in link) {
+        for (const subLink of link.links) {
+          if (isActive(subLink)) {
+            return subLink;
+          }
+        }
+      } else {
+        if (isActive(link)) {
+          return link;
+        }
+      }
+    }
+  }, [props.links, pathname]);
 
   const defaultTrigger = (
     <Button
@@ -41,7 +61,7 @@ export function MobileSidebar(props: {
     <Dialog open={isOpen} onOpenChange={setIsOpen}>
       <DialogTrigger asChild>{props.trigger || defaultTrigger}</DialogTrigger>
       <DialogContent
-        className="rounded-t-xl rounded-b-none p-4"
+        className="no-scrollbar max-h-[80vh] overflow-auto rounded-t-xl rounded-b-none p-4"
         dialogCloseClassName="hidden"
         onClick={(e) => {
           if (e.target instanceof HTMLAnchorElement) {
@@ -49,23 +69,7 @@ export function MobileSidebar(props: {
           }
         }}
       >
-        <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 flex h-auto justify-start gap-2 py-3"
-                  activeClassName="bg-accent"
-                  exactMatch={link.exactMatch}
-                  tracking={link.tracking}
-                >
-                  {link.label}
-                </NavLink>
-              </Button>
-            );
-          })}
-        </div>
+        <RenderSidebarLinks links={props.links} />
         {props.footer}
       </DialogContent>
     </Dialog>

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

@@ -17,6 +17,15 @@ export function SettingsCard(
       disabled: boolean;
       isPending: boolean;
       type?: "submit";
+      variant?:
+        | "ghost"
+        | "default"
+        | "primary"
+        | "destructive"
+        | "outline"
+        | "secondary";
+      className?: string;
+      label?: string;
     };
   }>,
 ) {
@@ -58,14 +67,15 @@ export function SettingsCard(
         {props.saveButton && !props.noPermissionText && (
           <Button
             size="sm"
-            className="gap-2"
+            className={cn("gap-2", props.saveButton.className)}
             onClick={props.saveButton.onClick}
             disabled={props.saveButton.disabled || props.saveButton.isPending}
-            variant="outline"
+            variant={props.saveButton.variant || "outline"}
             type={props.saveButton.type}
           >
             {props.saveButton.isPending && <Spinner className="size-3" />}
-            {props.saveButton.isPending ? "Saving" : "Save"}
+            {props.saveButton.label ||
+              (props.saveButton.isPending ? "Saving" : "Save")}
           </Button>
         )}
       </div>

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

@@ -3,7 +3,7 @@ import type React from "react";
 import { cn } from "../../lib/utils";
 import { NavLink } from "../ui/NavLink";
 
-export type SidebarLink = {
+export type SidebarBaseLink = {
   href: string;
   label: React.ReactNode;
   exactMatch?: boolean;
@@ -14,6 +14,13 @@ export type SidebarLink = {
   };
 };
 
+export type SidebarLink =
+  | SidebarBaseLink
+  | {
+      group: string;
+      links: SidebarBaseLink[];
+    };
+
 type SidebarContentProps = {
   header?: React.ReactNode;
   links: SidebarLink[];
@@ -31,23 +38,42 @@ export function Sidebar(props: SidebarContentProps) {
       <div className="pt-7">
         {props.header}
         <div className="flex flex-col gap-1">
-          {props.links?.map((link) => {
-            const isExternal = link.href.startsWith("http");
-            return (
-              <NavLink
-                key={link.href}
-                href={link.href}
-                className="flex items-center gap-2 rounded-md px-3 py-2 text-muted-foreground text-sm hover:bg-muted"
-                activeClassName="text-foreground"
-                exactMatch={link.exactMatch}
-              >
-                {link.label}
-                {isExternal && <ExternalLinkIcon className="size-3" />}
-              </NavLink>
-            );
-          })}
+          <RenderSidebarLinks links={props.links} />
         </div>
       </div>
     </aside>
   );
 }
+
+export function RenderSidebarLinks(props: { links: SidebarLink[] }) {
+  return (
+    <div className="flex flex-col gap-1">
+      {props.links.map((link, i) => {
+        if ("group" in link) {
+          return (
+            <div className={cn({ "mt-6": i !== 0 })}>
+              <p className={cn("px-3 py-2 font-medium text-foreground")}>
+                {link.group}
+              </p>
+              <RenderSidebarLinks links={link.links} />
+            </div>
+          );
+        }
+
+        const isExternal = link.href.startsWith("http");
+        return (
+          <NavLink
+            key={link.href}
+            href={link.href}
+            className="flex items-center gap-2 rounded-md px-3 py-2 text-muted-foreground text-sm hover:bg-muted"
+            activeClassName="text-foreground"
+            exactMatch={link.exactMatch}
+          >
+            {link.label}
+            {isExternal && <ExternalLinkIcon className="size-3" />}
+          </NavLink>
+        );
+      })}
+    </div>
+  );
+}

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

@@ -1,14 +1,5 @@
 "use client";
 
-import { Area, AreaChart, CartesianGrid, XAxis } from "recharts";
-
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
 import {
   type ChartConfig,
   ChartContainer,
@@ -18,11 +9,9 @@ import {
   ChartTooltipContent,
 } from "@/components/ui/chart";
 import { useMemo } from "react";
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts";
 
 type ThirdwebAreaChartProps<TConfig extends ChartConfig> = {
-  // metadata
-  title: string;
-  description?: string;
   // chart config
   config: TConfig;
   data: Array<Record<keyof TConfig, number> & { time: number | string | Date }>;
@@ -37,73 +26,65 @@ export function ThirdwebAreaChart<TConfig extends ChartConfig>(
 ) {
   const configKeys = useMemo(() => Object.keys(props.config), [props.config]);
   return (
-    <Card>
-      <CardHeader>
-        <CardTitle>{props.title}</CardTitle>
-        {props.description && (
-          <CardDescription>{props.description}</CardDescription>
-        )}
-      </CardHeader>
-      <CardContent>
-        <ChartContainer config={props.config} className={props.chartClassName}>
-          <AreaChart
-            accessibilityLayer
-            data={props.data}
-            margin={{
-              left: 12,
-              right: 12,
-            }}
-          >
-            <CartesianGrid vertical={false} />
-            <XAxis
-              dataKey="time"
-              tickLine={false}
-              axisLine={false}
-              tickMargin={8}
-              tickFormatter={(value) => new Date(value).toLocaleDateString()}
-            />
-            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
-            <defs>
-              {configKeys.map((key) => (
-                <linearGradient
-                  key={key}
-                  id={`fill_${key}`}
-                  x1="0"
-                  y1="0"
-                  x2="0"
-                  y2="1"
-                >
-                  <stop
-                    offset="5%"
-                    stopColor={`var(--color-${key})`}
-                    stopOpacity={0.8}
-                  />
-                  <stop
-                    offset="95%"
-                    stopColor={`var(--color-${key})`}
-                    stopOpacity={0.1}
-                  />
-                </linearGradient>
-              ))}
-            </defs>
+    <div className="rounded-lg border border-border bg-muted/50 px-4 pt-10 pb-4">
+      <ChartContainer config={props.config} className={props.chartClassName}>
+        <AreaChart
+          accessibilityLayer
+          data={props.data}
+          margin={{
+            left: 12,
+            right: 12,
+          }}
+        >
+          <CartesianGrid vertical={false} />
+          <XAxis
+            dataKey="time"
+            tickLine={false}
+            axisLine={false}
+            tickMargin={20}
+            tickFormatter={(value) => new Date(value).toLocaleDateString()}
+          />
+          <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
+          <defs>
             {configKeys.map((key) => (
-              <Area
+              <linearGradient
                 key={key}
-                dataKey={key}
-                type="natural"
-                fill={`url(#fill_${key})`}
-                fillOpacity={0.4}
-                stroke={`var(--color-${key})`}
-                stackId="a"
-              />
+                id={`fill_${key}`}
+                x1="0"
+                y1="0"
+                x2="0"
+                y2="1"
+              >
+                <stop
+                  offset="5%"
+                  stopColor={`var(--color-${key})`}
+                  stopOpacity={0.8}
+                />
+                <stop
+                  offset="95%"
+                  stopColor={`var(--color-${key})`}
+                  stopOpacity={0.1}
+                />
+              </linearGradient>
             ))}
+          </defs>
+          {configKeys.map((key) => (
+            <Area
+              key={key}
+              dataKey={key}
+              type="natural"
+              fill={`url(#fill_${key})`}
+              fillOpacity={0.4}
+              stroke={`var(--color-${key})`}
+              stackId="a"
+            />
+          ))}
 
-            {props.showLegend && (
-              <ChartLegend content={<ChartLegendContent />} />
-            )}
-          </AreaChart>
-        </ChartContainer>
-      </CardContent>
-    </Card>
+          {props.showLegend && (
+            <ChartLegend content={<ChartLegendContent />} className="pt-8" />
+          )}
+        </AreaChart>
+      </ChartContainer>
+    </div>
   );
 }

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

@@ -0,0 +1,17 @@
+import { cn } from "@/lib/utils";
+
+export function InlineCode({
+  code,
+  className,
+}: { code: string; className?: string }) {
+  return (
+    <code
+      className={cn(
+        "inline-block rounded bg-muted px-2 font-mono text-sm",
+        className,
+      )}
+    >
+      {code}
+    </code>
+  );
+}

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

@@ -0,0 +1,72 @@
+"use client";
+
+import { OTPInput, OTPInputContext } from "input-otp";
+import { Dot } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const InputOTP = React.forwardRef<
+  React.ElementRef<typeof OTPInput>,
+  React.ComponentPropsWithoutRef<typeof OTPInput>
+>(({ className, containerClassName, ...props }, ref) => (
+  <OTPInput
+    ref={ref}
+    containerClassName={cn(
+      "flex items-center gap-2 has-[:disabled]:opacity-50",
+      containerClassName,
+    )}
+    className={cn("disabled:cursor-not-allowed", className)}
+    {...props}
+  />
+));
+InputOTP.displayName = "InputOTP";
+
+const InputOTPGroup = React.forwardRef<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div">
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("flex items-center", className)} {...props} />
+));
+InputOTPGroup.displayName = "InputOTPGroup";
+
+const InputOTPSlot = React.forwardRef<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div"> & { index: number }
+>(({ index, className, ...props }, ref) => {
+  const inputOTPContext = React.useContext(OTPInputContext);
+  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "relative flex h-10 w-10 items-center justify-center border-input border-y border-r text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
+        isActive && "z-10 ring-2 ring-ring ring-offset-background",
+        className,
+      )}
+      {...props}
+    >
+      {char}
+      {hasFakeCaret && (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
+        </div>
+      )}
+    </div>
+  );
+});
+InputOTPSlot.displayName = "InputOTPSlot";
+
+const InputOTPSeparator = React.forwardRef<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div">
+>(({ ...props }, ref) => (
+  // biome-ignore lint/a11y/useFocusableInteractive: <explanation>
+  <div ref={ref} role="separator" {...props}>
+    <Dot />
+  </div>
+));
+InputOTPSeparator.displayName = "InputOTPSeparator";
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };

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

@@ -165,6 +165,8 @@ function useUnderline<El extends HTMLElement>() {
           block: "nearest",
           inline: "center",
         });
+      } else if (lineRef.current) {
+        lineRef.current.style.width = "0px";
       }
     }
 

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

@@ -20,3 +20,6 @@ export const PROD_OR_DEV_URL = isProd ? "thirdweb.com" : "thirdweb-dev.com";
 export const DASHBOARD_STORAGE_URL =
   process.env.NEXT_PUBLIC_DASHBOARD_UPLOAD_SERVER ||
   "https://storage.thirdweb.com";
+
+export const API_SERVER_URL =
+  process.env.NEXT_PUBLIC_THIRDWEB_API_HOST || "https://api.thirdweb.com";

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

@@ -1,3 +1,5 @@
+"use client";
+
 import { useSyncExternalStore } from "react";
 
 export type Store<T> = {

apps/dashboard/src/@3rdweb-sdk/DO_NOT_ADD_THINGS_HERE.md

@@ -0,0 +1,3 @@
+# DO NOT ADD NEW THINGS INSIDE THIS FOLDER OR SUB_FOLDERS
+
+This part of the dashboard is deprecated, and we are actively working on removing it. Please do not add new things here. If you need to add new things, please add them to the appropriate folder in the src folder.

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

@@ -1,9 +1,3 @@
-export const networkKeys = {
-  all: ["network"] as const,
-  chain: (chainId?: number) => [...networkKeys.all, chainId] as const,
-  multiChainRegistry: ["multi-chain-registry"] as const,
-};
-
 export const accountKeys = {
   all: ["account"] as const,
   wallet: (walletAddress: string) =>

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

@@ -1,98 +0,0 @@
-import { networkKeys, useDashboardEVMChainId } from "@3rdweb-sdk/react";
-import {
-  type MutationFunction,
-  type QueryFunction,
-  type QueryKey,
-  type UseMutationOptions,
-  type UseQueryOptions,
-  type UseQueryResult,
-  useMutation,
-  useQuery,
-  useQueryClient,
-} from "@tanstack/react-query";
-import { useCallback } from "react";
-
-export function useQueryWithNetwork<
-  TQueryFnData = unknown,
-  TError = unknown,
-  TData = TQueryFnData,
-  TQueryKey extends QueryKey = QueryKey,
->(
-  queryKey: TQueryKey,
-  queryFn: QueryFunction<TQueryFnData, TQueryKey>,
-  options?: Omit<
-    UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
-    "queryKey" | "queryFn"
-  >,
-): UseQueryResult<TData, TError> {
-  const activeChainId = useDashboardEVMChainId();
-
-  const mergedOptions: Omit<
-    UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
-    "queryKey" | "queryFn"
-  > = {
-    ...options,
-    enabled: !!(activeChainId && options?.enabled),
-  };
-
-  const combinedQueryKey = (
-    networkKeys.chain(activeChainId) as readonly unknown[]
-  ).concat(queryKey) as unknown as TQueryKey;
-
-  return useQuery({
-    ...mergedOptions,
-    queryKey: combinedQueryKey,
-    queryFn,
-  });
-}
-export function useMutationWithInvalidate<
-  TData = unknown,
-  TError = unknown,
-  TVariables = void,
-  TContext = unknown,
-  TQueryKey extends QueryKey = QueryKey,
->(
-  mutationFn: MutationFunction<TData, TVariables>,
-  options?: Omit<
-    UseMutationOptions<TData, TError, TVariables, TContext>,
-    "mutationFn" | "onSuccess"
-  > & {
-    onSuccess?: (
-      data: TData,
-      variables: TVariables,
-      context: TContext | undefined,
-      wrapCacheKeys: (
-        cacheKeysToInvalidate: TQueryKey[],
-        // biome-ignore lint/suspicious/noConfusingVoidType: FIX ME
-      ) => Promise<void[]>,
-    ) => Promise<unknown> | undefined;
-  },
-) {
-  const activeChainId = useDashboardEVMChainId();
-  const queryClient = useQueryClient();
-
-  const invalidate = useCallback(
-    (cacheKeysToInvalidate: TQueryKey[]) => {
-      return Promise.all(
-        cacheKeysToInvalidate.map((cacheKey) => {
-          return queryClient.invalidateQueries({
-            queryKey: (
-              networkKeys.chain(activeChainId) as readonly unknown[]
-            ).concat(cacheKey) as unknown[],
-          });
-        }),
-      );
-    },
-    [queryClient, activeChainId],
-  );
-
-  return useMutation({
-    ...options,
-    mutationFn,
-    onSuccess: (...args) => {
-      if (options?.onSuccess) {
-        options.onSuccess(...args, invalidate);
-      }
-    },
-  });
-}

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

@@ -1,12 +1,4 @@
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useState,
-} from "react";
 import type { ChainMetadata } from "thirdweb/chains";
-import invariant from "tiny-invariant";
 
 export type EVMContractInfo = {
   // using null instead of undefined here so that this type can be JSON stringified
@@ -14,78 +6,3 @@ export type EVMContractInfo = {
   chainSlug: string;
   contractAddress: string;
 };
-
-type SetEVMContractInfo = (info: EVMContractInfo) => void;
-
-// Legacy: will be removed with contract page -> app router refactor
-// eslint-disable-next-line no-restricted-syntax
-const EVMContractInfoContext = createContext<EVMContractInfo | undefined>(
-  undefined,
-);
-
-// Legacy: will be removed with contract page -> app router refactor
-// eslint-disable-next-line no-restricted-syntax
-const SetEVMContractInfoContext = createContext<SetEVMContractInfo | undefined>(
-  undefined,
-);
-
-// TODO let's move this out of here eventually
-export function EVMContractInfoProvider(props: {
-  children: React.ReactNode;
-  value?: EVMContractInfo;
-}) {
-  const [value, setValue] = useState<EVMContractInfo | undefined>(props.value);
-
-  // keep the state in sync with the props.value
-  // this is required when route changes and page goes from fallback to actual page
-
-  const _setValue = useCallback((info?: EVMContractInfo) => {
-    setValue((prevValue) => {
-      if (
-        prevValue?.chainSlug === info?.chainSlug &&
-        prevValue?.contractAddress === info?.contractAddress &&
-        info?.chain === null
-      ) {
-        return prevValue;
-      }
-      return info;
-    });
-  }, []);
-
-  // no better way right now - this whole file is going away with RSC migration
-  // eslint-disable-next-line no-restricted-syntax
-  useEffect(() => {
-    _setValue(props.value);
-  }, [_setValue, props.value]);
-  // when we move from rendering the fallback page to the actual page, props.value is correct value but state lags behind with undefined value
-  // in that case we use the props.value instead of providing undefined and update the state with effect afterwards
-  // this only happens ONCE, when the page is not yet created on server. once it is created and cached. value will always be defined
-  const providedValue = value || props.value;
-
-  return (
-    <EVMContractInfoContext.Provider value={providedValue}>
-      <SetEVMContractInfoContext.Provider value={_setValue}>
-        {props.children}
-      </SetEVMContractInfoContext.Provider>
-    </EVMContractInfoContext.Provider>
-  );
-}
-
-export function useEVMContractInfo() {
-  return useContext(EVMContractInfoContext);
-}
-
-export function useSetEVMContractInfo() {
-  const setter = useContext(SetEVMContractInfoContext);
-  invariant(
-    setter,
-    "useSetEVMContractInfo must be used inside EVMContractInfoProvider",
-  );
-  return setter;
-}
-
-// for EVM - get network info from context
-export function useDashboardEVMChainId() {
-  const contractInfo = useEVMContractInfo();
-  return contractInfo?.chain?.chainId;
-}

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

@@ -7,7 +7,6 @@ import {
 import { THIRDWEB_ANALYTICS_API_HOST, THIRDWEB_API_HOST } from "constants/urls";
 import invariant from "tiny-invariant";
 import { accountKeys, apiKeys, authorizedWallets } from "../cache-keys";
-import { useMutationWithInvalidate } from "./query/useQueryWithNetwork";
 import { useLoggedInUser } from "./useLoggedInUser";
 
 // FIXME: We keep repeating types, API server should provide them
@@ -479,8 +478,8 @@ export function useUpdateAccountPlan(waitForWebhook?: boolean) {
   const { user } = useLoggedInUser();
   const queryClient = useQueryClient();
 
-  return useMutationWithInvalidate(
-    async (input: { plan: string; feedback?: string }) => {
+  return useMutation({
+    mutationFn: async (input: { plan: string; feedback?: string }) => {
       invariant(user?.address, "walletAddress is required");
 
       const res = await fetch(`${THIRDWEB_API_HOST}/v1/account/plan`, {
@@ -506,27 +505,26 @@ export function useUpdateAccountPlan(waitForWebhook?: boolean) {
 
       return json.data;
     },
-    {
-      onSuccess: async () => {
+    onSuccess: async () => {
+      return Promise.all([
         // invalidate usage data as limits are different
-        await queryClient.invalidateQueries({
+        queryClient.invalidateQueries({
           queryKey: accountKeys.me(user?.address as string),
-        });
-
-        return queryClient.invalidateQueries({
+        }),
+        queryClient.invalidateQueries({
           queryKey: accountKeys.usage(user?.address as string),
-        });
-      },
+        }),
+      ]);
     },
-  );
+  });
 }
 
 export function useUpdateNotifications() {
   const { user } = useLoggedInUser();
   const queryClient = useQueryClient();
 
-  return useMutationWithInvalidate(
-    async (input: UpdateAccountNotificationsInput) => {
+  return useMutation({
+    mutationFn: async (input: UpdateAccountNotificationsInput) => {
       invariant(user?.address, "walletAddress is required");
 
       const res = await fetch(`${THIRDWEB_API_HOST}/v1/account/notifications`, {
@@ -545,14 +543,12 @@ export function useUpdateNotifications() {
 
       return json.data;
     },
-    {
-      onSuccess: () => {
-        return queryClient.invalidateQueries({
-          queryKey: accountKeys.me(user?.address as string),
-        });
-      },
+    onSuccess: () => {
+      return queryClient.invalidateQueries({
+        queryKey: accountKeys.me(user?.address as string),
+      });
     },
-  );
+  });
 }
 
 export function useCreateBillingSession(enabled = false) {
@@ -589,8 +585,8 @@ export function useConfirmEmail() {
   const { user } = useLoggedInUser();
   const queryClient = useQueryClient();
 
-  return useMutationWithInvalidate(
-    async (input: ConfirmEmailInput) => {
+  return useMutation({
+    mutationFn: async (input: ConfirmEmailInput) => {
       invariant(user?.address, "walletAddress is required");
 
       const res = await fetch(`${THIRDWEB_API_HOST}/v1/account/confirmEmail`, {
@@ -609,31 +605,29 @@ export function useConfirmEmail() {
 
       return json.data;
     },
-    {
-      onSuccess: async () => {
-        // invalidate related cache, since could be relinking account
-        return Promise.all([
-          queryClient.invalidateQueries({
-            queryKey: apiKeys.keys(user?.address as string),
-          }),
-          queryClient.invalidateQueries({
-            queryKey: accountKeys.usage(user?.address as string),
-          }),
-          queryClient.invalidateQueries({
-            queryKey: accountKeys.me(user?.address as string),
-          }),
-        ]);
-      },
+    onSuccess: async () => {
+      // invalidate related cache, since could be relinking account
+      return Promise.all([
+        queryClient.invalidateQueries({
+          queryKey: apiKeys.keys(user?.address as string),
+        }),
+        queryClient.invalidateQueries({
+          queryKey: accountKeys.usage(user?.address as string),
+        }),
+        queryClient.invalidateQueries({
+          queryKey: accountKeys.me(user?.address as string),
+        }),
+      ]);
     },
-  );
+  });
 }
 
 export function useResendEmailConfirmation() {
   const { user } = useLoggedInUser();
   const queryClient = useQueryClient();
 
-  return useMutationWithInvalidate(
-    async () => {
+  return useMutation({
+    mutationFn: async () => {
       invariant(user?.address, "walletAddress is required");
 
       const res = await fetch(
@@ -655,22 +649,20 @@ export function useResendEmailConfirmation() {
 
       return json.data;
     },
-    {
-      onSuccess: () => {
-        return queryClient.invalidateQueries({
-          queryKey: accountKeys.me(user?.address as string),
-        });
-      },
+    onSuccess: () => {
+      return queryClient.invalidateQueries({
+        queryKey: accountKeys.me(user?.address as string),
+      });
     },
-  );
+  });
 }
 
 export function useCreatePaymentMethod() {
   const { user } = useLoggedInUser();
   const queryClient = useQueryClient();
 
-  return useMutationWithInvalidate(
-    async (paymentMethodId: string) => {
+  return useMutation({
+    mutationFn: async (paymentMethodId: string) => {
       invariant(user?.address, "walletAddress is required");
 
       const res = await fetch(`${THIRDWEB_API_HOST}/v1/account/paymentMethod`, {
@@ -691,14 +683,12 @@ export function useCreatePaymentMethod() {
 
       return json.data;
     },
-    {
-      onSuccess: () => {
-        return queryClient.invalidateQueries({
-          queryKey: accountKeys.me(user?.address as string),
-        });
-      },
+    onSuccess: () => {
+      return queryClient.invalidateQueries({
+        queryKey: accountKeys.me(user?.address as string),
+      });
     },
-  );
+  });
 }
 
 export function useApiKeys() {
@@ -761,8 +751,8 @@ export function useUpdateApiKey() {
   const { user } = useLoggedInUser();
   const queryClient = useQueryClient();
 
-  return useMutationWithInvalidate(
-    async (input: UpdateKeyInput) => {
+  return useMutation({
+    mutationFn: async (input: UpdateKeyInput) => {
       invariant(user?.address, "walletAddress is required");
 
       const res = await fetch(`${THIRDWEB_API_HOST}/v1/keys/${input.id}`, {
@@ -782,22 +772,20 @@ export function useUpdateApiKey() {
 
       return json.data;
     },
-    {
-      onSuccess: () => {
-        return queryClient.invalidateQueries({
-          queryKey: apiKeys.keys(user?.address as string),
-        });
-      },
+    onSuccess: () => {
+      return queryClient.invalidateQueries({
+        queryKey: apiKeys.keys(user?.address as string),
+      });
     },
-  );
+  });
 }
 
 export function useRevokeApiKey() {
   const { user } = useLoggedInUser();
   const queryClient = useQueryClient();
 
-  return useMutationWithInvalidate(
-    async (id: string) => {
+  return useMutation({
+    mutationFn: async (id: string) => {
       invariant(user?.address, "walletAddress is required");
 
       const res = await fetch(`${THIRDWEB_API_HOST}/v1/keys/${id}/revoke`, {
@@ -816,14 +804,12 @@ export function useRevokeApiKey() {
 
       return json.data;
     },
-    {
-      onSuccess: () => {
-        return queryClient.invalidateQueries({
-          queryKey: apiKeys.keys(user?.address as string),
-        });
-      },
+    onSuccess: () => {
+      return queryClient.invalidateQueries({
+        queryKey: apiKeys.keys(user?.address as string),
+      });
     },
-  );
+  });
 }
 
 export const usePolicies = (serviceId?: string) => {
@@ -852,8 +838,11 @@ export const usePolicies = (serviceId?: string) => {
 
 export const useUpdatePolicies = () => {
   const queryClient = useQueryClient();
-  return useMutationWithInvalidate(
-    async (input: { serviceId: string; data: ApiKeyServicePolicy }) => {
+  return useMutation({
+    mutationFn: async (input: {
+      serviceId: string;
+      data: ApiKeyServicePolicy;
+    }) => {
       const res = await fetch(`${THIRDWEB_API_HOST}/v1/policies`, {
         method: "POST",
 
@@ -871,22 +860,20 @@ export const useUpdatePolicies = () => {
       }
       return json.data as ApiKeyServicePolicy;
     },
-    {
-      onSuccess: (_, variables) => {
-        return queryClient.invalidateQueries({
-          queryKey: ["policies", variables.serviceId],
-        });
-      },
+    onSuccess: (_, variables) => {
+      return queryClient.invalidateQueries({
+        queryKey: ["policies", variables.serviceId],
+      });
     },
-  );
+  });
 };
 
 export function useRevokeAuthorizedWallet() {
   const { user } = useLoggedInUser();
   const queryClient = useQueryClient();
 
-  return useMutationWithInvalidate(
-    async (variables: { authorizedWalletId: string }) => {
+  return useMutation({
+    mutationFn: async (variables: { authorizedWalletId: string }) => {
       invariant(user?.address, "walletAddress is required");
 
       const { authorizedWalletId } = variables;
@@ -910,16 +897,12 @@ export function useRevokeAuthorizedWallet() {
 
       return json.data;
     },
-    {
-      onSuccess: () => {
-        return queryClient.invalidateQueries({
-          queryKey: authorizedWallets.authorizedWallets(
-            user?.address as string,
-          ),
-        });
-      },
+    onSuccess: () => {
+      return queryClient.invalidateQueries({
+        queryKey: authorizedWallets.authorizedWallets(user?.address as string),
+      });
     },
-  );
+  });
 }
 
 export function useAuthorizedWallets() {

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

@@ -14,41 +14,52 @@ import { getContractMetadata, name, symbol } from "thirdweb/extensions/common";
 export function useDashboardContractMetadata(contract: ThirdwebContract) {
   return useQuery({
     queryKey: ["contract-metadata-header", contract.chain.id, contract.address],
-    queryFn: 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 || "",
-      };
-    },
+    queryFn: () => fetchDashboardContractMetadata(contract),
   });
 }
+
+type DashboardContractMetadata = {
+  name: string;
+  symbol: string;
+  image: string;
+  contractType: string;
+};
+
+export async function fetchDashboardContractMetadata(
+  contract: ThirdwebContract,
+): Promise<DashboardContractMetadata> {
+  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/useEngine.ts

@@ -1,3 +1,5 @@
+"use client";
+
 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";
@@ -5,7 +7,6 @@ import { useState } from "react";
 import { useActiveAccount, useActiveWalletChain } from "thirdweb/react";
 import invariant from "tiny-invariant";
 import { engineKeys } from "../cache-keys";
-import { useMutationWithInvalidate } from "./query/useQueryWithNetwork";
 import { useLoggedInUser } from "./useLoggedInUser";
 
 export type EngineTier = "STARTER" | "PREMIUM" | "ENTERPRISE";
@@ -17,7 +18,6 @@ export type EngineInstance = {
   name: string;
   url: string;
   lastAccessedAt: string;
-  cloudDeployedAt?: string;
   status:
     | "active"
     | "pending"
@@ -25,6 +25,7 @@ export type EngineInstance = {
     | "deploying"
     | "paymentFailed"
     | "deploymentFailed";
+  deploymentId?: string;
 };
 
 // Not checking for null token because the token is required the tanstack useQuery hook
@@ -188,23 +189,26 @@ export function useEngineLatestVersion() {
 
 interface UpdateVersionInput {
   engineId: string;
+  serverVersion: string;
 }
 
-export function useEngineUpdateVersion() {
+export function useEngineUpdateServerVersion() {
   return useMutation({
     mutationFn: async (input: UpdateVersionInput) => {
       invariant(input.engineId, "engineId is required");
 
-      const res = await fetch(`${THIRDWEB_API_HOST}/v1/engine/update-version`, {
-        method: "POST",
-
-        headers: {
-          "Content-Type": "application/json",
+      const res = await fetch(
+        `${THIRDWEB_API_HOST}/v2/engine/${input.engineId}/infrastructure`,
+        {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            serverVersion: input.serverVersion,
+          }),
         },
-        body: JSON.stringify({
-          engineId: input.engineId,
-        }),
-      });
+      );
       // we never use the response body
       res.body?.cancel();
       if (!res.ok) {
@@ -570,8 +574,8 @@ export function useEngineAddKeypair(instance: string) {
   const token = useLoggedInUser().user?.jwt ?? null;
   const queryClient = useQueryClient();
 
-  return useMutationWithInvalidate(
-    async (input: AddKeypairInput) => {
+  return useMutation({
+    mutationFn: async (input: AddKeypairInput) => {
       invariant(instance, "instance is required");
 
       const res = await fetch(`${instance}auth/keypair/add`, {
@@ -587,14 +591,12 @@ export function useEngineAddKeypair(instance: string) {
 
       return json.result;
     },
-    {
-      onSuccess: () => {
-        return queryClient.invalidateQueries({
-          queryKey: engineKeys.keypairs(instance),
-        });
-      },
+    onSuccess: () => {
+      return queryClient.invalidateQueries({
+        queryKey: engineKeys.keypairs(instance),
+      });
     },
-  );
+  });
 }
 
 type RemoveKeypairInput = {
@@ -605,8 +607,8 @@ export function useEngineRemoveKeypair(instance: string) {
   const token = useLoggedInUser().user?.jwt ?? null;
   const queryClient = useQueryClient();
 
-  return useMutationWithInvalidate(
-    async (input: RemoveKeypairInput) => {
+  return useMutation({
+    mutationFn: async (input: RemoveKeypairInput) => {
       invariant(instance, "instance is required");
 
       const res = await fetch(`${instance}auth/keypair/remove`, {
@@ -622,14 +624,12 @@ export function useEngineRemoveKeypair(instance: string) {
 
       return json.result;
     },
-    {
-      onSuccess: () => {
-        return queryClient.invalidateQueries({
-          queryKey: engineKeys.keypairs(instance),
-        });
-      },
+    onSuccess: () => {
+      return queryClient.invalidateQueries({
+        queryKey: engineKeys.keypairs(instance),
+      });
     },
-  );
+  });
 }
 
 export type EngineRelayer = {
@@ -672,8 +672,8 @@ export function useEngineCreateRelayer(instance: string) {
   const token = useLoggedInUser().user?.jwt ?? null;
   const queryClient = useQueryClient();
 
-  return useMutationWithInvalidate(
-    async (input: CreateRelayerInput) => {
+  return useMutation({
+    mutationFn: async (input: CreateRelayerInput) => {
       invariant(instance, "instance is required");
 
       const res = await fetch(`${instance}relayer/create`, {
@@ -689,14 +689,12 @@ export function useEngineCreateRelayer(instance: string) {
 
       return json.result;
     },
-    {
-      onSuccess: () => {
-        return queryClient.invalidateQueries({
-          queryKey: engineKeys.relayers(instance),
-        });
-      },
+    onSuccess: () => {
+      return queryClient.invalidateQueries({
+        queryKey: engineKeys.relayers(instance),
+      });
     },
-  );
+  });
 }
 
 type RevokeRelayerInput = {
@@ -707,8 +705,8 @@ export function useEngineRevokeRelayer(instance: string) {
   const token = useLoggedInUser().user?.jwt ?? null;
   const queryClient = useQueryClient();
 
-  return useMutationWithInvalidate(
-    async (input: RevokeRelayerInput) => {
+  return useMutation({
+    mutationFn: async (input: RevokeRelayerInput) => {
       invariant(instance, "instance is required");
 
       const res = await fetch(`${instance}relayer/revoke`, {
@@ -724,14 +722,12 @@ export function useEngineRevokeRelayer(instance: string) {
 
       return json.result;
     },
-    {
-      onSuccess: () => {
-        return queryClient.invalidateQueries({
-          queryKey: engineKeys.relayers(instance),
-        });
-      },
+    onSuccess: () => {
+      return queryClient.invalidateQueries({
+        queryKey: engineKeys.relayers(instance),
+      });
     },
-  );
+  });
 }
 
 export type UpdateRelayerInput = {
@@ -747,8 +743,8 @@ export function useEngineUpdateRelayer(instance: string) {
   const token = useLoggedInUser().user?.jwt ?? null;
   const queryClient = useQueryClient();
 
-  return useMutationWithInvalidate(
-    async (input: UpdateRelayerInput) => {
+  return useMutation({
+    mutationFn: async (input: UpdateRelayerInput) => {
       invariant(instance, "instance is required");
 
       const res = await fetch(`${instance}relayer/update`, {
@@ -764,14 +760,12 @@ export function useEngineUpdateRelayer(instance: string) {
 
       return json.result;
     },
-    {
-      onSuccess: () => {
-        return queryClient.invalidateQueries({
-          queryKey: engineKeys.relayers(instance),
-        });
-      },
+    onSuccess: () => {
+      return queryClient.invalidateQueries({
+        queryKey: engineKeys.relayers(instance),
+      });
     },
-  );
+  });
 }
 
 export interface EngineWebhook {
@@ -827,8 +821,8 @@ export function useEngineSetWalletConfig(instance: string) {
   const token = useLoggedInUser().user?.jwt ?? null;
   const queryClient = useQueryClient();
 
-  return useMutationWithInvalidate(
-    async (input: SetWalletConfigInput) => {
+  return useMutation({
+    mutationFn: async (input: SetWalletConfigInput) => {
       invariant(instance, "instance is required");
 
       const res = await fetch(`${instance}configuration/wallets`, {
@@ -844,14 +838,12 @@ export function useEngineSetWalletConfig(instance: string) {
 
       return json.result;
     },
-    {
-      onSuccess: () => {
-        return queryClient.invalidateQueries({
-          queryKey: engineKeys.walletConfig(instance),
-        });
-      },
+    onSuccess: () => {
+      return queryClient.invalidateQueries({
+        queryKey: engineKeys.walletConfig(instance),
+      });
     },
-  );
+  });
 }
 
 export type CreateBackendWalletInput = {
@@ -862,8 +854,8 @@ export function useEngineCreateBackendWallet(instance: string) {
   const token = useLoggedInUser().user?.jwt ?? null;
   const queryClient = useQueryClient();
 
-  return useMutationWithInvalidate(
-    async (input: CreateBackendWalletInput) => {
+  return useMutation({
+    mutationFn: async (input: CreateBackendWalletInput) => {
       invariant(instance, "instance is required");
 
       const res = await fetch(`${instance}backend-wallet/create`, {
@@ -879,14 +871,12 @@ export function useEngineCreateBackendWallet(instance: string) {
 
       return json.result;
     },
-    {
-      onSuccess: () => {
-        return queryClient.invalidateQueries({
-          queryKey: engineKeys.backendWallets(instance),
-        });
-      },
+    onSuccess: () => {
+      return queryClient.invalidateQueries({
+        queryKey: engineKeys.backendWallets(instance),
+      });
     },
-  );
+  });
 }
 
 interface UpdateBackendWalletInput {
@@ -898,8 +888,8 @@ export function useEngineUpdateBackendWallet(instance: string) {
   const token = useLoggedInUser().user?.jwt ?? null;
   const queryClient = useQueryClient();
 
-  return useMutationWithInvalidate(
-    async (input: UpdateBackendWalletInput) => {
+  return useMutation({
+    mutationFn: async (input: UpdateBackendWalletInput) => {
       invariant(instance, "instance is required");
 
       const res = await fetch(`${instance}backend-wallet/update`, {
@@ -915,14 +905,12 @@ export function useEngineUpdateBackendWallet(instance: string) {
 
       return json.result;
     },
-    {
-      onSuccess: () => {
-        return queryClient.invalidateQueries({
-          queryKey: engineKeys.backendWallets(instance),
-        });
-      },
+    onSuccess: () => {
+      return queryClient.invalidateQueries({
+        queryKey: engineKeys.backendWallets(instance),
+      });
     },
-  );
+  });
 }
 
 export type ImportBackendWalletInput =
@@ -949,8 +937,8 @@ export function useEngineImportBackendWallet(instance: string) {
   const token = useLoggedInUser().user?.jwt ?? null;
   const queryClient = useQueryClient();
 
-  return useMutationWithInvalidate(
-    async (input: ImportBackendWalletInput) => {
+  return useMutation({
+    mutationFn: async (input: ImportBackendWalletInput) => {
       invariant(instance, "instance is required");
 
       const res = await fetch(`${instance}backend-wallet/import`, {
@@ -966,22 +954,20 @@ export function useEngineImportBackendWallet(instance: string) {
 
       return json.result;
     },
-    {
-      onSuccess: () => {
-        return queryClient.invalidateQueries({
-          queryKey: engineKeys.backendWallets(instance),
-        });
-      },
+    onSuccess: () => {
+      return queryClient.invalidateQueries({
+        queryKey: engineKeys.backendWallets(instance),
+      });
     },
-  );
+  });
 }
 
 export function useEngineGrantPermissions(instance: string) {
   const token = useLoggedInUser().user?.jwt ?? null;
   const queryClient = useQueryClient();
 
-  return useMutationWithInvalidate(
-    async (input: EngineAdmin) => {
+  return useMutation({
+    mutationFn: async (input: EngineAdmin) => {
       invariant(instance, "instance is required");
 
       const res = await fetch(`${instance}auth/permissions/grant`, {
@@ -997,14 +983,12 @@ export function useEngineGrantPermissions(instance: string) {
 
       return json.result;
     },
-    {
-      onSuccess: () => {
-        return queryClient.invalidateQueries({
-          queryKey: engineKeys.permissions(instance),
-        });
-      },
+    onSuccess: () => {
+      return queryClient.invalidateQueries({
+        queryKey: engineKeys.permissions(instance),
+      });
     },
-  );
+  });
 }
 
 type RevokePermissionsInput = {
@@ -1015,8 +999,8 @@ export function useEngineRevokePermissions(instance: string) {
   const token = useLoggedInUser().user?.jwt ?? null;
   const queryClient = useQueryClient();
 
-  return useMutationWithInvalidate(
-    async (input: RevokePermissionsInput) => {
+  return useMutation({
+    mutationFn: async (input: RevokePermissionsInput) => {
       invariant(instance, "instance is required");
 
       const res = await fetch(`${instance}auth/permissions/revoke`, {
@@ -1032,14 +1016,12 @@ export function useEngineRevokePermissions(instance: string) {
 
       return json.result;
     },
-    {
-      onSuccess: () => {
-        return queryClient.invalidateQueries({
-          queryKey: engineKeys.permissions(instance),
-        });
-      },
+    onSuccess: () => {
+      return queryClient.invalidateQueries({
+        queryKey: engineKeys.permissions(instance),
+      });
     },
-  );
+  });
 }
 
 type CreateAccessTokenResponse = AccessToken & {
@@ -1050,8 +1032,8 @@ export function useEngineCreateAccessToken(instance: string) {
   const token = useLoggedInUser().user?.jwt ?? null;
   const queryClient = useQueryClient();
 
-  return useMutationWithInvalidate(
-    async () => {
+  return useMutation({
+    mutationFn: async () => {
       invariant(instance, "instance is required");
 
       const res = await fetch(`${instance}auth/access-tokens/create`, {
@@ -1067,14 +1049,12 @@ export function useEngineCreateAccessToken(instance: string) {
 
       return json.result as CreateAccessTokenResponse;
     },
-    {
-      onSuccess: () => {
-        return queryClient.invalidateQueries({
-          queryKey: engineKeys.accessTokens(instance),
-        });
-      },
+    onSuccess: () => {
+      return queryClient.invalidateQueries({
+        queryKey: engineKeys.accessTokens(instance),
+      });
     },
-  );
+  });
 }
 
 type RevokeAccessTokenInput = {
@@ -1085,8 +1065,8 @@ export function useEngineRevokeAccessToken(instance: string) {
   const token = useLoggedInUser().user?.jwt ?? null;
   const queryClient = useQueryClient();
 
-  return useMutationWithInvalidate(
-    async (input: RevokeAccessTokenInput) => {
+  return useMutation({
+    mutationFn: async (input: RevokeAccessTokenInput) => {
       invariant(instance, "instance is required");
 
       const res = await fetch(`${instance}auth/access-tokens/revoke`, {
@@ -1102,14 +1082,12 @@ export function useEngineRevokeAccessToken(instance: string) {
 
       return json.result;
     },
-    {
-      onSuccess: () => {
-        return queryClient.invalidateQueries({
-          queryKey: engineKeys.accessTokens(instance),
-        });
-      },
+    onSuccess: () => {
+      return queryClient.invalidateQueries({
+        queryKey: engineKeys.accessTokens(instance),
+      });
     },
-  );
+  });
 }
 
 type UpdateAccessTokenInput = {
@@ -1121,8 +1099,8 @@ export function useEngineUpdateAccessToken(instance: string) {
   const token = useLoggedInUser().user?.jwt ?? null;
   const queryClient = useQueryClient();
 
-  return useMutationWithInvalidate(
-    async (input: UpdateAccessTokenInput) => {
+  return useMutation({
+    mutationFn: async (input: UpdateAccessTokenInput) => {
       invariant(instance, "instance is required");
 
       const res = await fetch(`${instance}auth/access-tokens/update`, {
@@ -1138,14 +1116,12 @@ export function useEngineUpdateAccessToken(instance: string) {
 
       return json.result;
     },
-    {
-      onSuccess: () => {
-        return queryClient.invalidateQueries({
-          queryKey: engineKeys.accessTokens(instance),
-        });
-      },
+    onSuccess: () => {
+      return queryClient.invalidateQueries({
+        queryKey: engineKeys.accessTokens(instance),
+      });
     },
-  );
+  });
 }
 
 export type CreateWebhookInput = {
@@ -1158,8 +1134,8 @@ export function useEngineCreateWebhook(instance: string) {
   const token = useLoggedInUser().user?.jwt ?? null;
   const queryClient = useQueryClient();
 
-  return useMutationWithInvalidate(
-    async (input: CreateWebhookInput) => {
+  return useMutation({
+    mutationFn: async (input: CreateWebhookInput) => {
       invariant(instance, "instance is required");
 
       const res = await fetch(`${instance}webhooks/create`, {
@@ -1175,14 +1151,12 @@ export function useEngineCreateWebhook(instance: string) {
 
       return json.result;
     },
-    {
-      onSuccess: () => {
-        return queryClient.invalidateQueries({
-          queryKey: engineKeys.webhooks(instance),
-        });
-      },
+    onSuccess: () => {
+      return queryClient.invalidateQueries({
+        queryKey: engineKeys.webhooks(instance),
+      });
     },
-  );
+  });
 }
 
 type RevokeWebhookInput = {
@@ -1193,8 +1167,8 @@ export function useEngineRevokeWebhook(instance: string) {
   const token = useLoggedInUser().user?.jwt ?? null;
   const queryClient = useQueryClient();
 
-  return useMutationWithInvalidate(
-    async (input: RevokeWebhookInput) => {
+  return useMutation({
+    mutationFn: async (input: RevokeWebhookInput) => {
       invariant(instance, "instance is required");
 
       const res = await fetch(`${instance}webhooks/revoke`, {
@@ -1210,14 +1184,12 @@ export function useEngineRevokeWebhook(instance: string) {
 
       return json.result;
     },
-    {
-      onSuccess: () => {
-        return queryClient.invalidateQueries({
-          queryKey: engineKeys.webhooks(instance),
-        });
-      },
+    onSuccess: () => {
+      return queryClient.invalidateQueries({
+        queryKey: engineKeys.webhooks(instance),
+      });
     },
-  );
+  });
 }
 
 type SendTokensInput = {
@@ -1659,8 +1631,8 @@ export function useEngineCreateNotificationChannel(engineId: string) {
   const { isLoggedIn } = useLoggedInUser();
   const queryClient = useQueryClient();
 
-  return useMutationWithInvalidate(
-    async (input: CreateNotificationChannelInput) => {
+  return useMutation({
+    mutationFn: async (input: CreateNotificationChannelInput) => {
       invariant(isLoggedIn, "Must be logged in.");
 
       const res = await fetch(
@@ -1677,22 +1649,20 @@ export function useEngineCreateNotificationChannel(engineId: string) {
       const json = await res.json();
       return json.data as EngineNotificationChannel;
     },
-    {
-      onSuccess: () => {
-        return queryClient.invalidateQueries({
-          queryKey: engineKeys.notificationChannels(engineId),
-        });
-      },
+    onSuccess: () => {
+      return queryClient.invalidateQueries({
+        queryKey: engineKeys.notificationChannels(engineId),
+      });
     },
-  );
+  });
 }
 
 export function useEngineDeleteNotificationChannel(engineId: string) {
   const { isLoggedIn } = useLoggedInUser();
   const queryClient = useQueryClient();
 
-  return useMutationWithInvalidate(
-    async (notificationChannelId: string) => {
+  return useMutation({
+    mutationFn: async (notificationChannelId: string) => {
       invariant(isLoggedIn, "Must be logged in.");
 
       const res = await fetch(
@@ -1704,12 +1674,10 @@ export function useEngineDeleteNotificationChannel(engineId: string) {
       }
       res.body?.cancel();
     },
-    {
-      onSuccess: () => {
-        return queryClient.invalidateQueries({
-          queryKey: engineKeys.notificationChannels(engineId),
-        });
-      },
+    onSuccess: () => {
+      return queryClient.invalidateQueries({
+        queryKey: engineKeys.notificationChannels(engineId),
+      });
     },
-  );
+  });
 }

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

@@ -1,3 +1,5 @@
+"use client";
+
 import { isLoginRequired } from "@/constants/auth";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
 import { useQuery } from "@tanstack/react-query";

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

@@ -1,17 +1,18 @@
+import { useQuery } from "@tanstack/react-query";
 import type { WalletNFTApiReturn } from "pages/api/wallet/nfts/[chainId]";
-import { useQueryWithNetwork } from "./query/useQueryWithNetwork";
 
-export function useWalletNFTs(walletAddress?: string, chainId?: number) {
-  return useQueryWithNetwork(
-    ["walletNfts", walletAddress],
-    async () => {
+export function useWalletNFTs(params: {
+  chainId: number;
+  walletAddress?: string;
+}) {
+  return useQuery({
+    queryKey: ["walletNfts", params.chainId, params.walletAddress],
+    queryFn: async () => {
       const response = await fetch(
-        `/api/wallet/nfts/${chainId}?owner=${walletAddress}`,
+        `/api/wallet/nfts/${params.chainId}?owner=${params.walletAddress}`,
       );
       return (await response.json()) as WalletNFTApiReturn;
     },
-    {
-      enabled: !!walletAddress && !!chainId,
-    },
-  );
+    enabled: !!params.walletAddress,
+  });
 }

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

@@ -0,0 +1,68 @@
+"use client";
+
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import { CheckIcon, CircleAlertIcon, RotateCcwIcon } from "lucide-react";
+import { useState } from "react";
+import { ConfigureNetworks } from "../../../../../components/configure-networks/ConfigureNetworks";
+import { addChainOverrides } from "../../../../../stores/chainStores";
+
+export function ConfigureCustomChain(props: {
+  chainSlug: string;
+}) {
+  const { chainSlug } = props;
+  const isSlugNumber = Number.isInteger(Number.parseInt(chainSlug));
+  const [isConfigured, setIsConfigured] = useState(false);
+
+  if (isConfigured) {
+    return (
+      <div className="mx-auto max-w-[600px] py-10">
+        <Alert variant="info">
+          <CheckIcon className="size-5" />
+          <AlertTitle>Network Configured Successfully</AlertTitle>
+        </Alert>
+        <div className="h-6" />
+        <Button
+          onClick={() => window.location.reload()}
+          className="w-full gap-2"
+        >
+          <RotateCcwIcon className="size-4" />
+          Reload Page to Continue
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="mx-auto max-w-[600px] py-10">
+      <Alert variant="warning">
+        <CircleAlertIcon className="size-5" />
+        <AlertTitle>
+          No Chain found with {isSlugNumber ? "chain ID" : "slug"}{" "}
+          {`"${chainSlug}"`}
+        </AlertTitle>
+        <AlertDescription>
+          Configure a chain with {isSlugNumber ? "chain ID" : "slug"}{" "}
+          {`"${chainSlug}"`} to continue
+        </AlertDescription>
+      </Alert>
+      <div className="h-6" />
+      <div className="rounded-lg border border-border">
+        <ConfigureNetworks
+          prefillSlug={isSlugNumber ? undefined : chainSlug}
+          prefillChainId={isSlugNumber ? chainSlug : undefined}
+          onNetworkAdded={(network) => {
+            if (
+              chainSlug === network.slug ||
+              chainSlug === `${network.chainId}`
+            ) {
+              addChainOverrides(network);
+              setIsConfigured(true);
+            }
+          }}
+          editChain={undefined}
+        />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,49 @@
+import * as ERC20Ext from "thirdweb/extensions/erc20";
+import * as ERC721Ext from "thirdweb/extensions/erc721";
+import * as ERC1155Ext from "thirdweb/extensions/erc1155";
+
+export function isERC721ClaimConditionsSupported(functionSelectors: string[]) {
+  return [
+    // reads
+    ERC721Ext.isGetClaimConditionByIdSupported(functionSelectors),
+    ERC721Ext.isGetActiveClaimConditionIdSupported(functionSelectors),
+    ERC721Ext.isGetClaimConditionsSupported(functionSelectors),
+    ERC721Ext.isGetActiveClaimConditionSupported(functionSelectors),
+    // writes
+    ERC721Ext.isSetClaimConditionsSupported(functionSelectors),
+    ERC721Ext.isResetClaimEligibilitySupported(functionSelectors),
+  ].every(Boolean);
+}
+
+export function isERC20ClaimConditionsSupported(functionSelectors: string[]) {
+  return [
+    // reads
+    ERC20Ext.isGetClaimConditionByIdSupported(functionSelectors),
+    ERC20Ext.isGetActiveClaimConditionIdSupported(functionSelectors),
+    ERC20Ext.isGetClaimConditionsSupported(functionSelectors),
+    ERC20Ext.isGetActiveClaimConditionSupported(functionSelectors),
+    // writes
+    ERC20Ext.isSetClaimConditionsSupported(functionSelectors),
+    ERC20Ext.isResetClaimEligibilitySupported(functionSelectors),
+  ].every(Boolean);
+}
+
+function isERC1155ClaimConditionsSupported(functionSelectors: string[]) {
+  return [
+    // reads
+    ERC1155Ext.isGetClaimConditionByIdSupported(functionSelectors),
+    ERC1155Ext.isGetClaimConditionsSupported(functionSelectors),
+    ERC1155Ext.isGetActiveClaimConditionSupported(functionSelectors),
+    // writes
+    ERC1155Ext.isSetClaimConditionsSupported(functionSelectors),
+    ERC1155Ext.isResetClaimEligibilitySupported(functionSelectors),
+  ].every(Boolean);
+}
+
+export function isClaimConditionsSupported(functionSelectors: string[]) {
+  return (
+    isERC721ClaimConditionsSupported(functionSelectors) ||
+    isERC20ClaimConditionsSupported(functionSelectors) ||
+    isERC1155ClaimConditionsSupported(functionSelectors)
+  );
+}

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

@@ -0,0 +1,26 @@
+import * as ERC4337Ext from "thirdweb/extensions/erc4337";
+
+export function isAccountFactoryContract(functionSelectors: string[]) {
+  return [
+    ERC4337Ext.isGetAllAccountsSupported(functionSelectors),
+    ERC4337Ext.isGetAccountsSupported(functionSelectors),
+    ERC4337Ext.isTotalAccountsSupported(functionSelectors),
+    ERC4337Ext.isGetAccountsOfSignerSupported(functionSelectors),
+    ERC4337Ext.isPredictAccountAddressSupported(functionSelectors),
+  ].every(Boolean);
+}
+
+export function isAccountContract(functionSelectors: string[]) {
+  return ERC4337Ext.isValidateUserOpSupported(functionSelectors);
+}
+
+export function isAccountPermissionsSupported(functionSelectors: string[]) {
+  return [
+    ERC4337Ext.isGetAllActiveSignersSupported(functionSelectors),
+    ERC4337Ext.isGetAllAdminsSupported(functionSelectors),
+    ERC4337Ext.isGetAllSignersSupported(functionSelectors),
+    ERC4337Ext.isIsActiveSignerSupported(functionSelectors),
+    ERC4337Ext.isIsAdminSupported(functionSelectors),
+    ERC4337Ext.isAddAdminSupported(functionSelectors),
+  ].every(Boolean);
+}

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

@@ -0,0 +1,17 @@
+import * as MarketplaceExt from "thirdweb/extensions/marketplace";
+
+export function isDirectListingSupported(functionSelectors: string[]) {
+  return [
+    MarketplaceExt.isCreateListingSupported(functionSelectors),
+    MarketplaceExt.isCancelListingSupported(functionSelectors),
+    MarketplaceExt.isBuyFromListingSupported(functionSelectors),
+  ].every(Boolean);
+}
+
+export function isEnglishAuctionSupported(functionSelectors: string[]) {
+  return [
+    MarketplaceExt.isCreateAuctionSupported(functionSelectors),
+    MarketplaceExt.isCancelAuctionSupported(functionSelectors),
+    MarketplaceExt.isBidInAuctionSupported(functionSelectors),
+  ].every(Boolean);
+}

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

@@ -0,0 +1,11 @@
+import {
+  isGetInstalledModulesSupported,
+  isInstallModuleSupported,
+} from "thirdweb/modules";
+
+export function isModularCoreContract(functionSelectors: string[]) {
+  return [
+    isGetInstalledModulesSupported(functionSelectors),
+    isInstallModuleSupported(functionSelectors),
+  ].every(Boolean);
+}

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

@@ -0,0 +1,21 @@
+import * as PermissionsExt from "thirdweb/extensions/permissions";
+
+export function isPermissionsSupported(functionSelectors: string[]) {
+  return [
+    PermissionsExt.isGetRoleAdminSupported(functionSelectors),
+    PermissionsExt.isGrantRoleSupported(functionSelectors),
+    PermissionsExt.isHasRoleSupported(functionSelectors),
+    PermissionsExt.isRenounceRoleSupported(functionSelectors),
+    PermissionsExt.isRevokeRoleSupported(functionSelectors),
+  ].every(Boolean);
+}
+
+export function isPermissionsEnumerableSupported(functionSelectors: string[]) {
+  return (
+    isPermissionsSupported(functionSelectors) &&
+    [
+      PermissionsExt.isGetRoleMemberSupported(functionSelectors),
+      PermissionsExt.isGetRoleMemberCountSupported(functionSelectors),
+    ].every(Boolean)
+  );
+}

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

@@ -0,0 +1,14 @@
+import { isERC20 as isERC20_ERC20 } from "thirdweb/extensions/erc20";
+import { isGetNFTSupported as isGetNFTSupported_ERC721 } from "thirdweb/extensions/erc721";
+import { isGetNFTSupported as isGetNFTSupported_ERC1155 } from "thirdweb/extensions/erc1155";
+
+export function supportedERCs(functionSelectors: string[]) {
+  const isERC721 = isGetNFTSupported_ERC721(functionSelectors);
+  const isERC1155 = isGetNFTSupported_ERC1155(functionSelectors);
+  const isERC20 = isERC20_ERC20(functionSelectors);
+  return {
+    isERC721,
+    isERC1155,
+    isERC20,
+  };
+}

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

@@ -0,0 +1,70 @@
+import { getThirdwebClient } from "@/constants/thirdweb.server";
+import { mapV4ChainToV5Chain } from "contexts/map-chains";
+import { cookies } from "next/headers";
+import { TW_LOCAL_CHAIN_STORE } from "stores/storageKeys";
+import { getAddress, getContract, isAddress } from "thirdweb";
+import type { ChainMetadata } from "thirdweb/chains";
+import { fetchChain } from "utils/fetchChain";
+import { getAuthToken } from "../../../../../api/lib/getAuthToken";
+
+export async function getContractPageParamsInfo(params: {
+  contractAddress: string;
+  chain_id: string;
+}) {
+  const contractAddress = getCheckSummedAddress(params.contractAddress);
+  const chainSlugOrId = params.chain_id;
+  let chainMetadata: ChainMetadata | null = null;
+  try {
+    chainMetadata = await fetchChain(chainSlugOrId);
+  } catch {
+    // move on
+  }
+
+  if (!chainMetadata) {
+    const cookieStore = cookies();
+    const localChainStoreValue = cookieStore.get(TW_LOCAL_CHAIN_STORE)?.value;
+
+    if (localChainStoreValue) {
+      try {
+        const chains = JSON.parse(decodeURIComponent(localChainStoreValue));
+        if (typeof chains === "object" && Array.isArray(chains)) {
+          const chainOverrides = chains as ChainMetadata[];
+          const chain = chainOverrides.find(
+            (c) =>
+              c.slug === chainSlugOrId ||
+              c.chainId === Number.parseInt(chainSlugOrId),
+          );
+          if (chain) {
+            chainMetadata = chain;
+          }
+        }
+      } catch {
+        // noop
+      }
+    }
+  }
+
+  if (!chainMetadata) {
+    return undefined;
+  }
+
+  // attempt to get the auth token
+  const token = getAuthToken();
+
+  const contract = getContract({
+    address: contractAddress,
+    // eslint-disable-next-line no-restricted-syntax
+    chain: mapV4ChainToV5Chain(chainMetadata),
+    // if we have the auth token pass it into the client
+    client: getThirdwebClient(token || undefined),
+  });
+
+  return {
+    chainMetadata,
+    contract,
+  };
+}
+
+function getCheckSummedAddress(address: string) {
+  return isAddress(address) ? getAddress(address) : address;
+}

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

@@ -0,0 +1,97 @@
+import { resolveFunctionSelectors } from "lib/selectors";
+import type { ThirdwebContract } from "thirdweb";
+import { contractType as getContractType } from "thirdweb/extensions/thirdweb";
+import {
+  isERC20ClaimConditionsSupported,
+  isERC721ClaimConditionsSupported,
+} from "./detectedFeatures/claimConditions";
+import {
+  isAccountContract,
+  isAccountFactoryContract,
+  isAccountPermissionsSupported,
+} from "./detectedFeatures/erc4337";
+import {
+  isDirectListingSupported,
+  isEnglishAuctionSupported,
+} from "./detectedFeatures/marketplace";
+import { isModularCoreContract } from "./detectedFeatures/modular";
+import {
+  isPermissionsEnumerableSupported,
+  isPermissionsSupported,
+} from "./detectedFeatures/permissions";
+import { supportedERCs } from "./detectedFeatures/supportedERCs";
+import { type EmbedTypeToShow, getEmbedTypeToShow } from "./getEmbedTypeToShow";
+import { isAnalyticsSupportedForChain } from "./isAnalyticsSupportedForChain";
+
+export type ContractPageMetadata = {
+  supportedERCs: {
+    isERC721: boolean;
+    isERC1155: boolean;
+    isERC20: boolean;
+  };
+  isDirectListingSupported: boolean;
+  isEnglishAuctionSupported: boolean;
+  isPermissionsSupported: boolean;
+  isVoteContract: boolean;
+  isPermissionsEnumerableSupported: boolean;
+  isModularCore: boolean;
+  embedType: EmbedTypeToShow;
+  isAnalyticsSupported: boolean;
+  isSplitSupported: boolean;
+  isERC721ClaimConditionsSupported: boolean;
+  isERC20ClaimConditionsSupported: boolean;
+  isAccountFactory: boolean;
+  isAccount: boolean;
+  isAccountPermissionsSupported: boolean;
+  functionSelectors: string[];
+};
+
+export async function getContractPageMetadata(
+  contract: ThirdwebContract,
+): Promise<ContractPageMetadata> {
+  const [
+    functionSelectorsResult,
+    isAnalyticsSupportedResult,
+    contractTypeResult,
+  ] = await Promise.allSettled([
+    resolveFunctionSelectors(contract),
+    isAnalyticsSupportedForChain(contract.chain.id),
+    getContractType({ contract }),
+  ]);
+
+  const functionSelectors =
+    functionSelectorsResult.status === "fulfilled"
+      ? functionSelectorsResult.value
+      : [];
+
+  const isAnalyticsSupported =
+    isAnalyticsSupportedResult.status === "fulfilled"
+      ? isAnalyticsSupportedResult.value
+      : true;
+
+  const contractType =
+    contractTypeResult.status === "fulfilled" ? contractTypeResult.value : null;
+
+  return {
+    supportedERCs: supportedERCs(functionSelectors),
+    isDirectListingSupported: isDirectListingSupported(functionSelectors),
+    isEnglishAuctionSupported: isEnglishAuctionSupported(functionSelectors),
+    isPermissionsSupported: isPermissionsSupported(functionSelectors),
+    isPermissionsEnumerableSupported:
+      isPermissionsEnumerableSupported(functionSelectors),
+    isModularCore: isModularCoreContract(functionSelectors),
+    embedType: getEmbedTypeToShow(functionSelectors),
+    isAnalyticsSupported: isAnalyticsSupported,
+    isSplitSupported: contractType === "Split",
+    isVoteContract: contractType === "VoteERC20",
+    isERC721ClaimConditionsSupported:
+      isERC721ClaimConditionsSupported(functionSelectors),
+    isERC20ClaimConditionsSupported:
+      isERC20ClaimConditionsSupported(functionSelectors),
+    isAccountFactory: isAccountFactoryContract(functionSelectors),
+    isAccount: isAccountContract(functionSelectors),
+    isAccountPermissionsSupported:
+      isAccountPermissionsSupported(functionSelectors),
+    functionSelectors,
+  };
+}

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

@@ -0,0 +1,157 @@
+import type { SidebarBaseLink, SidebarLink } from "@/components/blocks/Sidebar";
+import type { ContractPageMetadata } from "./getContractPageMetadata";
+
+type SidebarBaseLinkWithHide = SidebarBaseLink & {
+  hide?: boolean;
+};
+
+export function getContractPageSidebarLinks(data: {
+  metadata: ContractPageMetadata;
+  contractAddress: string;
+  chainSlug: string;
+}) {
+  const layoutPrefix = `/${data.chainSlug}/${data.contractAddress}`;
+
+  const generalLinks: SidebarBaseLinkWithHide[] = [
+    {
+      label: "Overview",
+      href: layoutPrefix,
+      exactMatch: true,
+    },
+    {
+      label: "Modules",
+      href: `${layoutPrefix}/modules`,
+      hide: !data.metadata.isModularCore,
+      exactMatch: true,
+    },
+    {
+      label: "Code Snippets",
+      href: `${layoutPrefix}/code`,
+      exactMatch: true,
+    },
+    {
+      label: "Explorer",
+      href: `${layoutPrefix}/explorer`,
+      exactMatch: true,
+    },
+    {
+      label: "Events",
+      href: `${layoutPrefix}/events`,
+      exactMatch: true,
+    },
+    {
+      label: "Embed",
+      href: `${layoutPrefix}/embed`,
+      hide: data.metadata.embedType === null,
+      exactMatch: true,
+    },
+    {
+      label: "Analytics",
+      href: `${layoutPrefix}/analytics`,
+      hide: !data.metadata.isAnalyticsSupported,
+      exactMatch: true,
+    },
+    {
+      label: "Settings",
+      href: `${layoutPrefix}/settings`,
+      exactMatch: true,
+    },
+    {
+      label: "Sources",
+      href: `${layoutPrefix}/sources`,
+      exactMatch: true,
+    },
+  ];
+
+  const extensionsLinks: SidebarBaseLinkWithHide[] = [
+    {
+      label: "NFTs",
+      href: `${layoutPrefix}/nfts`,
+      hide:
+        !data.metadata.supportedERCs.isERC721 &&
+        !data.metadata.supportedERCs.isERC1155,
+    },
+    {
+      label: "Tokens",
+      href: `${layoutPrefix}/tokens`,
+      hide: !data.metadata.supportedERCs.isERC20,
+      exactMatch: true,
+    },
+    {
+      label: "Direct Listings",
+      href: `${layoutPrefix}/direct-listings`,
+      hide: !data.metadata.isDirectListingSupported,
+      exactMatch: true,
+    },
+    {
+      label: "English Auctions",
+      href: `${layoutPrefix}/english-auctions`,
+      hide: !data.metadata.isEnglishAuctionSupported,
+      exactMatch: true,
+    },
+    {
+      label: "Balances",
+      href: `${layoutPrefix}/split`,
+      hide: !data.metadata.isSplitSupported,
+      exactMatch: true,
+    },
+    {
+      label: "Proposals",
+      href: `${layoutPrefix}/proposals`,
+      hide: !data.metadata.isVoteContract,
+      exactMatch: true,
+    },
+    {
+      label: "Claim Conditions",
+      href: `${layoutPrefix}/claim-conditions`,
+      hide: !(
+        data.metadata.isERC721ClaimConditionsSupported ||
+        data.metadata.isERC20ClaimConditionsSupported
+      ),
+      exactMatch: true,
+    },
+    {
+      label: "Accounts",
+      href: `${layoutPrefix}/accounts`,
+      hide: !data.metadata.isAccountFactory,
+      exactMatch: true,
+    },
+    {
+      label: "Balance",
+      href: `${layoutPrefix}/account`,
+      hide: !data.metadata.isAccount,
+      exactMatch: true,
+    },
+    {
+      label: "Account Permissions",
+      href: `${layoutPrefix}/account-permissions`,
+      hide: !data.metadata.isAccountPermissionsSupported,
+      exactMatch: true,
+    },
+    {
+      label: "Permissions",
+      href: `${layoutPrefix}/permissions`,
+      exactMatch: true,
+      hide: !data.metadata.isPermissionsSupported,
+    },
+  ];
+
+  const extensionsToShow = extensionsLinks.filter((l) => !l.hide);
+  const generalLinksToShow = generalLinks.filter((l) => !l.hide);
+
+  const sidebarLinks: SidebarLink[] = [
+    {
+      group: "General",
+      links: generalLinksToShow,
+    },
+  ];
+
+  if (extensionsToShow.length > 0) {
+    sidebarLinks.push({
+      group: "Extensions",
+      links: extensionsToShow,
+    });
+  }
+
+  return sidebarLinks;
+}

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

@@ -0,0 +1,40 @@
+import { isClaimConditionsSupported } from "./detectedFeatures/claimConditions";
+import {
+  isDirectListingSupported,
+  isEnglishAuctionSupported,
+} from "./detectedFeatures/marketplace";
+import { supportedERCs } from "./detectedFeatures/supportedERCs";
+
+export type EmbedTypeToShow =
+  | "marketplace-v3"
+  | "erc20"
+  | "erc1155"
+  | "erc721"
+  | null;
+
+export function getEmbedTypeToShow(
+  functionSelectors: string[],
+): EmbedTypeToShow {
+  const { isERC1155, isERC20, isERC721 } = supportedERCs(functionSelectors);
+
+  if (
+    isEnglishAuctionSupported(functionSelectors) &&
+    isDirectListingSupported(functionSelectors)
+  ) {
+    return "marketplace-v3";
+  }
+
+  if (isClaimConditionsSupported(functionSelectors)) {
+    if (isERC721) {
+      return "erc721";
+    }
+    if (isERC1155) {
+      return "erc1155";
+    }
+    if (isERC20) {
+      return "erc20";
+    }
+  }
+
+  return null;
+}

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

@@ -0,0 +1,35 @@
+import { isProd } from "@/constants/env";
+
+export async function isAnalyticsSupportedForChain(
+  chainId: number,
+): Promise<boolean> {
+  try {
+    if (!process.env.CHAINSAW_API_KEY) {
+      throw new Error("Missing CHAINSAW_API_KEY env var");
+    }
+
+    const res = await fetch(
+      `https://chainsaw.${isProd ? "thirdweb" : "thirdweb-dev"}.com/service/chains/${chainId}`,
+      {
+        method: "GET",
+        headers: {
+          "content-type": "application/json",
+          // pass the shared secret
+          "x-service-api-key": process.env.CHAINSAW_API_KEY || "",
+        },
+      },
+    );
+
+    if (!res.ok) {
+      // assume not supported if we get a non-200 response
+      return false;
+    }
+
+    const { data } = await res.json();
+    return data;
+  } catch (e) {
+    console.error("Error checking if analytics is supported for chain", e);
+  }
+
+  return false;
+}

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

@@ -0,0 +1,34 @@
+import { notFound, redirect } from "next/navigation";
+import { AccountSigners } from "../../../../../../contract-ui/tabs/account-permissions/components/account-signers";
+import { getContractPageParamsInfo } from "../_utils/getContractFromParams";
+import { getContractPageMetadata } from "../_utils/getContractPageMetadata";
+
+export default async function Page(props: {
+  params: {
+    contractAddress: string;
+    chain_id: string;
+  };
+}) {
+  const info = await getContractPageParamsInfo(props.params);
+
+  if (!info) {
+    notFound();
+  }
+
+  const { contract } = info;
+  const { isAccountPermissionsSupported } =
+    await getContractPageMetadata(contract);
+
+  if (!isAccountPermissionsSupported) {
+    redirect(`/${props.params.chain_id}/${props.params.contractAddress}`);
+  }
+
+  return (
+    <div>
+      <h1 className="mb-4 font-semibold text-2xl tracking-tight">
+        Account Signers
+      </h1>
+      <AccountSigners contract={contract} />
+    </div>
+  );
+}

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

@@ -0,0 +1,26 @@
+import { notFound, redirect } from "next/navigation";
+import { AccountPage } from "../../../../../../contract-ui/tabs/account/page";
+import { getContractPageParamsInfo } from "../_utils/getContractFromParams";
+import { getContractPageMetadata } from "../_utils/getContractPageMetadata";
+
+export default async function Page(props: {
+  params: {
+    contractAddress: string;
+    chain_id: string;
+  };
+}) {
+  const info = await getContractPageParamsInfo(props.params);
+
+  if (!info) {
+    notFound();
+  }
+
+  const { contract, chainMetadata } = info;
+  const { isAccount } = await getContractPageMetadata(contract);
+
+  if (!isAccount) {
+    redirect(`/${props.params.chain_id}/${props.params.contractAddress}`);
+  }
+
+  return <AccountPage contract={contract} chainMetadata={chainMetadata} />;
+}

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

@@ -0,0 +1,26 @@
+import { notFound, redirect } from "next/navigation";
+import { AccountsPage } from "../../../../../../contract-ui/tabs/accounts/page";
+import { getContractPageParamsInfo } from "../_utils/getContractFromParams";
+import { getContractPageMetadata } from "../_utils/getContractPageMetadata";
+
+export default async function Page(props: {
+  params: {
+    contractAddress: string;
+    chain_id: string;
+  };
+}) {
+  const info = await getContractPageParamsInfo(props.params);
+
+  if (!info) {
+    notFound();
+  }
+
+  const { contract } = info;
+  const { isAccountFactory } = await getContractPageMetadata(contract);
+
+  if (!isAccountFactory) {
+    redirect(`/${props.params.chain_id}/${props.params.contractAddress}`);
+  }
+
+  return <AccountsPage contract={contract} />;
+}

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

@@ -0,0 +1,25 @@
+import { notFound, redirect } from "next/navigation";
+import { ContractAnalyticsPage } from "../../../../../../contract-ui/tabs/analytics/page";
+import { getContractPageParamsInfo } from "../_utils/getContractFromParams";
+import { getContractPageMetadata } from "../_utils/getContractPageMetadata";
+
+export default async function Page(props: {
+  params: {
+    contractAddress: string;
+    chain_id: string;
+  };
+}) {
+  const info = await getContractPageParamsInfo(props.params);
+
+  if (!info) {
+    notFound();
+  }
+
+  const { isAnalyticsSupported } = await getContractPageMetadata(info.contract);
+
+  if (!isAnalyticsSupported) {
+    redirect(`/${props.params.chain_id}/${props.params.contractAddress}`);
+  }
+
+  return <ContractAnalyticsPage contract={info.contract} />;
+}

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

@@ -0,0 +1,32 @@
+import { notFound, redirect } from "next/navigation";
+import { ClaimConditions } from "../../../../../../contract-ui/tabs/claim-conditions/components/claim-conditions";
+import { getContractPageParamsInfo } from "../_utils/getContractFromParams";
+import { getContractPageMetadata } from "../_utils/getContractPageMetadata";
+
+export default async function Page(props: {
+  params: {
+    contractAddress: string;
+    chain_id: string;
+  };
+}) {
+  const info = await getContractPageParamsInfo(props.params);
+
+  if (!info) {
+    notFound();
+  }
+
+  const { contract } = info;
+  const {
+    isERC20ClaimConditionsSupported,
+    isERC721ClaimConditionsSupported,
+    supportedERCs,
+  } = await getContractPageMetadata(contract);
+
+  if (!isERC20ClaimConditionsSupported && !isERC721ClaimConditionsSupported) {
+    redirect(`/${props.params.chain_id}/${props.params.contractAddress}`);
+  }
+
+  return (
+    <ClaimConditions contract={contract} isERC20={supportedERCs.isERC20} />
+  );
+}

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

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

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

@@ -0,0 +1,27 @@
+import { notFound, redirect } from "next/navigation";
+import { ContractDirectListingsPage } from "../../../../../../contract-ui/tabs/direct-listings/page";
+import { getContractPageParamsInfo } from "../_utils/getContractFromParams";
+import { getContractPageMetadata } from "../_utils/getContractPageMetadata";
+
+export default async function Page(props: {
+  params: {
+    contractAddress: string;
+    chain_id: string;
+  };
+}) {
+  const info = await getContractPageParamsInfo(props.params);
+
+  if (!info) {
+    notFound();
+  }
+
+  const { isDirectListingSupported } = await getContractPageMetadata(
+    info.contract,
+  );
+
+  if (!isDirectListingSupported) {
+    redirect(`/${props.params.chain_id}/${props.params.contractAddress}`);
+  }
+
+  return <ContractDirectListingsPage contract={info.contract} />;
+}

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

@@ -0,0 +1,25 @@
+import { notFound, redirect } from "next/navigation";
+import { EmbedSetup } from "../../../../../../contract-ui/tabs/embed/components/embed-setup";
+import { getContractPageParamsInfo } from "../_utils/getContractFromParams";
+import { getContractPageMetadata } from "../_utils/getContractPageMetadata";
+
+export default async function Page(props: {
+  params: {
+    contractAddress: string;
+    chain_id: string;
+  };
+}) {
+  const info = await getContractPageParamsInfo(props.params);
+
+  if (!info) {
+    notFound();
+  }
+
+  const { embedType } = await getContractPageMetadata(info.contract);
+
+  if (embedType === null) {
+    redirect(`/${props.params.chain_id}/${props.params.contractAddress}`);
+  }
+
+  return <EmbedSetup contract={info.contract} ercOrMarketplace={embedType} />;
+}

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

@@ -0,0 +1,27 @@
+import { notFound, redirect } from "next/navigation";
+import { ContractEnglishAuctionsPage } from "../../../../../../contract-ui/tabs/english-auctions/page";
+import { getContractPageParamsInfo } from "../_utils/getContractFromParams";
+import { getContractPageMetadata } from "../_utils/getContractPageMetadata";
+
+export default async function Page(props: {
+  params: {
+    contractAddress: string;
+    chain_id: string;
+  };
+}) {
+  const info = await getContractPageParamsInfo(props.params);
+
+  if (!info) {
+    notFound();
+  }
+
+  const { isEnglishAuctionSupported } = await getContractPageMetadata(
+    info.contract,
+  );
+
+  if (!isEnglishAuctionSupported) {
+    redirect(`/${props.params.chain_id}/${props.params.contractAddress}`);
+  }
+
+  return <ContractEnglishAuctionsPage contract={info.contract} />;
+}

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

@@ -0,0 +1,18 @@
+import { notFound } from "next/navigation";
+import { EventsFeed } from "../../../../../../contract-ui/tabs/events/components/events-feed";
+import { getContractPageParamsInfo } from "../_utils/getContractFromParams";
+
+export default async function Page(props: {
+  params: {
+    contractAddress: string;
+    chain_id: string;
+  };
+}) {
+  const info = await getContractPageParamsInfo(props.params);
+
+  if (!info) {
+    notFound();
+  }
+
+  return <EventsFeed contract={info.contract} />;
+}

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

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

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

@@ -0,0 +1,122 @@
+import { ChakraProviderSetup } from "@/components/ChakraProviderSetup";
+import { SidebarLayout } from "@/components/blocks/SidebarLayout";
+import { ContractMetadata } from "components/custom-contract/contract-header/contract-metadata";
+import { DeprecatedAlert } from "components/shared/DeprecatedAlert";
+import { PrimaryDashboardButton } from "contract-ui/components/primary-dashboard-button";
+import type { Metadata } from "next";
+import { getContractMetadata } from "thirdweb/extensions/common";
+import { resolveFunctionSelectors } from "../../../../../lib/selectors";
+import { shortenIfAddress } from "../../../../../utils/usedapp-external";
+import { ConfigureCustomChain } from "./ConfigureCustomChain";
+import { supportedERCs } from "./_utils/detectedFeatures/supportedERCs";
+import { getContractPageParamsInfo } from "./_utils/getContractFromParams";
+import { getContractPageMetadata } from "./_utils/getContractPageMetadata";
+import { getContractPageSidebarLinks } from "./_utils/getContractPageSidebarLinks";
+
+export default async function Layout(props: {
+  params: {
+    contractAddress: string;
+    chain_id: string;
+  };
+  children: React.ReactNode;
+}) {
+  const info = await getContractPageParamsInfo(props.params);
+
+  if (!info) {
+    return <ConfigureCustomChain chainSlug={props.params.chain_id} />;
+  }
+
+  const { contract, chainMetadata } = info;
+  const contractPageMetadata = await getContractPageMetadata(contract);
+  const sidebarLinks = getContractPageSidebarLinks({
+    chainSlug: chainMetadata.slug,
+    contractAddress: contract.address,
+    metadata: contractPageMetadata,
+  });
+
+  return (
+    <ChakraProviderSetup>
+      <SidebarLayout sidebarLinks={sidebarLinks}>
+        <div className="border-border border-b pb-8">
+          <div className="flex flex-col gap-4 ">
+            <div className="flex flex-col justify-between gap-4 md:flex-row">
+              <ContractMetadata contract={contract} chain={chainMetadata} />
+              <PrimaryDashboardButton
+                contractAddress={contract.address}
+                chain={contract.chain}
+                contractInfo={{
+                  chain: chainMetadata,
+                  chainSlug: chainMetadata.slug,
+                  contractAddress: contract.address,
+                }}
+              />
+            </div>
+            <DeprecatedAlert chain={chainMetadata} />
+          </div>
+        </div>
+        <div className="h-8" />
+        <div className="pb-10">{props.children}</div>
+      </SidebarLayout>
+    </ChakraProviderSetup>
+  );
+}
+
+export async function generateMetadata({
+  params,
+}: {
+  params: {
+    contractAddress: string;
+    chain_id: string;
+  };
+}): Promise<Metadata> {
+  try {
+    const info = await getContractPageParamsInfo(params);
+
+    if (!info) {
+      throw new Error();
+    }
+
+    const [functionSelectors, contractMetadata] = await Promise.all([
+      resolveFunctionSelectors(info.contract),
+      getContractMetadata({
+        contract: info.contract,
+      }),
+    ]);
+
+    if (contractMetadata.name === null) {
+      throw new Error();
+    }
+
+    const { isERC1155, isERC20, isERC721 } = supportedERCs(functionSelectors);
+
+    const contractDisplayName = `${contractMetadata.name}${
+      contractMetadata.symbol ? ` (${contractMetadata.symbol})` : ""
+    }`;
+
+    const cleanedChainName = info?.chainMetadata?.name
+      .replace("Mainnet", "")
+      .replace("Testnet", "")
+      .trim();
+
+    const title = `${contractDisplayName} | ${cleanedChainName} Smart Contract`;
+    let description = "";
+
+    if (isERC721 || isERC1155) {
+      description = `View tokens, source code, transactions, balances, and analytics for the ${contractDisplayName} smart contract on ${cleanedChainName}.`;
+    } else if (isERC20) {
+      description = `View ERC20 tokens, transactions, balances, source code, and analytics for the ${contractDisplayName} smart contract on ${cleanedChainName}`;
+    } else {
+      description = `View tokens, transactions, balances, source code, and analytics for the ${contractDisplayName} smart contract  on ${cleanedChainName}`;
+    }
+
+    return {
+      title: title,
+      description: description,
+    };
+  } catch {
+    return {
+      title: `${shortenIfAddress(params.contractAddress)} | ${params.chain_id}`,
+      description: `View tokens, transactions, balances, source code, and analytics for the smart contract  on Chain ID ${params.chain_id}`,
+    };
+  }
+}

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

@@ -0,0 +1,25 @@
+import { notFound, redirect } from "next/navigation";
+import { ContractEditModulesPage } from "../../../../../../contract-ui/tabs/manage/page";
+import { getContractPageParamsInfo } from "../_utils/getContractFromParams";
+import { getContractPageMetadata } from "../_utils/getContractPageMetadata";
+
+export default async function Page(props: {
+  params: {
+    contractAddress: string;
+    chain_id: string;
+  };
+}) {
+  const info = await getContractPageParamsInfo(props.params);
+
+  if (!info) {
+    notFound();
+  }
+
+  const { isModularCore } = await getContractPageMetadata(info.contract);
+
+  if (!isModularCore) {
+    redirect(`/${props.params.chain_id}/${props.params.contractAddress}`);
+  }
+
+  return <ContractEditModulesPage contract={info.contract} />;
+}

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

@@ -0,0 +1,42 @@
+import { notFound, redirect } from "next/navigation";
+import { TokenIdPage } from "../../../../../../../contract-ui/tabs/nfts/components/token-id";
+import { getContractPageParamsInfo } from "../../_utils/getContractFromParams";
+import { getContractPageMetadata } from "../../_utils/getContractPageMetadata";
+
+export default async function Page(props: {
+  params: {
+    contractAddress: string;
+    chain_id: string;
+    tokenId: string;
+  };
+}) {
+  const info = await getContractPageParamsInfo(props.params);
+
+  if (!info) {
+    notFound();
+  }
+
+  const { contract } = info;
+  const { supportedERCs } = await getContractPageMetadata(contract);
+
+  if (!supportedERCs.isERC721 && !supportedERCs.isERC1155) {
+    redirect(`/${props.params.chain_id}/${props.params.contractAddress}`);
+  }
+
+  if (!isOnlyNumbers(props.params.tokenId)) {
+    // redirect to nfts index page
+    redirect(`/${props.params.chain_id}/${props.params.contractAddress}/nfts`);
+  }
+
+  return (
+    <TokenIdPage
+      contract={contract}
+      isErc721={supportedERCs.isERC721}
+      tokenId={props.params.tokenId}
+    />
+  );
+}
+
+function isOnlyNumbers(str: string) {
+  return /^\d+$/.test(str);
+}

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

@@ -0,0 +1,35 @@
+import { notFound, redirect } from "next/navigation";
+import { ContractNFTPage } from "../../../../../../contract-ui/tabs/nfts/page";
+import { resolveFunctionSelectors } from "../../../../../../lib/selectors";
+import { getContractPageParamsInfo } from "../_utils/getContractFromParams";
+import { getContractPageMetadata } from "../_utils/getContractPageMetadata";
+
+export default async function Page(props: {
+  params: {
+    contractAddress: string;
+    chain_id: string;
+  };
+}) {
+  const info = await getContractPageParamsInfo(props.params);
+
+  if (!info) {
+    notFound();
+  }
+
+  const { contract } = info;
+  const { supportedERCs } = await getContractPageMetadata(contract);
+
+  if (!supportedERCs.isERC721 && !supportedERCs.isERC1155) {
+    redirect(`/${props.params.chain_id}/${props.params.contractAddress}`);
+  }
+
+  const functionSelectors = await resolveFunctionSelectors(contract);
+
+  return (
+    <ContractNFTPage
+      contract={contract}
+      isErc721={supportedERCs.isERC721}
+      functionSelectors={functionSelectors}
+    />
+  );
+}

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

@@ -1,27 +1,60 @@
 /* eslint-disable @next/next/no-img-element */
 import { isProd } from "@/constants/env";
 import { ImageResponse } from "@vercel/og";
-import type { NextRequest } from "next/server";
-import { ContractOG } from "og-lib/url-utils";
+import { getContractMetadata } from "thirdweb/extensions/common";
+import { getContractPageParamsInfo } from "./_utils/getContractFromParams";
 
-export function shortenString(str: string) {
-  return `${str.substring(0, 7)}...${str.substring(str.length - 5)}`;
-}
+export const runtime = "edge";
 
-// Make sure the font exists in the specified path:
-export const config = {
-  runtime: "edge",
+export const size = {
+  width: 1200,
+  height: 630,
 };
 
-const inter400_ = fetch(
-  new URL("og-lib/fonts/inter/400.ttf", import.meta.url),
-).then((res) => res.arrayBuffer());
-const inter500_ = fetch(
-  new URL("og-lib/fonts/inter/500.ttf", import.meta.url),
-).then((res) => res.arrayBuffer());
-const inter700_ = fetch(
-  new URL("og-lib/fonts/inter/700.ttf", import.meta.url),
-).then((res) => res.arrayBuffer());
+export default async function Image({
+  params,
+}: {
+  params: {
+    contractAddress: string;
+    chain_id: string;
+  };
+}) {
+  try {
+    const info = await getContractPageParamsInfo(params);
+
+    if (!info) {
+      throw new Error();
+    }
+
+    const contractMetadata = await getContractMetadata({
+      contract: info.contract,
+    });
+
+    if (contractMetadata.name === null) {
+      throw new Error();
+    }
+
+    const contractDisplayName = `${contractMetadata.name}${
+      contractMetadata.symbol ? ` (${contractMetadata.symbol})` : ""
+    }`;
+
+    return contractOGImageTemplate({
+      displayName: contractDisplayName,
+      contractAddress: info.contract.address,
+      chainName: info.chainMetadata.name,
+      logo: contractMetadata.image,
+    });
+  } catch {
+    return contractOGImageTemplate({
+      contractAddress: params.contractAddress,
+      chainName: params.chain_id,
+    });
+  }
+}
+
+function shortenString(str: string) {
+  return `${str.substring(0, 7)}...${str.substring(str.length - 5)}`;
+}
 
 const OgBrandIcon: React.FC = () => (
   // biome-ignore lint/a11y/noSvgWithoutTitle: not needed
@@ -60,9 +93,8 @@ const OgBrandIcon: React.FC = () => (
   </svg>
 );
 
-const MAX_LENGTH = 50;
-
 function textShortener(text: string) {
+  const MAX_LENGTH = 50;
   const words = [];
   let currentLength = 0;
   let shortened = false;
@@ -108,12 +140,21 @@ function replaceAnyIpfsUrlWithGateway(url: string) {
   return url;
 }
 
-export default async function handler(req: NextRequest) {
-  if (req.method !== "GET") {
-    return new Response("Method not allowed", { status: 405 });
-  }
-
-  const contractData = ContractOG.fromUrl(new URL(req.url));
+async function contractOGImageTemplate(params: {
+  logo?: string;
+  displayName?: string;
+  contractAddress: string;
+  chainName: string;
+}) {
+  const inter400_ = fetch(
+    new URL("../../../../../og-lib/fonts/inter/400.ttf", import.meta.url),
+  ).then((res) => res.arrayBuffer());
+  const inter500_ = fetch(
+    new URL("../../../../../og-lib/fonts/inter/500.ttf", import.meta.url),
+  ).then((res) => res.arrayBuffer());
+  const inter700_ = fetch(
+    new URL("../../../../../og-lib/fonts/inter/700.ttf", import.meta.url),
+  ).then((res) => res.arrayBuffer());
 
   const [inter400, inter500, inter700] = await Promise.all([
     inter400_,
@@ -121,6 +162,10 @@ export default async function handler(req: NextRequest) {
     inter700_,
   ]);
 
+  const title =
+    (params.displayName ? textShortener(params.displayName) : "") ||
+    shortenString(params.contractAddress);
+
   return new ImageResponse(
     <div
       tw="w-full h-full flex justify-center py-8 px-8 "
@@ -133,31 +178,33 @@ export default async function handler(req: NextRequest) {
 
       <div tw="flex flex-col my-auto w-full">
         {/* if we have a logo render it */}
-        {contractData.logo && (
+        {params.logo && (
           <img
             alt=""
             tw="w-50 h-50 rounded-lg mb-8 flex mx-auto"
-            src={replaceAnyIpfsUrlWithGateway(contractData.logo)}
+            src={replaceAnyIpfsUrlWithGateway(params.logo)}
           />
         )}
 
-        {contractData.displayName &&
-        contractData.displayName !== contractData.contractAddress ? (
+        {params.displayName && params.displayName !== params.contractAddress ? (
           <h3
             tw="text-2xl font-bold flex text-center my-0 mb-4 mx-auto"
             style={{
               color: "#626262",
             }}
           >
-            {shortenString(contractData.contractAddress)}
+            {shortenString(params.contractAddress)}
           </h3>
         ) : null}
-        <h1 tw="text-6xl text-white font-bold flex text-center my-0 mx-auto">
-          {textShortener(contractData.displayName) ||
-            shortenString(contractData.contractAddress)}
-        </h1>
+
+        {title && (
+          <h1 tw="text-6xl text-white font-bold flex text-center my-0 mx-auto">
+            {title}
+          </h1>
+        )}
+
         <h2 tw="text-4xl text-white opacity-80 font-medium flex text-center my-0 mt-10 mx-auto">
-          {contractData.chainName}
+          {params.chainName}
         </h2>
       </div>
 

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

@@ -0,0 +1,36 @@
+import { ContractOverviewPage } from "contract-ui/tabs/overview/page";
+import { notFound } from "next/navigation";
+import { getContractPageParamsInfo } from "./_utils/getContractFromParams";
+import { getContractPageMetadata } from "./_utils/getContractPageMetadata";
+
+export default async function Page(props: {
+  params: {
+    contractAddress: string;
+    chain_id: string;
+  };
+}) {
+  const info = await getContractPageParamsInfo(props.params);
+
+  if (!info) {
+    notFound();
+  }
+
+  const { contract, chainMetadata } = info;
+  const contractPageMetadata = await getContractPageMetadata(contract);
+
+  return (
+    <ContractOverviewPage
+      contract={contract}
+      hasDirectListings={contractPageMetadata.isDirectListingSupported}
+      hasEnglishAuctions={contractPageMetadata.isEnglishAuctionSupported}
+      isErc1155={contractPageMetadata.supportedERCs.isERC1155}
+      isErc20={contractPageMetadata.supportedERCs.isERC20}
+      isErc721={contractPageMetadata.supportedERCs.isERC721}
+      isPermissionsEnumerable={
+        contractPageMetadata.isPermissionsEnumerableSupported
+      }
+      chainSlug={chainMetadata.slug}
+      isAnalyticsSupported={contractPageMetadata.isAnalyticsSupported}
+    />
+  );
+}

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

@@ -0,0 +1,29 @@
+import { notFound } from "next/navigation";
+import { ContractPermissionsPage } from "../../../../../../contract-ui/tabs/permissions/page";
+import { getContractPageParamsInfo } from "../_utils/getContractFromParams";
+import { getContractPageMetadata } from "../_utils/getContractPageMetadata";
+
+export default async function Page(props: {
+  params: {
+    contractAddress: string;
+    chain_id: string;
+  };
+}) {
+  const info = await getContractPageParamsInfo(props.params);
+
+  if (!info) {
+    notFound();
+  }
+
+  const { contract } = info;
+  const { isPermissionsEnumerableSupported } =
+    await getContractPageMetadata(contract);
+
+  return (
+    <ContractPermissionsPage
+      contract={contract}
+      chainSlug={info.chainMetadata.slug}
+      detectedPermissionEnumerable={isPermissionsEnumerableSupported}
+    />
+  );
+}

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

@@ -0,0 +1,25 @@
+import { notFound, redirect } from "next/navigation";
+import { ContractProposalsPage } from "../../../../../../contract-ui/tabs/proposals/page";
+import { getContractPageParamsInfo } from "../_utils/getContractFromParams";
+import { getContractPageMetadata } from "../_utils/getContractPageMetadata";
+
+export default async function Page(props: {
+  params: {
+    contractAddress: string;
+    chain_id: string;
+  };
+}) {
+  const info = await getContractPageParamsInfo(props.params);
+
+  if (!info) {
+    notFound();
+  }
+
+  const { isVoteContract } = await getContractPageMetadata(info.contract);
+
+  if (!isVoteContract) {
+    redirect(`/${props.params.chain_id}/${props.params.contractAddress}`);
+  }
+
+  return <ContractProposalsPage contract={info.contract} />;
+}

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

@@ -0,0 +1,42 @@
+import { notFound } from "next/navigation";
+import * as CommonExt from "thirdweb/extensions/common";
+import { ContractSettingsPage } from "../../../../../../contract-ui/tabs/settings/page";
+import { getContractPageParamsInfo } from "../_utils/getContractFromParams";
+import { getContractPageMetadata } from "../_utils/getContractPageMetadata";
+
+export default async function Page(props: {
+  params: {
+    contractAddress: string;
+    chain_id: string;
+  };
+}) {
+  const info = await getContractPageParamsInfo(props.params);
+
+  if (!info) {
+    notFound();
+  }
+
+  const { functionSelectors } = await getContractPageMetadata(info.contract);
+
+  return (
+    <ContractSettingsPage
+      contract={info.contract}
+      isContractMetadataSupported={[
+        CommonExt.isGetContractMetadataSupported(functionSelectors),
+        CommonExt.isSetContractMetadataSupported(functionSelectors),
+      ].every(Boolean)}
+      isPrimarySaleSupported={[
+        CommonExt.isPrimarySaleRecipientSupported(functionSelectors),
+        CommonExt.isSetPrimarySaleRecipientSupported(functionSelectors),
+      ].every(Boolean)}
+      isRoyaltiesSupported={[
+        CommonExt.isGetDefaultRoyaltyInfoSupported(functionSelectors),
+        CommonExt.isSetDefaultRoyaltyInfoSupported(functionSelectors),
+      ].every(Boolean)}
+      isPlatformFeesSupported={[
+        CommonExt.isGetPlatformFeeInfoSupported(functionSelectors),
+        CommonExt.isSetPlatformFeeInfoSupported(functionSelectors),
+      ].every(Boolean)}
+    />
+  );
+}

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

@@ -0,0 +1,18 @@
+import { notFound } from "next/navigation";
+import { ContractSourcesPage } from "../../../../../../contract-ui/tabs/sources/page";
+import { getContractPageParamsInfo } from "../_utils/getContractFromParams";
+
+export default async function Page(props: {
+  params: {
+    contractAddress: string;
+    chain_id: string;
+  };
+}) {
+  const info = await getContractPageParamsInfo(props.params);
+
+  if (!info) {
+    notFound();
+  }
+
+  return <ContractSourcesPage contract={info.contract} />;
+}

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

@@ -0,0 +1,25 @@
+import { notFound, redirect } from "next/navigation";
+import { ContractSplitPage } from "../../../../../../contract-ui/tabs/split/page";
+import { getContractPageParamsInfo } from "../_utils/getContractFromParams";
+import { getContractPageMetadata } from "../_utils/getContractPageMetadata";
+
+export default async function Page(props: {
+  params: {
+    contractAddress: string;
+    chain_id: string;
+  };
+}) {
+  const info = await getContractPageParamsInfo(props.params);
+
+  if (!info) {
+    notFound();
+  }
+
+  const { isSplitSupported } = await getContractPageMetadata(info.contract);
+
+  if (!isSplitSupported) {
+    redirect(`/${props.params.chain_id}/${props.params.contractAddress}`);
+  }
+
+  return <ContractSplitPage contract={info.contract} />;
+}

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

@@ -0,0 +1,34 @@
+import { notFound } from "next/navigation";
+import {
+  isClaimToSupported,
+  isMintToSupported,
+} from "thirdweb/extensions/erc20";
+import { ContractTokensPage } from "../../../../../../contract-ui/tabs/tokens/page";
+import { getContractPageParamsInfo } from "../_utils/getContractFromParams";
+import { getContractPageMetadata } from "../_utils/getContractPageMetadata";
+
+export default async function Page(props: {
+  params: {
+    contractAddress: string;
+    chain_id: string;
+  };
+}) {
+  const info = await getContractPageParamsInfo(props.params);
+
+  if (!info) {
+    notFound();
+  }
+
+  const { supportedERCs, functionSelectors } = await getContractPageMetadata(
+    info.contract,
+  );
+
+  return (
+    <ContractTokensPage
+      contract={info.contract}
+      isERC20={supportedERCs.isERC20}
+      isMintToSupported={isMintToSupported(functionSelectors)}
+      isClaimToSupported={isClaimToSupported(functionSelectors)}
+    />
+  );
+}

apps/dashboard/src/app/(dashboard)/(chain)/utils.ts

@@ -37,6 +37,7 @@ import zytronCTA from "./temp-assets/zytronCTA.jpg";
 
 // END TEMPORARY
 
+import { API_SERVER_URL } from "@/constants/env";
 import type { ChainMetadata } from "thirdweb/chains";
 import type {
   ChainMetadataWithServices,
@@ -44,18 +45,15 @@ import type {
   ChainServices,
 } from "./types/chain";
 
-const THIRDWEB_API_HOST =
-  process.env.NEXT_PUBLIC_THIRDWEB_API_HOST || "https://api.thirdweb.com";
-
 export async function getChains() {
   const [chains, chainServices] = await Promise.all([
     fetch(
-      `${THIRDWEB_API_HOST}/v1/chains`,
+      `${API_SERVER_URL}/v1/chains`,
       // revalidate every 60 minutes
       { next: { revalidate: 60 * 60 } },
     ).then((res) => res.json()) as Promise<{ data: ChainMetadata[] }>,
     fetch(
-      `${THIRDWEB_API_HOST}/v1/chains/services`,
+      `${API_SERVER_URL}/v1/chains/services`,
       // revalidate every 60 minutes
       { next: { revalidate: 60 * 60 } },
     ).then((res) => res.json()) as Promise<{
@@ -77,12 +75,12 @@ export async function getChain(
 ): Promise<ChainMetadataWithServices> {
   const [chain, chainServices] = await Promise.all([
     fetch(
-      `${THIRDWEB_API_HOST}/v1/chains/${chainIdOrSlug}`,
+      `${API_SERVER_URL}/v1/chains/${chainIdOrSlug}`,
       // revalidate every 15 minutes
       { next: { revalidate: 15 * 60 } },
     ).then((res) => res.json()) as Promise<{ data: ChainMetadata }>,
     fetch(
-      `${THIRDWEB_API_HOST}/v1/chains/${chainIdOrSlug}/services`,
+      `${API_SERVER_URL}/v1/chains/${chainIdOrSlug}/services`,
       // revalidate every 15 minutes
       { next: { revalidate: 15 * 60 } },
     ).then((res) => res.json()) as Promise<{ data: ChainServices }>,
@@ -237,6 +235,18 @@ const chainMetaRecord = {
       buttonText: "Learn more",
     },
   },
+  // Superposition Mainnet
+  55244: {
+    headerImgUrl: superpositionBanner.src,
+    about:
+      "Superposition is the first blockchain that pays you to use it. It is a DeFi native Layer-3 that focuses on novel incentives and order-flow for growth and value capture for developers and users alike.\n\nSuperpositions includes a native on-chain orderbook with faster execution speeds through Stylus, providing shared and permissionless liquidity for all apps onchain, and Super Assets, which pay yield when you both hold and use them.",
+    cta: {
+      backgroundImageUrl: superpositionCTA.src,
+      title: "The Blockchain that pays you to use it",
+      buttonLink: "https://superposition.so/",
+      buttonText: "Learn more",
+    },
+  },
   // Aleph 0 Mainnet
   41455: {
     headerImgUrl: alephZeroBaner.src,

apps/dashboard/src/app/(dashboard)/dashboard/connect/account-abstraction/AccountAbstractionAPIKeysMenu.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { useDashboardRouter } from "@/lib/DashboardRouter";
+import type { ApiKey } from "@3rdweb-sdk/react/hooks/useApi";
+import { ApiKeysMenu } from "../../../../../components/settings/ApiKeys/Menu";
+
+export function AccountAbstractionAPIKeysMenu(props: {
+  apiKeys: Pick<ApiKey, "name" | "key">[];
+  selectedAPIKey: Pick<ApiKey, "name" | "key">;
+}) {
+  const router = useDashboardRouter();
+  return (
+    <ApiKeysMenu
+      apiKeys={props.apiKeys}
+      selectedKey={props.selectedAPIKey}
+      onSelect={(key) => {
+        router.push(`/dashboard/connect/account-abstraction/${key.key}`);
+      }}
+    />
+  );
+}

apps/dashboard/src/app/(dashboard)/dashboard/connect/account-abstraction/OpChainAlert.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { CircleAlertIcon } from "lucide-react";
+import { useActiveWalletChain } from "thirdweb/react";
+import { isOpChainId } from "../../../../team/[team_slug]/[project_slug]/connect/account-abstraction/isOpChain";
+
+export function OpChainAlert() {
+  const chain = useActiveWalletChain();
+  const isOpChain = chain?.id ? isOpChainId(chain.id) : false;
+
+  if (!isOpChain) {
+    return null;
+  }
+
+  return (
+    <Alert variant="info">
+      <CircleAlertIcon className="size-4" />
+      <AlertTitle>Using the gas credits for OP chain paymaster</AlertTitle>
+      <AlertDescription>
+        Credits will automatically be applied to cover gas fees for any onchain
+        activity across thirdweb services. <br />
+        Eligible chains: OP Mainnet, Base, Zora, Frax, Mode.
+      </AlertDescription>
+    </Alert>
+  );
+}

apps/dashboard/src/app/(dashboard)/dashboard/connect/account-abstraction/PageHeader.tsx

@@ -0,0 +1,25 @@
+import { TrackedLinkTW } from "@/components/ui/tracked-link";
+
+export function PageHeader() {
+  return (
+    <div className="flex flex-col gap-1.5">
+      <h1 className="font-semibold text-2xl tracking-tight lg:text-3xl">
+        Account Abstraction
+      </h1>
+
+      <p className="text-muted-foreground text-sm">
+        Easily integrate Account abstraction (ERC-4337) compliant smart accounts
+        into your apps.{" "}
+        <TrackedLinkTW
+          target="_blank"
+          label="docs-wallets"
+          category="smart-wallet"
+          href="https://portal.thirdweb.com/wallets/smart-wallet"
+          className="text-link-foreground hover:text-foreground"
+        >
+          View Documentation
+        </TrackedLinkTW>
+      </p>
+    </div>
+  );
+}

apps/dashboard/src/app/(dashboard)/dashboard/connect/account-abstraction/[clientId]/page.tsx

@@ -0,0 +1,80 @@
+import { AccountStatus } from "@3rdweb-sdk/react/hooks/useApi";
+import { SmartWalletsBillingAlert } from "components/settings/ApiKeys/Alerts";
+import { ConnectSDKCard } from "components/shared/ConnectSDKCard";
+import { SmartWallets } from "components/smart-wallets";
+import { redirect } from "next/navigation";
+import { getAccount } from "../../../../../account/settings/getAccount";
+import { AccountAbstractionAPIKeysMenu } from "../AccountAbstractionAPIKeysMenu";
+import { OpChainAlert } from "../OpChainAlert";
+import { PageHeader } from "../PageHeader";
+import { getAASupportedAPIKeys } from "../getAASupportedAPIKeys";
+
+export default async function Page(props: {
+  params: {
+    clientId: string;
+  };
+  searchParams: {
+    tab?: string;
+  };
+}) {
+  const { clientId } = props.params;
+  const dashboardAccount = await getAccount();
+
+  if (!dashboardAccount) {
+    redirect(
+      `/login?next=${encodeURIComponent(
+        `/dashboard/connect/account-abstraction/${clientId}`,
+      )}`,
+    );
+  }
+
+  const apiKeys = await getAASupportedAPIKeys();
+  const apiKey = apiKeys.find((key) => key.key === clientId);
+
+  if (!apiKey) {
+    redirect("/dashboard/connect/account-abstraction");
+  }
+
+  const hasSmartWalletsWithoutBilling = apiKeys.find((k) =>
+    k.services?.find(
+      (s) =>
+        dashboardAccount.status !== AccountStatus.ValidPayment &&
+        s.name === "bundler",
+    ),
+  );
+
+  return (
+    <div className="flex flex-col gap-10">
+      <div className="flex flex-col content-start justify-between gap-4 lg:flex-row">
+        <PageHeader />
+
+        <div>
+          <AccountAbstractionAPIKeysMenu
+            apiKeys={apiKeys.map((x) => ({
+              name: x.name,
+              key: x.key,
+            }))}
+            selectedAPIKey={apiKey}
+          />
+        </div>
+      </div>
+
+      {hasSmartWalletsWithoutBilling ? (
+        <SmartWalletsBillingAlert />
+      ) : (
+        <OpChainAlert />
+      )}
+
+      <SmartWallets
+        apiKeyServices={apiKey.services || []}
+        trackingCategory="smart-wallet"
+        defaultTab={props.searchParams.tab === "1" ? 1 : 0}
+      />
+
+      <ConnectSDKCard
+        title="Get Started"
+        description="Add account abstraction to your app with the Connect SDK."
+      />
+    </div>
+  );
+}

apps/dashboard/src/app/(dashboard)/dashboard/connect/account-abstraction/getAASupportedAPIKeys.ts

@@ -0,0 +1,7 @@
+import { getApiKeys } from "../../../../api/lib/getAPIKeys";
+
+export async function getAASupportedAPIKeys() {
+  return (await getApiKeys()).filter((key) => {
+    return !!(key.services || []).find((srv) => srv.name === "bundler");
+  });
+}

apps/dashboard/src/app/(dashboard)/dashboard/connect/account-abstraction/layout.tsx

@@ -0,0 +1,29 @@
+import { ChakraProviderSetup } from "@/components/ChakraProviderSetup";
+import type { Metadata } from "next";
+import { getAbsoluteUrl } from "../../../../../lib/vercel-utils";
+
+export default function Layout(props: { children: React.ReactNode }) {
+  return <ChakraProviderSetup>{props.children}</ChakraProviderSetup>;
+}
+
+const seo = {
+  title: "The Complete Account Abstraction Toolkit | thirdweb",
+  desc: "Add account abstraction to your web3 app & unlock powerful features for seamless onboarding, customizable transactions, & maximum security. Get started.",
+};
+
+export const metadata: Metadata = {
+  title: seo.title,
+  description: seo.desc,
+  openGraph: {
+    title: seo.title,
+    description: seo.desc,
+    images: [
+      {
+        url: `${getAbsoluteUrl()}/assets/og-image/dashboard-wallets-smart-wallet.png`,
+        width: 1200,
+        height: 630,
+        alt: seo.title,
+      },
+    ],
+  },
+};

apps/dashboard/src/app/(dashboard)/dashboard/connect/account-abstraction/page.tsx

@@ -0,0 +1,36 @@
+import { redirect } from "next/navigation";
+import { NoApiKeys } from "../../../../../components/settings/ApiKeys/NoApiKeys";
+import { ConnectSDKCard } from "../../../../../components/shared/ConnectSDKCard";
+import { getAuthToken } from "../../../../api/lib/getAuthToken";
+import { PageHeader } from "./PageHeader";
+import { getAASupportedAPIKeys } from "./getAASupportedAPIKeys";
+
+export default async function Page() {
+  const authToken = getAuthToken();
+
+  if (!authToken) {
+    redirect(
+      `/login?next=${encodeURIComponent("/dashboard/connect/account-abstraction")}`,
+    );
+  }
+
+  const apiKeys = await getAASupportedAPIKeys();
+  const firstKey = apiKeys[0];
+
+  if (firstKey) {
+    redirect(`/dashboard/connect/account-abstraction/${firstKey.key}`);
+  }
+
+  return (
+    <div>
+      <PageHeader />
+      <div className="h-8" />
+      <NoApiKeys service="Account Abstraction" />
+      <div className="h-10" />
+      <ConnectSDKCard
+        title="Get Started"
+        description="Add account abstraction to your app with the Connect SDK."
+      />
+    </div>
+  );
+}

apps/dashboard/src/app/(dashboard)/dashboard/connect/analytics/[clientId]/AnalyticsPageAPIKeysMenu.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import type { ApiKey } from "@3rdweb-sdk/react/hooks/useApi";
+import { useDashboardRouter } from "../../../../../../@/lib/DashboardRouter";
+import { ApiKeysMenu } from "../../../../../../components/settings/ApiKeys/Menu";
+
+export function AnalyticsPageAPIKeysMenu(props: {
+  apiKeys: Pick<ApiKey, "name" | "key">[];
+  selectedAPIKey: Pick<ApiKey, "name" | "key">;
+}) {
+  const router = useDashboardRouter();
+  return (
+    <ApiKeysMenu
+      apiKeys={props.apiKeys}
+      selectedKey={props.selectedAPIKey}
+      onSelect={(key) => {
+        router.push(`/dashboard/connect/analytics/${key.key}`);
+      }}
+    />
+  );
+}

apps/dashboard/src/app/(dashboard)/dashboard/connect/analytics/[clientId]/page.tsx

@@ -0,0 +1,60 @@
+import { redirect } from "next/navigation";
+import { ConnectSDKCard } from "../../../../../../components/shared/ConnectSDKCard";
+import { getApiKeys } from "../../../../../api/lib/getAPIKeys";
+import { getAuthToken } from "../../../../../api/lib/getAuthToken";
+import { ConnectAnalyticsDashboard } from "../../../../../team/[team_slug]/[project_slug]/connect/analytics/ConnectAnalyticsDashboard";
+import { AnalyticsPageAPIKeysMenu } from "./AnalyticsPageAPIKeysMenu";
+
+export default async function Page(props: {
+  params: {
+    clientId: string;
+  };
+}) {
+  const authToken = getAuthToken();
+  const { clientId } = props.params;
+
+  if (!authToken) {
+    redirect(
+      `/login?next=${encodeURIComponent(`/dashboard/connect/analytics/${clientId}`)}`,
+    );
+  }
+
+  const _apiKeys = await getApiKeys();
+  // slimmed down version to reduce client side payload
+  const apiKeys = _apiKeys.map((key) => ({
+    name: key.name,
+    key: key.key,
+  }));
+
+  const apiKey = apiKeys.find((key) => key.key === clientId);
+
+  if (!apiKey) {
+    redirect("/dashboard/connect/analytics");
+  }
+
+  return (
+    <div>
+      <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+        <div>
+          <h1 className="mb-1 font-semibold text-3xl tracking-tight">
+            Connect Analytics
+          </h1>
+          <p className="text-muted-foreground">
+            Visualize how users are connecting to your apps.
+          </p>
+        </div>
+
+        <div>
+          <AnalyticsPageAPIKeysMenu apiKeys={apiKeys} selectedAPIKey={apiKey} />
+        </div>
+      </div>
+
+      <div className="h-4 lg:h-8" />
+
+      <ConnectAnalyticsDashboard clientId={apiKey.key} />
+
+      <div className="h-4 lg:h-8" />
+      <ConnectSDKCard description="Add the Connect SDK to your app to start collecting analytics." />
+    </div>
+  );
+}

apps/dashboard/src/app/(dashboard)/dashboard/connect/analytics/page.tsx

@@ -0,0 +1,61 @@
+import { Button } from "@/components/ui/button";
+import Link from "next/link";
+import { redirect } from "next/navigation";
+import { ConnectSDKCard } from "../../../../../components/shared/ConnectSDKCard";
+import { getApiKeys } from "../../../../api/lib/getAPIKeys";
+import { getAuthToken } from "../../../../api/lib/getAuthToken";
+
+// base page
+// - if no keys -> show no keys page
+// - else redirect to first key
+
+export default async function Page() {
+  const authToken = getAuthToken();
+
+  if (!authToken) {
+    redirect(
+      `/login?next=${encodeURIComponent("/dashboard/connect/analytics")}`,
+    );
+  }
+
+  const apiKeys = await getApiKeys();
+  const firstKey = apiKeys[0];
+
+  if (firstKey) {
+    redirect(`/dashboard/connect/analytics/${firstKey.key}`);
+  }
+
+  return <NoKeysCreatedPage />;
+}
+
+function NoKeysCreatedPage() {
+  return (
+    <div>
+      <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+        <div>
+          <h1 className="mb-1 font-semibold text-3xl tracking-tight">
+            Connect Analytics
+          </h1>
+          <p className="text-muted-foreground">
+            Visualize how users are connecting to your apps.
+          </p>
+        </div>
+      </div>
+
+      <div className="h-4 lg:h-8" />
+
+      <div className="flex flex-col items-center rounded-lg border border-border bg-muted/50 px-4 py-10 lg:px-6">
+        <h3 className="mb-3 font-semibold text-2xl">No API keys found</h3>
+        <p className="mb-6 text-muted-foreground text-sm">
+          Start using the Connect SDK in your app with a free API key.
+        </p>
+        <Button asChild variant="primary">
+          <Link href="/dashboard/settings/api-keys">Create API Key</Link>
+        </Button>
+      </div>
+
+      <div className="h-4 lg:h-8" />
+      <ConnectSDKCard description="Add the Connect SDK to your app to start collecting analytics." />
+    </div>
+  );
+}

apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/utils/fetchEcosystem.ts

@@ -1,14 +1,12 @@
+import { API_SERVER_URL } from "@/constants/env";
 import type { Ecosystem } from "../types";
 
 export async function fetchEcosystem(slug: string, authToken: string) {
-  const res = await fetch(
-    `${process.env.NEXT_PUBLIC_THIRDWEB_API_HOST || "https://api.thirdweb.com"}/v1/ecosystem-wallet/${slug}`,
-    {
-      headers: {
-        Authorization: `Bearer ${authToken}`,
-      },
+  const res = await fetch(`${API_SERVER_URL}/v1/ecosystem-wallet/${slug}`, {
+    headers: {
+      Authorization: `Bearer ${authToken}`,
     },
-  );
+  });
   if (!res.ok) {
     const data = await res.json();
     console.error(data);

apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/utils/fetchEcosystemList.ts

@@ -1,14 +1,12 @@
+import { API_SERVER_URL } from "@/constants/env";
 import type { Ecosystem } from "../types";
 
 export async function fetchEcosystemList(authToken: string) {
-  const res = await fetch(
-    `${process.env.NEXT_PUBLIC_THIRDWEB_API_HOST || "https://api.thirdweb.com"}/v1/ecosystem-wallet/list`,
-    {
-      headers: {
-        Authorization: `Bearer ${authToken}`,
-      },
+  const res = await fetch(`${API_SERVER_URL}/v1/ecosystem-wallet/list`, {
+    headers: {
+      Authorization: `Bearer ${authToken}`,
     },
-  );
+  });
 
   if (!res.ok) {
     const data = await res.json();

apps/dashboard/src/app/(dashboard)/dashboard/connect/in-app-wallets/PageHeader.tsx

@@ -0,0 +1,24 @@
+import { TrackedLinkTW } from "@/components/ui/tracked-link";
+
+export function PageHeader() {
+  return (
+    <div>
+      <h1 className="font-semibold text-3xl tracking-tigher">In-App Wallets</h1>
+      <div className="h-3" />
+      <p className="max-w-[500px] text-muted-foreground ">
+        A wallet infrastructure that enables apps to create, manage, and control
+        their users wallets. Email login, social login, and bring-your-own auth
+        supported.{" "}
+        <TrackedLinkTW
+          target="_blank"
+          href="https://portal.thirdweb.com/connect/in-app-wallet/overview"
+          label="learn-more"
+          category="embedded-wallet"
+          className="text-link-foreground hover:text-foreground"
+        >
+          Learn more
+        </TrackedLinkTW>
+      </p>
+    </div>
+  );
+}

apps/dashboard/src/app/(dashboard)/dashboard/connect/in-app-wallets/[clientId]/page.tsx

@@ -0,0 +1,56 @@
+import { redirect } from "next/navigation";
+import { EmbeddedWallets } from "../../../../../../components/embedded-wallets";
+import { getAuthToken } from "../../../../../api/lib/getAuthToken";
+import { PageHeader } from "../PageHeader";
+import { getInAppWalletSupportedAPIKeys } from "../getInAppWalletSupportedAPIKeys";
+import { InAppWalletsAPIKeysMenu } from "../inAppWalletsAPIKeysMenu";
+
+export default async function Page(props: {
+  params: {
+    clientId: string;
+  };
+  searchParams: {
+    tab?: string;
+  };
+}) {
+  const authToken = getAuthToken();
+  const { clientId } = props.params;
+
+  if (!authToken) {
+    redirect(
+      `/login?next=${encodeURIComponent(`/dashboard/connect/in-app-wallets/${clientId}`)}`,
+    );
+  }
+
+  const apiKeys = await getInAppWalletSupportedAPIKeys();
+  const apiKey = apiKeys.find((key) => key.key === clientId);
+
+  if (!apiKey) {
+    redirect("/dashboard/connect/in-app-wallets");
+  }
+
+  return (
+    <div>
+      {/* header */}
+      <div className="flex flex-col gap-4 lg:flex-row lg:justify-between">
+        <PageHeader />
+        <div>
+          <InAppWalletsAPIKeysMenu
+            apiKeys={apiKeys.map((x) => ({
+              name: x.name,
+              key: x.key,
+            }))}
+            selectedAPIKey={apiKey}
+          />
+        </div>
+      </div>
+
+      <div className="h-8" />
+      <EmbeddedWallets
+        apiKey={apiKey}
+        trackingCategory="embedded-wallet"
+        defaultTab={props.searchParams.tab === "1" ? 1 : 0}
+      />
+    </div>
+  );
+}

apps/dashboard/src/app/(dashboard)/dashboard/connect/in-app-wallets/getInAppWalletSupportedAPIKeys.ts

@@ -0,0 +1,7 @@
+import { getApiKeys } from "../../../../api/lib/getAPIKeys";
+
+export async function getInAppWalletSupportedAPIKeys() {
+  return (await getApiKeys()).filter((key) => {
+    return !!(key.services || []).find((srv) => srv.name === "embeddedWallets");
+  });
+}

apps/dashboard/src/app/(dashboard)/dashboard/connect/in-app-wallets/inAppWalletsAPIKeysMenu.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { useDashboardRouter } from "@/lib/DashboardRouter";
+import type { ApiKey } from "@3rdweb-sdk/react/hooks/useApi";
+import { ApiKeysMenu } from "../../../../../components/settings/ApiKeys/Menu";
+
+export function InAppWalletsAPIKeysMenu(props: {
+  apiKeys: Pick<ApiKey, "name" | "key">[];
+  selectedAPIKey: Pick<ApiKey, "name" | "key">;
+}) {
+  const router = useDashboardRouter();
+  return (
+    <ApiKeysMenu
+      apiKeys={props.apiKeys}
+      selectedKey={props.selectedAPIKey}
+      onSelect={(key) => {
+        router.push(`/dashboard/connect/in-app-wallets/${key.key}`);
+      }}
+    />
+  );
+}

apps/dashboard/src/app/(dashboard)/dashboard/connect/in-app-wallets/layout.tsx

@@ -0,0 +1,17 @@
+import { AnalyticsCallout } from "../../../../team/[team_slug]/[project_slug]/connect/in-app-wallets/_components/AnalyticsCallout";
+import { InAppWaletFooterSection } from "../../../../team/[team_slug]/[project_slug]/connect/in-app-wallets/_components/footer";
+
+export default function Layout(props: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div>
+      {props.children}
+      <div className="h-16" />
+      {/* Footer */}
+      <AnalyticsCallout trackingCategory="embedded-wallet" />
+      <div className="h-5" />
+      <InAppWaletFooterSection trackingCategory="embedded-wallet" />
+    </div>
+  );
+}

apps/dashboard/src/app/(dashboard)/dashboard/connect/in-app-wallets/page.tsx

@@ -0,0 +1,30 @@
+import { redirect } from "next/navigation";
+import { NoApiKeys } from "../../../../../components/settings/ApiKeys/NoApiKeys";
+import { getAuthToken } from "../../../../api/lib/getAuthToken";
+import { PageHeader } from "./PageHeader";
+import { getInAppWalletSupportedAPIKeys } from "./getInAppWalletSupportedAPIKeys";
+
+export default async function Page() {
+  const authToken = getAuthToken();
+
+  if (!authToken) {
+    redirect(
+      `/login?next=${encodeURIComponent("/dashboard/connect/in-app-wallets")}`,
+    );
+  }
+
+  const apiKeys = await getInAppWalletSupportedAPIKeys();
+  const firstKey = apiKeys[0];
+
+  if (firstKey) {
+    redirect(`/dashboard/connect/in-app-wallets/${firstKey.key}`);
+  }
+
+  return (
+    <div>
+      <PageHeader />
+      <div className="h-8" />
+      <NoApiKeys service="in-app wallets" />
+    </div>
+  );
+}

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

@@ -1,7 +1,13 @@
+import { BillingAlerts } from "../../../../components/settings/Account/Billing/alerts/Alert";
 import { ConnectSidebarLayout } from "./DashboardConnectLayout";
 
 export default function Layout(props: {
   children: React.ReactNode;
 }) {
-  return <ConnectSidebarLayout>{props.children}</ConnectSidebarLayout>;
+  return (
+    <ConnectSidebarLayout>
+      <BillingAlerts className="pb-6" />
+      {props.children}
+    </ConnectSidebarLayout>
+  );
 }

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

@@ -1,11 +1,13 @@
 import { AppFooter } from "@/components/blocks/app-footer";
-import { DashboardHeader } from "app/components/Header/DashboardHeader";
 import { ErrorProvider } from "../../contexts/error-handler";
+import { TryTeamsUIBanner } from "../components/DashboardTypeBanner";
+import { DashboardHeader } from "../components/Header/DashboardHeader";
 
 export default function DashboardLayout(props: { children: React.ReactNode }) {
   return (
     <ErrorProvider>
       <div className="flex min-h-screen flex-col bg-background">
+        <TryTeamsUIBanner />
         <DashboardHeader />
         <main className="grow">{props.children}</main>
         <AppFooter />

apps/dashboard/src/app/(dashboard)/published-contract/[publisher]/[contract_id]/layout.tsx

@@ -25,6 +25,13 @@ export async function generateMetadata({ params }: { params: Params }) {
 
   const publishedContract = publishedContracts[0];
 
+  if (!publishedContract) {
+    return {
+      title: `${contract_id} | Published Smart Contract`,
+      description: `Deploy ${contract_id} Smart Contract in one click with thirdweb.`,
+    };
+  }
+
   const publishedContractName =
     publishedContract?.displayName || publishedContract?.name;
 

apps/dashboard/src/app/(dashboard)/published-contract/[publisher]/[contract_id]/page.tsx

@@ -1,5 +1,5 @@
+import { ChakraProviderSetup } from "@/components/ChakraProviderSetup";
 import { Separator } from "@/components/ui/separator";
-import { ChakraProviderSetup } from "../../../../../@/components/ChakraProviderSetup";
 import { PublishedContract } from "../../../../../components/contract-components/published-contract";
 import { PublishedActions } from "../../components/contract-actions-published.client";
 import { DeployContractHeader } from "../../components/contract-header";

apps/dashboard/src/app/(dashboard)/support/components/create-ticket.action.ts

@@ -2,6 +2,7 @@
 import "server-only";
 
 import { COOKIE_ACTIVE_ACCOUNT, COOKIE_PREFIX_TOKEN } from "@/constants/cookie";
+import { API_SERVER_URL } from "@/constants/env";
 import { cookies } from "next/headers";
 import { redirect } from "next/navigation";
 
@@ -11,8 +12,6 @@ type State = {
 };
 
 const UNTHREAD_API_KEY = process.env.UNTHREAD_API_KEY || "";
-const THIRDWEB_API_HOST =
-  process.env.NEXT_PUBLIC_THIRDWEB_API_HOST || "https://api.thirdweb.com";
 
 const planToCustomerId = {
   free: process.env.UNTHREAD_FREE_TIER_ID as string,
@@ -77,7 +76,7 @@ export async function createTicketAction(
     // user is not logged in, make them log in
     redirect(`/login?next=${encodeURIComponent("/support")}`);
   }
-  const accountRes = await fetch(`${THIRDWEB_API_HOST}/v1/account/me`, {
+  const accountRes = await fetch(`${API_SERVER_URL}/v1/account/me`, {
     method: "GET",
     headers: {
       Authorization: `Bearer ${token}`,

apps/dashboard/src/app/(dashboard)/tools/transaction-simulator/components/TransactionSimulator.tsx

@@ -12,10 +12,9 @@ import { ToolTipLabel } from "@/components/ui/tooltip";
 import { useThirdwebClient } from "@/constants/thirdweb.client";
 import type { Abi, AbiFunction } from "abitype";
 import { useV5DashboardChain } from "lib/v5-adapter";
-import { ArrowDown } from "lucide-react";
+import { ArrowDown, WalletIcon } from "lucide-react";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
-import { MdOutlineAccountBalanceWallet } from "react-icons/md";
 import {
   getContract,
   prepareContractCall,
@@ -201,7 +200,7 @@ ${Object.keys(populatedTransaction)
                   size="icon"
                   onClick={() => form.setValue("from", activeAccount.address)}
                 >
-                  <MdOutlineAccountBalanceWallet />
+                  <WalletIcon className="size-4" />
                 </Button>
               </ToolTipLabel>
             )}

apps/dashboard/src/app/account/layout.tsx

@@ -1,8 +1,10 @@
 import { getProjects } from "@/api/projects";
 import { getTeams } from "@/api/team";
+import { DashboardTypeCookieSetter } from "@/components/DashboardTypeCookieSetter";
 import { SidebarLayout } from "@/components/blocks/SidebarLayout";
 import { AppFooter } from "@/components/blocks/app-footer";
 import type React from "react";
+import { TeamsUIBanner } from "../components/DashboardTypeBanner";
 import { TWAutoConnect } from "../components/autoconnect";
 import { AccountHeader } from "./components/AccountHeader";
 
@@ -11,6 +13,7 @@ export default async function AccountLayout(props: {
 }) {
   return (
     <div className="flex min-h-screen flex-col bg-background">
+      <TeamsUIBanner />
       <div className="flex grow flex-col">
         <HeaderAndNav />
         <div className="border-border border-b py-10">
@@ -42,6 +45,7 @@ export default async function AccountLayout(props: {
         </SidebarLayout>
       </div>
       <TWAutoConnect />
+      <DashboardTypeCookieSetter type="team" />
       <AppFooter />
     </div>
   );

apps/dashboard/src/app/account/settings/getAccount.ts

@@ -1,11 +1,10 @@
+import { API_SERVER_URL } from "@/constants/env";
 import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
 import { getAuthToken } from "../../api/lib/getAuthToken";
 
 export async function getAccount() {
   const authToken = getAuthToken();
-  const apiServerURL = new URL(
-    process.env.NEXT_PUBLIC_THIRDWEB_API_HOST || "https://api.thirdweb.com",
-  );
+  const apiServerURL = new URL(API_SERVER_URL);
 
   apiServerURL.pathname = "/v1/account/me";
 

apps/dashboard/src/app/api/auth/ensure-login/route.ts

@@ -1,11 +1,9 @@
 import { COOKIE_ACTIVE_ACCOUNT, COOKIE_PREFIX_TOKEN } from "@/constants/cookie";
+import { API_SERVER_URL } from "@/constants/env";
 import { cookies } from "next/headers";
 import { type NextRequest, NextResponse } from "next/server";
 import { getAddress } from "thirdweb/utils";
 
-const THIRDWEB_API_HOST =
-  process.env.NEXT_PUBLIC_THIRDWEB_API_HOST || "https://api.thirdweb.com";
-
 export type EnsureLoginPayload = {
   pathname: string;
   address?: string;
@@ -56,7 +54,7 @@ export const GET = async (req: NextRequest) => {
   }
 
   // check that the token is valid by checking for the user account
-  const accountRes = await fetch(`${THIRDWEB_API_HOST}/v1/account/me`, {
+  const accountRes = await fetch(`${API_SERVER_URL}/v1/account/me`, {
     method: "GET",
     headers: {
       Authorization: `Bearer ${token}`,

apps/dashboard/src/app/api/auth/get-auth-token/route.ts

@@ -1,11 +1,9 @@
 import { COOKIE_PREFIX_TOKEN } from "@/constants/cookie";
+import { API_SERVER_URL } from "@/constants/env";
 import { cookies } from "next/headers";
 import { type NextRequest, NextResponse } from "next/server";
 import { getAddress } from "thirdweb/utils";
 
-const THIRDWEB_API_HOST =
-  process.env.NEXT_PUBLIC_THIRDWEB_API_HOST || "https://api.thirdweb.com";
-
 export type GetAuthTokenResponse = {
   jwt: string | null;
 };
@@ -43,7 +41,7 @@ export const GET = async (req: NextRequest) => {
   }
 
   // check token validity
-  const accountRes = await fetch(`${THIRDWEB_API_HOST}/v1/account/me`, {
+  const accountRes = await fetch(`${API_SERVER_URL}/v1/account/me`, {
     method: "GET",
     headers: {
       Authorization: `Bearer ${token}`,

apps/dashboard/src/app/api/lib/getAPIKeys.ts

@@ -1,3 +1,4 @@
+import { API_SERVER_URL } from "@/constants/env";
 import type { ApiKey } from "@3rdweb-sdk/react/hooks/useApi";
 import { getAuthToken } from "./getAuthToken";
 
@@ -36,17 +37,14 @@ export async function getAPIKey(apiKeyId: string) {
 
 export async function getApiKeys() {
   const authToken = getAuthToken();
-  const res = await fetch(
-    `${process.env.NEXT_PUBLIC_THIRDWEB_API_HOST || "https://api.thirdweb.com"}/v1/keys`,
-    {
-      method: "GET",
 
-      headers: {
-        "Content-Type": "application/json",
-        Authorization: `Bearer ${authToken}`,
-      },
+  const res = await fetch(`${API_SERVER_URL}/v1/keys`, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${authToken}`,
     },
-  );
+  });
   const json = await res.json();
 
   if (json.error) {
@@ -55,3 +53,11 @@ export async function getApiKeys() {
 
   return json.data as ApiKey[];
 }
+
+export function getAPIKeyForProjectId(projectId: string) {
+  if (projectId.startsWith("prj_")) {
+    return getAPIKey(projectId.slice("prj_".length));
+  }
+
+  return getAPIKey(projectId);
+}

apps/dashboard/src/app/components/DashboardTypeBanner.tsx

@@ -0,0 +1,21 @@
+import { AnnouncementBanner } from "../../components/notices/AnnouncementBanner";
+
+export function TeamsUIBanner() {
+  return (
+    <AnnouncementBanner
+      label="You are exploring the new dashboard. Click here to go back to the legacy dashboard."
+      href="/dashboard"
+      trackingLabel="old-dashboard"
+    />
+  );
+}
+
+export function TryTeamsUIBanner() {
+  return (
+    <AnnouncementBanner
+      label="Explore the new teams dashboard. Now in Beta."
+      href="/team"
+      trackingLabel="team-dashboard"
+    />
+  );
+}

apps/dashboard/src/app/components/Header/DashboardHeader.tsx

@@ -1,68 +1,101 @@
-import { ColorModeToggle } from "@/components/color-mode-toggle";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { NavLink } from "@/components/ui/NavLink";
+import { Button } from "@/components/ui/button";
 import { CustomConnectWallet } from "@3rdweb-sdk/react/components/connect-wallet";
-import { ClientOnly } from "components/ClientOnly/ClientOnly";
+import { CmdKSearch } from "components/cmd-k-search";
+import { ColorModeToggle } from "components/color-mode/color-mode-toggle";
+import { Logo } from "components/logo";
+import { CreditsButton } from "components/settings/Account/Billing/CreditsButton";
+import { UpgradeButton } from "components/settings/Account/Billing/UpgradeButton";
+import { CircleHelpIcon } from "lucide-react";
 import Link from "next/link";
-import { ThirdwebMiniLogo } from "../ThirdwebMiniLogo";
-import { NavLink } from "../nav-link.client";
-import { MobileBurgerMenu } from "./MobileBurgerMenu";
-import { headerLinks } from "./headerLinks";
+import { Suspense } from "react";
+import { DashboardHeaderTabs } from "./DashboardHeaderTabs";
 
-export function DashboardHeader() {
+export const DashboardHeader: React.FC = () => {
   return (
-    // the "h-24" avoids layout shift when connecting wallet (connected wallet button is taller than disconnected...)
-    <header className="flex h-20 flex-shrink-0 flex-row items-center justify-between border-border border-b bg-muted/50 px-4 py-4 md:h-20 lg:px-6">
-      {/* Left */}
-      <div className="flex items-center gap-6">
-        <div className="flex items-center gap-2">
-          <MobileBurgerMenu />
+    <div className="bg-muted/50">
+      <header className="flex items-center justify-between px-4 py-3 lg:px-6">
+        {/* left */}
+        <div className="flex items-center gap-4">
           <Link href="/dashboard">
-            <ThirdwebMiniLogo className="h-6" />
+            <Logo hideWordmark />
           </Link>
+          <CmdKSearch />
         </div>
 
-        <div className="hidden items-center gap-2 md:flex">
-          {headerLinks.left.map((link) => (
-            <NavLink
-              key={link.href}
-              href={link.href}
-              target={link.href.startsWith("https") ? "_blank" : undefined}
-              className="px-[10px] py-2 font-normal text-muted-foreground text-sm hover:text-foreground"
-              activeClassName="font-medium text-foreground"
-            >
-              {link.name}
-            </NavLink>
-          ))}
-        </div>
-      </div>
-      {/* Right */}
-      <div className="flex items-center gap-4">
-        <div className="items-center gap-2 lg:flex">
-          <div className="hidden items-center gap-2 lg:flex">
-            {headerLinks.right.map((link) => (
-              <Link
-                key={link.href}
-                href={link.href}
-                target={link.href.startsWith("https") ? "_blank" : undefined}
-                className="px-[10px] py-2 font-normal text-muted-foreground text-sm hover:text-foreground"
-              >
-                {link.name}
-              </Link>
-            ))}
+        {/* Right */}
+        <div className="flex items-center gap-2">
+          <div className="hidden gap-2 md:flex">
+            <Suspense fallback={null}>
+              <CreditsButton />
+            </Suspense>
+            <UpgradeButton />
           </div>
-          <ColorModeToggle />
-        </div>
 
-        <ClientOnly
-          ssr={
-            <div className="flex h-[48px] w-[144px] items-center justify-center rounded-lg border bg-muted/50">
-              <Spinner className="size-4" />
-            </div>
-          }
-        >
-          <CustomConnectWallet />
-        </ClientOnly>
-      </div>
-    </header>
+          <HeaderNavLink
+            trackingLabel="chainlist"
+            href="/chainlist"
+            label="Chainlist"
+          />
+
+          <HeaderNavLink
+            trackingLabel="docs"
+            href="https://portal.thirdweb.com"
+            label="Docs"
+          />
+
+          <HeaderNavLink
+            trackingLabel="support"
+            href="/support"
+            label="Support"
+          />
+
+          <div className="md:hidden">
+            <Button asChild variant="ghost">
+              <NavLink
+                className="fade-in-0 !h-auto !w-auto p-2"
+                href="/support"
+                tracking={{
+                  category: "header",
+                  action: "click",
+                  label: "support",
+                }}
+              >
+                <CircleHelpIcon className="size-5" />
+              </NavLink>
+            </Button>
+          </div>
+
+          <ColorModeToggle />
+
+          <div className="md:ml-2">
+            <CustomConnectWallet />
+          </div>
+        </div>
+      </header>
+
+      <DashboardHeaderTabs />
+    </div>
+  );
+};
+
+function HeaderNavLink(props: {
+  label: string;
+  trackingLabel: string;
+  href: string;
+}) {
+  return (
+    <NavLink
+      href={props.href}
+      tracking={{
+        category: "header",
+        action: "click",
+        label: props.trackingLabel,
+      }}
+      className="hidden px-2.5 text-muted-foreground text-sm hover:text-foreground md:block"
+      activeClassName="text-foreground"
+    >
+      {props.label}
+    </NavLink>
   );
 }

apps/dashboard/src/app/components/Header/DashboardHeaderTabs.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { TabLinks } from "@/components/ui/tabs";
+import { usePathname } from "next/navigation";
+
+export function DashboardHeaderTabs() {
+  const pathname = usePathname() || "";
+  return (
+    <TabLinks
+      className="w-full"
+      tabContainerClassName="px-4"
+      shadowColor="transparent"
+      links={[
+        {
+          href: "/dashboard",
+          name: "Home",
+          isActive: pathname === "/dashboard",
+        },
+        {
+          href: "/dashboard/connect/analytics",
+          name: "Connect",
+          isActive: pathname.startsWith("/dashboard/connect"),
+        },
+        {
+          href: "/dashboard/contracts/deploy",
+          name: "Contracts",
+          isActive: pathname.startsWith("/dashboard/contracts"),
+        },
+        {
+          href: "/dashboard/engine",
+          name: "Engine",
+          isActive: pathname.startsWith("/dashboard/engine"),
+        },
+        {
+          href: "/dashboard/settings/api-keys",
+          name: "Settings",
+          isActive: pathname.startsWith("/dashboard/settings"),
+        },
+      ]}
+    />
+  );
+}

apps/dashboard/src/app/components/Header/MobileBurgerMenu.tsx

@@ -1,66 +0,0 @@
-"use client";
-
-import { Button } from "@/components/ui/button";
-import { useIsomorphicLayoutEffect } from "@/lib/useIsomorphicLayoutEffect";
-import { Menu, XIcon } from "lucide-react";
-import Link from "next/link";
-import { useState } from "react";
-import { headerLinks } from "./headerLinks";
-
-export function MobileBurgerMenu() {
-  const [showBurgerMenu, setShowBurgerMenu] = useState(false);
-
-  useIsomorphicLayoutEffect(() => {
-    if (showBurgerMenu) {
-      // eslint-disable-next-line react-compiler/react-compiler
-      document.body.style.overflow = "hidden";
-    } else {
-      document.body.style.overflow = "auto";
-    }
-  }, [showBurgerMenu]);
-
-  useIsomorphicLayoutEffect(() => {
-    return () => {
-      document.body.style.overflow = "auto";
-    };
-  });
-
-  return (
-    <>
-      <Button
-        variant="outline"
-        size="icon"
-        className="md:hidden"
-        onClick={() => setShowBurgerMenu(!showBurgerMenu)}
-      >
-        <Menu strokeWidth={1} />
-      </Button>
-
-      {showBurgerMenu && (
-        <nav className="fade-in-20 slide-in-from-top-3 fixed inset-0 top-[80px] z-50 animate-in border-t bg-background p-6">
-          <Button
-            variant="ghost"
-            size="icon"
-            className="absolute top-6 right-6"
-            onClick={() => setShowBurgerMenu(false)}
-          >
-            <XIcon strokeWidth={1} />
-          </Button>
-
-          <div className="flex flex-col gap-7">
-            {[...headerLinks.left, ...headerLinks.right].map((link) => (
-              <Link
-                key={link.href}
-                href={link.href}
-                className="text-lg "
-                target={link.href.startsWith("https") ? "_blank" : undefined}
-              >
-                {link.name}
-              </Link>
-            ))}
-          </div>
-        </nav>
-      )}
-    </>
-  );
-}

apps/dashboard/src/app/components/Header/headerLinks.ts

@@ -1,34 +0,0 @@
-export const headerLinks = {
-  left: [
-    {
-      name: "Connect",
-      href: "/dashboard/connect/analytics",
-    },
-    {
-      name: "Contracts",
-      href: "/dashboard/contracts",
-    },
-    {
-      name: "Engine",
-      href: "/dashboard/engine",
-    },
-    {
-      name: "Settings",
-      href: "/dashboard/settings/api-keys",
-    },
-  ],
-  right: [
-    {
-      name: "Chainlist",
-      href: "/chainlist",
-    },
-    {
-      name: "Docs",
-      href: "https://portal.thirdweb.com",
-    },
-    {
-      name: "Support",
-      href: "https://thirdweb.com/support",
-    },
-  ],
-};