Version Packages (#4263 )

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Set default auth mode to prevent double popup (#4274 )
2024-08-25 11:22:32 +12:00 · 2024-08-24 21:08:40 +00:00 · 2024-08-23 23:45:23 +00:00 · 2024-08-23 22:12:08 +00:00 · 2024-08-23 21:00:49 +00:00 · 2024-08-23 13:37:51 -07:00
3394 changed files with 159204 additions and 47784 deletions
@@ -20,6 +20,7 @@
    "playground-web",
    "thirdweb-dashboard",
    "wallet-ui",
+    "portal",
    "@thirdweb-dev/auth",
    "@thirdweb-dev/chains",
    "@thirdweb-dev/cli",
@@ -1,53 +1,56 @@
 # Order is important; the last matching pattern takes the most precedence.

-# Platform team owns everything by default
-
+# default ownership group
 - @jnsdls @joaquim-verges @MananTank @gregfromstl

 # legacy packages

-legacy_packages/auth/ @jnsdls
-legacy_packages/chains/ @jnsdls
-legacy_packages/cli/ @jnsdls
-legacy_packages/contracts-js/ @jnsdls
-legacy_packages/crypto/ @jnsdls
-legacy_packages/generated-abis/ @jnsdls
-legacy_packages/merkletree/ @jnsdls
-legacy_packages/pay/ @jnsdls
-legacy_packages/payments/ @jnsdls
-legacy_packages/react/ @MananTank @jnsdls
-legacy_packages/react-core/ @MananTank @jnsdls
-legacy_packages/react-native/ @jnsdls
-legacy_packages/react-native-compat/ @jnsdls
+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
-legacy_packages/wallets/ @MananTank @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/reactive/ @joaquim-verges @gregfromstl @MananTank @jnsdls
+packages/thirdweb/src/gas/ @joaquim-verges @jnsdls
+packages/thirdweb/src/pay/ @joaquim-verges @gregfromstl @MananTank @jnsdls
+packages/typedoc-gen/ @MananTank @jnsdls @joaquim-verges
+packages/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

-packages/thirdweb/src/react/ @MananTank
-packages/thirdweb/src/reactive/ @MananTank
-packages/thirdweb/src/gas/ @joaquim-verges
-packages/thirdweb/src/pay/ @MananTank @IDubuque
-
-packages/typedoc-gen/ @MananTank
-
-# owned by phil for now
-
-packages/service-utils/ @arcoraven
-packages/eslint-config-thirdweb/ @jnsdls
-packages/tw-tsconfig/ @jnsdls
-packages/unity-js-bridge/ @joaquim-verges @0xFirekeeper
+# apps
+apps/ @jnsdls @joaquim-verges
+apps/dashboard/ @jnsdls @MananTank @joaquim-verges
+apps/playground-web/ @joaquim-verges @gregfromstl @jnsdls @joaquim-verges
+apps/wallet-ui/ @gregfromstl @jnsdls @joaquim-verges @MananTank
+apps/portal/ @gregfromstl @jnsdls @joaquim-verges @MananTank

 # .github folder + .changeset + turbo config is owned by jonas for now
+scripts/ @jnsdls @joaquim-verges
+.github/ @jnsdls @joaquim-verges
+.changeset/config.json @jnsdls @joaquim-verges
+turbo.json @jnsdls @joaquim-verges
+.vscode/ @jnsdls @joaquim-verges

-scripts/ @jnsdls
-.github/ @jnsdls
-.changeset/config.json @jnsdls
-turbo.json @jnsdls
@@ -77,6 +77,21 @@ Many of the tests use forked versions of live chains like mainnet. We fork these

 If you need to use accounts in your tests, use the predefined accounts in `test/src/test-wallets.ts`. These are the default anvil accounts that are pre-funded on the local test forks.

+##### Mocking Network Calls
+
+If your test depends on a downstream network call, you must mock the call using `msw`. You can use one of the existing mocks in `test/src/mocks` or create your own. Once you've created a mock request, setup the server and add all your mocks like so:
+
+```ts
+import { setupServer } from "msw/node";
+import { downloadMock, uploadMock } from "../../../test/src/mocks/storage.js";
+
+const server = setupServer(uploadMock("HASH"), downloadMock({ name: "Test NFT" }));
+
+beforeAll(() => server.listen());
+afterEach(() => server.resetHandlers());
+afterAll(() => server.close());
+```
+
 #### Linting

 We use a linter to maintain best practices across projects. Once your changes are complete (or periodically while making changes), run the linter with the following command from the repo root:
@@ -11,3 +11,6 @@ legacy_packages:
 packages:
  - changed-files:
    - any-glob-to-any-file: "packages/**/*"
+portal:
+  - changed-files:
+    - any-glob-to-any-file: "apps/portal/**/*"
@@ -2,18 +2,3 @@

 Short description of the bug fixed or feature added

-## Changes made
-
- [ ] Public API changes: list the public API changes made if any
- [ ] Internal API changes: explain the internal logic changes
-
-## How to test
-
- [ ] Automated tests: link to unit test file
- [ ] Manual tests: step by step instructions on how to test
-
-## Contributor NFT
-
-Paste in your wallet address below and we will airdrop you a special NFT when your pull request is merged. 
-
-```Address: ```
@@ -19,7 +19,21 @@ env:
  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:
@@ -33,6 +47,8 @@ jobs:
        run: pnpm build:packages

  lint:
+    needs: optimize_ci
+    if: needs.optimize_ci.outputs.skip == 'false'
    timeout-minutes: 15
    name: Lint Packages
    runs-on: ubuntu-latest
@@ -51,6 +67,8 @@ jobs:
      - run: pnpm lint

  test:
+    needs: optimize_ci
+    if: needs.optimize_ci.outputs.skip == 'false'
    timeout-minutes: 15
    name: Unit Tests
    runs-on: ubuntu-latest
@@ -77,6 +95,8 @@ jobs:
          verbose: true

  e2e:
+    needs: optimize_ci
+    if: needs.optimize_ci.outputs.skip == 'false'
    timeout-minutes: 15
    name: E2E Tests
    runs-on: ubuntu-latest
@@ -142,35 +162,11 @@ jobs:
            echo "Bundling failed"
            exit 1
          fi
-      
-
-  benchmark:
-    # cannot run benchmarks on merge group
-    if: github.event_name != 'merge_group'
-    timeout-minutes: 15
-    name: "Benchmarks"
-    runs-on: ubuntu-latest
-    steps:
-      - name: Check out the code
-        uses: actions/checkout@v4
-
-      - name: Setup & Install
-        uses: ./.github/composite-actions/install
-
-      - name: Set up foundry
-        uses: foundry-rs/foundry-toolchain@v1
-        with:
-          cache: false
-
-      - name: Run benchmarks
-        uses: CodSpeedHQ/action@v2
-        with:
-          token: ${{ secrets.CODSPEED_TOKEN }}
-          run: "pnpm bench"

  size:
+    needs: optimize_ci
    # only run on pull requests
-    if: github.event_name == 'pull_request'
+    if:  github.event_name == 'pull_request' && needs.optimize_ci.outputs.skip == 'false'
    timeout-minutes: 15
    name: "Size"
    runs-on: ubuntu-latest
@@ -27,7 +27,20 @@ env:
  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:
@@ -41,6 +54,8 @@ jobs:
        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
@@ -54,6 +69,8 @@ jobs:
      - 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
@@ -74,6 +91,8 @@ jobs:
          verbose: true

  e2e:
+    needs: optimize_ci
+    if: needs.optimize_ci.outputs.skip == 'false'
    timeout-minutes: 15
    name: E2E Tests
    runs-on: ubuntu-latest
@@ -1,75 +0,0 @@
-# On the Version Packages branch
-# Generate and Commit the Typedoc JSON files and the Snippets JSON files
-
-name: Commit Release Artifacts
-
-on:
-  push:
-    branches:
-      - changeset-release/main
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  # cancel any previous runs if they were started before this one
-  cancel-in-progress: true
-
-env:
-  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
-  TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
-  TW_SECRET_KEY: ${{ secrets.TW_SECRET_KEY }}
-
-jobs:
-  release-artifacts:
-    timeout-minutes: 60
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout branch
-        uses: actions/checkout@v4
-
-      # bun setup is required, because pnpm typdoc will run pnpm build and some packages uses bun for build
-      - name: Setup bun
-        uses: oven-sh/setup-bun@v1
-        with:
-          bun-version: 1.0.35
-
-      - name: Install
-        uses: ./.github/composite-actions/install
-
-      - name: Build
-        run: pnpm build
-
-      - name: Typedoc
-        run: pnpm typedoc
-
-      - name: Generate Docs
-        run: |
-          cd legacy_packages/sdk
-          pnpm generate-docs
-          cd ../react-core
-          pnpm generate-docs
-          cd ../react
-          pnpm generate-docs
-          cd ../..
-
-      - name: Generate Snippets
-        run: pnpm generate-snippets
-
-      - name: Commit changes
-        run: |
-          git config --local user.email "[email protected]"
-          git config --local user.name "GitHub Action"
-          git status
-          git add legacy_packages/react/typedoc/documentation.json.gz
-          git add legacy_packages/react-core/typedoc/documentation.json.gz
-          git add legacy_packages/react-native/typedoc/documentation.json.gz
-          git add legacy_packages/sdk/typedoc/documentation.json.gz
-          git add legacy_packages/storage/typedoc/documentation.json.gz
-          git add legacy_packages/wallets/typedoc/documentation.json.gz
-          git add packages/thirdweb/typedoc/documentation.json.gz
-          git add snippets/feature_snippets_react.json
-          git add snippets/feature_snippets_sdk.json
-          git add snippets/snippets.json
-          git commit -m "Commit Release Artifacts [skip ci]"
-          git push
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
@@ -14,7 +14,7 @@ public/dist
 .idea/
 .yalc/
 yalc.lock
-build/
+./build/
 playwright-report/
 .env/

@@ -25,4 +25,11 @@ legacy_packages/cli/artifacts/
 codecov

 # Remove sitemap files (generated at build time)
-sitemap*.xml
+sitemap*.xml
+
+# typedoc
+legacy_packages/*/typedoc/*
+packages/*/typedoc/*
+
+*storybook.log
+storybook-static
@@ -18,5 +18,8 @@
  },
  "[json]": {
    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[markdown]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
 }
@@ -40,6 +40,9 @@ NEXT_PUBLIC_STRIPE_KEY=

 NEXT_PUBLIC_STRIPE_PAYMENT_METHOD_CFG_ID=

+# Needed for contract analytics / blockchain data information
+CHAINSAW_API_KEY=
+
 #
 # Private (server)
 #
@@ -5,6 +5,7 @@ module.exports = {
    "plugin:import/typescript",
    "plugin:@next/next/recommended",
    "plugin:promise/recommended",
+    "plugin:storybook/recommended"
  ],
  rules: {
    "react-compiler/react-compiler": "error",
@@ -15,6 +16,21 @@ module.exports = {
        message:
          'Are you *sure* you need to use "useEffect" here? If you loading any async function prefer using "useQuery".',
      },
+      {
+        selector: "CallExpression[callee.name='defineChain']",
+        message:
+          "Use useV5DashboardChain instead if you are using it inside a component",
+      },
+      {
+        selector: "CallExpression[callee.name='defineDashboardChain']",
+        message:
+          "Use useV5DashboardChain instead if you are using it inside a component",
+      },
+      {
+        selector: "CallExpression[callee.name='mapV4ChainToV5Chain']",
+        message:
+          "Use useV5DashboardChain instead if you are using it inside a component",
+      },
    ],
    "no-restricted-imports": [
      "error",
@@ -65,6 +81,12 @@ module.exports = {
            message:
              "Import from `@chakra-ui/react` instead of `@chakra-ui/menu`.",
          },
+          {
+            name: "next/navigation",
+            importNames: ["useRouter"],
+            message:
+              'Use `import { useDashboardRouter } from "@/lib/DashboardRouter";` instead',
+          },
        ],
      },
    ],
@@ -0,0 +1,32 @@
+import type { StorybookConfig } from "@storybook/nextjs";
+
+import { dirname, join } from "node:path";
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string): string {
+  return dirname(require.resolve(join(value, "package.json")));
+}
+const config: StorybookConfig = {
+  stories: ["../src/**/*.stories.tsx"],
+  addons: [
+    getAbsolutePath("@storybook/addon-onboarding"),
+    getAbsolutePath("@storybook/addon-links"),
+    getAbsolutePath("@storybook/addon-essentials"),
+    getAbsolutePath("@chromatic-com/storybook"),
+    getAbsolutePath("@storybook/addon-interactions"),
+  ],
+  framework: {
+    name: getAbsolutePath("@storybook/nextjs"),
+    options: {},
+  },
+  refs: {
+    "@chakra-ui/react": {
+      disable: true,
+    },
+  },
+  staticDirs: ["../public"],
+};
+export default config;
@@ -0,0 +1,37 @@
+import type { Preview } from "@storybook/react";
+import "@/styles/globals.css";
+import { Inter as interFont } from "next/font/google";
+// biome-ignore lint/correctness/noUnusedImports: <explanation>
+import React from "react";
+import { cn } from "../src/@/lib/utils";
+
+// Note: Wrapping the Stoy with AppRouterProviders makes the storybook server time SUPER SLOW
+// so let's just not have it there - all stories should be independent from context anyway and just rely on props
+
+const fontSans = interFont({
+  subsets: ["latin"],
+  variable: "--font-sans",
+});
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+
+  decorators: [
+    (Story) => {
+      return (
+        <div className={cn("font-sans antialiased", fontSans.variable)}>
+          <Story />
+        </div>
+      );
+    },
+  ],
+};
+
+export default preview;
@@ -5,8 +5,8 @@ const ContentSecurityPolicy = `
  img-src * data: blob:;
  media-src * data: blob:;
  object-src 'none';
-  style-src 'self' 'unsafe-inline';
-  font-src 'self';
+  style-src 'self' 'unsafe-inline' https://vercel.live;
+  font-src 'self' https://vercel.live https://assets.vercel.com;
  frame-src * data:;
  script-src 'self' 'unsafe-eval' 'unsafe-inline' 'wasm-unsafe-eval' 'inline-speculation-rules' *.thirdweb.com *.thirdweb-dev.com vercel.live js.stripe.com pg.paper.xyz portal.usecontext.io;
  connect-src * data: blob:;
@@ -18,7 +18,9 @@
    "build:analyze": "ANALYZE=true pnpm run build",
    "knip": "knip",
    "playwright": "playwright test",
-    "update-checkly": "npx checkly deploy"
+    "update-checkly": "npx checkly deploy",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
  },
  "dependencies": {
    "@chakra-ui/react": "^2.8.2",
@@ -27,7 +29,7 @@
    "@coinbase/onchainkit": "^0.14.2",
    "@emotion/react": "11.11.4",
    "@emotion/styled": "11.11.5",
-    "@hookform/resolvers": "^3.6.0",
+    "@hookform/resolvers": "^3.9.0",
    "@n8tb1t/use-scroll-position": "^2.0.3",
    "@radix-ui/react-alert-dialog": "^1.1.1",
    "@radix-ui/react-aspect-ratio": "^1.0.3",
@@ -40,25 +42,20 @@
    "@radix-ui/react-select": "^2.1.1",
    "@radix-ui/react-separator": "^1.1.0",
    "@radix-ui/react-slot": "^1.1.0",
-    "@radix-ui/react-toast": "^1.2.1",
+    "@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.8.0",
-    "@stripe/react-stripe-js": "^2.7.2",
+    "@sentry/nextjs": "^8.26.0",
+    "@stripe/react-stripe-js": "^2.7.3",
    "@stripe/stripe-js": "^3.5.0",
-    "@tanstack/query-async-storage-persister": "^4.36.1",
    "@tanstack/react-query": "^4.36.1",
-    "@tanstack/react-query-persist-client": "^4.36.1",
    "@tanstack/react-table": "^8.17.3",
-    "@thirdweb-dev/chains": "workspace:*",
    "@thirdweb-dev/react": "workspace:*",
-    "@thirdweb-dev/react-core": "workspace:*",
    "@thirdweb-dev/sdk": "workspace:*",
    "@thirdweb-dev/service-utils": "workspace:*",
    "@thirdweb-dev/storage": "workspace:*",
-    "@thirdweb-dev/wallets": "workspace:*",
    "@vercel/og": "^0.6.2",
    "abitype": "1.0.5",
    "chakra-react-select": "^4.7.6",
@@ -71,12 +68,11 @@
    "flat": "^6.0.1",
    "framer-motion": "^11.2.12",
    "fuse.js": "7.0.0",
-    "idb-keyval": "^6.2.1",
-    "ipaddr.js": "^2.2.0",
    "ioredis": "^5.4.1",
+    "ipaddr.js": "^2.2.0",
    "lottie-react": "^2.4.0",
    "lucide-react": "^0.399.0",
-    "next": "14.2.4",
+    "next": "14.2.5",
    "next-plausible": "^3.12.0",
    "next-seo": "^6.5.0",
    "next-themes": "^0.3.0",
@@ -85,13 +81,11 @@
    "pluralize": "^8.0.0",
    "posthog-js": "1.128.3",
    "posthog-js-opensource": "npm:[email protected]",
-    "prettier": "^3.3.2",
    "prism-react-renderer": "^2.3.1",
    "prismjs": "^1.29.0",
    "qrcode": "^1.5.3",
    "react": "18.3.1",
    "react-children-utilities": "^2.10.0",
-    "react-confetti": "^6.1.0",
    "react-day-picker": "^8.10.1",
    "react-dom": "18.3.1",
    "react-dropzone": "^14.2.3",
@@ -108,21 +102,30 @@
    "server-only": "^0.0.1",
    "sonner": "^1.5.0",
    "spdx-correct": "^3.2.0",
-    "spin-wheel-game": "1.0.3-alpha.3",
    "swagger-ui-react": "^5.17.14",
-    "tailwind-merge": "^2.3.0",
+    "tailwind-merge": "^2.5.2",
    "tailwindcss-animate": "^1.0.7",
    "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.4",
    "@next/eslint-plugin-next": "^14.2.4",
-    "@playwright/test": "^1.44.1",
+    "@playwright/test": "1.44.1",
+    "@storybook/addon-essentials": "^8.2.9",
+    "@storybook/addon-interactions": "^8.2.9",
+    "@storybook/addon-links": "^8.2.9",
+    "@storybook/addon-onboarding": "^8.2.9",
+    "@storybook/blocks": "^8.2.9",
+    "@storybook/nextjs": "^8.2.9",
+    "@storybook/react": "^8.2.9",
+    "@storybook/test": "^8.2.9",
    "@types/color": "^3.0.6",
    "@types/node": "20.14.9",
    "@types/papaparse": "^5.3.14",
@@ -137,22 +140,18 @@
    "@typescript-eslint/parser": "7.14.1",
    "autoprefixer": "^10.4.19",
    "checkly": "^4.7.0",
-    "dotenv": "^16.4.5",
    "eslint": "8.57.0",
    "eslint-config-biome": "^1.7.3",
-    "eslint-config-prettier": "9.1.0",
    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-inclusive-language": "^2.2.1",
-    "eslint-plugin-prettier": "^5.1.3",
    "eslint-plugin-promise": "^6.2.0",
-    "eslint-plugin-react": "7.34.3",
    "eslint-plugin-react-compiler": "0.0.0-experimental-51a85ea-20240601",
-    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-storybook": "^0.8.0",
    "knip": "^5.23.1",
    "next-sitemap": "^4.2.3",
    "next-unused": "^0.0.6",
-    "tailwindcss": "^3.4.4",
-    "typescript": "5.5.2"
+    "storybook": "^8.2.9",
+    "tailwindcss": "^3.4.10",
+    "typescript": "5.5.4"
  },
  "next-unused": {
    "alias": {},
@@ -179,4 +178,4 @@
    "unreleased versions",
    "not UCAndroid > 0"
  ]
-}
+}
@@ -0,0 +1,30 @@
+{
+  "applinks": {
+    "apps": ["XYHGSFAMHX.com.thirdweb.demo"],
+    "details": [
+      {
+        "appIDs": ["XYHGSFAMHX.com.thirdweb.demo"],
+        "components": [
+          {
+            "#": "no_universal_links",
+            "exclude": true,
+            "comment": "Matches any URL with a fragment that equals no_universal_links and instructs the system not to open it as a universal link."
+          },
+          {
+            "/": "/mobile-wallet-protocol",
+            "comment": "Matches any URL with a path that starts with /mobile-wallet-protocol for coinbase wallet mobile redirects."
+          },
+          {
+            "/": "/dashboard/*",
+            "exclude": true,
+            "comment": "no universal link for dashboard"
+          }
+        ]
+      }
+    ]
+  },
+  "webcredentials": {
+    "apps": ["XYHGSFAMHX.com.thirdweb.demo"]
+  },
+  "appclips": {}
+}
@@ -0,0 +1,15 @@
+[
+  {
+    "relation": [
+      "delegate_permission/common.handle_all_urls",
+      "delegate_permission/common.get_login_creds"
+    ],
+    "target": {
+      "namespace": "android_app",
+      "package_name": "com.thirdweb.demo",
+      "sha256_cert_fingerprints": [
+        "40:EB:0D:96:57:F3:D8:1F:BA:87:B8:E4:26:E0:3A:DB:C8:35:96:A8:A2:B2:55:F0:B1:64:F1:39:F8:6F:7E:EB"
+      ]
+    }
+  }
+]
@@ -119,11 +119,6 @@ function redirects() {
      destination: "/template/erc721",
      permanent: false,
    },
-    {
-      source: "/abuse",
-      destination: "https://forms.gle/v9UJtHbVw8fXypcd7",
-      permanent: false,
-    },
    {
      source: "/create-api-key",
      destination: "/dashboard/settings/api-keys",
@@ -136,12 +131,17 @@ function redirects() {
    },
    {
      source: "/dashboard/connect",
-      destination: "/dashboard/connect/playground",
+      destination: "/dashboard/connect/in-app-wallets",
+      permanent: false,
+    },
+    {
+      source: "/dashboard/connect/playground",
+      destination: "https://playground.thirdweb.com/connect/sign-in/button",
      permanent: false,
    },
    {
      source: "/dashboard/wallet",
-      destination: "/dashboard/connect/playground",
+      destination: "https://playground.thirdweb.com/connect/sign-in/button",
      permanent: false,
    },
    {
@@ -166,7 +166,7 @@ function redirects() {
    },
    {
      source: "/dashboard/wallets",
-      destination: "/dashboard/connect/playground",
+      destination: "https://playground.thirdweb.com/connect/sign-in/button",
      permanent: false,
    },
    {
@@ -186,7 +186,7 @@ function redirects() {
    },
    {
      source: "/dashboard/wallets/connect",
-      destination: "/dashboard/connect/playground",
+      destination: "https://playground.thirdweb.com/connect/sign-in/button",
      permanent: false,
    },
    {
@@ -275,6 +275,20 @@ function redirects() {
      destination: "/dashboard/connect/ecosystem/:slug/permissions",
      permanent: false,
    },
+    // temporarily redirect cli login to support page
+    {
+      source: "/cli/login",
+      destination:
+        "https://support.thirdweb.com/troubleshooting-errors/7Y1BqKNvtLdBv5fZkRZZB3/issue-linking-device-on-the-authorization-page-via-thirdweb-cli/cn9LRA3ax7XCP6uxwRYdvx",
+      permanent: false,
+    },
+
+    // temporary redirect gas -> explore page
+    {
+      source: "/gas",
+      destination: "/explore",
+      permanent: false,
+    },
  ];
 }

@@ -0,0 +1,49 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
+import { MenuIcon } from "lucide-react";
+import { useState } from "react";
+import { NavLink } from "../ui/NavLink";
+
+export function BurgerMenuButton(props: {
+  links?: { href: string; label: React.ReactNode }[];
+  footer?: React.ReactNode;
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogTrigger asChild>
+        <Button size="icon" variant="outline">
+          <MenuIcon strokeWidth={1} />
+        </Button>
+      </DialogTrigger>
+      <DialogContent
+        className="p-6 rounded-xl"
+        dialogCloseClassName="hidden"
+        onClick={(e) => {
+          if (e.target instanceof HTMLAnchorElement) {
+            setIsOpen(false);
+          }
+        }}
+      >
+        <div className="flex flex-col gap-2">
+          {props.links?.map((link) => {
+            return (
+              <Button size="sm" variant="ghost" asChild key={link.href}>
+                <NavLink
+                  href={link.href}
+                  className="!text-left justify-start flex gap-2 h-auto py-3"
+                  activeClassName="bg-accent"
+                >
+                  {link.label}
+                </NavLink>
+              </Button>
+            );
+          })}
+        </div>
+        {props.footer}
+      </DialogContent>
+    </Dialog>
+  );
+}
@@ -0,0 +1,33 @@
+import type React from "react";
+import { cn } from "../../lib/utils";
+import { NavLink } from "../ui/NavLink";
+
+export type SidebarContentProps = {
+  header?: React.ReactNode;
+  links?: { href: string; label: React.ReactNode }[];
+  className?: string;
+};
+
+export function Sidebar(props: SidebarContentProps) {
+  return (
+    <aside
+      className={cn("w-[240px] flex-shrink-0 hidden lg:block", props.className)}
+    >
+      <div className="sticky top-0 pt-8">
+        {props.header}
+        <div className="flex flex-col border-l-2 border-border">
+          {props.links?.map((link) => (
+            <NavLink
+              key={link.href}
+              href={link.href}
+              className="text-sm py-1.5 pl-4 text-muted-foreground hover:text-foreground border-l-2 ml-[-2px] border-transparent hover:border-foreground transition-colors"
+              activeClassName="text-foreground border-link-foreground"
+            >
+              {link.label}
+            </NavLink>
+          ))}
+        </div>
+      </div>
+    </aside>
+  );
+}
@@ -0,0 +1,142 @@
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { ThirdwebMiniLogo } from "app/components/ThirdwebMiniLogo";
+import Link from "next/link";
+import {
+  SiDiscord,
+  SiGithub,
+  SiInstagram,
+  SiLinkedin,
+  SiReddit,
+  SiTiktok,
+  SiX,
+  SiYoutube,
+} from "react-icons/si";
+
+type AppFooterProps = {
+  className?: string;
+};
+
+export function AppFooter(props: AppFooterProps) {
+  return (
+    <footer
+      className={cn(
+        "bg-background border-t border-border py-6 md:py-8 w-full",
+        props.className,
+      )}
+    >
+      <div className="container flex flex-col gap-4 md:gap-6">
+        {/* top row */}
+        <div className="flex flex-col md:flex-row gap-4 md:justify-between md:items-center">
+          <div className="flex flex-row gap-3 items-center">
+            <ThirdwebMiniLogo className="h-7" />
+            <p className="text-sm text-secondary-foreground">© 2024 thirdweb</p>
+          </div>
+          <div className="flex flex-row gap-3">
+            <Button size="icon" variant="ghost" asChild className="size-9">
+              <Link href="https://github.com/thirdweb-dev" target="_blank">
+                <SiGithub className="text-secondary-foreground size-5" />
+              </Link>
+            </Button>
+            <Button size="icon" variant="ghost" asChild className="size-9">
+              <Link href="https://www.tiktok.com/@thirdweb" target="_blank">
+                <SiTiktok className="text-secondary-foreground size-5" />
+              </Link>
+            </Button>
+            <Button size="icon" variant="ghost" asChild className="size-9">
+              <Link href="https://www.instagram.com/thirdweb/" target="_blank">
+                <SiInstagram className="text-secondary-foreground size-5" />
+              </Link>
+            </Button>
+            <Button size="icon" variant="ghost" asChild className="size-9">
+              <Link
+                href="hhttps://www.linkedin.com/company/third-web/"
+                target="_blank"
+              >
+                <SiLinkedin className="text-secondary-foreground size-5" />
+              </Link>
+            </Button>
+            <Button size="icon" variant="ghost" asChild className="size-9">
+              <Link href="https://www.youtube.com/@thirdweb_" target="_blank">
+                <SiYoutube className="text-secondary-foreground size-5" />
+              </Link>
+            </Button>
+            <Button size="icon" variant="ghost" asChild className="size-9">
+              <Link href="https://discord.gg/thirdweb" target="_blank">
+                <SiDiscord className="text-secondary-foreground size-5" />
+              </Link>
+            </Button>
+            <Button size="icon" variant="ghost" asChild className="size-9">
+              <Link href="https://www.reddit.com/r/thirdweb/" target="_blank">
+                <SiReddit className="text-secondary-foreground size-5" />
+              </Link>
+            </Button>
+            <Button size="icon" variant="ghost" asChild className="size-9">
+              <Link href="https://x.com/thirdweb" target="_blank">
+                <SiX className="text-secondary-foreground size-5" />
+              </Link>
+            </Button>
+          </div>
+        </div>
+        {/* bottom row */}
+        <div className="grid grid-rows-5 grid-cols-2 grid-flow-col gap-2 md:flex md:flex-row md:justify-between">
+          <Link
+            className="py-[6px] px-[10px] text-secondary-foreground text-sm hover:underline"
+            href="/"
+          >
+            Home
+          </Link>
+          <Link
+            className="py-[6px] px-[10px] text-secondary-foreground text-sm hover:underline"
+            href="https://blog.thirdweb.com"
+            target="_blank"
+          >
+            Blog
+          </Link>
+          <Link
+            className="py-[6px] px-[10px] text-secondary-foreground text-sm hover:underline"
+            href="https://portal.thirdweb.com/changelog"
+            target="_blank"
+          >
+            Changelog
+          </Link>
+          <Link
+            className="py-[6px] px-[10px] text-secondary-foreground text-sm hover:underline"
+            href="https://feedback.thirdweb.com/"
+            target="_blank"
+          >
+            Feedback
+          </Link>
+          <Link
+            className="py-[6px] px-[10px] text-secondary-foreground text-sm hover:underline"
+            href="https://thirdweb.com/privacy"
+            target="_blank"
+          >
+            Privacy Policy
+          </Link>
+          <Link
+            className="py-[6px] px-[10px] text-secondary-foreground text-sm hover:underline"
+            href="https://thirdweb.com/tos"
+            target="_blank"
+          >
+            Terms of Service
+          </Link>
+          <Link
+            className="py-[6px] px-[10px] text-secondary-foreground text-sm hover:underline"
+            href="https://thirdweb.com/gas"
+            target="_blank"
+          >
+            Gas Estimator
+          </Link>
+          <Link
+            className="py-[6px] px-[10px] text-secondary-foreground text-sm hover:underline"
+            href="https://thirdweb.com/chainlist"
+            target="_blank"
+          >
+            Chain List
+          </Link>
+        </div>
+      </div>
+    </footer>
+  );
+}
@@ -0,0 +1,109 @@
+"use client";
+
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+import { useMemo } from "react";
+
+export type ThirdwebAreaChartProps<TConfig extends ChartConfig> = {
+  // metadata
+  title: string;
+  description?: string;
+  // chart config
+  config: TConfig;
+  data: Array<Record<keyof TConfig, number> & { time: number | string | Date }>;
+  showLegend?: boolean;
+
+  // chart className
+  chartClassName?: string;
+};
+
+export function ThirdwebAreaChart<TConfig extends ChartConfig>(
+  props: ThirdwebAreaChartProps<TConfig>,
+) {
+  const configKeys = useMemo(() => Object.keys(props.config), [props.config]);
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{props.title}</CardTitle>
+        {props.description && (
+          <CardDescription>{props.description}</CardDescription>
+        )}
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={props.config} className={props.chartClassName}>
+          <AreaChart
+            accessibilityLayer
+            data={props.data}
+            margin={{
+              left: 12,
+              right: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="time"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              tickFormatter={(value) => new Date(value).toLocaleDateString()}
+            />
+            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
+            <defs>
+              {configKeys.map((key) => (
+                <linearGradient
+                  key={key}
+                  id={`fill_${key}`}
+                  x1="0"
+                  y1="0"
+                  x2="0"
+                  y2="1"
+                >
+                  <stop
+                    offset="5%"
+                    stopColor={`var(--color-${key})`}
+                    stopOpacity={0.8}
+                  />
+                  <stop
+                    offset="95%"
+                    stopColor={`var(--color-${key})`}
+                    stopOpacity={0.1}
+                  />
+                </linearGradient>
+              ))}
+            </defs>
+            {configKeys.map((key) => (
+              <Area
+                key={key}
+                dataKey={key}
+                type="natural"
+                fill={`url(#fill_${key})`}
+                fillOpacity={0.4}
+                stroke={`var(--color-${key})`}
+                stackId="a"
+              />
+            ))}
+
+            {props.showLegend && (
+              <ChartLegend content={<ChartLegendContent />} />
+            )}
+          </AreaChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  );
+}
@@ -0,0 +1,91 @@
+"use client";
+
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+import { useMemo } from "react";
+
+export type ThirdwebBarChartProps<TConfig extends ChartConfig> = {
+  // metadata
+  title: string;
+  description?: string;
+  // chart config
+  config: TConfig;
+  data: Array<Record<keyof TConfig, number> & { time: number | string | Date }>;
+  showLegend?: boolean;
+  variant?: "stacked" | "grouped";
+  // chart className
+  chartClassName?: string;
+};
+
+export function ThirdwebBarChart<TConfig extends ChartConfig>(
+  props: ThirdwebBarChartProps<TConfig>,
+) {
+  const configKeys = useMemo(() => Object.keys(props.config), [props.config]);
+  // if there are more than 4 keys then we should stack them by default
+  const variant =
+    props.variant || configKeys.length > 4 ? "stacked" : "grouped";
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{props.title}</CardTitle>
+        {props.description && (
+          <CardDescription>{props.description}</CardDescription>
+        )}
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={props.config} className={props.chartClassName}>
+          <BarChart accessibilityLayer data={props.data}>
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="time"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={10}
+              tickFormatter={(value) => new Date(value).toLocaleDateString()}
+            />
+            <ChartTooltip content={<ChartTooltipContent hideLabel />} />
+            {props.showLegend && (
+              <ChartLegend content={<ChartLegendContent />} />
+            )}
+            {configKeys.map((key, idx) => (
+              <Bar
+                key={key}
+                dataKey={key}
+                // if stacked then they should all be the same stackId
+                // if grouped then they should all be unique stackId (so the key works great)
+                stackId={variant === "stacked" ? "a" : key}
+                fill={`var(--color-${key})`}
+                // if stacked then we need to figure out the radius based on the index in the array
+                // if grouped then we can just use the same radius for all
+                radius={
+                  variant === "stacked"
+                    ? idx === 0
+                      ? [0, 0, 4, 4]
+                      : idx === configKeys.length - 1
+                        ? [4, 4, 0, 0]
+                        : [0, 0, 0, 0]
+                    : [4, 4, 4, 4]
+                }
+              />
+            ))}
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  );
+}
@@ -1,10 +1,9 @@
 "use client";

 import { Button } from "@/components/ui/button";
+import { ClientOnly } from "components/ClientOnly/ClientOnly";
 import { Moon, Sun } from "lucide-react";
 import { useTheme } from "next-themes";
-import * as React from "react";
-import { ClientOnly } from "../../components/ClientOnly/ClientOnly";
 import { Skeleton } from "./ui/skeleton";

 export function ColorModeToggle() {
@@ -1,9 +1,18 @@
 "use client";

-import { ThemeProvider as NextThemesProvider } from "next-themes";
+import { ThemeProvider as NextThemesProvider, useTheme } from "next-themes";
 import type { ThemeProviderProps } from "next-themes/dist/types";
-import * as React from "react";
+import { useEffect } from "react";

 export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
 }
+
+export function useForceDarkTheme() {
+  const { setTheme } = useTheme();
+
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    setTheme("dark");
+  }, [setTheme]);
+}
@@ -0,0 +1,46 @@
+import { Highlight } from "prism-react-renderer";
+import { cn } from "../../lib/utils";
+import { CopyButton } from "./CopyButton";
+import { Card } from "./card";
+
+interface CodeBlockProps {
+  code: string;
+  language?: string;
+  className?: string;
+  canCopy?: boolean;
+}
+
+export const CodeBlock = ({
+  code,
+  language = "sh",
+  canCopy = true,
+}: CodeBlockProps) => {
+  return (
+    <Highlight code={code} language={language}>
+      {({ className, tokens, getLineProps, getTokenProps }) => (
+        <Card className={className}>
+          {canCopy && (
+            <CopyButton text={code} className="float-right p-2 m-2" />
+          )}
+
+          <div
+            className={cn(
+              "block font-mono text-sm whitespace-pre-wrap p-4 overflow-auto",
+              className,
+            )}
+          >
+            {tokens.map((line, i) => (
+              // biome-ignore lint/suspicious/noArrayIndexKey: index IS the key here
+              <div {...getLineProps({ line, key: i })} key={i}>
+                {line.map((token, key) => (
+                  // biome-ignore lint/suspicious/noArrayIndexKey: index IS the key here
+                  <span {...getTokenProps({ token, key })} key={key} />
+                ))}
+              </div>
+            ))}
+          </div>
+        </Card>
+      )}
+    </Highlight>
+  );
+};
@@ -10,9 +10,9 @@ import {
  AlertDialogTrigger,
 } from "@/components/ui/alert-dialog";
 import type { buttonVariants } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
 import type { VariantProps } from "class-variance-authority";
 import type React from "react";
-import { cn } from "../../lib/utils";

 export interface ConfirmationDialogProps
  extends VariantProps<typeof buttonVariants> {
@@ -1,5 +1,6 @@
 "use client";

+import { cn } from "@/lib/utils";
 import { CopyTextButton } from "./CopyTextButton";

 export function CopyAddressButton(props: {
@@ -22,7 +23,7 @@ export function CopyAddressButton(props: {
      textToCopy={props.address}
      textToShow={shortenedAddress}
      tooltip="Copy Address"
-      className="font-mono text-sm"
+      className={cn("font-mono text-sm", props.className)}
      variant={props.variant}
      copyIconPosition={props.copyIconPosition}
    />
@@ -1,8 +1,8 @@
 "use client";

+import { cn } from "@/lib/utils";
 import { CheckIcon, CopyIcon } from "lucide-react";
 import { useState } from "react";
-import { cn } from "../../lib/utils";
 import { Button } from "./button";
 import { ToolTipLabel } from "./tooltip";

@@ -1,8 +1,8 @@
 "use client";

+import { cn } from "@/lib/utils";
 import { CheckIcon, CopyIcon } from "lucide-react";
 import { useState } from "react";
-import { cn } from "../../lib/utils";
 import { Button } from "./button";
 import { ToolTipLabel } from "./tooltip";

@@ -23,10 +23,15 @@ export function CopyTextButton(props: {
 }) {
  const [isCopied, setIsCopied] = useState(false);
  const copyButton = isCopied ? (
-    <CheckIcon className={cn("size-3 text-green-500", props.iconClassName)} />
+    <CheckIcon
+      className={cn("size-3 text-green-500 shrink-0", props.iconClassName)}
+    />
  ) : (
    <CopyIcon
-      className={cn("size-3 text-muted-foreground", props.iconClassName)}
+      className={cn(
+        "size-3 text-muted-foreground shrink-0",
+        props.iconClassName,
+      )}
    />
  );

@@ -36,7 +41,7 @@ export function CopyTextButton(props: {
        variant={props.variant || "outline"}
        aria-label={props.tooltip}
        className={cn(
-          "h-auto w-auto px-2.5 py-1.5 flex gap-2 rounded-lg text-foreground",
+          "h-auto w-auto px-2.5 py-1.5 flex gap-2 rounded-lg text-foreground font-normal",
          props.className,
        )}
        onClick={() => {
@@ -47,13 +52,13 @@ export function CopyTextButton(props: {
      >
        {props.copyIconPosition === "right" ? (
          <>
-            {props.textToShow}
+            <span className="truncate min-w-0"> {props.textToShow} </span>
            {copyButton}
          </>
        ) : (
          <>
            {copyButton}
-            {props.textToShow}
+            <span className="truncate min-w-0"> {props.textToShow} </span>
          </>
        )}
      </Button>
@@ -69,7 +69,7 @@ export function DatePickerWithRange(props: {
        <DynamicHeight>
          <div>
            {!isValid && (
-              <p className="text-sm pt-2 justify-center text-destructive-foreground text-center flex items-center gap-2">
+              <p className="text-sm pt-2 justify-center text-destructive-text text-center flex items-center gap-2">
                <CalendarX2Icon className="h-4 w-4" />
                Invalid date range
              </p>
@@ -113,9 +113,9 @@ export function DatePickerWithRange(props: {
                  }
                }}
                classNames={{
-                  day_range_start: "!bg-inverted",
+                  day_range_start: "!bg-inverted !text-inverted-foreground",
                  day_range_end:
-                    "!bg-inverted/20 !text-inverted pointer-events-none",
+                    "!bg-inverted/50 !text-inverted-foreground pointer-events-none",
                }}
              />
            )}
@@ -135,9 +135,9 @@ export function DatePickerWithRange(props: {
                  }
                }}
                classNames={{
-                  day_range_end: "!bg-inverted",
+                  day_range_end: "!bg-inverted !text-inverted-foreground",
                  day_range_start:
-                    "!bg-inverted/20 !text-inverted pointer-events-none",
+                    "!bg-inverted/50 !text-inverted-foreground pointer-events-none",
                }}
              />
            )}
@@ -1,7 +1,8 @@
 "use client";

+import { useIsomorphicLayoutEffect } from "@/lib/useIsomorphicLayoutEffect";
 import type React from "react";
-import { useLayoutEffect, useRef, useState } from "react";
+import { useRef, useState } from "react";

 export function DynamicHeight(props: {
  children: React.ReactNode;
@@ -33,11 +34,11 @@ export function DynamicHeight(props: {
  );
 }

-export function useHeightObserver() {
+function useHeightObserver() {
  const elementRef = useRef<HTMLDivElement>(null);
  const [height, setHeight] = useState<number | undefined>();

-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
    const element = elementRef.current;
    if (!element) {
      return;
@@ -0,0 +1,25 @@
+.unorderedList,
+.orderedList {
+  @apply pl-5 leading-relaxed list-none text-secondary-foreground;
+}
+
+.unorderedList > li {
+  @apply pb-1 pl-2 list-disc;
+}
+
+.orderedList > li {
+  @apply pb-1 pl-2 list-decimal;
+}
+
+.unorderedList > li::marker {
+  @apply text-muted-foreground !m-0 text-left;
+}
+
+.orderedList > li::marker {
+  @apply text-muted-foreground text-left;
+}
+
+.unorderedList > li:hover::marker,
+.orderedList > li:hover::marker {
+  @apply text-foreground;
+}
@@ -0,0 +1,9 @@
+import styles from "./List.module.css";
+
+export function UnorderedList(props: { children?: React.ReactNode }) {
+  return <ul className={styles.unorderedList}>{props.children}</ul>;
+}
+
+export function OrderedList(props: { children?: React.ReactNode }) {
+  return <ul className={styles.orderedList}>{props.children}</ul>;
+}
@@ -0,0 +1,24 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+export type NavButtonProps = {
+  className?: string;
+  activeClassName?: string;
+  href: string;
+};
+
+export function NavLink(props: React.PropsWithChildren<NavButtonProps>) {
+  const pathname = usePathname();
+  const isActive = pathname === props.href;
+  return (
+    <Link
+      href={props.href}
+      className={cn(props.className, isActive && props.activeClassName)}
+    >
+      {props.children}
+    </Link>
+  );
+}
@@ -1,7 +1,8 @@
 "use client";

+import { useIsomorphicLayoutEffect } from "@/lib/useIsomorphicLayoutEffect";
 import { cn } from "@/lib/utils";
-import { useLayoutEffect, useRef } from "react";
+import { useRef } from "react";
 import styles from "./ScrollShadow.module.css";

 export function ScrollShadow(props: {
@@ -17,7 +18,7 @@ export function ScrollShadow(props: {
  const shadowRightEl = useRef<HTMLDivElement>(null);
  const wrapperEl = useRef<HTMLDivElement>(null);

-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
    const content = scrollableEl.current;
    const shadowTop = shadowTopEl.current;
    const shadowBottom = shadowBottomEl.current;
@@ -10,7 +10,7 @@ const alertVariants = cva(
      variant: {
        default: "bg-background text-foreground",
        destructive:
-          "bg-destructive/10 border-destructive/50 dark:border-destructive [&>svg]:text-destructive",
+          "bg-destructive/30 border-destructive/50 dark:border-destructive [&>svg]:text-destructive",
        info: "bg-primary/10 border-primary/50 dark:border-primary [&>svg]:text-primary",
        warning:
          "bg-warning/10 border-warning/50 dark:border-warning [&>svg]:text-warning",
@@ -41,7 +41,7 @@ const AlertTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
  <h5
    ref={ref}
-    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+    className={cn("mb-1.5 font-medium leading-none tracking-tight", className)}
    {...props}
  />
 ));
@@ -53,7 +53,10 @@ const AlertDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
  <div
    ref={ref}
-    className={cn("text-sm [&_p]:leading-relaxed", className)}
+    className={cn(
+      "text-sm [&_p]:leading-relaxed text-secondary-foreground",
+      className,
+    )}
    {...props}
  />
 ));
@@ -4,7 +4,7 @@ import type * as React from "react";
 import { cn } from "@/lib/utils";

 const badgeVariants = cva(
-  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 leading-4",
+  "inline-flex items-center rounded-full border border-border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 leading-4",
  {
    variants: {
      variant: {
@@ -44,10 +44,13 @@ export interface ButtonProps
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, asChild = false, ...props }, ref) => {
    const Comp = asChild ? Slot : "button";
+    const btnOnlyProps =
+      Comp === "button" ? { type: "button" as const } : undefined;
    return (
      <Comp
        className={cn(buttonVariants({ variant, size, className }))}
        ref={ref}
+        {...btnOnlyProps}
        {...props}
      />
    );
@@ -9,7 +9,7 @@ const Card = React.forwardRef<
  <div
    ref={ref}
    className={cn(
-      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      "rounded-lg border border-border bg-card text-card-foreground shadow-sm",
      className,
    )}
    {...props}
@@ -0,0 +1,368 @@
+"use client";
+
+import * as React from "react";
+import * as RechartsPrimitive from "recharts";
+
+import { cn } from "@/lib/utils";
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: "", dark: ".dark" } as const;
+
+export type ChartConfig = {
+  [k in string]: {
+    label?: React.ReactNode;
+    icon?: React.ComponentType;
+  } & (
+    | { color?: string; theme?: never }
+    | { color?: never; theme: Record<keyof typeof THEMES, string> }
+  );
+};
+
+type ChartContextProps = {
+  config: ChartConfig;
+};
+
+const ChartContext = React.createContext<ChartContextProps | null>(null);
+
+function useChart() {
+  const context = React.useContext(ChartContext);
+
+  if (!context) {
+    throw new Error("useChart must be used within a <ChartContainer />");
+  }
+
+  return context;
+}
+
+const ChartContainer = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    config: ChartConfig;
+    children: React.ComponentProps<
+      typeof RechartsPrimitive.ResponsiveContainer
+    >["children"];
+  }
+>(({ id, className, children, config, ...props }, ref) => {
+  const uniqueId = React.useId();
+  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
+
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        data-chart={chartId}
+        ref={ref}
+        className={cn(
+          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
+          className,
+        )}
+        {...props}
+      >
+        <ChartStyle id={chartId} config={config} />
+        <RechartsPrimitive.ResponsiveContainer>
+          {children}
+        </RechartsPrimitive.ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>
+  );
+});
+ChartContainer.displayName = "Chart";
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+  const colorConfig = Object.entries(config).filter(
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    ([_, config]) => config.theme || config.color,
+  );
+
+  if (!colorConfig.length) {
+    return null;
+  }
+
+  return (
+    <style
+      // biome-ignore lint/security/noDangerouslySetInnerHtml: <explanation>
+      dangerouslySetInnerHTML={{
+        __html: Object.entries(THEMES)
+          .map(
+            ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+  .map(([key, itemConfig]) => {
+    const color =
+      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
+      itemConfig.color;
+    return color ? `  --color-${key}: ${color};` : null;
+  })
+  .join("\n")}
+}
+`,
+          )
+          .join("\n"),
+      }}
+    />
+  );
+};
+
+const ChartTooltip = RechartsPrimitive.Tooltip;
+
+const ChartTooltipContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+    React.ComponentProps<"div"> & {
+      hideLabel?: boolean;
+      hideIndicator?: boolean;
+      indicator?: "line" | "dot" | "dashed";
+      nameKey?: string;
+      labelKey?: string;
+    }
+>(
+  (
+    {
+      active,
+      payload,
+      className,
+      indicator = "dot",
+      hideLabel = false,
+      hideIndicator = false,
+      label,
+      labelFormatter,
+      labelClassName,
+      formatter,
+      color,
+      nameKey,
+      labelKey,
+    },
+    ref,
+  ) => {
+    const { config } = useChart();
+
+    const tooltipLabel = React.useMemo(() => {
+      if (hideLabel || !payload?.length) {
+        return null;
+      }
+
+      const [item] = payload;
+      const key = `${labelKey || item.dataKey || item.name || "value"}`;
+      const itemConfig = getPayloadConfigFromPayload(config, item, key);
+      const value =
+        !labelKey && typeof label === "string"
+          ? config[label as keyof typeof config]?.label || label
+          : itemConfig?.label;
+
+      if (labelFormatter) {
+        return (
+          <div className={cn("font-medium", labelClassName)}>
+            {labelFormatter(value, payload)}
+          </div>
+        );
+      }
+
+      if (!value) {
+        return null;
+      }
+
+      return <div className={cn("font-medium", labelClassName)}>{value}</div>;
+    }, [
+      label,
+      labelFormatter,
+      payload,
+      hideLabel,
+      labelClassName,
+      config,
+      labelKey,
+    ]);
+
+    if (!active || !payload?.length) {
+      return null;
+    }
+
+    const nestLabel = payload.length === 1 && indicator !== "dot";
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
+          className,
+        )}
+      >
+        {!nestLabel ? tooltipLabel : null}
+        <div className="grid gap-1.5">
+          {payload.map((item, index) => {
+            const key = `${nameKey || item.name || item.dataKey || "value"}`;
+            const itemConfig = getPayloadConfigFromPayload(config, item, key);
+            const indicatorColor = color || item.payload.fill || item.color;
+
+            return (
+              <div
+                key={item.dataKey}
+                className={cn(
+                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
+                  indicator === "dot" && "items-center",
+                )}
+              >
+                {formatter && item?.value !== undefined && item.name ? (
+                  formatter(item.value, item.name, item, index, item.payload)
+                ) : (
+                  <>
+                    {/* Icon */}
+                    {itemConfig?.icon ? (
+                      <itemConfig.icon />
+                    ) : (
+                      !hideIndicator && (
+                        <div
+                          className={cn(
+                            "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
+                            {
+                              "h-2.5 w-2.5": indicator === "dot",
+                              "w-1": indicator === "line",
+                              "w-0 border-[1.5px] border-dashed bg-transparent":
+                                indicator === "dashed",
+                              "my-0.5": nestLabel && indicator === "dashed",
+                            },
+                          )}
+                          style={
+                            {
+                              "--color-bg": indicatorColor,
+                              "--color-border": indicatorColor,
+                            } as React.CSSProperties
+                          }
+                        />
+                      )
+                    )}
+                    <div
+                      className={cn(
+                        "flex flex-1 gap-2 justify-between leading-none",
+                        nestLabel ? "items-end" : "items-center",
+                      )}
+                    >
+                      <div className="grid gap-1.5">
+                        {nestLabel ? tooltipLabel : null}
+                        <span className="text-muted-foreground">
+                          {itemConfig?.label || item.name}
+                        </span>
+                      </div>
+                      {item.value && (
+                        <span className="font-mono font-medium tabular-nums text-foreground">
+                          {item.value}
+                        </span>
+                      )}
+                    </div>
+                  </>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+  },
+);
+ChartTooltipContent.displayName = "ChartTooltip";
+
+const ChartLegend = RechartsPrimitive.Legend;
+
+const ChartLegendContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> &
+    Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+      hideIcon?: boolean;
+      nameKey?: string;
+    }
+>(
+  (
+    { className, hideIcon = false, payload, verticalAlign = "bottom", nameKey },
+    ref,
+  ) => {
+    const { config } = useChart();
+
+    if (!payload?.length) {
+      return null;
+    }
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "flex items-center justify-center gap-4 overflow-x-auto",
+          verticalAlign === "top" ? "pb-3" : "pt-3",
+          className,
+        )}
+      >
+        {payload.map((item) => {
+          const key = `${nameKey || item.dataKey || "value"}`;
+          const itemConfig = getPayloadConfigFromPayload(config, item, key);
+
+          return (
+            <div
+              key={item.value}
+              className={cn(
+                "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground",
+              )}
+            >
+              {itemConfig?.icon && !hideIcon ? (
+                <itemConfig.icon />
+              ) : (
+                <div
+                  className="h-2 w-2 shrink-0 rounded-[2px]"
+                  style={{
+                    backgroundColor: item.color,
+                  }}
+                />
+              )}
+              {itemConfig?.label}
+            </div>
+          );
+        })}
+      </div>
+    );
+  },
+);
+ChartLegendContent.displayName = "ChartLegend";
+
+// Helper to extract item config from a payload.
+function getPayloadConfigFromPayload(
+  config: ChartConfig,
+  payload: unknown,
+  key: string,
+) {
+  if (typeof payload !== "object" || payload === null) {
+    return undefined;
+  }
+
+  const payloadPayload =
+    "payload" in payload &&
+    typeof payload.payload === "object" &&
+    payload.payload !== null
+      ? payload.payload
+      : undefined;
+
+  let configLabelKey: string = key;
+
+  if (
+    key in payload &&
+    typeof payload[key as keyof typeof payload] === "string"
+  ) {
+    configLabelKey = payload[key as keyof typeof payload] as string;
+  } else if (
+    payloadPayload &&
+    key in payloadPayload &&
+    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
+  ) {
+    configLabelKey = payloadPayload[
+      key as keyof typeof payloadPayload
+    ] as string;
+  }
+
+  return configLabelKey in config
+    ? config[configLabelKey]
+    : config[key as keyof typeof config];
+}
+
+export {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  ChartStyle,
+};
@@ -28,3 +28,19 @@ const Checkbox = React.forwardRef<
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;

 export { Checkbox };
+
+export function CheckboxWithLabel(props: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <label
+      className={cn(
+        "flex gap-2 items-start text-secondary-foreground text-sm cursor-pointer select-none [&>button]:mt-0.5",
+        props.className,
+      )}
+    >
+      {props.children}
+    </label>
+  );
+}
@@ -21,7 +21,7 @@ const DialogOverlay = React.forwardRef<
  <DialogPrimitive.Overlay
    ref={ref}
    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",
+      "fixed inset-0 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
      className,
    )}
    {...props}
@@ -31,20 +31,38 @@ DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;

 const DialogContent = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
+    dialogOverlayClassName?: string;
+    dialogCloseClassName?: string;
+  }
 >(({ className, children, ...props }, ref) => (
  <DialogPortal>
-    <DialogOverlay />
+    <DialogOverlay className={props.dialogOverlayClassName} />
    <DialogPrimitive.Content
      ref={ref}
      className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        "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",
+        // 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",
+        // on desktop - vertically and horizontally center the dialog, animate - zoom and fade in
+        "md:bottom-auto md:left-[50%] md:top-[50%] md:translate-x-[-50%] md:translate-y-[-50%] ",
+        "md:data-[state=closed]:zoom-out-95 md:data-[state=open]:zoom-in-95 ",
+        "md:data-[state=closed]:slide-out-to-left-1/2 md:data-[state=closed]:slide-out-to-top-[48%] ",
+        "md:data-[state=open]:slide-in-from-left-1/2 md:data-[state=open]:slide-in-from-top-[48%] ",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out",
+        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
        className,
      )}
      {...props}
    >
      {children}
-      <DialogPrimitive.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-accent data-[state=open]:text-muted-foreground">
+      <DialogPrimitive.Close
+        className={cn(
+          "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",
+          props.dialogCloseClassName,
+        )}
+      >
        <X className="h-4 w-4" />
        <span className="sr-only">Close</span>
      </DialogPrimitive.Close>
@@ -58,10 +76,7 @@ const DialogHeader = ({
  ...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
  <div
-    className={cn(
-      "flex flex-col space-y-1.5 text-center sm:text-left",
-      className,
-    )}
+    className={cn("flex flex-col space-y-1.5 text-left", className)}
    {...props}
  />
 );
@@ -0,0 +1,118 @@
+"use client";
+
+import * as React from "react";
+import { Drawer as DrawerPrimitive } from "vaul";
+
+import { cn } from "@/lib/utils";
+
+const Drawer = ({
+  shouldScaleBackground = true,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
+  <DrawerPrimitive.Root
+    shouldScaleBackground={shouldScaleBackground}
+    {...props}
+  />
+);
+Drawer.displayName = "Drawer";
+
+const DrawerTrigger = DrawerPrimitive.Trigger;
+
+const DrawerPortal = DrawerPrimitive.Portal;
+
+const DrawerClose = DrawerPrimitive.Close;
+
+const DrawerOverlay = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Overlay
+    ref={ref}
+    className={cn("fixed inset-0 z-50 bg-black/80", className)}
+    {...props}
+  />
+));
+DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
+
+const DrawerContent = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DrawerPortal>
+    <DrawerOverlay />
+    <DrawerPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
+        className,
+      )}
+      {...props}
+    >
+      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+      {children}
+    </DrawerPrimitive.Content>
+  </DrawerPortal>
+));
+DrawerContent.displayName = "DrawerContent";
+
+const DrawerHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
+    {...props}
+  />
+);
+DrawerHeader.displayName = "DrawerHeader";
+
+const DrawerFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+    {...props}
+  />
+);
+DrawerFooter.displayName = "DrawerFooter";
+
+const DrawerTitle = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className,
+    )}
+    {...props}
+  />
+));
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
+
+const DrawerDescription = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+};
@@ -47,7 +47,7 @@ const DropdownMenuSubContent = React.forwardRef<
  <DropdownMenuPrimitive.SubContent
    ref={ref}
    className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
      className,
    )}
    {...props}
@@ -65,7 +65,7 @@ const DropdownMenuContent = React.forwardRef<
      ref={ref}
      sideOffset={sideOffset}
      className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
        className,
      )}
      {...props}
@@ -94,7 +94,7 @@ const FormLabel = React.forwardRef<
  return (
    <Label
      ref={ref}
-      className={cn(error && "text-destructive", className)}
+      className={cn(error && "text-destructive-text", className)}
      htmlFor={formItemId}
      {...props}
    />
@@ -112,12 +112,14 @@ const RequiredFormLabel = React.forwardRef<
    <ToolTipLabel label="Required">
      <Label
        ref={ref}
-        className={cn(error && "text-destructive", "relative", className)}
+        className={cn(error && "text-destructive-text", "relative", className)}
        htmlFor={formItemId}
        {...props}
      >
        {props.children}
-        <span className="absolute -top-1.5 -right-2 text-destructive">•</span>
+        <span className="absolute -top-1.5 -right-2 text-destructive-text">
+          •
+        </span>
      </Label>
    </ToolTipLabel>
  );
@@ -179,7 +181,7 @@ const FormMessage = React.forwardRef<
    <p
      ref={ref}
      id={formMessageId}
-      className={cn("text-sm font-medium text-destructive", className)}
+      className={cn("text-sm font-medium text-destructive-text", className)}
      {...props}
    >
      {body}
@@ -19,7 +19,7 @@ const SelectTrigger = React.forwardRef<
  <SelectPrimitive.Trigger
    ref={ref}
    className={cn(
-      "flex gap-2 h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "flex gap-2 h-10 w-full items-center justify-between rounded-md border border-input bg-card px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
      className,
    )}
    {...props}
@@ -75,7 +75,7 @@ const SelectContent = React.forwardRef<
    <SelectPrimitive.Content
      ref={ref}
      className={cn(
-        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
        position === "popper" &&
          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
        className,
@@ -25,14 +25,14 @@ function SkeletonContainer<T>(props: {
      style={props.style}
      aria-hidden={isLoading ? "true" : "false"}
      className={cn(
-        isLoading && "animate-pulse rounded-lg bg-muted",
+        isLoading && "animate-pulse rounded-lg bg-muted inline-block",
        props.className,
      )}
    >
      <div className={cn(isLoading && "invisible")}>
        <div
          className={cn(
-            "transitino-opacity duration-300",
+            "transition-opacity duration-300",
            isLoading ? "opacity-0" : "opacity-100",
          )}
        >
@@ -15,7 +15,7 @@ const Toaster = ({ ...props }: ToasterProps) => {
      toastOptions={{
        classNames: {
          toast:
-            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg group-[.toaster]:border",
          description: "group-[.toast]:text-muted-foreground",
          actionButton:
            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
@@ -0,0 +1,29 @@
+"use client";
+
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-foreground data-[state=unchecked]:bg-input",
+      className,
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
+      )}
+    />
+  </SwitchPrimitives.Root>
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+
+export { Switch };
@@ -58,7 +58,7 @@ const TableRow = React.forwardRef<
  <tr
    ref={ref}
    className={cn(
-      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      "border-b transition-colors data-[state=selected]:bg-muted",
      className,
    )}
    {...props}
@@ -1,6 +1,9 @@
+"use client";
+
+import { useIsomorphicLayoutEffect } from "@/lib/useIsomorphicLayoutEffect";
+import { cn } from "@/lib/utils";
 import Link from "next/link";
-import { useCallback, useLayoutEffect, useRef, useState } from "react";
-import { cn } from "../../lib/utils";
+import { useCallback, useRef, useState } from "react";
 import { ScrollShadow } from "./ScrollShadow/ScrollShadow";
 import { Button } from "./button";

@@ -50,7 +53,7 @@ export function TabLinks(props: {
        {/* Active line */}
        <div
          ref={lineRef}
-          className="absolute left-0 bottom-0 z-10 h-[2px] bg-foreground rounded-lg fade-in-0 animate-in"
+          className="absolute left-0 bottom-0 h-[2px] bg-foreground rounded-lg fade-in-0 animate-in"
        />
      </ScrollShadow>
      {/* Bottom line */}
@@ -108,7 +111,7 @@ export function TabButtons(props: {
        {/* Active line */}
        <div
          ref={lineRef}
-          className="absolute left-0 bottom-0 z-10 h-[2px] bg-foreground rounded-lg fade-in-0 animate-in"
+          className="absolute left-0 bottom-0 h-[2px] bg-foreground rounded-lg fade-in-0 animate-in"
        />
      </ScrollShadow>
      {/* Bottom line */}
@@ -126,7 +129,7 @@ function useUnderline<El extends HTMLElement>() {
    setActiveTabEl(el);
  }, []);

-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
    if (activeTabEl && containerRef.current && lineRef.current) {
      const containerRect = containerRef.current.getBoundingClientRect();
      const lineEl = lineRef.current;
@@ -1,129 +0,0 @@
-"use client";
-
-import * as ToastPrimitives from "@radix-ui/react-toast";
-import { type VariantProps, cva } from "class-variance-authority";
-import { X } from "lucide-react";
-import * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-const ToastProvider = ToastPrimitives.Provider;
-
-const ToastViewport = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Viewport>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Viewport
-    ref={ref}
-    className={cn(
-      "fixed top-0 z-[10000000] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px] gap-4",
-      className,
-    )}
-    {...props}
-  />
-));
-ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
-
-const toastVariants = cva(
-  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
-  {
-    variants: {
-      variant: {
-        default: "border bg-background text-foreground",
-        destructive:
-          "destructive group border-destructive bg-destructive text-destructive-foreground",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  },
-);
-
-const Toast = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
-    VariantProps<typeof toastVariants>
->(({ className, variant, ...props }, ref) => {
-  return (
-    <ToastPrimitives.Root
-      ref={ref}
-      className={cn(toastVariants({ variant }), className)}
-      {...props}
-    />
-  );
-});
-Toast.displayName = ToastPrimitives.Root.displayName;
-
-const ToastAction = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Action>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Action
-    ref={ref}
-    className={cn(
-      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
-      className,
-    )}
-    {...props}
-  />
-));
-ToastAction.displayName = ToastPrimitives.Action.displayName;
-
-const ToastClose = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Close>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Close
-    ref={ref}
-    className={cn(
-      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
-      className,
-    )}
-    toast-close=""
-    {...props}
-  >
-    <X className="h-4 w-4" />
-  </ToastPrimitives.Close>
-));
-ToastClose.displayName = ToastPrimitives.Close.displayName;
-
-const ToastTitle = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Title>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Title
-    ref={ref}
-    className={cn("text-sm font-semibold", className)}
-    {...props}
-  />
-));
-ToastTitle.displayName = ToastPrimitives.Title.displayName;
-
-const ToastDescription = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Description>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Description
-    ref={ref}
-    className={cn("text-sm opacity-90", className)}
-    {...props}
-  />
-));
-ToastDescription.displayName = ToastPrimitives.Description.displayName;
-
-type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
-
-type ToastActionElement = React.ReactElement<typeof ToastAction>;
-
-export {
-  type ToastProps,
-  type ToastActionElement,
-  ToastProvider,
-  ToastViewport,
-  Toast,
-  ToastTitle,
-  ToastDescription,
-  ToastClose,
-  ToastAction,
-};
@@ -1,31 +0,0 @@
-"use client";
-
-import {
-  Toast,
-  ToastClose,
-  ToastDescription,
-  ToastProvider,
-  ToastTitle,
-  ToastViewport,
-} from "@/components/ui/toast";
-import { useToast } from "@/components/ui/use-toast";
-
-export function Toaster() {
-  const { toasts } = useToast();
-
-  return (
-    <ToastProvider>
-      {toasts.map(({ id, title, description, action, ...props }) => (
-        <Toast key={id} {...props}>
-          <div className="grid gap-1 z-50">
-            {title && <ToastTitle>{title}</ToastTitle>}
-            {description && <ToastDescription>{description}</ToastDescription>}
-          </div>
-          {action}
-          <ToastClose />
-        </Toast>
-      ))}
-      <ToastViewport />
-    </ToastProvider>
-  );
-}
@@ -19,7 +19,7 @@ const TooltipContent = React.forwardRef<
    ref={ref}
    sideOffset={sideOffset}
    className={cn(
-      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-50 overflow-hidden rounded-md border border-border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
      className,
    )}
    {...props}
@@ -31,15 +31,24 @@ export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

 export function ToolTipLabel(props: {
  children: React.ReactNode;
-  label: string;
+  label: React.ReactNode;
  rightIcon?: React.ReactNode;
  leftIcon?: React.ReactNode;
 }) {
+  if (!props.label) {
+    return props.children;
+  }
+
  return (
    <TooltipProvider>
      <Tooltip delayDuration={100} disableHoverableContent={true}>
-        <TooltipTrigger asChild>{props.children}</TooltipTrigger>
-        <TooltipContent sideOffset={10}>
+        <TooltipTrigger asChild className="!pointer-events-auto">
+          {props.children}
+        </TooltipTrigger>
+        <TooltipContent
+          sideOffset={10}
+          className="max-w-[400px] leading-relaxed whitespace-normal"
+        >
          <div className="p-2 text-sm flex items-center gap-1.5">
            {props.leftIcon}
            {props.label}
@@ -0,0 +1,24 @@
+import { useTrack } from "hooks/analytics/useTrack";
+import Link from "next/link";
+import type React from "react";
+
+export type TrackedLinkProps = React.ComponentProps<typeof Link> & {
+  category: string;
+  label?: string;
+  trackingProps?: Record<string, string>;
+};
+
+export function TrackedLinkTW(props: TrackedLinkProps) {
+  const trackEvent = useTrack();
+  const { category, label, trackingProps, ...restProps } = props;
+
+  return (
+    <Link
+      onClick={(e) => {
+        trackEvent({ category, action: "click", label, ...trackingProps });
+        props.onClick?.(e);
+      }}
+      {...restProps}
+    />
+  );
+}
@@ -1,192 +0,0 @@
-/* eslint-disable no-restricted-syntax */
-"use client";
-import { useEffect, useState } from "react";
-
-import type { ToastActionElement, ToastProps } from "@/components/ui/toast";
-
-const TOAST_LIMIT = 5;
-const TOAST_REMOVE_DELAY = 5000; // 5 seconds
-
-type ToasterToast = ToastProps & {
-  id: string;
-  title?: React.ReactNode;
-  description?: React.ReactNode;
-  action?: ToastActionElement;
-};
-
-const actionTypes = {
-  ADD_TOAST: "ADD_TOAST",
-  UPDATE_TOAST: "UPDATE_TOAST",
-  DISMISS_TOAST: "DISMISS_TOAST",
-  REMOVE_TOAST: "REMOVE_TOAST",
-} as const;
-
-let count = 0;
-
-function genId() {
-  count = (count + 1) % Number.MAX_SAFE_INTEGER;
-  return count.toString();
-}
-
-type ActionType = typeof actionTypes;
-
-type Action =
-  | {
-      type: ActionType["ADD_TOAST"];
-      toast: ToasterToast;
-    }
-  | {
-      type: ActionType["UPDATE_TOAST"];
-      toast: Partial<ToasterToast>;
-    }
-  | {
-      type: ActionType["DISMISS_TOAST"];
-      toastId?: ToasterToast["id"];
-    }
-  | {
-      type: ActionType["REMOVE_TOAST"];
-      toastId?: ToasterToast["id"];
-    };
-
-interface State {
-  toasts: ToasterToast[];
-}
-
-const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();
-
-const addToRemoveQueue = (toastId: string) => {
-  if (toastTimeouts.has(toastId)) {
-    return;
-  }
-
-  const timeout = setTimeout(() => {
-    toastTimeouts.delete(toastId);
-    dispatch({
-      type: "REMOVE_TOAST",
-      toastId: toastId,
-    });
-  }, TOAST_REMOVE_DELAY);
-
-  toastTimeouts.set(toastId, timeout);
-};
-
-export const reducer = (state: State, action: Action): State => {
-  switch (action.type) {
-    case "ADD_TOAST":
-      return {
-        ...state,
-        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
-      };
-
-    case "UPDATE_TOAST":
-      return {
-        ...state,
-        toasts: state.toasts.map((t) =>
-          t.id === action.toast.id ? { ...t, ...action.toast } : t,
-        ),
-      };
-
-    case "DISMISS_TOAST": {
-      const { toastId } = action;
-
-      // ! Side effects ! - This could be extracted into a dismissToast() action,
-      // but I'll keep it here for simplicity
-      if (toastId) {
-        addToRemoveQueue(toastId);
-      } else {
-        for (const toast of state.toasts) {
-          addToRemoveQueue(toast.id);
-        }
-      }
-
-      return {
-        ...state,
-        toasts: state.toasts.map((t) =>
-          t.id === toastId || toastId === undefined
-            ? {
-                ...t,
-                open: false,
-              }
-            : t,
-        ),
-      };
-    }
-    case "REMOVE_TOAST":
-      if (action.toastId === undefined) {
-        return {
-          ...state,
-          toasts: [],
-        };
-      }
-      return {
-        ...state,
-        toasts: state.toasts.filter((t) => t.id !== action.toastId),
-      };
-  }
-};
-
-const listeners: Array<(state: State) => void> = [];
-
-let memoryState: State = { toasts: [] };
-
-function dispatch(action: Action) {
-  memoryState = reducer(memoryState, action);
-  for (const listener of listeners) {
-    listener(memoryState);
-  }
-}
-
-type Toast = Omit<ToasterToast, "id">;
-
-function toast({ ...props }: Toast) {
-  const id = genId();
-
-  const update = (props: ToasterToast) =>
-    dispatch({
-      type: "UPDATE_TOAST",
-      toast: { ...props, id },
-    });
-  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id });
-
-  dispatch({
-    type: "ADD_TOAST",
-    toast: {
-      ...props,
-      id,
-      open: true,
-      onOpenChange: (open: boolean) => {
-        if (!open) dismiss();
-      },
-    },
-  });
-
-  return {
-    id: id,
-    dismiss,
-    update,
-  };
-}
-
-function useToast() {
-  const [state, setState] = useState<State>(memoryState);
-
-  // listeners is global, that's fine, I guess?
-  // we add a listener on mount and remove it on unmount
-  useEffect(() => {
-    listeners.push(setState);
-    return () => {
-      const index = listeners.indexOf(setState);
-      if (index > -1) {
-        listeners.splice(index, 1);
-      }
-    };
-  }, []);
-
-  return {
-    ...state,
-    toast,
-    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
-  };
-}
-
-export { useToast, toast };
@@ -1,4 +1,4 @@
-export const LOGGED_IN_ONLY_PATHS = [
+const LOGGED_IN_ONLY_PATHS = [
  // anything that _starts_ with /dashboard is logged in only
  "/dashboard",
  // anything that _starts_ with /cli is logged in only
@@ -6,3 +6,7 @@ export const LOGGED_IN_ONLY_PATHS = [
  "/support",
  // TODO: add any other logged in only paths here
 ];
+
+export function isLoginRequired(pathname: string) {
+  return LOGGED_IN_ONLY_PATHS.some((path) => pathname.startsWith(path));
+}
@@ -1,11 +1,30 @@
+import {
+  DASHBOARD_THIRDWEB_CLIENT_ID,
+  DASHBOARD_THIRDWEB_SECRET_KEY,
+  IPFS_GATEWAY_URL,
+} from "@/constants/env";
 import { createThirdwebClient } from "thirdweb";
-import { DASHBOARD_THIRDWEB_CLIENT_ID, IPFS_GATEWAY_URL } from "./env";

-export const thirdwebClient = createThirdwebClient({
-  clientId: DASHBOARD_THIRDWEB_CLIENT_ID,
-  config: {
-    storage: {
-      gatewayUrl: IPFS_GATEWAY_URL,
-    },
-  },
-});
+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
+ */
@@ -10,3 +10,9 @@ export const IPFS_GATEWAY_URL =

 export const THIRDWEB_ENGINE_FAUCET_WALLET =
  process.env.NEXT_PUBLIC_THIRDWEB_ENGINE_FAUCET_WALLET || "";
+
+export const isProd =
+  (process.env.VERCEL_ENV || process.env.NEXT_PUBLIC_VERCEL_ENV) ===
+  "production";
+
+export const PROD_OR_DEV_URL = isProd ? "thirdweb.com" : "thirdweb-dev.com";
@@ -0,0 +1,139 @@
+"use client";
+
+// eslint-disable-next-line no-restricted-imports
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import {
+  Suspense,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  useSyncExternalStore,
+} from "react";
+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);
+
+export function useDashboardRouter() {
+  const router = useRouter();
+  return useMemo(() => {
+    return {
+      ...router,
+      replace(href: string, options?: { scroll?: boolean }) {
+        LoadingRouteHref.setValue(href);
+        router.replace(href, options);
+      },
+      push(href: string, options?: { scroll?: boolean }) {
+        LoadingRouteHref.setValue(href);
+        router.push(href, options);
+      },
+    };
+  }, [router]);
+}
+
+function useRouterLoadingStatus() {
+  const loadingHref = useSyncExternalStore(
+    LoadingRouteHref.subscribe,
+    LoadingRouteHref.getValue,
+    LoadingRouteHref.getValue,
+  );
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const searchParamsStr = searchParams?.toString();
+
+  const routerHref = pathname + (searchParamsStr ? `?${searchParamsStr}` : "");
+  const isLoading = loadingHref && loadingHref !== routerHref;
+
+  // reset loading on route load
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    if (!isLoading) {
+      LoadingRouteHref.setValue(undefined);
+    }
+  }, [isLoading]);
+
+  return isLoading;
+}
+
+const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+
+// Render this on root
+function DashboardRouterTopProgressBarInner() {
+  const isLoading = useRouterLoadingStatus();
+  const [progress, setProgress] = useState(0);
+
+  const progressStartedRef = useRef(false);
+
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    if (!isLoading) {
+      setProgress(0);
+      progressStartedRef.current = false;
+      return;
+    }
+
+    if (progressStartedRef.current) {
+      return;
+    }
+
+    let isMounted = true;
+
+    progressStartedRef.current = true;
+
+    async function updateProgressBar(progress: number, delay: number) {
+      if (!isMounted) {
+        if (!isLoading) {
+          setProgress(100);
+        }
+        return;
+      }
+
+      setProgress(progress);
+      await wait(delay);
+
+      // increase progress by 10% of the remaining progress
+      // increase the delay by 5% to slow down number of updates for slower progress
+      updateProgressBar(progress + (100 - progress) / 10, delay * 1.05);
+    }
+
+    async function startEffect() {
+      // if the loading state remains for atleast 500ms start the progress bar
+      await wait(500);
+      if (isMounted) {
+        updateProgressBar(0, 100);
+      }
+    }
+
+    startEffect();
+
+    return () => {
+      isMounted = false;
+    };
+  }, [isLoading]);
+
+  const width = isLoading ? progress : 100;
+  return (
+    <span
+      className="block fixed top-0 h-[2px] bg-blue-500"
+      style={{
+        opacity: isLoading ? "100" : "0",
+        width: `${width}%`,
+        transition: width === 0 ? "none" : "width 0.2s ease, opacity 0.3s ease",
+        zIndex: "100000000",
+        pointerEvents: "none",
+      }}
+    />
+  );
+}
+
+// need to wrap with suspense because of useSearchParams usage
+export function DashboardRouterTopProgressBar() {
+  return (
+    <Suspense fallback={null}>
+      <DashboardRouterTopProgressBarInner />
+    </Suspense>
+  );
+}
@@ -0,0 +1,47 @@
+export type Store<T> = {
+  getValue(): T;
+  setValue(newValue: T): void;
+  subscribe(listener: () => void): () => void;
+};
+
+/**
+ * Create a reactive value store
+ * @param initialValue - The initial value to store
+ * @example
+ * ```ts
+ * const store = createStore(0);
+ * ```
+ * @returns A store object
+ * @internal
+ */
+export function createStore<T>(initialValue: T): Store<T> {
+  type Listener = () => void;
+  const listeners = new Set<Listener>();
+
+  let value = initialValue;
+
+  const notify = () => {
+    for (const listener of listeners) {
+      listener();
+    }
+  };
+
+  return {
+    getValue() {
+      return value;
+    },
+    setValue(newValue: T) {
+      if (newValue === value) {
+        return;
+      }
+      value = newValue;
+      notify();
+    },
+    subscribe(listener: Listener) {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+  };
+}
@@ -0,0 +1,17 @@
+import { toast } from "sonner";
+
+// if browser supports sharing use native sharing - use that, else just copy to clipboard + show toast
+export async function shareLink(_data: ShareData) {
+  const data = { ..._data, url: _data.url || window.location.href };
+
+  if (
+    "canShare" in navigator &&
+    navigator.canShare &&
+    navigator.canShare(data)
+  ) {
+    await navigator.share(data);
+  } else {
+    await navigator.clipboard.writeText(data.url);
+    toast.info("URL copied to clipboard");
+  }
+}
@@ -0,0 +1,4 @@
+import { useEffect, useLayoutEffect } from "react";
+
+export const useIsomorphicLayoutEffect =
+  typeof window !== "undefined" ? useLayoutEffect : useEffect;
@@ -3,8 +3,9 @@
@tailwind utilities;

@layer base {
-  :root {
-    /* bg - nuetral  */
+  :root,
+  [data-theme="light"] {
+    /* bg - neutral  */
    --background: 0 0% 100%;
    --secondary: 0 0% 97%;
    --muted: 0 0% 95%;
@@ -15,9 +16,9 @@

    /* bg - colorful */
    --primary: 221.21deg 83.19% 53.33%;
-    --destructive: 0 84.2% 60.2%;
-    --success: 142.09 60.56% 80%;
-    --warning: 40.61deg 96.12% 88%;
+    --destructive: 0 84.2% 94%;
+    --success: 142.09 60.56% 90%;
+    --warning: 40.61deg 96.12% 92%;

    /* Text */
    --foreground: 0 0% 3.9%;
@@ -32,6 +33,8 @@
    --inverted-foreground: var(--background);
    --warning-foreground: 40.61deg 96.12% 40.4%;
    --link-foreground: 221.21deg 83.19% 53.33%;
+    --destructive-text: 0 84.24% 60.2%;
+    --success-text: 142.09 70.56% 35.29%;

    /* Borders */
    --border: 0 0% 80%;
@@ -42,8 +45,9 @@
    --radius: 0.5rem;
  }

-  .dark {
-    /* bg - nuetral  */
+  .dark,
+  [data-theme="dark"] {
+    /* bg - neutral  */
    --background: 0 0% 4.5%;
    --secondary: 0 0% 6.5%;
    --muted: 0 0% 9%;
@@ -53,8 +57,8 @@
    --inverted: var(--foreground);

    /* bg - colorful */
-    --primary: 215.88 100% 60%;
-    --destructive: 358 86% 64%;
+    --primary: 221 83% 54%;
+    --destructive: 0 62.8% 15%;
    --success: 156.2 71.6% 10%;
    --warning: 40.61deg 96.12% 8%;

@@ -66,10 +70,12 @@
    --secondary-foreground: 0 0% 75%;
    --muted-foreground: 0 0% 63.9%;
    --accent-foreground: 0 0% 98%;
-    --destructive-foreground: 358 0% 100%;
+    --destructive-foreground: 0deg 90.6% 80%;
    --success-foreground: 156.2 71.6% 66.86%;
    --warning-foreground: 45.4deg 93.39% 47.45%;
    --link-foreground: 215.88 100% 65%;
+    --destructive-text: 0 84.24% 65%;
+    --success-text: 156.2 71.6% 66.86%;

    /* Borders */
    --border: 0 0% 14.9%;
@@ -87,6 +93,28 @@
  }
 }

+/* shadcn charts */
+@layer base {
+  :root {
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+    /* below is ai generated based on the initial */
+    --chart-6: 200 65% 50%;
+    --chart-7: 120 70% 45%;
+    --chart-8: 45 75% 55%;
+    --chart-9: 260 60% 60%;
+    --chart-10: 0 70% 50%;
+    --chart-11: 180 60% 50%;
+    --chart-12: 100 65% 55%;
+    --chart-13: 360 70% 55%;
+    --chart-14: 240 65% 50%;
+    --chart-15: 80 60% 50%;
+  }
+}
+
@keyframes skeleton {
  0%,
  100% {
@@ -1,5 +1,5 @@
-import type { ContractType } from "@thirdweb-dev/sdk";
-import { constants } from "ethers";
+import type { ContractType } from "constants/contracts";
+import { ZERO_ADDRESS } from "thirdweb";

 export const networkKeys = {
  all: ["network"] as const,
@@ -90,21 +90,20 @@ export const engineKeys = {
  health: (instance: string) =>
    [...engineKeys.all, instance, "health"] as const,
  latestVersion: () => [...engineKeys.all, "latestVersion"] as const,
-  metrics: (engineId: string) =>
-    [...engineKeys.all, engineId, "metrics"] as const,
+  systemMetrics: (engineId: string) =>
+    [...engineKeys.all, engineId, "systemMetrics"] as const,
+  queueMetrics: (engineId: string) =>
+    [...engineKeys.all, engineId, "queueMetrics"] as const,
 };

 export const contractKeys = {
  all: ["contract"] as const,
  lists: () => [...contractKeys.all, "list"] as const,
-  list: (address = constants.AddressZero) =>
-    [...contractKeys.lists(), address] as const,
-  listWithFilters: (
-    address = constants.AddressZero,
-    filters?: ContractType[],
-  ) => [...contractKeys.list(address), { filters }] 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 = constants.AddressZero) =>
+  detail: (address: string = ZERO_ADDRESS) =>
    [...contractKeys.details(), address] as const,
 };

@@ -117,42 +116,37 @@ export const walletKeys = {
 export const splitsKeys = {
  all: ["splits"] as const,
  lists: () => [...splitsKeys.all, "list"] as const,
-  list: (address = constants.AddressZero) =>
-    [...splitsKeys.lists(), address] as const,
-  detail: (address = constants.AddressZero) =>
-    [...splitsKeys.all, address] as const,
-  currencies: (address = constants.AddressZero) =>
+  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 = constants.AddressZero) =>
+  balances: (address = ZERO_ADDRESS) =>
    [...splitsKeys.detail(address), "balances"] as const,
 };

 export const voteKeys = {
  all: ["vote"] as const,
-  detail: (address = constants.AddressZero) =>
-    [...voteKeys.all, address] as const,
-  proposals: (address = constants.AddressZero) =>
+  detail: (address = ZERO_ADDRESS) => [...voteKeys.all, address] as const,
+  proposals: (address = ZERO_ADDRESS) =>
    [...voteKeys.detail(address), "proposals"] as const,
-  proposal: (proposalId = "-1", address = constants.AddressZero) =>
+  proposal: (proposalId = "-1", address = ZERO_ADDRESS) =>
    [...voteKeys.proposals(address), proposalId] as const,
-  balances: (address = constants.AddressZero, addresses = [] as string[]) =>
+  balances: (address = ZERO_ADDRESS, addresses = [] as string[]) =>
    [...voteKeys.detail(address), "balances", { addresses }] as const,
-  delegations: (address = constants.AddressZero) =>
+  delegations: (address = ZERO_ADDRESS) =>
    [...voteKeys.detail(address), "delegations"] as const,
-  delegation: (
-    address = constants.AddressZero,
-    userAddress = constants.AddressZero,
-  ) => [...voteKeys.delegations(address), userAddress] as const,
+  delegation: (address = ZERO_ADDRESS, userAddress = ZERO_ADDRESS) =>
+    [...voteKeys.delegations(address), userAddress] as const,
  userHasVotedOnProposal: (
    proposalId = "-1",
-    address = constants.AddressZero,
-    userAddress = constants.AddressZero,
+    address = ZERO_ADDRESS,
+    userAddress = ZERO_ADDRESS,
  ) =>
    [
      ...voteKeys.proposal(proposalId, address),
      "hasVotedOnProposal",
      userAddress,
    ] as const,
-  canExecuteProposal: (proposalId = "-1", address = constants.AddressZero) =>
+  canExecuteProposal: (proposalId = "-1", address = ZERO_ADDRESS) =>
    [...voteKeys.proposal(proposalId, address), "canExecute"] as const,
 };
@@ -3,24 +3,33 @@
 import { Spinner } from "@/components/ui/Spinner/Spinner";
 import { Button } from "@/components/ui/button";
 import { thirdwebClient } from "@/constants/client";
-import { useSupportedChains } from "@thirdweb-dev/react";
+import { getSDKTheme } from "app/components/sdk-component-theme";
+import { CustomChainRenderer } from "components/selects/CustomChainRenderer";
+import { mapV4ChainToV5Chain } from "contexts/map-chains";
 import { useTrack } from "hooks/analytics/useTrack";
+import { useSupportedChains } from "hooks/chains/configureChains";
 import {
  useAddRecentlyUsedChainId,
  useRecentlyUsedChains,
 } from "hooks/chains/recentlyUsedChains";
+import { useSetIsNetworkConfigModalOpen } from "hooks/networkConfigModal";
 import { useTheme } from "next-themes";
 import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { useCallback, useMemo } from "react";
-import { defineChain } from "thirdweb";
-import { AutoConnect, ConnectButton } from "thirdweb/react";
+import type { Chain } from "thirdweb";
+import { AutoConnect, ConnectButton, useConnectModal } from "thirdweb/react";
 import { useFavoriteChains } from "../../hooks/useFavoriteChains";
 import { useLoggedInUser } from "../../hooks/useLoggedInUser";
 import { popularChains } from "../popularChains";

-export const CustomConnectWallet: React.FC = () => {
+export const CustomConnectWallet = (props: {
+  loginRequired?: boolean;
+  connectButtonClassName?: string;
+}) => {
+  const loginRequired =
+    props.loginRequired === undefined ? true : props.loginRequired;
  const { theme } = useTheme();
  const recentChainsv4 = useRecentlyUsedChains();
  const addRecentlyUsedChainId = useAddRecentlyUsedChainId();
@@ -28,24 +37,24 @@ export const CustomConnectWallet: React.FC = () => {
  const t = theme === "light" ? "light" : "dark";
  const allv4Chains = useSupportedChains();
  const favChainsQuery = useFavoriteChains();
-
+  const setIsNetworkConfigModalOpen = useSetIsNetworkConfigModalOpen();
  const allChains = useMemo(() => {
-    return allv4Chains.map((c) => defineChain(c));
+    return allv4Chains.map(mapV4ChainToV5Chain);
  }, [allv4Chains]);

  const chainSections = useMemo(() => {
    return [
      {
        label: "Favorites",
-        chains: favChainsQuery.data.map(defineChain),
+        chains: favChainsQuery.data.map(mapV4ChainToV5Chain),
      },
      {
        label: "Popular",
-        chains: popularChains.map(defineChain),
+        chains: popularChains,
      },
      {
        label: "Recent",
-        chains: recentChainsv4.map(defineChain),
+        chains: recentChainsv4.map(mapV4ChainToV5Chain),
      },
    ];
  }, [recentChainsv4, favChainsQuery.data]);
@@ -57,7 +66,7 @@ export const CustomConnectWallet: React.FC = () => {
  if (isLoading) {
    return (
      <>
-        <div className="w-[144px] h-[48px] bg-muted border rounded-lg flex items-center justify-center">
+        <div className="w-[144px] h-[48px] bg-muted border border-border rounded-lg flex items-center justify-center">
          <Spinner className="size-4" />
        </div>
        {/* need autoconnect here so that we actually connect */}
@@ -66,7 +75,7 @@ export const CustomConnectWallet: React.FC = () => {
    );
  }

-  if (!isLoggedIn) {
+  if (!isLoggedIn && loginRequired) {
    return (
      <>
        <Button asChild variant="default" className="gap-2" size="lg">
@@ -84,7 +93,7 @@ export const CustomConnectWallet: React.FC = () => {

  return (
    <ConnectButton
-      theme={t}
+      theme={getSDKTheme(t)}
      client={thirdwebClient}
      connectModal={{
        privacyPolicyUrl: "/privacy",
@@ -107,6 +116,9 @@ export const CustomConnectWallet: React.FC = () => {
          console.error("Failed to log out", err);
        }
      }}
+      connectButton={{
+        className: props.connectButtonClassName,
+      }}
      chains={allChains}
      detailsModal={{
        networkSelector: {
@@ -114,8 +126,10 @@ export const CustomConnectWallet: React.FC = () => {
          onSwitch(chain) {
            addRecentlyUsedChainId(chain.id);
          },
-          // TODO: bring this back when it works reliably
-          // renderChain: CustomChainRenderer,
+          renderChain: CustomChainRenderer,
+          onCustomClick: () => {
+            setIsNetworkConfigModalOpen(true);
+          },
        },
      }}
    />
@@ -193,6 +207,35 @@ export function ConnectWalletWelcomeScreen(props: {
  );
 }

+export function useCustomConnectModal() {
+  const { connect } = useConnectModal();
+  const { theme } = useTheme();
+
+  return useCallback(
+    (options?: { chain?: Chain }) => {
+      return connect({
+        client: thirdwebClient,
+        appMetadata: {
+          name: "thirdweb",
+          logoUrl: "https://thirdweb.com/favicon.ico",
+          url: "https://thirdweb.com",
+        },
+        chain: options?.chain,
+        privacyPolicyUrl: "/privacy",
+        termsOfServiceUrl: "/tos",
+        showThirdwebBranding: false,
+        welcomeScreen: () => (
+          <ConnectWalletWelcomeScreen
+            theme={theme === "light" ? "light" : "dark"}
+          />
+        ),
+        theme: getSDKTheme(theme === "light" ? "light" : "dark"),
+      });
+    },
+    [connect, theme],
+  );
+}
+
 /**
 * A link component extends the `Link` component and adds tracking.
 */
@@ -1,35 +1,35 @@
 import {
-  Arbitrum,
-  ArbitrumSepolia,
-  Avalanche,
-  AvalancheFuji,
-  Base,
-  BaseSepoliaTestnet,
-  Binance,
-  BinanceTestnet,
-  Ethereum,
-  Localhost,
-  OpSepoliaTestnet,
-  Optimism,
-  Polygon,
-  PolygonAmoyTestnet,
-  Sepolia,
-} from "@thirdweb-dev/chains";
+  arbitrum,
+  arbitrumSepolia,
+  avalanche,
+  avalancheFuji,
+  base,
+  baseSepolia,
+  bsc,
+  bscTestnet,
+  ethereum,
+  localhost,
+  optimism,
+  optimismSepolia,
+  polygon,
+  polygonAmoy,
+  sepolia,
+} from "thirdweb/chains";

 export const popularChains = [
-  Ethereum,
-  Sepolia,
-  Polygon,
-  PolygonAmoyTestnet,
-  Base,
-  BaseSepoliaTestnet,
-  Arbitrum,
-  ArbitrumSepolia,
-  Optimism,
-  OpSepoliaTestnet,
-  Binance,
-  BinanceTestnet,
-  Avalanche,
-  AvalancheFuji,
-  Localhost,
+  ethereum,
+  sepolia,
+  polygon,
+  polygonAmoy,
+  base,
+  baseSepolia,
+  arbitrum,
+  arbitrumSepolia,
+  optimism,
+  optimismSepolia,
+  bsc,
+  bscTestnet,
+  avalanche,
+  avalancheFuji,
+  localhost,
 ];
@@ -2,11 +2,11 @@ import {
  useIsAdmin,
  useIsAdminOrSelf,
 } from "@3rdweb-sdk/react/hooks/useContractRoles";
-import type { ValidContractInstance } from "@thirdweb-dev/sdk";
+import type { ThirdwebContract } from "thirdweb";
 import type { ComponentWithChildren } from "types/component-with-children";

 interface AdminOnlyProps {
-  contract?: ValidContractInstance;
+  contract: ThirdwebContract;
  fallback?: JSX.Element;
 }

@@ -22,7 +22,9 @@ export const AdminOnly: ComponentWithChildren<AdminOnlyProps> = ({
  return <>{children}</>;
 };

-interface AdminOrSelfOnlyProps extends AdminOnlyProps {
+interface AdminOrSelfOnlyProps {
+  contract: ThirdwebContract;
+  fallback?: JSX.Element;
  /**
   * The address of the account to check against
   */
@@ -1,9 +1,9 @@
 import { useIsLister } from "@3rdweb-sdk/react/hooks/useContractRoles";
-import type { ValidContractInstance } from "@thirdweb-dev/sdk";
+import type { ThirdwebContract } from "thirdweb";
 import type { ComponentWithChildren } from "types/component-with-children";

 interface IListerOnlyProps {
-  contract?: ValidContractInstance;
+  contract: ThirdwebContract;
 }

 export const ListerOnly: ComponentWithChildren<IListerOnlyProps> = ({
@@ -1,9 +1,9 @@
 import { useIsMinter } from "@3rdweb-sdk/react/hooks/useContractRoles";
-import type { ValidContractInstance } from "@thirdweb-dev/sdk";
+import type { ThirdwebContract } from "thirdweb";
 import type { ComponentWithChildren } from "types/component-with-children";

 interface IMinterOnlyProps {
-  contract?: ValidContractInstance;
+  contract: ThirdwebContract;
 }

 export const MinterOnly: ComponentWithChildren<IMinterOnlyProps> = ({
@@ -1,4 +1,3 @@
-import type { Chain } from "@thirdweb-dev/chains";
 import {
  createContext,
  useCallback,
@@ -6,11 +5,12 @@ import {
  useEffect,
  useState,
 } from "react";
+import type { ChainMetadata } from "thirdweb/chains";
 import invariant from "tiny-invariant";

 export type EVMContractInfo = {
  // using null instead of undefined here so that this type can be JSON stringified
-  chain: Chain | null;
+  chain: ChainMetadata | null;
  chainSlug: string;
  contractAddress: string;
 };
@@ -1,56 +1,70 @@
-import { useContract, useContractEvents } from "@thirdweb-dev/react";
-import type { ContractEvent } from "@thirdweb-dev/sdk";
+import { type AbiEvent, formatAbiItem } from "abitype";
 import { useMemo } from "react";
+import {
+  type PreparedEvent,
+  type ThirdwebContract,
+  prepareEvent,
+} from "thirdweb";
+import { useContractEvents } from "thirdweb/react";
+import { useResolveContractAbi } from "./useResolveContractAbi";

-interface InternalTransaction {
-  transactionHash: ContractEvent["transaction"]["transactionHash"];
-  blockNumber: ContractEvent["transaction"]["blockNumber"];
-  events: ContractEvent[];
+export interface InternalTransaction {
+  transactionHash: string;
+  blockNumber: bigint;
+  events: Array<{
+    logIndex: number;
+    address: string;
+    eventName: string;
+    args: readonly unknown[] | Record<string, unknown>;
+  }>;
 }

-export function useActivity(contractAddress?: string, autoUpdate?: boolean) {
-  // const provider = useProvider();
-  const contractQuery = useContract(contractAddress);
+export function useActivity(contract: ThirdwebContract, autoUpdate?: boolean) {
+  const abiQuery = useResolveContractAbi(contract);

-  const eventsQuery = useContractEvents(contractQuery.contract, undefined, {
-    subscribe: autoUpdate,
-    queryFilter: {
-      fromBlock: -20000,
-    },
+  // Get all the PreprareEvents from the contract abis
+  const events: PreparedEvent<AbiEvent>[] = useMemo(() => {
+    const eventsItems = (abiQuery.data || []).filter((o) => o.type === "event");
+    const eventSignatures = eventsItems.map((event) => formatAbiItem(event));
+    return eventSignatures.map((signature) =>
+      prepareEvent({ signature: signature as `event ${string}` }),
+    );
+  }, [abiQuery.data]);
+
+  const eventsQuery = useContractEvents({
+    contract,
+    events,
+    blockRange: 20000,
+    watch: autoUpdate,
  });

  return useMemo(() => {
    if (!eventsQuery.data) {
      return [];
    }
-
    const obj = eventsQuery.data.slice(0, 100).reduce(
      (acc, curr) => {
-        if (acc[curr.transaction.transactionHash]) {
-          acc[curr.transaction.transactionHash].events.push(curr);
-          acc[curr.transaction.transactionHash].events.sort(
-            // biome-ignore lint/suspicious/noExplicitAny: FIXME
-            (a: any, b: any) => b.transaction.logIndex - a.transaction.logIndex,
+        if (acc[curr.transactionHash]) {
+          acc[curr.transactionHash].events.push(curr);
+          acc[curr.transactionHash].events.sort(
+            (a, b) => b.logIndex - a.logIndex,
          );
-          if (
-            acc[curr.transaction.transactionHash].blockNumber >
-            curr.transaction.blockNumber
-          ) {
-            acc[curr.transaction.transactionHash].blockNumber =
-              curr.transaction.blockNumber;
+          if (acc[curr.transactionHash].blockNumber > curr.blockNumber) {
+            acc[curr.transactionHash].blockNumber = curr.blockNumber;
          }
        } else {
-          acc[curr.transaction.transactionHash] = {
-            transactionHash: curr.transaction.transactionHash,
-            blockNumber: curr.transaction.blockNumber,
+          acc[curr.transactionHash] = {
+            transactionHash: curr.transactionHash,
+            blockNumber: curr.blockNumber,
            events: [curr],
          };
        }
-
        return acc;
      },
      {} as Record<string, InternalTransaction>,
    );
-    return Object.values(obj).sort((a, b) => b.blockNumber - a.blockNumber);
+    return Object.values(obj).sort((a, b) =>
+      a.blockNumber > b.blockNumber ? -1 : 1,
+    );
  }, [eventsQuery.data]);
 }
@@ -4,9 +4,9 @@ import {
  useQuery,
  useQueryClient,
 } from "@tanstack/react-query";
-import type { Chain } from "@thirdweb-dev/chains";
+import { THIRDWEB_API_HOST } from "constants/urls";
+import type { ChainMetadata } from "thirdweb/chains";
 import invariant from "tiny-invariant";
-import { THIRDWEB_API_HOST } from "../../../constants/urls";
 import { accountKeys, apiKeys, authorizedWallets } from "../cache-keys";
 import { useMutationWithInvalidate } from "./query/useQueryWithNetwork";
 import { useLoggedInUser } from "./useLoggedInUser";
@@ -73,7 +73,6 @@ export type Account = {
 interface UpdateAccountInput {
  name?: string;
  email?: string;
-  plan?: AccountPlan;
  linkWallet?: boolean;
  subscribeToUpdates?: boolean;
  onboardSkipped?: boolean;
@@ -271,9 +270,9 @@ interface UseAccountInput {
 export function useAccount({ refetchInterval }: UseAccountInput = {}) {
  const { user, isLoggedIn } = useLoggedInUser();

-  return useQuery(
-    accountKeys.me(user?.address as string),
-    async () => {
+  return useQuery({
+    queryKey: accountKeys.me(user?.address as string),
+    queryFn: async () => {
      const res = await fetch(`${THIRDWEB_API_HOST}/v1/account/me`, {
        method: "GET",
        headers: {
@@ -288,19 +287,17 @@ export function useAccount({ refetchInterval }: UseAccountInput = {}) {

      return json.data as Account;
    },
-    {
-      enabled: !!user?.address && isLoggedIn,
-      refetchInterval: refetchInterval ?? false,
-    },
-  );
+    enabled: !!user?.address && isLoggedIn,
+    refetchInterval: refetchInterval ?? false,
+  });
 }

 export function useAccountUsage() {
  const { user, isLoggedIn } = useLoggedInUser();

-  return useQuery(
-    accountKeys.usage(user?.address as string),
-    async () => {
+  return useQuery({
+    queryKey: accountKeys.usage(user?.address as string),
+    queryFn: async () => {
      const res = await fetch(`${THIRDWEB_API_HOST}/v1/account/usage`, {
        method: "GET",
        headers: {
@@ -315,16 +312,16 @@ export function useAccountUsage() {

      return json.data as UsageBillableByService;
    },
-    { enabled: !!user?.address && isLoggedIn },
-  );
+    enabled: !!user?.address && isLoggedIn,
+  });
 }

 export function useAccountCredits() {
  const { user, isLoggedIn } = useLoggedInUser();

-  return useQuery(
-    accountKeys.credits(user?.address as string),
-    async () => {
+  return useQuery({
+    queryKey: accountKeys.credits(user?.address as string),
+    queryFn: async () => {
      const res = await fetch(`${THIRDWEB_API_HOST}/v1/account/credits`, {
        method: "GET",

@@ -347,16 +344,19 @@ export function useAccountCredits() {

      return credits;
    },
-    { enabled: !!user?.address && isLoggedIn },
-  );
+    enabled: !!user?.address && isLoggedIn,
+  });
 }

 export function useWalletStats(clientId: string | undefined) {
  const { user, isLoggedIn } = useLoggedInUser();

-  return useQuery(
-    accountKeys.walletStats(user?.address as string, clientId as string),
-    async () => {
+  return useQuery({
+    queryKey: accountKeys.walletStats(
+      user?.address as string,
+      clientId as string,
+    ),
+    queryFn: async () => {
      const res = await fetch(
        `${THIRDWEB_API_HOST}/v1/account/wallets?clientId=${clientId}`,
        {
@@ -375,8 +375,8 @@ export function useWalletStats(clientId: string | undefined) {

      return json.data as WalletStats;
    },
-    { enabled: !!clientId && !!user?.address && isLoggedIn },
-  );
+    enabled: !!clientId && !!user?.address && isLoggedIn,
+  });
 }

 export function useUpdateAccount() {
@@ -419,7 +419,7 @@ export function useUpdateAccountPlan(waitForWebhook?: boolean) {
  const queryClient = useQueryClient();

  return useMutationWithInvalidate(
-    async (input: { plan: string; feedback?: string; useTrial?: boolean }) => {
+    async (input: { plan: string; feedback?: string }) => {
      invariant(user?.address, "walletAddress is required");

      const res = await fetch(`${THIRDWEB_API_HOST}/v1/account/plan`, {
@@ -495,9 +495,9 @@ export function useUpdateNotifications() {
 export function useCreateBillingSession(enabled = false) {
  const { user } = useLoggedInUser();

-  return useQuery(
-    accountKeys.billingSession(user?.address as string),
-    async () => {
+  return useQuery({
+    queryKey: accountKeys.billingSession(user?.address as string),
+    queryFn: async () => {
      invariant(user?.address, "walletAddress is required");

      const res = await fetch(
@@ -518,8 +518,8 @@ export function useCreateBillingSession(enabled = false) {

      return json.data;
    },
-    { enabled },
-  );
+    enabled,
+  });
 }

 export function useConfirmEmail() {
@@ -637,9 +637,9 @@ export function useCreatePaymentMethod() {

 export function useApiKeys() {
  const { user, isLoggedIn } = useLoggedInUser();
-  return useQuery(
-    apiKeys.keys(user?.address as string),
-    async () => {
+  return useQuery({
+    queryKey: apiKeys.keys(user?.address as string),
+    queryFn: async () => {
      const res = await fetch(`${THIRDWEB_API_HOST}/v1/keys`, {
        method: "GET",

@@ -654,8 +654,8 @@ export function useApiKeys() {
      }
      return json.data as ApiKey[];
    },
-    { enabled: !!user?.address && isLoggedIn },
-  );
+    enabled: !!user?.address && isLoggedIn,
+  });
 }

 export function useCreateApiKey() {
@@ -885,9 +885,9 @@ export function useRevokeAuthorizedWallet() {
 export function useAuthorizedWallets() {
  const { user, isLoggedIn } = useLoggedInUser();

-  return useQuery(
-    authorizedWallets.authorizedWallets(user?.address as string),
-    async () => {
+  return useQuery({
+    queryKey: authorizedWallets.authorizedWallets(user?.address as string),
+    queryFn: async () => {
      const res = await fetch(`${THIRDWEB_API_HOST}/v1/authorized-wallets`, {
        method: "GET",

@@ -903,8 +903,9 @@ export function useAuthorizedWallets() {

      return json.data as AuthorizedWallet[];
    },
-    { enabled: !!user?.address && isLoggedIn, cacheTime: 0 },
-  );
+    enabled: !!user?.address && isLoggedIn,
+    cacheTime: 0,
+  });
 }

 /**
@@ -913,23 +914,21 @@ export function useAuthorizedWallets() {
 export async function fetchChainsFromApi() {
  // always fetch from prod for chains for now
  // TODO: re-visit this
-  const res = await fetch("https://api.thirdweb.com/v1/chains", {
-    method: "GET",
-    headers: {
-      "Content-Type": "application/json",
-    },
-  });
+  const res = await fetch("https://api.thirdweb.com/v1/chains");
  const json = await res.json();

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

-  return json.data as Chain[];
+  return json.data as ChainMetadata[];
 }

 export function useApiChains() {
-  return useQuery(["all-chains"], async () => {
-    return fetchChainsFromApi();
+  return useQuery({
+    queryKey: ["all-chains"],
+    queryFn: () => {
+      return fetchChainsFromApi();
+    },
  });
 }
@@ -1,13 +0,0 @@
-import { useQuery } from "@tanstack/react-query";
-import { useSDK } from "@thirdweb-dev/react";
-import invariant from "tiny-invariant";
-import { walletKeys } from "../cache-keys";
-
-export function useBalanceForAddress(address: string | undefined) {
-  const sdk = useSDK();
-  invariant(address, "Address is not provided");
-  return useQuery(walletKeys.balances(address), async () => {
-    invariant(sdk, "SDK is not initialized");
-    return await sdk.getBalance(address);
-  });
-}
@@ -1,110 +1,73 @@
-import {
-  type ContractWithRoles,
-  type RequiredParam,
-  type RolesForContract,
-  useContractType,
-  useRoleMembers,
-} from "@thirdweb-dev/react";
-import type { ValidContractInstance } from "@thirdweb-dev/sdk";
-import { constants } from "ethers";
-import { useActiveAccount } from "thirdweb/react";
+import { type ThirdwebContract, ZERO_ADDRESS } from "thirdweb";
+import { hasRole } from "thirdweb/extensions/permissions";
+import { useActiveAccount, useReadContract } from "thirdweb/react";
+import type { RequiredParam } from "utils/types";

-function isContractWithRoles(
-  contract: RequiredParam<ValidContractInstance>,
-): contract is ContractWithRoles {
-  if (contract && "roles" in contract) {
-    return true;
-  }
-  return false;
-}
-
-function useIsAccountRole<TContract extends ContractWithRoles>(
-  role: RolesForContract<TContract>[number],
-  contract: RequiredParam<TContract>,
-  account: RequiredParam<string>,
-): boolean {
-  const contractHasRoles = isContractWithRoles(contract);
-  const { data } = useRoleMembers(contract, role);
-
-  if (contractHasRoles === false) {
-    return false;
-  }
-
-  if (data?.includes(constants.AddressZero)) {
-    return true;
-  }
-
-  return !!(account && data?.includes(account));
-}
-
-export function useIsAdmin<TContract extends ValidContractInstance>(
-  contract: RequiredParam<TContract>,
-) {
+export function useIsAdmin(contract: ThirdwebContract) {
  const address = useActiveAccount()?.address;
-  const { data: contractType } = useContractType(contract?.getAddress());
+  const { data: userIsAdmin, isError } = useReadContract(hasRole, {
+    contract,
+    targetAccountAddress: address ?? "",
+    role: "admin",
+    queryOptions: { enabled: !!address },
+  });

-  const contractHasRoles = isContractWithRoles(contract);
-  const isAccountRole = useIsAccountRole(
-    "admin",
-    contractHasRoles ? contract : undefined,
-    address,
-  );
-
-  if (contractType === "custom") {
-    return true;
-  }
-  return isAccountRole;
+  // If the request results in an error, it's likely that the contract is a non-thirdweb contract
+  // in that case we return `true` anyway
+  return userIsAdmin || isError;
 }

-export function useIsAdminOrSelf<TContract extends ValidContractInstance>(
-  contract: RequiredParam<TContract>,
+export function useIsAdminOrSelf(
+  contract: ThirdwebContract,
  self: RequiredParam<string>,
 ) {
  const address = useActiveAccount()?.address;
-  const { data: contractType } = useContractType(contract?.getAddress());
  const isAdmin = useIsAdmin(contract);
-
  if (address === self) {
    return true;
  }
-  if (contractType === "custom") {
-    return true;
-  }
  return isAdmin;
 }

-export function useIsMinter<TContract extends ValidContractInstance>(
-  contract: RequiredParam<TContract>,
-) {
+export function useIsMinter(contract: ThirdwebContract) {
  const address = useActiveAccount()?.address;
-  const { data: contractType } = useContractType(contract?.getAddress());
-  const contractHasRoles = isContractWithRoles(contract);
-  const isAccountRole = useIsAccountRole(
-    "minter",
-    contractHasRoles ? contract : undefined,
-    address,
-  );
+  const userCanMintQuery = useReadContract(hasRole, {
+    contract,
+    targetAccountAddress: address ?? "",
+    role: "minter",
+    queryOptions: { enabled: !!address },
+  });

-  if (contractType === "custom") {
-    return true;
-  }
-  return isAccountRole;
+  const anyoneCanMintQuery = useReadContract(hasRole, {
+    contract,
+    targetAccountAddress: ZERO_ADDRESS,
+    role: "minter",
+  });
+
+  // If both requests "error out", we can safely assume that
+  // this is a custom (aka. non-thirdweb) contract
+  // so we just return `true` in that case
+  const isCustomContract =
+    userCanMintQuery.isError && anyoneCanMintQuery.isError;
+
+  return anyoneCanMintQuery.data || userCanMintQuery.data || isCustomContract;
 }

-export function useIsLister<TContract extends ValidContractInstance>(
-  contract: RequiredParam<TContract>,
-) {
+// Applicable to Marketplace v3 only
+export function useIsLister(contract: ThirdwebContract) {
  const address = useActiveAccount()?.address;
-  const { data: contractType } = useContractType(contract?.getAddress());
-  const contractHasRoles = isContractWithRoles(contract);
-  const isAccountRole = useIsAccountRole(
-    "lister",
-    contractHasRoles ? contract : undefined,
-    address,
-  );
+  const { data: userCanList } = useReadContract(hasRole, {
+    contract,
+    targetAccountAddress: address ?? "",
+    role: "lister",
+    queryOptions: { enabled: !!address },
+  });

-  if (contractType === "custom") {
-    return true;
-  }
-  return isAccountRole;
+  const { data: anyoneCanList } = useReadContract(hasRole, {
+    contract,
+    targetAccountAddress: ZERO_ADDRESS,
+    role: "lister",
+  });
+
+  return anyoneCanList || userCanList;
 }
@@ -0,0 +1,54 @@
+import { useQuery } from "@tanstack/react-query";
+import type { ThirdwebContract } from "thirdweb";
+import { getCompilerMetadata } from "thirdweb/contract";
+import { getContractMetadata, name, symbol } from "thirdweb/extensions/common";
+
+/**
+ * Fetch the contract metadata for Dashboard
+ *
+ * If the contract itself doesn't implement the metadata extension,
+ * we try to fall back to:
+ * 1. name(), symbol()
+ * 2. our API endpoint
+ */
+export function useDashboardContractMetadata(contract: ThirdwebContract) {
+  return useQuery({
+    queryKey: ["contract-metadata-header", contract.chain.id, contract.address],
+    queryFn: async () => {
+      const [contractMetadata, _name, _symbol, compilerMetadata] =
+        await Promise.all([
+          getContractMetadata({ contract }).catch(() => ({
+            image: "",
+            name: "",
+            symbol: "",
+          })),
+          name({ contract }).catch(() => ""),
+          symbol({ contract }).catch(() => ""),
+          getCompilerMetadata(contract).catch(() => undefined),
+        ]);
+
+      /**
+       * Handle the case where the contract.thirdweb.com endpoint returns a very long name
+       * example url: https://contract.thirdweb.com/metadata/324/0x66E298335c5992d599132582De8eaAF75348e6e6
+       * In that case, we split the solidity name on ":" and take the second part
+       */
+      if (compilerMetadata?.name.includes(":")) {
+        const _name = compilerMetadata.name.split(":")[1];
+        if (_name) {
+          compilerMetadata.name = compilerMetadata.name.split(":")[1];
+        }
+      }
+
+      const contractName =
+        contractMetadata?.name || _name || compilerMetadata?.name || "";
+      const contractSymbol = contractMetadata?.symbol || _symbol || "";
+
+      return {
+        name: contractName,
+        symbol: contractSymbol,
+        image: contractMetadata.image || "",
+        contractType: compilerMetadata?.name || "",
+      };
+    },
+  });
+}
@@ -0,0 +1,41 @@
+import { useQuery } from "@tanstack/react-query";
+import type { NFT, ThirdwebContract } from "thirdweb";
+import {
+  getOwnedNFTs as getOwnedERC721,
+  isERC721,
+} from "thirdweb/extensions/erc721";
+import { getOwnedNFTs as getOwnedERC1155 } from "thirdweb/extensions/erc1155";
+import invariant from "tiny-invariant";
+
+/**
+ * This hook is currently used for getting owned NFTs for Create DirectListing/English Auction
+ * It should only be used if our indexing solutions don't support the current network
+ */
+export function useDashboardOwnedNFTs({
+  contract,
+  owner,
+  disabled,
+}: { owner?: string; contract?: ThirdwebContract; disabled?: boolean }) {
+  return useQuery({
+    queryKey: [
+      "owned-nfts",
+      contract?.chain.id || "",
+      contract?.address || "",
+      owner || "",
+    ],
+    queryFn: async (): Promise<NFT[]> => {
+      invariant(contract, "Contract is required");
+      invariant(owner, "owner address is required");
+      const is721 = await isERC721({ contract });
+      if (is721) {
+        return getOwnedERC721({
+          contract,
+          owner,
+        });
+      }
+      // Else default to 1155
+      return getOwnedERC1155({ contract, address: owner });
+    },
+    enabled: !!contract && !!owner && !disabled,
+  });
+}
@@ -0,0 +1,26 @@
+import { thirdwebClient } from "@/constants/client";
+import { useMutation } from "@tanstack/react-query";
+import { upload } from "thirdweb/storage";
+
+type DashboardUploadOptions = {
+  uploadWithoutDirectory?: boolean;
+  metadata?: Record<string, string>;
+};
+
+export function useDashboardStorageUpload(options?: DashboardUploadOptions) {
+  return useMutation({
+    mutationFn: async (files: Array<File | string>): Promise<string[]> => {
+      const uris = await upload({
+        client: thirdwebClient,
+        files,
+        ...options,
+      });
+      // the upload method in SDK v5 has this logic
+      // that will make it return only a string if you upload only 1 file
+      if (typeof uris === "string") {
+        return [uris];
+      }
+      return uris;
+    },
+  });
+}
@@ -25,12 +25,12 @@ export type EmbeddedWalletUser = {
 export function useEmbeddedWallets(clientId: string) {
  const { user, isLoggedIn } = useLoggedInUser();

-  return useQuery(
-    embeddedWalletsKeys.embeddedWallets(
+  return useQuery({
+    queryKey: embeddedWalletsKeys.embeddedWallets(
      user?.address as string,
      clientId as string,
    ),
-    async () => {
+    queryFn: async () => {
      const res = await fetch(
        `${THIRDWEB_EWS_API_HOST}/api/thirdweb/embedded-wallet?clientId=${clientId}&lastAccessedAt=0`,
        {
@@ -46,6 +46,6 @@ export function useEmbeddedWallets(clientId: string) {

      return json.walletUsers as EmbeddedWalletUser[];
    },
-    { enabled: !!user?.address && isLoggedIn && !!clientId },
-  );
+    enabled: !!user?.address && isLoggedIn && !!clientId,
+  });
 }
@@ -1,4 +1,5 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import type { ResultItem } from "components/engine/system-metrics/components/StatusCodes";
 import { THIRDWEB_API_HOST } from "constants/urls";
 import { useState } from "react";
 import { useActiveAccount, useActiveWalletChain } from "thirdweb/react";
@@ -54,9 +55,9 @@ const getEngineRequestHeaders = (token: string | null): HeadersInit => {
 export function useEngineInstances() {
  const { user, isLoggedIn } = useLoggedInUser();

-  return useQuery(
-    engineKeys.instances(user?.address as string),
-    async (): Promise<EngineInstance[]> => {
+  return useQuery({
+    queryKey: engineKeys.instances(user?.address as string),
+    queryFn: async (): Promise<EngineInstance[]> => {
      const res = await fetch(`${THIRDWEB_API_HOST}/v1/engine`, {
        method: "GET",
      });
@@ -78,8 +79,8 @@ export function useEngineInstances() {
        };
      });
    },
-    { enabled: !!user?.address && isLoggedIn },
-  );
+    enabled: !!user?.address && isLoggedIn,
+  });
 }

 // GET Requests
@@ -99,9 +100,9 @@ export type BackendWallet = {
 export function useEngineBackendWallets(instance: string) {
  const token = useLoggedInUser().user?.jwt ?? null;

-  return useQuery(
-    [engineKeys.backendWallets(instance)],
-    async () => {
+  return useQuery({
+    queryKey: [engineKeys.backendWallets(instance)],
+    queryFn: async () => {
      const res = await fetch(`${instance}backend-wallet/get-all?limit=50`, {
        method: "GET",
        headers: getEngineRequestHeaders(token),
@@ -111,8 +112,8 @@ export function useEngineBackendWallets(instance: string) {

      return (json.result as BackendWallet[]) || [];
    },
-    { enabled: !!instance && !!token },
-  );
+    enabled: !!instance && !!token,
+  });
 }

 export interface EngineSystemHealth {
@@ -121,10 +122,13 @@ export interface EngineSystemHealth {
  features?: string[];
 }

-export function useEngineSystemHealth(instanceUrl: string) {
-  return useQuery(
-    engineKeys.health(instanceUrl),
-    async () => {
+export function useEngineSystemHealth(
+  instanceUrl: string,
+  pollInterval: number | false = false,
+) {
+  return useQuery({
+    queryKey: engineKeys.health(instanceUrl),
+    queryFn: async () => {
      const res = await fetch(`${instanceUrl}system/health`, {
        headers: getEngineRequestHeaders(null),
      });
@@ -134,20 +138,57 @@ export function useEngineSystemHealth(instanceUrl: string) {
      const json = (await res.json()) as EngineSystemHealth;
      return json;
    },
-    { enabled: !!instanceUrl },
-  );
+    enabled: !!instanceUrl,
+    refetchInterval: pollInterval,
+  });
+}
+
+export interface EngineSystemQueueMetrics {
+  result: {
+    queued: number;
+    pending: number;
+    latency?: {
+      msToSend: { p50: number; p90: number };
+      msToMine: { p50: number; p90: number };
+    };
+  };
+}
+
+export function useEngineQueueMetrics(
+  instanceUrl: string,
+  pollInterval: number | false = false,
+) {
+  const token = useLoggedInUser().user?.jwt ?? null;
+
+  return useQuery({
+    queryKey: engineKeys.queueMetrics(instanceUrl),
+    queryFn: async () => {
+      const res = await fetch(`${instanceUrl}system/queue`, {
+        headers: getEngineRequestHeaders(token),
+      });
+      if (!res.ok) {
+        throw new Error(`Unexpected status ${res.status}: ${await res.text()}`);
+      }
+      return (await res.json()) as EngineSystemQueueMetrics;
+    },
+    enabled: !!instanceUrl && !!token,
+    refetchInterval: pollInterval,
+  });
 }

 export function useEngineLatestVersion() {
-  return useQuery(engineKeys.latestVersion(), async () => {
-    const res = await fetch(`${THIRDWEB_API_HOST}/v1/engine/latest-version`, {
-      method: "GET",
-    });
-    if (!res.ok) {
-      throw new Error(`Unexpected status ${res.status}: ${await res.text()}`);
-    }
-    const json = await res.json();
-    return json.data.version as string;
+  return useQuery({
+    queryKey: engineKeys.latestVersion(),
+    queryFn: async () => {
+      const res = await fetch(`${THIRDWEB_API_HOST}/v1/engine/latest-version`, {
+        method: "GET",
+      });
+      if (!res.ok) {
+        throw new Error(`Unexpected status ${res.status}: ${await res.text()}`);
+      }
+      const json = await res.json();
+      return json.data.version as string;
+    },
  });
 }

@@ -292,6 +333,7 @@ export type Transaction = {
  gasPrice?: string | null;
  maxFeePerGas?: string | null;
  maxPriorityFeePerGas?: string | null;
+  effectiveGasPrice?: string | null;
  transactionType?: number | null;
  transactionHash?: string | null;
  queuedAt?: string | null;
@@ -340,9 +382,9 @@ type TransactionResponse = {
 export function useEngineTransactions(instance: string, autoUpdate: boolean) {
  const token = useLoggedInUser().user?.jwt ?? null;

-  return useQuery(
-    engineKeys.transactions(instance),
-    async () => {
+  return useQuery({
+    queryKey: engineKeys.transactions(instance),
+    queryFn: async () => {
      const res = await fetch(`${instance}transaction/get-all`, {
        method: "GET",
        headers: getEngineRequestHeaders(token),
@@ -352,11 +394,10 @@ export function useEngineTransactions(instance: string, autoUpdate: boolean) {

      return (json.result as TransactionResponse) || {};
    },
-    {
-      enabled: !!instance && !!token,
-      refetchInterval: autoUpdate ? 4_000 : false,
-    },
-  );
+
+    enabled: !!instance && !!token,
+    refetchInterval: autoUpdate ? 4_000 : false,
+  });
 }

 type WalletConfig =
@@ -381,9 +422,9 @@ type WalletConfig =
 export function useEngineWalletConfig(instance: string) {
  const token = useLoggedInUser().user?.jwt ?? null;

-  return useQuery(
-    engineKeys.walletConfig(instance),
-    async () => {
+  return useQuery({
+    queryKey: engineKeys.walletConfig(instance),
+    queryFn: async () => {
      const res = await fetch(`${instance}configuration/wallets`, {
        method: "GET",
        headers: getEngineRequestHeaders(token),
@@ -393,8 +434,8 @@ export function useEngineWalletConfig(instance: string) {

      return (json.result as WalletConfig) || {};
    },
-    { enabled: !!instance && !!token },
-  );
+    enabled: !!instance && !!token,
+  });
 }

 type CurrencyValue = {
@@ -414,9 +455,9 @@ export function useEngineBackendWalletBalance(

  invariant(chainId, "chainId is required");

-  return useQuery(
-    engineKeys.backendWalletBalance(address, chainId),
-    async () => {
+  return useQuery({
+    queryKey: engineKeys.backendWalletBalance(address, chainId),
+    queryFn: async () => {
      const res = await fetch(
        `${instance}backend-wallet/${chainId}/${address}/get-balance`,
        {
@@ -429,8 +470,8 @@ export function useEngineBackendWalletBalance(

      return (json.result as CurrencyValue) || {};
    },
-    { enabled: !!instance && !!address && !!chainId && !!token },
-  );
+    enabled: !!instance && !!address && !!chainId && !!token,
+  });
 }

 export type EngineAdmin = {
@@ -443,9 +484,9 @@ export function useEnginePermissions(instance: string) {
  const token = useLoggedInUser().user?.jwt ?? null;
  const address = useActiveAccount()?.address;

-  return useQuery(
-    engineKeys.permissions(instance),
-    async () => {
+  return useQuery({
+    queryKey: engineKeys.permissions(instance),
+    queryFn: async () => {
      const res = await fetch(`${instance}auth/permissions/get-all`, {
        method: "GET",
        headers: getEngineRequestHeaders(token),
@@ -459,10 +500,9 @@ export function useEnginePermissions(instance: string) {

      return (json.result as EngineAdmin[]) || [];
    },
-    {
-      enabled: !!instance && !!token && !!address,
-    },
-  );
+
+    enabled: !!instance && !!token && !!address,
+  });
 }

 export type AccessToken = {
@@ -477,9 +517,9 @@ export type AccessToken = {
 export function useEngineAccessTokens(instance: string) {
  const token = useLoggedInUser().user?.jwt ?? null;

-  return useQuery(
-    engineKeys.accessTokens(instance),
-    async () => {
+  return useQuery({
+    queryKey: engineKeys.accessTokens(instance),
+    queryFn: async () => {
      const res = await fetch(`${instance}auth/access-tokens/get-all`, {
        method: "GET",
        headers: getEngineRequestHeaders(token),
@@ -489,8 +529,8 @@ export function useEngineAccessTokens(instance: string) {

      return (json.result as AccessToken[]) || [];
    },
-    { enabled: !!instance && !!token },
-  );
+    enabled: !!instance && !!token,
+  });
 }

 export type KeypairAlgorithm = "ES256" | "RS256" | "PS256";
@@ -507,9 +547,9 @@ export type Keypair = {
 export function useEngineKeypairs(instance: string) {
  const token = useLoggedInUser().user?.jwt ?? null;

-  return useQuery(
-    engineKeys.keypairs(instance),
-    async () => {
+  return useQuery({
+    queryKey: engineKeys.keypairs(instance),
+    queryFn: async () => {
      const res = await fetch(`${instance}auth/keypair/get-all`, {
        method: "GET",
        headers: getEngineRequestHeaders(token),
@@ -519,8 +559,8 @@ export function useEngineKeypairs(instance: string) {

      return (json.result as Keypair[]) || [];
    },
-    { enabled: !!instance && !!token },
-  );
+    enabled: !!instance && !!token,
+  });
 }

 type AddKeypairInput = {
@@ -603,9 +643,9 @@ export type EngineRelayer = {
 export function useEngineRelayer(instance: string) {
  const token = useLoggedInUser().user?.jwt ?? null;

-  return useQuery(
-    engineKeys.relayers(instance),
-    async () => {
+  return useQuery({
+    queryKey: engineKeys.relayers(instance),
+    queryFn: async () => {
      const res = await fetch(`${instance}relayer/get-all`, {
        method: "GET",
        headers: getEngineRequestHeaders(token),
@@ -615,8 +655,8 @@ export function useEngineRelayer(instance: string) {

      return (json.result as EngineRelayer[]) || [];
    },
-    { enabled: !!instance && !!token },
-  );
+    enabled: !!instance && !!token,
+  });
 }

 export type CreateRelayerInput = {
@@ -740,9 +780,9 @@ export interface EngineWebhook {
 export function useEngineWebhooks(instance: string) {
  const token = useLoggedInUser().user?.jwt ?? null;

-  return useQuery(
-    engineKeys.webhooks(instance),
-    async () => {
+  return useQuery({
+    queryKey: engineKeys.webhooks(instance),
+    queryFn: async () => {
      const res = await fetch(`${instance}webhooks/get-all`, {
        method: "GET",
        headers: getEngineRequestHeaders(token),
@@ -752,8 +792,8 @@ export function useEngineWebhooks(instance: string) {

      return (json.result as EngineWebhook[]) || [];
    },
-    { enabled: !!instance && !!token },
-  );
+    enabled: !!instance && !!token,
+  });
 }

 // POST REQUESTS
@@ -1199,9 +1239,9 @@ export function useEngineSendTokens(instance: string) {
 export function useEngineCorsConfiguration(instance: string) {
  const token = useLoggedInUser().user?.jwt ?? null;

-  return useQuery(
-    engineKeys.corsUrls(instance),
-    async () => {
+  return useQuery({
+    queryKey: engineKeys.corsUrls(instance),
+    queryFn: async () => {
      const res = await fetch(`${instance}configuration/cors`, {
        method: "GET",
        headers: getEngineRequestHeaders(token),
@@ -1211,8 +1251,8 @@ export function useEngineCorsConfiguration(instance: string) {

      return (json.result as string[]) || [];
    },
-    { enabled: !!instance && !!token },
-  );
+    enabled: !!instance && !!token,
+  });
 }

 interface SetCorsUrlInput {
@@ -1255,9 +1295,9 @@ export function useEngineIpAllowlistConfiguration(instance: string) {
  // if engine instance is not updated to have IP_ALLOWLIST
  const { data: health } = useEngineSystemHealth(instance);

-  return useQuery(
-    engineKeys.ipAllowlist(instance),
-    async () => {
+  return useQuery({
+    queryKey: engineKeys.ipAllowlist(instance),
+    queryFn: async () => {
      const res = await fetch(`${instance}configuration/ip-allowlist`, {
        method: "GET",
        headers: getEngineRequestHeaders(token),
@@ -1266,11 +1306,10 @@ export function useEngineIpAllowlistConfiguration(instance: string) {
      const json = await res.json();
      return (json.result as string[]) || [];
    },
-    {
-      enabled:
-        !!instance && !!token && health?.features?.includes("IP_ALLOWLIST"),
-    },
-  );
+
+    enabled:
+      !!instance && !!token && health?.features?.includes("IP_ALLOWLIST"),
+  });
 }

 interface SetIpAllowlistInput {
@@ -1323,9 +1362,9 @@ export interface EngineContractSubscription {

 export function useEngineContractSubscription(instance: string) {
  const token = useLoggedInUser().user?.jwt ?? null;
-  return useQuery(
-    engineKeys.contractSubscriptions(instance),
-    async () => {
+  return useQuery({
+    queryKey: engineKeys.contractSubscriptions(instance),
+    queryFn: async () => {
      const res = await fetch(`${instance}contract-subscriptions/get-all`, {
        method: "GET",
        headers: getEngineRequestHeaders(token),
@@ -1334,10 +1373,9 @@ export function useEngineContractSubscription(instance: string) {
      const json = await res.json();
      return json.result as EngineContractSubscription[];
    },
-    {
-      enabled: !!instance && !!token,
-    },
-  );
+
+    enabled: !!instance && !!token,
+  });
 }

 export interface AddContractSubscriptionInput {
@@ -1423,9 +1461,9 @@ export function useEngineSubscriptionsLastBlock(
 ) {
  const token = useLoggedInUser().user?.jwt ?? null;

-  return useQuery(
-    engineKeys.contractSubscriptionsLastBlock(instanceUrl, chainId),
-    async () => {
+  return useQuery({
+    queryKey: engineKeys.contractSubscriptionsLastBlock(instanceUrl, chainId),
+    queryFn: async () => {
      const response = await fetch(
        `${instanceUrl}contract-subscriptions/last-block?chain=${chainId}`,
        {
@@ -1437,11 +1475,10 @@ export function useEngineSubscriptionsLastBlock(
      const json = await response.json();
      return json.result.lastBlock as number;
    },
-    {
-      enabled: !!instanceUrl && !!token,
-      refetchInterval: autoUpdate ? 5_000 : false,
-    },
-  );
+
+    enabled: !!instanceUrl && !!token,
+    refetchInterval: autoUpdate ? 5_000 : false,
+  });
 }

 export interface EngineResourceMetrics {
@@ -1449,20 +1486,20 @@ export interface EngineResourceMetrics {
  data: {
    cpu: number;
    memory: number;
+    errorRate: ResultItem[];
+    statusCodes: ResultItem[];
+    requestVolume: ResultItem[];
  };
 }

-export function useEngineResourceMetrics(engineId: string) {
+export function useEngineSystemMetrics(engineId: string) {
  const [enabled, setEnabled] = useState(true);

-  return useQuery(
-    engineKeys.metrics(engineId),
-    async () => {
+  return useQuery({
+    queryKey: engineKeys.systemMetrics(engineId),
+    queryFn: async () => {
      const res = await fetch(
        `${THIRDWEB_API_HOST}/v1/engine/${engineId}/metrics`,
-        {
-          method: "GET",
-        },
      );
      if (!res.ok) {
        setEnabled(false);
@@ -1471,10 +1508,9 @@ export function useEngineResourceMetrics(engineId: string) {
      const json = (await res.json()) as EngineResourceMetrics;
      return json;
    },
-    {
-      // Poll every 5s unless disabled.
-      enabled,
-      refetchInterval: 5_000,
-    },
-  );
+
+    // Poll every 5s unless disabled.
+    enabled,
+    refetchInterval: 5_000,
+  });
 }
--- a/Show More
+++ b/Show More