Version Packages (#4842)

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

.github/CODEOWNERS

@@ -11,7 +11,6 @@ packages/thirdweb/src/react/ @joaquim-verges @gregfromstl @MananTank @jnsdls @ed
 packages/thirdweb/src/reactive/ @joaquim-verges @gregfromstl @MananTank @jnsdls
 packages/thirdweb/src/gas/ @joaquim-verges @jnsdls
 packages/thirdweb/src/pay/ @joaquim-verges @gregfromstl @MananTank @jnsdls @edwardysun
-packages/typedoc-gen/ @MananTank @jnsdls @joaquim-verges
 packages/service-utils/ @arcoraven @jnsdls @joaquim-verges
 packages/eslint-config-thirdweb/ @jnsdls @joaquim-verges
 packages/tw-tsconfig/ @jnsdls @joaquim-verges

.gitignore

@@ -27,4 +27,5 @@ sitemap*.xml
 packages/*/typedoc/*
 
 *storybook.log
-storybook-static
+storybook-static
+.aider*

apps/dashboard/.eslintrc.js

@@ -55,6 +55,13 @@ module.exports = {
               "FormErrorMessage",
               "MenuGroup",
               "MenuItem",
+              "VStack",
+              "HStack",
+              "AspectRatio",
+              "useToast",
+              "useClipboard",
+              "Badge",
+              "Stack",
               // also the types
               "ButtonProps",
               "BadgeProps",
@@ -65,6 +72,9 @@ module.exports = {
               "HelpTextProps",
               "MenuGroupProps",
               "MenuItemProps",
+              "AspectRatioProps",
+              "BadgeProps",
+              "StackProps",
             ],
             message:
               'Use the equivalent component from "tw-components" instead.',

apps/dashboard/biome.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "https://biomejs.dev/schemas/1.9.1/schema.json",
+  "$schema": "https://biomejs.dev/schemas/1.9.2/schema.json",
   "extends": ["../../biome.json"],
   "overrides": [
     {

apps/dashboard/knip.json

@@ -3,6 +3,6 @@
   "next": true,
   "ignore": ["src/@/components/ui/**"],
   "project": ["src/**"],
-  "ignoreBinaries": ["only-allow", "knip", "biome"],
+  "ignoreBinaries": ["only-allow", "biome"],
   "ignoreDependencies": ["@storybook/blocks", "@thirdweb-dev/service-utils"]
 }

apps/dashboard/next.config.js

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

apps/dashboard/package.json

@@ -10,6 +10,7 @@
     "format": "biome format ./src --write",
     "lint": "biome check ./src && knip && eslint ./src",
     "fix": "biome check ./src --fix && eslint ./src --fix",
+    "typecheck": "tsc --noEmit",
     "gen:theme-typings": "chakra-cli tokens src/theme/index.ts",
     "postinstall": "pnpm run gen:theme-typings",
     "postbuild": "next-sitemap",
@@ -30,7 +31,6 @@
     "@hookform/resolvers": "^3.9.0",
     "@n8tb1t/use-scroll-position": "^2.0.3",
     "@radix-ui/react-alert-dialog": "^1.1.1",
-    "@radix-ui/react-aspect-ratio": "^1.0.3",
     "@radix-ui/react-avatar": "^1.1.0",
     "@radix-ui/react-checkbox": "^1.1.1",
     "@radix-ui/react-dialog": "1.1.1",
@@ -45,7 +45,6 @@
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-switch": "^1.1.0",
     "@radix-ui/react-tooltip": "1.1.2",
-    "@react-icons/all-files": "^4.1.0",
     "@sentry/nextjs": "8.30.0",
     "@shazow/whatsabi": "^0.14.1",
     "@stripe/react-stripe-js": "^2.7.3",
@@ -62,13 +61,13 @@
     "compare-versions": "^6.1.0",
     "date-fns": "^3.6.0",
     "flat": "^6.0.1",
-    "framer-motion": "11.5.4",
+    "framer-motion": "11.5.6",
     "fuse.js": "7.0.0",
     "ioredis": "^5.4.1",
     "ipaddr.js": "^2.2.0",
     "lottie-react": "^2.4.0",
     "lucide-react": "0.441.0",
-    "next": "14.2.12",
+    "next": "14.2.13",
     "next-plausible": "^3.12.0",
     "next-seo": "^6.5.0",
     "next-themes": "^0.3.0",
@@ -107,24 +106,24 @@
   "devDependencies": {
     "@chakra-ui/cli": "^2.4.1",
     "@chromatic-com/storybook": "2.0.2",
-    "@next/bundle-analyzer": "14.2.12",
-    "@next/eslint-plugin-next": "14.2.12",
-    "@playwright/test": "1.47.1",
-    "@storybook/addon-essentials": "8.3.1",
-    "@storybook/addon-interactions": "8.3.1",
-    "@storybook/addon-links": "8.3.1",
-    "@storybook/addon-onboarding": "8.3.1",
-    "@storybook/addon-viewport": "8.3.1",
-    "@storybook/blocks": "8.3.1",
-    "@storybook/nextjs": "8.3.1",
-    "@storybook/react": "8.3.1",
-    "@storybook/test": "8.3.1",
+    "@next/bundle-analyzer": "14.2.13",
+    "@next/eslint-plugin-next": "14.2.13",
+    "@playwright/test": "1.47.2",
+    "@storybook/addon-essentials": "8.3.2",
+    "@storybook/addon-interactions": "8.3.4",
+    "@storybook/addon-links": "8.3.2",
+    "@storybook/addon-onboarding": "8.3.2",
+    "@storybook/addon-viewport": "8.3.2",
+    "@storybook/blocks": "8.3.4",
+    "@storybook/nextjs": "8.3.2",
+    "@storybook/react": "8.3.4",
+    "@storybook/test": "8.3.2",
     "@types/color": "^3.0.6",
     "@types/node": "20.14.9",
     "@types/papaparse": "^5.3.14",
     "@types/pluralize": "^0.0.33",
     "@types/qrcode": "^1.5.5",
-    "@types/react": "^18.3.7",
+    "@types/react": "^18.3.8",
     "@types/react-dom": "^18",
     "@types/react-table": "^7.7.20",
     "@types/spdx-correct": "^3.1.3",
@@ -134,12 +133,13 @@
     "autoprefixer": "^10.4.19",
     "checkly": "^4.8.1",
     "eslint": "8.57.0",
-    "eslint-config-biome": "1.8.3",
+    "eslint-config-biome": "1.8.4",
     "eslint-plugin-react-compiler": "0.0.0-experimental-ca16900-20240916",
-    "eslint-plugin-storybook": "^0.8.0",
+    "eslint-plugin-storybook": "^0.9.0",
+    "knip": "^5.30.5",
     "next-sitemap": "^4.2.3",
     "postcss": "8.4.47",
-    "storybook": "8.3.1",
+    "storybook": "8.3.2",
     "tailwindcss": "3.4.12",
     "typescript": "5.6.2"
   }

apps/dashboard/src/@/components/blocks/Avatars/GradientAvatar.stories.tsx

@@ -0,0 +1,89 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { BadgeContainer } from "../../../../stories/utils";
+import { Button } from "../../ui/button";
+import { GradientAvatar } from "./GradientAvatar";
+
+const meta = {
+  title: "blocks/Avatars/GradientAvatar",
+  component: Story,
+  parameters: {},
+} satisfies Meta<typeof Story>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Desktop: Story = {
+  args: {},
+};
+
+function Story() {
+  return (
+    <div className="flex flex-col gap-10 p-10">
+      <p> All images below are set with size-6 className </p>
+
+      <BadgeContainer label="No Src, No id - Skeleton">
+        <GradientAvatar id={undefined} src={undefined} className="size-6" />
+      </BadgeContainer>
+
+      <BadgeContainer label="No Src, id=foo - Skeleton">
+        <GradientAvatar id={"foo"} src={undefined} className="size-6" />
+      </BadgeContainer>
+
+      <BadgeContainer label="Invalid/Empty Src, id=foo - Gradient">
+        <GradientAvatar id={"foo"} src={""} className="size-6" />
+      </BadgeContainer>
+
+      <BadgeContainer label="Invalid/Empty Src, id=bar - Gradient">
+        <GradientAvatar id={"bar"} src={""} className="size-6" />
+      </BadgeContainer>
+
+      <BadgeContainer label="Empty/Invalid Src, No id - default fallback">
+        <GradientAvatar src="invalid-src" id={undefined} className="size-6" />
+      </BadgeContainer>
+
+      <ToggleTest />
+    </div>
+  );
+}
+
+function ToggleTest() {
+  const [data, setData] = useState<undefined | { src: string; id: string }>(
+    undefined,
+  );
+
+  return (
+    <div className="relative flex flex-col gap-10 border p-6">
+      <Button
+        variant="outline"
+        onClick={() => {
+          if (data) {
+            setData(undefined);
+          } else {
+            setData({
+              id: "foo",
+              src: "https://picsum.photos/400",
+            });
+          }
+        }}
+        className="absolute top-6 right-6 inline-flex"
+      >
+        Toggle Src
+      </Button>
+
+      <p> Src+ID is: {data ? "set" : "not set"} </p>
+
+      <BadgeContainer label="Valid Src">
+        <GradientAvatar src={data?.src} id={data?.id} className="size-6" />
+      </BadgeContainer>
+
+      <BadgeContainer label="invalid Src">
+        <GradientAvatar
+          className="size-6"
+          src={data ? "invalid-src" : undefined}
+          id={undefined}
+        />
+      </BadgeContainer>
+    </div>
+  );
+}

apps/dashboard/src/@/components/blocks/Avatars/GradientAvatar.tsx

@@ -0,0 +1,58 @@
+import { Img } from "@/components/blocks/Img";
+import { useMemo } from "react";
+import { cn } from "../../../lib/utils";
+
+const gradients = [
+  ["#fca5a5", "#b91c1c"],
+  ["#fdba74", "#c2410c"],
+  ["#fcd34d", "#b45309"],
+  ["#fde047", "#a16207"],
+  ["#a3e635", "#4d7c0f"],
+  ["#86efac", "#15803d"],
+  ["#67e8f9", "#0e7490"],
+  ["#7dd3fc", "#0369a1"],
+  ["#93c5fd", "#1d4ed8"],
+  ["#a5b4fc", "#4338ca"],
+  ["#c4b5fd", "#6d28d9"],
+  ["#d8b4fe", "#7e22ce"],
+  ["#f0abfc", "#a21caf"],
+  ["#f9a8d4", "#be185d"],
+  ["#fda4af", "#be123c"],
+];
+
+function getGradientForString(str: string) {
+  const number = Math.abs(
+    str.split("").reduce((acc, b, i) => acc + b.charCodeAt(0) * (i + 1), 0),
+  );
+  const index = number % gradients.length;
+  return gradients[index];
+}
+
+export function GradientAvatar(props: {
+  src: string | undefined;
+  id: string | undefined;
+  className: string;
+}) {
+  const gradient = useMemo(() => {
+    if (!props.id) {
+      return undefined;
+    }
+    return getGradientForString(props.id);
+  }, [props.id]);
+
+  return (
+    <Img
+      src={props.src}
+      className={cn("rounded-full", props.className)}
+      fallback={
+        gradient ? (
+          <div
+            style={{
+              background: `linear-gradient(45deg, ${gradient[0]} 0%, ${gradient[1]} 100%)`,
+            }}
+          />
+        ) : undefined
+      }
+    />
+  );
+}

apps/dashboard/src/@/components/blocks/Avatars/ProjectAvatar.stories.tsx

@@ -0,0 +1,76 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { BadgeContainer } from "../../../../stories/utils";
+import { Button } from "../../ui/button";
+import { ProjectAvatar } from "./ProjectAvatar";
+
+const meta = {
+  title: "blocks/Avatars/ProjectAvatar",
+  component: Story,
+  parameters: {},
+} satisfies Meta<typeof Story>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Desktop: Story = {
+  args: {},
+};
+
+function Story() {
+  return (
+    <div className="flex flex-col gap-10 p-10">
+      <p> All images below are set with size-6 className </p>
+
+      <BadgeContainer label="No Src - Skeleton">
+        <ProjectAvatar src={undefined} className="size-6" />
+      </BadgeContainer>
+
+      <BadgeContainer label="Invalid/Empty Src - BoxIcon Fallback">
+        <ProjectAvatar src={""} className="size-6" />
+      </BadgeContainer>
+
+      <ToggleTest />
+    </div>
+  );
+}
+
+function ToggleTest() {
+  const [data, setData] = useState<undefined | { src: string; name: string }>(
+    undefined,
+  );
+
+  return (
+    <div className="relative flex flex-col gap-10 border p-6">
+      <Button
+        variant="outline"
+        onClick={() => {
+          if (data) {
+            setData(undefined);
+          } else {
+            setData({
+              name: "foo",
+              src: "https://picsum.photos/400",
+            });
+          }
+        }}
+        className="absolute top-6 right-6 inline-flex"
+      >
+        Toggle Src
+      </Button>
+
+      <p> Src+Name is: {data ? "set" : "not set"} </p>
+
+      <BadgeContainer label="Valid Src">
+        <ProjectAvatar src={data?.src} className="size-6" />
+      </BadgeContainer>
+
+      <BadgeContainer label="invalid Src">
+        <ProjectAvatar
+          src={data ? "invalid-src" : undefined}
+          className="size-6"
+        />
+      </BadgeContainer>
+    </div>
+  );
+}

apps/dashboard/src/@/components/blocks/Avatars/ProjectAvatar.tsx

@@ -0,0 +1,21 @@
+import { Img } from "@/components/blocks/Img";
+import { BoxIcon } from "lucide-react";
+import { cn } from "../../../lib/utils";
+
+export function ProjectAvatar(props: {
+  src: string | undefined;
+  className: string | undefined;
+}) {
+  return (
+    <Img
+      src={props.src}
+      className={cn("rounded-lg border", props.className)}
+      alt={""}
+      fallback={
+        <div className="flex items-center justify-center bg-muted/50">
+          <BoxIcon className="size-[50%] text-muted-foreground" />
+        </div>
+      }
+    />
+  );
+}

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

@@ -28,8 +28,8 @@ export const Mobile: Story = {
 
 function Story() {
   return (
-    <div className="min-h-screen bg-background text-foreground py-4">
-      <div className="lg:p-10 container max-w-[1000px] flex flex-col gap-8">
+    <div className="min-h-screen bg-background py-4 text-foreground">
+      <div className="container flex max-w-[1000px] flex-col gap-8 lg:p-10">
         <BadgeContainer label="Base">
           <DangerSettingCard
             title="This is a title"

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

@@ -24,21 +24,21 @@ export function DangerSettingCard(props: {
   };
 }) {
   return (
-    <div className="border border-red-500/70 rounded-lg overflow-hidden">
-      <div className="px-4 lg:px-6 py-6 bg-muted/50">
-        <h3 className="text-xl font-semibold tracking-tight">{props.title}</h3>
+    <div className="overflow-hidden rounded-lg border border-red-500/70">
+      <div className="bg-muted/50 px-4 py-6 lg:px-6">
+        <h3 className="font-semibold text-xl tracking-tight">{props.title}</h3>
 
-        <p className="text-foreground text-sm mt-1.5 mb-4">
+        <p className="mt-1.5 mb-4 text-foreground text-sm">
           {props.description}
         </p>
       </div>
 
-      <div className="bg-red-100 dark:bg-red-500/20 px-4 lg:px-6 py-4 flex justify-end border-red-500/70 border-t">
+      <div className="flex justify-end border-red-500/70 border-t bg-red-100 px-4 py-4 lg:px-6 dark:bg-red-500/20">
         <Dialog>
           <DialogTrigger asChild>
             <Button
               variant="destructive"
-              className="bg-red-600 hover:bg-red-600/80 text-white font-semibold gap-2"
+              className="gap-2 bg-red-600 font-semibold text-white hover:bg-red-600/80"
               disabled={props.isPending}
             >
               {props.isPending && <Spinner className="size-3" />}
@@ -64,7 +64,7 @@ export function DangerSettingCard(props: {
 
               <Button
                 variant="destructive"
-                className="bg-red-600 hover:bg-red-600/80 text-white font-semibold gap-2"
+                className="gap-2 bg-red-600 font-semibold text-white hover:bg-red-600/80"
                 onClick={props.buttonOnClick}
                 disabled={props.isPending}
               >

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

@@ -30,7 +30,7 @@ export function ExportToCSVButton(props: {
     <Button
       variant="outline"
       disabled={props.disabled}
-      className={cn("border flex gap-2 items-center text-xs", props.className)}
+      className={cn("flex items-center gap-2 border text-xs", props.className)}
       onClick={async () => {
         exportMutation.mutate();
       }}

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

@@ -0,0 +1,36 @@
+import { Label } from "@/components/ui/label";
+import { ToolTipLabel } from "@/components/ui/tooltip";
+import { AsteriskIcon, InfoIcon } from "lucide-react";
+
+export function FormFieldSetup(props: {
+  htmlFor: string;
+  label: string;
+  errorMessage: React.ReactNode | undefined;
+  children: React.ReactNode;
+  tooltip: React.ReactNode | undefined;
+  isRequired: boolean;
+}) {
+  return (
+    <div>
+      <div className="mb-2 inline-flex items-center gap-1">
+        <Label htmlFor={props.htmlFor}>{props.label}</Label>
+
+        {props.isRequired && (
+          <AsteriskIcon className="size-3.5 text-destructive-text" />
+        )}
+
+        {props.tooltip && (
+          <ToolTipLabel label={props.tooltip}>
+            <InfoIcon className="size-3.5 text-muted-foreground" />
+          </ToolTipLabel>
+        )}
+      </div>
+      {props.children}
+      {props.errorMessage && (
+        <p className="mt-1 text-destructive-text text-sm">
+          {props.errorMessage}
+        </p>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,113 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ImageIcon } from "lucide-react";
+import { useState } from "react";
+import { BadgeContainer } from "../../../stories/utils";
+import { Spinner } from "../ui/Spinner/Spinner";
+import { Button } from "../ui/button";
+import { Img } from "./Img";
+
+const meta = {
+  title: "blocks/Img",
+  component: Story,
+  parameters: {},
+} satisfies Meta<typeof Story>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Desktop: Story = {
+  args: {},
+};
+
+function Story() {
+  return (
+    <div className="flex flex-col gap-10 p-10">
+      <p> All images below are set with size-20 className </p>
+
+      <BadgeContainer label="No Src - pending">
+        <Img className="size-20" src={undefined} />
+      </BadgeContainer>
+
+      <BadgeContainer label="Failed to load - fallback">
+        <Img className="size-20" src="invalid-src" />
+      </BadgeContainer>
+
+      <BadgeContainer label="No Src, pending - rounded-full">
+        <Img className="size-20 rounded-full" src={undefined} />
+      </BadgeContainer>
+
+      <BadgeContainer label="Failed to load - fallback - rounded-full">
+        <Img className="size-20 rounded-full" src="invalid-src" />
+      </BadgeContainer>
+
+      <BadgeContainer label="Valid Src">
+        <Img className="size-20" src="https://picsum.photos/200" />
+      </BadgeContainer>
+
+      <BadgeContainer label="Valid Src, rounded">
+        <Img className="size-20 rounded-full" src="https://picsum.photos/200" />
+      </BadgeContainer>
+
+      <ToggleTest />
+
+      <BadgeContainer label="Custom Skeleton">
+        <Img
+          src={undefined}
+          skeleton={
+            <div className="flex items-center justify-center rounded-lg border">
+              <Spinner className="size-6" />
+            </div>
+          }
+          className="size-20"
+        />
+      </BadgeContainer>
+
+      <BadgeContainer label="Custom Fallback">
+        <Img
+          fallback={
+            <div className="flex items-center justify-center rounded-lg border">
+              <ImageIcon className="size-10 text-muted-foreground" />
+            </div>
+          }
+          className="size-20"
+          src="invalid-src"
+        />
+      </BadgeContainer>
+    </div>
+  );
+}
+
+function ToggleTest() {
+  const [src, setSrc] = useState<undefined | string>(undefined);
+
+  return (
+    <div className="relative flex flex-col gap-10 border p-6">
+      <Button
+        variant="outline"
+        onClick={() => {
+          if (src) {
+            setSrc(undefined);
+          } else {
+            setSrc("https://picsum.photos/400");
+          }
+        }}
+        className="absolute top-6 right-6 inline-flex"
+      >
+        Toggle Src
+      </Button>
+
+      <p> Src is {src ? "set" : "not set"} </p>
+
+      <BadgeContainer label="Valid Src">
+        <Img className="size-20" src={src} />
+      </BadgeContainer>
+
+      <BadgeContainer label="invalid Src">
+        <Img
+          className="size-20 rounded-full"
+          src={src ? "invalid-src" : undefined}
+        />
+      </BadgeContainer>
+    </div>
+  );
+}

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

@@ -0,0 +1,62 @@
+/* eslint-disable @next/next/no-img-element */
+"use client";
+import { useState } from "react";
+import { cn } from "../../lib/utils";
+
+type imgElementProps = React.DetailedHTMLProps<
+  React.ImgHTMLAttributes<HTMLImageElement>,
+  HTMLImageElement
+> & {
+  skeleton?: React.ReactNode;
+  fallback?: React.ReactNode;
+  src: string | undefined;
+};
+
+export function Img(props: imgElementProps) {
+  const [_status, setStatus] = useState<"pending" | "fallback" | "loaded">(
+    "pending",
+  );
+  const status =
+    props.src === undefined
+      ? "pending"
+      : props.src === ""
+        ? "fallback"
+        : _status;
+  const { className, fallback, skeleton, ...restProps } = props;
+  const defaultSkeleton = <div className="animate-pulse bg-accent" />;
+  const defaultFallback = <div className="bg-muted" />;
+
+  return (
+    <div className="relative">
+      <img
+        {...restProps}
+        onLoad={() => {
+          setStatus("loaded");
+        }}
+        onError={() => {
+          setStatus("fallback");
+        }}
+        style={{
+          opacity: status === "loaded" ? 1 : 0,
+        }}
+        alt={restProps.alt || ""}
+        className={cn(
+          "fade-in-0 object-cover transition-opacity duration-300",
+          className,
+        )}
+      />
+
+      {status !== "loaded" && (
+        <div
+          className={cn(
+            "fade-in-0 absolute inset-0 overflow-hidden transition-opacity duration-300 [&>*]:h-full [&>*]:w-full",
+            className,
+          )}
+        >
+          {status === "pending" && (skeleton || defaultSkeleton)}
+          {status === "fallback" && (fallback || defaultFallback)}
+        </div>
+      )}
+    </div>
+  );
+}

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

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

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

@@ -28,8 +28,8 @@ export const Mobile: Story = {
 
 function Story() {
   return (
-    <div className="min-h-screen bg-background text-foreground py-6">
-      <div className="lg:p-10 container max-w-[1100px] flex flex-col gap-10">
+    <div className="min-h-screen bg-background py-6 text-foreground">
+      <div className="container flex max-w-[1100px] flex-col gap-10 lg:p-10">
         <BadgeContainer label="No Header">
           <SettingsCard
             bottomText="This is bottom text"
@@ -84,7 +84,7 @@ function Story() {
               isPending: false,
               onClick: () => {},
             }}
-            noPermissionText={"You do not have permission to edit this"}
+            noPermissionText="You do not have permission to edit this"
             errorText={undefined}
           >
             <ChildrenPlaceholder />
@@ -154,8 +154,8 @@ function Story() {
 
 function ChildrenPlaceholder() {
   return (
-    <div className="h-10 flex items-center justify-center text-muted-foreground/50 text-xs">
-      {"CHILDREN GOES HERE"}
+    <div className="flex h-10 items-center justify-center text-muted-foreground/50 text-xs">
+      CHILDREN GOES HERE
     </div>
   );
 }

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

@@ -3,37 +3,38 @@ import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 import type React from "react";
 
-export function SettingsCard(props: {
-  bottomText: React.ReactNode;
-  header?: {
-    description: string | undefined;
-    title: string;
-  };
-  children: React.ReactNode;
-  errorText: string | undefined;
-  noPermissionText: string | undefined;
-  saveButton?: {
-    onClick?: () => void;
-    disabled: boolean;
-    isPending: boolean;
-    type?: "submit";
-  };
-}) {
+export function SettingsCard(
+  props: React.PropsWithChildren<{
+    bottomText: React.ReactNode;
+    header?: {
+      description: string | undefined;
+      title: string;
+    };
+    errorText: string | undefined;
+    noPermissionText: string | undefined;
+    saveButton?: {
+      onClick?: () => void;
+      disabled: boolean;
+      isPending: boolean;
+      type?: "submit";
+    };
+  }>,
+) {
   return (
-    <div className="border border-border rounded-lg bg-muted/50 relative">
+    <div className="relative rounded-lg border border-border bg-muted/50">
       <div
         className={cn(
-          "border-b border-border px-4 lg:px-6 py-6 relative",
+          "relative border-border border-b px-4 py-6 lg:px-6",
           props.noPermissionText && "cursor-not-allowed",
         )}
       >
         {props.header && (
           <>
-            <h3 className="text-xl font-semibold tracking-tight">
+            <h3 className="font-semibold text-xl tracking-tight">
               {props.header.title}
             </h3>
             {props.header.description && (
-              <p className="text-foreground text-sm mt-1.5 mb-4">
+              <p className="mt-1.5 mb-4 text-foreground text-sm">
                 {props.header.description}
               </p>
             )}
@@ -43,7 +44,7 @@ export function SettingsCard(props: {
         {props.children}
       </div>
 
-      <div className="px-4 lg:px-6 py-3 flex items-center justify-between gap-2 min-h-[60px]">
+      <div className="flex min-h-[60px] items-center justify-between gap-2 px-4 py-3 lg:px-6">
         {props.noPermissionText ? (
           <p className="text-muted-foreground text-sm">
             {props.noPermissionText}

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

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

apps/dashboard/src/@/components/blocks/SidebarLayout.stories.tsx

@@ -55,8 +55,8 @@ function Story() {
 
 function ContentPlaceholder() {
   return (
-    <div className="bg-muted grow flex items-center justify-center">
-      <p className="text-muted-foreground text-3xl"> CHILDREN </p>
+    <div className="flex grow items-center justify-center bg-muted">
+      <p className="text-3xl text-muted-foreground"> CHILDREN </p>
     </div>
   );
 }

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

@@ -13,7 +13,7 @@ export function SidebarLayout(props: {
   return (
     <div
       className={cn(
-        "flex flex-col lg:flex-row gap-6 container px-4 w-full grow max-sm:pt-6",
+        "container flex w-full grow flex-col gap-6 px-4 max-sm:pt-6 lg:flex-row",
         props.className,
       )}
     >
@@ -23,7 +23,7 @@ export function SidebarLayout(props: {
         triggerClassName={props.mobileSidebarClassName}
       />
       {/* min-w-0 is enough to ensure the content inside does not stretch this container */}
-      <main className="grow max-sm:w-full flex flex-col lg:pt-8 pb-10 min-w-0">
+      <main className="flex min-w-0 grow flex-col pb-10 max-sm:w-full lg:pt-8">
         {children}
       </main>
     </div>

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

@@ -1,17 +1,15 @@
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 import { ThirdwebMiniLogo } from "app/components/ThirdwebMiniLogo";
+import { DiscordIcon } from "components/icons/brand-icons/DiscordIcon";
+import { GithubIcon } from "components/icons/brand-icons/GithubIcon";
+import { InstagramIcon } from "components/icons/brand-icons/InstagramIcon";
+import { LinkedInIcon } from "components/icons/brand-icons/LinkedinIcon";
+import { RedditIcon } from "components/icons/brand-icons/RedditIcon";
+import { TiktokIcon } from "components/icons/brand-icons/TiktokIcon";
+import { XIcon } from "components/icons/brand-icons/XIcon";
+import { YoutubeIcon } from "components/icons/brand-icons/YoutubeIcon";
 import Link from "next/link";
-import {
-  SiDiscord,
-  SiGithub,
-  SiInstagram,
-  SiLinkedin,
-  SiReddit,
-  SiTiktok,
-  SiX,
-  SiYoutube,
-} from "react-icons/si";
 
 type AppFooterProps = {
   className?: string;
@@ -21,31 +19,31 @@ export function AppFooter(props: AppFooterProps) {
   return (
     <footer
       className={cn(
-        "bg-muted/50 border-t border-border py-6 md:py-8 w-full",
+        "w-full border-border border-t bg-muted/50 py-6 md:py-8",
         props.className,
       )}
     >
       <div className="container flex flex-col gap-4 md:gap-6">
         {/* top row */}
-        <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">
+        <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+          <div className="flex flex-row items-center gap-3">
             <ThirdwebMiniLogo className="h-7" />
-            <p className="text-sm text-muted-foreground">© 2024 thirdweb</p>
+            <p className="text-muted-foreground text-sm">© 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-muted-foreground size-5" />
+                <GithubIcon className="size-5 text-muted-foreground" />
               </Link>
             </Button>
             <Button size="icon" variant="ghost" asChild className="size-9">
               <Link href="https://www.tiktok.com/@thirdweb" target="_blank">
-                <SiTiktok className="text-muted-foreground size-5" />
+                <TiktokIcon className="size-5 text-muted-foreground" />
               </Link>
             </Button>
             <Button size="icon" variant="ghost" asChild className="size-9">
               <Link href="https://www.instagram.com/thirdweb/" target="_blank">
-                <SiInstagram className="text-muted-foreground size-5" />
+                <InstagramIcon className="size-5 text-muted-foreground" />
               </Link>
             </Button>
             <Button size="icon" variant="ghost" asChild className="size-9">
@@ -53,83 +51,83 @@ export function AppFooter(props: AppFooterProps) {
                 href="hhttps://www.linkedin.com/company/third-web/"
                 target="_blank"
               >
-                <SiLinkedin className="text-muted-foreground size-5" />
+                <LinkedInIcon className="size-5 text-muted-foreground" />
               </Link>
             </Button>
             <Button size="icon" variant="ghost" asChild className="size-9">
               <Link href="https://www.youtube.com/@thirdweb_" target="_blank">
-                <SiYoutube className="text-muted-foreground size-5" />
+                <YoutubeIcon className="size-5 text-muted-foreground" />
               </Link>
             </Button>
             <Button size="icon" variant="ghost" asChild className="size-9">
               <Link href="https://discord.gg/thirdweb" target="_blank">
-                <SiDiscord className="text-muted-foreground size-5" />
+                <DiscordIcon className="size-5 text-muted-foreground" />
               </Link>
             </Button>
             <Button size="icon" variant="ghost" asChild className="size-9">
               <Link href="https://www.reddit.com/r/thirdweb/" target="_blank">
-                <SiReddit className="text-muted-foreground size-5" />
+                <RedditIcon className="size-5 text-muted-foreground" />
               </Link>
             </Button>
             <Button size="icon" variant="ghost" asChild className="size-9">
               <Link href="https://x.com/thirdweb" target="_blank">
-                <SiX className="text-muted-foreground size-5" />
+                <XIcon className="size-5 text-muted-foreground" />
               </Link>
             </Button>
           </div>
         </div>
         {/* bottom row */}
-        <div className="grid grid-rows-5 grid-cols-2 grid-flow-col gap-2 md:flex md:flex-row md:justify-between">
+        <div className="grid grid-flow-col grid-cols-2 grid-rows-5 gap-2 md:flex md:flex-row md:justify-between">
           <Link
-            className="py-[6px] px-[10px] text-muted-foreground text-sm hover:underline"
+            className="px-[10px] py-[6px] text-muted-foreground text-sm hover:underline"
             href="/"
           >
             Home
           </Link>
           <Link
-            className="py-[6px] px-[10px] text-muted-foreground text-sm hover:underline"
+            className="px-[10px] py-[6px] text-muted-foreground text-sm hover:underline"
             href="https://blog.thirdweb.com"
             target="_blank"
           >
             Blog
           </Link>
           <Link
-            className="py-[6px] px-[10px] text-muted-foreground text-sm hover:underline"
+            className="px-[10px] py-[6px] text-muted-foreground text-sm hover:underline"
             href="https://portal.thirdweb.com/changelog"
             target="_blank"
           >
             Changelog
           </Link>
           <Link
-            className="py-[6px] px-[10px] text-muted-foreground text-sm hover:underline"
+            className="px-[10px] py-[6px] text-muted-foreground text-sm hover:underline"
             href="https://feedback.thirdweb.com/"
             target="_blank"
           >
             Feedback
           </Link>
           <Link
-            className="py-[6px] px-[10px] text-muted-foreground text-sm hover:underline"
+            className="px-[10px] py-[6px] text-muted-foreground text-sm hover:underline"
             href="https://thirdweb.com/privacy"
             target="_blank"
           >
             Privacy Policy
           </Link>
           <Link
-            className="py-[6px] px-[10px] text-muted-foreground text-sm hover:underline"
+            className="px-[10px] py-[6px] 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-muted-foreground text-sm hover:underline"
+            className="px-[10px] py-[6px] text-muted-foreground text-sm hover:underline"
             href="https://thirdweb.com/gas"
             target="_blank"
           >
             Gas Estimator
           </Link>
           <Link
-            className="py-[6px] px-[10px] text-muted-foreground text-sm hover:underline"
+            className="px-[10px] py-[6px] text-muted-foreground text-sm hover:underline"
             href="https://thirdweb.com/chainlist"
             target="_blank"
           >

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

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

apps/dashboard/src/@/components/blocks/multi-select.stories.tsx

@@ -36,7 +36,7 @@ function createList(len: number) {
 
 function Story() {
   return (
-    <div className="py-6 max-w-[600px] mx-auto w-full px-4 flex flex-col gap-6">
+    <div className="mx-auto flex w-full max-w-[600px] flex-col gap-6 px-4 py-6">
       <VariantTest defaultValues={[]} storyLabel="5 items" listLen={5} />
       <VariantTest defaultValues={[]} storyLabel="5000 items" listLen={5000} />
       <VariantTest

apps/dashboard/src/@/components/blocks/multi-select.tsx

@@ -109,12 +109,12 @@ export const MultiSelect = React.forwardRef<
             {...props}
             onClick={handleTogglePopover}
             className={cn(
-              "flex w-full p-3 rounded-md border min-h-10 h-auto items-center justify-between bg-inherit hover:bg-inherit",
+              "flex h-auto min-h-10 w-full items-center justify-between rounded-md border bg-inherit p-3 hover:bg-inherit",
               className,
             )}
           >
             {selectedValues.length > 0 ? (
-              <div className="flex justify-between w-full">
+              <div className="flex w-full justify-between">
                 {/* badges */}
                 <div className="flex flex-wrap items-center gap-1.5">
                   {selectedValues.slice(0, maxCount).map((value) => {
@@ -147,21 +147,21 @@ export const MultiSelect = React.forwardRef<
                       event.stopPropagation();
                       handleClear();
                     }}
-                    className="hover:bg-muted p-1 rounded"
+                    className="rounded p-1 hover:bg-muted"
                   >
                     <XIcon className="h-4 cursor-pointer text-muted-foreground" />
                   </div>
 
                   <Separator
                     orientation="vertical"
-                    className="flex min-h-6 h-full"
+                    className="flex h-full min-h-6"
                   />
                   <ChevronDown className="h-4 cursor-pointer text-muted-foreground" />
                 </div>
               </div>
             ) : (
-              <div className="flex items-center justify-between w-full">
-                <span className="text-sm text-muted-foreground">
+              <div className="flex w-full items-center justify-between">
+                <span className="text-muted-foreground text-sm">
                   {placeholder}
                 </span>
                 <ChevronDown className="h-4 cursor-pointer text-muted-foreground" />
@@ -186,10 +186,10 @@ export const MultiSelect = React.forwardRef<
                 placeholder="Search"
                 value={searchValue}
                 onChange={(e) => setSearchValue(e.target.value)}
-                className="pl-10 py-4 !h-auto focus-visible:ring-0 focus-visible:ring-offset-0 border-0 border-b border-border rounded-b-none"
+                className="!h-auto rounded-b-none border-0 border-border border-b py-4 pl-10 focus-visible:ring-0 focus-visible:ring-offset-0"
                 onKeyDown={handleInputKeyDown}
               />
-              <SearchIcon className="size-4 absolute left-4 top-1/2 -translate-y-1/2 text-muted-foreground" />
+              <SearchIcon className="-translate-y-1/2 absolute top-1/2 left-4 size-4 text-muted-foreground" />
             </div>
 
             <ScrollShadow
@@ -199,7 +199,7 @@ export const MultiSelect = React.forwardRef<
               {/* List */}
               <div>
                 {optionsToShow.length === 0 && (
-                  <div className="py-10 justify-center flex">
+                  <div className="flex justify-center py-10">
                     No results found
                   </div>
                 )}
@@ -213,7 +213,7 @@ export const MultiSelect = React.forwardRef<
                       aria-selected={isSelected}
                       onClick={() => toggleOption(option.value)}
                       variant="ghost"
-                      className="cursor-pointer flex gap-3 py-2 px-3 w-full justify-start rounded-sm"
+                      className="flex w-full cursor-pointer justify-start gap-3 rounded-sm px-3 py-2"
                       ref={
                         i === optionsToShow.length - 1 ? lastItemRef : undefined
                       }
@@ -247,7 +247,7 @@ function ClosableBadge(props: {
   onClose: () => void;
 }) {
   return (
-    <span className="rounded-xl py-1 px-2 text-xs flex items-center gap-3 bg-muted border border-border text-foreground">
+    <span className="flex items-center gap-3 rounded-xl border border-border bg-muted px-2 py-1 text-foreground text-xs">
       {props.label}
       <XIcon
         className="h-3 w-3 cursor-pointer text-muted-foreground"

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

@@ -54,7 +54,7 @@ export function WalletAddress(props: {
 
   // special case for zero address
   if (address === ZERO_ADDRESS) {
-    return <span className="font-mono cursor-pointer">{shortenedAddress}</span>;
+    return <span className="cursor-pointer font-mono">{shortenedAddress}</span>;
   }
 
   return (
@@ -64,7 +64,7 @@ export function WalletAddress(props: {
           onClick={(e) => e.stopPropagation()}
           variant="link"
           className={cn(
-            "flex flex-row gap-2 items-center px-0",
+            "flex flex-row items-center gap-2 px-0",
             props.className,
           )}
         >
@@ -75,7 +75,7 @@ export function WalletAddress(props: {
               thirdwebClient={thirdwebClient}
             />
           )}
-          <span className="font-mono cursor-pointer">
+          <span className="cursor-pointer font-mono">
             {profiles.data?.[0]?.name || shortenedAddress}
           </span>
         </Button>
@@ -89,7 +89,7 @@ export function WalletAddress(props: {
       >
         <div className="space-y-4">
           <div className="flex items-center justify-between">
-            <h3 className="text-lg font-semibold">Wallet Address</h3>
+            <h3 className="font-semibold text-lg">Wallet Address</h3>
             <Button
               variant="outline"
               size="sm"
@@ -104,18 +104,18 @@ export function WalletAddress(props: {
               {hasCopied ? "Copied!" : "Copy"}
             </Button>
           </div>
-          <p className="text-sm font-mono bg-muted p-2 rounded text-center">
+          <p className="rounded bg-muted p-2 text-center font-mono text-sm">
             {lessShortenedAddress}
           </p>
-          <h3 className="text-lg font-semibold">Social Profiles</h3>
+          <h3 className="font-semibold text-lg">Social Profiles</h3>
           {profiles.isPending ? (
-            <p className="text-sm text-muted-foreground">Loading profiles...</p>
+            <p className="text-muted-foreground text-sm">Loading profiles...</p>
           ) : !profiles.data?.length ? (
-            <p className="text-sm text-muted-foreground">No profiles found</p>
+            <p className="text-muted-foreground text-sm">No profiles found</p>
           ) : (
             profiles.data?.map((profile) => (
               <div
-                className="flex flex-row gap-2 items-center"
+                className="flex flex-row items-center gap-2"
                 key={profile.type + profile.name}
               >
                 {profile.avatar &&
@@ -136,13 +136,13 @@ export function WalletAddress(props: {
                       )}
                     </Avatar>
                   )}
-                <div className="flex flex-col gap-1 w-full">
-                  <div className="flex flex-row gap-4 w-full items-center justify-between">
-                    <h4 className="text-md font-semibold">{profile.name}</h4>
+                <div className="flex w-full flex-col gap-1">
+                  <div className="flex w-full flex-row items-center justify-between gap-4">
+                    <h4 className="font-semibold text-md">{profile.name}</h4>
                     <Badge variant="outline">{profile.type}</Badge>
                   </div>
                   {profile.bio && (
-                    <p className="text-sm text-muted-foreground whitespace-normal line-clamp-1">
+                    <p className="line-clamp-1 whitespace-normal text-muted-foreground text-sm">
                       {profile.bio}
                     </p>
                   )}
@@ -153,7 +153,7 @@ export function WalletAddress(props: {
           <Button
             asChild
             variant="upsell"
-            className="text-sm flex flex-row gap-2 items-center"
+            className="flex flex-row items-center gap-2 text-sm"
             size="sm"
           >
             <a

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

@@ -10,7 +10,7 @@ export function ColorModeToggle() {
   const { setTheme, theme } = useTheme();
 
   return (
-    <ClientOnly ssr={<Skeleton className="size-10 bg-accent border" />}>
+    <ClientOnly ssr={<Skeleton className="size-10 border bg-accent" />}>
       <Button
         variant="ghost"
         size="icon"

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

@@ -20,12 +20,12 @@ export const CodeBlock = ({
       {({ className, tokens, getLineProps, getTokenProps }) => (
         <Card className={className}>
           {canCopy && (
-            <CopyButton text={code} className="float-right p-2 m-2" />
+            <CopyButton text={code} className="float-right m-2 p-2" />
           )}
 
           <div
             className={cn(
-              "block font-mono text-sm whitespace-pre-wrap p-4 overflow-auto",
+              "block overflow-auto whitespace-pre-wrap p-4 font-mono text-sm",
               className,
             )}
           >

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

@@ -25,12 +25,12 @@ export function CopyTextButton(props: {
   const { hasCopied, onCopy } = useClipboard(props.textToCopy, 1000);
   const copyButton = hasCopied ? (
     <CheckIcon
-      className={cn("size-3 text-green-500 shrink-0", props.iconClassName)}
+      className={cn("size-3 shrink-0 text-green-500", props.iconClassName)}
     />
   ) : (
     <CopyIcon
       className={cn(
-        "size-3 text-muted-foreground shrink-0",
+        "size-3 shrink-0 text-muted-foreground",
         props.iconClassName,
       )}
     />
@@ -42,7 +42,7 @@ export function CopyTextButton(props: {
         variant={props.variant || "outline"}
         aria-label={props.tooltip}
         className={cn(
-          "h-auto w-auto px-2.5 py-1.5 flex gap-2 rounded-lg text-foreground font-normal",
+          "flex h-auto w-auto gap-2 rounded-lg px-2.5 py-1.5 font-normal text-foreground",
           props.className,
         )}
         onClick={(e) => {
@@ -53,13 +53,13 @@ export function CopyTextButton(props: {
       >
         {props.copyIconPosition === "right" ? (
           <>
-            <span className="truncate min-w-0"> {props.textToShow} </span>
+            <span className="min-w-0 truncate"> {props.textToShow} </span>
             {copyButton}
           </>
         ) : (
           <>
             {copyButton}
-            <span className="truncate min-w-0"> {props.textToShow} </span>
+            <span className="min-w-0 truncate"> {props.textToShow} </span>
           </>
         )}
       </Button>

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

@@ -48,9 +48,9 @@ export function DatePickerWithRange(props: {
       <PopoverTrigger asChild>
         <Button
           id="date"
-          variant={"outline"}
+          variant="outline"
           className={cn(
-            "justify-start text-left font-normal gap-2",
+            "justify-start gap-2 text-left font-normal",
             props.className,
           )}
         >
@@ -60,7 +60,7 @@ export function DatePickerWithRange(props: {
               {format(from, "LLL dd, y")} - {format(to, "LLL dd, y")}
             </>
           )}
-          <ChevronDownIcon className="h-4 w-4 ml-auto text-muted-foreground" />
+          <ChevronDownIcon className="ml-auto h-4 w-4 text-muted-foreground" />
         </Button>
       </PopoverTrigger>
 
@@ -69,7 +69,7 @@ export function DatePickerWithRange(props: {
         <DynamicHeight>
           <div>
             {!isValid && (
-              <p className="text-sm pt-2 justify-center text-destructive-text text-center flex items-center gap-2">
+              <p className="flex items-center justify-center gap-2 pt-2 text-center text-destructive-text text-sm">
                 <CalendarX2Icon className="h-4 w-4" />
                 Invalid date range
               </p>

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

@@ -94,7 +94,7 @@ export function ScrollShadow(props: {
       }
     >
       <div
-        className={`${styles.scrollShadowTop} ${styles.scrollShadowY}`}
+        className={cn(styles.scrollShadowTop, styles.scrollShadowY)}
         ref={shadowTopEl}
         style={{
           opacity: "0",
@@ -102,28 +102,28 @@ export function ScrollShadow(props: {
         }}
       />
       <div
-        className={`${styles.scrollShadowBottom} ${styles.scrollShadowY}`}
+        className={cn(styles.scrollShadowBottom, styles.scrollShadowY)}
         ref={shadowBottomEl}
         style={{
           opacity: "0",
         }}
       />
       <div
-        className={`${styles.scrollShadowLeft} ${styles.scrollShadowX}`}
+        className={cn(styles.scrollShadowLeft, styles.scrollShadowX)}
         ref={shadowLeftEl}
         style={{
           opacity: "0",
         }}
       />
       <div
-        className={`${styles.scrollShadowRight} ${styles.scrollShadowX}`}
+        className={cn(styles.scrollShadowRight, styles.scrollShadowX)}
         ref={shadowRightEl}
         style={{
           opacity: "0",
         }}
       />
       <div
-        className={cn("overflow-auto no-scrollbar", props.scrollableClassName)}
+        className={cn("no-scrollbar overflow-auto", props.scrollableClassName)}
         ref={scrollableEl}
       >
         {props.children}

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

@@ -1,10 +1,11 @@
+import { cn } from "../../../lib/utils";
 import style from "./Spinner.module.css";
 
 export function Spinner(props: { className?: string }) {
   return (
     <svg
       viewBox="0 0 50 50"
-      className={`${style.loader} ${props.className || "size-4"}`}
+      className={cn(style.loader, props.className || "size-4")}
     >
       <title>loading</title>
       <circle

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

@@ -19,7 +19,7 @@ const AlertDialogOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Overlay
     className={cn(
-      "fixed inset-0 z-50 bg-black/80  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]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80 data-[state=closed]:animate-out data-[state=open]:animate-in",
       className,
     )}
     {...props}
@@ -37,7 +37,7 @@ const AlertDialogContent = React.forwardRef<
     <AlertDialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-lg",
+        "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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 data-[state=closed]:animate-out data-[state=open]:animate-in",
         className,
       )}
       {...props}
@@ -80,7 +80,7 @@ const AlertDialogTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Title
     ref={ref}
-    className={cn("text-lg hyphens-auto font-semibold", className)}
+    className={cn("hyphens-auto font-semibold text-lg", className)}
     {...props}
   />
 ));
@@ -92,7 +92,7 @@ const AlertDialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Description
     ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
+    className={cn("text-muted-foreground text-sm", className)}
     {...props}
   />
 ));

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

@@ -52,7 +52,7 @@ const AlertDescription = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "text-sm [&_p]:leading-relaxed text-muted-foreground mt-1.5",
+      "mt-1.5 text-muted-foreground text-sm [&_p]:leading-relaxed",
       className,
     )}
     {...props}

apps/dashboard/src/@/components/ui/aspect-ratio.tsx

@@ -1,7 +0,0 @@
-"use client";
-
-import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
-
-const AspectRatio = AspectRatioPrimitive.Root;
-
-export { AspectRatio };

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

@@ -19,7 +19,7 @@ const BreadcrumbList = React.forwardRef<
   <ol
     ref={ref}
     className={cn(
-      "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
+      "flex flex-wrap items-center gap-1.5 break-words text-muted-foreground text-sm sm:gap-2.5",
       className,
     )}
     {...props}

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

@@ -20,7 +20,7 @@ export const AllVariants: Story = {
 
 function Component() {
   return (
-    <div className="min-h-screen bg-background p-6 text-foregroun flex flex-col gap-6">
+    <div className="flex min-h-screen flex-col gap-6 bg-background p-6 text-foregroun">
       <Variants size="default" />
       <Variants size="sm" />
       <Variants size="icon" />

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

@@ -32,7 +32,7 @@ const CardTitle = React.forwardRef<
   <h3
     ref={ref}
     className={cn(
-      "text-2xl font-semibold leading-none tracking-tight",
+      "font-semibold text-2xl leading-none tracking-tight",
       className,
     )}
     {...props}
@@ -46,7 +46,7 @@ const CardDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <p
     ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
+    className={cn("text-muted-foreground text-sm", className)}
     {...props}
   />
 ));

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

@@ -233,7 +233,7 @@ const ChartTooltipContent = React.forwardRef<
                     )}
                     <div
                       className={cn(
-                        "flex flex-1 gap-2 justify-between leading-none",
+                        "flex flex-1 justify-between gap-2 leading-none",
                         nestLabel ? "items-end" : "items-center",
                       )}
                     >
@@ -244,7 +244,7 @@ const ChartTooltipContent = React.forwardRef<
                         </span>
                       </div>
                       {item.value && (
-                        <span className="font-mono font-medium tabular-nums text-foreground">
+                        <span className="font-medium font-mono text-foreground tabular-nums">
                           {valueFormatter
                             ? valueFormatter(item.value) || item.value
                             : item.value}
@@ -287,7 +287,7 @@ const ChartLegendContent = React.forwardRef<
       <div
         ref={ref}
         className={cn(
-          "flex items-center justify-center gap-x-4 gap-y-2 overflow-x-auto flex-wrap",
+          "flex flex-wrap items-center justify-center gap-x-4 gap-y-2 overflow-x-auto",
           verticalAlign === "top" ? "pb-3" : "pt-3",
           className,
         )}

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

@@ -37,7 +37,7 @@ export function CheckboxWithLabel(props: {
     // biome-ignore lint/a11y/noLabelWithoutControl: cannot do this here because the checkbox is a child of the label
     <label
       className={cn(
-        "flex gap-2 items-start text-muted-foreground text-sm cursor-pointer select-none [&>button]:mt-0.5",
+        "flex cursor-pointer select-none items-start gap-2 text-muted-foreground text-sm [&>button]:mt-0.5",
         props.className,
       )}
     >

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

@@ -21,7 +21,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed inset-0 bg-black/80  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]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 bg-black/80 data-[state=closed]:animate-out data-[state=open]:animate-in",
       className,
     )}
     {...props}
@@ -41,16 +41,16 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed grid w-full md:max-w-lg gap-4 border bg-background p-6 shadow-lg duration-300 rounded-t-xl md:rounded-lg border-border",
+        "fixed grid w-full gap-4 rounded-t-xl border border-border bg-background p-6 shadow-lg duration-300 md:max-w-lg md:rounded-lg",
         // on mobile - put the dialog at the bottom of the screen, animate - slide up and fade in
-        "bottom-0 left-0 right-0",
+        "right-0 bottom-0 left-0",
         "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
         // on desktop - vertically and horizontally center the dialog, animate - zoom and fade in
-        "md:bottom-auto md:left-[50%] md:top-[50%] md:translate-x-[-50%] md:translate-y-[-50%] ",
+        "md:top-[50%] md:bottom-auto md:left-[50%] md:translate-x-[-50%] md:translate-y-[-50%] ",
         "md:data-[state=closed]:zoom-out-95 md:data-[state=open]:zoom-in-95 ",
         "md:data-[state=closed]:slide-out-to-left-1/2 md:data-[state=closed]:slide-out-to-top-[48%] ",
         "md:data-[state=open]:slide-in-from-left-1/2 md:data-[state=open]:slide-in-from-top-[48%] ",
-        "data-[state=open]:animate-in data-[state=closed]:animate-out",
+        "data-[state=closed]:animate-out data-[state=open]:animate-in",
         "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
         className,
       )}
@@ -59,7 +59,7 @@ const DialogContent = React.forwardRef<
       {children}
       <DialogPrimitive.Close
         className={cn(
-          "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",
+          "absolute top-4 right-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",
           props.dialogCloseClassName,
         )}
       >
@@ -103,7 +103,7 @@ const DialogTitle = React.forwardRef<
   <DialogPrimitive.Title
     ref={ref}
     className={cn(
-      "text-lg font-semibold leading-none tracking-tight",
+      "font-semibold text-lg leading-none tracking-tight",
       className,
     )}
     {...props}
@@ -117,7 +117,7 @@ const DialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Description
     ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
+    className={cn("text-muted-foreground text-sm", className)}
     {...props}
   />
 ));

apps/dashboard/src/@/components/ui/dropdown-menu.tsx

@@ -47,7 +47,7 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg 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",
+      "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 z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg data-[state=closed]:animate-out data-[state=open]:animate-in",
       className,
     )}
     {...props}
@@ -65,7 +65,7 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 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",
+        "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 z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md data-[state=closed]:animate-out data-[state=open]:animate-in",
         className,
       )}
       {...props}
@@ -99,7 +99,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className,
     )}
     checked={checked}
@@ -123,7 +123,7 @@ const DropdownMenuRadioItem = React.forwardRef<
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className,
     )}
     {...props}
@@ -147,7 +147,7 @@ const DropdownMenuLabel = React.forwardRef<
   <DropdownMenuPrimitive.Label
     ref={ref}
     className={cn(
-      "px-2 py-1.5 text-sm font-semibold",
+      "px-2 py-1.5 font-semibold text-sm",
       inset && "pl-8",
       className,
     )}

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

@@ -117,7 +117,7 @@ const RequiredFormLabel = React.forwardRef<
         {...props}
       >
         {props.children}
-        <span className="absolute -top-1.5 -right-2 text-destructive-text">
+        <span className="-top-1.5 -right-2 absolute text-destructive-text">
           •
         </span>
       </Label>
@@ -159,7 +159,7 @@ const FormDescription = React.forwardRef<
     <p
       ref={ref}
       id={formDescriptionId}
-      className={cn("text-sm text-muted-foreground", className)}
+      className={cn("text-muted-foreground text-sm", className)}
       {...props}
     />
   );
@@ -181,7 +181,7 @@ const FormMessage = React.forwardRef<
     <p
       ref={ref}
       id={formMessageId}
-      className={cn("text-sm font-medium text-destructive-text", className)}
+      className={cn("font-medium text-destructive-text text-sm", className)}
       {...props}
     >
       {body}

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

@@ -18,7 +18,7 @@ const HoverCardContent = React.forwardRef<
     align={align}
     sideOffset={sideOffset}
     className={cn(
-      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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",
+      "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 z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=closed]:animate-out data-[state=open]:animate-in",
       className,
     )}
     {...props}

apps/dashboard/src/@/components/ui/image-upload.tsx

@@ -31,7 +31,7 @@ const ImageUpload = React.forwardRef<HTMLInputElement, ImageUploadProps>(
         <div
           {...getRootProps()}
           className={cn(
-            "border bg-card relative group cursor-pointer hover:border-primary flex-col gap-1.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 overflow-hidden transition-all rounded-md flex items-center justify-center p-4 py-6 text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+            "group relative flex cursor-pointer flex-col items-center justify-center gap-1.5 overflow-hidden rounded-md border bg-card p-4 py-6 text-muted-foreground transition-all hover:border-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
             isDragActive ? "border-primary" : "border-input",
             !activeFile ? "w-full" : "min-h-32 min-w-32",
             className,
@@ -47,8 +47,8 @@ const ImageUpload = React.forwardRef<HTMLInputElement, ImageUploadProps>(
             />
           ) : (
             <>
-              <UploadIcon className="w-5 h-5 transition-all group-hover:scale-110" />
-              <p className="text-xs text-center">
+              <UploadIcon className="h-5 w-5 transition-all group-hover:scale-110" />
+              <p className="text-center text-xs">
                 Drag and drop a file or click to upload
               </p>
             </>

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

@@ -11,7 +11,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-card px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium 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 h-10 w-full rounded-md border border-input bg-card px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:font-medium file:text-sm 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/pagination.tsx

@@ -46,7 +46,7 @@ const PaginationLink = ({
   <Button
     variant={!isActive ? "outline" : "default"}
     className={cn(
-      "px-3 py-2 h-auto",
+      "h-auto px-3 py-2",
       className,
       props.disabled && "cursor-not-allowed",
     )}

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

@@ -19,7 +19,7 @@ const PopoverContent = React.forwardRef<
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 w-72 rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md outline-none 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",
+        "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 z-50 w-72 rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=closed]:animate-out data-[state=open]:animate-in",
         className,
       )}
       {...props}

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

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

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

@@ -31,7 +31,7 @@ function randomName() {
 
 function Component() {
   return (
-    <div className="min-h-screen bg-background p-6 text-foregroun flex flex-col gap-10">
+    <div className="flex min-h-screen flex-col gap-10 bg-background p-6 text-foregroun">
       <BadgeContainer label="5 items, no placeholder, no label, value filled">
         <SelectDemo listItems={5} selectFirst />
       </BadgeContainer>

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

@@ -19,7 +19,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex gap-2 h-10 w-full items-center justify-between rounded-md border border-input bg-card px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "flex h-10 w-full items-center justify-between gap-2 rounded-md border border-input bg-card px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
       className,
     )}
     {...props}
@@ -87,9 +87,9 @@ const SelectContent = React.forwardRef<
         };
       }}
       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",
+        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md data-[state=closed]:animate-out data-[state=open]:animate-in",
         position === "popper" &&
-          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          "data-[side=left]:-translate-x-1 data-[side=top]:-translate-y-1 data-[side=right]:translate-x-1 data-[side=bottom]:translate-y-1",
         className,
       )}
       position={position}
@@ -117,7 +117,7 @@ const SelectLabel = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Label
     ref={ref}
-    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+    className={cn("py-1.5 pr-2 pl-8 font-semibold text-sm", className)}
     {...props}
   />
 ));
@@ -130,7 +130,7 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className,
     )}
     {...props}

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

@@ -21,7 +21,7 @@ const SheetOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Overlay
     className={cn(
-      "fixed inset-0 z-50 bg-black/80  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]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80 data-[state=closed]:animate-out data-[state=open]:animate-in",
       className,
     )}
     {...props}
@@ -65,7 +65,7 @@ const SheetContent = React.forwardRef<
       {...props}
     >
       {children}
-      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary border-border">
+      <SheetPrimitive.Close className="absolute top-4 right-4 rounded-sm border-border opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
         <X className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </SheetPrimitive.Close>
@@ -80,7 +80,7 @@ const SheetHeader = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      "flex flex-col space-y-2 text-center sm:text-left border-border",
+      "flex flex-col space-y-2 border-border text-center sm:text-left",
       className,
     )}
     {...props}
@@ -94,7 +94,7 @@ const SheetFooter = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 border-border",
+      "flex flex-col-reverse border-border sm:flex-row sm:justify-end sm:space-x-2",
       className,
     )}
     {...props}
@@ -109,7 +109,7 @@ const SheetTitle = React.forwardRef<
   <SheetPrimitive.Title
     ref={ref}
     className={cn(
-      "text-lg font-semibold text-foreground border-border",
+      "border-border font-semibold text-foreground text-lg",
       className,
     )}
     {...props}
@@ -123,7 +123,7 @@ const SheetDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Description
     ref={ref}
-    className={cn("text-sm text-muted-foreground border-border", className)}
+    className={cn("border-border text-muted-foreground text-sm", className)}
     {...props}
   />
 ));

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

@@ -25,7 +25,7 @@ function SkeletonContainer<T>(props: {
       style={props.style}
       aria-hidden={isLoading ? "true" : "false"}
       className={cn(
-        isLoading && "animate-pulse rounded-lg bg-muted inline-block",
+        isLoading && "inline-block animate-pulse rounded-lg bg-muted",
         props.className,
       )}
     >

apps/dashboard/src/@/components/ui/table.stories.tsx

@@ -36,7 +36,7 @@ export const Mobile: Story = {
 
 function Component() {
   return (
-    <div className="flex flex-col gap-6 lg:max-w-[1000px] lg:mx-auto min-w-0 py-6 px-4">
+    <div className="flex min-w-0 flex-col gap-6 px-4 py-6 lg:mx-auto lg:max-w-[1000px]">
       <BadgeContainer label="Normal">
         <TableDemo />
       </BadgeContainer>

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

@@ -10,7 +10,7 @@ const Table = React.forwardRef<
   <table
     ref={ref}
     className={cn(
-      "caption-bottom w-full text-sm border-collapse tabular-nums lining-nums align-top",
+      "w-full caption-bottom border-collapse align-top text-sm lining-nums tabular-nums",
       className,
     )}
     {...props}
@@ -25,7 +25,7 @@ const TableHeader = React.forwardRef<
   <thead
     ref={ref}
     className={cn(
-      "bg-muted/50 border-b border-border [&_tr]:border-b",
+      "border-border border-b bg-muted/50 [&_tr]:border-b",
       className,
     )}
     {...props}
@@ -53,7 +53,7 @@ const TableFooter = React.forwardRef<
   <tfoot
     ref={ref}
     className={cn(
-      "border-t border-border bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      "border-border border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
       className,
     )}
     {...props}
@@ -68,7 +68,7 @@ const TableRow = React.forwardRef<
   <tr
     ref={ref}
     className={cn(
-      "border-b border-border last:border-0 data-[state=selected]:bg-muted",
+      "border-border border-b last:border-0 data-[state=selected]:bg-muted",
       className,
     )}
     {...props}
@@ -83,7 +83,7 @@ const TableHead = React.forwardRef<
   <th
     ref={ref}
     className={cn(
-      "px-6 py-4 uppercase text-xs text-left tracking-wider align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+      "px-6 py-4 text-left align-middle font-medium text-muted-foreground text-xs uppercase tracking-wider [&:has([role=checkbox])]:pr-0",
       className,
     )}
     {...props}
@@ -98,7 +98,7 @@ const TableCell = React.forwardRef<
   <td
     ref={ref}
     className={cn(
-      "px-6 py-4 text-sm text-start align-middle [&:has([role=checkbox])]:pr-0",
+      "px-6 py-4 text-start align-middle text-sm [&:has([role=checkbox])]:pr-0",
       className,
     )}
     {...props}
@@ -112,7 +112,7 @@ const TableCaption = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <caption
     ref={ref}
-    className={cn("text-sm text-muted-foreground py-4", className)}
+    className={cn("py-4 text-muted-foreground text-sm", className)}
     {...props}
   />
 ));
@@ -121,7 +121,7 @@ TableCaption.displayName = "TableCaption";
 function TableContainer(props: { children: React.ReactNode }) {
   return (
     <ScrollShadow
-      className="border border-border rounded-lg whitespace-nowrap relative"
+      className="relative whitespace-nowrap rounded-lg border border-border"
       shadowColor="hsl(var(--muted))"
     >
       {props.children}

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

@@ -27,7 +27,7 @@ export function TabLinks(props: {
   return (
     <div className={cn("relative", props.className)}>
       {/* Bottom line */}
-      <div className="h-[1px] bg-border absolute bottom-0 left-0 right-0" />
+      <div className="absolute right-0 bottom-0 left-0 h-[1px] bg-border" />
 
       <ScrollShadow
         scrollableClassName="pb-[8px] relative"
@@ -51,7 +51,7 @@ export function TabLinks(props: {
                   href={tab.href}
                   aria-disabled={tab.isDisabled}
                   className={cn(
-                    "rounded-lg hover:bg-muted px-3 font-normal text-sm lg:text-sm relative h-auto text-muted-foreground",
+                    "relative h-auto rounded-lg px-3 font-normal text-muted-foreground text-sm hover:bg-muted lg:text-sm",
                     !tab.isActive && !tab.isDisabled && "hover:text-foreground",
                     tab.isDisabled && "pointer-events-none",
                     tab.isActive && "!text-foreground",
@@ -67,7 +67,7 @@ export function TabLinks(props: {
         {/* Active line */}
         <div
           ref={lineRef}
-          className="absolute left-0 bottom-0 h-[2px] bg-foreground rounded-lg fade-in-0 animate-in"
+          className="fade-in-0 absolute bottom-0 left-0 h-[2px] animate-in rounded-lg bg-foreground"
         />
       </ScrollShadow>
     </div>
@@ -94,7 +94,7 @@ 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" />
+      <div className="absolute right-0 bottom-0 left-0 h-[1px] bg-border" />
 
       <ScrollShadow
         scrollableClassName="pb-[8px] relative"
@@ -111,7 +111,7 @@ export function TabButtons(props: {
                 variant="ghost"
                 ref={tab.isActive ? activeTabRef : undefined}
                 className={cn(
-                  "rounded-lg hover:bg-accent px-2 lg:px-3 font-medium text-sm lg:text-base relative h-auto inline-flex gap-1.5 items-center",
+                  "relative inline-flex h-auto items-center gap-1.5 rounded-lg px-2 font-medium text-sm hover:bg-accent lg:px-3 lg:text-base",
                   !tab.isActive &&
                     "text-muted-foreground hover:text-foreground",
                   !tab.isEnabled && "cursor-not-allowed opacity-50",
@@ -130,7 +130,7 @@ export function TabButtons(props: {
         {/* Active line */}
         <div
           ref={lineRef}
-          className="absolute left-0 bottom-0 h-[2px] bg-foreground rounded-lg fade-in-0 animate-in"
+          className="fade-in-0 absolute bottom-0 left-0 h-[2px] animate-in rounded-lg bg-foreground"
         />
       </ScrollShadow>
     </div>

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

@@ -19,7 +19,7 @@ const TooltipContent = React.forwardRef<
     ref={ref}
     sideOffset={sideOffset}
     className={cn(
-      "z-50 overflow-hidden rounded-md border border-border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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",
+      "fade-in-0 zoom-in-95 data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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 z-50 animate-in overflow-hidden rounded-md border border-border bg-popover px-3 py-1.5 text-popover-foreground text-sm shadow-md data-[state=closed]:animate-out",
       className,
     )}
     {...props}
@@ -48,9 +48,9 @@ export function ToolTipLabel(props: {
         </TooltipTrigger>
         <TooltipContent
           sideOffset={10}
-          className="max-w-[400px] leading-relaxed whitespace-normal"
+          className="max-w-[400px] whitespace-normal leading-relaxed"
         >
-          <div className="p-2 text-sm flex items-center gap-1.5">
+          <div className="flex items-center gap-1.5 p-2 text-sm">
             {props.leftIcon}
             {props.label}
             {props.rightIcon}

apps/dashboard/src/@/constants/thirdweb.client.ts

@@ -1,4 +1,3 @@
-import {} from "@/constants/env";
 import { useQuery } from "@tanstack/react-query";
 import { useMemo } from "react";
 import { useActiveAccount } from "thirdweb/react";

apps/dashboard/src/@/lib/DashboardRouter.tsx

@@ -117,7 +117,7 @@ function DashboardRouterTopProgressBarInner() {
   const width = isLoading ? progress : 100;
   return (
     <span
-      className="block fixed top-0 h-[2px] bg-blue-500"
+      className="fixed top-0 block h-[2px] bg-blue-500"
       style={{
         opacity: isLoading ? "100" : "0",
         width: `${width}%`,

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

@@ -1,4 +1,8 @@
-type Store<T> = {
+"use client";
+
+import { useSyncExternalStore } from "react";
+
+export type Store<T> = {
   getValue(): T;
   setValue(newValue: T): void;
   subscribe(listener: () => void): () => void;
@@ -45,3 +49,7 @@ export function createStore<T>(initialValue: T): Store<T> {
     },
   };
 }
+
+export function useStore<T>(store: Store<T>): T {
+  return useSyncExternalStore(store.subscribe, store.getValue, store.getValue);
+}

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

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

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

@@ -3,28 +3,31 @@
 import { Spinner } from "@/components/ui/Spinner/Spinner";
 import { Button } from "@/components/ui/button";
 import { useThirdwebClient } from "@/constants/thirdweb.client";
+import { useStore } from "@/lib/reactive";
 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,
-  useSupportedChainsRecord,
-} from "hooks/chains/configureChains";
-import {
-  useAddRecentlyUsedChainId,
-  useRecentlyUsedChains,
-} from "hooks/chains/recentlyUsedChains";
 import { useTheme } from "next-themes";
 import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { useCallback, useMemo, useState } from "react";
 import type { Chain } from "thirdweb";
-import { AutoConnect, ConnectButton, useConnectModal } from "thirdweb/react";
+import {
+  AutoConnect,
+  ConnectButton,
+  type NetworkSelectorProps,
+  useConnectModal,
+} from "thirdweb/react";
+import { useFavoriteChainIds } from "../../../../app/(dashboard)/(chain)/components/client/star-button";
 import { LazyConfigureNetworkModal } from "../../../../components/configure-networks/LazyConfigureNetworkModal";
-import type { StoredChain } from "../../../../contexts/configured-chains";
-import { useFavoriteChains } from "../../hooks/useFavoriteChains";
+import { useAllChainsData } from "../../../../hooks/chains/allChains";
+import {
+  type StoredChain,
+  addRecentlyUsedChainId,
+  recentlyUsedChainIdsStore,
+} from "../../../../stores/chainStores";
 import { useLoggedInUser } from "../../hooks/useLoggedInUser";
 import { popularChains } from "../popularChains";
 
@@ -36,43 +39,81 @@ export const CustomConnectWallet = (props: {
   const thirdwebClient = useThirdwebClient();
   const loginRequired =
     props.loginRequired === undefined ? true : props.loginRequired;
+
   const { theme } = useTheme();
-  const recentChainsv4 = useRecentlyUsedChains();
-  const addRecentlyUsedChainId = useAddRecentlyUsedChainId();
   const t = theme === "light" ? "light" : "dark";
-  const allv4Chains = useSupportedChains();
-  const chainsRecord = useSupportedChainsRecord();
-  const favChainsQuery = useFavoriteChains();
-  const allChains = useMemo(() => {
-    return allv4Chains.map(mapV4ChainToV5Chain);
-  }, [allv4Chains]);
 
-  const popularChainsWithMeta = useMemo(() => {
-    return popularChains.map((x) => chainsRecord[x.id] || x);
-  }, [chainsRecord]);
+  // chains
+  const favChainIdsQuery = useFavoriteChainIds();
+  const recentChainIds = useStore(recentlyUsedChainIdsStore);
+  const { idToChain, allChains } = useAllChainsData();
 
+  const allChainsWithMetadata = useMemo(
+    () => allChains.map(mapV4ChainToV5Chain),
+    [allChains],
+  );
+
+  const recentlyUsedChainsWithMetadata = useMemo(
+    () =>
+      recentChainIds
+        .map((id) => {
+          const c = idToChain.get(id);
+          // eslint-disable-next-line no-restricted-syntax
+          return c ? mapV4ChainToV5Chain(c) : undefined;
+        })
+        .filter((x) => !!x),
+    [recentChainIds, idToChain],
+  );
+
+  const favoriteChainsWithMetadata = useMemo(() => {
+    return (favChainIdsQuery.data || [])
+      .map((id) => {
+        const c = idToChain.get(Number(id));
+        // eslint-disable-next-line no-restricted-syntax
+        return c ? mapV4ChainToV5Chain(c) : undefined;
+      })
+      .filter((x) => !!x);
+  }, [idToChain, favChainIdsQuery.data]);
+
+  const popularChainsWithMetadata = useMemo(() => {
+    // eslint-disable-next-line no-restricted-syntax
+    return popularChains.map((x) =>
+      // eslint-disable-next-line no-restricted-syntax
+      {
+        const v4Chain = idToChain.get(x.id);
+        // eslint-disable-next-line no-restricted-syntax
+        return v4Chain ? mapV4ChainToV5Chain(v4Chain) : x;
+      },
+    );
+  }, [idToChain]);
+
+  // Network Config Modal
   const [isNetworkConfigModalOpen, setIsNetworkConfigModalOpen] =
     useState(false);
   const [editChain, setEditChain] = useState<StoredChain | undefined>(
     undefined,
   );
 
-  const chainSections = useMemo(() => {
+  const chainSections: NetworkSelectorProps["sections"] = useMemo(() => {
     return [
       {
         label: "Favorites",
-        chains: favChainsQuery.data.map(mapV4ChainToV5Chain),
-      },
-      {
-        label: "Popular",
-        chains: popularChainsWithMeta.map(mapV4ChainToV5Chain),
+        chains: favoriteChainsWithMetadata,
       },
       {
         label: "Recent",
-        chains: recentChainsv4.map(mapV4ChainToV5Chain),
+        chains: recentlyUsedChainsWithMetadata,
+      },
+      {
+        label: "Popular",
+        chains: popularChainsWithMetadata,
       },
     ];
-  }, [recentChainsv4, favChainsQuery.data, popularChainsWithMeta]);
+  }, [
+    recentlyUsedChainsWithMetadata,
+    favoriteChainsWithMetadata,
+    popularChainsWithMetadata,
+  ]);
 
   // ensures login status on pages that need it
   const { isPending, isLoggedIn } = useLoggedInUser();
@@ -81,10 +122,10 @@ export const CustomConnectWallet = (props: {
   if (isPending) {
     return (
       <>
-        <div className="w-[144px] h-[48px] bg-muted border border-border rounded-lg flex items-center justify-center">
+        <div className="flex h-[48px] w-[144px] items-center justify-center rounded-lg border border-border bg-muted">
           <Spinner className="size-4" />
         </div>
-        {/* need autoconnect here so that we actually connect */}
+        {/* need auto connect here so that we actually connect */}
         <AutoConnect client={thirdwebClient} />
       </>
     );
@@ -100,7 +141,7 @@ export const CustomConnectWallet = (props: {
             Sign In
           </Link>
         </Button>
-        {/* need autoconnect here so that we actually connect */}
+        {/* need auto connect here so that we actually connect */}
         <AutoConnect client={thirdwebClient} />
       </>
     );
@@ -138,7 +179,7 @@ export const CustomConnectWallet = (props: {
         detailsButton={{
           className: props.detailsButtonClassName,
         }}
-        chains={allChains}
+        chains={allChainsWithMetadata}
         detailsModal={{
           networkSelector: {
             sections: chainSections,
@@ -186,7 +227,7 @@ function ConnectWalletWelcomeScreen(props: {
         backgroundColor: props.theme === "dark" ? "#18132f" : "#c7b5f1",
         backgroundImage: `url("/assets/connect-wallet/welcome-gradient-${props.theme}.png")`,
       }}
-      className="flex flex-col p-6 h-full bg-cover bg-center bg-no-repeat"
+      className="flex h-full flex-col bg-center bg-cover bg-no-repeat p-6"
     >
       <div className="flex flex-grow flex-col justify-center">
         <div>
@@ -207,7 +248,7 @@ function ConnectWalletWelcomeScreen(props: {
 
           <div className="h-10" />
           <h2
-            className="text-xl text-center font-semibold"
+            className="text-center font-semibold text-xl"
             style={{
               color: fontColor,
             }}
@@ -218,7 +259,7 @@ function ConnectWalletWelcomeScreen(props: {
           <div className="h-4" />
 
           <p
-            className="text-center opacity-80 font-semibold"
+            className="text-center font-semibold opacity-80"
             style={{
               color: fontColor,
             }}
@@ -229,7 +270,7 @@ function ConnectWalletWelcomeScreen(props: {
       </div>
 
       <TrackedAnchorLink
-        className="text-center font-semibold opacity-70 hover:opacity-100 hover:no-underline"
+        className="text-center font-semibold opacity-70 hover:no-underline hover:opacity-100"
         target="_blank"
         category="custom-connect-wallet"
         label="new-to-wallets"

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

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

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

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

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

@@ -5,10 +5,8 @@ import {
   useQueryClient,
 } from "@tanstack/react-query";
 import { THIRDWEB_ANALYTICS_API_HOST, THIRDWEB_API_HOST } from "constants/urls";
-import type { ChainMetadata } from "thirdweb/chains";
 import invariant from "tiny-invariant";
 import { accountKeys, apiKeys, authorizedWallets } from "../cache-keys";
-import { useMutationWithInvalidate } from "./query/useQueryWithNetwork";
 import { useLoggedInUser } from "./useLoggedInUser";
 
 // FIXME: We keep repeating types, API server should provide them
@@ -68,6 +66,7 @@ export type Account = {
     paymentFailureCode: string;
     serviceCutoffDate: string;
   }[];
+  // TODO - add image URL
 };
 
 interface UpdateAccountInput {
@@ -479,8 +478,8 @@ export function useUpdateAccountPlan(waitForWebhook?: boolean) {
   const { user } = useLoggedInUser();
   const queryClient = useQueryClient();
 
-  return useMutationWithInvalidate(
-    async (input: { plan: string; feedback?: string }) => {
+  return useMutation({
+    mutationFn: async (input: { plan: string; feedback?: string }) => {
       invariant(user?.address, "walletAddress is required");
 
       const res = await fetch(`${THIRDWEB_API_HOST}/v1/account/plan`, {
@@ -506,27 +505,26 @@ export function useUpdateAccountPlan(waitForWebhook?: boolean) {
 
       return json.data;
     },
-    {
-      onSuccess: async () => {
+    onSuccess: async () => {
+      return Promise.all([
         // invalidate usage data as limits are different
-        await queryClient.invalidateQueries({
+        queryClient.invalidateQueries({
           queryKey: accountKeys.me(user?.address as string),
-        });
-
-        return queryClient.invalidateQueries({
+        }),
+        queryClient.invalidateQueries({
           queryKey: accountKeys.usage(user?.address as string),
-        });
-      },
+        }),
+      ]);
     },
-  );
+  });
 }
 
 export function useUpdateNotifications() {
   const { user } = useLoggedInUser();
   const queryClient = useQueryClient();
 
-  return useMutationWithInvalidate(
-    async (input: UpdateAccountNotificationsInput) => {
+  return useMutation({
+    mutationFn: async (input: UpdateAccountNotificationsInput) => {
       invariant(user?.address, "walletAddress is required");
 
       const res = await fetch(`${THIRDWEB_API_HOST}/v1/account/notifications`, {
@@ -545,14 +543,12 @@ export function useUpdateNotifications() {
 
       return json.data;
     },
-    {
-      onSuccess: () => {
-        return queryClient.invalidateQueries({
-          queryKey: accountKeys.me(user?.address as string),
-        });
-      },
+    onSuccess: () => {
+      return queryClient.invalidateQueries({
+        queryKey: accountKeys.me(user?.address as string),
+      });
     },
-  );
+  });
 }
 
 export function useCreateBillingSession(enabled = false) {
@@ -589,8 +585,8 @@ export function useConfirmEmail() {
   const { user } = useLoggedInUser();
   const queryClient = useQueryClient();
 
-  return useMutationWithInvalidate(
-    async (input: ConfirmEmailInput) => {
+  return useMutation({
+    mutationFn: async (input: ConfirmEmailInput) => {
       invariant(user?.address, "walletAddress is required");
 
       const res = await fetch(`${THIRDWEB_API_HOST}/v1/account/confirmEmail`, {
@@ -609,31 +605,29 @@ export function useConfirmEmail() {
 
       return json.data;
     },
-    {
-      onSuccess: async () => {
-        // invalidate related cache, since could be relinking account
-        return Promise.all([
-          queryClient.invalidateQueries({
-            queryKey: apiKeys.keys(user?.address as string),
-          }),
-          queryClient.invalidateQueries({
-            queryKey: accountKeys.usage(user?.address as string),
-          }),
-          queryClient.invalidateQueries({
-            queryKey: accountKeys.me(user?.address as string),
-          }),
-        ]);
-      },
+    onSuccess: async () => {
+      // invalidate related cache, since could be relinking account
+      return Promise.all([
+        queryClient.invalidateQueries({
+          queryKey: apiKeys.keys(user?.address as string),
+        }),
+        queryClient.invalidateQueries({
+          queryKey: accountKeys.usage(user?.address as string),
+        }),
+        queryClient.invalidateQueries({
+          queryKey: accountKeys.me(user?.address as string),
+        }),
+      ]);
     },
-  );
+  });
 }
 
 export function useResendEmailConfirmation() {
   const { user } = useLoggedInUser();
   const queryClient = useQueryClient();
 
-  return useMutationWithInvalidate(
-    async () => {
+  return useMutation({
+    mutationFn: async () => {
       invariant(user?.address, "walletAddress is required");
 
       const res = await fetch(
@@ -655,22 +649,20 @@ export function useResendEmailConfirmation() {
 
       return json.data;
     },
-    {
-      onSuccess: () => {
-        return queryClient.invalidateQueries({
-          queryKey: accountKeys.me(user?.address as string),
-        });
-      },
+    onSuccess: () => {
+      return queryClient.invalidateQueries({
+        queryKey: accountKeys.me(user?.address as string),
+      });
     },
-  );
+  });
 }
 
 export function useCreatePaymentMethod() {
   const { user } = useLoggedInUser();
   const queryClient = useQueryClient();
 
-  return useMutationWithInvalidate(
-    async (paymentMethodId: string) => {
+  return useMutation({
+    mutationFn: async (paymentMethodId: string) => {
       invariant(user?.address, "walletAddress is required");
 
       const res = await fetch(`${THIRDWEB_API_HOST}/v1/account/paymentMethod`, {
@@ -691,14 +683,12 @@ export function useCreatePaymentMethod() {
 
       return json.data;
     },
-    {
-      onSuccess: () => {
-        return queryClient.invalidateQueries({
-          queryKey: accountKeys.me(user?.address as string),
-        });
-      },
+    onSuccess: () => {
+      return queryClient.invalidateQueries({
+        queryKey: accountKeys.me(user?.address as string),
+      });
     },
-  );
+  });
 }
 
 export function useApiKeys() {
@@ -761,8 +751,8 @@ export function useUpdateApiKey() {
   const { user } = useLoggedInUser();
   const queryClient = useQueryClient();
 
-  return useMutationWithInvalidate(
-    async (input: UpdateKeyInput) => {
+  return useMutation({
+    mutationFn: async (input: UpdateKeyInput) => {
       invariant(user?.address, "walletAddress is required");
 
       const res = await fetch(`${THIRDWEB_API_HOST}/v1/keys/${input.id}`, {
@@ -782,22 +772,20 @@ export function useUpdateApiKey() {
 
       return json.data;
     },
-    {
-      onSuccess: () => {
-        return queryClient.invalidateQueries({
-          queryKey: apiKeys.keys(user?.address as string),
-        });
-      },
+    onSuccess: () => {
+      return queryClient.invalidateQueries({
+        queryKey: apiKeys.keys(user?.address as string),
+      });
     },
-  );
+  });
 }
 
 export function useRevokeApiKey() {
   const { user } = useLoggedInUser();
   const queryClient = useQueryClient();
 
-  return useMutationWithInvalidate(
-    async (id: string) => {
+  return useMutation({
+    mutationFn: async (id: string) => {
       invariant(user?.address, "walletAddress is required");
 
       const res = await fetch(`${THIRDWEB_API_HOST}/v1/keys/${id}/revoke`, {
@@ -816,14 +804,12 @@ export function useRevokeApiKey() {
 
       return json.data;
     },
-    {
-      onSuccess: () => {
-        return queryClient.invalidateQueries({
-          queryKey: apiKeys.keys(user?.address as string),
-        });
-      },
+    onSuccess: () => {
+      return queryClient.invalidateQueries({
+        queryKey: apiKeys.keys(user?.address as string),
+      });
     },
-  );
+  });
 }
 
 export const usePolicies = (serviceId?: string) => {
@@ -852,8 +838,11 @@ export const usePolicies = (serviceId?: string) => {
 
 export const useUpdatePolicies = () => {
   const queryClient = useQueryClient();
-  return useMutationWithInvalidate(
-    async (input: { serviceId: string; data: ApiKeyServicePolicy }) => {
+  return useMutation({
+    mutationFn: async (input: {
+      serviceId: string;
+      data: ApiKeyServicePolicy;
+    }) => {
       const res = await fetch(`${THIRDWEB_API_HOST}/v1/policies`, {
         method: "POST",
 
@@ -871,22 +860,20 @@ export const useUpdatePolicies = () => {
       }
       return json.data as ApiKeyServicePolicy;
     },
-    {
-      onSuccess: (_, variables) => {
-        return queryClient.invalidateQueries({
-          queryKey: ["policies", variables.serviceId],
-        });
-      },
+    onSuccess: (_, variables) => {
+      return queryClient.invalidateQueries({
+        queryKey: ["policies", variables.serviceId],
+      });
     },
-  );
+  });
 };
 
 export function useRevokeAuthorizedWallet() {
   const { user } = useLoggedInUser();
   const queryClient = useQueryClient();
 
-  return useMutationWithInvalidate(
-    async (variables: { authorizedWalletId: string }) => {
+  return useMutation({
+    mutationFn: async (variables: { authorizedWalletId: string }) => {
       invariant(user?.address, "walletAddress is required");
 
       const { authorizedWalletId } = variables;
@@ -910,16 +897,12 @@ export function useRevokeAuthorizedWallet() {
 
       return json.data;
     },
-    {
-      onSuccess: () => {
-        return queryClient.invalidateQueries({
-          queryKey: authorizedWallets.authorizedWallets(
-            user?.address as string,
-          ),
-        });
-      },
+    onSuccess: () => {
+      return queryClient.invalidateQueries({
+        queryKey: authorizedWallets.authorizedWallets(user?.address as string),
+      });
     },
-  );
+  });
 }
 
 export function useAuthorizedWallets() {
@@ -947,28 +930,3 @@ export function useAuthorizedWallets() {
     gcTime: 0,
   });
 }
-
-/**
- *
- */
-async function fetchChainsFromApi() {
-  // always fetch from prod for chains for now
-  // TODO: re-visit this
-  const res = await fetch("https://api.thirdweb.com/v1/chains");
-  const json = await res.json();
-
-  if (json.error) {
-    throw new Error(json.error.message);
-  }
-
-  return json.data as ChainMetadata[];
-}
-
-export function useApiChains() {
-  return useQuery({
-    queryKey: ["all-chains"],
-    queryFn: () => {
-      return fetchChainsFromApi();
-    },
-  });
-}

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

@@ -14,41 +14,52 @@ import { getContractMetadata, name, symbol } from "thirdweb/extensions/common";
 export function useDashboardContractMetadata(contract: ThirdwebContract) {
   return useQuery({
     queryKey: ["contract-metadata-header", contract.chain.id, contract.address],
-    queryFn: async () => {
-      const [contractMetadata, _name, _symbol, compilerMetadata] =
-        await Promise.all([
-          getContractMetadata({ contract }).catch(() => ({
-            image: "",
-            name: "",
-            symbol: "",
-          })),
-          name({ contract }).catch(() => ""),
-          symbol({ contract }).catch(() => ""),
-          getCompilerMetadata(contract).catch(() => undefined),
-        ]);
-
-      /**
-       * Handle the case where the contract.thirdweb.com endpoint returns a very long name
-       * example url: https://contract.thirdweb.com/metadata/324/0x66E298335c5992d599132582De8eaAF75348e6e6
-       * In that case, we split the solidity name on ":" and take the second part
-       */
-      if (compilerMetadata?.name.includes(":")) {
-        const _name = compilerMetadata.name.split(":")[1];
-        if (_name) {
-          compilerMetadata.name = compilerMetadata.name.split(":")[1];
-        }
-      }
-
-      const contractName =
-        contractMetadata?.name || _name || compilerMetadata?.name || "";
-      const contractSymbol = contractMetadata?.symbol || _symbol || "";
-
-      return {
-        name: contractName,
-        symbol: contractSymbol,
-        image: contractMetadata.image || "",
-        contractType: compilerMetadata?.name || "",
-      };
-    },
+    queryFn: () => fetchDashboardContractMetadata(contract),
   });
 }
+
+type DashboardContractMetadata = {
+  name: string;
+  symbol: string;
+  image: string;
+  contractType: string;
+};
+
+export async function fetchDashboardContractMetadata(
+  contract: ThirdwebContract,
+): Promise<DashboardContractMetadata> {
+  const [contractMetadata, _name, _symbol, compilerMetadata] =
+    await Promise.all([
+      getContractMetadata({ contract }).catch(() => ({
+        image: "",
+        name: "",
+        symbol: "",
+      })),
+      name({ contract }).catch(() => ""),
+      symbol({ contract }).catch(() => ""),
+      getCompilerMetadata(contract).catch(() => undefined),
+    ]);
+
+  /**
+   * Handle the case where the contract.thirdweb.com endpoint returns a very long name
+   * example url: https://contract.thirdweb.com/metadata/324/0x66E298335c5992d599132582De8eaAF75348e6e6
+   * In that case, we split the solidity name on ":" and take the second part
+   */
+  if (compilerMetadata?.name.includes(":")) {
+    const _name = compilerMetadata.name.split(":")[1];
+    if (_name) {
+      compilerMetadata.name = compilerMetadata.name.split(":")[1];
+    }
+  }
+
+  const contractName =
+    contractMetadata?.name || _name || compilerMetadata?.name || "";
+  const contractSymbol = contractMetadata?.symbol || _symbol || "";
+
+  return {
+    name: contractName,
+    symbol: contractSymbol,
+    image: contractMetadata.image || "",
+    contractType: compilerMetadata?.name || "",
+  };
+}

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

@@ -1,3 +1,5 @@
+"use client";
+
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import type { ResultItem } from "components/engine/system-metrics/components/StatusCodes";
 import { THIRDWEB_API_HOST } from "constants/urls";
@@ -5,7 +7,6 @@ import { useState } from "react";
 import { useActiveAccount, useActiveWalletChain } from "thirdweb/react";
 import invariant from "tiny-invariant";
 import { engineKeys } from "../cache-keys";
-import { useMutationWithInvalidate } from "./query/useQueryWithNetwork";
 import { useLoggedInUser } from "./useLoggedInUser";
 
 export type EngineTier = "STARTER" | "PREMIUM" | "ENTERPRISE";
@@ -570,8 +571,8 @@ export function useEngineAddKeypair(instance: string) {
   const token = useLoggedInUser().user?.jwt ?? null;
   const queryClient = useQueryClient();
 
-  return useMutationWithInvalidate(
-    async (input: AddKeypairInput) => {
+  return useMutation({
+    mutationFn: async (input: AddKeypairInput) => {
       invariant(instance, "instance is required");
 
       const res = await fetch(`${instance}auth/keypair/add`, {
@@ -587,14 +588,12 @@ export function useEngineAddKeypair(instance: string) {
 
       return json.result;
     },
-    {
-      onSuccess: () => {
-        return queryClient.invalidateQueries({
-          queryKey: engineKeys.keypairs(instance),
-        });
-      },
+    onSuccess: () => {
+      return queryClient.invalidateQueries({
+        queryKey: engineKeys.keypairs(instance),
+      });
     },
-  );
+  });
 }
 
 type RemoveKeypairInput = {
@@ -605,8 +604,8 @@ export function useEngineRemoveKeypair(instance: string) {
   const token = useLoggedInUser().user?.jwt ?? null;
   const queryClient = useQueryClient();
 
-  return useMutationWithInvalidate(
-    async (input: RemoveKeypairInput) => {
+  return useMutation({
+    mutationFn: async (input: RemoveKeypairInput) => {
       invariant(instance, "instance is required");
 
       const res = await fetch(`${instance}auth/keypair/remove`, {
@@ -622,14 +621,12 @@ export function useEngineRemoveKeypair(instance: string) {
 
       return json.result;
     },
-    {
-      onSuccess: () => {
-        return queryClient.invalidateQueries({
-          queryKey: engineKeys.keypairs(instance),
-        });
-      },
+    onSuccess: () => {
+      return queryClient.invalidateQueries({
+        queryKey: engineKeys.keypairs(instance),
+      });
     },
-  );
+  });
 }
 
 export type EngineRelayer = {
@@ -672,8 +669,8 @@ export function useEngineCreateRelayer(instance: string) {
   const token = useLoggedInUser().user?.jwt ?? null;
   const queryClient = useQueryClient();
 
-  return useMutationWithInvalidate(
-    async (input: CreateRelayerInput) => {
+  return useMutation({
+    mutationFn: async (input: CreateRelayerInput) => {
       invariant(instance, "instance is required");
 
       const res = await fetch(`${instance}relayer/create`, {
@@ -689,14 +686,12 @@ export function useEngineCreateRelayer(instance: string) {
 
       return json.result;
     },
-    {
-      onSuccess: () => {
-        return queryClient.invalidateQueries({
-          queryKey: engineKeys.relayers(instance),
-        });
-      },
+    onSuccess: () => {
+      return queryClient.invalidateQueries({
+        queryKey: engineKeys.relayers(instance),
+      });
     },
-  );
+  });
 }
 
 type RevokeRelayerInput = {
@@ -707,8 +702,8 @@ export function useEngineRevokeRelayer(instance: string) {
   const token = useLoggedInUser().user?.jwt ?? null;
   const queryClient = useQueryClient();
 
-  return useMutationWithInvalidate(
-    async (input: RevokeRelayerInput) => {
+  return useMutation({
+    mutationFn: async (input: RevokeRelayerInput) => {
       invariant(instance, "instance is required");
 
       const res = await fetch(`${instance}relayer/revoke`, {
@@ -724,14 +719,12 @@ export function useEngineRevokeRelayer(instance: string) {
 
       return json.result;
     },
-    {
-      onSuccess: () => {
-        return queryClient.invalidateQueries({
-          queryKey: engineKeys.relayers(instance),
-        });
-      },
+    onSuccess: () => {
+      return queryClient.invalidateQueries({
+        queryKey: engineKeys.relayers(instance),
+      });
     },
-  );
+  });
 }
 
 export type UpdateRelayerInput = {
@@ -747,8 +740,8 @@ export function useEngineUpdateRelayer(instance: string) {
   const token = useLoggedInUser().user?.jwt ?? null;
   const queryClient = useQueryClient();
 
-  return useMutationWithInvalidate(
-    async (input: UpdateRelayerInput) => {
+  return useMutation({
+    mutationFn: async (input: UpdateRelayerInput) => {
       invariant(instance, "instance is required");
 
       const res = await fetch(`${instance}relayer/update`, {
@@ -764,14 +757,12 @@ export function useEngineUpdateRelayer(instance: string) {
 
       return json.result;
     },
-    {
-      onSuccess: () => {
-        return queryClient.invalidateQueries({
-          queryKey: engineKeys.relayers(instance),
-        });
-      },
+    onSuccess: () => {
+      return queryClient.invalidateQueries({
+        queryKey: engineKeys.relayers(instance),
+      });
     },
-  );
+  });
 }
 
 export interface EngineWebhook {
@@ -827,8 +818,8 @@ export function useEngineSetWalletConfig(instance: string) {
   const token = useLoggedInUser().user?.jwt ?? null;
   const queryClient = useQueryClient();
 
-  return useMutationWithInvalidate(
-    async (input: SetWalletConfigInput) => {
+  return useMutation({
+    mutationFn: async (input: SetWalletConfigInput) => {
       invariant(instance, "instance is required");
 
       const res = await fetch(`${instance}configuration/wallets`, {
@@ -844,14 +835,12 @@ export function useEngineSetWalletConfig(instance: string) {
 
       return json.result;
     },
-    {
-      onSuccess: () => {
-        return queryClient.invalidateQueries({
-          queryKey: engineKeys.walletConfig(instance),
-        });
-      },
+    onSuccess: () => {
+      return queryClient.invalidateQueries({
+        queryKey: engineKeys.walletConfig(instance),
+      });
     },
-  );
+  });
 }
 
 export type CreateBackendWalletInput = {
@@ -862,8 +851,8 @@ export function useEngineCreateBackendWallet(instance: string) {
   const token = useLoggedInUser().user?.jwt ?? null;
   const queryClient = useQueryClient();
 
-  return useMutationWithInvalidate(
-    async (input: CreateBackendWalletInput) => {
+  return useMutation({
+    mutationFn: async (input: CreateBackendWalletInput) => {
       invariant(instance, "instance is required");
 
       const res = await fetch(`${instance}backend-wallet/create`, {
@@ -879,14 +868,12 @@ export function useEngineCreateBackendWallet(instance: string) {
 
       return json.result;
     },
-    {
-      onSuccess: () => {
-        return queryClient.invalidateQueries({
-          queryKey: engineKeys.backendWallets(instance),
-        });
-      },
+    onSuccess: () => {
+      return queryClient.invalidateQueries({
+        queryKey: engineKeys.backendWallets(instance),
+      });
     },
-  );
+  });
 }
 
 interface UpdateBackendWalletInput {
@@ -898,8 +885,8 @@ export function useEngineUpdateBackendWallet(instance: string) {
   const token = useLoggedInUser().user?.jwt ?? null;
   const queryClient = useQueryClient();
 
-  return useMutationWithInvalidate(
-    async (input: UpdateBackendWalletInput) => {
+  return useMutation({
+    mutationFn: async (input: UpdateBackendWalletInput) => {
       invariant(instance, "instance is required");
 
       const res = await fetch(`${instance}backend-wallet/update`, {
@@ -915,14 +902,12 @@ export function useEngineUpdateBackendWallet(instance: string) {
 
       return json.result;
     },
-    {
-      onSuccess: () => {
-        return queryClient.invalidateQueries({
-          queryKey: engineKeys.backendWallets(instance),
-        });
-      },
+    onSuccess: () => {
+      return queryClient.invalidateQueries({
+        queryKey: engineKeys.backendWallets(instance),
+      });
     },
-  );
+  });
 }
 
 export type ImportBackendWalletInput =
@@ -949,8 +934,8 @@ export function useEngineImportBackendWallet(instance: string) {
   const token = useLoggedInUser().user?.jwt ?? null;
   const queryClient = useQueryClient();
 
-  return useMutationWithInvalidate(
-    async (input: ImportBackendWalletInput) => {
+  return useMutation({
+    mutationFn: async (input: ImportBackendWalletInput) => {
       invariant(instance, "instance is required");
 
       const res = await fetch(`${instance}backend-wallet/import`, {
@@ -966,22 +951,20 @@ export function useEngineImportBackendWallet(instance: string) {
 
       return json.result;
     },
-    {
-      onSuccess: () => {
-        return queryClient.invalidateQueries({
-          queryKey: engineKeys.backendWallets(instance),
-        });
-      },
+    onSuccess: () => {
+      return queryClient.invalidateQueries({
+        queryKey: engineKeys.backendWallets(instance),
+      });
     },
-  );
+  });
 }
 
 export function useEngineGrantPermissions(instance: string) {
   const token = useLoggedInUser().user?.jwt ?? null;
   const queryClient = useQueryClient();
 
-  return useMutationWithInvalidate(
-    async (input: EngineAdmin) => {
+  return useMutation({
+    mutationFn: async (input: EngineAdmin) => {
       invariant(instance, "instance is required");
 
       const res = await fetch(`${instance}auth/permissions/grant`, {
@@ -997,14 +980,12 @@ export function useEngineGrantPermissions(instance: string) {
 
       return json.result;
     },
-    {
-      onSuccess: () => {
-        return queryClient.invalidateQueries({
-          queryKey: engineKeys.permissions(instance),
-        });
-      },
+    onSuccess: () => {
+      return queryClient.invalidateQueries({
+        queryKey: engineKeys.permissions(instance),
+      });
     },
-  );
+  });
 }
 
 type RevokePermissionsInput = {
@@ -1015,8 +996,8 @@ export function useEngineRevokePermissions(instance: string) {
   const token = useLoggedInUser().user?.jwt ?? null;
   const queryClient = useQueryClient();
 
-  return useMutationWithInvalidate(
-    async (input: RevokePermissionsInput) => {
+  return useMutation({
+    mutationFn: async (input: RevokePermissionsInput) => {
       invariant(instance, "instance is required");
 
       const res = await fetch(`${instance}auth/permissions/revoke`, {
@@ -1032,14 +1013,12 @@ export function useEngineRevokePermissions(instance: string) {
 
       return json.result;
     },
-    {
-      onSuccess: () => {
-        return queryClient.invalidateQueries({
-          queryKey: engineKeys.permissions(instance),
-        });
-      },
+    onSuccess: () => {
+      return queryClient.invalidateQueries({
+        queryKey: engineKeys.permissions(instance),
+      });
     },
-  );
+  });
 }
 
 type CreateAccessTokenResponse = AccessToken & {
@@ -1050,8 +1029,8 @@ export function useEngineCreateAccessToken(instance: string) {
   const token = useLoggedInUser().user?.jwt ?? null;
   const queryClient = useQueryClient();
 
-  return useMutationWithInvalidate(
-    async () => {
+  return useMutation({
+    mutationFn: async () => {
       invariant(instance, "instance is required");
 
       const res = await fetch(`${instance}auth/access-tokens/create`, {
@@ -1067,14 +1046,12 @@ export function useEngineCreateAccessToken(instance: string) {
 
       return json.result as CreateAccessTokenResponse;
     },
-    {
-      onSuccess: () => {
-        return queryClient.invalidateQueries({
-          queryKey: engineKeys.accessTokens(instance),
-        });
-      },
+    onSuccess: () => {
+      return queryClient.invalidateQueries({
+        queryKey: engineKeys.accessTokens(instance),
+      });
     },
-  );
+  });
 }
 
 type RevokeAccessTokenInput = {
@@ -1085,8 +1062,8 @@ export function useEngineRevokeAccessToken(instance: string) {
   const token = useLoggedInUser().user?.jwt ?? null;
   const queryClient = useQueryClient();
 
-  return useMutationWithInvalidate(
-    async (input: RevokeAccessTokenInput) => {
+  return useMutation({
+    mutationFn: async (input: RevokeAccessTokenInput) => {
       invariant(instance, "instance is required");
 
       const res = await fetch(`${instance}auth/access-tokens/revoke`, {
@@ -1102,14 +1079,12 @@ export function useEngineRevokeAccessToken(instance: string) {
 
       return json.result;
     },
-    {
-      onSuccess: () => {
-        return queryClient.invalidateQueries({
-          queryKey: engineKeys.accessTokens(instance),
-        });
-      },
+    onSuccess: () => {
+      return queryClient.invalidateQueries({
+        queryKey: engineKeys.accessTokens(instance),
+      });
     },
-  );
+  });
 }
 
 type UpdateAccessTokenInput = {
@@ -1121,8 +1096,8 @@ export function useEngineUpdateAccessToken(instance: string) {
   const token = useLoggedInUser().user?.jwt ?? null;
   const queryClient = useQueryClient();
 
-  return useMutationWithInvalidate(
-    async (input: UpdateAccessTokenInput) => {
+  return useMutation({
+    mutationFn: async (input: UpdateAccessTokenInput) => {
       invariant(instance, "instance is required");
 
       const res = await fetch(`${instance}auth/access-tokens/update`, {
@@ -1138,14 +1113,12 @@ export function useEngineUpdateAccessToken(instance: string) {
 
       return json.result;
     },
-    {
-      onSuccess: () => {
-        return queryClient.invalidateQueries({
-          queryKey: engineKeys.accessTokens(instance),
-        });
-      },
+    onSuccess: () => {
+      return queryClient.invalidateQueries({
+        queryKey: engineKeys.accessTokens(instance),
+      });
     },
-  );
+  });
 }
 
 export type CreateWebhookInput = {
@@ -1158,8 +1131,8 @@ export function useEngineCreateWebhook(instance: string) {
   const token = useLoggedInUser().user?.jwt ?? null;
   const queryClient = useQueryClient();
 
-  return useMutationWithInvalidate(
-    async (input: CreateWebhookInput) => {
+  return useMutation({
+    mutationFn: async (input: CreateWebhookInput) => {
       invariant(instance, "instance is required");
 
       const res = await fetch(`${instance}webhooks/create`, {
@@ -1175,14 +1148,12 @@ export function useEngineCreateWebhook(instance: string) {
 
       return json.result;
     },
-    {
-      onSuccess: () => {
-        return queryClient.invalidateQueries({
-          queryKey: engineKeys.webhooks(instance),
-        });
-      },
+    onSuccess: () => {
+      return queryClient.invalidateQueries({
+        queryKey: engineKeys.webhooks(instance),
+      });
     },
-  );
+  });
 }
 
 type RevokeWebhookInput = {
@@ -1193,8 +1164,8 @@ export function useEngineRevokeWebhook(instance: string) {
   const token = useLoggedInUser().user?.jwt ?? null;
   const queryClient = useQueryClient();
 
-  return useMutationWithInvalidate(
-    async (input: RevokeWebhookInput) => {
+  return useMutation({
+    mutationFn: async (input: RevokeWebhookInput) => {
       invariant(instance, "instance is required");
 
       const res = await fetch(`${instance}webhooks/revoke`, {
@@ -1210,14 +1181,12 @@ export function useEngineRevokeWebhook(instance: string) {
 
       return json.result;
     },
-    {
-      onSuccess: () => {
-        return queryClient.invalidateQueries({
-          queryKey: engineKeys.webhooks(instance),
-        });
-      },
+    onSuccess: () => {
+      return queryClient.invalidateQueries({
+        queryKey: engineKeys.webhooks(instance),
+      });
     },
-  );
+  });
 }
 
 type SendTokensInput = {
@@ -1659,8 +1628,8 @@ export function useEngineCreateNotificationChannel(engineId: string) {
   const { isLoggedIn } = useLoggedInUser();
   const queryClient = useQueryClient();
 
-  return useMutationWithInvalidate(
-    async (input: CreateNotificationChannelInput) => {
+  return useMutation({
+    mutationFn: async (input: CreateNotificationChannelInput) => {
       invariant(isLoggedIn, "Must be logged in.");
 
       const res = await fetch(
@@ -1677,22 +1646,20 @@ export function useEngineCreateNotificationChannel(engineId: string) {
       const json = await res.json();
       return json.data as EngineNotificationChannel;
     },
-    {
-      onSuccess: () => {
-        return queryClient.invalidateQueries({
-          queryKey: engineKeys.notificationChannels(engineId),
-        });
-      },
+    onSuccess: () => {
+      return queryClient.invalidateQueries({
+        queryKey: engineKeys.notificationChannels(engineId),
+      });
     },
-  );
+  });
 }
 
 export function useEngineDeleteNotificationChannel(engineId: string) {
   const { isLoggedIn } = useLoggedInUser();
   const queryClient = useQueryClient();
 
-  return useMutationWithInvalidate(
-    async (notificationChannelId: string) => {
+  return useMutation({
+    mutationFn: async (notificationChannelId: string) => {
       invariant(isLoggedIn, "Must be logged in.");
 
       const res = await fetch(
@@ -1704,12 +1671,10 @@ export function useEngineDeleteNotificationChannel(engineId: string) {
       }
       res.body?.cancel();
     },
-    {
-      onSuccess: () => {
-        return queryClient.invalidateQueries({
-          queryKey: engineKeys.notificationChannels(engineId),
-        });
-      },
+    onSuccess: () => {
+      return queryClient.invalidateQueries({
+        queryKey: engineKeys.notificationChannels(engineId),
+      });
     },
-  );
+  });
 }

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

@@ -1,31 +0,0 @@
-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";
-
-export function useFavoriteChains() {
-  const allChains = useSupportedChains();
-  const favChainsQuery = useFavouriteChainIds();
-
-  const data = useMemo(() => {
-    if (favChainsQuery.data) {
-      const _chains: ChainMetadata[] = [];
-      // biome-ignore lint/complexity/noForEach: FIXME
-      favChainsQuery.data.forEach((chainId) => {
-        const chain = allChains.find((c) => String(c.chainId) === chainId);
-        if (chain) {
-          _chains.push(chain);
-        }
-      });
-
-      return _chains;
-    }
-
-    return [] as ChainMetadata[];
-  }, [favChainsQuery.data, allChains]);
-
-  return {
-    isPending: favChainsQuery.isPending,
-    data,
-  };
-}

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

@@ -8,7 +8,6 @@ import {
 import type { BasicContract } from "contract-ui/types/types";
 import { getAllMultichainRegistry } from "dashboard-extensions/common/read/getAllMultichainRegistry";
 import { useAllChainsData } from "hooks/chains/allChains";
-import { useSupportedChainsRecord } from "hooks/chains/configureChains";
 import { useMemo } from "react";
 import { sendAndConfirmTransaction } from "thirdweb";
 import { remove } from "thirdweb/extensions/thirdweb";
@@ -42,7 +41,8 @@ export const useAllContractList = (
 ) => {
   const multiChainQuery = useMultiChainRegContractList(walletAddress);
 
-  const configuredChainsRecord = useSupportedChainsRecord();
+  // TODO - instead of using ALL chains, fetch only the ones used here
+  const { idToChain } = useAllChainsData();
   const contractList = useMemo(() => {
     const data = multiChainQuery.data || [];
 
@@ -51,14 +51,12 @@ export const useAllContractList = (
 
     // biome-ignore lint/complexity/noForEach: FIXME
     data.forEach((net) => {
-      if (net.chainId in configuredChainsRecord) {
-        const chainRecord = configuredChainsRecord[net.chainId];
-        if (chainRecord.status !== "deprecated") {
-          if (chainRecord.testnet) {
-            testnets.push(net);
-          } else {
-            mainnets.push(net);
-          }
+      const chn = idToChain.get(net.chainId);
+      if (chn && chn.status !== "deprecated") {
+        if (chn.testnet) {
+          testnets.push(net);
+        } else {
+          mainnets.push(net);
         }
       }
     });
@@ -71,7 +69,7 @@ export const useAllContractList = (
 
     testnets.sort((a, b) => a.chainId - b.chainId);
     return mainnets.concat(testnets);
-  }, [multiChainQuery.data, onlyMainnet, configuredChainsRecord]);
+  }, [multiChainQuery.data, onlyMainnet, idToChain]);
 
   return {
     ...multiChainQuery,
@@ -85,12 +83,10 @@ type RemoveContractParams = {
 };
 
 export function useRemoveContractMutation() {
-  const { chainIdToChainRecord } = useAllChainsData();
   const queryClient = useQueryClient();
   const account = useActiveAccount();
   return useMutation({
     mutationFn: async (data: RemoveContractParams) => {
-      invariant(chainIdToChainRecord, "chains not initialzed yet");
       invariant(data.chainId, "chainId not provided");
       invariant(account, "No wallet connected");
       const { contractAddress, chainId } = data;

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

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

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

@@ -129,7 +129,7 @@ export function FaucetButton({
   // faucet is empty
   if (isFaucetEmpty) {
     return (
-      <Button variant="outline" disabled className="w-full !opacity-100 ">
+      <Button variant="outline" disabled className="!opacity-100 w-full ">
         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="outline" className="w-full !opacity-100 " disabled>
+      <Button variant="outline" className="!opacity-100 w-full " disabled>
         {canClaimFaucetQuery.data.type === "throttle" && (
           <>
             Your next claim is available{" "}
@@ -163,7 +163,7 @@ export function FaucetButton({
 
   // eligible to claim and faucet has balance
   return (
-    <div className="flex flex-col w-full text-center">
+    <div className="flex w-full flex-col text-center">
       <Button
         variant="primary"
         className="w-full gap-2"
@@ -185,7 +185,7 @@ export function FaucetButton({
       </Button>
 
       {faucetWalletBalanceQuery.data && (
-        <p className="mt-3 text-xs text-muted-foreground">
+        <p className="mt-3 text-muted-foreground text-xs">
           {Number(faucetWalletBalanceQuery.data.displayValue).toFixed(3)}{" "}
           {faucetWalletBalanceQuery.data.symbol} left in the faucet
         </p>

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

@@ -30,7 +30,7 @@ export function PayModalButton(props: { chainId: number; label: string }) {
         </Button>
       </DialogTrigger>
       <DialogContent
-        className="md:max-w-[360px] p-0 border-none bg-transparent"
+        className="border-none bg-transparent p-0 md:max-w-[360px]"
         dialogOverlayClassName="backdrop-blur-lg"
         dialogCloseClassName="focus:ring-0"
       >

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

@@ -44,7 +44,7 @@ export const AddChainToWallet: React.FC<AddChainToWalletProps> = (props) => {
     >
       <Button
         disabled={disabled}
-        className="gap-2 w-full"
+        className="w-full gap-2"
         variant="outline"
         onClick={() => {
           // Connct directly to this chain

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

@@ -83,7 +83,7 @@ export function ChainLiveStats(props: { rpc: string }) {
             textToCopy={props.rpc}
             copyIconPosition="right"
             variant="ghost"
-            className="px-2 py-1 -translate-x-2 text-base"
+            className="-translate-x-2 px-2 py-1 text-base"
             iconClassName="size-4"
           />
         </div>
@@ -96,7 +96,7 @@ export function ChainLiveStats(props: { rpc: string }) {
         ) : stats.data ? (
           <p className="fade-in-0 animate-in">{stats.data.latency}ms</p>
         ) : (
-          <div className="flex py-1 h-[28px] w-[70px]">
+          <div className="flex h-[28px] w-[70px] py-1">
             <Skeleton className="h-full w-full" />
           </div>
         )}
@@ -109,7 +109,7 @@ export function ChainLiveStats(props: { rpc: string }) {
         ) : stats.data ? (
           <p className="fade-in-0 animate-in">{stats.data.blockNumber}</p>
         ) : (
-          <div className="flex py-1 h-[28px] w-[140px]">
+          <div className="flex h-[28px] w-[140px] py-1">
             <Skeleton className="h-full w-full" />
           </div>
         )}
@@ -120,10 +120,10 @@ export function ChainLiveStats(props: { rpc: string }) {
 
 function PulseDot() {
   return (
-    <ToolTipLabel label={"Live Data"}>
+    <ToolTipLabel label="Live Data">
       <span className="relative flex size-2">
-        <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-sky-400 opacity-75" />
-        <span className="relative inline-flex rounded-full size-2 bg-primary" />
+        <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-sky-400 opacity-75" />
+        <span className="relative inline-flex size-2 rounded-full bg-primary" />
       </span>
     </ToolTipLabel>
   );

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

@@ -12,28 +12,28 @@ 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 bg-muted/30">
-        <div className="max-w-[520px] flex flex-col items-center ">
+      <div className="flex justify-center rounded-lg border border-border bg-muted/30 px-4 py-10">
+        <div className="flex max-w-[520px] flex-col items-center ">
           <div className="flex items-center">
             <ChainIcon
-              className="size-12 -mr-2 rounded-full border p-1"
+              className="-mr-2 size-12 rounded-full border p-1"
               iconUrl={props.chain.icon?.url}
             />
             <CreditCardIcon
               bg="hsl(var(--background))"
-              className="size-12 -ml-2"
+              className="-ml-2 size-12"
             />
           </div>
 
           <div className="h-6" />
 
-          <h2 className="text-lg tracking-tight font-semibold text-center px-4">
+          <h2 className="px-4 text-center font-semibold text-lg tracking-tight">
             Buy Funds on {sanitizedChainName} using thirdweb Pay
           </h2>
 
           <div className="h-2" />
 
-          <p className="text-muted-foreground text-sm max-w-[520px] text-center px-4">
+          <p className="max-w-[520px] px-4 text-center text-muted-foreground text-sm">
             Instantly onramp, bridge & swap into {sanitizedChainName} with any
             token.
           </p>
@@ -49,9 +49,9 @@ 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-muted-foreground hover:text-foreground"
+            className="inline-flex items-center gap-1.5 text-muted-foreground text-sm hover:text-foreground"
           >
-            Learn more about thirdweb Pay{" "}
+            Learn more about thirdweb Pay
             <ExternalLinkIcon className="size-3" />
           </Link>
         </div>

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 bg-muted/50">
+      <div className="grid grid-cols-1 gap-6 rounded-lg border bg-muted/50 p-4 md:grid-cols-2 md:p-6 lg:grid-cols-3 lg:gap-8">
         {/* Info */}
         {chain.infoURL && (
           <PrimaryInfoItem title="Info">
@@ -33,7 +33,7 @@ export function ChainOverviewSection(props: { chain: ChainMetadata }) {
             textToShow={chain.chainId.toString()}
             tooltip="Copy Chain ID"
             variant="ghost"
-            className="-translate-x-2 py-1 px-2 text-base"
+            className="-translate-x-2 px-2 py-1 text-base"
             iconClassName="size-4"
             copyIconPosition="right"
           />

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 bg-muted/50">
+      <div className="rounded-lg border bg-muted/50 p-4">
         <p className="mb-1"> This chain page is unclaimed </p>
-        <p className="text-muted-foreground text-sm mb-5">
+        <p className="mb-5 text-muted-foreground text-sm">
           Are you the owner of this ecosystem? Claim this page to add additional
           information on this page to help your developers get started!
         </p>
@@ -21,7 +21,7 @@ export function ClaimChainSection() {
             target="_blank"
           >
             <span>Claim Chain</span>
-            <ExternalLinkIcon className="size-4 -mt-[3px]" />
+            <ExternalLinkIcon className="-mt-[3px] size-4" />
           </Link>
         </Button>
       </div>

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

@@ -15,25 +15,25 @@ 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 bg-muted/50">
-        <div className="max-w-[520px] w-full flex flex-col items-center ">
+      <div className="flex justify-center rounded-lg border border-border bg-muted/50 px-4 py-10">
+        <div className="flex w-full max-w-[520px] flex-col items-center ">
           <div className="flex items-center">
             <ChainIcon
-              className="size-12 -mr-2 rounded-full border p-1"
+              className="-mr-2 size-12 rounded-full border p-1"
               iconUrl={props.chain.icon?.url}
             />
-            <GiftIcon bg="hsl(var(--background))" className="size-12 -ml-2" />
+            <GiftIcon bg="hsl(var(--background))" className="-ml-2 size-12" />
           </div>
 
           <div className="h-6" />
 
-          <h2 className="text-lg tracking-tight font-semibold text-center px-4">
+          <h2 className="px-4 text-center font-semibold text-lg tracking-tight">
             {sanitizedChainName} Faucet
           </h2>
 
           <div className="h-2" />
 
-          <p className="text-muted-foreground text-sm max-w-[520px] text-center px-4">
+          <p className="max-w-[520px] px-4 text-center text-muted-foreground text-sm">
             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/SectionTitle.tsx

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

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

@@ -20,27 +20,26 @@ export function SupportedProductsSection(props: {
   return (
     <section>
       <SectionTitle title="thirdweb Products" />
-      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3">
         {enabledProducts.map((product) => {
           return (
             <div
               key={product.id}
-              className="border rounded-lg p-4 flex gap-3 relative hover:bg-muted bg-muted/50 transition-colors duration-300 pr-8"
+              className="relative flex gap-3 rounded-lg border bg-muted/50 p-4 pr-8 transition-colors duration-300 hover:bg-muted"
             >
-              <CircleCheckIcon className="size-5 text-success-text absolute top-4 right-4" />
-              <product.icon className="size-5 shrink-0 mt-0.5" />
+              <CircleCheckIcon className="absolute top-4 right-4 size-5 text-success-text" />
+              <product.icon className="mt-0.5 size-5 shrink-0" />
               <div>
-                <h3 className="font-medium mb-1.5">
+                <h3 className="mb-1.5 font-medium">
                   <Link
                     href={product.link}
                     className="before:absolute before:inset-0"
                     target="_blank"
                   >
-                    {" "}
-                    {product.name}{" "}
+                    {product.name}
                   </Link>
                 </h3>
-                <p className="text-sm text-muted-foreground">
+                <p className="text-muted-foreground text-sm">
                   {product.description}
                 </p>
               </div>

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

@@ -1,4 +1,3 @@
-import { AspectRatio } from "@/components/ui/aspect-ratio";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 import Link from "next/link";
@@ -20,27 +19,29 @@ export function ChainHeader(props: ChainHeaderProps) {
     // force the banner image to be 4:1 aspect ratio and full-width on mobile devices
     <div className="flex flex-col">
       {!props.headerImageUrl && <div className="h-8 md:hidden" />}
-      <AspectRatio
-        ratio={props.headerImageUrl ? 4 : 8}
-        className="border-b border-border max-sm:-mx-4"
+      <div
+        className={cn(
+          "max-sm:-mx-4 relative border-border border-b",
+          props.headerImageUrl ? "aspect-[4/1]" : "aspect-[8/1]",
+        )}
       >
         {props.headerImageUrl && (
           // eslint-disable-next-line @next/next/no-img-element
           <img
             src={props.headerImageUrl}
             alt=""
-            className="object-cover object-center h-full w-full"
+            className="h-full w-full object-cover object-center"
           />
         )}
-      </AspectRatio>
+      </div>
       {/* below header */}
-      <div className="relative flex flex-row justify-end items-end">
+      <div className="relative flex flex-row items-end justify-end">
         {/* chain logo */}
 
         <ChainIcon
           iconUrl={props.logoUrl}
           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",
+            "-translate-y-[50%] absolute top-0 left-0 size-20 overflow-hidden rounded-full border border-border bg-muted p-2 lg:size-36 lg:p-4",
             props.headerImageUrl && "lg:left-4",
           )}
         />
@@ -48,7 +49,7 @@ export function ChainHeader(props: ChainHeaderProps) {
         {/* action group */}
         <div className="pt-3 lg:pt-6">
           {/* Desktop only */}
-          <div className="hidden lg:flex flex-row gap-2">
+          <div className="hidden flex-row gap-2 lg:flex">
             <AddChainToWallet
               chain={
                 // Do not include chain overrides for chain pages

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

@@ -12,18 +12,18 @@ export type ChainCTAProps = {
 export function ChainCTA(props: ChainCTAProps) {
   return (
     <div
-      className="bg-cover bg-center bg-no-repeat rounded-xl border border-border overflow-hidden"
+      className="overflow-hidden rounded-xl border border-border bg-center bg-cover bg-no-repeat"
       style={{
         backgroundImage: `url(${props.backgroundImageUrl})`,
       }}
     >
-      <div className="grid items-center justify-center gap-6 p-8 md:grid-cols-[1fr_auto] md:gap-12 bg-gradient-to-r from-background to-background/50">
+      <div className="grid items-center justify-center gap-6 bg-gradient-to-r from-background to-background/50 p-8 md:grid-cols-[1fr_auto] md:gap-12">
         <div className="space-y-4 text-center md:text-left">
-          <h2 className="text-2xl md:text-3xl font-bold tracking-tighter text-foreground md:max-w-[85%]">
+          <h2 className="font-bold text-2xl text-foreground tracking-tighter md:max-w-[85%] md:text-3xl">
             {props.title}
           </h2>
           {props.description && (
-            <p className="max-w-[600px] text-muted-foreground leading-relaxed text-sm md:text-base">
+            <p className="max-w-[600px] text-muted-foreground text-sm leading-relaxed md:text-base">
               {props.description}
             </p>
           )}

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

@@ -9,21 +9,21 @@ export function ExplorersSection(props: {
   return (
     <section>
       <SectionTitle title="Explorers" />
-      <div className="grid grid-cols-1 gap-3 md:gap-4 md:grid-cols-2 lg:grid-cols-3">
+      <div className="grid grid-cols-1 gap-3 md:grid-cols-2 md:gap-4 lg:grid-cols-3">
         {props.explorers.map((explorer) => {
           return (
             <div
               key={explorer.url}
-              className="p-4 border rounded-xl relative hover:bg-muted bg-muted/50"
+              className="relative rounded-xl border bg-muted/50 p-4 hover:bg-muted"
             >
-              <ExternalLinkIcon className="size-4 absolute top-4 right-4 text-muted-foreground" />
-              <h3 className="mb-1 text-base font-semibold capitalize">
+              <ExternalLinkIcon className="absolute top-4 right-4 size-4 text-muted-foreground" />
+              <h3 className="mb-1 font-semibold text-base capitalize">
                 {explorer.name}
               </h3>
               <Link
                 href={explorer.url}
                 target="_blank"
-                className="text-sm flex gap-1.5 items-center before:absolute before:inset-0 before:z-0 text-muted-foreground"
+                className="flex items-center gap-1.5 text-muted-foreground text-sm before:absolute before:inset-0 before:z-0"
               >
                 {explorer.url.endsWith("/")
                   ? explorer.url.slice(0, -1)

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

@@ -6,7 +6,7 @@ export function PrimaryInfoItem(props: {
   return (
     <div>
       <div className="flex items-center gap-2">
-        <h3 className="text-base text-muted-foreground font-medium">
+        <h3 className="font-medium text-base text-muted-foreground">
           {props.title}
         </h3>
         {props.titleIcon}

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

@@ -79,7 +79,7 @@ export default async function ChainPageLayout({
 
   return (
     <>
-      <div className="border-b border-border h-14 pl-7 flex">
+      <div className="flex h-14 border-border border-b pl-7">
         <Breadcrumb className="my-auto">
           <BreadcrumbList>
             <BreadcrumbItem>
@@ -119,10 +119,10 @@ export default async function ChainPageLayout({
           </BreadcrumbList>
         </Breadcrumb>
       </div>
-      <div className="container flex flex-row h-full">
+      <div className="container flex h-full flex-row">
         <Sidebar links={sidebarLinks} />
 
-        <div className="flex flex-col w-full pb-10">
+        <div className="flex w-full flex-col pb-10">
           {/* Icon + Background */}
           <ChainHeader
             headerImageUrl={chainMetadata?.headerImgUrl}
@@ -130,7 +130,7 @@ export default async function ChainPageLayout({
             chain={chain}
           />
 
-          <div className="flex lg:hidden justify-end">
+          <div className="flex justify-end lg:hidden">
             <MobileSidebar
               links={sidebarLinks}
               trigger={
@@ -142,7 +142,7 @@ export default async function ChainPageLayout({
                 <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-muted-foreground hover:text-foreground"
+                    className="flex items-center justify-start gap-2 px-2 text-muted-foreground text-sm hover:text-foreground"
                   >
                     <ArrowLeftIcon className="size-4" />
                     View all chains
@@ -157,14 +157,14 @@ export default async function ChainPageLayout({
           <div className="flex flex-col gap-3 md:gap-2">
             {/* Gas Sponsored badge - Mobile */}
             {chainMetadata?.gasSponsored && (
-              <div className="md:hidden flex">
+              <div className="flex md:hidden">
                 <GasSponseredBadge />
               </div>
             )}
 
             {/* Chain name */}
-            <div className="flex flex-row gap-1.5 items-center">
-              <h1 className="text-2xl font-semibold lg:text-3xl lg:font-semibold tracking-tight">
+            <div className="flex flex-row items-center gap-1.5">
+              <h1 className="font-semibold text-2xl tracking-tight lg:font-semibold lg:text-3xl">
                 {chain.name}
               </h1>
 
@@ -185,13 +185,13 @@ export default async function ChainPageLayout({
 
             {/* description */}
             {chainMetadata?.about && (
-              <p className="text-muted-foreground text-sm lg:text-base mb-2">
+              <p className="mb-2 text-muted-foreground text-sm lg:text-base">
                 {chainMetadata.about}
               </p>
             )}
 
             {/* mobile action row */}
-            <div className="sm:hidden w-full">
+            <div className="w-full sm:hidden">
               <div className="grid grid-cols-2 gap-2">
                 <AddChainToWallet
                   chain={
@@ -219,7 +219,7 @@ export default async function ChainPageLayout({
 
 function GasSponseredBadge() {
   return (
-    <div className="flex items-center gap-2 rounded-full text-[hsl(334,81.12%,69.65%)] bg-[hsla(335,57%,51%,0.2)] px-2.5 py-1">
+    <div className="flex items-center gap-2 rounded-full bg-[hsla(335,57%,51%,0.2)] px-2.5 py-1 text-[hsl(334,81.12%,69.65%)]">
       <TicketCheckIcon className="size-4" />
       <span className="font-medium text-xs">Gas Sponsored</span>
     </div>

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

@@ -34,8 +34,8 @@ export default async function Page(props: {
 
       {/* Deprecated Alert */}
       {isDeprecated && (
-        <section className="bg-destructive rounded-lg text-destructive-foreground border border-destructive-foreground/20">
-          <div className="container py-4 flex flex-row items-center gap-4">
+        <section className="rounded-lg border border-destructive-foreground/20 bg-destructive text-destructive-foreground">
+          <div className="container flex flex-row items-center gap-4 py-4">
             <CircleAlertIcon className="size-6 flex-shrink-0" />
             <h3 className="font-medium">
               This chain has been marked as deprecated. Some or all services may
@@ -63,13 +63,13 @@ export default async function Page(props: {
       {topContracts.length > 0 && (
         <section>
           <div className="mb-3 flex items-center justify-between">
-            <h2 className="text-xl tracking-tight font-semibold">
+            <h2 className="font-semibold text-xl tracking-tight">
               Popular Contracts
             </h2>
             <Button asChild variant="outline">
               <Link
                 href={`/${chain.slug}/popular`}
-                className="flex gap-2 items-center"
+                className="flex items-center gap-2"
               >
                 See All
                 <ArrowRightIcon className="size-4" />

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

@@ -21,11 +21,11 @@ export default async function Page(props: {
 
   return (
     <section className="mt-2">
-      <h2 className="text-2xl tracking-tighter font-semibold mb-2">
+      <h2 className="mb-2 font-semibold text-2xl tracking-tighter">
         Popular Contracts
       </h2>
 
-      <p className="text-sm text-muted-foreground">
+      <p className="text-muted-foreground text-sm">
         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-muted-foreground text-lg flex border rounded-lg h-[200px] border-border items-center justify-center">
+        <div className="flex h-[200px] items-center justify-center rounded-lg border border-border text-lg text-muted-foreground">
           <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]/[contractAddress]/ConfigureCustomChain.tsx

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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