Version Packages (#4666 )

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
[Dashboard] ERC20 Claim form (#4669 )
2024-09-19 11:01:37 +12:00 · 2024-09-18 22:32:21 +00:00 · 2024-09-18 22:19:14 +00:00 · 2024-09-18 22:02:12 +00:00 · 2024-09-18 22:02:12 +00:00 · 2024-09-18 22:02:11 +00:00
4425 changed files with 735331 additions and 430193 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,18 @@
 # 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/thirdweb/src/pay/ @joaquim-verges @gregfromstl @MananTank @jnsdls @edwardysun
 packages/typedoc-gen/ @MananTank @jnsdls @joaquim-verges
 packages/service-utils/ @arcoraven @jnsdls @joaquim-verges
 packages/eslint-config-thirdweb/ @jnsdls @joaquim-verges
 packages/tw-tsconfig/ @jnsdls @joaquim-verges
-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
@@ -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: {
@@ -98,7 +96,7 @@ module.exports = {
    ],
  },
  parser: "@typescript-eslint/parser",
-  plugins: ["@typescript-eslint", "import", "react-compiler"],
+  plugins: ["@typescript-eslint", "react-compiler"],
  parserOptions: {
    ecmaVersion: 2019,
    ecmaFeatures: {
@@ -115,31 +113,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.1/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", "knip", "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 portal.usecontext.io;
  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,
  },
@@ -214,7 +213,7 @@ module.exports = withBundleAnalyzer(
         * See: https://github.com/getsentry/sentry-javascript/issues/10468#issuecomment-2004710692
         */
        disableServerWebpackPlugin: true,
-      },
-    ),
-  ),
+      }
+    )
+  )
 );
@@ -4,15 +4,14 @@
  "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",
+    "lint": "biome check ./src && knip && eslint ./src",
    "fix": "biome check ./src --fix && eslint ./src --fix",
    "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 +44,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 +61,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",
    "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.12",
    "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 +89,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 +102,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.12",
+    "@next/eslint-plugin-next": "14.2.12",
+    "@playwright/test": "1.47.1",
+    "@storybook/addon-essentials": "8.3.1",
+    "@storybook/addon-interactions": "8.3.1",
+    "@storybook/addon-links": "8.3.1",
+    "@storybook/addon-onboarding": "8.3.1",
+    "@storybook/addon-viewport": "8.3.1",
+    "@storybook/blocks": "8.3.1",
+    "@storybook/nextjs": "8.3.1",
+    "@storybook/react": "8.3.1",
+    "@storybook/test": "8.3.1",
    "@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.7",
    "@types/react-dom": "^18",
    "@types/react-table": "^7.7.20",
    "@types/spdx-correct": "^3.1.3",
@@ -146,39 +135,12 @@
    "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-plugin-react-compiler": "0.0.0-experimental-ca16900-20240916",
    "eslint-plugin-storybook": "^0.8.0",
    "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.1",
+    "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: {
@@ -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("border flex gap-2 items-center text-xs", props.className)}
      onClick={async () => {
        exportMutation.mutate();
      }}
    >
-      {exportMutation.isLoading ? (
+      {exportMutation.isPending ? (
        <>
          Downloading
          <Spinner className="size-3" />
@@ -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: {
@@ -1,9 +1,10 @@
 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;
+  bottomText: React.ReactNode;
  header?: {
    description: string | undefined;
    title: string;
@@ -12,13 +13,14 @@ export function SettingsCard(props: {
  errorText: string | undefined;
  noPermissionText: string | undefined;
  saveButton?: {
-    onClick: () => void;
+    onClick?: () => void;
    disabled: boolean;
    isLoading: boolean;
+    type?: "submit";
  };
 }) {
  return (
-    <div className="border rounded-lg bg-muted/50 relative">
+    <div className="border border-border rounded-lg bg-muted/50 relative">
      <div
        className={cn(
          "border-b border-border px-4 lg:px-6 py-6 relative",
@@ -59,6 +61,7 @@ export function SettingsCard(props: {
            onClick={props.saveButton.onClick}
            disabled={props.saveButton.disabled || props.saveButton.isLoading}
            variant="outline"
+            type={props.saveButton.type}
          >
            {props.saveButton.isLoading && <Spinner className="size-3" />}
            {props.saveButton.isLoading ? "Saving" : "Save"}
@@ -14,7 +14,7 @@ export type SidebarLink = {
  };
 };

-export type SidebarContentProps = {
+type SidebarContentProps = {
  header?: React.ReactNode;
  links: SidebarLink[];
  className?: string;
@@ -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: {
@@ -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;
@@ -6,8 +6,10 @@ import {
  HoverCardContent,
  HoverCardTrigger,
 } from "@/components/ui/hover-card";
+import { useThirdwebClient } from "@/constants/thirdweb.client";
 import { Check, Copy, ExternalLinkIcon } from "lucide-react";
 import { useMemo, useState } from "react";
+import { type ThirdwebClient, isAddress } from "thirdweb";
 import { ZERO_ADDRESS } from "thirdweb";
 import {
  Blobbie,
@@ -16,7 +18,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 +27,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
@@ -44,6 +47,15 @@ export function WalletAddress(props: {

  const [isCopied, setIsCopied] = useState(false);

+  if (!isAddress(address)) {
+    return <span>Invalid Address ({address})</span>;
+  }
+
+  // special case for zero address
+  if (address === ZERO_ADDRESS) {
+    return <span className="font-mono cursor-pointer">{shortenedAddress}</span>;
+  }
+
  const copyToClipboard = async () => {
    try {
      await navigator.clipboard.writeText(address);
@@ -66,7 +78,11 @@ export function WalletAddress(props: {
          )}
        >
          {address && (
-            <WalletAvatar address={address} profiles={profiles.data || []} />
+            <WalletAvatar
+              address={address}
+              profiles={profiles.data || []}
+              thirdwebClient={thirdwebClient}
+            />
          )}
          <span className="font-mono cursor-pointer">
            {profiles.data?.[0]?.name || shortenedAddress}
@@ -167,6 +183,7 @@ export function WalletAddress(props: {
 function WalletAvatar(props: {
  address: string;
  profiles: SocialProfile[];
+  thirdwebClient: ThirdwebClient;
 }) {
  const avatar = useMemo(() => {
    return props.profiles.find(
@@ -180,7 +197,7 @@ function WalletAvatar(props: {
    <div className="size-6 overflow-hidden rounded-full">
      {avatar ? (
        <MediaRenderer
-          client={thirdwebClient}
+          client={props.thirdwebClient}
          src={avatar}
          className="size-6"
        />
@@ -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"
@@ -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,
  ) => {
@@ -243,7 +245,9 @@ const ChartTooltipContent = React.forwardRef<
                      </div>
                      {item.value && (
                        <span className="font-mono font-medium tabular-nums text-foreground">
-                          {item.value}
+                          {valueFormatter
+                            ? valueFormatter(item.value) || item.value
+                            : item.value}
                        </span>
                      )}
                    </div>
@@ -34,6 +34,7 @@ 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",
@@ -41,7 +41,7 @@ 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 md:max-w-lg gap-4 border bg-background p-6 shadow-lg duration-300 rounded-t-xl md:rounded-lg border-border",
        // on mobile - put the dialog at the bottom of the screen, animate - slide up and fade in
        "bottom-0 left-0 right-0",
        "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
@@ -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,
-};
@@ -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}
@@ -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(
+      "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",
+      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 right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary border-border">
+        <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 text-center sm:text-left border-border",
+      className,
+    )}
+    {...props}
+  />
+);
+SheetHeader.displayName = "SheetHeader";
+
+const SheetFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 border-border",
+      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(
+      "text-lg font-semibold text-foreground border-border",
+      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("text-sm text-muted-foreground border-border", className)}
+    {...props}
+  />
+));
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
+
+export {
+  Sheet,
+  SheetPortal,
+  SheetOverlay,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+};
@@ -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 };
@@ -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,41 @@
+import {} from "@/constants/env";
+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,23 @@
+import {
+  DASHBOARD_THIRDWEB_CLIENT_ID,
+  DASHBOARD_THIRDWEB_SECRET_KEY,
+  IPFS_GATEWAY_URL,
+} from "@/constants/env";
+import { createThirdwebClient } from "thirdweb";
+
+// returns a thirdweb client with optional JWT passed in
+export function getThirdwebClient(jwt?: string) {
+  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();
@@ -1,4 +1,4 @@
-export type Store<T> = {
+type Store<T> = {
  getValue(): T;
  setValue(newValue: T): void;
  subscribe(listener: () => void): () => void;
@@ -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,8 @@
    scrollbar-width: none; /* Firefox */
  }
 }
+
+body,
+html {
+  height: 100%;
+}
@@ -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,
@@ -108,58 +105,3 @@ export const engineKeys = {
  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,
-};
@@ -2,12 +2,15 @@

 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 { 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 {
+  useSupportedChains,
+  useSupportedChainsRecord,
+} from "hooks/chains/configureChains";
 import {
  useAddRecentlyUsedChainId,
  useRecentlyUsedChains,
@@ -29,6 +32,7 @@ export const CustomConnectWallet = (props: {
  connectButtonClassName?: string;
  detailsButtonClassName?: string;
 }) => {
+  const thirdwebClient = useThirdwebClient();
  const loginRequired =
    props.loginRequired === undefined ? true : props.loginRequired;
  const { theme } = useTheme();
@@ -37,12 +41,17 @@ export const CustomConnectWallet = (props: {
  // const setIsNetworkConfigModalOpen = useSetIsNetworkConfigModalOpen();
  const t = theme === "light" ? "light" : "dark";
  const allv4Chains = useSupportedChains();
+  const chainsRecord = useSupportedChainsRecord();
  const favChainsQuery = useFavoriteChains();
  const setIsNetworkConfigModalOpen = useSetIsNetworkConfigModalOpen();
  const allChains = useMemo(() => {
    return allv4Chains.map(mapV4ChainToV5Chain);
  }, [allv4Chains]);

+  const popularChainsWithMeta = useMemo(() => {
+    return popularChains.map((x) => chainsRecord[x.id] || x);
+  }, [chainsRecord]);
+
  const chainSections = useMemo(() => {
    return [
      {
@@ -51,14 +60,14 @@ export const CustomConnectWallet = (props: {
      },
      {
        label: "Popular",
-        chains: popularChains,
+        chains: popularChainsWithMeta.map(mapV4ChainToV5Chain),
      },
      {
        label: "Recent",
        chains: recentChainsv4.map(mapV4ChainToV5Chain),
      },
    ];
-  }, [recentChainsv4, favChainsQuery.data]);
+  }, [recentChainsv4, favChainsQuery.data, popularChainsWithMeta]);

  // ensures login status on pages that need it
  const { isLoading, isLoggedIn } = useLoggedInUser();
@@ -140,7 +149,7 @@ export const CustomConnectWallet = (props: {
  );
 };

-export function ConnectWalletWelcomeScreen(props: {
+function ConnectWalletWelcomeScreen(props: {
  theme: "light" | "dark";
  subtitle?: string;
 }) {
@@ -214,6 +223,7 @@ export function ConnectWalletWelcomeScreen(props: {
 export function useCustomConnectModal() {
  const { connect } = useConnectModal();
  const { theme } = useTheme();
+  const thirdwebClient = useThirdwebClient();

  return useCallback(
    (options?: { chain?: Chain }) => {
@@ -236,7 +246,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);
@@ -172,7 +172,7 @@ interface UpdateKeyServiceInput {
  actions?: string[];
 }

-interface CreateKeyInput {
+export interface CreateKeyInput {
  name?: string;
  domains?: string[];
  bundleIds?: string[];
@@ -254,15 +254,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 +287,7 @@ export function useAccount({ refetchInterval }: UseAccountInput = {}) {
      return json.data as Account;
    },
    enabled: !!user?.address && isLoggedIn,
-    refetchInterval: refetchInterval ?? false,
+    refetchInterval,
  });
 }

@@ -444,8 +445,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 +466,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 +507,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 +547,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 +610,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 +657,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 +693,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 +728,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 +748,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 +784,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 +818,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 +873,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 +912,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,14 +944,14 @@ export function useAuthorizedWallets() {
      return json.data as AuthorizedWallet[];
    },
    enabled: !!user?.address && isLoggedIn,
-    cacheTime: 0,
+    gcTime: 0,
  });
 }

 /**
 *
 */
-export async function fetchChainsFromApi() {
+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");
@@ -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;
@@ -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,
@@ -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,20 +69,16 @@ 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 {
@@ -15,7 +15,7 @@ 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 () => {
@@ -88,8 +88,8 @@ export function useRemoveContractMutation() {
  const { chainIdToChainRecord } = useAllChainsData();
  const queryClient = useQueryClient();
  const account = useActiveAccount();
-  return useMutation(
-    async (data: RemoveContractParams) => {
+  return useMutation({
+    mutationFn: async (data: RemoveContractParams) => {
      invariant(chainIdToChainRecord, "chains not initialzed yet");
      invariant(data.chainId, "chainId not provided");
      invariant(account, "No wallet connected");
@@ -111,12 +111,13 @@ export function useRemoveContractMutation() {
        },
      });
    },
-    {
-      onSettled: () => {
-        return queryClient.invalidateQueries(["dashboard-registry"]);
-      },
+
+    onSettled: () => {
+      return queryClient.invalidateQueries({
+        queryKey: ["dashboard-registry"],
+      });
    },
-  );
+  });
 }

 type AddContractParams = {
@@ -129,8 +130,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 +143,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],
+      });
    },
  });

@@ -175,7 +175,7 @@ export function FaucetButton({
          });
        }}
      >
-        {claimMutation.isLoading ? (
+        {claimMutation.isPending ? (
          <>
            Claiming <Spinner className="size-3" />
          </>
@@ -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>
@@ -34,7 +35,7 @@ export function PayModalButton(props: { chainId: number; label: string }) {
        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;

@@ -3,21 +3,17 @@
 import { CopyTextButton } from "@/components/ui/CopyTextButton";
 import { Skeleton } from "@/components/ui/skeleton";
 import { ToolTipLabel } from "@/components/ui/tooltip";
-import { thirdwebClient } from "@/constants/client";
-import { isProd } from "@/constants/env";
+import { DASHBOARD_THIRDWEB_CLIENT_ID, isProd } from "@/constants/env";
 import { useQuery } from "@tanstack/react-query";
 import { CircleCheck, XIcon } from "lucide-react";
-import { useState } from "react";
 import { hostnameEndsWith } from "utils/url";
 import { PrimaryInfoItem } from "../server/primary-info-item";

 function useChainStatswithRPC(_rpcUrl: string) {
-  const [shouldRefetch, setShouldRefetch] = useState(true);
-
  let rpcUrl = _rpcUrl.replace(
    // eslint-disable-next-line no-template-curly-in-string
    "${THIRDWEB_API_KEY}",
-    thirdwebClient.clientId,
+    DASHBOARD_THIRDWEB_CLIENT_ID,
  );

  // based on the environment hit dev or production
@@ -49,12 +45,14 @@ function useChainStatswithRPC(_rpcUrl: string) {
        blockNumber: Number.parseInt(json.result, 16),
      };
    },
-    refetchInterval: shouldRefetch ? 5 * 1000 : undefined,
+    refetchInterval: (query) => {
+      if (query.state.error) {
+        return false;
+      }
+      return 5 * 1000;
+    },
    enabled: !!rpcUrl,
    refetchOnWindowFocus: false,
-    onError: () => {
-      setShouldRefetch(false);
-    },
  });
 }

@@ -20,7 +20,6 @@ export function ChainHeader(props: ChainHeaderProps) {
    // force the banner image to be 4:1 aspect ratio and full-width on mobile devices
    <div className="flex flex-col">
      {!props.headerImageUrl && <div className="h-8 md:hidden" />}
-
      <AspectRatio
        ratio={props.headerImageUrl ? 4 : 8}
        className="border-b border-border max-sm:-mx-4"
@@ -34,7 +33,6 @@ export function ChainHeader(props: ChainHeaderProps) {
          />
        )}
      </AspectRatio>
-
      {/* below header */}
      <div className="relative flex flex-row justify-end items-end">
        {/* chain logo */}
@@ -1,5 +1,5 @@
 /* eslint-disable @next/next/no-img-element */
-import { thirdwebClient } from "@/constants/client";
+import { getThirdwebClient } from "@/constants/thirdweb.server";
 import { ImageResponse } from "next/og";
 import { download } from "thirdweb/storage";
 import { fetchChain } from "utils/fetchChain";
@@ -77,8 +77,8 @@ export default async function Image({
    ),
    // download the chain icon if there is one
    chain.icon?.url && hasWorkingChainIcon
-      ? download({ uri: chain.icon.url, client: thirdwebClient }).then((res) =>
-          res.arrayBuffer(),
+      ? download({ uri: chain.icon.url, client: getThirdwebClient() }).then(
+          (res) => res.arrayBuffer(),
        )
      : undefined,
    // download the background image (based on chain)
@@ -1,6 +1,7 @@
 import { Badge } from "@/components/ui/badge";
 import { Separator } from "@/components/ui/separator";
-import { thirdwebClient } from "@/constants/client";
+import { getThirdwebClient } from "@/constants/thirdweb.server";
+import { mapV4ChainToV5Chain } from "contexts/map-chains";
 import { ZERO_ADDRESS, toTokens } from "thirdweb";
 import {
  eth_getBlockByHash,
@@ -9,16 +10,17 @@ import {
  getRpcClient,
 } from "thirdweb/rpc";
 import { hexToNumber, shortenAddress, toEther } from "thirdweb/utils";
-import { mapV4ChainToV5Chain } from "../../../../../../contexts/map-chains";
 import { getChain } from "../../../utils";

 export default async function Page(props: {
  params: { chain_id: string; txHash: `0x${string}` };
 }) {
+  // consider if we want to pass the JWT here, likely no need to do it but we could?
+  const client = getThirdwebClient();
  const chain = await getChain(props.params.chain_id);

  const rpcRequest = getRpcClient({
-    client: thirdwebClient,
+    client,
    // Do not include chain overrides for chain pages
    // eslint-disable-next-line no-restricted-syntax
    chain: mapV4ChainToV5Chain(chain),
@@ -5,7 +5,7 @@ import { Input } from "@/components/ui/input";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
 import { SearchIcon, XCircleIcon } from "lucide-react";
 import { usePathname, useSearchParams } from "next/navigation";
-import { useRef } from "react";
+import { useEffect, useRef } from "react";
 import { useDebouncedCallback } from "use-debounce";

 function cleanUrl(url: string) {
@@ -22,10 +22,13 @@ export const SearchInput: React.FC = () => {

  const inputRef = useRef<HTMLInputElement>(null);

-  // hah, no need for useEffect here this just works!
-  if (inputRef.current?.value && !searchParams?.get("query")) {
-    inputRef.current.value = "";
-  }
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    // reset the input if the query param is removed
+    if (inputRef.current?.value && !searchParams?.get("query")) {
+      inputRef.current.value = "";
+    }
+  }, [searchParams]);

  const handleSearch = useDebouncedCallback((term: string) => {
    const params = new URLSearchParams(searchParams ?? undefined);
@@ -88,7 +88,7 @@ export async function ChainListRow({
                  key={p.name}
                  icon={p.icon}
                  label={p.name}
-                  href={`/${chainSlug}/${p.id === "contracts" ? "" : p.id}`}
+                  href={pidToHref(p.id)}
                  isEnabled={enabledServices.includes(p.id)}
                />
              );
@@ -100,6 +100,29 @@ export async function ChainListRow({
  );
 }

+function pidToHref(pid: (typeof products)[number]["id"]) {
+  switch (pid) {
+    case "account-abstraction": {
+      return "https://portal.thirdweb.com/connect/account-abstraction/overview";
+    }
+    case "contracts": {
+      return "https://portal.thirdweb.com/contracts";
+    }
+    case "connect-sdk": {
+      return "https://portal.thirdweb.com/connect";
+    }
+    case "engine": {
+      return "https://portal.thirdweb.com/engine";
+    }
+    case "pay": {
+      return "https://portal.thirdweb.com/connect/pay/overview";
+    }
+    case "rpc-edge": {
+      return "https://portal.thirdweb.com/infrastructure/rpc-edge/overview";
+    }
+  }
+}
+
 function ProductIcon(props: {
  icon: React.FC<{ className?: string }>;
  label: string;
@@ -117,7 +140,10 @@ function ProductIcon(props: {
        )
      }
    >
-      <Link href={props.href}>
+      <Link
+        href={props.href}
+        target={props.href.startsWith("http") ? "_blank" : undefined}
+      >
        <props.icon className={cn("size-8", !props.isEnabled && "grayscale")} />
      </Link>
    </ToolTipLabel>
@@ -91,7 +91,7 @@ export function StarButton(props: {
      }}
      disabled={
        !loggedInUser.user?.address ||
-        mutation.isLoading ||
+        mutation.isPending ||
        favChainsQuery.isLoading
      }
    >
@@ -1,8 +1,7 @@
 /* eslint-disable @next/next/no-img-element */
 import "server-only";
-
-import { thirdwebClient } from "@/constants/client";
 import { DASHBOARD_THIRDWEB_SECRET_KEY } from "@/constants/env";
+import { getThirdwebClient } from "@/constants/thirdweb.server";
 import { cn } from "@/lib/utils";
 import { resolveScheme } from "thirdweb/storage";

@@ -15,7 +14,7 @@ export async function ChainIcon(props: {
 }) {
  if (props.iconUrl) {
    const resolved = resolveScheme({
-      client: thirdwebClient,
+      client: getThirdwebClient(),
      uri: props.iconUrl,
    });
    const res = await fetch(resolved, {
@@ -1,6 +1,6 @@
 import "server-only";

-import { redirect } from "next/navigation";
+import { notFound } from "next/navigation";
 import type { ChainCTAProps } from "./[chain_id]/(chainPage)/components/server/cta-card";
 import zeroGCTA from "./temp-assets/0gCTA.png";
 import zeroGBanner from "./temp-assets/0gLabsBanner.png";
@@ -89,7 +89,7 @@ export async function getChain(
  ]);

  if (!chain.data) {
-    redirect("/404");
+    notFound();
  }
  return {
    ...chain.data,
@@ -0,0 +1,37 @@
+import { getThirdwebClient } from "@/constants/thirdweb.server";
+import { setOverrides } from "lib/vercel-utils";
+import { fetchDeployMetadata } from "thirdweb/contract";
+import { DeployContractInfo } from "../../../published-contract/components/contract-info";
+import { DeployFormForUri } from "../../../published-contract/components/uri-based-deploy";
+
+setOverrides();
+
+type DirectDeployPageProps = {
+  params: {
+    compiler_uri: string;
+  };
+};
+
+export default async function DirectDeployPage(props: DirectDeployPageProps) {
+  const parsedUri = decodeURIComponent(props.params.compiler_uri);
+  const metadata = await fetchDeployMetadata({
+    client: getThirdwebClient(),
+    // force `ipfs://` prefix
+    uri: parsedUri.startsWith("ipfs://") ? parsedUri : `ipfs://${parsedUri}`,
+  });
+  return (
+    <div className="container py-8 flex flex-col gap-4">
+      <DeployContractInfo
+        name={metadata.name}
+        displayName={metadata.displayName}
+        description={metadata.description}
+        logo={metadata.logo}
+      />
+      <DeployFormForUri
+        contractMetadata={metadata}
+        modules={null}
+        pathname={`/contracts/deploy/${props.params.compiler_uri}`}
+      />
+    </div>
+  );
+}
@@ -0,0 +1,62 @@
+import { ChakraProviderSetup } from "@/components/ChakraProviderSetup";
+import { getActiveAccountCookie, getJWTCookie } from "@/constants/cookie";
+import { getThirdwebClient } from "@/constants/thirdweb.server";
+import { ContractPublishForm } from "components/contract-components/contract-publish-form";
+import { setOverrides } from "lib/vercel-utils";
+import { revalidatePath } from "next/cache";
+import { redirect } from "next/navigation";
+import { fetchDeployMetadata } from "thirdweb/contract";
+
+setOverrides();
+
+type DirectDeployPageProps = {
+  params: {
+    publish_uri: string;
+  };
+};
+
+export default async function PublishContractPage(
+  props: DirectDeployPageProps,
+) {
+  const decodedPublishUri = decodeURIComponent(props.params.publish_uri);
+  const publishUri = decodedPublishUri.startsWith("ipfs://")
+    ? decodedPublishUri
+    : `ipfs://${decodedPublishUri}`;
+
+  const publishMetadata = await fetchDeployMetadata({
+    uri: publishUri,
+    client: getThirdwebClient(),
+  });
+
+  const pathname = `/contracts/publish/${props.params.publish_uri}`;
+
+  const address = getActiveAccountCookie();
+  if (!address) {
+    redirect(`/login?next=${encodeURIComponent(pathname)}`);
+  }
+
+  const token = getJWTCookie(address);
+  if (!token) {
+    redirect(`/login?next=${encodeURIComponent(pathname)}`);
+  }
+
+  return (
+    <div className="container py-8 flex flex-col gap-8">
+      <ChakraProviderSetup>
+        <ContractPublishForm
+          jwt={token}
+          publishMetadata={publishMetadata}
+          onPublishSuccess={async () => {
+            "use server";
+            // we are pretty brutal here and simply invalidate ALL published contracts (for everyone!) and versions no matter what
+            // TODO: we can be more granular here and only invalidate the specific contract and version etc
+            revalidatePath(
+              "/(dashboard)/published-contract/[publisher]/[contract_id]",
+              "layout",
+            );
+          }}
+        />
+      </ChakraProviderSetup>
+    </div>
+  );
+}
@@ -31,7 +31,7 @@ export function AddPartnerForm({ ecosystem }: { ecosystem: Ecosystem }) {
    resolver: zodResolver(partnerFormSchema),
  });

-  const { addPartner, isLoading } = useAddPartner({
+  const { mutateAsync: addPartner, isPending } = useAddPartner({
    onSuccess: () => {
      form.reset();
    },
@@ -182,7 +182,7 @@ export function AddPartnerForm({ ecosystem }: { ecosystem: Ecosystem }) {
          />
        </div>
        <Button
-          disabled={isLoading}
+          disabled={isPending}
          type="submit"
          variant="outline"
          className="w-full lg:w-auto"
@@ -13,7 +13,7 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { Skeleton } from "@/components/ui/skeleton";
 import { TabLinks } from "@/components/ui/tabs";
-import { thirdwebClient } from "@/constants/client";
+import { useThirdwebClient } from "@/constants/thirdweb.client";
 import {
  AlertTriangleIcon,
  CheckIcon,
@@ -123,6 +123,7 @@ export function EcosystemHeader(props: {
    refetchOnWindowFocus: false,
    initialData: props.ecosystem,
  });
+  const client = useThirdwebClient();

  const ecosystem = fetchedEcosystem ?? props.ecosystem;

@@ -140,7 +141,7 @@ export function EcosystemHeader(props: {
                  <Image
                    src={resolveScheme({
                      uri: ecosystem.imageUrl,
-                      client: thirdwebClient,
+                      client,
                    })}
                    sizes="100px"
                    alt={ecosystem.name}
@@ -20,7 +20,11 @@ export function IntegrationPermissionsToggle({
      }
    | undefined
  >();
-  const { updateEcosystem, variables, isLoading } = useUpdateEcosystem({
+  const {
+    mutateAsync: updateEcosystem,
+    variables,
+    isPending,
+  } = useUpdateEcosystem({
    onError: (error) => {
      const message =
        error instanceof Error ? error.message : "Failed to create ecosystem";
@@ -31,14 +35,14 @@ export function IntegrationPermissionsToggle({
  return (
    <RadioGroup
      defaultValue={ecosystem.permission}
-      value={isLoading ? variables?.permission : ecosystem.permission}
+      value={isPending ? variables?.permission : ecosystem.permission}
      className="flex flex-col gap-2 py-2 md:flex-row md:gap-4"
    >
      <RadioGroupItemButton
        value="PARTNER_WHITELIST"
        id="PARTNER_WHITELIST"
        className={cn(
-          isLoading &&
+          isPending &&
            variables?.permission === "PARTNER_WHITELIST" &&
            "animate-pulse",
        )}
@@ -59,7 +63,7 @@ export function IntegrationPermissionsToggle({
        value="ANYONE"
        id="ANYONE"
        className={cn(
-          isLoading && variables?.permission === "ANYONE" && "animate-pulse",
+          isPending && variables?.permission === "ANYONE" && "animate-pulse",
        )}
        onClick={() => {
          if (ecosystem.permission === "ANYONE") return;
@@ -42,7 +42,7 @@ export function UpdatePartnerForm({
    },
  });

-  const { updatePartner, isLoading } = useUpdatePartner({
+  const { mutateAsync: updatePartner, isPending } = useUpdatePartner({
    onSuccess: () => {
      form.reset();
      onSuccess();
@@ -195,12 +195,12 @@ export function UpdatePartnerForm({
          />
        </div>
        <Button
-          disabled={isLoading}
+          disabled={isPending}
          type="submit"
          variant="outline"
          className="w-full"
        >
-          {isLoading && <Loader2 className="size-4 mr-1 animate-spin" />}
+          {isPending && <Loader2 className="size-4 mr-1 animate-spin" />}
          Update
        </Button>
      </form>
@@ -69,13 +69,14 @@ function EcosystemRow(props: {
  partner: Partner;
  ecosystem: Ecosystem;
 }) {
-  const { deletePartner, isLoading: isDeleting } = useDeletePartner({
-    onError: (error) => {
-      const message =
-        error instanceof Error ? error.message : "Failed to delete partner";
-      toast.error(message);
-    },
-  });
+  const { mutateAsync: deletePartner, isPending: isDeleting } =
+    useDeletePartner({
+      onError: (error) => {
+        const message =
+          error instanceof Error ? error.message : "Failed to delete partner";
+        toast.error(message);
+      },
+    });

  return (
    <TableRow
@@ -2,7 +2,7 @@ import z from "zod";
 import type { PartnerPermission } from "../../types";
 import { isValidPermission } from "./utils";

-export const isDomainRegex =
+const isDomainRegex =
  /^(?:\*|(?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\.)*(?:\*(?:\.[a-z0-9][a-z0-9-]{0,61}[a-z0-9](?:\.[a-z0-9][a-z0-9-]{0,61}[a-z0-9])*)?)|(?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\.)+[a-z0-9][a-z0-9-]{0,61}[a-z0-9]|localhost(?::\d{1,5})?)$/;

 export const partnerFormSchema = z.object({
@@ -6,7 +6,7 @@ import {
 } from "@tanstack/react-query";
 import type { Ecosystem, Partner } from "../../../types";

-export type AddPartnerParams = {
+type AddPartnerParams = {
  ecosystem: Ecosystem;
  name: string;
  allowlistedDomains: string[];
@@ -24,7 +24,7 @@ export function useAddPartner(
  const { isLoggedIn, user } = useLoggedInUser();
  const queryClient = useQueryClient();

-  const { mutateAsync: addPartner, isLoading } = useMutation({
+  return useMutation({
    // Returns the created partner object
    mutationFn: async (params: AddPartnerParams): Promise<Partner> => {
      if (!isLoggedIn || !user?.jwt) {
@@ -74,11 +74,9 @@ export function useAddPartner(
      return data;
    },
    onSuccess: async (partner, variables, context) => {
-      await queryClient.invalidateQueries([
-        "ecosystem",
-        variables.ecosystem.id,
-        "partners",
-      ]);
+      await queryClient.invalidateQueries({
+        queryKey: ["ecosystem", variables.ecosystem.id, "partners"],
+      });
      if (onSuccess) {
        return onSuccess(partner, variables, context);
      }
@@ -86,6 +84,4 @@ export function useAddPartner(
    },
    ...queryOptions,
  });
-
-  return { addPartner, isLoading };
 }
@@ -6,7 +6,7 @@ import {
 } from "@tanstack/react-query";
 import type { Ecosystem } from "../../../types";

-export type DeletePartnerParams = {
+type DeletePartnerParams = {
  ecosystem: Ecosystem;
  partnerId: string;
 };
@@ -21,7 +21,7 @@ export function useDeletePartner(
  const { isLoggedIn, user } = useLoggedInUser();
  const queryClient = useQueryClient();

-  const { mutateAsync: deletePartner, isLoading } = useMutation({
+  return useMutation({
    // Returns true on success
    mutationFn: async (params: DeletePartnerParams): Promise<boolean> => {
      if (!isLoggedIn || !user?.jwt) {
@@ -58,11 +58,9 @@ export function useDeletePartner(
      return true;
    },
    onSuccess: async (partner, variables, context) => {
-      await queryClient.invalidateQueries([
-        "ecosystem",
-        variables.ecosystem.id,
-        "partners",
-      ]);
+      await queryClient.invalidateQueries({
+        queryKey: ["ecosystem", variables.ecosystem.id, "partners"],
+      });
      if (onSuccess) {
        return onSuccess(partner, variables, context);
      }
@@ -70,6 +68,4 @@ export function useDeletePartner(
    },
    ...queryOptions,
  });
-
-  return { deletePartner, isLoading };
 }
@@ -6,7 +6,7 @@ import {
 } from "@tanstack/react-query";
 import type { Ecosystem } from "../../../types";

-export type UpdateEcosystemParams = {
+type UpdateEcosystemParams = {
  ecosystem: Ecosystem;
  permission: "PARTNER_WHITELIST" | "ANYONE";
 };
@@ -21,11 +21,7 @@ export function useUpdateEcosystem(
  const { isLoggedIn, user } = useLoggedInUser();
  const queryClient = useQueryClient();

-  const {
-    mutateAsync: updateEcosystem,
-    isLoading,
-    variables,
-  } = useMutation({
+  return useMutation({
    // Returns true if the update was successful
    mutationFn: async (params: UpdateEcosystemParams): Promise<boolean> => {
      if (!isLoggedIn || !user?.jwt) {
@@ -65,7 +61,9 @@ export function useUpdateEcosystem(
      return true;
    },
    onSuccess: async (partner, variables, context) => {
-      await queryClient.invalidateQueries(["ecosystems"]);
+      await queryClient.invalidateQueries({
+        queryKey: ["ecosystems"],
+      });
      if (onSuccess) {
        return onSuccess(partner, variables, context);
      }
@@ -73,6 +71,4 @@ export function useUpdateEcosystem(
    },
    ...queryOptions,
  });
-
-  return { updateEcosystem, isLoading, variables };
 }
@@ -6,7 +6,7 @@ import {
 } from "@tanstack/react-query";
 import type { Ecosystem, Partner } from "../../../types";

-export type UpdatePartnerParams = {
+type UpdatePartnerParams = {
  partnerId: string;
  ecosystem: Ecosystem;
  name: string;
@@ -25,7 +25,7 @@ export function useUpdatePartner(
  const { isLoggedIn, user } = useLoggedInUser();
  const queryClient = useQueryClient();

-  const { mutateAsync: updatePartner, isLoading } = useMutation({
+  return useMutation({
    // Returns the created partner object
    mutationFn: async (params: UpdatePartnerParams): Promise<Partner> => {
      if (!isLoggedIn || !user?.jwt) {
@@ -73,11 +73,9 @@ export function useUpdatePartner(
      return data;
    },
    onSuccess: async (partner, variables, context) => {
-      await queryClient.invalidateQueries([
-        "ecosystem",
-        variables.ecosystem.id,
-        "partners",
-      ]);
+      await queryClient.invalidateQueries({
+        queryKey: ["ecosystem", variables.ecosystem.id, "partners"],
+      });
      if (onSuccess) {
        return onSuccess(partner, variables, context);
      }
@@ -85,6 +83,4 @@ export function useUpdatePartner(
    },
    ...queryOptions,
  });
-
-  return { updatePartner, isLoading };
 }
@@ -59,7 +59,7 @@ export function CreateEcosystemForm(props: {
    },
  });

-  const { createEcosystem, isLoading } = useCreateEcosystem({
+  const { mutateAsync: createEcosystem, isPending } = useCreateEcosystem({
    onError: (error) => {
      const message =
        error instanceof Error ? error.message : "Failed to create ecosystem";
@@ -181,9 +181,9 @@ export function CreateEcosystemForm(props: {
              type="submit"
              variant="primary"
              className="w-full"
-              disabled={isLoading}
+              disabled={isPending}
            >
-              {isLoading && <Loader2 className="w-4 h-4 mr-1 animate-spin" />}
+              {isPending && <Loader2 className="w-4 h-4 mr-1 animate-spin" />}
              Create
            </Button>
          )}
@@ -1,4 +1,4 @@
-import { thirdwebClient } from "@/constants/client";
+import { useThirdwebClient } from "@/constants/thirdweb.client";
 import { useLoggedInUser } from "@3rdweb-sdk/react/hooks/useLoggedInUser";
 import {
  type UseMutationOptions,
@@ -8,7 +8,7 @@ import {
 import { THIRDWEB_API_HOST } from "constants/urls";
 import { upload } from "thirdweb/storage";

-export type CreateEcosystemParams = {
+type CreateEcosystemParams = {
  name: string;
  logo: File;
  permission: "PARTNER_WHITELIST" | "ANYONE";
@@ -24,7 +24,9 @@ export function useCreateEcosystem(
  const { isLoggedIn } = useLoggedInUser();
  const queryClient = useQueryClient();

-  const { mutateAsync: createEcosystem, isLoading } = useMutation({
+  const client = useThirdwebClient();
+
+  return useMutation({
    // Returns the created ecosystem slug
    mutationFn: async (params: CreateEcosystemParams): Promise<string> => {
      if (!isLoggedIn) {
@@ -32,7 +34,7 @@ export function useCreateEcosystem(
      }

      const imageUri = await upload({
-        client: thirdwebClient,
+        client,
        files: [params.logo],
      });

@@ -75,10 +77,10 @@ export function useCreateEcosystem(
      if (onSuccess) {
        await onSuccess(id, variables, context);
      }
-      return queryClient.invalidateQueries(["ecosystems"]);
+      return queryClient.invalidateQueries({
+        queryKey: ["ecosystems"],
+      });
    },
    ...queryOptions,
  });
-
-  return { createEcosystem, isLoading };
 }
@@ -0,0 +1,61 @@
+import { TabPathLinks } from "@/components/ui/tabs";
+import { redirect } from "next/navigation";
+import { getApiKeys } from "../../../../../api/lib/getAPIKeys";
+import { APIKeySelector } from "../components/APIKeySelector";
+
+export default async function Layout(props: {
+  params: {
+    id: string;
+  };
+  children: React.ReactNode;
+}) {
+  const apiKeys = await getApiKeys();
+  const firstKey = apiKeys[0];
+
+  if (!firstKey) {
+    redirect("/dashboard/connect/pay/no-keys");
+  }
+
+  const selectedKey = apiKeys.find((x) => x.id === props.params.id);
+
+  if (!selectedKey) {
+    redirect("/dashboard/connect/pay");
+  }
+
+  const layoutPath = `/dashboard/connect/pay/${selectedKey.id}`;
+
+  return (
+    <div>
+      <div className="flex-col gap-4 flex lg:flex-row w-full relative">
+        <div className="max-sm:w-full lg:min-w-[200px] lg:absolute right-0 bottom-3 z-10">
+          <APIKeySelector apiKeys={apiKeys} selectedApiKey={selectedKey} />
+        </div>
+
+        <TabPathLinks
+          className="w-full"
+          links={[
+            {
+              name: "Analytics",
+              path: layoutPath,
+              exactMatch: true,
+            },
+            {
+              name: "Webhooks",
+              path: `${layoutPath}/webhooks`,
+            },
+            {
+              name: "Settings",
+              path: `${layoutPath}/settings`,
+            },
+          ]}
+        />
+      </div>
+
+      <div className="h-4" />
+
+      {props.children}
+    </div>
+  );
+}
+
+export const dynamic = "force-dynamic";
@@ -0,0 +1,17 @@
+import { notFound } from "next/navigation";
+import { PayAnalytics } from "../../../../../../components/pay/PayAnalytics/PayAnalytics";
+import { getAPIKey } from "../../../../../api/lib/getAPIKeys";
+
+export default async function Page(props: {
+  params: {
+    id: string;
+  };
+}) {
+  const apiKey = await getAPIKey(props.params.id);
+
+  if (!apiKey) {
+    notFound();
+  }
+
+  return <PayAnalytics clientId={apiKey.key} />;
+}
@@ -0,0 +1,17 @@
+import { notFound } from "next/navigation";
+import { PayConfig } from "../../../../../../../components/pay/PayConfig";
+import { getAPIKey } from "../../../../../../api/lib/getAPIKeys";
+
+export default async function Page(props: {
+  params: {
+    id: string;
+  };
+}) {
+  const apiKey = await getAPIKey(props.params.id);
+
+  if (!apiKey) {
+    notFound();
+  }
+
+  return <PayConfig apiKey={apiKey} />;
+}
@@ -0,0 +1,17 @@
+import { notFound } from "next/navigation";
+import { getAPIKey } from "../../../../../../api/lib/getAPIKeys";
+import { PayWebhooksPage } from "../../components/webhooks.client";
+
+export default async function Page(props: {
+  params: {
+    id: string;
+  };
+}) {
+  const apiKey = await getAPIKey(props.params.id);
+
+  if (!apiKey) {
+    notFound();
+  }
+
+  return <PayWebhooksPage clientId={apiKey.key} />;
+}
@@ -0,0 +1,41 @@
+"use client";
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { useDashboardRouter } from "@/lib/DashboardRouter";
+import type { ApiKey } from "@3rdweb-sdk/react/hooks/useApi";
+
+export function APIKeySelector(props: {
+  apiKeys: ApiKey[];
+  selectedApiKey: ApiKey;
+}) {
+  const router = useDashboardRouter();
+
+  return (
+    <Select
+      value={props.selectedApiKey.id}
+      onValueChange={(keyId) => {
+        const newKey = props.apiKeys.find((x) => x.id === keyId);
+        if (newKey) {
+          router.push(`/dashboard/connect/pay/${newKey.id}`);
+        }
+      }}
+    >
+      <SelectTrigger>
+        <SelectValue>{props.selectedApiKey.name}</SelectValue>
+      </SelectTrigger>
+      <SelectContent>
+        {props.apiKeys.map((key) => (
+          <SelectItem key={key.id} value={key.id}>
+            {key.name}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}
@@ -1,81 +0,0 @@
-"use client";
-
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { TabButtons } from "@/components/ui/tabs";
-import type { ApiKey } from "@3rdweb-sdk/react/hooks/useApi";
-import { PayAnalytics } from "components/pay/PayAnalytics/PayAnalytics";
-import { PayConfig } from "components/pay/PayConfig";
-import { useMemo, useState } from "react";
-import { WebhooksPage } from "./webhooks.client";
-
-export function PayUI(props: {
-  apiKeys: ApiKey[];
-}) {
-  const [selectedKeyId, setSelectedKeyId] = useState<string>(
-    props.apiKeys[0].key,
-  );
-  const [activeTab, setActiveTab] = useState<
-    "settings" | "analytics" | "webhooks"
-  >("analytics");
-
-  const selectedKey = useMemo(() => {
-    // biome-ignore lint/style/noNonNullAssertion: This is a valid use case for non-null assertion
-    return props.apiKeys.find((key) => key.key === selectedKeyId)!;
-  }, [props.apiKeys, selectedKeyId]);
-
-  return (
-    <>
-      <div className="flex-col gap-4 flex lg:flex-row w-full relative">
-        <div className="max-sm:w-full lg:min-w-[200px] lg:absolute right-0 bottom-3 z-10">
-          <Select defaultValue={selectedKeyId} onValueChange={setSelectedKeyId}>
-            <SelectTrigger>
-              <SelectValue>{selectedKey?.name || selectedKeyId}</SelectValue>
-            </SelectTrigger>
-            <SelectContent>
-              {props.apiKeys.map((key) => (
-                <SelectItem key={key.key} value={key.key}>
-                  {key.name}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
-
-        <TabButtons
-          containerClassName="w-full"
-          tabs={[
-            {
-              name: "Analytics",
-              isActive: activeTab === "analytics",
-              onClick: () => setActiveTab("analytics"),
-              isEnabled: true,
-            },
-            {
-              name: "Webhooks",
-              isActive: activeTab === "webhooks",
-              onClick: () => setActiveTab("webhooks"),
-              isEnabled: true,
-            },
-            {
-              name: "Settings",
-              isActive: activeTab === "settings",
-              onClick: () => setActiveTab("settings"),
-              isEnabled: true,
-            },
-          ]}
-        />
-      </div>
-
-      {/* TODO: split this into sub-pages */}
-      {activeTab === "analytics" && <PayAnalytics clientId={selectedKey.key} />}
-      {activeTab === "settings" && <PayConfig apiKey={selectedKey} />}
-      {activeTab === "webhooks" && <WebhooksPage clientId={selectedKey.key} />}
-    </>
-  );
-}
@@ -1,3 +1,5 @@
+"use client";
+
 import { CopyTextButton } from "@/components/ui/CopyTextButton";
 import { Spinner } from "@/components/ui/Spinner/Spinner";
 import { Button } from "@/components/ui/button";
@@ -55,11 +57,11 @@ type Webhook = {
  secret: string;
 };

-export type WebhooksPageProps = {
+type PayWebhooksPageProps = {
  clientId: string;
 };

-export function WebhooksPage(props: WebhooksPageProps) {
+export function PayWebhooksPage(props: PayWebhooksPageProps) {
  const webhooksQuery = useQuery({
    queryKey: ["webhooks", props.clientId],
    queryFn: async () => {
@@ -154,7 +156,7 @@ const formSchema = z.object({
  label: z.string().min(1, "Please enter a label."),
 });

-function CreateWebhookButton(props: PropsWithChildren<WebhooksPageProps>) {
+function CreateWebhookButton(props: PropsWithChildren<PayWebhooksPageProps>) {
  const [open, setOpen] = useState(false);
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
@@ -177,7 +179,9 @@ function CreateWebhookButton(props: PropsWithChildren<WebhooksPageProps>) {
      return json.result as string;
    },
    onSuccess: () => {
-      return queryClient.invalidateQueries(["webhooks", props.clientId]);
+      return queryClient.invalidateQueries({
+        queryKey: ["webhooks", props.clientId],
+      });
    },
  });
  return (
@@ -264,7 +268,7 @@ function CreateWebhookButton(props: PropsWithChildren<WebhooksPageProps>) {
            </FormItem>

            <DialogFooter>
-              <Button type="submit" disabled={createMutation.isLoading}>
+              <Button type="submit" disabled={createMutation.isPending}>
                Create
              </Button>
            </DialogFooter>
@@ -276,7 +280,7 @@ function CreateWebhookButton(props: PropsWithChildren<WebhooksPageProps>) {
 }

 function DeleteWebhookButton(
-  props: PropsWithChildren<WebhooksPageProps & { webhookId: string }>,
+  props: PropsWithChildren<PayWebhooksPageProps & { webhookId: string }>,
 ) {
  const [open, setOpen] = useState(false);
  const queryClient = useQueryClient();
@@ -293,7 +297,9 @@ function DeleteWebhookButton(
      return json.result as string;
    },
    onSuccess: () => {
-      return queryClient.invalidateQueries(["webhooks", props.clientId]);
+      return queryClient.invalidateQueries({
+        queryKey: ["webhooks", props.clientId],
+      });
    },
  });
  return (
@@ -325,7 +331,7 @@ function DeleteWebhookButton(
                },
              );
            }}
-            disabled={deleteMutation.isLoading}
+            disabled={deleteMutation.isPending}
          >
            Yes, Delete Webhook
          </Button>
@@ -0,0 +1,31 @@
+import Link from "next/link";
+
+export default async function Layout(props: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="flex flex-col gap-8 w-full">
+      <div className="flex flex-col lg:flex-row gap-6 justify-between items-start">
+        <div className="max-w-[800px]">
+          <h1 className="text-3xl lg:text-4xl tracking-tight font-bold mb-3">
+            Pay
+          </h1>
+          <p className="text-muted-foreground leading-7">
+            Pay allows your users to purchase cryptocurrencies and execute
+            transactions with their credit card or debit card, or with any token
+            via cross-chain routing.{" "}
+            <Link
+              target="_blank"
+              href="https://portal.thirdweb.com/connect/pay/overview"
+              className="!text-link-foreground"
+            >
+              Learn more
+            </Link>
+          </p>
+        </div>
+      </div>
+
+      {props.children}
+    </div>
+  );
+}
@@ -0,0 +1,5 @@
+import { NoApiKeys } from "../../../../../../components/settings/ApiKeys/NoApiKeys";
+
+export default function Page() {
+  return <NoApiKeys service="Pay in Connect" />;
+}
@@ -1,86 +1,13 @@
-import { COOKIE_ACTIVE_ACCOUNT, COOKIE_PREFIX_TOKEN } from "@/constants/cookie";
-import type { ApiKey } from "@3rdweb-sdk/react/hooks/useApi";
-import { NoApiKeys } from "components/settings/ApiKeys/NoApiKeys";
-import { cookies } from "next/headers";
-import Link from "next/link";
 import { redirect } from "next/navigation";
-import { PayUI } from "./components/pay-ui.client";
+import { getApiKeys } from "../../../../api/lib/getAPIKeys";

-async function getApiKeys(authToken: string) {
-  const res = await fetch(
-    `${process.env.NEXT_PUBLIC_THIRDWEB_API_HOST || "https://api.thirdweb.com"}/v1/keys`,
-    {
-      method: "GET",
+export default async function Page() {
+  const apiKeys = await getApiKeys();
+  const firstKey = apiKeys[0];

-      headers: {
-        "Content-Type": "application/json",
-        Authorization: `Bearer ${authToken}`,
-      },
-    },
-  );
-  const json = await res.json();
-
-  if (json.error) {
-    throw new Error(json.error.message);
-  }
-  return json.data as ApiKey[];
-}
-
-export default async function DashboardConnectPayPage() {
-  const cookiesManager = cookies();
-  const activeAccount = cookiesManager.get(COOKIE_ACTIVE_ACCOUNT)?.value;
-  const authToken = activeAccount
-    ? cookiesManager.get(`${COOKIE_PREFIX_TOKEN}${activeAccount}`)?.value
-    : null;
-
-  if (!authToken) {
-    // redirect to login page
-    redirect(`/login?next=${encodeURIComponent("/dashboard/connect/pay")}`);
+  if (firstKey) {
+    redirect(`/dashboard/connect/pay/${firstKey.id}`);
  }

-  const apiKeys = await getApiKeys(authToken).catch((err) => {
-    console.error("failed to load api keys", err);
-    return [];
-  });
-
-  return (
-    <div className="flex flex-col gap-8 w-full">
-      <div className="flex flex-col lg:flex-row gap-6 justify-between items-start">
-        <div className="max-w-[800px]">
-          <h1 className="text-3xl lg:text-4xl tracking-tight font-bold mb-3">
-            Pay
-          </h1>
-          <p className="text-muted-foreground leading-7">
-            Pay allows your users to purchase cryptocurrencies and execute
-            transactions with their credit card or debit card, or with any token
-            via cross-chain routing.{" "}
-            <Link
-              target="_blank"
-              href="https://portal.thirdweb.com/connect/pay/overview"
-              className="!text-link-foreground"
-            >
-              Learn more
-            </Link>
-          </p>
-        </div>
-      </div>
-
-      {apiKeys.length > 0 ? (
-        <PayUI apiKeys={apiKeys} />
-      ) : (
-        <NoApiKeys
-          service="Pay in Connect"
-          buttonTextOverride={apiKeys.length ? "Enable Pay" : undefined}
-          copyOverride={
-            apiKeys.length
-              ? "You'll need to enable pay as a service in an API Key to use Pay."
-              : undefined
-          }
-        />
-      )}
-    </div>
-  );
+  redirect("/dashboard/connect/pay/no-keys");
 }
-
-// because cookies() is used
-export const dynamic = "force-dynamic";
@@ -0,0 +1,134 @@
+import { ChakraProviderSetup } from "@/components/ChakraProviderSetup";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import { ContractCard } from "components/explore/contract-card";
+import { DeployUpsellCard } from "components/explore/upsells/deploy-your-own";
+import { ALL_CATEGORIES, getCategory } from "data/explore";
+import type { Metadata } from "next";
+import Link from "next/link";
+import { notFound } from "next/navigation";
+
+type ExploreCategoryPageProps = {
+  params: {
+    category: string;
+  };
+};
+
+export const metadata: Metadata = {
+  title: "Explore | Smart Contracts",
+  description:
+    "Browse a large collection of ready-to-deploy contracts that have been built by thirdweb and other contract developers. Find a contract for your specific app's or game's needs.",
+  openGraph: {
+    title: "thirdweb Explore: Smart Contracts & Protocols",
+  },
+};
+
+export async function generateMetadatra(
+  props: ExploreCategoryPageProps,
+): Promise<Metadata> {
+  const category = getCategory(props.params.category);
+  if (!category) {
+    notFound();
+  }
+  return {
+    title: `${category.name} Smart Contracts | Explore`,
+    description: `${category.description} Deploy with one click to Ethereum, Polygon, Optimism, and other EVM blockchains with thirdweb.`,
+  };
+}
+
+export default async function ExploreCategoryPage(
+  props: ExploreCategoryPageProps,
+) {
+  const category = getCategory(props.params.category);
+  if (!category) {
+    notFound();
+  }
+
+  return (
+    <div className="flex flex-col">
+      <Breadcrumb className="py-4 px-6 border-b border-border">
+        <BreadcrumbList>
+          <BreadcrumbItem>
+            <BreadcrumbLink asChild>
+              <Link href="/explore">Explore</Link>
+            </BreadcrumbLink>
+          </BreadcrumbItem>
+          <BreadcrumbSeparator />
+          <BreadcrumbItem>
+            <BreadcrumbPage>
+              {category.displayName || category.name}
+            </BreadcrumbPage>
+          </BreadcrumbItem>
+        </BreadcrumbList>
+      </Breadcrumb>
+      <div className="container py-8 flex flex-col gap-4">
+        <h1 className="mb-3 text-3xl lg:text-5xl font-bold tracking-tighter">
+          {category.displayName || category.name}
+        </h1>
+        <p className="text-base lg:text-lg text-muted-foreground max-w-screen-md">
+          {category.description}{" "}
+          {category.learnMore && (
+            <Link href={category.learnMore}>Learn more</Link>
+          )}
+        </p>
+        <div className="h-10" />
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-5">
+          {category.contracts.map((publishedContractId, idx) => {
+            const publisher: string = Array.isArray(publishedContractId)
+              ? publishedContractId[0].split("/")[0]
+              : publishedContractId.split("/")[0];
+            const contractId: string = Array.isArray(publishedContractId)
+              ? publishedContractId[0].split("/")[1]
+              : publishedContractId.split("/")[1];
+            const modules = Array.isArray(publishedContractId)
+              ? publishedContractId[1]
+              : undefined;
+            const overrides = Array.isArray(publishedContractId)
+              ? publishedContractId[2]
+              : undefined;
+            return (
+              <ContractCard
+                key={publisher + contractId + overrides?.title}
+                publisher={publisher}
+                contractId={contractId}
+                titleOverride={overrides?.title}
+                descriptionOverride={overrides?.description}
+                tracking={{
+                  source: category.id,
+                  itemIndex: `${idx}`,
+                }}
+                isBeta={category.isBeta}
+                modules={
+                  modules?.length
+                    ? modules.map((m) => ({
+                        publisher: m.split("/")[0],
+                        moduleId: m.split("/")[1],
+                      }))
+                    : undefined
+                }
+              />
+            );
+          })}
+        </div>
+
+        <div className="h-16" />
+        {/* TODO: remove this once we update the deploy upsell card */}
+        <ChakraProviderSetup>
+          <DeployUpsellCard />
+        </ChakraProviderSetup>
+      </div>
+    </div>
+  );
+}
+
+export async function generateStaticParams() {
+  return ALL_CATEGORIES.map((category) => ({
+    params: { category },
+  }));
+}
--- a/Show More
+++ b/Show More