Version Packages (#4782)

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

apps/dashboard/.env.example

@@ -93,4 +93,7 @@ UNTHREAD_GROWTH_TIER_ID=""
 UNTHREAD_PRO_TIER_ID=""
 
 # Demo Engine
-NEXT_PUBLIC_DEMO_ENGINE_URL=""
+NEXT_PUBLIC_DEMO_ENGINE_URL=""
+
+# API server secret (required for thirdweb.com SIWE login). Copy from Vercel.
+API_SERVER_SECRET=""

apps/dashboard/.eslintrc.js

@@ -2,9 +2,7 @@ module.exports = {
   extends: [
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
-    "plugin:import/typescript",
     "plugin:@next/next/recommended",
-    "plugin:promise/recommended",
     "plugin:storybook/recommended",
   ],
   rules: {
@@ -16,6 +14,11 @@ module.exports = {
         message:
           'Are you *sure* you need to use "useEffect" here? If you loading any async function prefer using "useQuery".',
       },
+      {
+        selector: "CallExpression[callee.name='createContext']",
+        message:
+          'Are you *sure* you need to use a "Context"? In almost all cases you should prefer passing props directly.',
+      },
       {
         selector: "CallExpression[callee.name='defineChain']",
         message:
@@ -52,6 +55,11 @@ module.exports = {
               "FormErrorMessage",
               "MenuGroup",
               "MenuItem",
+              "VStack",
+              "HStack",
+              "AspectRatio",
+              "useToast",
+              "useClipboard",
               // also the types
               "ButtonProps",
               "BadgeProps",
@@ -62,6 +70,7 @@ module.exports = {
               "HelpTextProps",
               "MenuGroupProps",
               "MenuItemProps",
+              "AspectRatioProps",
             ],
             message:
               'Use the equivalent component from "tw-components" instead.',
@@ -98,7 +107,7 @@ module.exports = {
     ],
   },
   parser: "@typescript-eslint/parser",
-  plugins: ["@typescript-eslint", "import", "react-compiler"],
+  plugins: ["@typescript-eslint", "react-compiler"],
   parserOptions: {
     ecmaVersion: 2019,
     ecmaFeatures: {

apps/dashboard/biome.json

@@ -1,8 +1,16 @@
 {
-  "$schema": "https://biomejs.dev/schemas/1.8.1/schema.json",
+  "$schema": "https://biomejs.dev/schemas/1.9.2/schema.json",
   "extends": ["../../biome.json"],
-
-  "files": {
-    "ignore": ["src/graphql/**"]
-  }
+  "overrides": [
+    {
+      "include": ["src/css/swagger-ui.css"],
+      "linter": {
+        "rules": {
+          "suspicious": {
+            "noImportantInKeyframe": "off"
+          }
+        }
+      }
+    }
+  ]
 }

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

@@ -8,7 +8,7 @@ const ContentSecurityPolicy = `
   style-src 'self' 'unsafe-inline' https://vercel.live;
   font-src 'self' https://vercel.live https://assets.vercel.com;
   frame-src * data:;
-  script-src 'self' 'unsafe-eval' 'unsafe-inline' 'wasm-unsafe-eval' 'inline-speculation-rules' *.thirdweb.com *.thirdweb-dev.com vercel.live js.stripe.com pg.paper.xyz portal.usecontext.io;
+  script-src 'self' 'unsafe-eval' 'unsafe-inline' 'wasm-unsafe-eval' 'inline-speculation-rules' *.thirdweb.com *.thirdweb-dev.com vercel.live js.stripe.com;
   connect-src * data: blob:;
   worker-src 'self' blob:;
   block-all-mixed-content;

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",
@@ -62,21 +62,20 @@
     "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.11",
+    "next": "14.2.13",
     "next-plausible": "^3.12.0",
     "next-seo": "^6.5.0",
     "next-themes": "^0.3.0",
     "nextjs-toploader": "^1.6.12",
     "papaparse": "^5.4.1",
     "pluralize": "^8.0.0",
-    "posthog-js": "1.161.3",
-    "posthog-js-opensource": "npm:[email protected]",
+    "posthog-js": "1.67.1",
     "prism-react-renderer": "^2.3.1",
     "prismjs": "^1.29.0",
     "qrcode": "^1.5.3",
@@ -108,24 +107,24 @@
   "devDependencies": {
     "@chakra-ui/cli": "^2.4.1",
     "@chromatic-com/storybook": "2.0.2",
-    "@next/bundle-analyzer": "14.2.11",
-    "@next/eslint-plugin-next": "14.2.11",
-    "@playwright/test": "1.47.1",
-    "@storybook/addon-essentials": "8.3.0",
-    "@storybook/addon-interactions": "8.3.0",
-    "@storybook/addon-links": "8.3.0",
-    "@storybook/addon-onboarding": "8.3.0",
-    "@storybook/addon-viewport": "8.3.0",
-    "@storybook/blocks": "8.3.0",
-    "@storybook/nextjs": "8.3.0",
-    "@storybook/react": "8.3.0",
-    "@storybook/test": "8.3.0",
+    "@next/bundle-analyzer": "14.2.13",
+    "@next/eslint-plugin-next": "14.2.13",
+    "@playwright/test": "1.47.2",
+    "@storybook/addon-essentials": "8.3.2",
+    "@storybook/addon-interactions": "8.3.2",
+    "@storybook/addon-links": "8.3.2",
+    "@storybook/addon-onboarding": "8.3.2",
+    "@storybook/addon-viewport": "8.3.2",
+    "@storybook/blocks": "8.3.2",
+    "@storybook/nextjs": "8.3.2",
+    "@storybook/react": "8.3.2",
+    "@storybook/test": "8.3.2",
     "@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.5",
+    "@types/react": "^18.3.8",
     "@types/react-dom": "^18",
     "@types/react-table": "^7.7.20",
     "@types/spdx-correct": "^3.1.3",
@@ -135,15 +134,14 @@
     "autoprefixer": "^10.4.19",
     "checkly": "^4.8.1",
     "eslint": "8.57.0",
-    "eslint-config-biome": "1.8.3",
-    "eslint-plugin-import": "^2.30.0",
-    "eslint-plugin-promise": "^6.2.0",
-    "eslint-plugin-react-compiler": "0.0.0-experimental-9ed098e-20240725",
+    "eslint-config-biome": "1.8.4",
+    "eslint-plugin-react-compiler": "0.0.0-experimental-ca16900-20240916",
     "eslint-plugin-storybook": "^0.8.0",
+    "knip": "^5.30.5",
     "next-sitemap": "^4.2.3",
     "postcss": "8.4.47",
-    "storybook": "8.3.0",
-    "tailwindcss": "3.4.11",
+    "storybook": "8.3.2",
+    "tailwindcss": "3.4.12",
     "typescript": "5.6.2"
   }
 }

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

@@ -1,12 +1,9 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import {
-  BadgeContainer,
-  mobileViewport,
-} from "../../../../../../../stories/utils";
+import { BadgeContainer, mobileViewport } from "../../../stories/utils";
 import { DangerSettingCard } from "./DangerSettingCard";
 
 const meta = {
-  title: "Team/Settings/components/DangerCard",
+  title: "blocks/DangerSettingCard",
   component: Story,
   parameters: {
     nextjs: {
@@ -31,15 +28,15 @@ 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"
             description="This is a description"
             buttonLabel="Some Action"
             buttonOnClick={() => {}}
-            isLoading={false}
+            isPending={false}
             confirmationDialog={{
               title: "This is confirmation title",
               description: "This is confirmation description",
@@ -53,7 +50,7 @@ function Story() {
             description="This is a description"
             buttonLabel="Some Action"
             buttonOnClick={() => {}}
-            isLoading={true}
+            isPending={true}
             confirmationDialog={{
               title: "This is confirmation title",
               description: "This is confirmation description",

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

@@ -17,31 +17,31 @@ export function DangerSettingCard(props: {
   description: string;
   buttonLabel: string;
   buttonOnClick: () => void;
-  isLoading: boolean;
+  isPending: boolean;
   confirmationDialog: {
     title: string;
     description: string;
   };
 }) {
   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"
-              disabled={props.isLoading}
+              className="gap-2 bg-red-600 font-semibold text-white hover:bg-red-600/80"
+              disabled={props.isPending}
             >
-              {props.isLoading && <Spinner className="size-3" />}
+              {props.isPending && <Spinner className="size-3" />}
               {props.buttonLabel}
             </Button>
           </DialogTrigger>
@@ -64,11 +64,11 @@ 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.isLoading}
+                disabled={props.isPending}
               >
-                {props.isLoading && <Spinner className="size-3" />}
+                {props.isPending && <Spinner className="size-3" />}
                 {props.buttonLabel}
               </Button>
             </DialogFooter>

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

@@ -27,7 +27,7 @@ export function MobileSidebar(props: {
   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 +41,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="rounded-t-xl rounded-b-none p-4"
         dialogCloseClassName="hidden"
         onClick={(e) => {
           if (e.target instanceof HTMLAnchorElement) {
@@ -55,7 +55,7 @@ export function MobileSidebar(props: {
               <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"
+                  className="!text-left flex h-auto justify-start gap-2 py-3"
                   activeClassName="bg-accent"
                   exactMatch={link.exactMatch}
                   tracking={link.tracking}

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

@@ -1,12 +1,9 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import {
-  BadgeContainer,
-  mobileViewport,
-} from "../../../../../../../stories/utils";
+import { BadgeContainer, mobileViewport } from "../../../stories/utils";
 import { SettingsCard } from "./SettingsCard";
 
 const meta = {
-  title: "Team/Settings/components/SettingsCard",
+  title: "blocks/SettingsCard",
   component: Story,
   parameters: {
     nextjs: {
@@ -31,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,10 +81,10 @@ function Story() {
             }}
             saveButton={{
               disabled: false,
-              isLoading: false,
+              isPending: false,
               onClick: () => {},
             }}
-            noPermissionText={"You do not have permission to edit this"}
+            noPermissionText="You do not have permission to edit this"
             errorText={undefined}
           >
             <ChildrenPlaceholder />
@@ -103,7 +100,7 @@ function Story() {
             }}
             saveButton={{
               disabled: false,
-              isLoading: false,
+              isPending: false,
               onClick: () => {},
             }}
             noPermissionText={undefined}
@@ -122,7 +119,7 @@ function Story() {
             }}
             saveButton={{
               disabled: true,
-              isLoading: false,
+              isPending: false,
               onClick: () => {},
             }}
             noPermissionText={undefined}
@@ -141,7 +138,7 @@ function Story() {
             }}
             saveButton={{
               disabled: false,
-              isLoading: true,
+              isPending: true,
               onClick: () => {},
             }}
             noPermissionText={undefined}
@@ -157,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

@@ -1,37 +1,40 @@
 import { Spinner } from "@/components/ui/Spinner/Spinner";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
+import type React from "react";
 
-export function SettingsCard(props: {
-  bottomText: string;
-  header?: {
-    description: string | undefined;
-    title: string;
-  };
-  children: React.ReactNode;
-  errorText: string | undefined;
-  noPermissionText: string | undefined;
-  saveButton?: {
-    onClick: () => void;
-    disabled: boolean;
-    isLoading: boolean;
-  };
-}) {
+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>
             )}
@@ -41,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}
@@ -57,11 +60,12 @@ export function SettingsCard(props: {
             size="sm"
             className="gap-2"
             onClick={props.saveButton.onClick}
-            disabled={props.saveButton.disabled || props.saveButton.isLoading}
+            disabled={props.saveButton.disabled || props.saveButton.isPending}
             variant="outline"
+            type={props.saveButton.type}
           >
-            {props.saveButton.isLoading && <Spinner className="size-3" />}
-            {props.saveButton.isLoading ? "Saving" : "Save"}
+            {props.saveButton.isPending && <Spinner className="size-3" />}
+            {props.saveButton.isPending ? "Saving" : "Save"}
           </Button>
         )}
       </div>

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

@@ -24,7 +24,7 @@ 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,
       )}
     >
@@ -37,7 +37,7 @@ export function Sidebar(props: SidebarContentProps) {
               <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"
+                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}
               >

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

@@ -3,7 +3,7 @@ import { mobileViewport } from "../../../stories/utils";
 import { SidebarLayout } from "./SidebarLayout";
 
 const meta = {
-  title: "layouts/SidebarLayout",
+  title: "blocks/SidebarLayout",
   component: Story,
   parameters: {
     nextjs: {
@@ -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

@@ -21,31 +21,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" />
+                <SiGithub 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" />
+                <SiTiktok 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" />
+                <SiInstagram className="size-5 text-muted-foreground" />
               </Link>
             </Button>
             <Button size="icon" variant="ghost" asChild className="size-9">
@@ -53,83 +53,83 @@ export function AppFooter(props: AppFooterProps) {
                 href="hhttps://www.linkedin.com/company/third-web/"
                 target="_blank"
               >
-                <SiLinkedin className="text-muted-foreground size-5" />
+                <SiLinkedin 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" />
+                <SiYoutube 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" />
+                <SiDiscord 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" />
+                <SiReddit 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" />
+                <SiX 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/multi-select.stories.tsx

@@ -0,0 +1,79 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useMemo, useState } from "react";
+import { BadgeContainer, mobileViewport } from "../../../stories/utils";
+import { MultiSelect } from "./multi-select";
+
+const meta = {
+  title: "blocks/MultiSelect",
+  component: Story,
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+} satisfies Meta<typeof Story>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Desktop: Story = {
+  args: {},
+};
+
+export const Mobile: Story = {
+  args: {},
+  parameters: {
+    viewport: mobileViewport("iphone14"),
+  },
+};
+
+function createList(len: number) {
+  return Array.from({ length: len }, (_, i) => ({
+    value: `${i}`,
+    label: `Item ${i}`,
+  }));
+}
+
+function Story() {
+  return (
+    <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
+        defaultValues={["1", "3", "5"]}
+        storyLabel="20 items, 3 selected by default"
+        listLen={20}
+      />
+      <VariantTest
+        defaultValues={["1", "2", "3", "4", "5", "6", "7"]}
+        storyLabel="20 items, 7 selected, show max 3"
+        listLen={20}
+        maxCount={3}
+      />
+    </div>
+  );
+}
+
+function VariantTest(props: {
+  defaultValues: string[];
+  maxCount?: number;
+  storyLabel: string;
+  listLen: number;
+}) {
+  const list = useMemo(() => createList(props.listLen), [props.listLen]);
+  const [values, setValues] = useState<string[]>(props.defaultValues);
+
+  return (
+    <BadgeContainer label={props.storyLabel}>
+      <MultiSelect
+        selectedValues={values}
+        options={list}
+        onSelectedValuesChange={(values) => {
+          setValues(values);
+        }}
+        placeholder="Select items"
+        maxCount={props.maxCount}
+      />
+    </BadgeContainer>
+  );
+}

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

@@ -0,0 +1,263 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+import { CheckIcon, ChevronDown, SearchIcon, XIcon } from "lucide-react";
+import * as React from "react";
+import { useShowMore } from "../../lib/useShowMore";
+import { ScrollShadow } from "../ui/ScrollShadow/ScrollShadow";
+import { Input } from "../ui/input";
+
+interface MultiSelectProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  options: {
+    label: string;
+    value: string;
+  }[];
+
+  selectedValues: string[];
+  onSelectedValuesChange: (value: string[]) => void;
+  placeholder: string;
+
+  /**
+   * Maximum number of items to display. Extra selected items will be summarized.
+   * Optional, defaults to 3.
+   */
+  maxCount?: number;
+
+  className?: string;
+}
+
+export const MultiSelect = React.forwardRef<
+  HTMLButtonElement,
+  MultiSelectProps
+>(
+  (
+    {
+      options,
+      onSelectedValuesChange,
+      placeholder,
+      maxCount = Number.POSITIVE_INFINITY,
+      className,
+      selectedValues,
+      ...props
+    },
+    ref,
+  ) => {
+    const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);
+    const [searchValue, setSearchValue] = React.useState("");
+
+    const handleInputKeyDown = React.useCallback(
+      (event: React.KeyboardEvent<HTMLInputElement>) => {
+        if (event.key === "Enter") {
+          setIsPopoverOpen(true);
+        } else if (event.key === "Backspace" && !event.currentTarget.value) {
+          const newSelectedValues = [...selectedValues];
+          newSelectedValues.pop();
+          onSelectedValuesChange(newSelectedValues);
+        }
+      },
+      [selectedValues, onSelectedValuesChange],
+    );
+
+    const toggleOption = React.useCallback(
+      (option: string) => {
+        const newSelectedValues = selectedValues.includes(option)
+          ? selectedValues.filter((value) => value !== option)
+          : [...selectedValues, option];
+        onSelectedValuesChange(newSelectedValues);
+      },
+      [selectedValues, onSelectedValuesChange],
+    );
+
+    const handleClear = React.useCallback(() => {
+      onSelectedValuesChange([]);
+    }, [onSelectedValuesChange]);
+
+    const handleTogglePopover = () => {
+      setIsPopoverOpen((prev) => !prev);
+    };
+
+    const clearExtraOptions = React.useCallback(() => {
+      const newSelectedValues = selectedValues.slice(0, maxCount);
+      onSelectedValuesChange(newSelectedValues);
+    }, [selectedValues, onSelectedValuesChange, maxCount]);
+
+    // show 50 initially and then 20 more when reaching the end
+    const { itemsToShow, lastItemRef } = useShowMore<HTMLButtonElement>(50, 20);
+
+    const optionsToShow = React.useMemo(() => {
+      const searchValLowercase = searchValue.toLowerCase();
+      const filteredOptions = options.filter((option) => {
+        return option.label.toLowerCase().includes(searchValLowercase);
+      });
+
+      return filteredOptions.slice(0, itemsToShow);
+    }, [options, searchValue, itemsToShow]);
+
+    return (
+      <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            ref={ref}
+            {...props}
+            onClick={handleTogglePopover}
+            className={cn(
+              "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 w-full justify-between">
+                {/* badges */}
+                <div className="flex flex-wrap items-center gap-1.5">
+                  {selectedValues.slice(0, maxCount).map((value) => {
+                    const option = options.find((o) => o.value === value);
+                    return (
+                      <ClosableBadge
+                        key={value}
+                        label={option?.label || ""}
+                        onClose={() => toggleOption(value)}
+                      />
+                    );
+                  })}
+
+                  {/* +X more */}
+                  {selectedValues.length > maxCount && (
+                    <ClosableBadge
+                      label={`+ ${selectedValues.length - maxCount} more`}
+                      onClose={clearExtraOptions}
+                    />
+                  )}
+                </div>
+
+                <div className="flex items-center justify-between gap-2">
+                  {/* Clear All */}
+                  {/* biome-ignore lint/a11y/useKeyWithClickEvents: <explanation> */}
+                  {/* biome-ignore lint/a11y/useFocusableInteractive: <explanation> */}
+                  <div
+                    role="button"
+                    onClick={(event) => {
+                      event.stopPropagation();
+                      handleClear();
+                    }}
+                    className="rounded p-1 hover:bg-muted"
+                  >
+                    <XIcon className="h-4 cursor-pointer text-muted-foreground" />
+                  </div>
+
+                  <Separator
+                    orientation="vertical"
+                    className="flex h-full min-h-6"
+                  />
+                  <ChevronDown className="h-4 cursor-pointer text-muted-foreground" />
+                </div>
+              </div>
+            ) : (
+              <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" />
+              </div>
+            )}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent
+          className="p-0"
+          align="center"
+          sideOffset={10}
+          onEscapeKeyDown={() => setIsPopoverOpen(false)}
+          style={{
+            width: "var(--radix-popover-trigger-width)",
+            maxHeight: "var(--radix-popover-content-available-height)",
+          }}
+        >
+          <div>
+            {/* Search */}
+            <div className="relative">
+              <Input
+                placeholder="Search"
+                value={searchValue}
+                onChange={(e) => setSearchValue(e.target.value)}
+                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="-translate-y-1/2 absolute top-1/2 left-4 size-4 text-muted-foreground" />
+            </div>
+
+            <ScrollShadow
+              scrollableClassName="max-h-[350px] p-1"
+              className="rounded"
+            >
+              {/* List */}
+              <div>
+                {optionsToShow.length === 0 && (
+                  <div className="flex justify-center py-10">
+                    No results found
+                  </div>
+                )}
+
+                {optionsToShow.map((option, i) => {
+                  const isSelected = selectedValues.includes(option.value);
+                  return (
+                    <Button
+                      key={option.value}
+                      role="option"
+                      aria-selected={isSelected}
+                      onClick={() => toggleOption(option.value)}
+                      variant="ghost"
+                      className="flex w-full cursor-pointer justify-start gap-3 rounded-sm px-3 py-2"
+                      ref={
+                        i === optionsToShow.length - 1 ? lastItemRef : undefined
+                      }
+                    >
+                      <div
+                        className={cn(
+                          "flex size-4 items-center justify-center rounded-sm border border-foreground",
+                          isSelected
+                            ? "bg-inverted text-inverted-foreground"
+                            : "opacity-50 [&_svg]:invisible",
+                        )}
+                      >
+                        <CheckIcon className="size-4" />
+                      </div>
+
+                      <span>{option.label}</span>
+                    </Button>
+                  );
+                })}
+              </div>
+            </ScrollShadow>
+          </div>
+        </PopoverContent>
+      </Popover>
+    );
+  },
+);
+
+function ClosableBadge(props: {
+  label: string;
+  onClose: () => void;
+}) {
+  return (
+    <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"
+        onClick={(e) => {
+          e.stopPropagation();
+          props.onClose();
+        }}
+      />
+    </span>
+  );
+}
+
+MultiSelect.displayName = "MultiSelect";

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

@@ -6,9 +6,11 @@ import {
   HoverCardContent,
   HoverCardTrigger,
 } from "@/components/ui/hover-card";
+import { useThirdwebClient } from "@/constants/thirdweb.client";
+import { useClipboard } from "hooks/useClipboard";
 import { Check, Copy, ExternalLinkIcon } from "lucide-react";
-import { useMemo, useState } from "react";
-import { isAddress } from "thirdweb";
+import { useMemo } from "react";
+import { type ThirdwebClient, isAddress } from "thirdweb";
 import { ZERO_ADDRESS } from "thirdweb";
 import {
   Blobbie,
@@ -17,7 +19,6 @@ import {
   useSocialProfiles,
 } from "thirdweb/react";
 import { resolveScheme } from "thirdweb/storage";
-import { thirdwebClient } from "../../constants/client";
 import { cn } from "../../lib/utils";
 import { Badge } from "../ui/badge";
 import { Button } from "../ui/button";
@@ -27,6 +28,7 @@ export function WalletAddress(props: {
   shortenAddress?: boolean;
   className?: string;
 }) {
+  const thirdwebClient = useThirdwebClient();
   // default back to zero address if no address provided
   const address = useMemo(() => props.address || ZERO_ADDRESS, [props.address]);
 
@@ -44,7 +46,7 @@ export function WalletAddress(props: {
     client: thirdwebClient,
   });
 
-  const [isCopied, setIsCopied] = useState(false);
+  const { onCopy, hasCopied } = useClipboard(address, 2000);
 
   if (!isAddress(address)) {
     return <span>Invalid Address ({address})</span>;
@@ -52,19 +54,9 @@ 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>;
   }
 
-  const copyToClipboard = async () => {
-    try {
-      await navigator.clipboard.writeText(address);
-      setIsCopied(true);
-      setTimeout(() => setIsCopied(false), 2000); // Reset after 2 seconds
-    } catch (err) {
-      console.error("Failed to copy: ", err);
-    }
-  };
-
   return (
     <HoverCard>
       <HoverCardTrigger asChild>
@@ -72,14 +64,18 @@ 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,
           )}
         >
           {address && (
-            <WalletAvatar address={address} profiles={profiles.data || []} />
+            <WalletAvatar
+              address={address}
+              profiles={profiles.data || []}
+              thirdwebClient={thirdwebClient}
+            />
           )}
-          <span className="font-mono cursor-pointer">
+          <span className="cursor-pointer font-mono">
             {profiles.data?.[0]?.name || shortenedAddress}
           </span>
         </Button>
@@ -93,33 +89,33 @@ 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"
-              onClick={copyToClipboard}
+              onClick={onCopy}
               className="flex items-center gap-2"
             >
-              {isCopied ? (
+              {hasCopied ? (
                 <Check className="h-4 w-4" />
               ) : (
                 <Copy className="h-4 w-4" />
               )}
-              {isCopied ? "Copied!" : "Copy"}
+              {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>
-          {profiles.isLoading ? (
-            <p className="text-sm text-muted-foreground">Loading profiles...</p>
+          <h3 className="font-semibold text-lg">Social Profiles</h3>
+          {profiles.isPending ? (
+            <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 &&
@@ -140,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>
                   )}
@@ -157,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
@@ -178,6 +174,7 @@ export function WalletAddress(props: {
 function WalletAvatar(props: {
   address: string;
   profiles: SocialProfile[];
+  thirdwebClient: ThirdwebClient;
 }) {
   const avatar = useMemo(() => {
     return props.profiles.find(
@@ -191,7 +188,7 @@ function WalletAvatar(props: {
     <div className="size-6 overflow-hidden rounded-full">
       {avatar ? (
         <MediaRenderer
-          client={thirdwebClient}
+          client={props.thirdwebClient}
           src={avatar}
           className="size-6"
         />

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

@@ -1,8 +1,8 @@
 "use client";
 
 import { cn } from "@/lib/utils";
+import { useClipboard } from "hooks/useClipboard";
 import { CheckIcon, CopyIcon } from "lucide-react";
-import { useState } from "react";
 import { Button } from "./button";
 import { ToolTipLabel } from "./tooltip";
 
@@ -12,20 +12,16 @@ export function CopyButton(props: {
   iconClassName?: string;
   variant?: "ghost" | "primary" | "secondary";
 }) {
-  const [isCopied, setIsCopied] = useState(false);
+  const { hasCopied, onCopy } = useClipboard(props.text, 1000);
   return (
     <ToolTipLabel label="Copy">
       <Button
         variant={props.variant || "ghost"}
         aria-label="Copy"
         className={cn("h-auto w-auto p-1", props.className)}
-        onClick={() => {
-          navigator.clipboard.writeText(props.text);
-          setIsCopied(true);
-          setTimeout(() => setIsCopied(false), 1000);
-        }}
+        onClick={onCopy}
       >
-        {isCopied ? (
+        {hasCopied ? (
           <CheckIcon
             className={cn("size-4 text-green-500", props.iconClassName)}
           />

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

@@ -1,8 +1,8 @@
 "use client";
 
 import { cn } from "@/lib/utils";
+import { useClipboard } from "hooks/useClipboard";
 import { CheckIcon, CopyIcon } from "lucide-react";
-import { useState } from "react";
 import { Button } from "./button";
 import { ToolTipLabel } from "./tooltip";
 
@@ -22,15 +22,15 @@ export function CopyTextButton(props: {
   copyIconPosition: "left" | "right";
   onClick?: () => void;
 }) {
-  const [isCopied, setIsCopied] = useState(false);
-  const copyButton = isCopied ? (
+  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,26 +42,24 @@ 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) => {
-          navigator.clipboard.writeText(props.textToCopy);
-          setIsCopied(true);
-          setTimeout(() => setIsCopied(false), 1000);
+          onCopy();
           e.stopPropagation();
           props.onClick?.();
         }}
       >
         {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

@@ -71,8 +71,15 @@ export function ScrollShadow(props: {
       });
     });
     content.addEventListener("scroll", handleScroll);
+
+    const resizeObserver = new ResizeObserver(() => {
+      handleScroll();
+    });
+
+    resizeObserver.observe(content);
     return () => {
       content.removeEventListener("scroll", handleScroll);
+      resizeObserver.disconnect();
     };
   }, []);
 
@@ -87,7 +94,7 @@ export function ScrollShadow(props: {
       }
     >
       <div
-        className={`${styles.scrollShadowTop} ${styles.scrollShadowY}`}
+        className={cn(styles.scrollShadowTop, styles.scrollShadowY)}
         ref={shadowTopEl}
         style={{
           opacity: "0",
@@ -95,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}
@@ -61,6 +61,7 @@ const BreadcrumbPage = React.forwardRef<
   HTMLSpanElement,
   React.ComponentPropsWithoutRef<"span">
 >(({ className, ...props }, ref) => (
+  // biome-ignore lint/a11y/useFocusableInteractive: required
   <span
     ref={ref}
     role="link"

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

@@ -34,9 +34,10 @@ export function CheckboxWithLabel(props: {
   className?: string;
 }) {
   return (
+    // 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

@@ -6,7 +6,6 @@ import { cn } from "@/lib/utils";
 
 const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
   <nav
-    role="navigation"
     aria-label="pagination"
     className={cn("mx-auto flex w-full justify-center", className)}
     {...props}
@@ -47,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

@@ -0,0 +1,143 @@
+"use client";
+
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { type VariantProps, cva } from "class-variance-authority";
+import { X } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Sheet = SheetPrimitive.Root;
+
+const SheetTrigger = SheetPrimitive.Trigger;
+
+const SheetClose = SheetPrimitive.Close;
+
+const SheetPortal = SheetPrimitive.Portal;
+
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Overlay
+    className={cn(
+      "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}
+    ref={ref}
+  />
+));
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
+
+const sheetVariants = cva(
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500 border-border",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom:
+          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right:
+          "inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+      },
+    },
+    defaultVariants: {
+      side: "right",
+    },
+  },
+);
+
+interface SheetContentProps
+  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+    VariantProps<typeof sheetVariants> {}
+
+const SheetContent = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Content>,
+  SheetContentProps
+>(({ side = "right", className, children, ...props }, ref) => (
+  <SheetPortal>
+    <SheetOverlay />
+    <SheetPrimitive.Content
+      ref={ref}
+      className={cn(sheetVariants({ side }), className)}
+      {...props}
+    >
+      {children}
+      <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>
+    </SheetPrimitive.Content>
+  </SheetPortal>
+));
+SheetContent.displayName = SheetPrimitive.Content.displayName;
+
+const SheetHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 border-border text-center sm:text-left",
+      className,
+    )}
+    {...props}
+  />
+);
+SheetHeader.displayName = "SheetHeader";
+
+const SheetFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse border-border sm:flex-row sm:justify-end sm:space-x-2",
+      className,
+    )}
+    {...props}
+  />
+);
+SheetFooter.displayName = "SheetFooter";
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title
+    ref={ref}
+    className={cn(
+      "border-border font-semibold text-foreground text-lg",
+      className,
+    )}
+    {...props}
+  />
+));
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description
+    ref={ref}
+    className={cn("border-border text-muted-foreground text-sm", className)}
+    {...props}
+  />
+));
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
+
+export {
+  Sheet,
+  SheetPortal,
+  SheetOverlay,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+};

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/client.ts

@@ -1,30 +0,0 @@
-import {
-  DASHBOARD_THIRDWEB_CLIENT_ID,
-  DASHBOARD_THIRDWEB_SECRET_KEY,
-  IPFS_GATEWAY_URL,
-} from "@/constants/env";
-import { createThirdwebClient } from "thirdweb";
-
-export const thirdwebClient = createThirdwebClient(
-  DASHBOARD_THIRDWEB_SECRET_KEY
-    ? {
-        secretKey: DASHBOARD_THIRDWEB_SECRET_KEY,
-        config: {
-          storage: {
-            gatewayUrl: IPFS_GATEWAY_URL,
-          },
-        },
-      }
-    : {
-        clientId: DASHBOARD_THIRDWEB_CLIENT_ID,
-        config: {
-          storage: {
-            gatewayUrl: IPFS_GATEWAY_URL,
-          },
-        },
-      },
-);
-
-/**
- * DO NOT ADD ANYTHING TO THIS FILE IF YOU ARE NOT ABSOLUTELY SURE IT IS OK
- */

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

@@ -1,2 +1,12 @@
+import { cookies } from "next/headers";
+
 export const COOKIE_ACTIVE_ACCOUNT = "tw_active_account";
 export const COOKIE_PREFIX_TOKEN = "tw_token_";
+
+export function getActiveAccountCookie() {
+  return cookies().get(COOKIE_ACTIVE_ACCOUNT)?.value;
+}
+
+export function getJWTCookie(address: string) {
+  return cookies().get(COOKIE_PREFIX_TOKEN + address)?.value;
+}

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

@@ -0,0 +1,40 @@
+import { useQuery } from "@tanstack/react-query";
+import { useMemo } from "react";
+import { useActiveAccount } from "thirdweb/react";
+import type { GetAuthTokenResponse } from "../../app/api/auth/get-auth-token/route";
+import { getThirdwebClient } from "./thirdweb.server";
+
+// returns a thirdweb client with optional JWT passed i
+
+export function useThirdwebClient(jwt?: string) {
+  const account = useActiveAccount();
+  const query = useQuery({
+    queryKey: ["jwt", account?.address],
+    // only enable the query if there is an account and no JWT is passed in directly
+    enabled: !!account && !jwt,
+    retry: false,
+    queryFn: async () => {
+      if (!account) {
+        throw new Error("No account");
+      }
+      const res = await fetch(
+        `/api/auth/get-auth-token?address=${account.address}`,
+      );
+      if (!res.ok) {
+        throw new Error("Failed to get auth token");
+      }
+      const json = (await res.json()) as GetAuthTokenResponse;
+      return json.jwt || undefined;
+    },
+  });
+
+  return useMemo(
+    // prfer jwt from props over the one from the token query if it exists
+    () => getThirdwebClient(jwt || query.data),
+    [jwt, query.data],
+  );
+}
+
+/**
+ * DO NOT ADD ANYTHING TO THIS FILE IF YOU ARE NOT ABSOLUTELY SURE IT IS OK
+ */

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

@@ -0,0 +1,42 @@
+import {
+  DASHBOARD_THIRDWEB_CLIENT_ID,
+  DASHBOARD_THIRDWEB_SECRET_KEY,
+  IPFS_GATEWAY_URL,
+} from "@/constants/env";
+import {
+  THIRDWEB_INAPP_WALLET_DOMAIN,
+  THIRDWEB_PAY_DOMAIN,
+  THIRDWEB_RPC_DOMAIN,
+  THIRDWEB_SOCIAL_API_DOMAIN,
+  THIRDWEB_STORAGE_DOMAIN,
+} from "constants/urls";
+import { createThirdwebClient } from "thirdweb";
+import { setThirdwebDomains } from "thirdweb/utils";
+import { getVercelEnv } from "../../lib/vercel-utils";
+
+// returns a thirdweb client with optional JWT passed in
+export function getThirdwebClient(jwt?: string) {
+  if (getVercelEnv() !== "production") {
+    // if not on production: run this when creating a client to set the domains
+    setThirdwebDomains({
+      rpc: THIRDWEB_RPC_DOMAIN,
+      inAppWallet: THIRDWEB_INAPP_WALLET_DOMAIN,
+      pay: THIRDWEB_PAY_DOMAIN,
+      storage: THIRDWEB_STORAGE_DOMAIN,
+      social: THIRDWEB_SOCIAL_API_DOMAIN,
+    });
+  }
+  return createThirdwebClient({
+    secretKey: jwt ? jwt : DASHBOARD_THIRDWEB_SECRET_KEY,
+    clientId: DASHBOARD_THIRDWEB_CLIENT_ID,
+    config: {
+      storage: {
+        gatewayUrl: IPFS_GATEWAY_URL,
+      },
+    },
+  });
+}
+
+/**
+ * DO NOT ADD ANYTHING TO THIS FILE IF YOU ARE NOT ABSOLUTELY SURE IT IS OK
+ */

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,6 @@
-type Store<T> = {
+import { useSyncExternalStore } from "react";
+
+export type Store<T> = {
   getValue(): T;
   setValue(newValue: T): void;
   subscribe(listener: () => void): () => void;
@@ -45,3 +47,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/@/lib/useShowMore.ts

@@ -0,0 +1,37 @@
+"use client";
+
+import { useCallback, useState } from "react";
+
+/**
+ *
+ * @internal
+ */
+export function useShowMore<T extends HTMLElement>(
+  initialItemsToShow: number,
+  itemsToAdd: number,
+) {
+  // start with showing first `initialItemsToShow` items, when the last item is in view, show `itemsToAdd` more
+  const [itemsToShow, setItemsToShow] = useState(initialItemsToShow);
+  const lastItemRef = useCallback(
+    (node: T) => {
+      if (!node) {
+        return;
+      }
+
+      const observer = new IntersectionObserver(
+        (entries) => {
+          if (entries[0]?.isIntersecting) {
+            setItemsToShow((prev) => prev + itemsToAdd); // show 10 more items
+          }
+        },
+        { threshold: 1 },
+      );
+
+      observer.observe(node);
+      // when the node is removed from the DOM, observer will be disconnected automatically by the browser
+    },
+    [itemsToAdd],
+  );
+
+  return { itemsToShow, lastItemRef };
+}

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

@@ -140,7 +140,24 @@
   }
 }
 
-body,
 html {
   height: 100%;
 }
+
+body {
+  min-height: 100%;
+}
+
+/* Fix colors on autofilled inputs  */
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active {
+  /* Revert text color */
+  -webkit-text-fill-color: hsl(var(--foreground)) !important;
+  color: hsl(var(--foreground)) !important;
+  caret-color: hsl(var(--foreground)) !important;
+
+  /* Revert background color */
+  transition: background-color 5000s ease-in-out 0s;
+}

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

@@ -1,5 +1,3 @@
-import { ZERO_ADDRESS } from "thirdweb";
-
 export const networkKeys = {
   all: ["network"] as const,
   chain: (chainId?: number) => [...networkKeys.all, chainId] as const,
@@ -106,42 +104,11 @@ export const engineKeys = {
     [...engineKeys.all, engineId, "systemMetrics"] as const,
   queueMetrics: (engineId: string) =>
     [...engineKeys.all, engineId, "queueMetrics"] as const,
-};
 
-export const splitsKeys = {
-  all: ["splits"] as const,
-  lists: () => [...splitsKeys.all, "list"] as const,
-  list: (address = ZERO_ADDRESS) => [...splitsKeys.lists(), address] as const,
-  detail: (address = ZERO_ADDRESS) => [...splitsKeys.all, address] as const,
-  currencies: (address = ZERO_ADDRESS) =>
-    [...splitsKeys.detail(address), "currencies"] as const,
-  balances: (address = ZERO_ADDRESS) =>
-    [...splitsKeys.detail(address), "balances"] as const,
-};
-
-export const voteKeys = {
-  all: ["vote"] as const,
-  detail: (address = ZERO_ADDRESS) => [...voteKeys.all, address] as const,
-  proposals: (address = ZERO_ADDRESS) =>
-    [...voteKeys.detail(address), "proposals"] as const,
-  proposal: (proposalId = "-1", address = ZERO_ADDRESS) =>
-    [...voteKeys.proposals(address), proposalId] as const,
-  balances: (address = ZERO_ADDRESS, addresses = [] as string[]) =>
-    [...voteKeys.detail(address), "balances", { addresses }] as const,
-  delegations: (address = ZERO_ADDRESS) =>
-    [...voteKeys.detail(address), "delegations"] as const,
-  delegation: (address = ZERO_ADDRESS, userAddress = ZERO_ADDRESS) =>
-    [...voteKeys.delegations(address), userAddress] as const,
-  userHasVotedOnProposal: (
-    proposalId = "-1",
-    address = ZERO_ADDRESS,
-    userAddress = ZERO_ADDRESS,
-  ) =>
-    [
-      ...voteKeys.proposal(proposalId, address),
-      "hasVotedOnProposal",
-      userAddress,
-    ] as const,
-  canExecuteProposal: (proposalId = "-1", address = ZERO_ADDRESS) =>
-    [...voteKeys.proposal(proposalId, address), "canExecute"] as const,
+  alertRules: (engineId: string) =>
+    [...engineKeys.all, engineId, "alertRules"] as const,
+  alerts: (engineId: string) =>
+    [...engineKeys.all, engineId, "alerts"] as const,
+  notificationChannels: (engineId: string) =>
+    [...engineKeys.all, engineId, "notificationChannels"] as const,
 };

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

@@ -2,28 +2,32 @@
 
 import { Spinner } from "@/components/ui/Spinner/Spinner";
 import { Button } from "@/components/ui/button";
-import { thirdwebClient } from "@/constants/client";
+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 { useSetIsNetworkConfigModalOpen } from "hooks/networkConfigModal";
 import { useTheme } from "next-themes";
 import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { useCallback, useMemo } from "react";
+import { useCallback, useMemo, useState } from "react";
 import type { Chain } from "thirdweb";
-import { AutoConnect, ConnectButton, useConnectModal } from "thirdweb/react";
-import { useFavoriteChains } from "../../hooks/useFavoriteChains";
+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 { useAllChainsData } from "../../../../hooks/chains/allChains";
+import {
+  type StoredChain,
+  addRecentlyUsedChainId,
+  recentlyUsedChainIdsStore,
+} from "../../../../stores/chainStores";
 import { useLoggedInUser } from "../../hooks/useLoggedInUser";
 import { popularChains } from "../popularChains";
 
@@ -32,53 +36,96 @@ export const CustomConnectWallet = (props: {
   connectButtonClassName?: string;
   detailsButtonClassName?: string;
 }) => {
+  const thirdwebClient = useThirdwebClient();
   const loginRequired =
     props.loginRequired === undefined ? true : props.loginRequired;
+
   const { theme } = useTheme();
-  const recentChainsv4 = useRecentlyUsedChains();
-  const addRecentlyUsedChainId = useAddRecentlyUsedChainId();
-  // const setIsNetworkConfigModalOpen = useSetIsNetworkConfigModalOpen();
   const t = theme === "light" ? "light" : "dark";
-  const allv4Chains = useSupportedChains();
-  const chainsRecord = useSupportedChainsRecord();
-  const favChainsQuery = useFavoriteChains();
-  const setIsNetworkConfigModalOpen = useSetIsNetworkConfigModalOpen();
-  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 chainSections = useMemo(() => {
+  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: 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 { isLoading, isLoggedIn } = useLoggedInUser();
+  const { isPending, isLoggedIn } = useLoggedInUser();
   const pathname = usePathname();
 
-  if (isLoading) {
+  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} />
       </>
     );
@@ -94,57 +141,76 @@ 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} />
       </>
     );
   }
 
   return (
-    <ConnectButton
-      theme={getSDKTheme(t)}
-      client={thirdwebClient}
-      connectModal={{
-        privacyPolicyUrl: "/privacy",
-        termsOfServiceUrl: "/tos",
-        showThirdwebBranding: false,
-        welcomeScreen: () => <ConnectWalletWelcomeScreen theme={t} />,
-      }}
-      appMetadata={{
-        name: "thirdweb",
-        logoUrl: "https://thirdweb.com/favicon.ico",
-        url: "https://thirdweb.com",
-      }}
-      onDisconnect={async () => {
-        try {
-          // log out the user
-          await fetch("/api/auth/logout", {
-            method: "POST",
-          });
-        } catch (err) {
-          console.error("Failed to log out", err);
-        }
-      }}
-      connectButton={{
-        className: props.connectButtonClassName,
-      }}
-      detailsButton={{
-        className: props.detailsButtonClassName,
-      }}
-      chains={allChains}
-      detailsModal={{
-        networkSelector: {
-          sections: chainSections,
-          onSwitch(chain) {
-            addRecentlyUsedChainId(chain.id);
+    <>
+      <ConnectButton
+        theme={getSDKTheme(t)}
+        client={thirdwebClient}
+        connectModal={{
+          privacyPolicyUrl: "/privacy",
+          termsOfServiceUrl: "/tos",
+          showThirdwebBranding: false,
+          welcomeScreen: () => <ConnectWalletWelcomeScreen theme={t} />,
+        }}
+        appMetadata={{
+          name: "thirdweb",
+          logoUrl: "https://thirdweb.com/favicon.ico",
+          url: "https://thirdweb.com",
+        }}
+        onDisconnect={async () => {
+          try {
+            // log out the user
+            await fetch("/api/auth/logout", {
+              method: "POST",
+            });
+          } catch (err) {
+            console.error("Failed to log out", err);
+          }
+        }}
+        connectButton={{
+          className: props.connectButtonClassName,
+        }}
+        detailsButton={{
+          className: props.detailsButtonClassName,
+        }}
+        chains={allChainsWithMetadata}
+        detailsModal={{
+          networkSelector: {
+            sections: chainSections,
+            onSwitch(chain) {
+              addRecentlyUsedChainId(chain.id);
+            },
+            renderChain(props) {
+              return (
+                <CustomChainRenderer
+                  {...props}
+                  openEditChainModal={(c) => {
+                    setIsNetworkConfigModalOpen(true);
+                    setEditChain(c);
+                  }}
+                />
+              );
+            },
+            onCustomClick: () => {
+              setEditChain(undefined);
+              setIsNetworkConfigModalOpen(true);
+            },
           },
-          renderChain: CustomChainRenderer,
-          onCustomClick: () => {
-            setIsNetworkConfigModalOpen(true);
-          },
-        },
-      }}
-    />
+        }}
+      />
+
+      <LazyConfigureNetworkModal
+        open={isNetworkConfigModalOpen}
+        onOpenChange={setIsNetworkConfigModalOpen}
+        editChain={editChain}
+      />
+    </>
   );
 };
 
@@ -161,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>
@@ -182,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,
             }}
@@ -193,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,
             }}
@@ -204,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"
@@ -222,6 +288,7 @@ function ConnectWalletWelcomeScreen(props: {
 export function useCustomConnectModal() {
   const { connect } = useConnectModal();
   const { theme } = useTheme();
+  const thirdwebClient = useThirdwebClient();
 
   return useCallback(
     (options?: { chain?: Chain }) => {
@@ -244,7 +311,7 @@ export function useCustomConnectModal() {
         theme: getSDKTheme(theme === "light" ? "light" : "dark"),
       });
     },
-    [connect, theme],
+    [connect, theme, thirdwebClient],
   );
 }
 

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

@@ -17,10 +17,14 @@ export type EVMContractInfo = {
 
 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,
 );

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

@@ -5,7 +5,6 @@ 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";
@@ -947,28 +946,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/useDashboardStorageUpload.tsx

@@ -1,4 +1,4 @@
-import { thirdwebClient } from "@/constants/client";
+import { useThirdwebClient } from "@/constants/thirdweb.client";
 import { useMutation } from "@tanstack/react-query";
 import { upload } from "thirdweb/storage";
 
@@ -8,6 +8,7 @@ type DashboardUploadOptions = {
 };
 
 export function useDashboardStorageUpload(options?: DashboardUploadOptions) {
+  const thirdwebClient = useThirdwebClient();
   return useMutation({
     mutationFn: async (files: Array<File | string>): Promise<string[]> => {
       const uris = await upload({

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

@@ -1539,3 +1539,177 @@ export function useEngineSystemMetrics(engineId: string) {
     refetchInterval: 5_000,
   });
 }
+
+export interface EngineAlertRule {
+  id: string;
+  title: string;
+  // A unique string identifying the alert.
+  // Note the "." which allows `subscriptionRoutes` to use wildcards in notificationChannel.
+  // Example: "alert.sla-5xx-99"
+  routingKey: string;
+  description: string;
+  createdAt: Date;
+  pausedAt: Date | null;
+}
+
+export function useEngineAlertRules(engineId: string) {
+  const { isLoggedIn } = useLoggedInUser();
+
+  return useQuery({
+    queryKey: engineKeys.alertRules(engineId),
+    queryFn: async () => {
+      const res = await fetch(
+        `${THIRDWEB_API_HOST}/v1/engine/${engineId}/alert-rules`,
+        { method: "GET" },
+      );
+      if (!res.ok) {
+        throw new Error(`Unexpected status ${res.status}: ${await res.text()}`);
+      }
+
+      const json = await res.json();
+      return json.data as EngineAlertRule[];
+    },
+    enabled: isLoggedIn,
+  });
+}
+
+export interface EngineAlert {
+  id: string;
+  alertRuleId: string;
+  status: "pending" | "firing" | "resolved";
+  startsAt: Date;
+  endsAt: Date | null;
+}
+
+export function useEngineAlerts(engineId: string, limit: number, offset = 0) {
+  const { isLoggedIn } = useLoggedInUser();
+
+  return useQuery({
+    queryKey: engineKeys.alerts(engineId),
+    queryFn: async () => {
+      const res = await fetch(
+        `${THIRDWEB_API_HOST}/v1/engine/${engineId}/alerts?limit=${limit}&offset=${offset}`,
+        { method: "GET" },
+      );
+      if (!res.ok) {
+        throw new Error(`Unexpected status ${res.status}: ${await res.text()}`);
+      }
+
+      const json = await res.json();
+      return json.data as EngineAlert[];
+    },
+    enabled: isLoggedIn,
+  });
+}
+
+export const EngineNotificationChannelTypeConfig = {
+  slack: {
+    display: "Slack",
+    valueDisplay: "Slack Webhook URL",
+  },
+  email: {
+    display: "Email",
+    valueDisplay: "Email Address",
+  },
+} as const;
+
+type EngineNotificationChannelType =
+  keyof typeof EngineNotificationChannelTypeConfig;
+
+export type EngineNotificationChannel = {
+  id: string;
+  type: EngineNotificationChannelType;
+  value: string;
+  createdAt: Date;
+  pausedAt: Date | null;
+  // A list of routingKeys to listen to. Supports wildcards.
+  // Example: [ 'alert.sla-5xx-99' ] or [ 'alert.*' ] will both notify when
+  // the alert with routingKey `alert.sla-5xx-99` triggers.
+  subscriptionRoutes: string[];
+};
+
+export function useEngineNotificationChannels(engineId: string) {
+  const { isLoggedIn } = useLoggedInUser();
+
+  return useQuery({
+    queryKey: engineKeys.notificationChannels(engineId),
+    queryFn: async () => {
+      const res = await fetch(
+        `${THIRDWEB_API_HOST}/v1/engine/${engineId}/notification-channels`,
+        { method: "GET" },
+      );
+      if (!res.ok) {
+        throw new Error(`Unexpected status ${res.status}: ${await res.text()}`);
+      }
+
+      const json = await res.json();
+      return json.data as EngineNotificationChannel[];
+    },
+    enabled: isLoggedIn,
+  });
+}
+
+export interface CreateNotificationChannelInput {
+  subscriptionRoutes: string[];
+  type: "slack" | "email"; // TODO: Add others when implemented.
+  value: string;
+}
+
+export function useEngineCreateNotificationChannel(engineId: string) {
+  const { isLoggedIn } = useLoggedInUser();
+  const queryClient = useQueryClient();
+
+  return useMutationWithInvalidate(
+    async (input: CreateNotificationChannelInput) => {
+      invariant(isLoggedIn, "Must be logged in.");
+
+      const res = await fetch(
+        `${THIRDWEB_API_HOST}/v1/engine/${engineId}/notification-channels`,
+        {
+          method: "POST",
+          body: JSON.stringify(input),
+        },
+      );
+      if (!res.ok) {
+        throw new Error(`Unexpected status ${res.status}: ${await res.text()}`);
+      }
+
+      const json = await res.json();
+      return json.data as EngineNotificationChannel;
+    },
+    {
+      onSuccess: () => {
+        return queryClient.invalidateQueries({
+          queryKey: engineKeys.notificationChannels(engineId),
+        });
+      },
+    },
+  );
+}
+
+export function useEngineDeleteNotificationChannel(engineId: string) {
+  const { isLoggedIn } = useLoggedInUser();
+  const queryClient = useQueryClient();
+
+  return useMutationWithInvalidate(
+    async (notificationChannelId: string) => {
+      invariant(isLoggedIn, "Must be logged in.");
+
+      const res = await fetch(
+        `${THIRDWEB_API_HOST}/v1/engine/${engineId}/notification-channels/${notificationChannelId}`,
+        { method: "DELETE" },
+      );
+      if (!res.ok) {
+        throw new Error(`Unexpected status ${res.status}: ${await res.text()}`);
+      }
+      res.body?.cancel();
+    },
+    {
+      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 {
-    isLoading: favChainsQuery.isLoading,
-    data,
-  };
-}

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

@@ -3,7 +3,7 @@ import { useDashboardRouter } from "@/lib/DashboardRouter";
 import { useQuery } from "@tanstack/react-query";
 import type { EnsureLoginResponse } from "app/api/auth/ensure-login/route";
 import { usePathname } from "next/navigation";
-import { useEffect, useRef } from "react";
+import { useEffect, useState } from "react";
 import {
   useActiveAccount,
   useActiveWalletConnectionStatus,
@@ -17,7 +17,7 @@ declare global {
 }
 
 export function useLoggedInUser(): {
-  isLoading: boolean;
+  isPending: boolean;
   isLoggedIn: boolean;
   user: { address: string; jwt?: string } | null;
 } {
@@ -27,10 +27,16 @@ export function useLoggedInUser(): {
   const connectionStatus = useActiveWalletConnectionStatus();
   // this is to work around the fact that `connectionStatus` ends up as "disconnected"
   // which we *do* care about, but only after we have been "connecting" at least once
-  const statusWasEverConnecting = useRef(false);
-  if (connectionStatus === "connecting" || connectionStatus === "connected") {
-    statusWasEverConnecting.current = true;
-  }
+  const [statusWasEverConnecting, setStatusWasEverConnecting] = useState(
+    connectionStatus === "connecting" || connectionStatus === "connected",
+  );
+  // needs to be a useEffect for now
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    if (connectionStatus === "connecting" || connectionStatus === "connected") {
+      setStatusWasEverConnecting(true);
+    }
+  }, [connectionStatus]);
 
   const query = useQuery({
     // enabled if:
@@ -40,7 +46,7 @@ export function useLoggedInUser(): {
     enabled:
       !!pathname &&
       connectionStatus !== "connecting" &&
-      statusWasEverConnecting.current &&
+      statusWasEverConnecting &&
       isLoginRequired(pathname),
     // the last "persist", part of the queryKey, is to make sure that we do not cache this query in indexDB
     // convention in v4 of the SDK that we are (ab)using here
@@ -71,19 +77,12 @@ export function useLoggedInUser(): {
     if (query.data?.redirectTo) {
       router.replace(query.data.redirectTo);
     }
-    if (query.data?.jwt) {
-      // necessary for legacy things for now (SDK picks it up from there)
-      // eslint-disable-next-line react-compiler/react-compiler
-      window.TW_AUTH_TOKEN = query.data.jwt;
-    } else {
-      window.TW_AUTH_TOKEN = undefined;
-    }
-  }, [query.data?.redirectTo, query.data?.jwt, router]);
+  }, [query.data?.redirectTo, router]);
 
   // if we are "disconnected" we are not logged in
   if (connectionStatus === "disconnected") {
     return {
-      isLoading: false,
+      isPending: false,
       isLoggedIn: false,
       user: null,
     };
@@ -92,7 +91,7 @@ export function useLoggedInUser(): {
   // if we are still connecting, we are "loading"
   if (connectionStatus === "connecting") {
     return {
-      isLoading: true,
+      isPending: true,
       isLoggedIn: false,
       user: null,
     };
@@ -101,7 +100,7 @@ export function useLoggedInUser(): {
   // same if we do not yet have a path
   if (!pathname) {
     return {
-      isLoading: true,
+      isPending: true,
       isLoggedIn: false,
       user: null,
     };
@@ -110,7 +109,7 @@ export function useLoggedInUser(): {
   // if we do not have an address we are not logged in
   if (!connectedAddress) {
     return {
-      isLoading: false,
+      isPending: false,
       isLoggedIn: false,
       user: null,
     };
@@ -119,7 +118,7 @@ export function useLoggedInUser(): {
   // if we are not on a logged in path, we can simply return the connected address
   if (!isLoginRequired(pathname)) {
     return {
-      isLoading: false,
+      isPending: false,
       isLoggedIn: true,
       user: { address: connectedAddress },
     };
@@ -127,7 +126,7 @@ export function useLoggedInUser(): {
 
   // otherwise we return the query data
   return {
-    isLoading: query.isLoading,
+    isPending: query.isPending,
     isLoggedIn: query.data ? query.data.isLoggedIn : false,
     user: query.data?.isLoggedIn
       ? { address: connectedAddress, jwt: query.data.jwt }

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/useSplit.ts

@@ -1,55 +1,62 @@
+import {
+  queryOptions,
+  useMutation,
+  useQuery,
+  useQueryClient,
+} from "@tanstack/react-query";
 import type {
   BalanceQueryRequest,
   BalanceQueryResponse,
 } from "pages/api/moralis/balances";
 import { toast } from "sonner";
-import type { ThirdwebContract } from "thirdweb";
+import { type ThirdwebContract, sendAndConfirmTransaction } from "thirdweb";
 import { distribute, distributeByToken } from "thirdweb/extensions/split";
-import { useSendAndConfirmTransaction } from "thirdweb/react";
+import { useActiveAccount } from "thirdweb/react";
 import invariant from "tiny-invariant";
-import { splitsKeys } from "..";
-import {
-  useMutationWithInvalidate,
-  useQueryWithNetwork,
-} from "./query/useQueryWithNetwork";
+
+async function getSplitBalances(contract: ThirdwebContract) {
+  const query = await fetch("/api/moralis/balances", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({
+      chainId: contract.chain.id,
+      address: contract.address,
+    } as BalanceQueryRequest),
+  });
+
+  if (query.status >= 400) {
+    throw new Error(await query.json().then((r) => r.error));
+  }
+  return query.json() as Promise<BalanceQueryResponse>;
+}
+
+function getQuery(contract: ThirdwebContract) {
+  return queryOptions({
+    queryKey: ["split-balances", contract.chain.id, contract.address],
+    queryFn: () => getSplitBalances(contract),
+    retry: false,
+  });
+}
 
 export function useSplitBalances(contract: ThirdwebContract) {
-  const chainId = contract.chain.id;
-  const contractAddress = contract.address;
-  const currencies = useQueryWithNetwork(
-    splitsKeys.currencies(contractAddress),
-    async () => {
-      const query = await fetch("/api/moralis/balances", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          chainId,
-          address: contractAddress,
-        } as BalanceQueryRequest),
-      });
-
-      if (query.status >= 400) {
-        throw new Error(await query.json().then((r) => r.error));
-      }
-      return query.json() as Promise<BalanceQueryResponse>;
-    },
-    { enabled: !!chainId && !!contractAddress, retry: false },
-  );
-  return currencies;
+  return useQuery(getQuery(contract));
 }
 
 export function useSplitDistributeFunds(contract: ThirdwebContract) {
-  const contractAddress = contract.address;
-  const balances = useSplitBalances(contract);
-  const { mutateAsync } = useSendAndConfirmTransaction();
+  const account = useActiveAccount();
+  const queryClient = useQueryClient();
 
-  return useMutationWithInvalidate(
-    async () => {
-      invariant(contract, "split contract is not ready");
-      invariant(balances.data, "No balances to distribute");
-      const distributions = (balances.data || [])
+  return useMutation({
+    mutationFn: async () => {
+      invariant(account, "No active account");
+      const balances =
+        // get the cached data if it exists, otherwise fetch it
+        queryClient.getQueryData(getQuery(contract).queryKey) ||
+        (await queryClient.fetchQuery(getQuery(contract)));
+
+      const distributions = balances
         .filter((token) => token.display_balance !== "0.0")
         .map(async (currency) => {
           const transaction =
@@ -59,24 +66,21 @@ export function useSplitDistributeFunds(contract: ThirdwebContract) {
                   contract,
                   tokenAddress: currency.token_address,
                 });
-          const promise = mutateAsync(transaction);
+          const promise = sendAndConfirmTransaction({
+            transaction,
+            account,
+          });
           toast.promise(promise, {
             success: `Successfully distributed ${currency.name}`,
             error: `Error distributing ${currency.name}`,
-            loading: "Distributing funds",
+            loading: `Distributing ${currency.name}`,
           });
         });
 
       return await Promise.all(distributions);
     },
-    {
-      onSuccess: (_data, _variables, _options, invalidate) => {
-        return invalidate([
-          splitsKeys.currencies(contractAddress),
-          splitsKeys.balances(contractAddress),
-          splitsKeys.list(contractAddress),
-        ]);
-      },
+    onSettled: () => {
+      queryClient.invalidateQueries(getQuery(contract));
     },
-  );
+  });
 }

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

@@ -1,288 +1,103 @@
-import { thirdwebClient } from "@/constants/client";
-import { type ThirdwebContract, getContract, toTokens } from "thirdweb";
+import { useMutation } from "@tanstack/react-query";
 import {
-  balanceOf,
-  decimals,
-  delegate,
-  delegates,
-} from "thirdweb/extensions/erc20";
-import {
-  type VoteType,
-  canExecute,
-  castVoteWithReason,
-  executeProposal,
-  getAll,
-  hasVoted,
-  propose,
-  token,
-} from "thirdweb/extensions/vote";
-import { useActiveAccount, useSendAndConfirmTransaction } from "thirdweb/react";
+  type BaseTransactionOptions,
+  type ThirdwebContract,
+  getAddress,
+  getContract,
+  toTokens,
+} from "thirdweb";
+import * as ERC20Ext from "thirdweb/extensions/erc20";
+import * as VoteExt from "thirdweb/extensions/vote";
+import { useSendAndConfirmTransaction } from "thirdweb/react";
+import type { Account } from "thirdweb/wallets";
 import invariant from "tiny-invariant";
-import { voteKeys } from "../cache-keys";
-import {
-  useMutationWithInvalidate,
-  useQueryWithNetwork,
-} from "./query/useQueryWithNetwork";
 
-export function useVoteProposalList(contract?: ThirdwebContract) {
-  return useQueryWithNetwork(
-    voteKeys.proposals(contract?.address || ""),
-    async () => {
-      invariant(contract, "contract is required");
-      return await getAll({ contract });
-    },
-    {
-      enabled: !!contract,
-    },
-  );
+export async function tokensDelegated(
+  options: BaseTransactionOptions<{ account: Account | undefined }>,
+) {
+  if (!options.account) {
+    throw new Error("Expected an account to be passed in options");
+  }
+  const tokenAddress = await VoteExt.token(options);
+  if (!tokenAddress) {
+    throw new Error("Expected a delegated token address");
+  }
+  const tokenContract = getContract({
+    ...options.contract,
+    address: tokenAddress,
+  });
+  const delegatedAddress = await ERC20Ext.delegates({
+    contract: tokenContract,
+    account: options.account.address,
+  });
+  return getAddress(delegatedAddress) === getAddress(options.account.address);
 }
 
-export function useHasVotedOnProposal(
-  contract: ThirdwebContract,
-  proposalId: bigint,
+export async function voteTokenBalances(
+  options: BaseTransactionOptions<{ addresses: string[] }>,
 ) {
-  const userAddress = useActiveAccount()?.address;
-  return useQueryWithNetwork(
-    voteKeys.userHasVotedOnProposal(
-      proposalId.toString(),
-      contract.address,
-      userAddress,
+  invariant(options.addresses.length, "addresses are required");
+  const tokenAddress = await VoteExt.token({ contract: options.contract });
+  if (!tokenAddress) {
+    throw new Error("Expected a delegated token address");
+  }
+  const tokenContract = getContract({
+    ...options.contract,
+    address: tokenAddress,
+  });
+  const [decimals, balanceData] = await Promise.all([
+    ERC20Ext.decimals({ contract: tokenContract }),
+    Promise.all(
+      options.addresses.map((address) =>
+        ERC20Ext.balanceOf({ contract: tokenContract, address }),
+      ),
     ),
-    async () => {
-      invariant(userAddress, "address is required");
-      return await hasVoted({ contract, proposalId, account: userAddress });
-    },
-    {
-      enabled: !!contract,
-    },
-  );
-}
-
-export function useCanExecuteProposal(
-  contract: ThirdwebContract,
-  proposalId: bigint,
-) {
-  return useQueryWithNetwork(
-    voteKeys.canExecuteProposal(proposalId.toString(), contract.address),
-    async () => await canExecute({ contract, proposalId }),
-    {
-      enabled: !!contract,
-    },
-  );
-}
-
-export function useTokensDelegated(contract: ThirdwebContract) {
-  const userAddress = useActiveAccount()?.address;
-
-  return useQueryWithNetwork(
-    voteKeys.delegation(contract.address, userAddress),
-    async () => {
-      invariant(userAddress, "wallet address is required");
-      const tokenAddress = await token({ contract });
-      if (!tokenAddress) {
-        throw new Error("Expected a delegated token address");
-      }
-      const tokenContract = getContract({
-        address: tokenAddress,
-        chain: contract.chain,
-        client: thirdwebClient,
-      });
-      const delegatedAddress = await delegates({
-        contract: tokenContract,
-        account: userAddress,
-      });
-      return delegatedAddress?.toLowerCase() === userAddress.toLowerCase();
-    },
-    {
-      enabled: !!contract && !!userAddress,
-    },
-  );
-}
-
-export function useVoteTokenBalances(
-  contract: ThirdwebContract,
-  addresses: string[],
-) {
-  return useQueryWithNetwork(
-    voteKeys.balances(contract.address, addresses),
-    async (): Promise<
-      Array<{ address: string; balance: string; decimals: number }>
-    > => {
-      invariant(addresses.length, "addresses are required");
-      const tokenAddress = await token({ contract });
-      if (!tokenAddress) {
-        throw new Error("Expected a delegated token address");
-      }
-      const tokenContract = getContract({
-        address: tokenAddress,
-        chain: contract.chain,
-        client: thirdwebClient,
-      });
-      const _decimals = await decimals({ contract: tokenContract });
-      const balanceData = await Promise.all(
-        addresses.map((address) =>
-          balanceOf({ contract: tokenContract, address }),
-        ),
-      );
-      const balances = addresses.map((address, index) => {
-        const balance = balanceData[index] || 0n;
-        return {
-          address,
-          balance: toTokens(balance, _decimals),
-          decimals: _decimals,
-        };
-      });
-      return await Promise.all(balances);
-    },
-    {
-      enabled: addresses.length > 0,
-    },
-  );
-}
-
-export interface IProposalInput {
-  description: string;
-}
-
-/**
- * This hook is a simplified version meant to use on the Dashboard
- * since _currently_ the dashboard only supports creating proposals with descriptions
- *
- * todo: make an extension in the SDK that is more robust and user-friendly ?
- */
-export function useProposalCreateMutation(contract: ThirdwebContract) {
-  const { mutateAsync } = useSendAndConfirmTransaction();
-  return useMutationWithInvalidate(
-    async (proposal: IProposalInput) => {
-      const { description } = proposal;
-      const transaction = propose({
-        contract,
-        description,
-        targets: [contract.address],
-        values: [0n],
-        calldatas: ["0x"],
-      });
-      return await mutateAsync(transaction);
-    },
-    {
-      onSuccess: (_data, _options, _variables, invalidate) => {
-        return invalidate([voteKeys.proposals(contract.address)]);
-      },
-    },
-  );
-}
-
-export function useDelegateMutation(contract: ThirdwebContract) {
-  const userAddress = useActiveAccount()?.address;
-  const { mutateAsync } = useSendAndConfirmTransaction();
-  return useMutationWithInvalidate(
-    async () => {
-      invariant(userAddress, "address is required");
-      const tokenAddress = await token({ contract });
-      if (!tokenAddress) {
-        throw new Error("Expected a delegated token address");
-      }
-      const tokenContract = getContract({
-        address: tokenAddress,
-        chain: contract.chain,
-        client: thirdwebClient,
-      });
-      const transaction = delegate({
-        contract: tokenContract,
-        delegatee: userAddress,
-      });
-      return await mutateAsync(transaction);
-    },
-    {
-      onSuccess: (_data, _options, _variables, invalidate) => {
-        return invalidate([voteKeys.delegation(contract.address, userAddress)]);
-      },
-    },
-  );
+  ]);
+  return options.addresses.map((address, index) => {
+    const balance = balanceData[index] || 0n;
+    return {
+      address,
+      balance: toTokens(balance, decimals),
+      decimals: decimals,
+    };
+  });
 }
 
 /**
  * Get the decimals of the voting erc20 token
+ *
+ * TODO: move this into SDK extensions?
  */
-export function useVotingTokenDecimals(contract: ThirdwebContract) {
-  return useMutationWithInvalidate(async () => {
-    const tokenAddress = await token({ contract });
-    if (!tokenAddress) {
-      throw new Error("Expected a delegated token address");
-    }
-    const tokenContract = getContract({
-      address: tokenAddress,
-      chain: contract.chain,
-      client: thirdwebClient,
-    });
-    const _decimals = await decimals({ contract: tokenContract });
-    return _decimals;
+export async function votingTokenDecimals(options: BaseTransactionOptions) {
+  const tokenAddress = await VoteExt.token(options);
+  if (!tokenAddress) {
+    throw new Error("Expected a delegated token address");
+  }
+  const tokenContract = getContract({
+    ...options.contract,
+    address: tokenAddress,
   });
+  return await ERC20Ext.decimals({ contract: tokenContract });
 }
 
-interface IVoteCast {
-  voteType: VoteType;
-  reason?: string;
-}
-
-export function useCastVoteMutation(
-  contract: ThirdwebContract,
-  proposalId: bigint,
-) {
-  const address = useActiveAccount()?.address;
-  const contractAddress = contract.address;
+export function useDelegateMutation() {
   const { mutateAsync } = useSendAndConfirmTransaction();
-  return useMutationWithInvalidate(
-    async (voteItem: IVoteCast) => {
-      invariant(contract, "contract is required");
-      invariant(address, "address is required");
-      const { voteType, reason } = voteItem;
-      const transaction = castVoteWithReason({
-        contract,
-        proposalId,
-        support: voteType,
-        reason: reason ?? "",
+
+  return useMutation({
+    mutationFn: async (contract: ThirdwebContract) => {
+      const tokenAddress = await VoteExt.token({ contract });
+      if (!tokenAddress) {
+        throw new Error("Expected a delegated token address");
+      }
+      const tokenContract = getContract({
+        ...contract,
+        address: tokenAddress,
+      });
+      const transaction = ERC20Ext.delegate({
+        contract: tokenContract,
+        delegatee: contract.address,
       });
       return await mutateAsync(transaction);
     },
-    {
-      onSuccess: (_data, _options, _variables, invalidate) => {
-        return invalidate([
-          voteKeys.proposals(contractAddress),
-          voteKeys.userHasVotedOnProposal(
-            proposalId.toString(),
-            contractAddress,
-            address,
-          ),
-          voteKeys.canExecuteProposal(proposalId.toString(), contractAddress),
-        ]);
-      },
-    },
-  );
-}
-
-/**
- * This hook is a simplified version for the Dashboard
- * It doesn't pass any extra info to the execute function
- */
-export function useExecuteProposalMutation(
-  contract: ThirdwebContract,
-  proposalId: bigint,
-) {
-  const contractAddress = contract.address;
-  const mutation = useSendAndConfirmTransaction();
-  return useMutationWithInvalidate(
-    async () => {
-      const transaction = executeProposal({ contract, proposalId });
-      return await mutation.mutateAsync(transaction);
-    },
-    {
-      onSuccess: (_data, _options, _variables, invalidate) => {
-        return invalidate([
-          voteKeys.proposals(contractAddress),
-          voteKeys.canExecuteProposal(proposalId.toString(), contractAddress),
-        ]);
-      },
-    },
-  );
+  });
 }

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

@@ -2,8 +2,8 @@
 
 import { Spinner } from "@/components/ui/Spinner/Spinner";
 import { Button } from "@/components/ui/button";
-import { thirdwebClient } from "@/constants/client";
 import { THIRDWEB_ENGINE_FAUCET_WALLET } from "@/constants/env";
+import { useThirdwebClient } from "@/constants/thirdweb.client";
 import { CustomConnectWallet } from "@3rdweb-sdk/react/components/connect-wallet";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import type { CanClaimResponseType } from "app/api/testnet-faucet/can-claim/CanClaimResponseType";
@@ -36,6 +36,7 @@ export function FaucetButton({
   chain: ChainMetadata;
   amount: string;
 }) {
+  const client = useThirdwebClient();
   const address = useActiveAccount()?.address;
   const chainId = chain.chainId;
   // do not include local overrides for chain pages
@@ -44,7 +45,7 @@ export function FaucetButton({
   const faucetWalletBalanceQuery = useWalletBalance({
     address: THIRDWEB_ENGINE_FAUCET_WALLET,
     chain: definedChain,
-    client: thirdwebClient,
+    client,
   });
   const trackEvent = useTrack();
 
@@ -117,7 +118,7 @@ export function FaucetButton({
     faucetWalletBalanceQuery.data.value < toUnits("1", 17);
 
   // loading state
-  if (faucetWalletBalanceQuery.isLoading || canClaimFaucetQuery.isLoading) {
+  if (faucetWalletBalanceQuery.isPending || canClaimFaucetQuery.isPending) {
     return (
       <Button variant="outline" className="w-full gap-2">
         Checking Faucet <Spinner className="size-3" />
@@ -128,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>
     );
@@ -137,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{" "}
@@ -162,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"
@@ -184,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

@@ -1,7 +1,7 @@
 "use client";
 import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
-import { thirdwebClient } from "@/constants/client";
+import { useThirdwebClient } from "@/constants/thirdweb.client";
 import { useTrack } from "hooks/analytics/useTrack";
 import { defineDashboardChain } from "lib/defineDashboardChain";
 import { useTheme } from "next-themes";
@@ -10,6 +10,7 @@ import { getSDKTheme } from "../../../../../../components/sdk-component-theme";
 
 export function PayModalButton(props: { chainId: number; label: string }) {
   const { theme } = useTheme();
+  const client = useThirdwebClient();
   const trackEvent = useTrack();
   return (
     <Dialog>
@@ -29,12 +30,12 @@ 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"
       >
         <PayEmbed
-          client={thirdwebClient}
+          client={client}
           theme={getSDKTheme(theme === "dark" ? "dark" : "light")}
           className="!w-auto"
           payOptions={{

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

@@ -3,8 +3,7 @@
 import { CopyTextButton } from "@/components/ui/CopyTextButton";
 import { Skeleton } from "@/components/ui/skeleton";
 import { ToolTipLabel } from "@/components/ui/tooltip";
-import { thirdwebClient } from "@/constants/client";
-import { isProd } from "@/constants/env";
+import { DASHBOARD_THIRDWEB_CLIENT_ID, isProd } from "@/constants/env";
 import { useQuery } from "@tanstack/react-query";
 import { CircleCheck, XIcon } from "lucide-react";
 import { hostnameEndsWith } from "utils/url";
@@ -14,7 +13,7 @@ function useChainStatswithRPC(_rpcUrl: string) {
   let rpcUrl = _rpcUrl.replace(
     // eslint-disable-next-line no-template-curly-in-string
     "${THIRDWEB_API_KEY}",
-    thirdwebClient.clientId,
+    DASHBOARD_THIRDWEB_CLIENT_ID,
   );
 
   // based on the environment hit dev or production
@@ -84,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>
@@ -97,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>
         )}
@@ -110,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>
         )}
@@ -121,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)/opengraph-image.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @next/next/no-img-element */
-import { thirdwebClient } from "@/constants/client";
+import { getThirdwebClient } from "@/constants/thirdweb.server";
 import { ImageResponse } from "next/og";
 import { download } from "thirdweb/storage";
 import { fetchChain } from "utils/fetchChain";
@@ -77,8 +77,8 @@ export default async function Image({
     ),
     // download the chain icon if there is one
     chain.icon?.url && hasWorkingChainIcon
-      ? download({ uri: chain.icon.url, client: thirdwebClient }).then((res) =>
-          res.arrayBuffer(),
+      ? download({ uri: chain.icon.url, client: getThirdwebClient() }).then(
+          (res) => res.arrayBuffer(),
         )
       : undefined,
     // download the background image (based on chain)

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]/tx/[txHash]/page.tsx

@@ -1,6 +1,7 @@
 import { Badge } from "@/components/ui/badge";
 import { Separator } from "@/components/ui/separator";
-import { thirdwebClient } from "@/constants/client";
+import { getThirdwebClient } from "@/constants/thirdweb.server";
+import { mapV4ChainToV5Chain } from "contexts/map-chains";
 import { ZERO_ADDRESS, toTokens } from "thirdweb";
 import {
   eth_getBlockByHash,
@@ -9,16 +10,17 @@ import {
   getRpcClient,
 } from "thirdweb/rpc";
 import { hexToNumber, shortenAddress, toEther } from "thirdweb/utils";
-import { mapV4ChainToV5Chain } from "../../../../../../contexts/map-chains";
 import { getChain } from "../../../utils";
 
 export default async function Page(props: {
   params: { chain_id: string; txHash: `0x${string}` };
 }) {
+  // consider if we want to pass the JWT here, likely no need to do it but we could?
+  const client = getThirdwebClient();
   const chain = await getChain(props.params.chain_id);
 
   const rpcRequest = getRpcClient({
-    client: thirdwebClient,
+    client,
     // Do not include chain overrides for chain pages
     // eslint-disable-next-line no-restricted-syntax
     chain: mapV4ChainToV5Chain(chain),
@@ -40,9 +42,9 @@ export default async function Page(props: {
   });
 
   return (
-    <main className="flex flex-col gap-y-10 container py-6">
+    <main className="container flex flex-col gap-y-10 py-6">
       <header className="flex flex-col gap-y-2">
-        <p className="text-3xl font-bold">Transaction Details</p>
+        <p className="font-bold text-3xl">Transaction Details</p>
         <div className="flex gap-x-2">
           {shortenAddress(transaction.from)} called on{" "}
           {shortenAddress(transaction.to || ZERO_ADDRESS)}
@@ -53,12 +55,12 @@ export default async function Page(props: {
 
       <section className="flex flex-col gap-y-2">
         <div className="grid grid-cols-2">
-          <div className="flex gap-x-2 items-center">Transaction hash</div>
+          <div className="flex items-center gap-x-2">Transaction hash</div>
           <p>{transaction.hash}</p>
         </div>
 
         <div className="grid grid-cols-2">
-          <div className="flex gap-x-2 items-center">
+          <div className="flex items-center gap-x-2">
             Status {/* and method */}
           </div>
           <div className="flex gap-x-2">
@@ -73,12 +75,12 @@ export default async function Page(props: {
         </div>
 
         <div className="grid grid-cols-2">
-          <div className="flex gap-x-2 items-center">Block</div>
+          <div className="flex items-center gap-x-2">Block</div>
           <p>{Number(transaction.blockNumber)}</p>
         </div>
 
         <div className="grid grid-cols-2">
-          <div className="flex gap-x-2 items-center">Timestamp</div>
+          <div className="flex items-center gap-x-2">Timestamp</div>
           <p>
             {new Date(
               Number.parseInt(block.timestamp.toString()) * 1000,
@@ -91,12 +93,12 @@ export default async function Page(props: {
 
       <section className="flex flex-col gap-y-2">
         <div className="grid grid-cols-2">
-          <div className="flex gap-x-2 items-center">From</div>
+          <div className="flex items-center gap-x-2">From</div>
           <p>{transaction.from}</p>
         </div>
 
         <div className="grid grid-cols-2">
-          <div className="flex gap-x-2 items-center">
+          <div className="flex items-center gap-x-2">
             Interacted with contract
           </div>
           <p>{transaction.to}</p>
@@ -107,27 +109,27 @@ export default async function Page(props: {
 
       <section className="flex flex-col gap-y-2">
         <div className="grid grid-cols-2">
-          <div className="flex gap-x-2 items-center">Value</div>
+          <div className="flex items-center gap-x-2">Value</div>
           <p>{toEther(transaction.value)} ETH</p>
         </div>
 
         <div className="grid grid-cols-2">
-          <div className="flex gap-x-2 items-center">Transaction fee</div>
+          <div className="flex items-center gap-x-2">Transaction fee</div>
           <p>{toEther((transaction.gasPrice || 0n) * receipt.gasUsed)} ETH</p>
         </div>
 
         <div className="grid grid-cols-2">
-          <div className="flex gap-x-2 items-center">Gas price</div>
+          <div className="flex items-center gap-x-2">Gas price</div>
           <p>{toEther(transaction.gasPrice || 0n)} ETH</p>
         </div>
 
         <div className="grid grid-cols-2">
-          <div className="flex gap-x-2 items-center">Gas usage</div>
+          <div className="flex items-center gap-x-2">Gas usage</div>
           <p>{receipt.gasUsed.toString()}</p>
         </div>
 
         <div className="grid grid-cols-2">
-          <div className="flex gap-x-2 items-center">Gas fees (Gwei)</div>
+          <div className="flex items-center gap-x-2">Gas fees (Gwei)</div>
           <p>
             Base: {toTokens(block.baseFeePerGas || 0n, 9)} | Max:{" "}
             {toTokens(transaction.maxFeePerGas || 0n, 9)} | Max priority:{" "}
@@ -136,7 +138,7 @@ export default async function Page(props: {
         </div>
 
         <div className="grid grid-cols-2">
-          <div className="flex gap-x-2 items-center">Burnt fees</div>
+          <div className="flex items-center gap-x-2">Burnt fees</div>
           <p>{toEther(block.baseFeePerGas || 0n * receipt.gasUsed)}</p>
         </div>
       </section>
@@ -145,7 +147,7 @@ export default async function Page(props: {
 
       <section className="flex flex-col gap-y-2">
         <div className="grid grid-cols-2">
-          <div className="flex gap-x-2 items-center">Other</div>
+          <div className="flex items-center gap-x-2">Other</div>
           <p>
             Txn type: {hexToNumber(transaction.typeHex || "0x0")} (
             {transaction.type}) | Nonce: {transaction.nonce} | Position:{" "}
@@ -154,8 +156,8 @@ export default async function Page(props: {
         </div>
 
         <div className="grid grid-cols-2 items-start">
-          <div className="flex gap-x-2 items-center">Raw Input:</div>
-          <div className="bg-muted/50 p-4 rounded-lg break-words text-sm">
+          <div className="flex items-center gap-x-2">Raw Input:</div>
+          <div className="break-words rounded-lg bg-muted/50 p-4 text-sm">
             {transaction.input}
           </div>
         </div>

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

@@ -74,8 +74,7 @@ export default async function ChainListLayout(props: {
   const searchParams = { type: props.params.chain_type, ...props.searchParams };
   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>
@@ -111,19 +110,19 @@ export default async function ChainListLayout(props: {
           </BreadcrumbList>
         </Breadcrumb>
       </div>
-      <section className="container mx-auto py-10 px-4 h-full flex flex-col">
+      <section className="container mx-auto flex h-full flex-col px-4 py-10">
         <header className="flex flex-col gap-4">
-          <div className="flex gap-4 flex-col lg:flex-row lg:justify-between lg:items-center">
-            <div className="flex gap-4 flex-row items-center justify-between lg:justify-start lg:flex-col">
-              <h1 className="font-semibold text-4xl lg:text-5xl tracking-tighter">
+          <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+            <div className="flex flex-row items-center justify-between gap-4 lg:flex-col lg:justify-start">
+              <h1 className="font-semibold text-4xl tracking-tighter lg:text-5xl">
                 List of{" "}
                 {props.params.chain_type.charAt(0).toUpperCase() +
                   props.params.chain_type.slice(1)}
               </h1>
               <AddYourChainButton className="lg:hidden" />
             </div>
-            <div className="flex flex-row lg:flex-col gap-4 items-end">
-              <div className="flex flex-row gap-4 w-full">
+            <div className="flex flex-row items-end gap-4 lg:flex-col">
+              <div className="flex w-full flex-row gap-4">
                 <SearchInput />
                 <ChainListView activeView={activeView} />
                 <AddYourChainButton className="hidden lg:flex" />
@@ -131,7 +130,7 @@ export default async function ChainListLayout(props: {
 
               <div className="flex flex-row gap-2">
                 <AllFilters hideChainType={true} />
-                <div className="hidden lg:flex flex-row gap-2">
+                <div className="hidden flex-row gap-2 lg:flex">
                   <ChainOptionsFilter />
                   <ChainServiceFilter />
                 </div>

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

@@ -30,7 +30,7 @@ export function AllFilters(props: { hideChainType?: boolean }) {
       <PopoverTrigger asChild>
         <Button
           variant="outline"
-          className="w-auto h-10 gap-2 p-2 lg:px-4 lg:py-2 lg:h-10 lg:border-0"
+          className="h-10 w-auto gap-2 p-2 lg:h-10 lg:border-0 lg:px-4 lg:py-2"
         >
           <Filter strokeWidth={1} className="lg:size-4" />
           <span className="hidden lg:inline">All Filters</span>
@@ -39,7 +39,7 @@ export function AllFilters(props: { hideChainType?: boolean }) {
 
       <PopoverContent
         align="end"
-        className="flex flex-col gap-4 mt-0.5 max-w-full"
+        className="mt-0.5 flex max-w-full flex-col gap-4"
       >
         <h3 className="font-bold">Filters</h3>
 
@@ -112,7 +112,7 @@ const FilterSection: React.FC<PropsWithChildren<FilterSectionProps>> = ({
 }) => {
   return (
     <section className="flex flex-col">
-      <h4 className="mb-2 text-sm font-semibold text-muted-foreground">
+      <h4 className="mb-2 font-semibold text-muted-foreground text-sm">
         {title}
       </h4>
       {children}
@@ -182,7 +182,7 @@ export const ChainTypeFilter: React.FC<ChainTypeFilterProps> = ({
         <PopoverTrigger asChild>
           <Button
             variant="outline"
-            className={value === "all" ? undefined : "pr-11 border-primary"}
+            className={value === "all" ? undefined : "border-primary pr-11"}
           >
             {value === "mainnets"
               ? "Mainnets Only"
@@ -196,7 +196,7 @@ export const ChainTypeFilter: React.FC<ChainTypeFilterProps> = ({
           <Button
             variant="ghost"
             size="icon"
-            className="absolute h-auto w-10 right-[1px] top-[1px] bottom-[1px]"
+            className="absolute top-[1px] right-[1px] bottom-[1px] h-auto w-10"
             onClick={() => {
               const url = makeUrl("all");
               router.replace(url);
@@ -208,7 +208,7 @@ export const ChainTypeFilter: React.FC<ChainTypeFilterProps> = ({
       </div>
       <PopoverContent
         align="end"
-        className="flex flex-col gap-4 mt-0.5 max-w-full"
+        className="mt-0.5 flex max-w-full flex-col gap-4"
       >
         {section}
       </PopoverContent>
@@ -254,7 +254,7 @@ export const ChainOptionsFilter: React.FC<ChainOptionsFilterProps> = ({
         />
         <Label
           htmlFor="deprecated"
-          className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+          className="font-medium text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
         >
           Include Deprecated
         </Label>
@@ -275,7 +275,7 @@ export const ChainOptionsFilter: React.FC<ChainOptionsFilterProps> = ({
         <PopoverTrigger asChild>
           <Button
             variant="outline"
-            className={hasFilters ? "pr-11 border-primary" : undefined}
+            className={hasFilters ? "border-primary pr-11" : undefined}
           >
             Chain Options
             {!hasFilters && <ChevronDownIcon className="ml-2 size-4" />}
@@ -285,7 +285,7 @@ export const ChainOptionsFilter: React.FC<ChainOptionsFilterProps> = ({
           <Button
             variant="ghost"
             size="icon"
-            className="absolute h-auto w-10 right-[1px] top-[1px] bottom-[1px]"
+            className="absolute top-[1px] right-[1px] bottom-[1px] h-auto w-10"
             onClick={() => {
               mutableSearchParams.delete("includeDeprecated");
               mutableSearchParams.delete("page");
@@ -301,7 +301,7 @@ export const ChainOptionsFilter: React.FC<ChainOptionsFilterProps> = ({
       </div>
       <PopoverContent
         align="end"
-        className="flex flex-col gap-4 mt-0.5 max-w-full"
+        className="mt-0.5 flex max-w-full flex-col gap-4"
       >
         {section}
       </PopoverContent>
@@ -336,7 +336,7 @@ export const ChainServiceFilter: React.FC<ChainServiceFilterProps> = ({
   const section = (
     <FilterSection title="Services">
       {products.map((product) => (
-        <div className="flex items-center gap-2 group" key={product.id}>
+        <div className="group flex items-center gap-2" key={product.id}>
           <Checkbox
             id={product.id}
             checked={isServiceActive(mutableSearchParams, product.id)}
@@ -351,7 +351,7 @@ export const ChainServiceFilter: React.FC<ChainServiceFilterProps> = ({
           />
           <Label
             htmlFor={product.id}
-            className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+            className="font-medium text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
           >
             {product.name}
           </Label>
@@ -366,7 +366,7 @@ export const ChainServiceFilter: React.FC<ChainServiceFilterProps> = ({
               router.push(url);
             }}
             size="sm"
-            className="ml-auto rounded-full lg:opacity-0 group-hover:opacity-100"
+            className="ml-auto rounded-full group-hover:opacity-100 lg:opacity-0"
             variant="ghost"
           >
             Only
@@ -399,7 +399,7 @@ export const ChainServiceFilter: React.FC<ChainServiceFilterProps> = ({
         <PopoverTrigger asChild>
           <Button
             variant="outline"
-            className={hasActiveFilter ? "pr-11 border-primary" : undefined}
+            className={hasActiveFilter ? "border-primary pr-11" : undefined}
           >
             {buttonTitle}
             {!hasActiveFilter && <ChevronDownIcon className="ml-2 size-4" />}
@@ -409,7 +409,7 @@ export const ChainServiceFilter: React.FC<ChainServiceFilterProps> = ({
           <Button
             variant="ghost"
             size="icon"
-            className="absolute h-auto w-10 right-[1px] top-[1px] bottom-[1px]"
+            className="absolute top-[1px] right-[1px] bottom-[1px] h-auto w-10"
             onClick={() => {
               mutableSearchParams.delete("service");
               mutableSearchParams.delete("page");
@@ -425,7 +425,7 @@ export const ChainServiceFilter: React.FC<ChainServiceFilterProps> = ({
       </div>
       <PopoverContent
         align="end"
-        className="flex flex-col gap-4 mt-0.5 max-w-full"
+        className="mt-0.5 flex max-w-full flex-col gap-4"
       >
         {section}
       </PopoverContent>

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

@@ -5,7 +5,7 @@ import { Input } from "@/components/ui/input";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
 import { SearchIcon, XCircleIcon } from "lucide-react";
 import { usePathname, useSearchParams } from "next/navigation";
-import { useRef } from "react";
+import { useEffect, useRef } from "react";
 import { useDebouncedCallback } from "use-debounce";
 
 function cleanUrl(url: string) {
@@ -22,10 +22,13 @@ export const SearchInput: React.FC = () => {
 
   const inputRef = useRef<HTMLInputElement>(null);
 
-  // hah, no need for useEffect here this just works!
-  if (inputRef.current?.value && !searchParams?.get("query")) {
-    inputRef.current.value = "";
-  }
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    // reset the input if the query param is removed
+    if (inputRef.current?.value && !searchParams?.get("query")) {
+      inputRef.current.value = "";
+    }
+  }, [searchParams]);
 
   const handleSearch = useDebouncedCallback((term: string) => {
     const params = new URLSearchParams(searchParams ?? undefined);
@@ -42,10 +45,10 @@ export const SearchInput: React.FC = () => {
 
   return (
     <div className="relative w-full">
-      <SearchIcon className="absolute size-4 top-[50%] -translate-y-1/2 left-3 text-muted-foreground" />
+      <SearchIcon className="-translate-y-1/2 absolute top-[50%] left-3 size-4 text-muted-foreground" />
       <Input
         placeholder="Search by name or chain ID"
-        className={"pl-9 h-10 py-2 rounded-lg"}
+        className="h-10 rounded-lg py-2 pl-9"
         defaultValue={searchParams?.get("query") || ""}
         onChange={(e) => handleSearch(e.target.value)}
         ref={inputRef}
@@ -53,7 +56,7 @@ export const SearchInput: React.FC = () => {
       {searchParams?.has("query") && (
         <Button
           size="icon"
-          className="absolute top-[50%] -translate-y-1/2 right-2 text-muted-foreground"
+          className="-translate-y-1/2 absolute top-[50%] right-2 text-muted-foreground"
           variant="ghost"
           onClick={() => {
             const params = new URLSearchParams(searchParams ?? undefined);

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

@@ -159,7 +159,7 @@ export async function ChainsData(props: {
       <main>
         {/* empty state */}
         {paginatedChains.length === 0 ? (
-          <div className="border p-8 h-[300px] lg:h-[500px] flex justify-center items-center rounded-lg">
+          <div className="flex h-[300px] items-center justify-center rounded-lg border p-8 lg:h-[500px]">
             <p className="text-2xl">No Results found</p>
           </div>
         ) : props.activeView === "table" ? (
@@ -191,7 +191,7 @@ export async function ChainsData(props: {
                       <div className="relative h-6 w-6">
                         <StarButton
                           chainId={chain.chainId}
-                          className="absolute z-10 top-0 h-full w-full left-0"
+                          className="absolute top-0 left-0 z-10 h-full w-full"
                         />
                       </div>
                     }
@@ -202,7 +202,7 @@ export async function ChainsData(props: {
             </Table>
           </TableContainer>
         ) : (
-          <ul className="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
+          <ul className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
             {paginatedChains.map((chain) => (
               <li key={chain.chainId} className="h-full">
                 <ChainListCard
@@ -219,7 +219,7 @@ export async function ChainsData(props: {
                     <div className="relative h-6 w-6">
                       <StarButton
                         chainId={chain.chainId}
-                        className="absolute z-10 top-0 h-full w-full left-0"
+                        className="absolute top-0 left-0 z-10 h-full w-full"
                       />
                     </div>
                   }
@@ -235,7 +235,7 @@ export async function ChainsData(props: {
         <ChainlistPagination totalPages={totalPages} activePage={activePage} />
       )}
       <div className="h-4" />
-      <p className="text-sm text-center text-muted-foreground text-balance">
+      <p className="text-balance text-center text-muted-foreground text-sm">
         Showing{" "}
         <span className="text-accent-foreground">{paginatedChains.length}</span>{" "}
         out of{" "}

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

@@ -31,12 +31,12 @@ export async function ChainListCard({
 
   return (
     <div className="relative h-full">
-      <Card className="w-full h-full bg-muted/50 hover:bg-muted">
+      <Card className="h-full w-full bg-muted/50 hover:bg-muted">
         <CardHeader className="flex flex-row items-center justify-between p-4">
           <div className="flex flex-row items-center gap-2">
             <ChainIcon iconUrl={iconUrl} className="size-6" />
             <Link
-              className="static group before:content-[''] before:absolute before:top-0 before:bottom-0 before:left-0 before:right-0 before:z-0"
+              className="group static before:absolute before:top-0 before:right-0 before:bottom-0 before:left-0 before:z-0 before:content-['']"
               href={`/${chainSlug}`}
             >
               <CardTitle className="text-xl">{chainName}</CardTitle>
@@ -49,9 +49,9 @@ export async function ChainListCard({
         <CardContent className="px-4 pt-0 pb-4">
           {/* table of `chain id` `native token` `managed support`, header row on left value row on right */}
           <table className="w-full">
-            <tbody className="[&_td>*]:min-h-[25px] text-sm">
+            <tbody className="text-sm [&_td>*]:min-h-[25px]">
               <tr>
-                <th className="font-normal text-left text-muted-foreground">
+                <th className="text-left font-normal text-muted-foreground">
                   Chain ID
                 </th>
                 <td className="text-right">
@@ -59,14 +59,14 @@ export async function ChainListCard({
                     textToCopy={chainId.toString()}
                     textToShow={chainId.toString()}
                     tooltip="Copy Chain ID"
-                    className="inline-flex z-10 relative text-base translate-x-2 py-0.5"
+                    className="relative z-10 inline-flex translate-x-2 py-0.5 text-base"
                     variant="ghost"
                     copyIconPosition="left"
                   />
                 </td>
               </tr>
               <tr>
-                <th className="font-normal text-left text-muted-foreground">
+                <th className="text-left font-normal text-muted-foreground">
                   Native Token
                 </th>
                 <td className="text-right">
@@ -76,7 +76,7 @@ export async function ChainListCard({
                 </td>
               </tr>
               <tr>
-                <th className="font-normal text-left text-muted-foreground">
+                <th className="text-left font-normal text-muted-foreground">
                   Available Services
                 </th>
 
@@ -90,17 +90,17 @@ export async function ChainListCard({
           </table>
 
           {(isDeprecated || chainMetadata?.gasSponsored) && (
-            <div className="flex gap-5 pt-4 mt-5 border-t">
+            <div className="mt-5 flex gap-5 border-t pt-4">
               {!isDeprecated && chainMetadata?.gasSponsored && (
-                <div className="gap-1.5 flex items-center">
-                  <TicketCheckIcon className="text-foreground size-5" />
+                <div className="flex items-center gap-1.5">
+                  <TicketCheckIcon className="size-5 text-foreground" />
                   <p className="text-sm">Gas Sponsored</p>
                 </div>
               )}
 
               {isDeprecated && (
-                <div className="gap-1.5 flex items-center">
-                  <CircleAlertIcon className="text-destructive-text size-5" />
+                <div className="flex items-center gap-1.5">
+                  <CircleAlertIcon className="size-5 text-destructive-text" />
                   <p className="text-sm">Deprecated</p>
                 </div>
               )}

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

@@ -41,25 +41,25 @@ export async function ChainListRow({
       <TableCell>{favoriteButton}</TableCell>
       {/* Name */}
       <TableCell>
-        <div className="flex flex-row items-center gap-4 w-[370px]">
+        <div className="flex w-[370px] flex-row items-center gap-4">
           <div className="flex items-center gap-2">
             <ChainIcon iconUrl={iconUrl} className="size-6" />
             <Link
               href={`/${chainSlug}`}
-              className="static group before:content-[''] before:absolute before:top-0 before:bottom-0 before:left-0 before:right-0 before:z-0"
+              className="group static before:absolute before:top-0 before:right-0 before:bottom-0 before:left-0 before:z-0 before:content-['']"
             >
               {chainName}
             </Link>
 
             {!isDeprecated && chainMetadata?.gasSponsored && (
               <ToolTipLabel label="Gas Sponsored">
-                <TicketCheckIcon className="text-link-foreground size-5 z-10 " />
+                <TicketCheckIcon className="z-10 size-5 text-link-foreground " />
               </ToolTipLabel>
             )}
 
             {isDeprecated && (
               <ToolTipLabel label="Deprecated">
-                <CircleAlertIcon className="text-destructive-text size-5 z-10 " />
+                <CircleAlertIcon className="z-10 size-5 text-destructive-text " />
               </ToolTipLabel>
             )}
           </div>
@@ -71,7 +71,7 @@ export async function ChainListRow({
           textToCopy={chainId.toString()}
           textToShow={chainId.toString()}
           tooltip="Copy Chain ID"
-          className="z-10 relative text-base"
+          className="relative z-10 text-base"
           variant="ghost"
           copyIconPosition="right"
         />
@@ -80,8 +80,8 @@ export async function ChainListRow({
       <TableCell>{currencySymbol}</TableCell>
 
       <TableCell>
-        <div className="flex flex-row gap-14 items-center w-[520px] ">
-          <div className="flex items-center gap-7 z-10">
+        <div className="flex w-[520px] flex-row items-center gap-14 ">
+          <div className="z-10 flex items-center gap-7">
             {products.map((p) => {
               return (
                 <ProductIcon
@@ -134,9 +134,9 @@ function ProductIcon(props: {
       label={props.label}
       leftIcon={
         props.isEnabled ? (
-          <CheckIcon className="text-success-text size-4" />
+          <CheckIcon className="size-4 text-success-text" />
         ) : (
-          <XIcon className="text-destructive-text size-4" />
+          <XIcon className="size-4 text-destructive-text" />
         )
       }
     >

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

@@ -35,17 +35,17 @@ export default function ChainListPage(props: { searchParams: SearchParams }) {
       : "grid";
 
   return (
-    <section className="container mx-auto py-10 px-4 h-full flex flex-col">
+    <section className="container mx-auto flex h-full flex-col px-4 py-10">
       <header className="flex flex-col gap-4">
-        <div className="flex gap-4 flex-col lg:flex-row lg:justify-between lg:items-center">
-          <div className="flex gap-4 flex-row items-center justify-between lg:justify-start lg:flex-col">
-            <h1 className="font-semibold text-4xl lg:text-5xl tracking-tighter">
+        <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+          <div className="flex flex-row items-center justify-between gap-4 lg:flex-col lg:justify-start">
+            <h1 className="font-semibold text-4xl tracking-tighter lg:text-5xl">
               Chainlist
             </h1>
             <AddYourChainButton className="lg:hidden" />
           </div>
-          <div className="flex flex-row lg:flex-col gap-4 items-end">
-            <div className="flex flex-row gap-4 w-full">
+          <div className="flex flex-row items-end gap-4 lg:flex-col">
+            <div className="flex w-full flex-row gap-4">
               <SearchInput />
               <ChainListView activeView={activeView} />
               <AddYourChainButton className="hidden lg:flex" />
@@ -53,7 +53,7 @@ export default function ChainListPage(props: { searchParams: SearchParams }) {
 
             <div className="flex flex-row gap-2">
               <AllFilters />
-              <div className="hidden lg:flex flex-row gap-2">
+              <div className="hidden flex-row gap-2 lg:flex">
                 <ChainTypeFilter />
                 <ChainOptionsFilter />
                 <ChainServiceFilter />