Version Packages (#4365)

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

.gitignore

@@ -30,3 +30,6 @@ sitemap*.xml
 # typedoc
 legacy_packages/*/typedoc/*
 packages/*/typedoc/*
+
+*storybook.log
+storybook-static

apps/dashboard/.eslintrc.js

@@ -5,6 +5,7 @@ module.exports = {
     "plugin:import/typescript",
     "plugin:@next/next/recommended",
     "plugin:promise/recommended",
+    "plugin:storybook/recommended"
   ],
   rules: {
     "react-compiler/react-compiler": "error",

apps/dashboard/.storybook/main.ts

@@ -0,0 +1,31 @@
+import { dirname, join } from "node:path";
+import type { StorybookConfig } from "@storybook/nextjs";
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string): string {
+  return dirname(require.resolve(join(value, "package.json")));
+}
+const config: StorybookConfig = {
+  stories: ["../src/**/*.stories.tsx"],
+  addons: [
+    getAbsolutePath("@storybook/addon-onboarding"),
+    getAbsolutePath("@storybook/addon-links"),
+    getAbsolutePath("@storybook/addon-essentials"),
+    getAbsolutePath("@chromatic-com/storybook"),
+    getAbsolutePath("@storybook/addon-interactions"),
+  ],
+  framework: {
+    name: getAbsolutePath("@storybook/nextjs"),
+    options: {},
+  },
+  refs: {
+    "@chakra-ui/react": {
+      disable: true,
+    },
+  },
+  staticDirs: ["../public"],
+};
+export default config;

apps/dashboard/.storybook/preview.tsx

@@ -0,0 +1,78 @@
+import type { Preview } from "@storybook/react";
+import "@/styles/globals.css";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { MoonIcon, SunIcon } from "lucide-react";
+import { Inter as interFont } from "next/font/google";
+// biome-ignore lint/style/useImportType: <explanation>
+import React, { useState } from "react";
+import { useEffect } from "react";
+import { Button } from "../src/@/components/ui/button";
+
+// Note: Wrapping the Stoy with AppRouterProviders makes the storybook server time SUPER SLOW
+// so let's just not have it there - all stories should be independent from context anyway and just rely on props
+
+const queryClient = new QueryClient();
+
+const fontSans = interFont({
+  subsets: ["latin"],
+  variable: "--font-sans",
+});
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+
+  decorators: [
+    (Story) => {
+      return (
+        <StoryLayout>
+          <Story />
+        </StoryLayout>
+      );
+    },
+  ],
+};
+
+export default preview;
+
+function StoryLayout(props: {
+  children: React.ReactNode;
+}) {
+  const [theme, setTheme] = useState<"light" | "dark">("dark");
+
+  useEffect(() => {
+    document.body.className = `font-sans antialiased ${fontSans.variable} ${theme === "dark" ? " dark" : ""}`;
+  }, [theme]);
+
+  return (
+    <div>
+      <div className="flex justify-end p-4 border-b gap-2">
+        <Button
+          onClick={() => setTheme("dark")}
+          size="sm"
+          variant={theme === "dark" ? "default" : "ghost"}
+        >
+          <MoonIcon className="size-5" />
+        </Button>
+
+        <Button
+          onClick={() => setTheme("light")}
+          size="sm"
+          variant={theme === "light" ? "default" : "ghost"}
+        >
+          <SunIcon className="size-5" />
+        </Button>
+      </div>
+
+      <QueryClientProvider client={queryClient}>
+        {props.children}
+      </QueryClientProvider>
+    </div>
+  );
+}

apps/dashboard/next.config.js

@@ -5,8 +5,8 @@ const ContentSecurityPolicy = `
   img-src * data: blob:;
   media-src * data: blob:;
   object-src 'none';
-  style-src 'self' 'unsafe-inline';
-  font-src 'self';
+  style-src 'self' 'unsafe-inline' https://vercel.live;
+  font-src 'self' https://vercel.live https://assets.vercel.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 pg.paper.xyz portal.usecontext.io;
   connect-src * data: blob:;

apps/dashboard/package.json

@@ -18,7 +18,9 @@
     "build:analyze": "ANALYZE=true pnpm run build",
     "knip": "knip",
     "playwright": "playwright test",
-    "update-checkly": "npx checkly deploy"
+    "update-checkly": "npx checkly deploy",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
     "@chakra-ui/react": "^2.8.2",
@@ -46,11 +48,10 @@
     "@radix-ui/react-tooltip": "1.1.2",
     "@react-icons/all-files": "^4.1.0",
     "@sentry/nextjs": "^8.26.0",
+    "@shazow/whatsabi": "^0.14.1",
     "@stripe/react-stripe-js": "^2.7.3",
     "@stripe/stripe-js": "^3.5.0",
-    "@tanstack/query-async-storage-persister": "^4.36.1",
     "@tanstack/react-query": "^4.36.1",
-    "@tanstack/react-query-persist-client": "^4.36.1",
     "@tanstack/react-table": "^8.17.3",
     "@thirdweb-dev/react": "workspace:*",
     "@thirdweb-dev/sdk": "workspace:*",
@@ -68,7 +69,6 @@
     "flat": "^6.0.1",
     "framer-motion": "^11.2.12",
     "fuse.js": "7.0.0",
-    "idb-keyval": "^6.2.1",
     "ioredis": "^5.4.1",
     "ipaddr.js": "^2.2.0",
     "lottie-react": "^2.4.0",
@@ -82,13 +82,11 @@
     "pluralize": "^8.0.0",
     "posthog-js": "1.128.3",
     "posthog-js-opensource": "npm:[email protected]",
-    "prettier": "^3.3.2",
     "prism-react-renderer": "^2.3.1",
     "prismjs": "^1.29.0",
     "qrcode": "^1.5.3",
     "react": "18.3.1",
     "react-children-utilities": "^2.10.0",
-    "react-confetti": "^6.1.0",
     "react-day-picker": "^8.10.1",
     "react-dom": "18.3.1",
     "react-dropzone": "^14.2.3",
@@ -117,9 +115,19 @@
   },
   "devDependencies": {
     "@chakra-ui/cli": "^2.4.1",
+    "@chromatic-com/storybook": "^1.5.0",
     "@next/bundle-analyzer": "^14.2.4",
     "@next/eslint-plugin-next": "^14.2.4",
     "@playwright/test": "1.44.1",
+    "@storybook/addon-essentials": "^8.2.9",
+    "@storybook/addon-interactions": "^8.2.9",
+    "@storybook/addon-links": "^8.2.9",
+    "@storybook/addon-onboarding": "^8.2.9",
+    "@storybook/addon-viewport": "^8.2.9",
+    "@storybook/blocks": "^8.2.9",
+    "@storybook/nextjs": "^8.2.9",
+    "@storybook/react": "^8.2.9",
+    "@storybook/test": "^8.2.9",
     "@types/color": "^3.0.6",
     "@types/node": "20.14.9",
     "@types/papaparse": "^5.3.14",
@@ -133,21 +141,17 @@
     "@typescript-eslint/eslint-plugin": "7.14.1",
     "@typescript-eslint/parser": "7.14.1",
     "autoprefixer": "^10.4.19",
-    "checkly": "^4.7.0",
-    "dotenv": "^16.4.5",
+    "checkly": "^4.8.1",
     "eslint": "8.57.0",
     "eslint-config-biome": "^1.7.3",
-    "eslint-config-prettier": "9.1.0",
     "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-inclusive-language": "^2.2.1",
-    "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-promise": "^6.2.0",
-    "eslint-plugin-react": "7.34.3",
     "eslint-plugin-react-compiler": "0.0.0-experimental-51a85ea-20240601",
-    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-storybook": "^0.8.0",
     "knip": "^5.23.1",
     "next-sitemap": "^4.2.3",
     "next-unused": "^0.0.6",
+    "storybook": "^8.2.9",
     "tailwindcss": "^3.4.10",
     "typescript": "5.5.4"
   },

apps/dashboard/redirects.js

@@ -131,12 +131,17 @@ function redirects() {
     },
     {
       source: "/dashboard/connect",
-      destination: "/dashboard/connect/playground",
+      destination: "/dashboard/connect/analytics",
+      permanent: false,
+    },
+    {
+      source: "/dashboard/connect/playground",
+      destination: "https://playground.thirdweb.com/connect/sign-in/button",
       permanent: false,
     },
     {
       source: "/dashboard/wallet",
-      destination: "/dashboard/connect/playground",
+      destination: "https://playground.thirdweb.com/connect/sign-in/button",
       permanent: false,
     },
     {
@@ -161,7 +166,7 @@ function redirects() {
     },
     {
       source: "/dashboard/wallets",
-      destination: "/dashboard/connect/playground",
+      destination: "https://playground.thirdweb.com/connect/sign-in/button",
       permanent: false,
     },
     {
@@ -181,7 +186,7 @@ function redirects() {
     },
     {
       source: "/dashboard/wallets/connect",
-      destination: "/dashboard/connect/playground",
+      destination: "https://playground.thirdweb.com/connect/sign-in/button",
       permanent: false,
     },
     {

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

@@ -0,0 +1,73 @@
+import "server-only";
+import { COOKIE_ACTIVE_ACCOUNT, COOKIE_PREFIX_TOKEN } from "@/constants/cookie";
+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;
+  createdAt: Date;
+  updatedAt: Date;
+  deletedAt: Date | null;
+  bannedAt: Date | null;
+  domains: string[];
+  bundleIds: string[];
+  redirectUrls: string[];
+  lastAccessedAt: Date | null;
+  slug: string;
+  teamId: string;
+  publishableKey: string;
+  // image: string; // TODO
+};
+
+export async function getProjects(teamSlug: string) {
+  const cookiesManager = cookies();
+  const activeAccount = cookiesManager.get(COOKIE_ACTIVE_ACCOUNT)?.value;
+  const token = activeAccount
+    ? cookiesManager.get(COOKIE_PREFIX_TOKEN + activeAccount)?.value
+    : null;
+
+  if (!token) {
+    return [];
+  }
+
+  const teamsRes = await fetch(
+    `${THIRDWEB_API_HOST}/v1/teams/${teamSlug}/projects`,
+    {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    },
+  );
+  if (teamsRes.ok) {
+    return (await teamsRes.json())?.result as Project[];
+  }
+  return [];
+}
+
+export async function getProject(teamSlug: string, projectSlug: string) {
+  const cookiesManager = cookies();
+  const activeAccount = cookiesManager.get(COOKIE_ACTIVE_ACCOUNT)?.value;
+  const token = activeAccount
+    ? cookiesManager.get(COOKIE_PREFIX_TOKEN + activeAccount)?.value
+    : null;
+
+  if (!token) {
+    return null;
+  }
+
+  const teamsRes = await fetch(
+    `${THIRDWEB_API_HOST}/v1/teams/${teamSlug}/projects/${projectSlug}`,
+    {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    },
+  );
+  if (teamsRes.ok) {
+    return (await teamsRes.json())?.result as Project;
+  }
+  return null;
+}

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

@@ -0,0 +1,53 @@
+import "server-only";
+import { COOKIE_ACTIVE_ACCOUNT, COOKIE_PREFIX_TOKEN } from "@/constants/cookie";
+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",
+} as const;
+
+export type TeamAccountRole =
+  (typeof TeamAccountRole)[keyof typeof TeamAccountRole];
+
+export type TeamMember = {
+  account: {
+    name: string;
+    email: string | null;
+  };
+} & {
+  deletedAt: Date | null;
+  accountId: string;
+  teamId: string;
+  createdAt: Date;
+  updatedAt: Date;
+  role: TeamAccountRole;
+};
+
+export async function getMembers(teamSlug: string) {
+  const cookiesManager = cookies();
+  const activeAccount = cookiesManager.get(COOKIE_ACTIVE_ACCOUNT)?.value;
+  const token = activeAccount
+    ? cookiesManager.get(COOKIE_PREFIX_TOKEN + activeAccount)?.value
+    : null;
+
+  if (!token) {
+    return [];
+  }
+
+  const teamsRes = await fetch(
+    `${THIRDWEB_API_HOST}/v1/teams/${teamSlug}/members`,
+    {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    },
+  );
+  if (teamsRes.ok) {
+    return (await teamsRes.json())?.result as TeamMember[];
+  }
+  return [];
+}

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

@@ -0,0 +1,69 @@
+import "server-only";
+import { COOKIE_ACTIVE_ACCOUNT, COOKIE_PREFIX_TOKEN } from "@/constants/cookie";
+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
+  billingPlan: "pro" | "growth" | "free";
+  billingStatus: "validPayment" | (string & {}); // what's the other value?
+  // billingEmail: string;
+  // billingExternalId: string;
+  // billingType: "STRIPE" | ??
+  // billingCustomerPayload: ?? | null
+  // paymentAttemptCount: number
+  // trialPeriodEndedAt: string | null;
+};
+
+export async function getTeamBySlug(slug: string) {
+  const cookiesManager = cookies();
+  const activeAccount = cookiesManager.get(COOKIE_ACTIVE_ACCOUNT)?.value;
+  const token = activeAccount
+    ? cookiesManager.get(COOKIE_PREFIX_TOKEN + activeAccount)?.value
+    : null;
+
+  if (!token) {
+    return null;
+  }
+
+  const teamRes = await fetch(`${THIRDWEB_API_HOST}/v1/teams/${slug}`, {
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
+  });
+  if (teamRes.ok) {
+    return (await teamRes.json())?.result as Team;
+  }
+  return null;
+}
+
+export async function getTeams() {
+  const cookiesManager = cookies();
+  const activeAccount = cookiesManager.get(COOKIE_ACTIVE_ACCOUNT)?.value;
+  const token = activeAccount
+    ? cookiesManager.get(COOKIE_PREFIX_TOKEN + activeAccount)?.value
+    : null;
+
+  if (!token) {
+    return [];
+  }
+
+  const teamsRes = await fetch(`${THIRDWEB_API_HOST}/v1/teams`, {
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
+  });
+  if (teamsRes.ok) {
+    return (await teamsRes.json())?.result as Team[];
+  }
+  return [];
+}

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

@@ -2,24 +2,20 @@
 
 import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
-import { MenuIcon } from "lucide-react";
 import { useState } from "react";
 import { NavLink } from "../ui/NavLink";
 
-export function BurgerMenuButton(props: {
+export function MobileSidebar(props: {
   links?: { href: string; label: React.ReactNode }[];
   footer?: React.ReactNode;
+  trigger: React.ReactNode;
 }) {
   const [isOpen, setIsOpen] = useState(false);
   return (
     <Dialog open={isOpen} onOpenChange={setIsOpen}>
-      <DialogTrigger asChild>
-        <Button size="icon" variant="outline">
-          <MenuIcon strokeWidth={1} />
-        </Button>
-      </DialogTrigger>
+      <DialogTrigger asChild>{props.trigger}</DialogTrigger>
       <DialogContent
-        className="p-6 rounded-xl"
+        className="p-4 rounded-t-xl rounded-b-none"
         dialogCloseClassName="hidden"
         onClick={(e) => {
           if (e.target instanceof HTMLAnchorElement) {

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

@@ -4,7 +4,7 @@ import { NavLink } from "../ui/NavLink";
 
 export type SidebarContentProps = {
   header?: React.ReactNode;
-  links?: { href: string; label: React.ReactNode }[];
+  links: { href: string; label: React.ReactNode; exactMatch?: boolean }[];
   className?: string;
 };
 
@@ -22,6 +22,7 @@ export function Sidebar(props: SidebarContentProps) {
               href={link.href}
               className="text-sm py-1.5 pl-4 text-muted-foreground hover:text-foreground border-l-2 ml-[-2px] border-transparent hover:border-foreground transition-colors"
               activeClassName="text-foreground border-link-foreground"
+              exactMatch={link.exactMatch}
             >
               {link.label}
             </NavLink>

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

@@ -21,7 +21,7 @@ export function AppFooter(props: AppFooterProps) {
   return (
     <footer
       className={cn(
-        "bg-background border-t border-border py-6 md:py-8 w-full",
+        "bg-muted/50 border-t border-border py-6 md:py-8 w-full",
         props.className,
       )}
     >
@@ -30,22 +30,22 @@ export function AppFooter(props: AppFooterProps) {
         <div className="flex flex-col md:flex-row gap-4 md:justify-between md:items-center">
           <div className="flex flex-row gap-3 items-center">
             <ThirdwebMiniLogo className="h-7" />
-            <p className="text-sm text-secondary-foreground">© 2024 thirdweb</p>
+            <p className="text-sm text-muted-foreground">© 2024 thirdweb</p>
           </div>
           <div className="flex flex-row gap-3">
             <Button size="icon" variant="ghost" asChild className="size-9">
               <Link href="https://github.com/thirdweb-dev" target="_blank">
-                <SiGithub className="text-secondary-foreground size-5" />
+                <SiGithub className="text-muted-foreground size-5" />
               </Link>
             </Button>
             <Button size="icon" variant="ghost" asChild className="size-9">
               <Link href="https://www.tiktok.com/@thirdweb" target="_blank">
-                <SiTiktok className="text-secondary-foreground size-5" />
+                <SiTiktok className="text-muted-foreground size-5" />
               </Link>
             </Button>
             <Button size="icon" variant="ghost" asChild className="size-9">
               <Link href="https://www.instagram.com/thirdweb/" target="_blank">
-                <SiInstagram className="text-secondary-foreground size-5" />
+                <SiInstagram className="text-muted-foreground size-5" />
               </Link>
             </Button>
             <Button size="icon" variant="ghost" asChild className="size-9">
@@ -53,27 +53,27 @@ export function AppFooter(props: AppFooterProps) {
                 href="hhttps://www.linkedin.com/company/third-web/"
                 target="_blank"
               >
-                <SiLinkedin className="text-secondary-foreground size-5" />
+                <SiLinkedin className="text-muted-foreground size-5" />
               </Link>
             </Button>
             <Button size="icon" variant="ghost" asChild className="size-9">
               <Link href="https://www.youtube.com/@thirdweb_" target="_blank">
-                <SiYoutube className="text-secondary-foreground size-5" />
+                <SiYoutube className="text-muted-foreground size-5" />
               </Link>
             </Button>
             <Button size="icon" variant="ghost" asChild className="size-9">
               <Link href="https://discord.gg/thirdweb" target="_blank">
-                <SiDiscord className="text-secondary-foreground size-5" />
+                <SiDiscord className="text-muted-foreground size-5" />
               </Link>
             </Button>
             <Button size="icon" variant="ghost" asChild className="size-9">
               <Link href="https://www.reddit.com/r/thirdweb/" target="_blank">
-                <SiReddit className="text-secondary-foreground size-5" />
+                <SiReddit className="text-muted-foreground size-5" />
               </Link>
             </Button>
             <Button size="icon" variant="ghost" asChild className="size-9">
               <Link href="https://x.com/thirdweb" target="_blank">
-                <SiX className="text-secondary-foreground size-5" />
+                <SiX className="text-muted-foreground size-5" />
               </Link>
             </Button>
           </div>
@@ -81,55 +81,55 @@ export function AppFooter(props: AppFooterProps) {
         {/* bottom row */}
         <div className="grid grid-rows-5 grid-cols-2 grid-flow-col gap-2 md:flex md:flex-row md:justify-between">
           <Link
-            className="py-[6px] px-[10px] text-secondary-foreground text-sm hover:underline"
+            className="py-[6px] px-[10px] text-muted-foreground text-sm hover:underline"
             href="/"
           >
             Home
           </Link>
           <Link
-            className="py-[6px] px-[10px] text-secondary-foreground text-sm hover:underline"
+            className="py-[6px] px-[10px] text-muted-foreground text-sm hover:underline"
             href="https://blog.thirdweb.com"
             target="_blank"
           >
             Blog
           </Link>
           <Link
-            className="py-[6px] px-[10px] text-secondary-foreground text-sm hover:underline"
+            className="py-[6px] px-[10px] text-muted-foreground text-sm hover:underline"
             href="https://portal.thirdweb.com/changelog"
             target="_blank"
           >
             Changelog
           </Link>
           <Link
-            className="py-[6px] px-[10px] text-secondary-foreground text-sm hover:underline"
+            className="py-[6px] px-[10px] text-muted-foreground text-sm hover:underline"
             href="https://feedback.thirdweb.com/"
             target="_blank"
           >
             Feedback
           </Link>
           <Link
-            className="py-[6px] px-[10px] text-secondary-foreground text-sm hover:underline"
+            className="py-[6px] px-[10px] text-muted-foreground text-sm hover:underline"
             href="https://thirdweb.com/privacy"
             target="_blank"
           >
             Privacy Policy
           </Link>
           <Link
-            className="py-[6px] px-[10px] text-secondary-foreground text-sm hover:underline"
+            className="py-[6px] px-[10px] text-muted-foreground text-sm hover:underline"
             href="https://thirdweb.com/tos"
             target="_blank"
           >
             Terms of Service
           </Link>
           <Link
-            className="py-[6px] px-[10px] text-secondary-foreground text-sm hover:underline"
+            className="py-[6px] px-[10px] text-muted-foreground text-sm hover:underline"
             href="https://thirdweb.com/gas"
             target="_blank"
           >
             Gas Estimator
           </Link>
           <Link
-            className="py-[6px] px-[10px] text-secondary-foreground text-sm hover:underline"
+            className="py-[6px] px-[10px] text-muted-foreground text-sm hover:underline"
             href="https://thirdweb.com/chainlist"
             target="_blank"
           >

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

@@ -20,9 +20,9 @@ export function ColorModeToggle() {
         aria-label="Toggle theme"
       >
         {theme === "light" ? (
-          <Sun strokeWidth={1} className="size-6" />
+          <Sun strokeWidth={1} className="size-5" />
         ) : (
-          <Moon strokeWidth={1} className="size-6" />
+          <Moon strokeWidth={1} className="size-5" />
         )}
       </Button>
     </ClientOnly>

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

@@ -16,7 +16,7 @@ export function CopyAddressButton(props: {
     | "ghost";
   copyIconPosition: "left" | "right";
 }) {
-  const shortenedAddress = `${props.address.slice(0, 6)}...${props.address.slice(0, 4)}`;
+  const shortenedAddress = `${props.address.slice(0, 6)}...${props.address.slice(-4)}`;
 
   return (
     <CopyTextButton

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

@@ -10,12 +10,13 @@ export function CopyButton(props: {
   text: string;
   className?: string;
   iconClassName?: string;
+  variant?: "ghost" | "primary" | "secondary";
 }) {
   const [isCopied, setIsCopied] = useState(false);
   return (
     <ToolTipLabel label="Copy">
       <Button
-        variant="ghost"
+        variant={props.variant || "ghost"}
         aria-label="Copy"
         className={cn("h-auto w-auto p-1", props.className)}
         onClick={() => {

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

@@ -20,6 +20,7 @@ export function CopyTextButton(props: {
     | "secondary"
     | "ghost";
   copyIconPosition: "left" | "right";
+  onClick?: () => void;
 }) {
   const [isCopied, setIsCopied] = useState(false);
   const copyButton = isCopied ? (
@@ -44,10 +45,12 @@ export function CopyTextButton(props: {
           "h-auto w-auto px-2.5 py-1.5 flex gap-2 rounded-lg text-foreground font-normal",
           props.className,
         )}
-        onClick={() => {
+        onClick={(e) => {
           navigator.clipboard.writeText(props.textToCopy);
           setIsCopied(true);
           setTimeout(() => setIsCopied(false), 1000);
+          e.stopPropagation();
+          props.onClick?.();
         }}
       >
         {props.copyIconPosition === "right" ? (

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

@@ -34,7 +34,7 @@ export function DynamicHeight(props: {
   );
 }
 
-export function useHeightObserver() {
+function useHeightObserver() {
   const elementRef = useRef<HTMLDivElement>(null);
   const [height, setHeight] = useState<number | undefined>();
 

apps/dashboard/src/@/components/ui/List/List.module.css

@@ -1,6 +1,6 @@
 .unorderedList,
 .orderedList {
-  @apply pl-5 leading-relaxed list-none text-secondary-foreground;
+  @apply pl-5 leading-relaxed list-none text-muted-foreground;
 }
 
 .unorderedList > li {

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

@@ -8,15 +8,21 @@ export type NavButtonProps = {
   className?: string;
   activeClassName?: string;
   href: string;
+  exactMatch?: boolean;
 };
 
 export function NavLink(props: React.PropsWithChildren<NavButtonProps>) {
   const pathname = usePathname();
-  const isActive = pathname === props.href;
+  const isActive = pathname
+    ? props.exactMatch
+      ? pathname === props.href
+      : pathname.startsWith(props.href)
+    : false;
   return (
     <Link
       href={props.href}
       className={cn(props.className, isActive && props.activeClassName)}
+      target={props.href.startsWith("http") ? "_blank" : undefined}
     >
       {props.children}
     </Link>

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

@@ -4,7 +4,7 @@ export function Spinner(props: { className?: string }) {
   return (
     <svg
       viewBox="0 0 50 50"
-      className={`${style.loader} ${props.className || ""}`}
+      className={`${style.loader} ${props.className || "size-4"}`}
     >
       <title>loading</title>
       <circle

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

@@ -4,16 +4,14 @@ import * as React from "react";
 import { cn } from "@/lib/utils";
 
 const alertVariants = cva(
-  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  "dark:bg-muted/50 relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
   {
     variants: {
       variant: {
-        default: "bg-background text-foreground",
-        destructive:
-          "bg-destructive/30 border-destructive/50 dark:border-destructive [&>svg]:text-destructive",
-        info: "bg-primary/10 border-primary/50 dark:border-primary [&>svg]:text-primary",
-        warning:
-          "bg-warning/10 border-warning/50 dark:border-warning [&>svg]:text-warning",
+        default: "text-foreground",
+        destructive: "text-destructive-text [&>svg]:text-destructive-text",
+        info: "text-primary [&>svg]:text-primary",
+        warning: "text-warning-text [&>svg]:text-warning-text",
       },
     },
     defaultVariants: {
@@ -41,7 +39,7 @@ const AlertTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <h5
     ref={ref}
-    className={cn("mb-1.5 font-medium leading-none tracking-tight", className)}
+    className={cn("font-medium leading-none tracking-tight", className)}
     {...props}
   />
 ));
@@ -54,7 +52,7 @@ const AlertDescription = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "text-sm [&_p]:leading-relaxed text-secondary-foreground",
+      "text-sm [&_p]:leading-relaxed text-muted-foreground mt-1.5",
       className,
     )}
     {...props}

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

@@ -8,16 +8,16 @@ const badgeVariants = cva(
   {
     variants: {
       variant: {
-        default:
-          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        default: "border-transparent bg-primary/20 text-primary",
         secondary:
           "border-transparent bg-accent text-accent-foreground hover:bg-accent/80",
         destructive:
-          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
-        warning: "border-transparent bg-warning text-warning-foreground",
+          "border-transparent dark:bg-red-950 dark:text-red-400 bg-red-500/20 text-red-800",
+        warning:
+          "border-transparent dark:bg-yellow-600/20 dark:text-yellow-500 bg-yellow-500/20 text-yellow-900",
         outline: "text-foreground",
         success:
-          "border-transparent bg-success text-success-foreground hover:bg-success/80",
+          "border-transparent dark:bg-green-950/50 dark:text-green-400 bg-green-200 text-green-950",
       },
     },
     defaultVariants: {

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

@@ -46,7 +46,7 @@ const CardDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <p
     ref={ref}
-    className={cn("text-sm text-secondary-foreground", className)}
+    className={cn("text-sm text-muted-foreground", className)}
     {...props}
   />
 ));

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

@@ -283,7 +283,7 @@ const ChartLegendContent = React.forwardRef<
       <div
         ref={ref}
         className={cn(
-          "flex items-center justify-center gap-4 overflow-x-auto",
+          "flex items-center justify-center gap-x-4 gap-y-2 overflow-x-auto flex-wrap",
           verticalAlign === "top" ? "pb-3" : "pt-3",
           className,
         )}

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

@@ -13,7 +13,7 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      "peer h-4 w-4 shrink-0 rounded-sm border border-foreground ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-inverted data-[state=checked]:text-inverted-foreground",
       className,
     )}
     {...props}
@@ -21,7 +21,7 @@ const Checkbox = React.forwardRef<
     <CheckboxPrimitive.Indicator
       className={cn("flex items-center justify-center text-current")}
     >
-      <Check className="h-4 w-4 text-white" />
+      <Check className="h-4 w-4" />
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
 ));
@@ -36,7 +36,7 @@ export function CheckboxWithLabel(props: {
   return (
     <label
       className={cn(
-        "flex gap-2 items-start text-secondary-foreground text-sm cursor-pointer select-none [&>button]:mt-0.5",
+        "flex gap-2 items-start text-muted-foreground text-sm cursor-pointer select-none [&>button]:mt-0.5",
         props.className,
       )}
     >

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

@@ -73,7 +73,19 @@ const SelectContent = React.forwardRef<
 >(({ className, children, position = "popper", ...props }, ref) => (
   <SelectPrimitive.Portal>
     <SelectPrimitive.Content
-      ref={ref}
+      // Fixes https://github.com/radix-ui/primitives/issues/1658
+      ref={(instance) => {
+        if (typeof ref === "function") {
+          ref(instance);
+        } else if (ref) {
+          ref.current = instance;
+        }
+        if (!instance) return;
+
+        instance.ontouchstart = (e) => {
+          e.preventDefault();
+        };
+      }}
       className={cn(
         "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         position === "popper" &&

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

@@ -36,7 +36,12 @@ function SkeletonContainer<T>(props: {
             isLoading ? "opacity-0" : "opacity-100",
           )}
         >
-          {props.render(props.loadedData ?? props.skeletonData, !isLoading)}
+          {props.render(
+            props.loadedData === undefined
+              ? props.skeletonData
+              : props.loadedData,
+            !isLoading,
+          )}
         </div>
       </div>
     </div>

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

@@ -7,40 +7,49 @@ import { useCallback, useRef, useState } from "react";
 import { ScrollShadow } from "./ScrollShadow/ScrollShadow";
 import { Button } from "./button";
 
+export type TabLink = {
+  name: string;
+  href: string;
+  isActive: boolean;
+  isDisabled?: boolean;
+};
+
 export function TabLinks(props: {
-  links: {
-    name: string;
-    href: string;
-    isActive: boolean;
-    isEnabled?: boolean;
-  }[];
+  links: TabLink[];
+  className?: string;
+  tabContainerClassName?: string;
 }) {
   const { containerRef, lineRef, activeTabRef } =
     useUnderline<HTMLAnchorElement>();
 
   return (
-    <div className="relative">
+    <div className={cn("relative", props.className)}>
+      {/* Bottom line */}
+      <div className="h-[1px] bg-border absolute bottom-0 left-0 right-0" />
+
       <ScrollShadow scrollableClassName="pb-[8px] relative">
-        <div className="flex" ref={containerRef}>
+        <div
+          className={cn("flex", props.tabContainerClassName)}
+          ref={containerRef}
+        >
           {props.links.map((tab) => {
             return (
               <Button
                 asChild
                 key={tab.name}
-                disabled={!tab.isEnabled}
+                disabled={tab.isDisabled}
                 variant="ghost"
               >
                 <Link
                   data-active={tab.isActive}
                   ref={tab.isActive ? activeTabRef : undefined}
                   href={tab.href}
-                  aria-disabled={!tab.isEnabled}
+                  aria-disabled={tab.isDisabled}
                   className={cn(
-                    "rounded-lg hover:bg-muted px-3 font-medium text-sm lg:text-base relative h-auto",
-                    !tab.isActive &&
-                      tab.isEnabled &&
-                      "opacity-50 hover:opacity-100",
-                    !tab.isEnabled && "opacity-50 pointer-events-none",
+                    "rounded-lg hover:bg-muted px-3 font-normal text-sm lg:text-sm relative h-auto text-muted-foreground",
+                    !tab.isActive && !tab.isDisabled && "hover:text-foreground",
+                    tab.isDisabled && "pointer-events-none",
+                    tab.isActive && "!text-foreground",
                   )}
                 >
                   {tab.name}
@@ -56,8 +65,6 @@ export function TabLinks(props: {
           className="absolute left-0 bottom-0 h-[2px] bg-foreground rounded-lg fade-in-0 animate-in"
         />
       </ScrollShadow>
-      {/* Bottom line */}
-      <div className="h-[1px] bg-border -translate-y-[2px]" />
     </div>
   );
 }
@@ -80,6 +87,9 @@ export function TabButtons(props: {
 
   return (
     <div className={cn("relative", props.containerClassName)}>
+      {/* Bottom line */}
+      <div className="h-[1px] bg-border absolute bottom-0 left-0 right-0" />
+
       <ScrollShadow scrollableClassName="pb-[8px] relative">
         <div
           className={cn("flex", props.tabContainerClassName)}
@@ -114,8 +124,6 @@ export function TabButtons(props: {
           className="absolute left-0 bottom-0 h-[2px] bg-foreground rounded-lg fade-in-0 animate-in"
         />
       </ScrollShadow>
-      {/* Bottom line */}
-      <div className="h-[1px] bg-border -translate-y-[2px]" />
     </div>
   );
 }
@@ -130,24 +138,33 @@ function useUnderline<El extends HTMLElement>() {
   }, []);
 
   useIsomorphicLayoutEffect(() => {
-    if (activeTabEl && containerRef.current && lineRef.current) {
-      const containerRect = containerRef.current.getBoundingClientRect();
-      const lineEl = lineRef.current;
-      const rect = activeTabEl.getBoundingClientRect();
-      lineEl.style.width = `${rect.width}px`;
-      lineEl.style.transform = `translateX(${
-        rect.left - containerRect.left
-      }px)`;
-      setTimeout(() => {
-        lineEl.style.transition = "transform 0.3s, width 0.3s";
-      }, 0);
+    function update() {
+      if (activeTabEl && containerRef.current && lineRef.current) {
+        const containerRect = containerRef.current.getBoundingClientRect();
+        const lineEl = lineRef.current;
+        const rect = activeTabEl.getBoundingClientRect();
+        lineEl.style.width = `${rect.width}px`;
+        lineEl.style.transform = `translateX(${
+          rect.left - containerRect.left
+        }px)`;
+        setTimeout(() => {
+          lineEl.style.transition = "transform 0.3s, width 0.3s";
+        }, 0);
 
-      activeTabEl.scrollIntoView({
-        behavior: "smooth",
-        block: "nearest",
-        inline: "center",
-      });
+        activeTabEl.scrollIntoView({
+          behavior: "smooth",
+          block: "nearest",
+          inline: "center",
+        });
+      }
     }
+
+    update();
+    // add event listener for resize
+    window.addEventListener("resize", update);
+    return () => {
+      window.removeEventListener("resize", update);
+    };
   }, [activeTabEl]);
 
   return { containerRef, lineRef, activeTabRef };

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

@@ -10,7 +10,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     return (
       <textarea
         className={cn(
-          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          "flex min-h-[80px] w-full rounded-md border border-input bg-card px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
           className,
         )}
         ref={ref}

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

@@ -34,6 +34,7 @@ export function ToolTipLabel(props: {
   label: React.ReactNode;
   rightIcon?: React.ReactNode;
   leftIcon?: React.ReactNode;
+  hoverable?: boolean;
 }) {
   if (!props.label) {
     return props.children;
@@ -41,7 +42,7 @@ export function ToolTipLabel(props: {
 
   return (
     <TooltipProvider>
-      <Tooltip delayDuration={100} disableHoverableContent={true}>
+      <Tooltip delayDuration={100} disableHoverableContent={!props.hoverable}>
         <TooltipTrigger asChild className="!pointer-events-auto">
           {props.children}
         </TooltipTrigger>

apps/dashboard/src/@/components/ui/tracked-link.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useTrack } from "hooks/analytics/useTrack";
 import Link from "next/link";
 import type React from "react";

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

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

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

@@ -3,82 +3,83 @@
 @tailwind utilities;
 
 @layer base {
-  :root {
+  :root,
+  [data-theme="light"] {
     /* bg - neutral  */
     --background: 0 0% 100%;
-    --secondary: 0 0% 97%;
+    --popover: 0 0% 100%;
+    --card: 0 0% 100%;
+    --secondary: 0 0% 92%;
     --muted: 0 0% 95%;
-    --accent: 0 0% 92%;
-    --card: var(--secondary);
-    --popover: var(--background);
-    --inverted: var(--foreground);
-
-    /* bg - colorful */
-    --primary: 221.21deg 83.19% 53.33%;
-    --destructive: 0 84.2% 94%;
-    --success: 142.09 60.56% 90%;
-    --warning: 40.61deg 96.12% 92%;
-
-    /* Text */
-    --foreground: 0 0% 3.9%;
-    --card-foreground: 0 0% 3.9%;
-    --popover-foreground: 240 10% 3.9%;
-    --primary-foreground: 0 0% 100%;
-    --secondary-foreground: 0 0% 30%;
-    --muted-foreground: 0 0% 40%;
-    --accent-foreground: 0 0% 9%;
-    --success-foreground: 142.09 70.56% 35.29%;
-    --destructive-foreground: 0 84.24% 60.2%;
-    --inverted-foreground: var(--background);
-    --warning-foreground: 40.61deg 96.12% 40.4%;
-    --link-foreground: 221.21deg 83.19% 53.33%;
-    --destructive-text: 0 84.24% 60.2%;
-    --success-text: 142.09 70.56% 35.29%;
-
-    /* Borders */
-    --border: 0 0% 80%;
-    --input: var(--border);
-    --ring: 215.88 100% 60%;
-
-    /* Others */
-    --radius: 0.5rem;
-  }
-
-  .dark {
-    /* bg - neutral  */
-    --background: 0 0% 4.5%;
-    --secondary: 0 0% 6.5%;
-    --muted: 0 0% 9%;
-    --accent: 0 0% 12%;
-    --card: var(--secondary);
-    --popover: var(--background);
-    --inverted: var(--foreground);
+    --accent: 0 0% 95%;
+    --inverted: 0 0% 4%;
 
     /* bg - colorful */
     --primary: 221 83% 54%;
-    --destructive: 0 62.8% 15%;
-    --success: 156.2 71.6% 10%;
-    --warning: 40.61deg 96.12% 8%;
+    --destructive: 360 72% 51%;
+
+    /* Text */
+    --foreground: 0 0% 4%;
+    --card-foreground: 0 0% 4%;
+    --popover-foreground: 240 10% 4%;
+    --primary-foreground: 0 0% 100%;
+    --secondary-foreground: 0 0% 4%;
+    --muted-foreground: 0 0% 40%;
+    --accent-foreground: 0 0% 9%;
+    --destructive-foreground: 0 0% 100%;
+    --inverted-foreground: var(--background);
+    --link-foreground: 221.21deg 83.19% 53.33%;
+    --success-text: 142.09 70.56% 35.29%;
+    --warning-text: 38 92% 40%;
+    --destructive-text: 357.15deg 100% 68.72%;
+
+    /* Borders */
+    --border: 0 0% 80%;
+    --input: 0 0% 80%;
+    --ring: 0 0% 85%;
+
+    /* Others */
+    --radius: 0.5rem;
+    --chart-lightness: 50%;
+    --chart-saturation: 50%;
+  }
+
+  .dark,
+  [data-theme="dark"] {
+    /* bg - neutral  */
+    --background: 0 0% 0%;
+    --card: 0 0% 0%;
+    --popover: 0 0% 0%;
+    --secondary: 0 0% 10%;
+    --muted: 0 0% 9%;
+    --accent: 0 0% 9%;
+    --inverted: 0 0% 98%;
+
+    /* bg - colorful */
+    --primary: 221 83% 54%;
+    --destructive: 360 72% 51%;
 
     /* Text */
     --foreground: 0 0% 98%;
     --card-foreground: 0 0% 98%;
     --popover-foreground: 0 0% 98%;
     --primary-foreground: 0 0% 100%;
-    --secondary-foreground: 0 0% 75%;
-    --muted-foreground: 0 0% 63.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted-foreground: 0 0% 63%;
     --accent-foreground: 0 0% 98%;
-    --destructive-foreground: 0deg 90.6% 80%;
-    --success-foreground: 156.2 71.6% 66.86%;
-    --warning-foreground: 45.4deg 93.39% 47.45%;
+    --destructive-foreground: 0 0% 100%;
     --link-foreground: 215.88 100% 65%;
-    --destructive-text: 0 84.24% 65%;
-    --success-text: 156.2 71.6% 66.86%;
+    --warning-text: 38 92% 50%;
+    --destructive-text: 360 72% 55%;
+    --success-text: 142 75% 50%;
 
     /* Borders */
-    --border: 0 0% 14.9%;
-    --ring: 215.88 100% 60%;
-    --input: var(--border);
+    --border: 0 0% 15%;
+    --ring: 0 0% 30%;
+    --input: 0 0% 15%;
+
+    --chart-lightness: 50%;
+    --chart-saturation: 50%;
   }
 }
 
@@ -99,6 +100,7 @@
     --chart-3: 30 80% 55%;
     --chart-4: 280 65% 60%;
     --chart-5: 340 75% 55%;
+
     /* below is ai generated based on the initial */
     --chart-6: 200 65% 50%;
     --chart-7: 120 70% 45%;
@@ -122,3 +124,17 @@
     opacity: 0.5;
   }
 }
+
+@layer utilities {
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  .no-scrollbar::-webkit-scrollbar,
+  .no-scrollbar *::-webkit-scrollbar {
+    display: none;
+  }
+  /* Hide scrollbar for IE, Edge and Firefox */
+  .no-scrollbar,
+  .no-scrollbar * {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+}

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

@@ -3,12 +3,16 @@
 import { Spinner } from "@/components/ui/Spinner/Spinner";
 import { Button } from "@/components/ui/button";
 import { thirdwebClient } from "@/constants/client";
-import { useSupportedChains } from "@thirdweb-dev/react";
+import { getSDKTheme } from "app/components/sdk-component-theme";
+import { CustomChainRenderer } from "components/selects/CustomChainRenderer";
+import { mapV4ChainToV5Chain } from "contexts/map-chains";
 import { useTrack } from "hooks/analytics/useTrack";
+import { useSupportedChains } from "hooks/chains/configureChains";
 import {
   useAddRecentlyUsedChainId,
   useRecentlyUsedChains,
 } from "hooks/chains/recentlyUsedChains";
+import { useSetIsNetworkConfigModalOpen } from "hooks/networkConfigModal";
 import { useTheme } from "next-themes";
 import Image from "next/image";
 import Link from "next/link";
@@ -16,10 +20,6 @@ import { usePathname } from "next/navigation";
 import { useCallback, useMemo } from "react";
 import type { Chain } from "thirdweb";
 import { AutoConnect, ConnectButton, useConnectModal } from "thirdweb/react";
-import { getSDKTheme } from "../../../../app/components/sdk-component-theme";
-import { CustomChainRenderer } from "../../../../components/selects/CustomChainRenderer";
-import { mapV4ChainToV5Chain } from "../../../../contexts/map-chains";
-import { useSetIsNetworkConfigModalOpen } from "../../../../hooks/networkConfigModal";
 import { useFavoriteChains } from "../../hooks/useFavoriteChains";
 import { useLoggedInUser } from "../../hooks/useLoggedInUser";
 import { popularChains } from "../popularChains";
@@ -27,6 +27,7 @@ import { popularChains } from "../popularChains";
 export const CustomConnectWallet = (props: {
   loginRequired?: boolean;
   connectButtonClassName?: string;
+  detailsButtonClassName?: string;
 }) => {
   const loginRequired =
     props.loginRequired === undefined ? true : props.loginRequired;
@@ -119,6 +120,9 @@ export const CustomConnectWallet = (props: {
       connectButton={{
         className: props.connectButtonClassName,
       }}
+      detailsButton={{
+        className: props.detailsButtonClassName,
+      }}
       chains={allChains}
       detailsModal={{
         networkSelector: {

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

@@ -180,13 +180,14 @@ interface CreateKeyInput {
   services?: UpdateKeyServiceInput[];
 }
 
-interface UpdateKeyInput {
+export interface UpdateKeyInput {
   id: string;
   name: string;
   domains: string[];
   bundleIds: string[];
   walletAddresses?: string[];
   services?: UpdateKeyServiceInput[];
+  redirectUrls: string[];
 }
 
 interface UsageBundler {
@@ -227,7 +228,7 @@ export interface UsageBillableByService {
   };
 }
 
-interface WalletStats {
+export interface WalletStats {
   timeSeries: {
     dayTime: string;
     clientId: string;
@@ -270,9 +271,9 @@ interface UseAccountInput {
 export function useAccount({ refetchInterval }: UseAccountInput = {}) {
   const { user, isLoggedIn } = useLoggedInUser();
 
-  return useQuery(
-    accountKeys.me(user?.address as string),
-    async () => {
+  return useQuery({
+    queryKey: accountKeys.me(user?.address as string),
+    queryFn: async () => {
       const res = await fetch(`${THIRDWEB_API_HOST}/v1/account/me`, {
         method: "GET",
         headers: {
@@ -287,19 +288,17 @@ export function useAccount({ refetchInterval }: UseAccountInput = {}) {
 
       return json.data as Account;
     },
-    {
-      enabled: !!user?.address && isLoggedIn,
-      refetchInterval: refetchInterval ?? false,
-    },
-  );
+    enabled: !!user?.address && isLoggedIn,
+    refetchInterval: refetchInterval ?? false,
+  });
 }
 
 export function useAccountUsage() {
   const { user, isLoggedIn } = useLoggedInUser();
 
-  return useQuery(
-    accountKeys.usage(user?.address as string),
-    async () => {
+  return useQuery({
+    queryKey: accountKeys.usage(user?.address as string),
+    queryFn: async () => {
       const res = await fetch(`${THIRDWEB_API_HOST}/v1/account/usage`, {
         method: "GET",
         headers: {
@@ -314,16 +313,16 @@ export function useAccountUsage() {
 
       return json.data as UsageBillableByService;
     },
-    { enabled: !!user?.address && isLoggedIn },
-  );
+    enabled: !!user?.address && isLoggedIn,
+  });
 }
 
 export function useAccountCredits() {
   const { user, isLoggedIn } = useLoggedInUser();
 
-  return useQuery(
-    accountKeys.credits(user?.address as string),
-    async () => {
+  return useQuery({
+    queryKey: accountKeys.credits(user?.address as string),
+    queryFn: async () => {
       const res = await fetch(`${THIRDWEB_API_HOST}/v1/account/credits`, {
         method: "GET",
 
@@ -340,22 +339,25 @@ export function useAccountCredits() {
       const credits = (json.data as BillingCredit[]).filter(
         (credit) =>
           credit.remainingValueUsdCents > 0 &&
-          credit.expiresAt > new Date().toISOString() &&
+          (!credit.expiresAt || credit.expiresAt > new Date().toISOString()) &&
           credit.isActive,
       );
 
       return credits;
     },
-    { enabled: !!user?.address && isLoggedIn },
-  );
+    enabled: !!user?.address && isLoggedIn,
+  });
 }
 
 export function useWalletStats(clientId: string | undefined) {
   const { user, isLoggedIn } = useLoggedInUser();
 
-  return useQuery(
-    accountKeys.walletStats(user?.address as string, clientId as string),
-    async () => {
+  return useQuery({
+    queryKey: accountKeys.walletStats(
+      user?.address as string,
+      clientId as string,
+    ),
+    queryFn: async () => {
       const res = await fetch(
         `${THIRDWEB_API_HOST}/v1/account/wallets?clientId=${clientId}`,
         {
@@ -374,8 +376,8 @@ export function useWalletStats(clientId: string | undefined) {
 
       return json.data as WalletStats;
     },
-    { enabled: !!clientId && !!user?.address && isLoggedIn },
-  );
+    enabled: !!clientId && !!user?.address && isLoggedIn,
+  });
 }
 
 export function useUpdateAccount() {
@@ -494,9 +496,9 @@ export function useUpdateNotifications() {
 export function useCreateBillingSession(enabled = false) {
   const { user } = useLoggedInUser();
 
-  return useQuery(
-    accountKeys.billingSession(user?.address as string),
-    async () => {
+  return useQuery({
+    queryKey: accountKeys.billingSession(user?.address as string),
+    queryFn: async () => {
       invariant(user?.address, "walletAddress is required");
 
       const res = await fetch(
@@ -517,8 +519,8 @@ export function useCreateBillingSession(enabled = false) {
 
       return json.data;
     },
-    { enabled },
-  );
+    enabled,
+  });
 }
 
 export function useConfirmEmail() {
@@ -636,9 +638,9 @@ export function useCreatePaymentMethod() {
 
 export function useApiKeys() {
   const { user, isLoggedIn } = useLoggedInUser();
-  return useQuery(
-    apiKeys.keys(user?.address as string),
-    async () => {
+  return useQuery({
+    queryKey: apiKeys.keys(user?.address as string),
+    queryFn: async () => {
       const res = await fetch(`${THIRDWEB_API_HOST}/v1/keys`, {
         method: "GET",
 
@@ -653,8 +655,8 @@ export function useApiKeys() {
       }
       return json.data as ApiKey[];
     },
-    { enabled: !!user?.address && isLoggedIn },
-  );
+    enabled: !!user?.address && isLoggedIn,
+  });
 }
 
 export function useCreateApiKey() {
@@ -884,9 +886,9 @@ export function useRevokeAuthorizedWallet() {
 export function useAuthorizedWallets() {
   const { user, isLoggedIn } = useLoggedInUser();
 
-  return useQuery(
-    authorizedWallets.authorizedWallets(user?.address as string),
-    async () => {
+  return useQuery({
+    queryKey: authorizedWallets.authorizedWallets(user?.address as string),
+    queryFn: async () => {
       const res = await fetch(`${THIRDWEB_API_HOST}/v1/authorized-wallets`, {
         method: "GET",
 
@@ -902,8 +904,9 @@ export function useAuthorizedWallets() {
 
       return json.data as AuthorizedWallet[];
     },
-    { enabled: !!user?.address && isLoggedIn, cacheTime: 0 },
-  );
+    enabled: !!user?.address && isLoggedIn,
+    cacheTime: 0,
+  });
 }
 
 /**
@@ -923,7 +926,10 @@ export async function fetchChainsFromApi() {
 }
 
 export function useApiChains() {
-  return useQuery(["all-chains"], async () => {
-    return fetchChainsFromApi();
+  return useQuery({
+    queryKey: ["all-chains"],
+    queryFn: () => {
+      return fetchChainsFromApi();
+    },
   });
 }

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

@@ -12,9 +12,9 @@ import { getContractMetadata, name, symbol } from "thirdweb/extensions/common";
  * 2. our API endpoint
  */
 export function useDashboardContractMetadata(contract: ThirdwebContract) {
-  return useQuery(
-    ["contract-metadata-header", contract.chain.id, contract.address],
-    async () => {
+  return useQuery({
+    queryKey: ["contract-metadata-header", contract.chain.id, contract.address],
+    queryFn: async () => {
       const [contractMetadata, _name, _symbol, compilerMetadata] =
         await Promise.all([
           getContractMetadata({ contract }).catch(() => ({
@@ -50,5 +50,5 @@ export function useDashboardContractMetadata(contract: ThirdwebContract) {
         contractType: compilerMetadata?.name || "",
       };
     },
-  );
+  });
 }

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

@@ -25,12 +25,12 @@ export type EmbeddedWalletUser = {
 export function useEmbeddedWallets(clientId: string) {
   const { user, isLoggedIn } = useLoggedInUser();
 
-  return useQuery(
-    embeddedWalletsKeys.embeddedWallets(
+  return useQuery({
+    queryKey: embeddedWalletsKeys.embeddedWallets(
       user?.address as string,
       clientId as string,
     ),
-    async () => {
+    queryFn: async () => {
       const res = await fetch(
         `${THIRDWEB_EWS_API_HOST}/api/thirdweb/embedded-wallet?clientId=${clientId}&lastAccessedAt=0`,
         {
@@ -46,6 +46,6 @@ export function useEmbeddedWallets(clientId: string) {
 
       return json.walletUsers as EmbeddedWalletUser[];
     },
-    { enabled: !!user?.address && isLoggedIn && !!clientId },
-  );
+    enabled: !!user?.address && isLoggedIn && !!clientId,
+  });
 }

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

@@ -55,9 +55,9 @@ const getEngineRequestHeaders = (token: string | null): HeadersInit => {
 export function useEngineInstances() {
   const { user, isLoggedIn } = useLoggedInUser();
 
-  return useQuery(
-    engineKeys.instances(user?.address as string),
-    async (): Promise<EngineInstance[]> => {
+  return useQuery({
+    queryKey: engineKeys.instances(user?.address as string),
+    queryFn: async (): Promise<EngineInstance[]> => {
       const res = await fetch(`${THIRDWEB_API_HOST}/v1/engine`, {
         method: "GET",
       });
@@ -79,8 +79,8 @@ export function useEngineInstances() {
         };
       });
     },
-    { enabled: !!user?.address && isLoggedIn },
-  );
+    enabled: !!user?.address && isLoggedIn,
+  });
 }
 
 // GET Requests
@@ -100,9 +100,9 @@ export type BackendWallet = {
 export function useEngineBackendWallets(instance: string) {
   const token = useLoggedInUser().user?.jwt ?? null;
 
-  return useQuery(
-    [engineKeys.backendWallets(instance)],
-    async () => {
+  return useQuery({
+    queryKey: [engineKeys.backendWallets(instance)],
+    queryFn: async () => {
       const res = await fetch(`${instance}backend-wallet/get-all?limit=50`, {
         method: "GET",
         headers: getEngineRequestHeaders(token),
@@ -112,8 +112,8 @@ export function useEngineBackendWallets(instance: string) {
 
       return (json.result as BackendWallet[]) || [];
     },
-    { enabled: !!instance && !!token },
-  );
+    enabled: !!instance && !!token,
+  });
 }
 
 export interface EngineSystemHealth {
@@ -382,9 +382,9 @@ type TransactionResponse = {
 export function useEngineTransactions(instance: string, autoUpdate: boolean) {
   const token = useLoggedInUser().user?.jwt ?? null;
 
-  return useQuery(
-    engineKeys.transactions(instance),
-    async () => {
+  return useQuery({
+    queryKey: engineKeys.transactions(instance),
+    queryFn: async () => {
       const res = await fetch(`${instance}transaction/get-all`, {
         method: "GET",
         headers: getEngineRequestHeaders(token),
@@ -394,11 +394,10 @@ export function useEngineTransactions(instance: string, autoUpdate: boolean) {
 
       return (json.result as TransactionResponse) || {};
     },
-    {
-      enabled: !!instance && !!token,
-      refetchInterval: autoUpdate ? 4_000 : false,
-    },
-  );
+
+    enabled: !!instance && !!token,
+    refetchInterval: autoUpdate ? 4_000 : false,
+  });
 }
 
 type WalletConfig =
@@ -423,9 +422,9 @@ type WalletConfig =
 export function useEngineWalletConfig(instance: string) {
   const token = useLoggedInUser().user?.jwt ?? null;
 
-  return useQuery(
-    engineKeys.walletConfig(instance),
-    async () => {
+  return useQuery({
+    queryKey: engineKeys.walletConfig(instance),
+    queryFn: async () => {
       const res = await fetch(`${instance}configuration/wallets`, {
         method: "GET",
         headers: getEngineRequestHeaders(token),
@@ -435,8 +434,8 @@ export function useEngineWalletConfig(instance: string) {
 
       return (json.result as WalletConfig) || {};
     },
-    { enabled: !!instance && !!token },
-  );
+    enabled: !!instance && !!token,
+  });
 }
 
 type CurrencyValue = {
@@ -456,9 +455,9 @@ export function useEngineBackendWalletBalance(
 
   invariant(chainId, "chainId is required");
 
-  return useQuery(
-    engineKeys.backendWalletBalance(address, chainId),
-    async () => {
+  return useQuery({
+    queryKey: engineKeys.backendWalletBalance(address, chainId),
+    queryFn: async () => {
       const res = await fetch(
         `${instance}backend-wallet/${chainId}/${address}/get-balance`,
         {
@@ -471,8 +470,8 @@ export function useEngineBackendWalletBalance(
 
       return (json.result as CurrencyValue) || {};
     },
-    { enabled: !!instance && !!address && !!chainId && !!token },
-  );
+    enabled: !!instance && !!address && !!chainId && !!token,
+  });
 }
 
 export type EngineAdmin = {
@@ -485,9 +484,9 @@ export function useEnginePermissions(instance: string) {
   const token = useLoggedInUser().user?.jwt ?? null;
   const address = useActiveAccount()?.address;
 
-  return useQuery(
-    engineKeys.permissions(instance),
-    async () => {
+  return useQuery({
+    queryKey: engineKeys.permissions(instance),
+    queryFn: async () => {
       const res = await fetch(`${instance}auth/permissions/get-all`, {
         method: "GET",
         headers: getEngineRequestHeaders(token),
@@ -501,10 +500,9 @@ export function useEnginePermissions(instance: string) {
 
       return (json.result as EngineAdmin[]) || [];
     },
-    {
-      enabled: !!instance && !!token && !!address,
-    },
-  );
+
+    enabled: !!instance && !!token && !!address,
+  });
 }
 
 export type AccessToken = {
@@ -519,9 +517,9 @@ export type AccessToken = {
 export function useEngineAccessTokens(instance: string) {
   const token = useLoggedInUser().user?.jwt ?? null;
 
-  return useQuery(
-    engineKeys.accessTokens(instance),
-    async () => {
+  return useQuery({
+    queryKey: engineKeys.accessTokens(instance),
+    queryFn: async () => {
       const res = await fetch(`${instance}auth/access-tokens/get-all`, {
         method: "GET",
         headers: getEngineRequestHeaders(token),
@@ -531,8 +529,8 @@ export function useEngineAccessTokens(instance: string) {
 
       return (json.result as AccessToken[]) || [];
     },
-    { enabled: !!instance && !!token },
-  );
+    enabled: !!instance && !!token,
+  });
 }
 
 export type KeypairAlgorithm = "ES256" | "RS256" | "PS256";
@@ -549,9 +547,9 @@ export type Keypair = {
 export function useEngineKeypairs(instance: string) {
   const token = useLoggedInUser().user?.jwt ?? null;
 
-  return useQuery(
-    engineKeys.keypairs(instance),
-    async () => {
+  return useQuery({
+    queryKey: engineKeys.keypairs(instance),
+    queryFn: async () => {
       const res = await fetch(`${instance}auth/keypair/get-all`, {
         method: "GET",
         headers: getEngineRequestHeaders(token),
@@ -561,8 +559,8 @@ export function useEngineKeypairs(instance: string) {
 
       return (json.result as Keypair[]) || [];
     },
-    { enabled: !!instance && !!token },
-  );
+    enabled: !!instance && !!token,
+  });
 }
 
 type AddKeypairInput = {
@@ -645,9 +643,9 @@ export type EngineRelayer = {
 export function useEngineRelayer(instance: string) {
   const token = useLoggedInUser().user?.jwt ?? null;
 
-  return useQuery(
-    engineKeys.relayers(instance),
-    async () => {
+  return useQuery({
+    queryKey: engineKeys.relayers(instance),
+    queryFn: async () => {
       const res = await fetch(`${instance}relayer/get-all`, {
         method: "GET",
         headers: getEngineRequestHeaders(token),
@@ -657,8 +655,8 @@ export function useEngineRelayer(instance: string) {
 
       return (json.result as EngineRelayer[]) || [];
     },
-    { enabled: !!instance && !!token },
-  );
+    enabled: !!instance && !!token,
+  });
 }
 
 export type CreateRelayerInput = {
@@ -782,9 +780,9 @@ export interface EngineWebhook {
 export function useEngineWebhooks(instance: string) {
   const token = useLoggedInUser().user?.jwt ?? null;
 
-  return useQuery(
-    engineKeys.webhooks(instance),
-    async () => {
+  return useQuery({
+    queryKey: engineKeys.webhooks(instance),
+    queryFn: async () => {
       const res = await fetch(`${instance}webhooks/get-all`, {
         method: "GET",
         headers: getEngineRequestHeaders(token),
@@ -794,8 +792,8 @@ export function useEngineWebhooks(instance: string) {
 
       return (json.result as EngineWebhook[]) || [];
     },
-    { enabled: !!instance && !!token },
-  );
+    enabled: !!instance && !!token,
+  });
 }
 
 // POST REQUESTS
@@ -1241,9 +1239,9 @@ export function useEngineSendTokens(instance: string) {
 export function useEngineCorsConfiguration(instance: string) {
   const token = useLoggedInUser().user?.jwt ?? null;
 
-  return useQuery(
-    engineKeys.corsUrls(instance),
-    async () => {
+  return useQuery({
+    queryKey: engineKeys.corsUrls(instance),
+    queryFn: async () => {
       const res = await fetch(`${instance}configuration/cors`, {
         method: "GET",
         headers: getEngineRequestHeaders(token),
@@ -1253,8 +1251,8 @@ export function useEngineCorsConfiguration(instance: string) {
 
       return (json.result as string[]) || [];
     },
-    { enabled: !!instance && !!token },
-  );
+    enabled: !!instance && !!token,
+  });
 }
 
 interface SetCorsUrlInput {
@@ -1297,9 +1295,9 @@ export function useEngineIpAllowlistConfiguration(instance: string) {
   // if engine instance is not updated to have IP_ALLOWLIST
   const { data: health } = useEngineSystemHealth(instance);
 
-  return useQuery(
-    engineKeys.ipAllowlist(instance),
-    async () => {
+  return useQuery({
+    queryKey: engineKeys.ipAllowlist(instance),
+    queryFn: async () => {
       const res = await fetch(`${instance}configuration/ip-allowlist`, {
         method: "GET",
         headers: getEngineRequestHeaders(token),
@@ -1308,11 +1306,10 @@ export function useEngineIpAllowlistConfiguration(instance: string) {
       const json = await res.json();
       return (json.result as string[]) || [];
     },
-    {
-      enabled:
-        !!instance && !!token && health?.features?.includes("IP_ALLOWLIST"),
-    },
-  );
+
+    enabled:
+      !!instance && !!token && health?.features?.includes("IP_ALLOWLIST"),
+  });
 }
 
 interface SetIpAllowlistInput {
@@ -1365,9 +1362,9 @@ export interface EngineContractSubscription {
 
 export function useEngineContractSubscription(instance: string) {
   const token = useLoggedInUser().user?.jwt ?? null;
-  return useQuery(
-    engineKeys.contractSubscriptions(instance),
-    async () => {
+  return useQuery({
+    queryKey: engineKeys.contractSubscriptions(instance),
+    queryFn: async () => {
       const res = await fetch(`${instance}contract-subscriptions/get-all`, {
         method: "GET",
         headers: getEngineRequestHeaders(token),
@@ -1376,10 +1373,9 @@ export function useEngineContractSubscription(instance: string) {
       const json = await res.json();
       return json.result as EngineContractSubscription[];
     },
-    {
-      enabled: !!instance && !!token,
-    },
-  );
+
+    enabled: !!instance && !!token,
+  });
 }
 
 export interface AddContractSubscriptionInput {
@@ -1465,9 +1461,9 @@ export function useEngineSubscriptionsLastBlock(
 ) {
   const token = useLoggedInUser().user?.jwt ?? null;
 
-  return useQuery(
-    engineKeys.contractSubscriptionsLastBlock(instanceUrl, chainId),
-    async () => {
+  return useQuery({
+    queryKey: engineKeys.contractSubscriptionsLastBlock(instanceUrl, chainId),
+    queryFn: async () => {
       const response = await fetch(
         `${instanceUrl}contract-subscriptions/last-block?chain=${chainId}`,
         {
@@ -1479,11 +1475,10 @@ export function useEngineSubscriptionsLastBlock(
       const json = await response.json();
       return json.result.lastBlock as number;
     },
-    {
-      enabled: !!instanceUrl && !!token,
-      refetchInterval: autoUpdate ? 5_000 : false,
-    },
-  );
+
+    enabled: !!instanceUrl && !!token,
+    refetchInterval: autoUpdate ? 5_000 : false,
+  });
 }
 
 export interface EngineResourceMetrics {
@@ -1500,9 +1495,9 @@ export interface EngineResourceMetrics {
 export function useEngineSystemMetrics(engineId: string) {
   const [enabled, setEnabled] = useState(true);
 
-  return useQuery(
-    engineKeys.systemMetrics(engineId),
-    async () => {
+  return useQuery({
+    queryKey: engineKeys.systemMetrics(engineId),
+    queryFn: async () => {
       const res = await fetch(
         `${THIRDWEB_API_HOST}/v1/engine/${engineId}/metrics`,
       );
@@ -1513,10 +1508,9 @@ export function useEngineSystemMetrics(engineId: string) {
       const json = (await res.json()) as EngineResourceMetrics;
       return json;
     },
-    {
-      // Poll every 5s unless disabled.
-      enabled,
-      refetchInterval: 5_000,
-    },
-  );
+
+    // Poll every 5s unless disabled.
+    enabled,
+    refetchInterval: 5_000,
+  });
 }

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

@@ -1,5 +1,5 @@
-import { useSupportedChains } from "@thirdweb-dev/react";
 import { useFavouriteChainIds } from "app/(dashboard)/(chain)/components/client/star-button";
+import { useSupportedChains } from "hooks/chains/configureChains";
 import { useMemo } from "react";
 import type { ChainMetadata } from "thirdweb/chains";
 

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

@@ -1,16 +0,0 @@
-import { useQuery } from "@tanstack/react-query";
-
-export type GasEstimate = { gasPrice: number; ethPrice: number };
-
-export function useGas() {
-  return useQuery(
-    ["gas-price", "ethereum"],
-    async () => {
-      const res = await fetch("/api/gas");
-      return res.json() as Promise<GasEstimate>;
-    },
-    {
-      refetchInterval: 60_000,
-    },
-  );
-}

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

@@ -16,9 +16,9 @@ import { useActiveAccount } from "thirdweb/react";
 import invariant from "tiny-invariant";
 
 function useMultiChainRegContractList(walletAddress?: string) {
-  return useQuery(
-    ["dashboard-registry", walletAddress, "multichain-contract-list"],
-    async () => {
+  return useQuery({
+    queryKey: ["dashboard-registry", walletAddress, "multichain-contract-list"],
+    queryFn: async () => {
       invariant(walletAddress, "walletAddress is required");
       const contracts = await getAllMultichainRegistry({
         contract: MULTICHAIN_REGISTRY_CONTRACT,
@@ -27,10 +27,9 @@ function useMultiChainRegContractList(walletAddress?: string) {
 
       return contracts;
     },
-    {
-      enabled: !!walletAddress,
-    },
-  );
+
+    enabled: !!walletAddress,
+  });
 }
 
 interface Options {

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

@@ -1,24 +1,17 @@
 import type { WalletNFTApiReturn } from "pages/api/wallet/nfts/[chainId]";
-import { useActiveAccount } from "thirdweb/react";
 import { useQueryWithNetwork } from "./query/useQueryWithNetwork";
-import { useDashboardEVMChainId } from "./useActiveChainId";
-
-export function useWalletNFTs(walletAddress?: string) {
-  const activeChainId = useDashboardEVMChainId();
-  const connectedAddress = useActiveAccount()?.address;
-
-  const address = walletAddress || connectedAddress;
 
+export function useWalletNFTs(walletAddress?: string, chainId?: number) {
   return useQueryWithNetwork(
-    ["walletNfts", address],
+    ["walletNfts", walletAddress],
     async () => {
       const response = await fetch(
-        `/api/wallet/nfts/${activeChainId}?owner=${address}`,
+        `/api/wallet/nfts/${chainId}?owner=${walletAddress}`,
       );
       return (await response.json()) as WalletNFTApiReturn;
     },
     {
-      enabled: !!address && !!activeChainId,
+      enabled: !!walletAddress && !!chainId,
     },
   );
 }

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

@@ -120,7 +120,7 @@ export function FaucetButton({
   // loading state
   if (faucetWalletBalanceQuery.isLoading || canClaimFaucetQuery.isLoading) {
     return (
-      <Button variant="secondary" className="w-full gap-2">
+      <Button variant="outline" className="w-full gap-2">
         Checking Faucet <Spinner className="size-3" />
       </Button>
     );
@@ -129,7 +129,7 @@ export function FaucetButton({
   // faucet is empty
   if (isFaucetEmpty) {
     return (
-      <Button variant="secondary" disabled className="w-full !opacity-100 ">
+      <Button variant="outline" disabled className="w-full !opacity-100 ">
         Faucet is empty right now
       </Button>
     );
@@ -138,7 +138,7 @@ export function FaucetButton({
   // Can not claim
   if (canClaimFaucetQuery.data && canClaimFaucetQuery.data.canClaim === false) {
     return (
-      <Button variant="secondary" className="w-full !opacity-100 " disabled>
+      <Button variant="outline" className="w-full !opacity-100 " disabled>
         {canClaimFaucetQuery.data.type === "throttle" && (
           <>
             Your next claim is available{" "}
@@ -185,7 +185,7 @@ export function FaucetButton({
       </Button>
 
       {faucetWalletBalanceQuery.data && (
-        <p className="mt-3 text-xs text-secondary-foreground">
+        <p className="mt-3 text-xs text-muted-foreground">
           {Number(faucetWalletBalanceQuery.data.displayValue).toFixed(3)}{" "}
           {faucetWalletBalanceQuery.data.symbol} left in the faucet
         </p>

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

@@ -12,7 +12,7 @@ export function BuyFundsSection(props: { chain: ChainMetadata }) {
   return (
     <section>
       <SectionTitle title="Buy Funds" />
-      <div className="border border-border px-4 py-10 rounded-lg flex justify-center">
+      <div className="border border-border px-4 py-10 rounded-lg flex justify-center bg-muted/30">
         <div className="max-w-[520px] flex flex-col items-center ">
           <div className="flex items-center">
             <ChainIcon
@@ -33,7 +33,7 @@ export function BuyFundsSection(props: { chain: ChainMetadata }) {
 
           <div className="h-2" />
 
-          <p className="text-secondary-foreground text-sm max-w-[520px] text-center px-4">
+          <p className="text-muted-foreground text-sm max-w-[520px] text-center px-4">
             Instantly onramp, bridge & swap into {sanitizedChainName} with any
             token.
           </p>
@@ -49,7 +49,7 @@ export function BuyFundsSection(props: { chain: ChainMetadata }) {
 
           <Link
             href="https://portal.thirdweb.com/connect/pay/overview"
-            className="inline-flex gap-1.5 items-center text-sm text-secondary-foreground hover:text-foreground"
+            className="inline-flex gap-1.5 items-center text-sm text-muted-foreground hover:text-foreground"
           >
             Learn more about thirdweb Pay{" "}
             <ExternalLinkIcon className="size-3" />

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

@@ -11,7 +11,7 @@ export function ChainOverviewSection(props: { chain: ChainMetadata }) {
   return (
     <section>
       <SectionTitle title="Chain Overview" />
-      <div className="grid grid-cols-1 gap-6 lg:gap-8 md:grid-cols-2 lg:grid-cols-3 border rounded-lg p-4 md:p-6">
+      <div className="grid grid-cols-1 gap-6 lg:gap-8 md:grid-cols-2 lg:grid-cols-3 border rounded-lg p-4 md:p-6 bg-muted/50">
         {/* Info */}
         {chain.infoURL && (
           <PrimaryInfoItem title="Info">

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

@@ -7,9 +7,9 @@ export function ClaimChainSection() {
   return (
     <section>
       <SectionTitle title="Claim Chain" />
-      <div className="border p-4 rounded-lg">
+      <div className="border p-4 rounded-lg bg-muted/50">
         <p className="mb-1"> This chain page is unclaimed </p>
-        <p className="text-secondary-foreground text-sm mb-5">
+        <p className="text-muted-foreground text-sm mb-5">
           Are you the owner of this ecosystem? Claim this page to add additional
           information on this page to help your developers get started!
         </p>
@@ -17,7 +17,7 @@ export function ClaimChainSection() {
         <Button variant="outline" asChild>
           <Link
             className="gap-2"
-            href="https://share.hsforms.com/1o01TyfsZRAao2eCrzuXSVgea58c"
+            href="https://share.hsforms.com/1qAViW3U5SoKbabNhRZy4Kgea58c"
             target="_blank"
           >
             <span>Claim Chain</span>

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

@@ -15,7 +15,7 @@ export async function FaucetSection(props: { chain: ChainMetadata }) {
   return (
     <section>
       <SectionTitle title="Faucet" />
-      <div className="border border-border px-4 py-10 rounded-lg flex justify-center">
+      <div className="border border-border px-4 py-10 rounded-lg flex justify-center bg-muted/50">
         <div className="max-w-[520px] w-full flex flex-col items-center ">
           <div className="flex items-center">
             <ChainIcon
@@ -33,7 +33,7 @@ export async function FaucetSection(props: { chain: ChainMetadata }) {
 
           <div className="h-2" />
 
-          <p className="text-secondary-foreground text-sm max-w-[520px] text-center px-4">
+          <p className="text-muted-foreground text-sm max-w-[520px] text-center px-4">
             Get free {chain.nativeCurrency.symbol} fast and reliably.{" "}
             {amountToGive} {chain.nativeCurrency.symbol}/day.
           </p>

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

@@ -25,7 +25,7 @@ export function SupportedProductsSection(props: {
           return (
             <div
               key={product.id}
-              className="border rounded-lg p-4 flex gap-3 relative hover:bg-secondary transition-colors duration-300 pr-8"
+              className="border rounded-lg p-4 flex gap-3 relative hover:bg-muted bg-muted/50 transition-colors duration-300 pr-8"
             >
               <CircleCheckIcon className="size-5 text-success-text absolute top-4 right-4" />
               <product.icon className="size-5 shrink-0 mt-0.5" />
@@ -40,7 +40,7 @@ export function SupportedProductsSection(props: {
                     {product.name}{" "}
                   </Link>
                 </h3>
-                <p className="text-sm text-secondary-foreground">
+                <p className="text-sm text-muted-foreground">
                   {product.description}
                 </p>
               </div>

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

@@ -1,5 +1,6 @@
 import { AspectRatio } from "@/components/ui/aspect-ratio";
 import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
 import Link from "next/link";
 import type { ChainMetadata } from "thirdweb/chains";
 import { mapV4ChainToV5Chain } from "../../../../../../../contexts/map-chains";
@@ -22,7 +23,7 @@ export function ChainHeader(props: ChainHeaderProps) {
 
       <AspectRatio
         ratio={props.headerImageUrl ? 4 : 8}
-        className="border-b border-border -mx-4 lg:-mx-6"
+        className="border-b border-border max-sm:-mx-4"
       >
         {props.headerImageUrl && (
           // eslint-disable-next-line @next/next/no-img-element
@@ -40,7 +41,10 @@ export function ChainHeader(props: ChainHeaderProps) {
 
         <ChainIcon
           iconUrl={props.logoUrl}
-          className="p-2 lg:p-4 absolute top-0 left-0 size-20 lg:size-36 rounded-full bg-background -translate-y-[50%] overflow-hidden border border-border"
+          className={cn(
+            "p-2 lg:p-4 absolute top-0 left-0 size-20 lg:size-36 rounded-full -translate-y-[50%] overflow-hidden border border-border bg-muted",
+            props.headerImageUrl && "lg:left-4",
+          )}
         />
 
         {/* action group */}
@@ -54,7 +58,7 @@ export function ChainHeader(props: ChainHeaderProps) {
                 mapV4ChainToV5Chain(props.chain)
               }
             />
-            <Button variant="primary" asChild>
+            <Button variant="default" asChild>
               <Link href="https://thirdweb.com/dashboard" target="_blank">
                 Get started with thirdweb
               </Link>

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

@@ -23,7 +23,7 @@ export function ChainCTA(props: ChainCTAProps) {
             {props.title}
           </h2>
           {props.description && (
-            <p className="max-w-[600px] text-secondary-foreground leading-relaxed text-sm md:text-base">
+            <p className="max-w-[600px] text-muted-foreground leading-relaxed text-sm md:text-base">
               {props.description}
             </p>
           )}

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

@@ -14,7 +14,7 @@ export function ExplorersSection(props: {
           return (
             <div
               key={explorer.url}
-              className="p-4 border rounded-xl relative hover:bg-secondary"
+              className="p-4 border rounded-xl relative hover:bg-muted bg-muted/50"
             >
               <ExternalLinkIcon className="size-4 absolute top-4 right-4 text-muted-foreground" />
               <h3 className="mb-1 text-base font-semibold capitalize">

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

@@ -1,7 +1,7 @@
-import { BurgerMenuButton } from "@/components/blocks/BurgerMenuButton";
+import { MobileSidebar } from "@/components/blocks/MobileSidebar";
 import { Sidebar } from "@/components/blocks/Sidebar";
 import { Button } from "@/components/ui/button";
-import { ArrowLeftIcon, TicketCheckIcon } from "lucide-react";
+import { ArrowLeftIcon, MenuIcon, TicketCheckIcon } from "lucide-react";
 import type { Metadata } from "next";
 import Link from "next/link";
 import { redirect } from "next/navigation";
@@ -50,6 +50,7 @@ export default async function ChainPageLayout({
     {
       href: `/${chain.slug}`,
       label: "Overview",
+      exactMatch: true,
     },
     {
       href: `/${chain.slug}/popular`,
@@ -64,11 +65,11 @@ export default async function ChainPageLayout({
           <div className="flex items-center gap-1.5 mb-5 flex-wrap">
             <Link
               href="/chainlist"
-              className="text-secondary-foreground hover:text-foreground text-sm"
+              className="text-muted-foreground hover:text-foreground text-sm"
             >
               Chainlist
             </Link>
-            <span className="text-secondary-foreground text-sm"> / </span>
+            <span className="text-muted-foreground text-sm"> / </span>
             <Link href={`/${chain.slug}`} className="text-foreground text-sm">
               {chain.name.replace("Mainnet", "")}
             </Link>
@@ -77,7 +78,7 @@ export default async function ChainPageLayout({
         links={sidebarLinks}
       />
 
-      <div className="flex flex-col w-full lg:px-6 lg:border-x pb-10">
+      <div className="flex flex-col w-full pb-10">
         {/* Icon + Background */}
         <ChainHeader
           headerImageUrl={chainMetadata?.headerImgUrl}
@@ -86,13 +87,18 @@ export default async function ChainPageLayout({
         />
 
         <div className="flex lg:hidden justify-end">
-          <BurgerMenuButton
+          <MobileSidebar
             links={sidebarLinks}
+            trigger={
+              <Button size="icon" variant="outline">
+                <MenuIcon strokeWidth={1} />
+              </Button>
+            }
             footer={
               <div className="mt-5 border-t pt-6 pb-2">
                 <Link
                   href="/chainlist"
-                  className="px-2 text-sm flex justify-start gap-2 items-center text-secondary-foreground hover:text-foreground"
+                  className="px-2 text-sm flex justify-start gap-2 items-center text-muted-foreground hover:text-foreground"
                 >
                   <ArrowLeftIcon className="size-4" />
                   View all chains
@@ -135,7 +141,7 @@ export default async function ChainPageLayout({
 
           {/* description */}
           {chainMetadata?.about && (
-            <p className="text-secondary-foreground text-sm lg:text-base mb-2">
+            <p className="text-muted-foreground text-sm lg:text-base mb-2">
               {chainMetadata.about}
             </p>
           )}

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

@@ -25,7 +25,7 @@ export default async function Page(props: {
         Popular Contracts
       </h2>
 
-      <p className="text-sm text-secondary-foreground">
+      <p className="text-sm text-muted-foreground">
         Explore contracts on Ethereum and sort them by your preferred metrics
       </p>
 
@@ -41,7 +41,7 @@ export default async function Page(props: {
       )}
 
       {topContracts.length === 0 && (
-        <div className="text-secondary-foreground text-lg flex border rounded-lg h-[200px] border-border items-center justify-center">
+        <div className="text-muted-foreground text-lg flex border rounded-lg h-[200px] border-border items-center justify-center">
           <div className="flex items-center gap-2">
             <CircleAlertIcon className="size-5 text-destructive-text" />
             No contracts found

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

@@ -155,7 +155,7 @@ export default async function Page(props: {
 
         <div className="grid grid-cols-2 items-start">
           <div className="flex gap-x-2 items-center">Raw Input:</div>
-          <div className="bg-secondary p-4 rounded-lg break-words text-sm">
+          <div className="bg-muted/50 p-4 rounded-lg break-words text-sm">
             {transaction.input}
           </div>
         </div>

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

@@ -42,10 +42,10 @@ export const SearchInput: React.FC = () => {
 
   return (
     <div className="relative w-full">
-      <SearchIcon className="absolute size-5 top-[50%] -translate-y-1/2 left-4 text-muted-foreground" />
+      <SearchIcon className="absolute size-4 top-[50%] -translate-y-1/2 left-3 text-muted-foreground" />
       <Input
         placeholder="Search by name or chain ID"
-        className={"pl-12 h-10 py-2 text-base bg-secondary rounded-lg"}
+        className={"pl-9 h-10 py-2 rounded-lg"}
         defaultValue={searchParams?.get("query") || ""}
         onChange={(e) => handleSearch(e.target.value)}
         ref={inputRef}

apps/dashboard/src/app/(dashboard)/(chain)/chainlist/components/server/chainlist-card.tsx

@@ -31,7 +31,7 @@ export async function ChainListCard({
 
   return (
     <div className="relative h-full">
-      <Card className="w-full h-full hover:bg-muted">
+      <Card className="w-full h-full bg-muted/50 hover:bg-muted">
         <CardHeader className="flex flex-row items-center justify-between p-4">
           <div className="flex flex-row items-center gap-2">
             <ChainIcon iconUrl={iconUrl} className="size-6" />
@@ -51,7 +51,7 @@ export async function ChainListCard({
           <table className="w-full">
             <tbody className="[&_td>*]:min-h-[25px] text-sm">
               <tr>
-                <th className="font-normal text-left text-secondary-foreground">
+                <th className="font-normal text-left text-muted-foreground">
                   Chain ID
                 </th>
                 <td className="text-right">
@@ -66,7 +66,7 @@ export async function ChainListCard({
                 </td>
               </tr>
               <tr>
-                <th className="font-normal text-left text-secondary-foreground">
+                <th className="font-normal text-left text-muted-foreground">
                   Native Token
                 </th>
                 <td className="text-right">
@@ -76,7 +76,7 @@ export async function ChainListCard({
                 </td>
               </tr>
               <tr>
-                <th className="font-normal text-left text-secondary-foreground">
+                <th className="font-normal text-left text-muted-foreground">
                   Available Services
                 </th>
 

apps/dashboard/src/app/(dashboard)/(chain)/chainlist/components/server/chainlist-row.tsx

@@ -36,7 +36,7 @@ export async function ChainListRow({
 }: ChainListRowProps) {
   const chainMetadata = await getChainMetadata(chainId);
   return (
-    <tr className="border-b relative hover:bg-secondary">
+    <tr className="border-b relative hover:bg-muted/50">
       <TableData>{favoriteButton}</TableData>
       {/* Name */}
       <TableData>

apps/dashboard/src/app/(dashboard)/(chain)/chainlist/page.tsx

@@ -296,7 +296,7 @@ async function ChainsData(props: {
         <ChainlistPagination totalPages={totalPages} activePage={activePage} />
       )}
       <div className="h-4" />
-      <p className="text-sm text-center text-secondary-foreground text-balance">
+      <p className="text-sm text-center text-muted-foreground text-balance">
         Showing{" "}
         <span className="text-accent-foreground">{paginatedChains.length}</span>{" "}
         out of{" "}

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

@@ -7,6 +7,9 @@ import zeroGBanner from "./temp-assets/0gLabsBanner.png";
 import alephZeroBaner from "./temp-assets/AlephZeroBanner.jpg";
 import alephZeroCTA from "./temp-assets/AlephZeroCTA.jpg";
 import ancient8Banner from "./temp-assets/ancient8-banner.png";
+import assetChainBanner from "./temp-assets/assetChainBanner.png";
+import assetChainCTABG from "./temp-assets/assetChainCTABanner.png";
+
 // TEMPORARY
 import baseBanner from "./temp-assets/base-banner.jpeg";
 import superchainCTABG from "./temp-assets/cta-bg-superchain.png";
@@ -14,11 +17,12 @@ import xaiCTABg from "./temp-assets/cta-bg-xai-connect.png";
 import thirdwebCTA from "./temp-assets/cta-thirdweb.png";
 import lumiaCTA from "./temp-assets/lumia-cta.png";
 import lumiaBanner from "./temp-assets/lumiaBanner.png";
-import mantleBanner from "./temp-assets/mantle-banner.jpeg";
+import mantleBanner from "./temp-assets/mantle.png";
 import plumeBanner from "./temp-assets/plumeBanner.png";
 import plumeCTA from "./temp-assets/plumeCTA.png";
 import rootStockBanner from "./temp-assets/rootstock-banner.png";
 import rootStockCTABG from "./temp-assets/rootstock-cta.png";
+import soneiumBanner from "./temp-assets/soneiumBanner.png";
 import superpositionBanner from "./temp-assets/superpositionBanner.png";
 import superpositionCTA from "./temp-assets/superpositionCTA.png";
 import thirdwebBanner from "./temp-assets/thirdweb-banner.png";
@@ -27,6 +31,8 @@ import treasureCTA from "./temp-assets/treasureCta.png";
 import vanarBanner from "./temp-assets/vanar-banner.png";
 import vanarCTABG from "./temp-assets/vanar-cta.png";
 import xaiBanner from "./temp-assets/xai-banner.jpg";
+import zytronBanner from "./temp-assets/zytronBanner.png";
+import zytronCTA from "./temp-assets/zytronCTA.jpg";
 
 // END TEMPORARY
 
@@ -170,17 +176,14 @@ const chainMetaRecord = {
   },
   // mantle
   5000: {
-    about:
-      "A fast-growing, DAO-led web3 ecosystem whose mission is the mass adoption of token-governed technologies. Mantle Ecosystem comprises Mantle Network, an Ethereum layer 2; Mantle Governance, Mantle Treasury and Mantle LSP.",
+    about: `Build dApps with exceptional UX, all while relying on Ethereum's unrivaled security, with our high-performance Ethereum layer-2 network built with modular architecture.`,
     headerImgUrl: mantleBanner.src,
-    // TODO: waiting on CTA copy
-    // cta: {
-    //   backgroundImageUrl: mantleCTA.src,
-    //   title: "Title Goes Here",
-    //   description: "Optional description goes here",
-    //   buttonText: "Learn More",
-    //   buttonLink: "https://www.mantle.xyz",
-    // },
+    cta: {
+      backgroundImageUrl: mantleBanner.src,
+      title: "Reach out to bring your brilliant ideas to life",
+      buttonText: "Learn More",
+      buttonLink: "https://x.com/0xMantleDevs",
+    },
   },
   // rootstock
   30: {
@@ -362,6 +365,43 @@ const chainMetaRecord = {
       buttonText: "Learn more",
     },
   },
+  //AssetChain
+  42421: {
+    headerImgUrl: assetChainBanner.src,
+    about:
+      "Asset Chain is the native blockchain for Xend Finance's Real-World Asset OAE (Onchain Asset Environment), with its consensus based on Fantom's Lachesis consensus mechanism.",
+    cta: {
+      backgroundImageUrl: assetChainCTABG.src,
+      title: "Start Building",
+      buttonLink: "https://docs.assetchain.org",
+      buttonText: "Learn more",
+    },
+  },
+  //zytron
+  9901: {
+    headerImgUrl: zytronBanner.src,
+    about:
+      "Discover Zytron - a highly customizable Layer 3 roll up stack, natively supporting Zypher’s blockchain abstraction layer for games. It is designed for production level gaming experiences, from autonomous worlds to TON-based hyper casual games.",
+    cta: {
+      backgroundImageUrl: zytronCTA.src,
+      title: "Unlock ZK Gaming with Zytron Layer3.",
+      buttonLink: "https://zytron.zypher.network/",
+      buttonText: "Learn more",
+    },
+  },
+  //Soneium
+  1946: {
+    headerImgUrl: soneiumBanner.src,
+    about:
+      "Soneium, an Ethereum layer-2 developed by Sony Block Solutions Labs. This versatile chain is a general-purpose blockchain platform that aims to evoke emotion, empower creativity, and meet diverse needs to go mainstream. Soneium will be simplifying blockchain experiences while empowering developers, creators, and communities. Built on accessibility, scalability, and efficiency, it aims to solve real-world problems across industries globally. Soneium will change the way we interact with the internet, opening up a world of innovative applications and unlimited potential for users worldwide.",
+    cta: {
+      backgroundImageUrl: soneiumBanner.src,
+      title: "Begin your journey with Soneium Spark",
+      buttonLink:
+        "https://soneium.org/en/blog/soneium-minato-testnet-is-live-along-with-soneium-spark-incubation-program/",
+      buttonText: "Learn more",
+    },
+  },
 } satisfies Record<number, ExtraChainMetadata>;
 // END TEMPORARY
 

apps/dashboard/src/app/(dashboard)/dashboard/components/sidebar/section.tsx

@@ -9,9 +9,7 @@ export const SidebarSection: React.FC<SidebarSectionProps> = ({ section }) => {
   return (
     <div className="flex flex-col gap-2 h-7 relative">
       {/* title element */}
-      <label className="text-sm text-secondary-foreground">
-        {section.title}
-      </label>
+      <label className="text-sm text-muted-foreground">{section.title}</label>
       <nav>
         <ul>
           {section.items.map((item) => (
@@ -19,7 +17,7 @@ export const SidebarSection: React.FC<SidebarSectionProps> = ({ section }) => {
               <NavLink
                 prefetch={false}
                 href={item.href}
-                className="pl-3 border-l-2 h-8 text-sm text-secondary-foreground flex items-center hover:text-accent-foreground hover:border-secondary-foreground"
+                className="pl-3 border-l-2 h-8 text-sm text-muted-foreground flex items-center hover:text-accent-foreground hover:border-foreground"
                 activeClassName="border-primary hover:border-primary text-accent-foreground font-semibold"
               >
                 {item.title}

apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/[slug]/(active)/components/client/ecosystem-header.client.tsx

@@ -175,19 +175,18 @@ export function EcosystemHeader(props: { ecosystem: Ecosystem }) {
               name: "Permissions",
               href: `/dashboard/connect/ecosystem/${ecosystem.slug}/permissions`,
               isActive: pathname?.endsWith("/permissions") || false, // pathname will almost never be null: https://nextjs.org/docs/app/api-reference/functions/use-pathname
-              isEnabled: true,
             },
             {
               name: "Analytics (Coming Soon)",
               href: "#",
               isActive: false,
-              isEnabled: false,
+              isDisabled: true,
             },
             {
               name: "Design (Coming Soon)",
               href: "#",
               isActive: false,
-              isEnabled: false,
+              isDisabled: true,
             },
           ]}
         />

apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/[slug]/(active)/components/client/update-partner-modal.client.tsx

@@ -20,7 +20,10 @@ export function UpdatePartnerModal({
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger>{children}</DialogTrigger>
-      <DialogContent className="w-[90vw] sm:w-auto">
+      <DialogContent
+        className="w-[90vw] sm:w-auto z-[10001]"
+        dialogOverlayClassName="z-[10000]"
+      >
         <DialogHeader>
           <DialogTitle>Update {partner.name}</DialogTitle>
         </DialogHeader>

apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/[slug]/(active)/components/server/partners-table.tsx

@@ -29,7 +29,7 @@ export function PartnersTable({ ecosystem }: { ecosystem: Ecosystem }) {
   return (
     <table className="w-full">
       <thead>
-        <tr className="border-b bg-muted">
+        <tr className="border-b bg-muted/50">
           <TableHeading>Name</TableHeading>
           <TableHeading className="hidden md:table-cell">Domains</TableHeading>
           <TableHeading className="hidden md:table-cell">
@@ -85,7 +85,7 @@ function TableRow(props: {
   return (
     <tr
       className={cn(
-        "relative border-b hover:bg-secondary",
+        "relative border-b hover:bg-muted/50",
         isDeleting && "animate-pulse",
       )}
     >

apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/create/page.tsx

@@ -8,7 +8,7 @@ export default function Page() {
         <h2 className="text-4xl font-bold text-foreground">
           Create an Ecosystem
         </h2>
-        <p className="text-secondary-foreground">
+        <p className="text-muted-foreground">
           Create wallets that work across every chain and every app.
         </p>
       </header>

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

@@ -62,7 +62,7 @@ export default async function Page() {
         <h2 className="text-2xl font-bold sm:text-3xl text-foreground text-balance">
           One wallet, a whole ecosystem of apps and games
         </h2>
-        <p className="text-secondary-foreground">
+        <p className="text-muted-foreground">
           With Ecosystem Wallets, your users can access their assets across
           hundreds of apps and games within your ecosystem. You can control
           which apps join your ecosystem and how their users interact with your
@@ -99,10 +99,10 @@ export default async function Page() {
       >
         <Card className="flex flex-col gap-3 p-6 md:p-8 md:px-10">
           <div className="flex items-center gap-2">
-            <BookMarkedIcon className="size-5 text-secondary-foreground" />
+            <BookMarkedIcon className="size-5 text-muted-foreground" />
             <h4 className="text-lg font-bold">Learn more</h4>
           </div>
-          <p className="text-secondary-foreground text-md">
+          <p className="text-muted-foreground text-md">
             Learn how to create and manage Ecosystem Wallets in our docs.
           </p>
           <div className="flex flex-row items-center gap-2 mt-4 transition-all group-hover:gap-3 group-hover:text-primary/80 text-primary text-md">

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

@@ -6,11 +6,6 @@ const SIDEBAR_SECTIONS = [
     id: "connect",
     title: "Connect",
     items: [
-      {
-        id: "playground",
-        title: "Playground",
-        href: "/dashboard/connect/playground",
-      },
       {
         id: "analytics",
         title: "Analytics",
@@ -36,6 +31,11 @@ const SIDEBAR_SECTIONS = [
         title: "Pay",
         href: "/dashboard/connect/pay",
       },
+      {
+        id: "playground",
+        title: "Playground",
+        href: "https://playground.thirdweb.com/connect/sign-in/button",
+      },
     ],
   },
 ] satisfies Array<SidebarNavSection>;

apps/dashboard/src/app/(dashboard)/dashboard/connect/pay/components/pay-ui.client.tsx

@@ -31,7 +31,22 @@ export function PayUI(props: {
 
   return (
     <>
-      <div className="flex flex-row w-full">
+      <div className="flex-col gap-4 flex lg:flex-row w-full relative">
+        <div className="max-sm:w-full lg:min-w-[200px] lg:absolute right-0 bottom-3 z-10">
+          <Select defaultValue={selectedKeyId} onValueChange={setSelectedKeyId}>
+            <SelectTrigger>
+              <SelectValue>{selectedKey?.name || selectedKeyId}</SelectValue>
+            </SelectTrigger>
+            <SelectContent>
+              {props.apiKeys.map((key) => (
+                <SelectItem key={key.key} value={key.key}>
+                  {key.name}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+
         <TabButtons
           containerClassName="w-full"
           tabs={[
@@ -55,28 +70,12 @@ export function PayUI(props: {
             },
           ]}
         />
-        <div className="flex-shrink-0 flex-grow-0 relative md:min-w-[200px]">
-          <Select defaultValue={selectedKeyId} onValueChange={setSelectedKeyId}>
-            <SelectTrigger>
-              <SelectValue>{selectedKey?.name || selectedKeyId}</SelectValue>
-            </SelectTrigger>
-            <SelectContent>
-              {props.apiKeys.map((key) => (
-                <SelectItem key={key.key} value={key.key}>
-                  {key.name}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-
-          <div className="absolute bottom-0 left-0 right-0 h-[1px] bg-border -translate-y-[2px]" />
-        </div>
       </div>
 
       {/* TODO: split this into sub-pages */}
-      {activeTab === "analytics" && <PayAnalytics apiKey={selectedKey} />}
+      {activeTab === "analytics" && <PayAnalytics clientId={selectedKey.key} />}
       {activeTab === "settings" && <PayConfig apiKey={selectedKey} />}
-      {activeTab === "webhooks" && <WebhooksPage apiKey={selectedKey} />}
+      {activeTab === "webhooks" && <WebhooksPage clientId={selectedKey.key} />}
     </>
   );
 }

apps/dashboard/src/app/(dashboard)/dashboard/connect/pay/components/webhooks.client.tsx

@@ -1,6 +1,5 @@
 import { CopyTextButton } from "@/components/ui/CopyTextButton";
 import { Spinner } from "@/components/ui/Spinner/Spinner";
-import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
   Dialog,
@@ -36,7 +35,6 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
-import type { ApiKey } from "@3rdweb-sdk/react/hooks/useApi";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { formatDistanceToNow } from "date-fns";
@@ -57,15 +55,15 @@ type Webhook = {
 };
 
 export type WebhooksPageProps = {
-  apiKey: ApiKey;
+  clientId: string;
 };
 
 export function WebhooksPage(props: WebhooksPageProps) {
   const webhooksQuery = useQuery({
-    queryKey: ["webhooks", props.apiKey.key],
+    queryKey: ["webhooks", props.clientId],
     queryFn: async () => {
       const res = await fetch(
-        `/api/server-proxy/pay/webhooks/get-all?clientId=${props.apiKey.key}`,
+        `/api/server-proxy/pay/webhooks/get-all?clientId=${props.clientId}`,
         {
           headers: {
             "Content-Type": "application/json",
@@ -85,7 +83,7 @@ export function WebhooksPage(props: WebhooksPageProps) {
     return (
       <div className="border border-border rounded-lg p-8 text-center flex flex-col items-center gap-8">
         <h2 className="text-xl font-semibold">No webhooks configured yet.</h2>
-        <CreateWebhookButton apiKey={props.apiKey}>
+        <CreateWebhookButton clientId={props.clientId}>
           <Button variant="primary" className="gap-1">
             <PlusIcon className="size-4" />
             <span>Create Webhook</span>
@@ -105,7 +103,7 @@ export function WebhooksPage(props: WebhooksPageProps) {
             <TableHead>Secret</TableHead>
             <TableHead>Created</TableHead>
             <TableHead className="text-right">
-              <CreateWebhookButton apiKey={props.apiKey}>
+              <CreateWebhookButton clientId={props.clientId}>
                 <Button size="sm" variant="primary" className="gap-1">
                   <PlusIcon className="size-4" />
                   <span>Create New Webhook</span>
@@ -134,7 +132,7 @@ export function WebhooksPage(props: WebhooksPageProps) {
               </TableCell>
               <TableCell className="text-right">
                 <DeleteWebhookButton
-                  apiKey={props.apiKey}
+                  clientId={props.clientId}
                   webhookId={webhook.id}
                 >
                   <Button variant="ghost" size="icon">
@@ -172,19 +170,19 @@ function CreateWebhookButton(props: PropsWithChildren<WebhooksPageProps>) {
         headers: {
           "Content-Type": "application/json",
         },
-        body: JSON.stringify({ ...values, clientId: props.apiKey.key }),
+        body: JSON.stringify({ ...values, clientId: props.clientId }),
       });
       const json = await res.json();
       return json.result as string;
     },
     onSuccess: () => {
-      return queryClient.invalidateQueries(["webhooks", props.apiKey.key]);
+      return queryClient.invalidateQueries(["webhooks", props.clientId]);
     },
   });
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>{props.children}</DialogTrigger>
-      <DialogContent>
+      <DialogContent className="z-[10001]" dialogOverlayClassName="z-[10000]">
         <Form {...form}>
           <form
             onSubmit={form.handleSubmit((values) =>
@@ -247,9 +245,7 @@ function CreateWebhookButton(props: PropsWithChildren<WebhooksPageProps>) {
 
             {/* Note: this is a "fake" form field since there is nothing to select yet */}
             <FormItem>
-              <FormLabel>
-                Event Type <Badge variant="outline">Coming Soon</Badge>
-              </FormLabel>
+              <FormLabel>Event Type</FormLabel>
               <Select disabled defaultValue="purchase_complete">
                 <SelectTrigger className="w-full">
                   <SelectValue placeholder="Purchase Complete" />
@@ -290,13 +286,13 @@ function DeleteWebhookButton(
         headers: {
           "Content-Type": "application/json",
         },
-        body: JSON.stringify({ id, clientId: props.apiKey.key }),
+        body: JSON.stringify({ id, clientId: props.clientId }),
       });
       const json = await res.json();
       return json.result as string;
     },
     onSuccess: () => {
-      return queryClient.invalidateQueries(["webhooks", props.apiKey.key]);
+      return queryClient.invalidateQueries(["webhooks", props.clientId]);
     },
   });
   return (

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

@@ -48,7 +48,7 @@ export default async function DashboardConnectPayPage() {
       <div className="flex flex-col lg:flex-row gap-6 justify-between items-start">
         <div className="max-w-[800px]">
           <h1 className="text-5xl tracking-tight font-bold mb-5">Pay</h1>
-          <p className="text-secondary-foreground leading-7">
+          <p className="text-muted-foreground leading-7">
             Pay allows your users to purchase cryptocurrencies and execute
             transactions with their credit card or debit card, or with any token
             via cross-chain routing.{" "}

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

@@ -4,7 +4,7 @@ import { DashboardHeader } from "app/components/Header/DashboardHeader";
 export default function DashboardLayout(props: { children: React.ReactNode }) {
   return (
     <>
-      <div className="flex flex-col h-full">
+      <div className="flex flex-col h-full bg-background">
         <DashboardHeader />
         <main className="grow">{props.children}</main>
         <AppFooter />

apps/dashboard/src/app/(dashboard)/styleguide/page.tsx

@@ -1,5 +1,15 @@
-import { Separator } from "@/components/ui/separator";
 import { cn } from "@/lib/utils";
+import { CircleAlertIcon } from "lucide-react";
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from "../../../@/components/ui/alert";
+import { Badge } from "../../../@/components/ui/badge";
+import { Button } from "../../../@/components/ui/button";
+import { Checkbox } from "../../../@/components/ui/checkbox";
+import { Input } from "../../../@/components/ui/input";
+import { Label } from "../../../@/components/ui/label";
 
 export const metadata = {
   robots: "noindex, nofollow",
@@ -7,11 +17,11 @@ export const metadata = {
 
 export default function Page() {
   return (
-    <div className="container py-10">
+    <div className="max-w-[700px] py-10 mx-auto">
       <h1 className="text-5xl tracking-tighter font-semibold mb-8">
         Styleguide
       </h1>
-      <Separator className="my-10" />
+      <div className="my-10" />
       <Colors />
     </div>
   );
@@ -21,65 +31,205 @@ function Colors() {
   return (
     <div>
       <h2 className="text-2xl mb-5 font-semibold tracking-tight">
-        Neutral background Colors
+        Backgrounds
       </h2>
       <div className="flex-col md:flex-row flex gap-4 flex-wrap">
         <BgColorPreview className="bg-background" />
-        <BgColorPreview className="bg-secondary" />
+        <BgColorPreview className="bg-muted/30" />
+        <BgColorPreview className="bg-muted/50" />
         <BgColorPreview className="bg-muted" />
         <BgColorPreview className="bg-accent" />
-        <BgColorPreview className="bg-card" />
-        <BgColorPreview className="bg-popover" />
       </div>
 
-      <Separator className="my-10" />
+      <div className="my-14" />
+
+      <h2 className="text-2xl mb-5 font-semibold tracking-tight">Buttons</h2>
+
+      <ButtonsPreview />
+
+      <div className="my-14" />
 
       <h2 className="text-2xl mb-5 font-semibold tracking-tight">
-        Foreground Colors with Background
+        Disabled Buttons
+      </h2>
+
+      <ButtonsPreview disabled />
+
+      <div className="my-14" />
+
+      <h2 className="text-2xl mb-5 font-semibold tracking-tight">Badges</h2>
+
+      <div className="flex items-center gap-4">
+        <Badge> Default </Badge>
+        <Badge variant="outline"> Outline </Badge>
+        <Badge variant="secondary"> Secondary </Badge>
+        <Badge variant="destructive"> Destructive </Badge>
+        <Badge variant="success"> Success </Badge>
+        <Badge variant="warning"> Warning </Badge>
+      </div>
+
+      <div className="my-14" />
+
+      <h2 className="text-2xl mb-5 font-semibold tracking-tight">
+        Foregrounds
       </h2>
 
       <div className="flex flex-col gap-2">
         <TextColorPreview className="text-foreground" />
-        <TextColorPreview className="text-secondary-foreground" />
         <TextColorPreview className="text-muted-foreground" />
-        <TextColorPreview className="text-popover-foreground bg-popover" />
-        <TextColorPreview className="text-card-foreground bg-card" />
-        <TextColorPreview className="text-secondary-foreground bg-secondary" />
-        <TextColorPreview className="text-muted-foreground bg-muted" />
-        <TextColorPreview className="text-accent-foreground bg-accent" />
-        <TextColorPreview className="text-primary-foreground bg-primary" />
-        <TextColorPreview className="text-success-foreground bg-success" />
-        <TextColorPreview className="text-destructive-foreground bg-destructive" />
-        <TextColorPreview className="text-warning-foreground bg-warning" />
-        <TextColorPreview className="text-inverted-foreground bg-inverted" />
         <TextColorPreview className="text-destructive-text" />
+        <TextColorPreview className="text-warning-text" />
         <TextColorPreview className="text-success-text" />
       </div>
+
+      <div className="my-14" />
+
+      <h2 className="text-2xl mb-5 font-semibold tracking-tight">
+        Chart colors
+      </h2>
+
+      <div className="flex-col md:flex-row flex gap-4 flex-wrap">
+        <ChartColorPreview name="1" />
+        <ChartColorPreview name="2" />
+        <ChartColorPreview name="3" />
+        <ChartColorPreview name="4" />
+        <ChartColorPreview name="5" />
+      </div>
+
+      <div className="my-14" />
+
+      <h2 className="text-2xl mb-5 font-semibold tracking-tight">Alerts</h2>
+
+      <div className="flex-col flex gap-6">
+        <AlertPreview variant="default" />
+        <AlertPreview variant="destructive" />
+        <AlertPreview variant="info" />
+        <AlertPreview variant="warning" />
+      </div>
+
+      <div className="my-10" />
+
+      <div className="flex-col flex gap-6">
+        <AlertPreview variant="default" showDescription />
+        <AlertPreview variant="destructive" showDescription />
+        <AlertPreview variant="info" showDescription />
+        <AlertPreview variant="warning" showDescription />
+      </div>
+
+      <div className="my-14" />
+
+      <h2 className="text-2xl mb-5 font-semibold tracking-tight">
+        Inputs + Label
+      </h2>
+
+      <div className="flex flex-col gap-6">
+        <div>
+          <Label className="mb-2 block"> Placeholder </Label>
+          <Input placeholder="placeholder" />
+        </div>
+
+        <div>
+          <Label className="mb-2 block"> No value, No placeholder </Label>
+          <Input />
+        </div>
+
+        <div>
+          <Label className="mb-2 block"> Value filled </Label>
+          <Input value="some value" />
+        </div>
+
+        <div>
+          <Label className="mb-2 block">Disabled</Label>
+          <Input value="some value" disabled />
+        </div>
+      </div>
+
+      <div className="my-14" />
+
+      <h2 className="text-2xl mb-5 font-semibold tracking-tight">Checkboxes</h2>
+
+      <div className="flex gap-4">
+        <Checkbox />
+        <Checkbox checked />
+      </div>
+    </div>
+  );
+}
+
+function ButtonsPreview(props: {
+  disabled?: boolean;
+}) {
+  return (
+    <div className="gap-4 flex items-center">
+      <Button disabled={props.disabled}> Default </Button>
+      <Button variant="outline" disabled={props.disabled}>
+        Outline
+      </Button>
+      <Button variant="secondary" disabled={props.disabled}>
+        Secondary
+      </Button>
+      <Button variant="destructive" disabled={props.disabled}>
+        Destructive
+      </Button>
+      <Button variant="primary" disabled={props.disabled}>
+        Primary
+      </Button>
+      <Button variant="ghost" disabled={props.disabled}>
+        Ghost
+      </Button>
+    </div>
+  );
+}
+
+function AlertPreview(props: {
+  variant: "default" | "destructive" | "info" | "warning";
+  showDescription?: boolean;
+}) {
+  return (
+    <Alert variant={props.variant}>
+      <CircleAlertIcon className="size-4" />
+      <AlertTitle>This is {props.variant} alert title</AlertTitle>
+      {props.showDescription && (
+        <AlertDescription>
+          This is the {props.variant} alert description
+        </AlertDescription>
+      )}
+    </Alert>
+  );
+}
+
+function ChartColorPreview(props: { name: string }) {
+  return (
+    <div
+      className={
+        "md:w-[100px] h-[100px] rounded-lg flex items-center justify-center text-xs text-white"
+      }
+      style={{
+        background: `hsl(var(--chart-${props.name}))`,
+      }}
+    >
+      <p className="font-semibold"> chart-{props.name}</p>
     </div>
   );
 }
 
 function BgColorPreview(props: { className: string }) {
   return (
-    <div>
+    <div
+      className={cn(
+        "w-full md:w-[150px] h-[150px] rounded-lg border border-border flex items-center justify-center text-xs",
+        props.className,
+      )}
+    >
       <p className="mb-1"> {props.className}</p>
-      <div
-        className={cn(
-          "w-full md:w-[200px] h-[100px] rounded-xl shadow-md border",
-          props.className,
-        )}
-      />
     </div>
   );
 }
 
 function TextColorPreview(props: { className: string }) {
   return (
-    <div className="grid grid-cols-2">
-      <p>{props.className}</p>
-      <p className={cn("text-base p-2 rounded-lg", props.className)}>
-        The quick brown fox jumps over the lazy dog
-      </p>
-    </div>
+    <p className={cn("text-base rounded-lg", props.className)}>
+      {props.className}
+    </p>
   );
 }

apps/dashboard/src/app/(dashboard)/support/components/create-ticket.client.tsx

@@ -110,7 +110,7 @@ export function CreateTicket() {
       }}
     >
       <DialogTrigger asChild>
-        <Button variant="primary" className="mt-6" size="lg">
+        <Button variant="default" className="mt-6" size="lg">
           Get Support
         </Button>
       </DialogTrigger>