Version Packages (#4761 )

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Improve storage upload error handling (#4763 )
2024-09-23 12:40:27 -07:00 · 2024-09-23 18:30:36 +00:00 · 2024-09-23 18:13:37 +00:00 · 2024-09-23 17:56:50 +00:00 · 2024-09-23 16:16:38 +00:00 · 2024-09-23 20:57:57 +12:00
5301 changed files with 754457 additions and 453242 deletions
@@ -10,33 +10,7 @@
  "access": "public",
  "baseBranch": "main",
  "updateInternalDependencies": "patch",
-  "ignore": [
-    "bundlers-esbuild",
-    "bundlers-vite",
-    "bundlers-webpack",
-    "bundlers-swc",
-    "runtimes-node-commonjs",
-    "runtimes-node-module",
-    "playground-web",
-    "thirdweb-dashboard",
-    "wallet-ui",
-    "portal",
-    "@thirdweb-dev/auth",
-    "@thirdweb-dev/chains",
-    "@thirdweb-dev/cli",
-    "@thirdweb-dev/contracts-js",
-    "@thirdweb-dev/crypto",
-    "@thirdweb-dev/generated-abis",
-    "@thirdweb-dev/merkletree",
-    "@thirdweb-dev/pay",
-    "@thirdweb-dev/payments",
-    "@thirdweb-dev/react",
-    "@thirdweb-dev/react-core",
-    "@thirdweb-dev/sdk",
-    "@thirdweb-dev/storage",
-    "@thirdweb-dev/unity-js-bridge",
-    "@thirdweb-dev/wallets"
-  ],
+  "ignore": ["playground-web", "thirdweb-dashboard", "wallet-ui", "portal"],
  "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": {
    "updateInternalDependents": "always",
    "onlyUpdatePeerDependentsWhenOutOfRange": true
@@ -3,42 +3,17 @@
 # default ownership group
 - @jnsdls @joaquim-verges @MananTank @gregfromstl

-# legacy packages
-
-legacy_packages/auth/ @jnsdls @joaquim-verges
-legacy_packages/chains/ @jnsdls @joaquim-verges
-legacy_packages/cli/ @jnsdls @joaquim-verges
-legacy_packages/contracts-js/ @jnsdls @joaquim-verges
-legacy_packages/crypto/ @jnsdls @joaquim-verges
-legacy_packages/generated-abis/ @jnsdls @joaquim-verges
-legacy_packages/merkletree/ @jnsdls @joaquim-verges
-legacy_packages/pay/ @jnsdls @joaquim-verges
-legacy_packages/payments/ @jnsdls @joaquim-verges
-legacy_packages/react/ @MananTank @jnsdls @joaquim-verges
-legacy_packages/react-core/ @MananTank @jnsdls @joaquim-verges
-legacy_packages/react-native/ @jnsdls @joaquim-verges
-legacy_packages/react-native-compat/ @jnsdls @joaquim-verges
-legacy_packages/sdk/ @joaquim-verges @jnsdls
-legacy_packages/storage/ @jnsdls @joaquim-verges
-legacy_packages/wallets/ @MananTank @jnsdls @joaquim-verges
-
-# legacy e2e
-
-legacy_e2e/ @jnsdls
-
 # packages
 packages/thirdweb/ @joaquim-verges @gregfromstl @jnsdls

 ## specific thirdweb pieces
-packages/thirdweb/src/react/ @joaquim-verges @gregfromstl @MananTank @jnsdls
+packages/thirdweb/src/react/ @joaquim-verges @gregfromstl @MananTank @jnsdls @edwardysun
 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
-packages/typedoc-gen/ @MananTank @jnsdls @joaquim-verges
+packages/thirdweb/src/pay/ @joaquim-verges @gregfromstl @MananTank @jnsdls @edwardysun
 packages/service-utils/ @arcoraven @jnsdls @joaquim-verges
 packages/eslint-config-thirdweb/ @jnsdls @joaquim-verges
 packages/tw-tsconfig/ @jnsdls @joaquim-verges
-packages/unity-js-bridge/ @joaquim-verges @0xFirekeeper @jnsdls

 # apps
 apps/ @jnsdls @joaquim-verges
@@ -5,9 +5,6 @@ dashboard:
 playground:
  - changed-files:
    - any-glob-to-any-file: "apps/playground-web/**/*"
-legacy_packages:
-  - changed-files:
-    - any-glob-to-any-file: "legacy-packages/**/*"
 packages:
  - changed-files:
    - any-glob-to-any-file: "packages/**/*"
@@ -1,113 +0,0 @@
-name: CI (Legacy Packages)
-
-on:
-  push:
-    branches: ["main"]
-    paths:
-      - "legacy_packages/**"
-      - "legacy_e2e/**"
-      - "package.json"
-  pull_request:
-    types: [opened, synchronize]
-    paths:
-      - "legacy_packages/**"
-      - "legacy_e2e/**"
-      - "package.json"
-  workflow_dispatch:
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: true
-
-  # To use Remote Caching, uncomment the next lines and follow the steps below.
-env:
-  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
-  TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
-  TW_SECRET_KEY: ${{ secrets.TW_SECRET_KEY }}
-  CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
-
-jobs:
-  optimize_ci:
-    runs-on: ubuntu-latest
-    outputs:
-      skip: ${{ steps.check_skip.outputs.skip }}
-    steps:
-      - name: Optimize CI
-        id: check_skip
-        uses: withgraphite/graphite-ci-action@main
-        with:
-          graphite_token: ${{ secrets.GRAPHITE_OMTIMIZE_TOKEN }}
-
-  build:
-    needs: optimize_ci
-    if: needs.optimize_ci.outputs.skip == 'false'
-    runs-on: ubuntu-latest
-    name: Build Packages
-    steps:
-      - name: Check out the code
-        uses: actions/checkout@v4
-
-      - name: Setup & Install
-        uses: ./.github/composite-actions/install
-
-      - name: Build Packages
-        run: pnpm build:legacy_packages
-
-  lint:
-    needs: optimize_ci
-    if: needs.optimize_ci.outputs.skip == 'false'
-    timeout-minutes: 15
-    name: Lint Packages
-    runs-on: ubuntu-latest
-    steps:
-      - name: Check out the code
-        uses: actions/checkout@v4
-
-      - name: Setup & Install
-        uses: ./.github/composite-actions/install
-
-      - run: pnpm lint:legacy
-
-  test:
-    needs: optimize_ci
-    if: needs.optimize_ci.outputs.skip == 'false'
-    timeout-minutes: 15
-    name: Unit Tests
-    runs-on: ubuntu-latest
-    steps:
-      - name: Check out the code
-        uses: actions/checkout@v4
-
-      - name: Setup & Install
-        uses: ./.github/composite-actions/install
-
-      - run: pnpm test:legacy
-
-      - name: Upload coverage reports to Codecov
-        uses: codecov/codecov-action@v4
-        with:
-          directory: legacy_packages/
-          flags: legacy_packages
-          verbose: true
-
-  e2e:
-    needs: optimize_ci
-    if: needs.optimize_ci.outputs.skip == 'false'
-    timeout-minutes: 15
-    name: E2E Tests
-    runs-on: ubuntu-latest
-    steps:
-      - name: Check out the code
-        uses: actions/checkout@v4
-
-      - name: Setup & Install
-        uses: ./.github/composite-actions/install
-
-      - name: Install Playwright
-        run: npx playwright install --with-deps
-
-      - name: Run e2e tests
-        run: pnpm e2e:legacy
-        env:
-          NODE_OPTIONS: "--max_old_space_size=4096"
-          CLI_E2E_API_KEY: ${{ secrets.CLI_E2E_API_KEY }}
@@ -8,7 +8,6 @@ on:
    paths:
      - ".changeset/**"
      - "packages/**"
-      - "legacy_packages/**"
    branches:
      - main

@@ -1,58 +0,0 @@
-name: Sync chains every hour
-
-on:
-  # temporarily disabled chain syncing
-  # schedule:
-    # - cron: "0 * * * *" # Runs every hour
-  workflow_dispatch: # Allows you to manually run the workflow from the Actions tab
-
-jobs:
-  sync-chains:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout Repository
-        uses: actions/checkout@v4
-
-      - name: Install bun
-        uses: oven-sh/setup-bun@v1
-        with:
-          bun-version: 1.0.35
-
-      - name: Run chains sync
-        run: bun run db:sync
-        working-directory: ./legacy_packages/chains
-
-      - name: Check for Changes
-        id: git-check
-        run: |
-          if git diff --quiet; then
-            echo "CHANGES_FOUND=false" >> $GITHUB_ENV
-          else
-            echo "CHANGES_FOUND=true" >> $GITHUB_ENV
-          fi
-
-      - name: Create or Update sync-chains.md
-        if: env.CHANGES_FOUND == 'true'
-        run: |
-          echo '---' > .changeset/sync-chains.md
-          echo '"@thirdweb-dev/chains": patch' >> .changeset/sync-chains.md
-          echo '---' >> .changeset/sync-chains.md
-          echo '' >> .changeset/sync-chains.md
-          echo 'Synced Chains Package' >> .changeset/sync-chains.md
-
-      - name: Commit Changes
-        if: env.CHANGES_FOUND == 'true'
-        run: |
-          git config --local user.email "41898282+github-actions[bot]@users.noreply.github.com"
-          git config --local user.name "github-actions[bot]"
-          git add -A
-          git commit -m "chore(chains): sync from db"
-
-      - name: Create or Update Pull Request
-        if: env.CHANGES_FOUND == 'true'
-        uses: peter-evans/create-pull-request@v6
-        with:
-          title: "chore(chains): update chains"
-          branch: "sync-chains"
-          body: "This PR was automatically created by a GitHub Action. It updates the chains package with the latest changes from the database."
-          commit-message: "chore(chains): sync from db"
@@ -10,7 +10,6 @@ dist-ssr
 .cache
 server/dist
 public/dist
-./legacy_packages/contracts-js/abis
 .idea/
 .yalc/
 yalc.lock
@@ -18,9 +17,6 @@ yalc.lock
 playwright-report/
 .env/

-# Artifacts
-legacy_packages/cli/artifacts/
-
 # codecov binary
 codecov

@@ -28,7 +24,6 @@ codecov
 sitemap*.xml

 # typedoc
-legacy_packages/*/typedoc/*
 packages/*/typedoc/*

 *storybook.log
@@ -1,6 +0,0 @@
---
-"@thirdweb-dev/cli": minor
-"thirdweb": minor
---
-
-Adds --expo option to cli
@@ -1,5 +0,0 @@
---
-"@thirdweb-dev/sdk": patch
---
-
-ZkCandy addresses
@@ -1,6 +0,0 @@
---
-"@thirdweb-dev/cli": patch
-"@thirdweb-dev/sdk": patch
---
-
-Override contract publish id on CLI
@@ -1,17 +0,0 @@
---
-"@thirdweb-dev/merkletree": patch
-"@thirdweb-dev/react-core": patch
-"@thirdweb-dev/payments": patch
-"@thirdweb-dev/storage": patch
-"@thirdweb-dev/wallets": patch
-"@thirdweb-dev/chains": patch
-"@thirdweb-dev/crypto": patch
-"@thirdweb-dev/service-utils": patch
-"@thirdweb-dev/react": patch
-"@thirdweb-dev/auth": patch
-"@thirdweb-dev/cli": patch
-"@thirdweb-dev/pay": patch
-"@thirdweb-dev/sdk": patch
---
-
-update dependencies
@@ -1,5 +0,0 @@
---
-"@thirdweb-dev/react": patch
---
-
-Fix error when doing buy with Crypto transaction with InApp wallet
@@ -1,5 +0,0 @@
---
-"@thirdweb-dev/sdk": patch
---
-
-Fix EIP155 check for create2 factory deployment
@@ -1,6 +0,0 @@
---
-"@thirdweb-dev/wallets": patch
-"@thirdweb-dev/sdk": patch
---
-
-respect gas overrides if they are passed in
@@ -1,5 +0,0 @@
---
-"@thirdweb-dev/react": patch
---
-
-Fix wallet app not opening when using ConnectButton inside an iframe
@@ -1,5 +0,0 @@
---
-"@thirdweb-dev/chains": patch
---
-
-Synced Chains Package
@@ -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=""
@@ -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,8 @@ module.exports = {
              "FormErrorMessage",
              "MenuGroup",
              "MenuItem",
+              "VStack",
+              "HStack",
              // also the types
              "ButtonProps",
              "BadgeProps",
@@ -98,7 +103,7 @@ module.exports = {
    ],
  },
  parser: "@typescript-eslint/parser",
-  plugins: ["@typescript-eslint", "import", "react-compiler"],
+  plugins: ["@typescript-eslint", "react-compiler"],
  parserOptions: {
    ecmaVersion: 2019,
    ecmaFeatures: {
@@ -115,31 +120,6 @@ module.exports = {
    },
  },
  overrides: [
-    {
-      files: "src/core-ui/**/*",
-      rules: {
-        // no restricted imports
-        "@typescript-eslint/no-restricted-imports": [
-          "error",
-          {
-            paths: [
-              {
-                name: "@thirdweb-dev/sdk",
-                message:
-                  "core-ui should not import from @thirdweb-dev/sdk. (except for types)",
-                allowTypeImports: true,
-              },
-              {
-                name: "@thirdweb-dev/react",
-                message:
-                  "core-ui should not import from @thirdweb-dev/react. (except for types)",
-                allowTypeImports: true,
-              },
-            ],
-          },
-        ],
-      },
-    },
    // disable restricted imports in tw-components
    {
      files: "src/tw-components/**/*",
@@ -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"
+          }
+        }
+      }
+    }
+  ]
 }
@@ -1,7 +1,8 @@
 {
  "$schema": "https://unpkg.com/knip@5/schema.json",
  "next": true,
-  "ignore": ["src/graphql/**", "src/theme/*"],
+  "ignore": ["src/@/components/ui/**"],
  "project": ["src/**"],
-  "ignoreBinaries": ["only-allow"]
+  "ignoreBinaries": ["only-allow", "biome"],
+  "ignoreDependencies": ["@storybook/blocks", "@thirdweb-dev/service-utils"]
 }
@@ -1,7 +1,6 @@
 // @ts-check
 /**
 *
- * @returns {Promise<import("@thirdweb-dev/chains").Chain[]>}
 */
 async function fetchChainsFromApi() {
  const res = await fetch(`https://api.thirdweb.com/v1/chains`, {
@@ -21,7 +20,6 @@ async function fetchChainsFromApi() {
 /**
 *
 * @param {number|string} chainIdOrSlug
- * @returns {Promise<import("@thirdweb-dev/chains").Chain>}
 */
 async function getSingleChain(chainIdOrSlug) {
  const res = await fetch(
@@ -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;
@@ -144,7 +144,6 @@ const moduleExports = {
  reactStrictMode: true,
  experimental: {
    scrollRestoration: true,
-    esmExternals: "loose",
    webpackBuildWorker: true,
    serverSourceMaps: false,
  },
@@ -4,15 +4,15 @@
  "private": true,
  "scripts": {
    "preinstall": "npx only-allow pnpm",
-    "dev": "next dev",
+    "dev": "next dev --turbo",
    "build": "next build",
    "start": "next start",
    "format": "biome format ./src --write",
-    "lint": "biome check ./src && eslint ./src",
-    "fix": "biome check ./src --fix && eslint ./src --fix",
+    "lint": "biome check ./src && knip && eslint ./src",
+    "fix": "biome check ./src --fix --unsafe && eslint ./src --fix",
+    "typecheck": "tsc --noEmit",
    "gen:theme-typings": "chakra-cli tokens src/theme/index.ts",
    "postinstall": "pnpm run gen:theme-typings",
-    "find:unused": "next-unused",
    "postbuild": "next-sitemap",
    "build:analyze": "ANALYZE=true pnpm run build",
    "knip": "knip",
@@ -45,20 +45,15 @@
    "@radix-ui/react-separator": "^1.1.0",
    "@radix-ui/react-slot": "^1.1.0",
    "@radix-ui/react-switch": "^1.1.0",
-    "@radix-ui/react-toggle": "^1.1.0",
-    "@radix-ui/react-toggle-group": "^1.1.0",
    "@radix-ui/react-tooltip": "1.1.2",
    "@react-icons/all-files": "^4.1.0",
    "@sentry/nextjs": "8.30.0",
    "@shazow/whatsabi": "^0.14.1",
    "@stripe/react-stripe-js": "^2.7.3",
    "@stripe/stripe-js": "^3.5.0",
-    "@tanstack/react-query": "^4.36.1",
+    "@tanstack/react-query": "5.56.2",
    "@tanstack/react-table": "^8.17.3",
-    "@thirdweb-dev/react": "workspace:*",
-    "@thirdweb-dev/sdk": "workspace:*",
    "@thirdweb-dev/service-utils": "workspace:*",
-    "@thirdweb-dev/storage": "workspace:*",
    "@vercel/og": "^0.6.2",
    "abitype": "1.0.5",
    "chakra-react-select": "^4.7.6",
@@ -67,23 +62,21 @@
    "color": "^4.2.3",
    "compare-versions": "^6.1.0",
    "date-fns": "^3.6.0",
-    "ethers": "5.7.2",
    "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.439.0",
-    "next": "14.2.9",
+    "lucide-react": "0.441.0",
+    "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",
@@ -97,7 +90,6 @@
    "react-intersection-observer": "^9.10.3",
    "react-markdown": "^9.0.1",
    "react-otp-input": "^3.1.1",
-    "react-query-v5": "npm:@tanstack/[email protected]",
    "react-responsive-carousel": "^3.2.23",
    "react-table": "^7.8.0",
    "recharts": "^2.12.7",
@@ -111,31 +103,29 @@
    "thirdweb": "workspace:*",
    "tiny-invariant": "^1.3.3",
    "use-debounce": "^10.0.1",
-    "vaul": "^0.9.1",
-    "zksync-ethers": "5.9.0",
    "zod": "3.23.8"
  },
  "devDependencies": {
    "@chakra-ui/cli": "^2.4.1",
-    "@chromatic-com/storybook": "^1.5.0",
-    "@next/bundle-analyzer": "14.2.9",
-    "@next/eslint-plugin-next": "^14.2.9",
-    "@playwright/test": "1.47.0",
-    "@storybook/addon-essentials": "^8.2.9",
-    "@storybook/addon-interactions": "^8.2.9",
-    "@storybook/addon-links": "^8.2.9",
-    "@storybook/addon-onboarding": "^8.2.9",
-    "@storybook/addon-viewport": "^8.2.9",
-    "@storybook/blocks": "^8.2.9",
-    "@storybook/nextjs": "^8.2.9",
-    "@storybook/react": "^8.2.9",
-    "@storybook/test": "^8.2.9",
+    "@chromatic-com/storybook": "2.0.2",
+    "@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",
@@ -145,40 +135,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.4",
    "next-sitemap": "^4.2.3",
-    "next-unused": "^0.0.6",
-    "storybook": "^8.2.9",
-    "tailwindcss": "^3.4.10",
+    "postcss": "8.4.47",
+    "storybook": "8.3.2",
+    "tailwindcss": "3.4.12",
    "typescript": "5.6.2"
-  },
-  "next-unused": {
-    "alias": {},
-    "include": [
-      "components",
-      "hooks",
-      "schema",
-      "theme",
-      "utils",
-      "@3rdweb-sdk",
-      "constants",
-      "tw-components",
-      "contract-ui"
-    ],
-    "exclude": [
-      "node_modules",
-      "types",
-      "tw-components"
-    ],
-    "entrypoints": []
-  },
-  "browserslist": [
-    "defaults",
-    "unreleased versions",
-    "not UCAndroid > 0"
-  ]
+  }
 }
@@ -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",
@@ -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>
@@ -3,10 +3,13 @@ import { Button } from "@/components/ui/button";
 import { useMutation } from "@tanstack/react-query";
 import { DownloadIcon } from "lucide-react";
 import { toast } from "sonner";
+import { cn } from "../../lib/utils";

 export function ExportToCSVButton(props: {
  getData: () => Promise<{ header: string[]; rows: string[][] }>;
  fileName: string;
+  disabled?: boolean;
+  className?: string;
 }) {
  const exportMutation = useMutation({
    mutationFn: async () => {
@@ -26,12 +29,13 @@ export function ExportToCSVButton(props: {
  return (
    <Button
      variant="outline"
-      className="border flex gap-2 items-center text-xs"
+      disabled={props.disabled}
+      className={cn("flex items-center gap-2 border text-xs", props.className)}
      onClick={async () => {
        exportMutation.mutate();
      }}
    >
-      {exportMutation.isLoading ? (
+      {exportMutation.isPending ? (
        <>
          Downloading
          <Spinner className="size-3" />
@@ -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>
+  );
+}
@@ -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}
@@ -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>
  );
 }
@@ -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 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>
@@ -14,7 +14,7 @@ export type SidebarLink = {
  };
 };

-export type SidebarContentProps = {
+type SidebarContentProps = {
  header?: React.ReactNode;
  links: SidebarLink[];
  className?: string;
@@ -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}
              >
@@ -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>
  );
 }
@@ -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>
@@ -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"
          >
@@ -19,7 +19,7 @@ import {
 } from "@/components/ui/chart";
 import { useMemo } from "react";

-export type ThirdwebAreaChartProps<TConfig extends ChartConfig> = {
+type ThirdwebAreaChartProps<TConfig extends ChartConfig> = {
  // metadata
  title: string;
  description?: string;
@@ -19,7 +19,7 @@ import {
 } from "@/components/ui/chart";
 import { useMemo } from "react";

-export type ThirdwebBarChartProps<TConfig extends ChartConfig> = {
+type ThirdwebBarChartProps<TConfig extends ChartConfig> = {
  // metadata
  title: string;
  description?: string;
@@ -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>
+  );
+}
@@ -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";
@@ -6,8 +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 { useMemo } from "react";
+import { type ThirdwebClient, isAddress } from "thirdweb";
 import { ZERO_ADDRESS } from "thirdweb";
 import {
  Blobbie,
@@ -16,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";
@@ -26,8 +28,10 @@ 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]);
+
  const [shortenedAddress, lessShortenedAddress] = useMemo(() => {
    return [
      props.shortenAddress !== false
@@ -42,17 +46,16 @@ export function WalletAddress(props: {
    client: thirdwebClient,
  });

-  const [isCopied, setIsCopied] = useState(false);
+  const { onCopy, hasCopied } = useClipboard(address, 2000);

-  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);
-    }
-  };
+  if (!isAddress(address)) {
+    return <span>Invalid Address ({address})</span>;
+  }
+
+  // special case for zero address
+  if (address === ZERO_ADDRESS) {
+    return <span className="cursor-pointer font-mono">{shortenedAddress}</span>;
+  }

  return (
    <HoverCard>
@@ -61,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>
@@ -82,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 &&
@@ -129,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>
                  )}
@@ -146,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
@@ -167,6 +174,7 @@ export function WalletAddress(props: {
 function WalletAvatar(props: {
  address: string;
  profiles: SocialProfile[];
+  thirdwebClient: ThirdwebClient;
 }) {
  const avatar = useMemo(() => {
    return props.profiles.find(
@@ -180,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"
        />
@@ -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"
@@ -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,
            )}
          >
@@ -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)}
          />
@@ -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>
@@ -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>
@@ -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}
@@ -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
@@ -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}
  />
 ));
@@ -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}
@@ -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"
@@ -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" />
@@ -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}
  />
 ));
@@ -113,6 +113,7 @@ const ChartTooltipContent = React.forwardRef<
      indicator?: "line" | "dot" | "dashed";
      nameKey?: string;
      labelKey?: string;
+      valueFormatter?: (v: unknown) => string | undefined;
    }
 >(
  (
@@ -130,6 +131,7 @@ const ChartTooltipContent = React.forwardRef<
      color,
      nameKey,
      labelKey,
+      valueFormatter,
    },
    ref,
  ) => {
@@ -231,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",
                      )}
                    >
@@ -242,8 +244,10 @@ const ChartTooltipContent = React.forwardRef<
                        </span>
                      </div>
                      {item.value && (
-                        <span className="font-mono font-medium tabular-nums text-foreground">
-                          {item.value}
+                        <span className="font-medium font-mono text-foreground tabular-nums">
+                          {valueFormatter
+                            ? valueFormatter(item.value) || item.value
+                            : item.value}
                        </span>
                      )}
                    </div>
@@ -283,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,
        )}
@@ -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,
      )}
    >
@@ -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 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}
  />
 ));
@@ -1,118 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { Drawer as DrawerPrimitive } from "vaul";
-
-import { cn } from "@/lib/utils";
-
-const Drawer = ({
-  shouldScaleBackground = true,
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
-  <DrawerPrimitive.Root
-    shouldScaleBackground={shouldScaleBackground}
-    {...props}
-  />
-);
-Drawer.displayName = "Drawer";
-
-const DrawerTrigger = DrawerPrimitive.Trigger;
-
-const DrawerPortal = DrawerPrimitive.Portal;
-
-const DrawerClose = DrawerPrimitive.Close;
-
-const DrawerOverlay = React.forwardRef<
-  React.ElementRef<typeof DrawerPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <DrawerPrimitive.Overlay
-    ref={ref}
-    className={cn("fixed inset-0 z-50 bg-black/80", className)}
-    {...props}
-  />
-));
-DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
-
-const DrawerContent = React.forwardRef<
-  React.ElementRef<typeof DrawerPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <DrawerPortal>
-    <DrawerOverlay />
-    <DrawerPrimitive.Content
-      ref={ref}
-      className={cn(
-        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
-        className,
-      )}
-      {...props}
-    >
-      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
-      {children}
-    </DrawerPrimitive.Content>
-  </DrawerPortal>
-));
-DrawerContent.displayName = "DrawerContent";
-
-const DrawerHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
-    {...props}
-  />
-);
-DrawerHeader.displayName = "DrawerHeader";
-
-const DrawerFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn("mt-auto flex flex-col gap-2 p-4", className)}
-    {...props}
-  />
-);
-DrawerFooter.displayName = "DrawerFooter";
-
-const DrawerTitle = React.forwardRef<
-  React.ElementRef<typeof DrawerPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <DrawerPrimitive.Title
-    ref={ref}
-    className={cn(
-      "text-lg font-semibold leading-none tracking-tight",
-      className,
-    )}
-    {...props}
-  />
-));
-DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
-
-const DrawerDescription = React.forwardRef<
-  React.ElementRef<typeof DrawerPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <DrawerPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-));
-DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
-
-export {
-  Drawer,
-  DrawerPortal,
-  DrawerOverlay,
-  DrawerTrigger,
-  DrawerClose,
-  DrawerContent,
-  DrawerHeader,
-  DrawerFooter,
-  DrawerTitle,
-  DrawerDescription,
-};
@@ -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,
    )}
@@ -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}
@@ -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}
@@ -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>
            </>
@@ -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}
@@ -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",
    )}
@@ -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}
@@ -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>
@@ -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>
@@ -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}
@@ -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,
+};
@@ -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,
      )}
    >
@@ -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>
@@ -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}
@@ -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>
@@ -1,61 +0,0 @@
-"use client";
-
-import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
-import type { VariantProps } from "class-variance-authority";
-import * as React from "react";
-
-import { toggleVariants } from "@/components/ui/toggle";
-import { cn } from "@/lib/utils";
-
-const ToggleGroupContext = React.createContext<
-  VariantProps<typeof toggleVariants>
->({
-  size: "default",
-  variant: "default",
-});
-
-const ToggleGroup = React.forwardRef<
-  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
-    VariantProps<typeof toggleVariants>
->(({ className, variant, size, children, ...props }, ref) => (
-  <ToggleGroupPrimitive.Root
-    ref={ref}
-    className={cn("flex items-center justify-center gap-1", className)}
-    {...props}
-  >
-    <ToggleGroupContext.Provider value={{ variant, size }}>
-      {children}
-    </ToggleGroupContext.Provider>
-  </ToggleGroupPrimitive.Root>
-));
-
-ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
-
-const ToggleGroupItem = React.forwardRef<
-  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
-    VariantProps<typeof toggleVariants>
->(({ className, children, variant, size, ...props }, ref) => {
-  const context = React.useContext(ToggleGroupContext);
-
-  return (
-    <ToggleGroupPrimitive.Item
-      ref={ref}
-      className={cn(
-        toggleVariants({
-          variant: context.variant || variant,
-          size: context.size || size,
-        }),
-        className,
-      )}
-      {...props}
-    >
-      {children}
-    </ToggleGroupPrimitive.Item>
-  );
-});
-
-ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
-
-export { ToggleGroup, ToggleGroupItem };
@@ -1,45 +0,0 @@
-"use client";
-
-import * as TogglePrimitive from "@radix-ui/react-toggle";
-import { type VariantProps, cva } from "class-variance-authority";
-import * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-const toggleVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
-  {
-    variants: {
-      variant: {
-        default: "bg-transparent",
-        outline:
-          "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
-      },
-      size: {
-        default: "h-10 px-3",
-        sm: "h-9 px-2.5",
-        lg: "h-11 px-5",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  },
-);
-
-const Toggle = React.forwardRef<
-  React.ElementRef<typeof TogglePrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
-    VariantProps<typeof toggleVariants>
->(({ className, variant, size, ...props }, ref) => (
-  <TogglePrimitive.Root
-    ref={ref}
-    className={cn(toggleVariants({ variant, size, className }))}
-    {...props}
-  />
-));
-
-Toggle.displayName = TogglePrimitive.Root.displayName;
-
-export { Toggle, toggleVariants };
@@ -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}
@@ -6,8 +6,8 @@ const LOGGED_IN_ONLY_PATHS = [
  // anything that _starts_ with /cli is logged in only
  "/cli",
  "/support",
-
-  // TODO: add any other logged in only paths here
+  // publish page
+  "/contracts/publish",
 ];

 export function isLoginRequired(pathname: string) {
@@ -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
- */
@@ -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;
+}
@@ -16,3 +16,7 @@ export const isProd =
  "production";

 export const PROD_OR_DEV_URL = isProd ? "thirdweb.com" : "thirdweb-dev.com";
+
+export const DASHBOARD_STORAGE_URL =
+  process.env.NEXT_PUBLIC_DASHBOARD_UPLOAD_SERVER ||
+  "https://storage.thirdweb.com";
@@ -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
+ */
@@ -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
+ */
@@ -15,7 +15,7 @@ import { createStore } from "./reactive";
 // Using useDashboardRouter instead of useRouter gives us a nice progress bar on top of the page when navigating using router.push or router.replace

 // using a store instead of context to avoid triggering re-renders on root component
-export const LoadingRouteHref = createStore<string | undefined>(undefined);
+const LoadingRouteHref = createStore<string | undefined>(undefined);

 export function useDashboardRouter() {
  const router = useRouter();
@@ -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}%`,
@@ -1,3 +1,5 @@
+import { useSyncExternalStore } from "react";
+
 export type Store<T> = {
  getValue(): T;
  setValue(newValue: T): 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);
+}
@@ -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 };
+}
@@ -27,7 +27,7 @@
    --muted-foreground: 0 0% 40%;
    --accent-foreground: 0 0% 9%;
    --destructive-foreground: 0 0% 100%;
-    --inverted-foreground: var(--background);
+    --inverted-foreground: 0 0% 100%;
    --link-foreground: 221.21deg 83.19% 53.33%;
    --success-text: 142.09 70.56% 35.29%;
    --warning-text: 38 92% 40%;
@@ -72,6 +72,7 @@
    --warning-text: 38 92% 50%;
    --destructive-text: 360 72% 55%;
    --success-text: 142 75% 50%;
+    --inverted-foreground: 0 0% 0%;

    /* Borders */
    --border: 0 0% 15%;
@@ -138,3 +139,25 @@
    scrollbar-width: none; /* Firefox */
  }
 }
+
+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;
+}
@@ -1,6 +1,3 @@
-import type { ContractType } from "constants/contracts";
-import { ZERO_ADDRESS } from "thirdweb";
-
 export const networkKeys = {
  all: ["network"] as const,
  chain: (chainId?: number) => [...networkKeys.all, chainId] as const,
@@ -107,59 +104,11 @@ export const engineKeys = {
    [...engineKeys.all, engineId, "systemMetrics"] as const,
  queueMetrics: (engineId: string) =>
    [...engineKeys.all, engineId, "queueMetrics"] as const,
-};

-export const contractKeys = {
-  all: ["contract"] as const,
-  lists: () => [...contractKeys.all, "list"] as const,
-  list: (address = ZERO_ADDRESS) => [...contractKeys.lists(), address] as const,
-  listWithFilters: (address = ZERO_ADDRESS, filters?: ContractType[]) =>
-    [...contractKeys.list(address), { filters }] as const,
-  details: () => [...contractKeys.all, "detail"] as const,
-  detail: (address: string = ZERO_ADDRESS) =>
-    [...contractKeys.details(), address] as const,
-};
-
-export const walletKeys = {
-  all: ["balance"] as const,
-  balances: (walletAddress: string) =>
-    [...splitsKeys.all, walletAddress] 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,
 };
@@ -2,25 +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 } 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";

@@ -29,48 +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 favChainsQuery = useFavoriteChains();
-  const setIsNetworkConfigModalOpen = useSetIsNetworkConfigModalOpen();
-  const allChains = useMemo(() => {
-    return allv4Chains.map(mapV4ChainToV5Chain);
-  }, [allv4Chains]);

-  const chainSections = useMemo(() => {
+  const { theme } = useTheme();
+  const t = theme === "light" ? "light" : "dark";
+
+  // chains
+  const favChainIdsQuery = useFavoriteChainIds();
+  const recentChainIds = useStore(recentlyUsedChainIdsStore);
+  const { idToChain, allChains } = useAllChainsData();
+
+  const allChainsWithMetadata = useMemo(
+    () => allChains.map(mapV4ChainToV5Chain),
+    [allChains],
+  );
+
+  const recentlyUsedChainsWithMetadata = useMemo(
+    () =>
+      recentChainIds
+        .map((id) => {
+          const c = idToChain.get(id);
+          // eslint-disable-next-line no-restricted-syntax
+          return c ? mapV4ChainToV5Chain(c) : undefined;
+        })
+        .filter((x) => !!x),
+    [recentChainIds, idToChain],
+  );
+
+  const favoriteChainsWithMetadata = useMemo(() => {
+    return (favChainIdsQuery.data || [])
+      .map((id) => {
+        const c = idToChain.get(Number(id));
+        // eslint-disable-next-line no-restricted-syntax
+        return c ? mapV4ChainToV5Chain(c) : undefined;
+      })
+      .filter((x) => !!x);
+  }, [idToChain, favChainIdsQuery.data]);
+
+  const popularChainsWithMetadata = useMemo(() => {
+    // eslint-disable-next-line no-restricted-syntax
+    return popularChains.map((x) =>
+      // eslint-disable-next-line no-restricted-syntax
+      {
+        const v4Chain = idToChain.get(x.id);
+        // eslint-disable-next-line no-restricted-syntax
+        return v4Chain ? mapV4ChainToV5Chain(v4Chain) : x;
+      },
+    );
+  }, [idToChain]);
+
+  // Network Config Modal
+  const [isNetworkConfigModalOpen, setIsNetworkConfigModalOpen] =
+    useState(false);
+  const [editChain, setEditChain] = useState<StoredChain | undefined>(
+    undefined,
+  );
+
+  const chainSections: NetworkSelectorProps["sections"] = useMemo(() => {
    return [
      {
        label: "Favorites",
-        chains: favChainsQuery.data.map(mapV4ChainToV5Chain),
-      },
-      {
-        label: "Popular",
-        chains: popularChains,
+        chains: favoriteChainsWithMetadata,
      },
      {
        label: "Recent",
-        chains: recentChainsv4.map(mapV4ChainToV5Chain),
+        chains: recentlyUsedChainsWithMetadata,
+      },
+      {
+        label: "Popular",
+        chains: popularChainsWithMetadata,
      },
    ];
-  }, [recentChainsv4, favChainsQuery.data]);
+  }, [
+    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} />
      </>
    );
@@ -86,61 +141,80 @@ 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}
+      />
+    </>
  );
 };

-export function ConnectWalletWelcomeScreen(props: {
+function ConnectWalletWelcomeScreen(props: {
  theme: "light" | "dark";
  subtitle?: string;
 }) {
@@ -153,7 +227,7 @@ export 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>
@@ -174,7 +248,7 @@ export 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,
            }}
@@ -185,7 +259,7 @@ export 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,
            }}
@@ -196,7 +270,7 @@ export 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"
@@ -214,6 +288,7 @@ export function ConnectWalletWelcomeScreen(props: {
 export function useCustomConnectModal() {
  const { connect } = useConnectModal();
  const { theme } = useTheme();
+  const thirdwebClient = useThirdwebClient();

  return useCallback(
    (options?: { chain?: Chain }) => {
@@ -236,7 +311,7 @@ export function useCustomConnectModal() {
        theme: getSDKTheme(theme === "light" ? "light" : "dark"),
      });
    },
-    [connect, theme],
+    [connect, theme, thirdwebClient],
  );
 }

@@ -1,3 +1,2 @@
 export * from "./useActiveChainId";
-export * from "./useCommon";
 export * from "./useWalletNFTs";
@@ -39,7 +39,11 @@ export function useQueryWithNetwork<
    networkKeys.chain(activeChainId) as readonly unknown[]
  ).concat(queryKey) as unknown as TQueryKey;

-  return useQuery(combinedQueryKey, queryFn, mergedOptions);
+  return useQuery({
+    ...mergedOptions,
+    queryKey: combinedQueryKey,
+    queryFn,
+  });
 }
 export function useMutationWithInvalidate<
  TData = unknown,
@@ -71,19 +75,20 @@ export function useMutationWithInvalidate<
    (cacheKeysToInvalidate: TQueryKey[]) => {
      return Promise.all(
        cacheKeysToInvalidate.map((cacheKey) => {
-          return queryClient.invalidateQueries(
-            (networkKeys.chain(activeChainId) as readonly unknown[]).concat(
-              cacheKey,
-            ) as unknown[],
-          );
+          return queryClient.invalidateQueries({
+            queryKey: (
+              networkKeys.chain(activeChainId) as readonly unknown[]
+            ).concat(cacheKey) as unknown[],
+          });
        }),
      );
    },
    [queryClient, activeChainId],
  );

-  return useMutation(mutationFn, {
+  return useMutation({
    ...options,
+    mutationFn,
    onSuccess: (...args) => {
      if (options?.onSuccess) {
        options.onSuccess(...args, invalidate);
@@ -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,
 );
@@ -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";
@@ -172,7 +171,7 @@ interface UpdateKeyServiceInput {
  actions?: string[];
 }

-interface CreateKeyInput {
+export interface CreateKeyInput {
  name?: string;
  domains?: string[];
  bundleIds?: string[];
@@ -254,15 +253,16 @@ export interface BillingCredit {
 interface UseAccountInput {
  refetchInterval?:
    | number
+    | false
    | ((
-        data: Account | undefined,
        query: Query<
          Account,
-          unknown,
+          Error,
          Account,
          readonly ["account", string, "me"]
        >,
-      ) => number | false);
+      ) => number | false | undefined)
+    | undefined;
 }

 export function useAccount({ refetchInterval }: UseAccountInput = {}) {
@@ -286,7 +286,7 @@ export function useAccount({ refetchInterval }: UseAccountInput = {}) {
      return json.data as Account;
    },
    enabled: !!user?.address && isLoggedIn,
-    refetchInterval: refetchInterval ?? false,
+    refetchInterval,
  });
 }

@@ -444,8 +444,8 @@ export function useUpdateAccount() {
  const { user } = useLoggedInUser();
  const queryClient = useQueryClient();

-  return useMutationWithInvalidate(
-    async (input: UpdateAccountInput) => {
+  return useMutation({
+    mutationFn: async (input: UpdateAccountInput) => {
      invariant(user?.address, "walletAddress is required");

      const res = await fetch(`${THIRDWEB_API_HOST}/v1/account`, {
@@ -465,14 +465,13 @@ export function useUpdateAccount() {

      return json.data;
    },
-    {
-      onSuccess: () => {
-        return queryClient.invalidateQueries(
-          accountKeys.me(user?.address as string),
-        );
-      },
+
+    onSuccess: () => {
+      return queryClient.invalidateQueries({
+        queryKey: accountKeys.me(user?.address as string),
+      });
    },
-  );
+  });
 }

 export function useUpdateAccountPlan(waitForWebhook?: boolean) {
@@ -507,13 +506,15 @@ export function useUpdateAccountPlan(waitForWebhook?: boolean) {
      return json.data;
    },
    {
-      onSuccess: () => {
+      onSuccess: async () => {
        // invalidate usage data as limits are different
-        queryClient.invalidateQueries(accountKeys.me(user?.address as string));
+        await queryClient.invalidateQueries({
+          queryKey: accountKeys.me(user?.address as string),
+        });

-        return queryClient.invalidateQueries(
-          accountKeys.usage(user?.address as string),
-        );
+        return queryClient.invalidateQueries({
+          queryKey: accountKeys.usage(user?.address as string),
+        });
      },
    },
  );
@@ -545,9 +546,9 @@ export function useUpdateNotifications() {
    },
    {
      onSuccess: () => {
-        return queryClient.invalidateQueries(
-          accountKeys.me(user?.address as string),
-        );
+        return queryClient.invalidateQueries({
+          queryKey: accountKeys.me(user?.address as string),
+        });
      },
    },
  );
@@ -608,16 +609,19 @@ export function useConfirmEmail() {
      return json.data;
    },
    {
-      onSuccess: () => {
+      onSuccess: async () => {
        // invalidate related cache, since could be relinking account
-        queryClient.invalidateQueries(apiKeys.keys(user?.address as string));
-        queryClient.invalidateQueries(
-          accountKeys.usage(user?.address as string),
-        );
-
-        return queryClient.invalidateQueries(
-          accountKeys.me(user?.address as string),
-        );
+        return Promise.all([
+          queryClient.invalidateQueries({
+            queryKey: apiKeys.keys(user?.address as string),
+          }),
+          queryClient.invalidateQueries({
+            queryKey: accountKeys.usage(user?.address as string),
+          }),
+          queryClient.invalidateQueries({
+            queryKey: accountKeys.me(user?.address as string),
+          }),
+        ]);
      },
    },
  );
@@ -652,9 +656,9 @@ export function useResendEmailConfirmation() {
    },
    {
      onSuccess: () => {
-        return queryClient.invalidateQueries(
-          accountKeys.me(user?.address as string),
-        );
+        return queryClient.invalidateQueries({
+          queryKey: accountKeys.me(user?.address as string),
+        });
      },
    },
  );
@@ -688,9 +692,9 @@ export function useCreatePaymentMethod() {
    },
    {
      onSuccess: () => {
-        return queryClient.invalidateQueries(
-          accountKeys.me(user?.address as string),
-        );
+        return queryClient.invalidateQueries({
+          queryKey: accountKeys.me(user?.address as string),
+        });
      },
    },
  );
@@ -723,8 +727,8 @@ export function useCreateApiKey() {
  const { user } = useLoggedInUser();
  const queryClient = useQueryClient();

-  return useMutation(
-    async (input: CreateKeyInput) => {
+  return useMutation({
+    mutationFn: async (input: CreateKeyInput) => {
      invariant(user?.address, "walletAddress is required");

      const res = await fetch(`${THIRDWEB_API_HOST}/v1/keys`, {
@@ -743,14 +747,13 @@ export function useCreateApiKey() {

      return json.data as ApiKey;
    },
-    {
-      onSuccess: () => {
-        return queryClient.invalidateQueries(
-          apiKeys.keys(user?.address as string),
-        );
-      },
+
+    onSuccess: () => {
+      return queryClient.invalidateQueries({
+        queryKey: apiKeys.keys(user?.address as string),
+      });
    },
-  );
+  });
 }

 export function useUpdateApiKey() {
@@ -780,9 +783,9 @@ export function useUpdateApiKey() {
    },
    {
      onSuccess: () => {
-        return queryClient.invalidateQueries(
-          apiKeys.keys(user?.address as string),
-        );
+        return queryClient.invalidateQueries({
+          queryKey: apiKeys.keys(user?.address as string),
+        });
      },
    },
  );
@@ -814,9 +817,9 @@ export function useRevokeApiKey() {
    },
    {
      onSuccess: () => {
-        return queryClient.invalidateQueries(
-          apiKeys.keys(user?.address as string),
-        );
+        return queryClient.invalidateQueries({
+          queryKey: apiKeys.keys(user?.address as string),
+        });
      },
    },
  );
@@ -869,41 +872,14 @@ export const useUpdatePolicies = () => {
    },
    {
      onSuccess: (_, variables) => {
-        return queryClient.invalidateQueries(["policies", variables.serviceId]);
+        return queryClient.invalidateQueries({
+          queryKey: ["policies", variables.serviceId],
+        });
      },
    },
  );
 };

-export function useAuthorizeWalletWithAccount() {
-  const { user } = useLoggedInUser();
-
-  return useMutationWithInvalidate(
-    async (variables: { token: string; deviceName?: string }) => {
-      invariant(user?.address, "walletAddress is required");
-
-      const res = await fetch(`${THIRDWEB_API_HOST}/v1/jwt/authorize-wallet`, {
-        method: "POST",
-
-        headers: {
-          "Content-Type": "application/json",
-          authorization: `Bearer ${variables.token}`,
-        },
-        body: JSON.stringify({
-          deviceName: variables.deviceName,
-        }),
-      });
-      const json = await res.json();
-
-      if (json.error) {
-        throw new Error(json.error.message);
-      }
-
-      return json.data;
-    },
-  );
-}
-
 export function useRevokeAuthorizedWallet() {
  const { user } = useLoggedInUser();
  const queryClient = useQueryClient();
@@ -935,9 +911,11 @@ export function useRevokeAuthorizedWallet() {
    },
    {
      onSuccess: () => {
-        return queryClient.invalidateQueries(
-          authorizedWallets.authorizedWallets(user?.address as string),
-        );
+        return queryClient.invalidateQueries({
+          queryKey: authorizedWallets.authorizedWallets(
+            user?.address as string,
+          ),
+        });
      },
    },
  );
@@ -965,31 +943,6 @@ export function useAuthorizedWallets() {
      return json.data as AuthorizedWallet[];
    },
    enabled: !!user?.address && isLoggedIn,
-    cacheTime: 0,
-  });
-}
-
-/**
- *
- */
-export async function fetchChainsFromApi() {
-  // always fetch from prod for chains for now
-  // TODO: re-visit this
-  const res = await fetch("https://api.thirdweb.com/v1/chains");
-  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();
-    },
+    gcTime: 0,
  });
 }
@@ -1,45 +0,0 @@
-export function usePascalCaseContractName(contractName: string) {
-  if (!contractName) {
-    return null;
-  }
-  if (contractName === "nft-drop") {
-    return "NFTDrop";
-  }
-  if (contractName === "edition-drop") {
-    return "EditionDrop";
-  }
-  if (contractName === "nft-collection") {
-    return "NFTCollection";
-  }
-  if (contractName === "edition") {
-    return "Edition";
-  }
-  if (contractName === "token") {
-    return "Token";
-  }
-  if (contractName === "marketplace") {
-    return "Marketplace";
-  }
-  if (contractName === "vote") {
-    return "Vote";
-  }
-  if (contractName === "split") {
-    return "Split";
-  }
-  if (contractName === "token-drop") {
-    return "TokenDrop";
-  }
-  if (contractName === "signature-drop") {
-    return "SignatureDrop";
-  }
-  if (contractName === "pack") {
-    return "Pack";
-  }
-  if (contractName === "multiwrap") {
-    return "Multiwrap";
-  }
-  if (contractName === "marketplace-v3") {
-    return "MarketplaceV3";
-  }
-  return contractName;
-}
@@ -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({
@@ -8,12 +8,6 @@ import { engineKeys } from "../cache-keys";
 import { useMutationWithInvalidate } from "./query/useQueryWithNetwork";
 import { useLoggedInUser } from "./useLoggedInUser";

-export function useEngineConnectedInstance() {
-  const [instance, setInstance] = useState<EngineInstance | null>(null);
-
-  return { instance, setInstance };
-}
-
 export type EngineTier = "STARTER" | "PREMIUM" | "ENTERPRISE";

 // Engine instances
@@ -116,7 +110,7 @@ export function useEngineBackendWallets(instance: string) {
  });
 }

-export interface EngineSystemHealth {
+interface EngineSystemHealth {
  status: string;
  engineVersion?: string;
  features?: string[];
@@ -143,7 +137,7 @@ export function useEngineSystemHealth(
  });
 }

-export interface EngineSystemQueueMetrics {
+interface EngineSystemQueueMetrics {
  result: {
    queued: number;
    pending: number;
@@ -197,24 +191,26 @@ interface UpdateVersionInput {
 }

 export function useEngineUpdateVersion() {
-  return useMutation(async (input: UpdateVersionInput) => {
-    invariant(input.engineId, "engineId is required");
+  return useMutation({
+    mutationFn: async (input: UpdateVersionInput) => {
+      invariant(input.engineId, "engineId is required");

-    const res = await fetch(`${THIRDWEB_API_HOST}/v1/engine/update-version`, {
-      method: "POST",
+      const res = await fetch(`${THIRDWEB_API_HOST}/v1/engine/update-version`, {
+        method: "POST",

-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify({
-        engineId: input.engineId,
-      }),
-    });
-    // we never use the response body
-    res.body?.cancel();
-    if (!res.ok) {
-      throw new Error(`Unexpected status ${res.status}: ${await res.text()}`);
-    }
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          engineId: input.engineId,
+        }),
+      });
+      // we never use the response body
+      res.body?.cancel();
+      if (!res.ok) {
+        throw new Error(`Unexpected status ${res.status}: ${await res.text()}`);
+      }
+    },
  });
 }

@@ -222,8 +218,8 @@ export function useEngineRemoveFromDashboard() {
  const { user } = useLoggedInUser();
  const queryClient = useQueryClient();

-  return useMutation(
-    async (instanceId: string) => {
+  return useMutation({
+    mutationFn: async (instanceId: string) => {
      invariant(instanceId, "instance is required");

      const res = await fetch(`${THIRDWEB_API_HOST}/v1/engine/${instanceId}`, {
@@ -235,14 +231,13 @@ export function useEngineRemoveFromDashboard() {
        throw new Error(`Unexpected status ${res.status}: ${await res.text()}`);
      }
    },
-    {
-      onSuccess: () => {
-        return queryClient.invalidateQueries(
-          engineKeys.instances(user?.address as string),
-        );
-      },
+
+    onSuccess: () => {
+      return queryClient.invalidateQueries({
+        queryKey: engineKeys.instances(user?.address as string),
+      });
    },
-  );
+  });
 }

 export interface RemoveCloudHostedInput {
@@ -255,8 +250,12 @@ export function useEngineRemoveCloudHosted() {
  const { user } = useLoggedInUser();
  const queryClient = useQueryClient();

-  return useMutation(
-    async ({ instanceId, reason, feedback }: RemoveCloudHostedInput) => {
+  return useMutation({
+    mutationFn: async ({
+      instanceId,
+      reason,
+      feedback,
+    }: RemoveCloudHostedInput) => {
      const res = await fetch(
        `${THIRDWEB_API_HOST}/v1/engine/${instanceId}/remove-cloud-hosted`,
        {
@@ -274,14 +273,13 @@ export function useEngineRemoveCloudHosted() {
        throw new Error(`Unexpected status ${res.status}: ${await res.text()}`);
      }
    },
-    {
-      onSuccess: () => {
-        return queryClient.invalidateQueries(
-          engineKeys.instances(user?.address as string),
-        );
-      },
+
+    onSuccess: () => {
+      return queryClient.invalidateQueries({
+        queryKey: engineKeys.instances(user?.address as string),
+      });
    },
-  );
+  });
 }

 export interface EditEngineInstanceInput {
@@ -294,8 +292,8 @@ export function useEngineEditInstance() {
  const { user } = useLoggedInUser();
  const queryClient = useQueryClient();

-  return useMutation(
-    async ({ instanceId, name, url }: EditEngineInstanceInput) => {
+  return useMutation({
+    mutationFn: async ({ instanceId, name, url }: EditEngineInstanceInput) => {
      const res = await fetch(`${THIRDWEB_API_HOST}/v1/engine/${instanceId}`, {
        method: "PUT",

@@ -310,14 +308,13 @@ export function useEngineEditInstance() {
        throw new Error(`Unexpected status ${res.status}: ${await res.text()}`);
      }
    },
-    {
-      onSuccess: () => {
-        return queryClient.invalidateQueries(
-          engineKeys.instances(user?.address as string),
-        );
-      },
+
+    onSuccess: () => {
+      return queryClient.invalidateQueries({
+        queryKey: engineKeys.instances(user?.address as string),
+      });
    },
-  );
+  });
 }

 export type Transaction = {
@@ -592,7 +589,9 @@ export function useEngineAddKeypair(instance: string) {
    },
    {
      onSuccess: () => {
-        return queryClient.invalidateQueries(engineKeys.keypairs(instance));
+        return queryClient.invalidateQueries({
+          queryKey: engineKeys.keypairs(instance),
+        });
      },
    },
  );
@@ -625,7 +624,9 @@ export function useEngineRemoveKeypair(instance: string) {
    },
    {
      onSuccess: () => {
-        return queryClient.invalidateQueries(engineKeys.keypairs(instance));
+        return queryClient.invalidateQueries({
+          queryKey: engineKeys.keypairs(instance),
+        });
      },
    },
  );
@@ -690,7 +691,9 @@ export function useEngineCreateRelayer(instance: string) {
    },
    {
      onSuccess: () => {
-        return queryClient.invalidateQueries(engineKeys.relayers(instance));
+        return queryClient.invalidateQueries({
+          queryKey: engineKeys.relayers(instance),
+        });
      },
    },
  );
@@ -723,7 +726,9 @@ export function useEngineRevokeRelayer(instance: string) {
    },
    {
      onSuccess: () => {
-        return queryClient.invalidateQueries(engineKeys.relayers(instance));
+        return queryClient.invalidateQueries({
+          queryKey: engineKeys.relayers(instance),
+        });
      },
    },
  );
@@ -761,7 +766,9 @@ export function useEngineUpdateRelayer(instance: string) {
    },
    {
      onSuccess: () => {
-        return queryClient.invalidateQueries(engineKeys.relayers(instance));
+        return queryClient.invalidateQueries({
+          queryKey: engineKeys.relayers(instance),
+        });
      },
    },
  );
@@ -839,7 +846,9 @@ export function useEngineSetWalletConfig(instance: string) {
    },
    {
      onSuccess: () => {
-        return queryClient.invalidateQueries(engineKeys.walletConfig(instance));
+        return queryClient.invalidateQueries({
+          queryKey: engineKeys.walletConfig(instance),
+        });
      },
    },
  );
@@ -872,9 +881,9 @@ export function useEngineCreateBackendWallet(instance: string) {
    },
    {
      onSuccess: () => {
-        return queryClient.invalidateQueries(
-          engineKeys.backendWallets(instance),
-        );
+        return queryClient.invalidateQueries({
+          queryKey: engineKeys.backendWallets(instance),
+        });
      },
    },
  );
@@ -908,9 +917,9 @@ export function useEngineUpdateBackendWallet(instance: string) {
    },
    {
      onSuccess: () => {
-        return queryClient.invalidateQueries(
-          engineKeys.backendWallets(instance),
-        );
+        return queryClient.invalidateQueries({
+          queryKey: engineKeys.backendWallets(instance),
+        });
      },
    },
  );
@@ -959,9 +968,9 @@ export function useEngineImportBackendWallet(instance: string) {
    },
    {
      onSuccess: () => {
-        return queryClient.invalidateQueries(
-          engineKeys.backendWallets(instance),
-        );
+        return queryClient.invalidateQueries({
+          queryKey: engineKeys.backendWallets(instance),
+        });
      },
    },
  );
@@ -990,7 +999,9 @@ export function useEngineGrantPermissions(instance: string) {
    },
    {
      onSuccess: () => {
-        return queryClient.invalidateQueries(engineKeys.permissions(instance));
+        return queryClient.invalidateQueries({
+          queryKey: engineKeys.permissions(instance),
+        });
      },
    },
  );
@@ -1023,7 +1034,9 @@ export function useEngineRevokePermissions(instance: string) {
    },
    {
      onSuccess: () => {
-        return queryClient.invalidateQueries(engineKeys.permissions(instance));
+        return queryClient.invalidateQueries({
+          queryKey: engineKeys.permissions(instance),
+        });
      },
    },
  );
@@ -1056,7 +1069,9 @@ export function useEngineCreateAccessToken(instance: string) {
    },
    {
      onSuccess: () => {
-        return queryClient.invalidateQueries(engineKeys.accessTokens(instance));
+        return queryClient.invalidateQueries({
+          queryKey: engineKeys.accessTokens(instance),
+        });
      },
    },
  );
@@ -1089,7 +1104,9 @@ export function useEngineRevokeAccessToken(instance: string) {
    },
    {
      onSuccess: () => {
-        return queryClient.invalidateQueries(engineKeys.accessTokens(instance));
+        return queryClient.invalidateQueries({
+          queryKey: engineKeys.accessTokens(instance),
+        });
      },
    },
  );
@@ -1123,7 +1140,9 @@ export function useEngineUpdateAccessToken(instance: string) {
    },
    {
      onSuccess: () => {
-        return queryClient.invalidateQueries(engineKeys.accessTokens(instance));
+        return queryClient.invalidateQueries({
+          queryKey: engineKeys.accessTokens(instance),
+        });
      },
    },
  );
@@ -1158,7 +1177,9 @@ export function useEngineCreateWebhook(instance: string) {
    },
    {
      onSuccess: () => {
-        return queryClient.invalidateQueries(engineKeys.webhooks(instance));
+        return queryClient.invalidateQueries({
+          queryKey: engineKeys.webhooks(instance),
+        });
      },
    },
  );
@@ -1191,7 +1212,9 @@ export function useEngineRevokeWebhook(instance: string) {
    },
    {
      onSuccess: () => {
-        return queryClient.invalidateQueries(engineKeys.webhooks(instance));
+        return queryClient.invalidateQueries({
+          queryKey: engineKeys.webhooks(instance),
+        });
      },
    },
  );
@@ -1208,31 +1231,33 @@ type SendTokensInput = {
 export function useEngineSendTokens(instance: string) {
  const token = useLoggedInUser().user?.jwt ?? null;

-  return useMutation(async (input: SendTokensInput) => {
-    invariant(instance, "instance is required");
+  return useMutation({
+    mutationFn: async (input: SendTokensInput) => {
+      invariant(instance, "instance is required");

-    const res = await fetch(
-      `${instance}backend-wallet/${input.chainId}/transfer`,
-      {
-        method: "POST",
-        headers: {
-          ...getEngineRequestHeaders(token),
-          "x-backend-wallet-address": input.fromAddress,
+      const res = await fetch(
+        `${instance}backend-wallet/${input.chainId}/transfer`,
+        {
+          method: "POST",
+          headers: {
+            ...getEngineRequestHeaders(token),
+            "x-backend-wallet-address": input.fromAddress,
+          },
+          body: JSON.stringify({
+            to: input.toAddress,
+            amount: input.amount.toString(),
+            currencyAddress: input.currencyAddress,
+          }),
        },
-        body: JSON.stringify({
-          to: input.toAddress,
-          amount: input.amount.toString(),
-          currencyAddress: input.currencyAddress,
-        }),
-      },
-    );
-    const json = await res.json();
+      );
+      const json = await res.json();

-    if (json.error) {
-      throw new Error(json.error.message);
-    }
+      if (json.error) {
+        throw new Error(json.error.message);
+      }

-    return json.result;
+      return json.result;
+    },
  });
 }

@@ -1263,8 +1288,8 @@ export function useEngineSetCorsConfiguration(instance: string) {
  const queryClient = useQueryClient();
  const token = useLoggedInUser().user?.jwt ?? null;

-  return useMutation(
-    async (input: SetCorsUrlInput) => {
+  return useMutation({
+    mutationFn: async (input: SetCorsUrlInput) => {
      invariant(instance, "instance is required");

      const res = await fetch(`${instance}configuration/cors`, {
@@ -1280,12 +1305,13 @@ export function useEngineSetCorsConfiguration(instance: string) {

      return json.result;
    },
-    {
-      onSuccess: () => {
-        return queryClient.invalidateQueries(engineKeys.corsUrls(instance));
-      },
+
+    onSuccess: () => {
+      return queryClient.invalidateQueries({
+        queryKey: engineKeys.corsUrls(instance),
+      });
    },
-  );
+  });
 }

 export function useEngineIpAllowlistConfiguration(instance: string) {
@@ -1320,8 +1346,8 @@ export function useEngineSetIpAllowlistConfiguration(instance: string) {
  const queryClient = useQueryClient();
  const token = useLoggedInUser().user?.jwt ?? null;

-  return useMutation(
-    async (input: SetIpAllowlistInput) => {
+  return useMutation({
+    mutationFn: async (input: SetIpAllowlistInput) => {
      invariant(instance, "instance is required");

      const res = await fetch(`${instance}configuration/ip-allowlist`, {
@@ -1337,12 +1363,13 @@ export function useEngineSetIpAllowlistConfiguration(instance: string) {

      return json.result;
    },
-    {
-      onSuccess: () => {
-        return queryClient.invalidateQueries(engineKeys.ipAllowlist(instance));
-      },
+
+    onSuccess: () => {
+      return queryClient.invalidateQueries({
+        queryKey: engineKeys.ipAllowlist(instance),
+      });
    },
-  );
+  });
 }

 export interface EngineContractSubscription {
@@ -1392,8 +1419,8 @@ export function useEngineAddContractSubscription(instance: string) {
  const queryClient = useQueryClient();
  const token = useLoggedInUser().user?.jwt ?? null;

-  return useMutation(
-    async (input: AddContractSubscriptionInput) => {
+  return useMutation({
+    mutationFn: async (input: AddContractSubscriptionInput) => {
      invariant(instance, "instance is required");

      const res = await fetch(`${instance}contract-subscriptions/add`, {
@@ -1409,17 +1436,16 @@ export function useEngineAddContractSubscription(instance: string) {

      return json.result;
    },
-    {
-      onSuccess: () => {
-        return queryClient.invalidateQueries(
-          engineKeys.contractSubscriptions(instance),
-        );
-      },
+
+    onSuccess: () => {
+      return queryClient.invalidateQueries({
+        queryKey: engineKeys.contractSubscriptions(instance),
+      });
    },
-  );
+  });
 }

-export interface RemoveContractSubscriptionInput {
+interface RemoveContractSubscriptionInput {
  contractSubscriptionId: string;
 }

@@ -1427,8 +1453,8 @@ export function useEngineRemoveContractSubscription(instance: string) {
  const queryClient = useQueryClient();
  const token = useLoggedInUser().user?.jwt ?? null;

-  return useMutation(
-    async (input: RemoveContractSubscriptionInput) => {
+  return useMutation({
+    mutationFn: async (input: RemoveContractSubscriptionInput) => {
      invariant(instance, "instance is required");

      const res = await fetch(`${instance}contract-subscriptions/remove`, {
@@ -1444,14 +1470,13 @@ export function useEngineRemoveContractSubscription(instance: string) {

      return json.result;
    },
-    {
-      onSuccess: () => {
-        return queryClient.invalidateQueries(
-          engineKeys.contractSubscriptions(instance),
-        );
-      },
+
+    onSuccess: () => {
+      return queryClient.invalidateQueries({
+        queryKey: engineKeys.contractSubscriptions(instance),
+      });
    },
-  );
+  });
 }

 export function useEngineSubscriptionsLastBlock(
@@ -1481,7 +1506,7 @@ export function useEngineSubscriptionsLastBlock(
  });
 }

-export interface EngineResourceMetrics {
+interface EngineResourceMetrics {
  error: string;
  data: {
    cpu: number;
@@ -1514,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),
+        });
+      },
+    },
+  );
+}
@@ -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,
-  };
-}
@@ -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 { 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
@@ -63,24 +69,20 @@ export function useLoggedInUser(): {

      return (await res.json()) as EnsureLoginResponse;
    },
-    onSuccess: (data) => {
-      if (data.redirectTo) {
-        router.replace(data.redirectTo);
-      }
-      if (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 = data.jwt;
-      } else {
-        window.TW_AUTH_TOKEN = undefined;
-      }
-    },
  });

+  // legit use-case for now
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    if (query.data?.redirectTo) {
+      router.replace(query.data.redirectTo);
+    }
+  }, [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,
    };
@@ -89,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,
    };
@@ -98,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,
    };
@@ -107,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,
    };
@@ -116,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 },
    };
@@ -124,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 }
@@ -8,14 +8,13 @@ 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";
 import { useActiveAccount } from "thirdweb/react";
 import invariant from "tiny-invariant";

-function useMultiChainRegContractList(walletAddress?: string) {
+export function useMultiChainRegContractList(walletAddress?: string) {
  return useQuery({
    queryKey: ["dashboard-registry", walletAddress, "multichain-contract-list"],
    queryFn: async () => {
@@ -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(
-    async (data: RemoveContractParams) => {
-      invariant(chainIdToChainRecord, "chains not initialzed yet");
+  return useMutation({
+    mutationFn: async (data: RemoveContractParams) => {
      invariant(data.chainId, "chainId not provided");
      invariant(account, "No wallet connected");
      const { contractAddress, chainId } = data;
@@ -111,12 +107,13 @@ export function useRemoveContractMutation() {
        },
      });
    },
-    {
-      onSettled: () => {
-        return queryClient.invalidateQueries(["dashboard-registry"]);
-      },
+
+    onSettled: () => {
+      return queryClient.invalidateQueries({
+        queryKey: ["dashboard-registry"],
+      });
    },
-  );
+  });
 }

 type AddContractParams = {
@@ -129,8 +126,8 @@ export function useAddContractMutation() {

  const queryClient = useQueryClient();

-  return useMutation(
-    async (data: AddContractParams) => {
+  return useMutation({
+    mutationFn: async (data: AddContractParams) => {
      invariant(account, "cannot add a contract without an address");

      return await addContractToMultiChainRegistry(
@@ -142,10 +139,11 @@ export function useAddContractMutation() {
        300000n,
      );
    },
-    {
-      onSettled: () => {
-        return queryClient.invalidateQueries(["dashboard-registry"]);
-      },
+
+    onSettled: () => {
+      return queryClient.invalidateQueries({
+        queryKey: ["dashboard-registry"],
+      });
    },
-  );
+  });
 }
@@ -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));
    },
-  );
+  });
 }
@@ -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),
-        ]);
-      },
-    },
-  );
+  });
 }
@@ -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();

@@ -92,10 +93,9 @@ export function FaucetButton({
      });
    },
    onSettled: () => {
-      return queryClient.invalidateQueries([
-        "testnet-faucet-can-claim",
-        chainId,
-      ]);
+      return queryClient.invalidateQueries({
+        queryKey: ["testnet-faucet-can-claim", chainId],
+      });
    },
  });

@@ -118,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" />
@@ -129,7 +129,7 @@ export function FaucetButton({
  // faucet is empty
  if (isFaucetEmpty) {
    return (
-      <Button variant="outline" disabled className="w-full !opacity-100 ">
+      <Button variant="outline" disabled className="!opacity-100 w-full ">
        Faucet is empty right now
      </Button>
    );
@@ -138,10 +138,10 @@ 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{" "}
+            Your next claim is available
            {formatTime(canClaimFaucetQuery.data.ttlSeconds)}
          </>
        )}
@@ -163,7 +163,7 @@ export function FaucetButton({

  // eligible to claim and faucet has balance
  return (
-    <div className="flex flex-col w-full text-center">
+    <div className="flex w-full flex-col text-center">
      <Button
        variant="primary"
        className="w-full gap-2"
@@ -175,7 +175,7 @@ export function FaucetButton({
          });
        }}
      >
-        {claimMutation.isLoading ? (
+        {claimMutation.isPending ? (
          <>
            Claiming <Spinner className="size-3" />
          </>
@@ -185,8 +185,8 @@ export function FaucetButton({
      </Button>

      {faucetWalletBalanceQuery.data && (
-        <p className="mt-3 text-xs text-muted-foreground">
-          {Number(faucetWalletBalanceQuery.data.displayValue).toFixed(3)}{" "}
+        <p className="mt-3 text-muted-foreground text-xs">
+          {Number(faucetWalletBalanceQuery.data.displayValue).toFixed(3)}
          {faucetWalletBalanceQuery.data.symbol} left in the faucet
        </p>
      )}
@@ -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={{
@@ -30,7 +30,7 @@ export const AddChainToWallet: React.FC<AddChainToWalletProps> = (props) => {
    },
  });

-  const [debouncedLoading] = useDebounce(switchChainMutation.isLoading, 50);
+  const [debouncedLoading] = useDebounce(switchChainMutation.isPending, 50);

  const disabled = debouncedLoading || activeWalletChainId === props.chain?.id;

@@ -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
--- a/Show More
+++ b/Show More