Version Packages (#7164 )

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
docs: add docs on aggregates (#7201 )
2025-05-29 11:10:34 -07:00 · 2025-05-29 17:37:27 +00:00 · 2025-05-29 10:30:15 -07:00 · 2025-05-29 09:00:53 -07:00 · 2025-05-29 12:12:00 +00:00 · 2025-05-29 00:55:53 +00:00
2624 changed files with 142985 additions and 35231 deletions
@@ -0,0 +1,103 @@
+---
+description: Rules for writing features in apps/dashboard
+globs: dashboard
+alwaysApply: false
+---
+
+# Reusable Core UI Components
+
+- Always import from the central UI library under `@/components/ui/*` – e.g. `import { Button } from "@/components/ui/button"`.
+- Prefer composable primitives over custom markup: `Button`, `Input`, `Select`, `Tabs`, `Card`, `Sidebar`, `Separator`, `Badge`.
+- Use `NavLink` (`@/components/ui/NavLink`) for internal navigation so active states are handled automatically.
+- Layouts should reuse `SidebarLayout` / `FullWidthSidebarLayout` (`@/components/blocks/SidebarLayout`).
+- For notices & skeletons rely on `AnnouncementBanner`, `GenericLoadingPage`, `EmptyStateCard`.
+- Icons come from `lucide-react` or the project-specific `…/icons` exports – never embed raw SVG.
+- Group related components in their own folder and expose a single barrel `index.ts` where necessary.
+- Keep components pure; fetch data outside (server component or hook) and pass it down via props.
+
+# Styling
+
+- Tailwind CSS is **the** styling system – avoid inline styles or CSS modules.
+- Merge class names with `cn` from `@/lib/utils` to keep conditional logic readable.
+- Stick to design-tokens: background (`bg-card`), borders (`border-border`), muted text (`text-muted-foreground`) etc.
+- Use the `container` class with a `max-w-7xl` cap for page width consistency.
+- Spacing utilities (`px-*`, `py-*`, `gap-*`) are preferred over custom margins.
+- Responsive helpers follow mobile-first (`max-sm`, `md`, `lg`, `xl`).
+- Never hard-code colors – always go through Tailwind variables.
+- Add `className` to the root element of every component for external overrides.
+
+# Creating a new Component
+
+- Place the file close to its feature: `feature/components/MyComponent.tsx`.
+- Name files after the component in **PascalCase**; append `.client.tsx` when interactive.
+- Client components must start with `'use client';` before imports.
+- Accept a typed `props` object and export a **named** function (`export function MyComponent()`).
+- Reuse core UI primitives; avoid re-implementing buttons, cards, modals.
+- Combine class names via `cn`, expose `className` prop if useful.
+- Local state or effects live inside; data fetching happens in hooks.
+- Provide a Storybook story (`MyComponent.stories.tsx`) or unit test alongside the component.
+
+# When to use Server Side Rendering (Server Components)
+
+- Reading cookies/headers with `next/headers` (`getAuthToken()`, `cookies()`).
+- Accessing server-only environment variables or secrets.
+- Heavy data fetching that should not ship to the client (e.g. analytics, billing).
+- Redirect logic using `redirect()` from `next/navigation`.
+- Building layout shells (`layout.tsx`) and top-level pages that mainly assemble data.
+- Export default async functions without `'use client';` – they run on the Node edge.
+- Co-locate data helpers under `@/api/**` and mark them with `"server-only"`.
+
+# When to use Client Side Rendering (Client Components)
+
+- Interactive UI that relies on hooks (`useState`, `useEffect`, React Query, wallet hooks).
+- Components that listen to user events, animations or live updates.
+- When you need access to browser APIs (localStorage, window, IntersectionObserver etc.).
+- Pages requiring fast transitions where data is prefetched on the client.
+- Anything that consumes hooks from `@tanstack/react-query` or thirdweb SDKs.
+
+# Fetching Authenticated Data – Server
+
+```ts
+import "server-only";
+import { API_SERVER_URL } from "@/constants/env";
+import { getAuthToken } from "@/app/(app)/api/lib/getAuthToken";
+
+export async function getProjects(teamSlug: string) {
+  const token = await getAuthToken();
+  if (!token) return [];
+  const res = await fetch(`${API_SERVER_URL}/v1/teams/${teamSlug}/projects`, {
+    headers: { Authorization: `Bearer ${token}` },
+  });
+  return res.ok ? (await res.json()).result : [];
+}
+```
+
+Guidelines:
+
+- Always call `getAuthToken()` to get the JWT from cookies.
+- Prefix files with `import "server-only";` so they never end up in the client bundle.
+- Pass the token in the `Authorization: Bearer` header – never embed it in the URL.
+- Return typed results (`Project[]`, `User[]`, …) – avoid `any`.
+
+# Fetching Authenticated Data – Client
+
+```ts
+import { useQuery } from "@tanstack/react-query";
+import { fetchJson } from "@/lib/fetch-json";
+
+export function useProjects(teamSlug: string) {
+  return useQuery({
+    queryKey: ["projects", teamSlug],
+    queryFn: () => fetchJson(`/api/projects?team=${teamSlug}`), // internal API route handles token
+    staleTime: 60_000,
+  });
+}
+```
+
+Guidelines:
+
+- Use **React Query** (`@tanstack/react-query`) for all client data fetching.
+- Create light wrappers (e.g. `fetchJson`) that automatically attach the JWT from cookies/session when calling internal API routes.
+- Keep `queryKey` stable and descriptive for cache hits.
+- Prefer API routes or server actions to keep tokens secret; the browser only sees relative paths.
+- Configure `staleTime` / `cacheTime` according to freshness requirements.
@@ -14,7 +14,7 @@ We use [Turborepo](https://turbo.build/repo/docs) to manage the repository, and

 We use [pnpm](https://pnpm.io) for package management across the repo. `pnpm` is similar to `npm` or `yarn` but with more efficient disk space usage.

-**With the v5 SDK, we've consolidated everything into a single project at [/packages/thirdweb](./packages/thirdweb). You can still find the legacy packages at [/legacy_packages](./legacy_packages).**
+**With the v5 SDK, we've consolidated everything into a single project at [/packages/thirdweb](../packages/thirdweb). You can still find the legacy packages at [/legacy_packages](../legacy_packages).**

 This single package provides a performant & lightweight SDK to interact with any EVM chain across Node, React, and React Native. Learn more about how to use the thirdweb SDK in our [documentation](https://portal.thirdweb.com/typescript/v5).

@@ -16,6 +16,7 @@ env:
  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
  TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
  TW_SECRET_KEY: ${{ secrets.TW_SECRET_KEY }}
+  TW_CLIENT_ID: ${{ secrets.TW_CLIENT_ID }}
  CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}

 jobs:
@@ -80,7 +81,7 @@ jobs:
        uses: ./.github/composite-actions/install

      - name: Set up foundry
-        uses: foundry-rs/foundry-toolchain@de808b1eea699e761c404bda44ba8f21aba30b2c # v1.3.1
+        uses: foundry-rs/foundry-toolchain@82dee4ba654bd2146511f85f0d013af94670c4de # v1.4.0
        with:
          cache: false
          version: nightly-c4a984fbf2c48b793c8cd53af84f56009dd1070c
@@ -88,7 +89,7 @@ jobs:
      - run: pnpm test

      - name: Code Coverage
-        uses: codecov/codecov-action@0565863a31f2c772f9f0395002a31e3f06189574 # v5.4.0
+        uses: codecov/codecov-action@18283e04ce6e62d37312384ff67231eb8fd56d24 # v5.4.3
        with:
          directory: packages/
          flags: packages
@@ -102,7 +103,7 @@ jobs:
    runs-on: ubuntu-latest-8
    strategy:
      matrix:
-        package_manager: [npm, yarn, pnpm, bun]
+        package_manager: [pnpm] # TODO, reenable [npm, yarn, pnpm, bun]
        bundler: [vite, webpack, esbuild]
    steps:
      - name: Check out the code
@@ -123,7 +124,14 @@ jobs:
          mkdir test-project
          cd test-project
          npm init -y
-          ${{ matrix.package_manager }} add react react-dom ../packages/thirdweb
+          
+          # Handle different package managers
+          if [ "${{ matrix.package_manager }}" = "pnpm" ]; then
+            # Create pnpm workspace
+            echo '{"name": "test-project", "private": true, "workspaces": ["."]}' > package.json
+            echo '{"packages": ["../packages/*"]}' > pnpm-workspace.yaml
+            pnpm add react react-dom ../packages/thirdweb -w
+          fi
      - name: Create test file
        run: |
          cd test-project
@@ -133,7 +141,7 @@ jobs:
        if: matrix.bundler == 'vite'
        run: |
          cd test-project
-          ${{matrix.package_manager}} add vite
+          ${{matrix.package_manager}} add vite -w
          echo 'import { defineConfig } from "vite"; import {resolve} from "path"; export default defineConfig({ build: { lib: { entry: resolve(__dirname, "index.js"), name: "e2e_test" }, outDir: "dist" }});' > vite.config.js
          npx vite build
    
@@ -141,7 +149,7 @@ jobs:
        if: matrix.bundler == 'webpack'
        run: |
          cd test-project
-          ${{matrix.package_manager}} add webpack webpack-cli
+          ${{matrix.package_manager}} add webpack webpack-cli -w
          echo 'const path = require("path"); module.exports = { mode: "production", entry: "./index.js", output: { path: path.resolve(__dirname, "dist"), filename: "bundle.js" }};' > webpack.config.js
          npx webpack
    
@@ -149,7 +157,7 @@ jobs:
        if: matrix.bundler == 'esbuild'
        run: |
          cd test-project
-          ${{matrix.package_manager}} add esbuild
+          ${{matrix.package_manager}} add esbuild -w
          npx esbuild index.js --bundle --outdir=dist
    
      - name: Verify bundle
@@ -177,6 +185,9 @@ jobs:
      - name: Setup & Install
        uses: ./.github/composite-actions/install

+      - name: Build Packages
+        run: pnpm build
+
      - name: Report bundle size
        uses: andresz1/size-limit-action@94bc357df29c36c8f8d50ea497c3e225c3c95d1d # v1.8.0
        with:
@@ -46,7 +46,7 @@ jobs:

      # Initializes the CodeQL tools for scanning.
      - name: Initialize CodeQL
-        uses: github/codeql-action/init@6bb031afdd8eb862ea3fc1848194185e076637e5 # v3.28.11
+        uses: github/codeql-action/init@ff0a06e83cb2de871e5a09832bc6a81e7276941f # v3.28.18
        with:
          languages: ${{ matrix.language }}
          # If you wish to specify custom queries, you can do so here or in a config file.
@@ -59,7 +59,7 @@ jobs:
      # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
      # If this step fails, then you should remove it and run the build manually (see below)
      - name: Autobuild
-        uses: github/codeql-action/autobuild@6bb031afdd8eb862ea3fc1848194185e076637e5 # v3.28.11
+        uses: github/codeql-action/autobuild@ff0a06e83cb2de871e5a09832bc6a81e7276941f # v3.28.18

      # ℹ️ Command-line programs to run using the OS shell.
      # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
@@ -72,4 +72,4 @@ jobs:
      #   ./location_of_script_within_repo/buildscript.sh

      - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@6bb031afdd8eb862ea3fc1848194185e076637e5 # v3.28.11
+        uses: github/codeql-action/analyze@ff0a06e83cb2de871e5a09832bc6a81e7276941f # v3.28.18
@@ -36,7 +36,7 @@ jobs:

      - name: Create release Pull Request or publish to NPM
        id: changesets
-        uses: changesets/action@06245a4e0a36c064a573d4150030f5ec548e4fcc #v1.4.0
+        uses: changesets/action@e0145edc7d9d8679003495b11f87bd8ef63c0cba #v1.4.0
        with:
          publish: pnpm release
          version: pnpm version-packages
@@ -30,4 +30,6 @@ packages/*/typedoc/*
 storybook-static
 .aider*

-tsconfig.tsbuildinfo
+tsconfig.tsbuildinfo
+.cursor
+apps/dashboard/node-compile-cache
@@ -0,0 +1,3 @@
+public-hoist-pattern[]=*import-in-the-middle*
+public-hoist-pattern[]=*require-in-the-middle*
+public-hoist-pattern[]=*pino-pretty*
@@ -9,6 +9,12 @@
  "typescript.preferences.autoImportFileExcludePatterns": [
    "./packages/thirdweb/src/exports"
  ],
+  "typescript.preferences.autoImportSpecifierExcludeRegexes": [
+    "@radix-ui",
+    "next/router",
+    "next/dist",
+    "^lucide-react/dist/lucide-react.suffixed$"
+  ],
  "typescript.tsdk": "node_modules/typescript/lib",
  "[typescriptreact]": {
    "editor.defaultFormatter": "biomejs.biome"
@@ -0,0 +1,123 @@
+🤖 Codex Agent Guidelines for thirdweb-dev/js
+
+Welcome, AI copilots! This guide captures the coding standards, architectural decisions, and workflow conventions that every automated agent (and human contributor!) must follow. Unless a rule explicitly targets a sub‑project, it applies repo‑wide.
+
+⸻
+
+1. GitHub Workflow & Etiquette
+
+- Pull‑request titles must start with the affected workspace in brackets (e.g. [SDK], [Dashboard], [Portal], [Playground]).
+- Begin the PR description with a one‑sentence summary, then add a checklist of changes and reference issues with Fixes #123.
+- Keep commits small and topical – one logical change per commit.
+- Branch names should follow area/brief-topic (e.g. sdk/fix-gas-estimate). Avoid personal names.
+- Request at least one core maintainer review. Do not self‑merge unless you are the sole owner of that package.
+- All CI checks (type‑check, Biome, tests) must pass before merging.
+
+⸻
+
+2. Formatting & Linting
+
+- Biome governs formatting and linting; its rules live in biome.json.
+- Run pnpm biome check --apply before committing.
+- Avoid editor‑specific configs; rely on the shared settings.
+
+⸻
+
+3. TypeScript Style Guide
+
+- Write idiomatic TypeScript: explicit function declarations and return types.
+- Limit each file to one stateless, single‑responsibility function for clarity and testability.
+- Re‑use shared types from @/types or local types.ts barrels.
+- Prefer type aliases over interface except for nominal shapes.
+- Avoid any and unknown unless unavoidable; narrow generics whenever possible.
+- Choose composition over inheritance; leverage utility types (Partial, Pick, etc.).
+
+⸻
+
+4. Testing Strategy
+
+- Co‑locate tests: foo.ts ↔ foo.test.ts.
+- Use real function invocations with stub data; avoid brittle mocks.
+- For network interactions, use Mock Service Worker (MSW) to intercept fetch/HTTP calls, mocking only scenarios that are hard to reproduce.
+- Keep tests deterministic and side‑effect free; Jest is pre‑configured.
+
+⸻
+
+5. packages/thirdweb
+
+5.1 Public API Surface
+
+- Export everything via the exports/ directory, grouped by feature.
+- Every public symbol must have comprehensive TSDoc:
+- Include at least one @example block that compiles.
+- Tag with one custom annotation (@beta, @internal, @experimental, etc.).
+- Comment only ambiguous logic; avoid restating TypeScript in prose.
+
+  5.2 Performance
+
+- Lazy‑load heavy dependencies inside async paths to keep the initial bundle lean:
+
+`const { jsPDF } = await import("jspdf");`
+
+⸻
+
+6. apps/dashboard & apps/playground
+
+6.1 Core UI Toolkit
+
+- Import primitives from @/components/ui/\_ (e.g. Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator).
+- Use NavLink for internal navigation so active states are handled automatically.
+- Group feature‑specific components under feature/components/\_ and expose a barrel index.ts when necessary.
+
+  6.2 Styling Conventions
+
+- Tailwind CSS is the styling system – no inline styles or CSS modules.
+- Merge class names with cn() from @/lib/utils to keep conditional logic readable.
+- Stick to design tokens: backgrounds (bg-card), borders (border-border), muted text (text-muted-foreground), etc.
+- Expose a className prop on the root element of every component for overrides.
+
+  6.3 Component Patterns
+
+- Server Components (run on the Node edge):
+  -- Read cookies/headers with next/headers.
+  -- Access server‑only environment variables or secrets.
+  -- Perform heavy data fetching that should not ship to the client.
+  -- Implement redirect logic with redirect() from next/navigation.
+  -- Start files with import "server-only"; to prevent client bundling.
+- Client Components (run in the browser):
+  -- Begin files with 'use client'; before imports.
+  -- Handle interactive UI relying on React hooks (useState, useEffect, React Query, wallet hooks).
+  -- Access browser APIs (localStorage, window, IntersectionObserver, etc.).
+  -- Support fast transitions where data is prefetched on the client.
+
+  6.4 Data Fetching Guidelines
+
+- Server Side
+  -- Always call getAuthToken() to retrieve the JWT from cookies.
+  -- Inject the token as an Authorization: Bearer header – never embed it in the URL.
+  -- Return typed results (Project[], User[], …) – avoid any.
+- Client Side
+  -- Wrap calls in React Query (@tanstack/react-query).
+  -- Use descriptive, stable queryKeys for cache hits.
+  -- Configure staleTime / cacheTime based on freshness requirements (default ≥ 60 s).
+  -- Keep tokens secret by calling internal API routes or server actions.
+
+⸻
+
+7. Performance & Bundle Size
+
+- Track bundle budgets via package.json#size-limit.
+- Lazy‑import optional features; avoid top‑level side‑effects.
+- De‑duplicate dependencies across packages through pnpm workspace hoisting.
+
+⸻
+
+8. Documentation & Developer Experience
+
+- Each change in packages/\* should contain a changeset for the appropriate package, with the appropriate version bump
+
+  - patch for changes that don't impact the public API
+  - minor for any new/modified public API
+
+- Surface breaking changes prominently in PR descriptions.
+- For new UI components, add Storybook stories (\*.stories.tsx) alongside the code.
@@ -104,4 +104,8 @@ ANALYTICS_SERVICE_URL=""
 NEXT_PUBLIC_NEBULA_URL=""

 # required for billing parts of the dashboard (team -> settings -> billing / invoices)
-STRIPE_SECRET_KEY=""
+STRIPE_SECRET_KEY=""
+
+# required for server wallet management
+NEXT_PUBLIC_THIRDWEB_VAULT_URL=""
+NEXT_PUBLIC_ENGINE_CLOUD_URL=""
@@ -27,10 +27,7 @@ module.exports = [
  // -- engine
  "/engine",
  // -- solutions pages --
-  "/solutions/gaming",
-  "/solutions/consumer-apps",
-  "/solutions/defi",
-  "/solutions/ecosystem",
+  "/solutions/:solution_slug",
  // -- campaigns --
  // "/unlimited-wallets", -- OFF for now
  // -- TPP --
@@ -58,4 +55,7 @@ module.exports = [
  "/faucets",
  // -- brand kit --
  "/brand-kit",
+  // -- universal bridge landing pages --
+  "/universal-bridge-regions/:region_slug",
+  "/enterprise",
 ];
@@ -12,6 +12,8 @@
  "ignoreDependencies": [
    "@storybook/blocks",
    "@thirdweb-dev/service-utils",
-    "@types/color"
+    "@thirdweb-dev/vault-sdk",
+    "@types/color",
+    "fast-xml-parser"
  ]
 }
@@ -0,0 +1,3 @@
+declare module "lucide-react" {
+  export * from "lucide-react/dist/lucide-react.suffixed";
+}
@@ -1,7 +1,9 @@
 // @ts-check
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const { XMLParser } = require("fast-xml-parser");

 /**
- *
+ * @returns {Promise<Array<{chainId: number, name: string, slug: string}>>}
 */
 async function fetchChainsFromApi() {
  const res = await fetch("https://api.thirdweb.com/v1/chains", {
@@ -82,16 +84,20 @@ module.exports = {
    };
  },
  additionalPaths: async (config) => {
-    // eslint-disable-next-line @typescript-eslint/no-var-requires
-    const FRAMER_PATHS = require("./framer-rewrites");
-    const allChains = await fetchChainsFromApi();
+    const [framerUrls, allChains] = await Promise.all([
+      getFramerXML(),
+      fetchChainsFromApi(),
+    ]);
+
    return [
-      ...FRAMER_PATHS.map((path) => ({
-        loc: path,
-        changefreq: config.changefreq,
-        priority: config.priority,
-        lastmod: config.autoLastmod ? new Date().toISOString() : undefined,
-      })),
+      ...framerUrls.map((url) => {
+        return {
+          loc: url.loc,
+          changefreq: config.changefreq,
+          priority: config.priority,
+          lastmod: config.autoLastmod ? new Date().toISOString() : undefined,
+        };
+      }),
      ...allChains.map((chain) => {
        return {
          loc: `/${chain.slug}`,
@@ -136,3 +142,19 @@ async function createSearchRecordSitemaps(config) {
  // filter out any failed requests
  return chainsForLines.filter(Boolean);
 }
+
+async function getFramerXML() {
+  const framerSiteMapText = await fetch(
+    "https://landing.thirdweb.com/sitemap.xml",
+  ).then((res) => res.text());
+
+  const parser = new XMLParser();
+  const xmlObject = parser.parse(framerSiteMapText);
+
+  /**
+   * @type {Array<{loc: string}>}
+   */
+  const urls = xmlObject.urlset.url;
+
+  return urls;
+}
@@ -12,7 +12,7 @@ const ContentSecurityPolicy = `
  style-src 'self' 'unsafe-inline' vercel.live;
  font-src 'self' vercel.live assets.vercel.com framerusercontent.com fonts.gstatic.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 framerusercontent.com events.framer.com challenges.cloudflare.com static.reo.dev;
+  script-src 'self' 'unsafe-eval' 'unsafe-inline' 'wasm-unsafe-eval' 'inline-speculation-rules' *.thirdweb.com *.thirdweb-dev.com vercel.live js.stripe.com framerusercontent.com events.framer.com challenges.cloudflare.com;
  connect-src * data: blob:;
  worker-src 'self' blob:;
  block-all-mixed-content;
@@ -111,6 +111,9 @@ const SENTRY_OPTIONS: SentryBuildOptions = {
  automaticVercelMonitors: false,
 };

+// add additional languages to the framer rewrite paths here (english is already included by default)
+const FRAMER_ADDITIONAL_LANGUAGES = ["es"];
+
 const baseNextConfig: NextConfig = {
  eslint: {
    ignoreDuringBuilds: true,
@@ -120,6 +123,7 @@ const baseNextConfig: NextConfig = {
    webpackBuildWorker: true,
    webpackMemoryOptimizations: true,
    serverSourceMaps: false,
+    taint: true,
  },
  serverExternalPackages: ["pino-pretty"],
  async headers() {
@@ -155,10 +159,18 @@ const baseNextConfig: NextConfig = {
        source: "/home",
        destination: "https://landing.thirdweb.com",
      },
-      ...FRAMER_PATHS.map((path) => ({
-        source: path,
-        destination: `https://landing.thirdweb.com${path}`,
-      })),
+      // flatmap the framer paths for the default language and the additional languages
+      ...FRAMER_PATHS.flatMap((path) => [
+        {
+          source: path,
+          destination: `https://landing.thirdweb.com${path}`,
+        },
+        // this is for additional languages
+        ...FRAMER_ADDITIONAL_LANGUAGES.map((lang) => ({
+          source: `/${lang}${path}`,
+          destination: `https://landing.thirdweb.com/${lang}${path}`,
+        })),
+      ]),
    ];
  },
  images: {
@@ -203,7 +215,6 @@ function getConfig(): NextConfig {
                  type: "memory",
                });
              }
-              config.externals.push("pino-pretty");
              config.module = {
                ...config.module,
                exprContextCritical: false,
@@ -29,29 +29,31 @@
    "@emotion/styled": "11.14.0",
    "@hookform/resolvers": "^3.9.1",
    "@marsidev/react-turnstile": "^1.1.0",
-    "@radix-ui/react-accordion": "^1.2.3",
-    "@radix-ui/react-alert-dialog": "^1.1.6",
-    "@radix-ui/react-avatar": "^1.1.3",
-    "@radix-ui/react-checkbox": "^1.1.4",
-    "@radix-ui/react-dialog": "1.1.6",
-    "@radix-ui/react-dropdown-menu": "^2.1.6",
-    "@radix-ui/react-hover-card": "^1.1.6",
-    "@radix-ui/react-label": "^2.1.2",
-    "@radix-ui/react-popover": "^1.1.6",
-    "@radix-ui/react-progress": "^1.1.2",
-    "@radix-ui/react-radio-group": "^1.2.3",
-    "@radix-ui/react-select": "^2.1.6",
-    "@radix-ui/react-separator": "^1.1.2",
-    "@radix-ui/react-slot": "^1.1.2",
-    "@radix-ui/react-switch": "^1.1.3",
-    "@radix-ui/react-tooltip": "1.1.8",
-    "@sentry/nextjs": "9.5.0",
-    "@shazow/whatsabi": "0.20.0",
-    "@tanstack/react-query": "5.67.3",
-    "@tanstack/react-table": "^8.21.2",
+    "@radix-ui/react-accordion": "^1.2.7",
+    "@radix-ui/react-alert-dialog": "^1.1.10",
+    "@radix-ui/react-avatar": "^1.1.6",
+    "@radix-ui/react-checkbox": "^1.2.2",
+    "@radix-ui/react-dialog": "1.1.10",
+    "@radix-ui/react-dropdown-menu": "^2.1.11",
+    "@radix-ui/react-hover-card": "^1.1.10",
+    "@radix-ui/react-label": "^2.1.4",
+    "@radix-ui/react-popover": "^1.1.10",
+    "@radix-ui/react-progress": "^1.1.4",
+    "@radix-ui/react-radio-group": "^1.3.3",
+    "@radix-ui/react-select": "^2.2.5",
+    "@radix-ui/react-separator": "^1.1.7",
+    "@radix-ui/react-slot": "^1.2.0",
+    "@radix-ui/react-switch": "^1.2.2",
+    "@radix-ui/react-tooltip": "1.2.3",
+    "@scalar/api-reference-react": "^0.6.19",
+    "@sentry/nextjs": "9.13.0",
+    "@shazow/whatsabi": "0.21.0",
+    "@tanstack/react-query": "5.74.4",
+    "@tanstack/react-table": "^8.21.3",
    "@thirdweb-dev/service-utils": "workspace:*",
+    "@thirdweb-dev/vault-sdk": "workspace:*",
    "@vercel/functions": "2.0.0",
-    "@vercel/og": "^0.6.5",
+    "@vercel/og": "^0.6.8",
    "abitype": "1.0.8",
    "chakra-react-select": "^4.7.6",
    "class-variance-authority": "^0.7.1",
@@ -59,88 +61,90 @@
    "color": "5.0.0",
    "compare-versions": "^6.1.0",
    "date-fns": "4.1.0",
+    "fast-xml-parser": "^5.2.1",
    "fetch-event-stream": "0.1.5",
    "flat": "^6.0.1",
-    "framer-motion": "12.5.0",
+    "framer-motion": "12.9.2",
    "fuse.js": "7.1.0",
    "idb-keyval": "^6.2.1",
    "input-otp": "^1.4.1",
-    "ioredis": "^5.6.0",
+    "ioredis": "^5.6.1",
    "ipaddr.js": "^2.2.0",
-    "lucide-react": "0.483.0",
-    "next": "15.2.4",
+    "lucide-react": "0.503.0",
+    "next": "15.3.2",
    "next-plausible": "^3.12.4",
    "next-themes": "^0.4.6",
    "nextjs-toploader": "^1.6.12",
-    "nuqs": "^2.4.1",
+    "nuqs": "^2.4.3",
    "p-limit": "^6.2.0",
-    "papaparse": "^5.5.2",
+    "papaparse": "^5.5.3",
    "pluralize": "^8.0.0",
    "posthog-js": "1.67.1",
+    "prettier": "3.5.3",
    "qrcode": "^1.5.3",
-    "react": "19.0.0",
+    "react": "19.1.0",
    "react-children-utilities": "^2.10.0",
    "react-day-picker": "^8.10.1",
-    "react-dom": "19.0.0",
+    "react-dom": "19.1.0",
    "react-dropzone": "^14.3.8",
    "react-error-boundary": "^5.0.0",
-    "react-hook-form": "7.54.2",
-    "react-markdown": "^9.0.1",
+    "react-hook-form": "7.55.0",
+    "react-markdown": "10.1.0",
    "react-table": "^7.8.0",
-    "recharts": "2.15.1",
+    "recharts": "2.15.3",
    "remark-gfm": "4.0.1",
    "responsive-rsc": "0.0.7",
    "server-only": "^0.0.1",
    "shiki": "1.27.0",
-    "sonner": "2.0.1",
+    "sonner": "2.0.3",
    "spdx-correct": "^3.2.0",
    "stripe": "17.7.0",
-    "swagger-ui-react": "^5.20.1",
+    "swagger-ui-react": "^5.21.0",
    "tailwind-merge": "^2.6.0",
    "tailwindcss-animate": "^1.0.7",
    "thirdweb": "workspace:*",
    "tiny-invariant": "^1.3.3",
    "use-debounce": "^10.0.4",
-    "zod": "3.24.2"
+    "zod": "3.25.24"
  },
  "devDependencies": {
    "@chakra-ui/cli": "^2.4.1",
    "@chromatic-com/storybook": "3.2.6",
-    "@next/bundle-analyzer": "15.2.4",
-    "@next/eslint-plugin-next": "15.2.4",
-    "@playwright/test": "1.51.1",
-    "@storybook/addon-essentials": "8.6.4",
-    "@storybook/addon-interactions": "8.6.4",
-    "@storybook/addon-links": "8.6.4",
-    "@storybook/addon-onboarding": "8.6.4",
-    "@storybook/addon-viewport": "8.6.4",
-    "@storybook/blocks": "8.6.4",
-    "@storybook/nextjs": "8.6.4",
-    "@storybook/react": "8.6.4",
-    "@storybook/test": "8.6.4",
+    "@next/bundle-analyzer": "15.3.2",
+    "@next/eslint-plugin-next": "15.3.2",
+    "@playwright/test": "1.52.0",
+    "@storybook/addon-essentials": "8.6.14",
+    "@storybook/addon-interactions": "8.6.14",
+    "@storybook/addon-links": "8.6.14",
+    "@storybook/addon-onboarding": "8.6.14",
+    "@storybook/addon-viewport": "8.6.14",
+    "@storybook/blocks": "8.6.14",
+    "@storybook/nextjs": "8.6.14",
+    "@storybook/react": "8.6.14",
+    "@storybook/test": "8.6.14",
    "@types/color": "4.2.0",
-    "@types/node": "22.13.10",
-    "@types/papaparse": "^5.3.15",
+    "@types/node": "22.14.1",
+    "@types/papaparse": "^5.3.16",
    "@types/pluralize": "^0.0.33",
    "@types/qrcode": "^1.5.5",
-    "@types/react": "19.0.10",
-    "@types/react-dom": "19.0.4",
+    "@types/react": "19.1.4",
+    "@types/react-dom": "19.1.5",
    "@types/react-table": "^7.7.20",
    "@types/spdx-correct": "^3.1.3",
-    "@types/swagger-ui-react": "^4.19.0",
+    "@types/swagger-ui-react": "^5.18.0",
    "@typescript-eslint/eslint-plugin": "7.14.1",
    "@typescript-eslint/parser": "7.14.1",
    "autoprefixer": "^10.4.21",
-    "checkly": "5.0.1",
+    "checkly": "5.2.0",
    "eslint": "8.57.0",
    "eslint-config-biome": "1.9.4",
-    "eslint-plugin-react-compiler": "19.0.0-beta-40c6c23-20250301",
+    "eslint-plugin-react-compiler": "19.0.0-beta-e993439-20250405",
    "eslint-plugin-storybook": "0.12.0",
-    "knip": "5.46.0",
+    "knip": "5.56.0",
    "next-sitemap": "^4.2.3",
    "postcss": "8.5.3",
-    "storybook": "8.6.4",
+    "storybook": "8.6.14",
    "tailwindcss": "3.4.17",
-    "typescript": "5.8.2"
+    "typescript": "5.8.3"
  }
 }
@@ -1,6 +0,0 @@
-<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="Check Circle Icon">
-<path id="Vector" d="M8.5 16.5C12.9184 16.5 16.5 12.9184 16.5 8.5C16.5 4.0816 12.9184 0.5 8.5 0.5C4.0816 0.5 0.5 4.0816 0.5 8.5C0.5 12.9184 4.0816 16.5 8.5 16.5Z" fill="white"/>
-<path id="Check" d="M4.87939 9.01716L6.9482 11.086L12.1202 5.91394" stroke="#000001" stroke-width="1.23077" stroke-linecap="round" stroke-linejoin="round"/>
-</g>
-</svg>
@@ -100,11 +100,6 @@ async function redirects() {
      destination: "/auth",
      permanent: false,
    },
-    {
-      source: "/checkout",
-      destination: "/connect",
-      permanent: false,
-    },
    {
      source: "/extensions",
      destination: "/build",
@@ -88,7 +88,7 @@ function main(params: { assetsFolder: string; srcFolder: string }) {
  // remove the files for which its name can be found in the content of the file
  folderVisitor(params.srcFolder, (content) => {
    for (const assetFileName of assetFileNames) {
-      if (content.includes(assetFileName.name)) {
+      if (content.includes(`/${assetFileName.name}`)) {
        unusedFileNames.delete(assetFileName);
      }
    }
@@ -1,7 +1,7 @@
 "use server";

-import { getAuthToken } from "../../app/api/lib/getAuthToken";
-import { API_SERVER_URL } from "../constants/env";
+import { getAuthToken } from "../../app/(app)/api/lib/getAuthToken";
+import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "../constants/public-envs";

 export async function acceptInvite(options: {
  teamId: string;
@@ -17,7 +17,7 @@ export async function acceptInvite(options: {
  }

  const res = await fetch(
-    `${API_SERVER_URL}/v1/teams/${options.teamId}/invites/${options.inviteId}/accept`,
+    `${NEXT_PUBLIC_THIRDWEB_API_HOST}/v1/teams/${options.teamId}/invites/${options.inviteId}/accept`,
    {
      method: "POST",
      headers: {
@@ -1,82 +1,11 @@
 "use server";
-import "server-only";

-import { API_SERVER_URL } from "@/constants/env";
-import { getAuthToken } from "../../app/api/lib/getAuthToken";
-import type { ProductSKU } from "../lib/billing";
+import { getAuthToken } from "../../app/(app)/api/lib/getAuthToken";
+import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "../constants/public-envs";

-export type GetBillingCheckoutUrlOptions = {
-  teamSlug: string;
-  sku: ProductSKU;
-  redirectUrl: string;
-  metadata?: Record<string, string>;
-};
-
-export async function getBillingCheckoutUrl(
-  options: GetBillingCheckoutUrlOptions,
-): Promise<{ status: number; url?: string }> {
-  if (!options.teamSlug) {
-    return {
-      status: 400,
-    };
-  }
-  const token = await getAuthToken();
-
-  if (!token) {
-    return {
-      status: 401,
-    };
-  }
-
-  const res = await fetch(
-    `${API_SERVER_URL}/v1/teams/${options.teamSlug}/checkout/create-link`,
-    {
-      method: "POST",
-      body: JSON.stringify({
-        sku: options.sku,
-        redirectTo: options.redirectUrl,
-        metadata: options.metadata || {},
-      }),
-      headers: {
-        "Content-Type": "application/json",
-        Authorization: `Bearer ${token}`,
-      },
-    },
-  );
-  if (!res.ok) {
-    return {
-      status: res.status,
-    };
-  }
-
-  const json = await res.json();
-  if (!json.result) {
-    return {
-      status: 500,
-    };
-  }
-
-  return {
-    status: 200,
-    url: json.result as string,
-  };
-}
-
-export type GetBillingCheckoutUrlAction = typeof getBillingCheckoutUrl;
-
-export type GetBillingPortalUrlOptions = {
-  teamSlug: string | undefined;
-  redirectUrl: string;
-};
-
-export async function getBillingPortalUrl(
-  options: GetBillingPortalUrlOptions,
-): Promise<{ status: number; url?: string }> {
-  if (!options.teamSlug) {
-    return {
-      status: 400,
-    };
-  }
+export async function reSubscribePlan(options: {
+  teamId: string;
+}): Promise<{ status: number }> {
  const token = await getAuthToken();
  if (!token) {
    return {
@@ -85,16 +14,14 @@ export async function getBillingPortalUrl(
  }

  const res = await fetch(
-    `${API_SERVER_URL}/v1/teams/${options.teamSlug}/checkout/create-session-link`,
+    `${NEXT_PUBLIC_THIRDWEB_API_HOST}/v1/teams/${options.teamId}/checkout/resubscribe-plan`,
    {
-      method: "POST",
-      body: JSON.stringify({
-        redirectTo: options.redirectUrl,
-      }),
+      method: "PUT",
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${token}`,
      },
+      body: JSON.stringify({}),
    },
  );

@@ -104,18 +31,7 @@ export async function getBillingPortalUrl(
    };
  }

-  const json = await res.json();
-
-  if (!json.result) {
-    return {
-      status: 500,
-    };
-  }
-
  return {
    status: 200,
-    url: json.result as string,
  };
 }
-
-export type GetBillingPortalUrlAction = typeof getBillingPortalUrl;
@@ -1,7 +1,7 @@
 "use server";

-import { getAuthToken } from "../../app/api/lib/getAuthToken";
-import { API_SERVER_URL } from "../constants/env";
+import { getAuthToken } from "../../app/(app)/api/lib/getAuthToken";
+import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "../constants/public-envs";

 export async function confirmEmailWithOTP(otp: string) {
  const token = await getAuthToken();
@@ -12,16 +12,19 @@ export async function confirmEmailWithOTP(otp: string) {
    };
  }

-  const res = await fetch(`${API_SERVER_URL}/v1/account/confirmEmail`, {
-    method: "PUT",
-    headers: {
-      "Content-Type": "application/json",
-      Authorization: `Bearer ${token}`,
+  const res = await fetch(
+    `${NEXT_PUBLIC_THIRDWEB_API_HOST}/v1/account/confirmEmail`,
+    {
+      method: "PUT",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${token}`,
+      },
+      body: JSON.stringify({
+        confirmationToken: otp,
+      }),
    },
-    body: JSON.stringify({
-      confirmationToken: otp,
-    }),
-  });
+  );

  if (!res.ok) {
    const json = await res.json();
@@ -1,6 +1,6 @@
 "use server";

-import { getRawAccount } from "../../app/account/settings/getAccount";
+import { getRawAccount } from "../../app/(app)/account/settings/getAccount";

 export async function getRawAccountAction() {
  return getRawAccount();
@@ -1,9 +1,9 @@
 "use server";
-
-import { getThirdwebClient } from "@/constants/thirdweb.server";
 import { defineDashboardChain } from "lib/defineDashboardChain";
 import { ZERO_ADDRESS, isAddress, toTokens } from "thirdweb";
 import { getWalletBalance } from "thirdweb/wallets";
+import { MORALIS_API_KEY } from "../constants/server-envs";
+import { serverThirdwebClient } from "../constants/thirdweb-client.server";

 type BalanceQueryResponse = Array<{
  balance: string;
@@ -39,7 +39,7 @@ export async function getTokenBalancesFromMoralis(params: {
    const balance = await getWalletBalance({
      address: contractAddress,
      chain,
-      client: getThirdwebClient(),
+      client: serverThirdwebClient,
    });
    return [
      {
@@ -61,7 +61,7 @@ export async function getTokenBalancesFromMoralis(params: {
    const resp = await fetch(tokenBalanceEndpoint, {
      method: "GET",
      headers: {
-        "x-api-key": process.env.MORALIS_API_KEY || "",
+        "x-api-key": MORALIS_API_KEY,
      },
    });

@@ -2,17 +2,18 @@

 import {
  generateAlchemyUrl,
-  isAlchemySupported,
  transformAlchemyResponseToNFT,
 } from "lib/wallet/nfts/alchemy";
 import {
  generateMoralisUrl,
-  isMoralisSupported,
  transformMoralisResponseToNFT,
 } from "lib/wallet/nfts/moralis";
 import type { WalletNFT } from "lib/wallet/nfts/types";
 import { getVercelEnv } from "../../lib/vercel-utils";
-import { DASHBOARD_THIRDWEB_CLIENT_ID } from "../constants/env";
+import { isAlchemySupported } from "../../lib/wallet/nfts/isAlchemySupported";
+import { isMoralisSupported } from "../../lib/wallet/nfts/isMoralisSupported";
+import { NET_PUBLIC_DASHBOARD_THIRDWEB_CLIENT_ID } from "../constants/public-envs";
+import { MORALIS_API_KEY } from "../constants/server-envs";

 type WalletNFTApiReturn =
  | { result: WalletNFT[]; error?: undefined }
@@ -59,13 +60,13 @@ export async function getWalletNFTs(params: {
    }
  }

-  if (isMoralisSupported(chainId) && process.env.MORALIS_API_KEY) {
+  if (isMoralisSupported(chainId) && MORALIS_API_KEY) {
    const url = generateMoralisUrl({ chainId, owner });

    const response = await fetch(url, {
      method: "GET",
      headers: {
-        "X-API-Key": process.env.MORALIS_API_KEY,
+        "X-API-Key": MORALIS_API_KEY,
      },
      next: {
        revalidate: 10, // cache for 10 seconds
@@ -81,6 +82,7 @@ export async function getWalletNFTs(params: {
      const result = await transformMoralisResponseToNFT(
        await parsedResponse,
        owner,
+        chainId,
      );

      return { result };
@@ -147,7 +149,7 @@ async function getWalletNFTsFromInsight(params: {

  const response = await fetch(url, {
    headers: {
-      "x-client-id": DASHBOARD_THIRDWEB_CLIENT_ID,
+      "x-client-id": NET_PUBLIC_DASHBOARD_THIRDWEB_CLIENT_ID,
    },
  });

@@ -194,6 +196,8 @@ async function getWalletNFTsFromInsight(params: {
      tokenURI: nft.metadata_url,
      type: nft.token_type === "erc721" ? "ERC721" : "ERC1155",
      supply: nft.balance,
+      tokenAddress: nft.contract.address,
+      chainId: nft.contract.chain_id,
    };

    return walletNFT;
@@ -1,40 +0,0 @@
-"use server";
-
-import { getAuthToken } from "../../app/api/lib/getAuthToken";
-import { API_SERVER_URL } from "../constants/env";
-
-export async function joinTeamWaitlist(options: {
-  teamSlug: string;
-  // currently only 'nebula' is supported
-  scope: "nebula";
-}) {
-  const { teamSlug, scope } = options;
-  const token = await getAuthToken();
-
-  if (!token) {
-    return {
-      errorMessage: "You are not authorized to perform this action",
-    };
-  }
-
-  const res = await fetch(`${API_SERVER_URL}/v1/teams/${teamSlug}/waitlist`, {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-      Authorization: `Bearer ${token}`,
-    },
-    body: JSON.stringify({
-      scope,
-    }),
-  });
-
-  if (!res.ok) {
-    return {
-      errorMessage: "Failed to join waitlist",
-    };
-  }
-
-  return {
-    success: true,
-  };
-}
@@ -1,7 +1,11 @@
 "use server";

-import { getAuthToken } from "../../app/api/lib/getAuthToken";
-import { API_SERVER_URL } from "../constants/env";
+import { getAuthToken } from "../../app/(app)/api/lib/getAuthToken";
+import {
+  NEXT_PUBLIC_ENGINE_CLOUD_URL,
+  NEXT_PUBLIC_THIRDWEB_API_HOST,
+} from "../constants/public-envs";
+import { ANALYTICS_SERVICE_URL } from "../constants/server-envs";

 type ProxyActionParams = {
  pathname: string;
@@ -76,18 +80,13 @@ async function proxy<T>(
 }

 export async function apiServerProxy<T>(params: ProxyActionParams) {
-  return proxy<T>(API_SERVER_URL, params);
+  return proxy<T>(NEXT_PUBLIC_THIRDWEB_API_HOST, params);
 }

-export async function payServerProxy<T>(params: ProxyActionParams) {
-  return proxy<T>(
-    process.env.NEXT_PUBLIC_PAY_URL
-      ? `https://${process.env.NEXT_PUBLIC_PAY_URL}`
-      : "https://pay.thirdweb-dev.com",
-    params,
-  );
+export async function engineCloudProxy<T>(params: ProxyActionParams) {
+  return proxy<T>(NEXT_PUBLIC_ENGINE_CLOUD_URL, params);
 }

 export async function analyticsServerProxy<T>(params: ProxyActionParams) {
-  return proxy<T>(process.env.ANALYTICS_SERVICE_URL || "", params);
+  return proxy<T>(ANALYTICS_SERVICE_URL, params);
 }
@@ -0,0 +1,10 @@
+"use server";
+
+import { revalidatePath } from "next/cache";
+
+export async function revalidatePathAction(
+  path: string,
+  type: "page" | "layout",
+) {
+  revalidatePath(path, type);
+}
@@ -1,7 +1,7 @@
 "use server";

-import { getAuthToken } from "../../app/api/lib/getAuthToken";
-import { API_SERVER_URL } from "../constants/env";
+import { getAuthToken } from "../../app/(app)/api/lib/getAuthToken";
+import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "../constants/public-envs";

 export async function sendTeamInvites(options: {
  teamId: string;
@@ -40,17 +40,20 @@ async function sendInvite(
  invite: { email: string; role: "OWNER" | "MEMBER" },
  token: string,
 ) {
-  const res = await fetch(`${API_SERVER_URL}/v1/teams/${teamId}/invites`, {
-    method: "POST",
-    headers: {
-      Authorization: `Bearer ${token}`,
-      "Content-Type": "application/json",
+  const res = await fetch(
+    `${NEXT_PUBLIC_THIRDWEB_API_HOST}/v1/teams/${teamId}/invites`,
+    {
+      method: "POST",
+      headers: {
+        Authorization: `Bearer ${token}`,
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        inviteEmail: invite.email,
+        inviteRole: invite.role,
+      }),
    },
-    body: JSON.stringify({
-      inviteEmail: invite.email,
-      inviteRole: invite.role,
-    }),
-  });
+  );

  if (!res.ok) {
    const errorMessage = await res.text();
@@ -2,13 +2,12 @@ import "server-only";

 import Stripe from "stripe";
 import type { Team } from "../api/team";
+import { STRIPE_SECRET_KEY } from "../constants/server-envs";

 let existingStripe: Stripe | undefined;

 function getStripe() {
  if (!existingStripe) {
-    const STRIPE_SECRET_KEY = process.env.STRIPE_SECRET_KEY;
-
    if (!STRIPE_SECRET_KEY) {
      throw new Error("STRIPE_SECRET_KEY is not set");
    }
@@ -23,7 +22,7 @@ function getStripe() {

 export async function getTeamInvoices(
  team: Team,
-  options?: { cursor?: string },
+  options?: { cursor?: string; status?: "open" },
 ) {
  try {
    const customerId = team.stripeCustomerId;
@@ -37,6 +36,8 @@ export async function getTeamInvoices(
      customer: customerId,
      limit: 10,
      starting_after: options?.cursor,
+      // Only return open invoices if the status is open
+      status: options?.status,
    });

    return invoices;
@@ -1,6 +1,6 @@
 "use server";
-import { getAuthToken } from "../../app/api/lib/getAuthToken";
-import { API_SERVER_URL } from "../constants/env";
+import { getAuthToken } from "../../app/(app)/api/lib/getAuthToken";
+import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "../constants/public-envs";

 export async function updateAccount(values: {
  name?: string;
@@ -13,7 +13,7 @@ export async function updateAccount(values: {
    throw new Error("No Auth token");
  }

-  const res = await fetch(`${API_SERVER_URL}/v1/account`, {
+  const res = await fetch(`${NEXT_PUBLIC_THIRDWEB_API_HOST}/v1/account`, {
    method: "PUT",
    headers: {
      "Content-Type": "application/json",
@@ -1,48 +0,0 @@
-"use server";
-
-import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
-import { cookies } from "next/headers";
-import { getAddress } from "thirdweb";
-import { COOKIE_PREFIX_TOKEN } from "../constants/cookie";
-import { API_SERVER_URL } from "../constants/env";
-
-/**
- * Check that the connected wallet is valid for the current active account
- */
-export async function isWalletValidForActiveAccount(params: {
-  address: string;
-  account: Account;
-  authToken: string;
-}) {
-  const cookieStore = await cookies();
-  const authCookieNameForAddress =
-    COOKIE_PREFIX_TOKEN + getAddress(params.address);
-
-  // authToken for this wallet address should be present
-  const authTokenForAddress = cookieStore.get(authCookieNameForAddress)?.value;
-  if (!authTokenForAddress) {
-    return false;
-  }
-
-  // this authToken should be same as current active authToken
-  if (authTokenForAddress !== params.authToken) {
-    return false;
-  }
-
-  // authToken should be valid
-  const accountRes = await fetch(`${API_SERVER_URL}/v1/account/me`, {
-    method: "GET",
-    headers: {
-      Authorization: `Bearer ${authTokenForAddress}`,
-    },
-  });
-
-  if (accountRes.status !== 200) {
-    return false;
-  }
-
-  const account = (await accountRes.json()).data as Account;
-
-  // the current account should match the account fetched for the authToken
-  return account.id === params.account.id;
-}
@@ -6,11 +6,14 @@ import type {
  InAppWalletStats,
  RpcMethodStats,
  TransactionStats,
+  UniversalBridgeStats,
+  UniversalBridgeWalletStats,
  UserOpStats,
  WalletStats,
  WalletUserStats,
 } from "types/analytics";
-import { getAuthToken } from "../../app/api/lib/getAuthToken";
+import { getAuthToken } from "../../app/(app)/api/lib/getAuthToken";
+import { ANALYTICS_SERVICE_URL } from "../constants/server-envs";
 import { getChains } from "./chain";

 async function fetchAnalytics(
@@ -29,34 +32,38 @@ async function fetchAnalytics(
  }

  // create a new URL object for the analytics server
-  const ANALYTICS_SERVICE_URL = new URL(
-    process.env.ANALYTICS_SERVICE_URL || "https://analytics.thirdweb.com",
+  const analyticsServiceUrl = new URL(
+    ANALYTICS_SERVICE_URL || "https://analytics.thirdweb.com",
  );
-  ANALYTICS_SERVICE_URL.pathname = pathname;
+
+  analyticsServiceUrl.pathname = pathname;
  for (const param of searchParams?.split("&") || []) {
    const [key, value] = param.split("=");
    if (!key || !value) {
      throw new Error("Invalid input, no key or value provided");
    }
-    ANALYTICS_SERVICE_URL.searchParams.append(
+    analyticsServiceUrl.searchParams.append(
      decodeURIComponent(key),
      decodeURIComponent(value),
    );
  }
  // client id DEBUG OVERRIDE
-  // ANALYTICS_SERVICE_URL.searchParams.delete("clientId");
-  // ANALYTICS_SERVICE_URL.searchParams.delete("accountId");
-  // ANALYTICS_SERVICE_URL.searchParams.append(
-  //   "clientId",
-  //   "...",
+  // analyticsServiceUrl.searchParams.delete("projectId");
+  // analyticsServiceUrl.searchParams.delete("teamId");
+  // analyticsServiceUrl.searchParams.append(
+  //   "teamId",
+  //   "team_cm0lde33r02344w129k5hm2xz",
+  // );
+  // analyticsServiceUrl.searchParams.append(
+  //   "projectId",
+  //   "prj_cm4rqwx9b002qrnsnr37wqpo6",
  // );

-  return fetch(ANALYTICS_SERVICE_URL, {
+  return fetch(analyticsServiceUrl, {
    ...init,
    headers: {
      "content-type": "application/json",
      ...init?.headers,
-      authorization: `Bearer ${token}`,
    },
  });
 }
@@ -346,7 +353,7 @@ export async function getEcosystemWalletUsage(args: {
    searchParams.append("period", period);
  }
  const res = await fetchAnalytics(
-    `v2/wallets/connects/${ecosystemSlug}?${searchParams.toString()}`,
+    `v2/wallet/connects?${searchParams.toString()}`,
    {
      method: "GET",
      headers: {
@@ -356,7 +363,10 @@ export async function getEcosystemWalletUsage(args: {
  );

  if (res?.status !== 200) {
-    console.error("Failed to fetch ecosystem wallet stats");
+    const reason = await res?.text();
+    console.error(
+      `Failed to fetch ecosystem wallet stats: ${res?.status} - ${res.statusText} - ${reason}`,
+    );
    return null;
  }

@@ -364,3 +374,60 @@ export async function getEcosystemWalletUsage(args: {

  return json.data as EcosystemWalletStats[];
 }
+
+export async function getUniversalBridgeUsage(args: {
+  teamId: string;
+  projectId?: string;
+  from?: Date;
+  to?: Date;
+  period?: "day" | "week" | "month" | "year" | "all";
+}) {
+  const searchParams = buildSearchParams(args);
+  const res = await fetchAnalytics(`v2/universal?${searchParams.toString()}`, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+    },
+  });
+
+  if (res?.status !== 200) {
+    const reason = await res?.text();
+    console.error(
+      `Failed to fetch universal bridge stats: ${res?.status} - ${res.statusText} - ${reason}`,
+    );
+    return [];
+  }
+
+  const json = await res.json();
+  return json.data as UniversalBridgeStats[];
+}
+
+export async function getUniversalBridgeWalletUsage(args: {
+  teamId: string;
+  projectId: string;
+  from?: Date;
+  to?: Date;
+  period?: "day" | "week" | "month" | "year" | "all";
+}) {
+  const searchParams = buildSearchParams(args);
+  const res = await fetchAnalytics(
+    `v2/universal/wallets?${searchParams.toString()}`,
+    {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+      },
+    },
+  );
+
+  if (res?.status !== 200) {
+    const reason = await res?.text();
+    console.error(
+      `Failed to fetch universal bridge wallet stats: ${res?.status} - ${res.statusText} - ${reason}`,
+    );
+    return null;
+  }
+
+  const json = await res.json();
+  return json.data as UniversalBridgeWalletStats[];
+}
@@ -1,21 +1,25 @@
 import "server-only";
 import type { ChainMetadata } from "thirdweb/chains";
-import type { ChainService } from "../../app/(dashboard)/(chain)/types/chain";
-import { API_SERVER_URL, THIRDWEB_API_SECRET } from "../constants/env";
+import type { ChainService } from "../../app/(app)/(dashboard)/(chain)/types/chain";
+import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "../constants/public-envs";
+import { API_SERVER_SECRET } from "../constants/server-envs";

 export async function getGasSponsoredChains() {
-  if (!THIRDWEB_API_SECRET) {
+  if (!API_SERVER_SECRET) {
    throw new Error("API_SERVER_SECRET is not set");
  }
-  const res = await fetch(`${API_SERVER_URL}/v1/chains/gas-sponsored`, {
-    headers: {
-      "Content-Type": "application/json",
-      "x-service-api-key": THIRDWEB_API_SECRET,
+  const res = await fetch(
+    `${NEXT_PUBLIC_THIRDWEB_API_HOST}/v1/chains/gas-sponsored`,
+    {
+      headers: {
+        "Content-Type": "application/json",
+        "x-service-api-key": API_SERVER_SECRET,
+      },
+      next: {
+        revalidate: 15 * 60, //15 minutes
+      },
    },
-    next: {
-      revalidate: 15 * 60, //15 minutes
-    },
-  });
+  );

  if (!res.ok) {
    console.error(
@@ -37,7 +41,7 @@ export async function getGasSponsoredChains() {

 export function getChains() {
  return fetch(
-    `${API_SERVER_URL}/v1/chains`,
+    `${NEXT_PUBLIC_THIRDWEB_API_HOST}/v1/chains`,
    // revalidate every 60 minutes
    { next: { revalidate: 60 * 60 } },
  ).then((res) => res.json()) as Promise<{ data: ChainMetadata[] }>;
@@ -45,7 +49,7 @@ export function getChains() {

 export function getChainServices() {
  return fetch(
-    `${API_SERVER_URL}/v1/chains/services`,
+    `${NEXT_PUBLIC_THIRDWEB_API_HOST}/v1/chains/services`,
    // revalidate every 60 minutes
    { next: { revalidate: 60 * 60 } },
  ).then((res) => res.json()) as Promise<{
@@ -0,0 +1,201 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+"use server";
+
+import { getAuthToken } from "app/(app)/api/lib/getAuthToken";
+import { THIRDWEB_INSIGHT_API_DOMAIN } from "constants/urls";
+
+export interface WebhookResponse {
+  id: string;
+  name: string;
+  team_id: string;
+  project_id: string;
+  webhook_url: string;
+  webhook_secret: string;
+  filters: WebhookFilters;
+  suspended_at: string | null;
+  suspended_reason: string | null;
+  disabled: boolean;
+  created_at: string;
+  updated_at: string | null;
+}
+
+export interface WebhookFilters {
+  "v1.events"?: {
+    chain_ids?: string[];
+    addresses?: string[];
+    signatures?: Array<{
+      sig_hash: string;
+      abi?: string;
+      params?: Record<string, unknown>;
+    }>;
+  };
+  "v1.transactions"?: {
+    chain_ids?: string[];
+    from_addresses?: string[];
+    to_addresses?: string[];
+    signatures?: Array<{
+      sig_hash: string;
+      abi?: string;
+      params?: Record<string, unknown>;
+    }>;
+  };
+}
+
+interface CreateWebhookPayload {
+  name: string;
+  webhook_url: string;
+  filters: WebhookFilters;
+}
+
+interface WebhooksListResponse {
+  data: WebhookResponse[];
+  error?: string;
+}
+
+interface WebhookSingleResponse {
+  data: WebhookResponse | null;
+  error?: string;
+}
+
+interface TestWebhookPayload {
+  webhook_url: string;
+  type?: "event" | "transaction";
+}
+
+interface TestWebhookResponse {
+  success: boolean;
+  error?: string;
+}
+
+export async function createWebhook(
+  payload: CreateWebhookPayload,
+  clientId: string,
+): Promise<WebhookSingleResponse> {
+  try {
+    const authToken = await getAuthToken();
+    const response = await fetch(`${THIRDWEB_INSIGHT_API_DOMAIN}/v1/webhooks`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "x-client-id": clientId,
+        Authorization: `Bearer ${authToken}`,
+      },
+      body: JSON.stringify(payload),
+    });
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      return {
+        data: null,
+        error: `Failed to create webhook: ${errorText}`,
+      };
+    }
+
+    return (await response.json()) as WebhookSingleResponse;
+  } catch (error) {
+    return {
+      data: null,
+      error: `Network or parsing error: ${error instanceof Error ? error.message : "Unknown error"}`,
+    };
+  }
+}
+
+export async function getWebhooks(
+  clientId: string,
+): Promise<WebhooksListResponse> {
+  try {
+    const authToken = await getAuthToken();
+    const response = await fetch(`${THIRDWEB_INSIGHT_API_DOMAIN}/v1/webhooks`, {
+      method: "GET",
+      headers: {
+        "x-client-id": clientId,
+        Authorization: `Bearer ${authToken}`,
+      },
+    });
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      return {
+        data: [],
+        error: `Failed to get webhooks: ${errorText}`,
+      };
+    }
+
+    return (await response.json()) as WebhooksListResponse;
+  } catch (error) {
+    return {
+      data: [],
+      error: `Network or parsing error: ${error instanceof Error ? error.message : "Unknown error"}`,
+    };
+  }
+}
+
+export async function deleteWebhook(
+  webhookId: string,
+  clientId: string,
+): Promise<WebhookSingleResponse> {
+  try {
+    const authToken = await getAuthToken();
+    const response = await fetch(
+      `${THIRDWEB_INSIGHT_API_DOMAIN}/v1/webhooks/${encodeURIComponent(webhookId)}`,
+      {
+        method: "DELETE",
+        headers: {
+          "x-client-id": clientId,
+          Authorization: `Bearer ${authToken}`,
+        },
+      },
+    );
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      return {
+        data: null,
+        error: `Failed to delete webhook: ${errorText}`,
+      };
+    }
+
+    return (await response.json()) as WebhookSingleResponse;
+  } catch (error) {
+    return {
+      data: null,
+      error: `Network or parsing error: ${error instanceof Error ? error.message : "Unknown error"}`,
+    };
+  }
+}
+
+export async function testWebhook(
+  payload: TestWebhookPayload,
+  clientId: string,
+): Promise<TestWebhookResponse> {
+  try {
+    const authToken = await getAuthToken();
+    const response = await fetch(
+      `${THIRDWEB_INSIGHT_API_DOMAIN}/v1/webhooks/test`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "x-client-id": clientId,
+          Authorization: `Bearer ${authToken}`,
+        },
+        body: JSON.stringify(payload),
+      },
+    );
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      return {
+        success: false,
+        error: `Failed to test webhook: ${errorText}`,
+      };
+    }
+
+    return (await response.json()) as TestWebhookResponse;
+  } catch (error) {
+    return {
+      success: false,
+      error: `Network or parsing error: ${error instanceof Error ? error.message : "Unknown error"}`,
+    };
+  }
+}
@@ -1,5 +1,5 @@
-import { getAuthToken } from "../../app/api/lib/getAuthToken";
-import { API_SERVER_URL } from "../constants/env";
+import { getAuthToken } from "../../app/(app)/api/lib/getAuthToken";
+import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "../constants/public-envs";

 export type LinkedWallet = {
  createdAt: string;
@@ -14,11 +14,14 @@ export async function getLinkedWallets() {
    return null;
  }

-  const res = await fetch(`${API_SERVER_URL}/v1/account/wallets`, {
-    headers: {
-      Authorization: `Bearer ${token}`,
+  const res = await fetch(
+    `${NEXT_PUBLIC_THIRDWEB_API_HOST}/v1/account/wallets`,
+    {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
    },
-  });
+  );

  if (res.ok) {
    const json = (await res.json()) as {
@@ -1,7 +1,7 @@
 import "server-only";
-import { API_SERVER_URL } from "@/constants/env";
+import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "@/constants/public-envs";
 import type { ProjectResponse } from "@thirdweb-dev/service-utils";
-import { getAuthToken } from "../../app/api/lib/getAuthToken";
+import { getAuthToken } from "../../app/(app)/api/lib/getAuthToken";

 export type Project = ProjectResponse;

@@ -13,7 +13,7 @@ export async function getProjects(teamSlug: string) {
  }

  const teamsRes = await fetch(
-    `${API_SERVER_URL}/v1/teams/${teamSlug}/projects`,
+    `${NEXT_PUBLIC_THIRDWEB_API_HOST}/v1/teams/${teamSlug}/projects`,
    {
      headers: {
        Authorization: `Bearer ${token}`,
@@ -34,7 +34,7 @@ export async function getProject(teamSlug: string, projectSlug: string) {
  }

  const teamsRes = await fetch(
-    `${API_SERVER_URL}/v1/teams/${teamSlug}/projects/${projectSlug}`,
+    `${NEXT_PUBLIC_THIRDWEB_API_HOST}/v1/teams/${teamSlug}/projects/${projectSlug}`,
    {
      headers: {
        Authorization: `Bearer ${token}`,
@@ -1,4 +1,6 @@
-import { API_SERVER_URL, THIRDWEB_API_SECRET } from "../constants/env";
+import "server-only";
+import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "../constants/public-envs";
+import { API_SERVER_SECRET } from "../constants/server-envs";

 export type SMSCountryTiers = {
  tier1: string[];
@@ -9,18 +11,21 @@ export type SMSCountryTiers = {
 };

 export async function getSMSCountryTiers() {
-  if (!THIRDWEB_API_SECRET) {
+  if (!API_SERVER_SECRET) {
    throw new Error("API_SERVER_SECRET is not set");
  }
-  const res = await fetch(`${API_SERVER_URL}/v1/sms/list-country-tiers`, {
-    headers: {
-      "Content-Type": "application/json",
-      "x-service-api-key": THIRDWEB_API_SECRET,
+  const res = await fetch(
+    `${NEXT_PUBLIC_THIRDWEB_API_HOST}/v1/sms/list-country-tiers`,
+    {
+      headers: {
+        "Content-Type": "application/json",
+        "x-service-api-key": API_SERVER_SECRET,
+      },
+      next: {
+        revalidate: 15 * 60, //15 minutes
+      },
    },
-    next: {
-      revalidate: 15 * 60, //15 minutes
-    },
-  });
+  );

  if (!res.ok) {
    console.error(
@@ -1,5 +1,5 @@
-import { getAuthToken } from "../../app/api/lib/getAuthToken";
-import { API_SERVER_URL } from "../constants/env";
+import { getAuthToken } from "../../app/(app)/api/lib/getAuthToken";
+import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "../constants/public-envs";

 export type TeamInvite = {
  id: string;
@@ -25,7 +25,7 @@ export async function getTeamInvites(
  }

  const res = await fetch(
-    `${API_SERVER_URL}/v1/teams/${teamId}/invites?skip=${options.start}&take=${options.count}`,
+    `${NEXT_PUBLIC_THIRDWEB_API_HOST}/v1/teams/${teamId}/invites?skip=${options.start}&take=${options.count}`,
    {
      headers: {
        Authorization: `Bearer ${authToken}`,
@@ -1,6 +1,6 @@
 import "server-only";
-import { API_SERVER_URL } from "@/constants/env";
-import { getAuthToken } from "../../app/api/lib/getAuthToken";
+import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "@/constants/public-envs";
+import { getAuthToken } from "../../app/(app)/api/lib/getAuthToken";

 const TeamAccountRole = {
  OWNER: "OWNER",
@@ -33,7 +33,7 @@ export async function getMembers(teamSlug: string) {
  }

  const teamsRes = await fetch(
-    `${API_SERVER_URL}/v1/teams/${teamSlug}/members`,
+    `${NEXT_PUBLIC_THIRDWEB_API_HOST}/v1/teams/${teamSlug}/members`,
    {
      headers: {
        Authorization: `Bearer ${token}`,
@@ -56,7 +56,7 @@ export async function getMemberById(teamSlug: string, memberId: string) {
  }

  const res = await fetch(
-    `${API_SERVER_URL}/v1/teams/${teamSlug}/members/${memberId}`,
+    `${NEXT_PUBLIC_THIRDWEB_API_HOST}/v1/teams/${teamSlug}/members/${memberId}`,
    {
      headers: {
        Authorization: `Bearer ${token}`,
@@ -1,5 +1,5 @@
-import { getAuthToken } from "../../app/api/lib/getAuthToken";
-import { API_SERVER_URL } from "../constants/env";
+import { getAuthToken } from "../../app/(app)/api/lib/getAuthToken";
+import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "../constants/public-envs";
 import type { ProductSKU } from "../lib/billing";

 type InvoiceLine = {
@@ -47,7 +47,7 @@ export async function getTeamSubscriptions(slug: string) {
  }

  const teamRes = await fetch(
-    `${API_SERVER_URL}/v1/teams/${slug}/subscriptions`,
+    `${NEXT_PUBLIC_THIRDWEB_API_HOST}/v1/teams/${slug}/subscriptions`,
    {
      headers: {
        Authorization: `Bearer ${token}`,
@@ -1,7 +1,10 @@
 import "server-only";
-import { API_SERVER_URL, THIRDWEB_API_SECRET } from "@/constants/env";
+import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "@/constants/public-envs";
+import { API_SERVER_SECRET } from "@/constants/server-envs";
 import type { TeamResponse } from "@thirdweb-dev/service-utils";
-import { getAuthToken } from "../../app/api/lib/getAuthToken";
+import { cookies } from "next/headers";
+import { getAuthToken } from "../../app/(app)/api/lib/getAuthToken";
+import { LAST_USED_TEAM_ID } from "../../constants/cookies";

 export type Team = TeamResponse & { stripeCustomerId: string | null };

@@ -12,11 +15,14 @@ export async function getTeamBySlug(slug: string) {
    return null;
  }

-  const teamRes = await fetch(`${API_SERVER_URL}/v1/teams/${slug}`, {
-    headers: {
-      Authorization: `Bearer ${token}`,
+  const teamRes = await fetch(
+    `${NEXT_PUBLIC_THIRDWEB_API_HOST}/v1/teams/${slug}`,
+    {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
    },
-  });
+  );
  if (teamRes.ok) {
    return (await teamRes.json())?.result as Team;
  }
@@ -24,11 +30,14 @@ export async function getTeamBySlug(slug: string) {
 }

 export async function service_getTeamBySlug(slug: string) {
-  const teamRes = await fetch(`${API_SERVER_URL}/v1/teams/${slug}`, {
-    headers: {
-      "x-service-api-key": THIRDWEB_API_SECRET,
+  const teamRes = await fetch(
+    `${NEXT_PUBLIC_THIRDWEB_API_HOST}/v1/teams/${slug}`,
+    {
+      headers: {
+        "x-service-api-key": API_SERVER_SECRET,
+      },
    },
-  });
+  );

  if (teamRes.ok) {
    return (await teamRes.json())?.result as Team;
@@ -47,7 +56,7 @@ export async function getTeams() {
    return null;
  }

-  const teamsRes = await fetch(`${API_SERVER_URL}/v1/teams`, {
+  const teamsRes = await fetch(`${NEXT_PUBLIC_THIRDWEB_API_HOST}/v1/teams`, {
    headers: {
      Authorization: `Bearer ${token}`,
    },
@@ -64,7 +73,7 @@ export async function getDefaultTeam() {
    return null;
  }

-  const res = await fetch(`${API_SERVER_URL}/v1/teams/~`, {
+  const res = await fetch(`${NEXT_PUBLIC_THIRDWEB_API_HOST}/v1/teams/~`, {
    headers: {
      Authorization: `Bearer ${token}`,
    },
@@ -75,29 +84,20 @@ export async function getDefaultTeam() {
  return null;
 }

-type TeamNebulaWaitList = {
-  onWaitlist: boolean;
-  createdAt: null | string;
-};
-
-export async function getTeamNebulaWaitList(teamSlug: string) {
+export async function getLastVisitedTeam() {
  const token = await getAuthToken();
-
  if (!token) {
    return null;
  }

-  const res = await fetch(
-    `${API_SERVER_URL}/v1/teams/${teamSlug}/waitlist?scope=nebula`,
-    {
-      headers: {
-        Authorization: `Bearer ${token}`,
-      },
-    },
-  );
+  const cookiesStore = await cookies();
+  const lastVisitedTeamId = cookiesStore.get(LAST_USED_TEAM_ID)?.value;

-  if (res.ok) {
-    return (await res.json()).result as TeamNebulaWaitList;
+  if (lastVisitedTeamId) {
+    const team = await getTeamById(lastVisitedTeamId);
+    if (team) {
+      return team;
+    }
  }

  return null;
@@ -0,0 +1 @@
+export const UB_BASE_URL = process.env.NEXT_PUBLIC_THIRDWEB_BRIDGE_HOST;
@@ -0,0 +1,250 @@
+"use server";
+import { getAuthToken } from "app/(app)/api/lib/getAuthToken";
+import { NEXT_PUBLIC_THIRDWEB_BRIDGE_HOST } from "../../constants/public-envs";
+
+const UB_BASE_URL = NEXT_PUBLIC_THIRDWEB_BRIDGE_HOST;
+
+type Webhook = {
+  url: string;
+  label: string;
+  active: boolean;
+  createdAt: string;
+  id: string;
+  secret: string;
+  version?: number; // TODO (UB) make this mandatory after migration
+};
+
+export async function getWebhooks(props: {
+  clientId: string;
+  teamId: string;
+}) {
+  const authToken = await getAuthToken();
+  const res = await fetch(`${UB_BASE_URL}/v1/developer/webhooks`, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+      "x-client-id": props.clientId,
+      "x-team-id": props.teamId,
+      Authorization: `Bearer ${authToken}`,
+    },
+  });
+
+  if (!res.ok) {
+    const text = await res.text();
+    throw new Error(text);
+  }
+
+  const json = await res.json();
+  return json.data as Array<Webhook>;
+}
+
+export async function createWebhook(props: {
+  clientId: string;
+  teamId: string;
+  version?: number;
+  url: string;
+  label: string;
+  secret?: string;
+}) {
+  const authToken = await getAuthToken();
+  console.log(
+    "UB_BASE_URL",
+    UB_BASE_URL,
+    props.clientId,
+    props.teamId,
+    authToken,
+  );
+  const res = await fetch(`${UB_BASE_URL}/v1/developer/webhooks`, {
+    method: "POST",
+    body: JSON.stringify({
+      url: props.url,
+      label: props.label,
+      version: props.version,
+      secret: props.secret,
+    }),
+    headers: {
+      "Content-Type": "application/json",
+      "x-client-id": props.clientId,
+      "x-team-id": props.teamId,
+      Authorization: `Bearer ${authToken}`,
+    },
+  });
+
+  if (!res.ok) {
+    const text = await res.text();
+    throw new Error(text);
+  }
+
+  return;
+}
+
+export async function deleteWebhook(props: {
+  clientId: string;
+  teamId: string;
+  webhookId: string;
+}) {
+  const authToken = await getAuthToken();
+  const res = await fetch(
+    `${UB_BASE_URL}/v1/developer/webhooks/${props.webhookId}`,
+    {
+      method: "DELETE",
+      headers: {
+        "Content-Type": "application/json",
+        "x-client-id": props.clientId,
+        "x-team-id": props.teamId,
+        Authorization: `Bearer ${authToken}`,
+      },
+    },
+  );
+
+  if (!res.ok) {
+    const text = await res.text();
+    throw new Error(text);
+  }
+
+  return;
+}
+
+export type Fee = {
+  feeRecipient: string;
+  feeBps: number;
+  createdAt: string;
+  updatedAt: string;
+};
+
+export async function getFees(props: {
+  clientId: string;
+  teamId: string;
+}) {
+  const authToken = await getAuthToken();
+  const res = await fetch(`${UB_BASE_URL}/v1/developer/fees`, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+      "x-team-id": props.teamId,
+      "x-client-id": props.clientId,
+      Authorization: `Bearer ${authToken}`,
+    },
+  });
+
+  if (!res.ok) {
+    const text = await res.text();
+    throw new Error(text);
+  }
+
+  const json = await res.json();
+  return json.data as Fee;
+}
+
+export async function updateFee(props: {
+  clientId: string;
+  teamId: string;
+  feeRecipient: string;
+  feeBps: number;
+}) {
+  const authToken = await getAuthToken();
+  const res = await fetch(`${UB_BASE_URL}/v1/developer/fees`, {
+    method: "PUT",
+    headers: {
+      "Content-Type": "application/json",
+      "x-team-id": props.teamId,
+      "x-client-id": props.clientId,
+      Authorization: `Bearer ${authToken}`,
+    },
+    body: JSON.stringify({
+      feeRecipient: props.feeRecipient,
+      feeBps: props.feeBps,
+    }),
+  });
+
+  if (!res.ok) {
+    const text = await res.text();
+    throw new Error(text);
+  }
+
+  return;
+}
+
+export type PaymentsResponse = {
+  data: Payment[];
+  meta: {
+    totalCount: number;
+  };
+};
+export type Payment = {
+  id: string;
+  blockNumber?: bigint;
+  transactionId: string;
+  clientId: string;
+  sender: string;
+  receiver: string;
+  developerFeeRecipient: string;
+  developerFeeBps: number;
+  transactions: Array<{
+    chainId: number;
+    transactionHash: string;
+  }>;
+  status: "PENDING" | "COMPLETED" | "FAILED" | "NOT_FOUND";
+  type: "buy" | "sell" | "transfer";
+  originAmount: bigint;
+  destinationAmount: bigint;
+  purchaseData: unknown;
+  originToken: {
+    address: string;
+    symbol: string;
+    decimals: number;
+    chainId: number;
+  };
+  destinationToken: {
+    address: string;
+    symbol: string;
+    decimals: number;
+    chainId: number;
+  };
+  createdAt: string;
+};
+
+export async function getPayments(props: {
+  clientId: string;
+  teamId: string;
+  limit?: number;
+  offset?: number;
+}) {
+  const authToken = await getAuthToken();
+
+  // Build URL with query parameters if provided
+  let url = `${UB_BASE_URL}/v1/developer/payments`;
+  const queryParams = new URLSearchParams();
+
+  if (props.limit) {
+    queryParams.append("limit", props.limit.toString());
+  }
+
+  if (props.offset) {
+    queryParams.append("offset", props.offset.toString());
+  }
+
+  // Append query params to URL if any exist
+  const queryString = queryParams.toString();
+  if (queryString) {
+    url = `${url}?${queryString}`;
+  }
+
+  const res = await fetch(url, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+      "x-client-id": props.clientId,
+      "x-team-id": props.teamId,
+      Authorization: `Bearer ${authToken}`,
+    },
+  });
+
+  if (!res.ok) {
+    const text = await res.text();
+    throw new Error(text);
+  }
+
+  const json = await res.json();
+  return json as PaymentsResponse;
+}
@@ -0,0 +1,47 @@
+import "server-only";
+
+import { DASHBOARD_THIRDWEB_SECRET_KEY } from "@/constants/server-envs";
+import { UB_BASE_URL } from "./constants";
+
+type PaymentLink = {
+  clientId: string;
+  title?: string;
+  imageUrl?: string;
+  receiver: string;
+  destinationToken: {
+    address: string;
+    symbol: string;
+    decimals: number;
+    chainId: number;
+  };
+  amount: bigint | undefined;
+  purchaseData: unknown;
+};
+
+export async function getPaymentLink(props: {
+  paymentId: string;
+}) {
+  const res = await fetch(`${UB_BASE_URL}/v1/links/${props.paymentId}`, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+      "x-secret-key": DASHBOARD_THIRDWEB_SECRET_KEY,
+    },
+  });
+
+  if (!res.ok) {
+    const text = await res.text();
+    throw new Error(text);
+  }
+
+  const { data } = await res.json();
+  return {
+    clientId: data.clientId,
+    title: data.title,
+    imageUrl: data.imageUrl,
+    receiver: data.receiver,
+    destinationToken: data.destinationToken,
+    amount: data.amount ? BigInt(data.amount) : undefined,
+    purchaseData: data.purchaseData,
+  } as PaymentLink;
+}
@@ -0,0 +1,71 @@
+"use server";
+import { DASHBOARD_THIRDWEB_SECRET_KEY } from "@/constants/server-envs";
+import type { ProjectResponse } from "@thirdweb-dev/service-utils";
+import { getAuthToken } from "app/(app)/api/lib/getAuthToken";
+import { UB_BASE_URL } from "./constants";
+
+export type TokenMetadata = {
+  name: string;
+  symbol: string;
+  address: string;
+  decimals: number;
+  chainId: number;
+  iconUri?: string;
+};
+
+export async function getUniversalBridgeTokens(props: {
+  chainId?: number;
+}) {
+  const url = new URL(`${UB_BASE_URL}/v1/tokens`);
+
+  if (props.chainId) {
+    url.searchParams.append("chainId", String(props.chainId));
+  }
+  url.searchParams.append("limit", "1000");
+
+  const res = await fetch(url.toString(), {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+      "x-secret-key": DASHBOARD_THIRDWEB_SECRET_KEY,
+    } as Record<string, string>,
+  });
+
+  if (!res.ok) {
+    const text = await res.text();
+    throw new Error(text);
+  }
+
+  const json = await res.json();
+  return json.data as Array<TokenMetadata>;
+}
+
+export async function addUniversalBridgeTokenRoute(props: {
+  chainId: number;
+  tokenAddress: string;
+  project: ProjectResponse;
+}) {
+  const authToken = await getAuthToken();
+  const url = new URL(`${UB_BASE_URL}/v1/tokens`);
+
+  const res = await fetch(url.toString(), {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${authToken}`,
+      "x-client-id": props.project.publishableKey,
+    } as Record<string, string>,
+    body: JSON.stringify({
+      chainId: props.chainId,
+      tokenAddress: props.tokenAddress,
+    }),
+  });
+
+  if (!res.ok) {
+    const text = await res.text();
+    throw new Error(text);
+  }
+
+  const json = await res.json();
+  return json.data as Array<TokenMetadata>;
+}
@@ -0,0 +1,115 @@
+import "server-only";
+import { unstable_cache } from "next/cache";
+import { ANALYTICS_SERVICE_URL } from "../../constants/server-envs";
+
+export type RPCUsageDataItem = {
+  date: string;
+  usageType: "included" | "overage" | "rate-limit";
+  count: string;
+};
+
+export const fetchRPCUsage = unstable_cache(
+  async (params: {
+    teamId: string;
+    projectId?: string;
+    authToken: string;
+    from: string;
+    to: string;
+    period: "day" | "week" | "month" | "year" | "all";
+  }) => {
+    const analyticsEndpoint = ANALYTICS_SERVICE_URL;
+    const url = new URL(`${analyticsEndpoint}/v2/rpc/usage-types`);
+    url.searchParams.set("teamId", params.teamId);
+    if (params.projectId) {
+      url.searchParams.set("projectId", params.projectId);
+    }
+    url.searchParams.set("from", params.from);
+    url.searchParams.set("to", params.to);
+    url.searchParams.set("period", params.period);
+
+    const res = await fetch(url, {
+      headers: {
+        Authorization: `Bearer ${params.authToken}`,
+      },
+    });
+
+    if (!res.ok) {
+      const error = await res.text();
+      return {
+        ok: false as const,
+        error: error,
+      };
+    }
+
+    const resData = await res.json();
+
+    return {
+      ok: true as const,
+      data: resData.data as RPCUsageDataItem[],
+    };
+  },
+  ["rpc-usage"],
+  {
+    revalidate: 60 * 60, // 1 hour
+  },
+);
+
+type Last24HoursRPCUsageApiResponse = {
+  peakRate: {
+    date: string;
+    peakRPS: string;
+  };
+  averageRate: {
+    date: string;
+    averageRate: string;
+    peakRPS: string;
+    includedCount: string;
+    rateLimitedCount: string;
+    overageCount: string;
+  }[];
+  totalCounts: {
+    includedCount: string;
+    rateLimitedCount: string;
+    overageCount: string;
+  };
+};
+
+export const getLast24HoursRPCUsage = unstable_cache(
+  async (params: {
+    teamId: string;
+    projectId?: string;
+    authToken: string;
+  }) => {
+    const analyticsEndpoint = ANALYTICS_SERVICE_URL;
+    const url = new URL(`${analyticsEndpoint}/v2/rpc/24-hours`);
+    url.searchParams.set("teamId", params.teamId);
+    if (params.projectId) {
+      url.searchParams.set("projectId", params.projectId);
+    }
+
+    const res = await fetch(url, {
+      headers: {
+        Authorization: `Bearer ${params.authToken}`,
+      },
+    });
+
+    if (!res.ok) {
+      const error = await res.text();
+      return {
+        ok: false as const,
+        error: error,
+      };
+    }
+
+    const resData = await res.json();
+
+    return {
+      ok: true as const,
+      data: resData.data as Last24HoursRPCUsageApiResponse,
+    };
+  },
+  ["rpc-usage-last-24-hours:v2"],
+  {
+    revalidate: 60, // 1 minute
+  },
+);
@@ -0,0 +1,94 @@
+"use server";
+import "server-only";
+
+import { getAuthToken } from "../../app/(app)/api/lib/getAuthToken";
+import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "../constants/public-envs";
+
+export type VerifiedDomainResponse =
+  | {
+      status: "pending";
+      domain: string;
+      dnsSublabel: string;
+      dnsValue: string;
+    }
+  | {
+      status: "verified";
+      domain: string;
+      verifiedAt: Date;
+    };
+
+export async function checkDomainVerification(
+  teamIdOrSlug: string,
+): Promise<VerifiedDomainResponse | null> {
+  const token = await getAuthToken();
+
+  if (!token) {
+    return null;
+  }
+
+  const res = await fetch(
+    `${NEXT_PUBLIC_THIRDWEB_API_HOST}/v1/teams/${teamIdOrSlug}/verified-domain`,
+    {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    },
+  );
+  if (res.ok) {
+    return (await res.json())?.result as VerifiedDomainResponse;
+  }
+
+  return null;
+}
+
+export async function createDomainVerification(
+  teamIdOrSlug: string,
+  domain: string,
+): Promise<VerifiedDomainResponse | { error: string }> {
+  const token = await getAuthToken();
+
+  if (!token) {
+    return {
+      error: "Unauthorized",
+    };
+  }
+
+  const res = await fetch(
+    `${NEXT_PUBLIC_THIRDWEB_API_HOST}/v1/teams/${teamIdOrSlug}/verified-domain`,
+    {
+      method: "POST",
+      body: JSON.stringify({ domain }),
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${token}`,
+      },
+    },
+  );
+
+  if (res.ok) {
+    return (await res.json())?.result as VerifiedDomainResponse;
+  }
+
+  const resJson = (await res.json()) as {
+    error: {
+      code: string;
+      message: string;
+      statusCode: number;
+    };
+  };
+
+  switch (resJson?.error?.statusCode) {
+    case 400:
+      return {
+        error: "The domain you provided is not valid.",
+      };
+    case 409:
+      return {
+        error: "This domain is already verified by another team.",
+      };
+    default:
+      return {
+        error: resJson?.error?.message ?? "Failed to verify domain",
+      };
+  }
+}
@@ -1,137 +1,95 @@
 "use client";
-
-import { useMutation } from "@tanstack/react-query";
-import { toast } from "sonner";
-import type {
-  GetBillingCheckoutUrlAction,
-  GetBillingCheckoutUrlOptions,
-  GetBillingPortalUrlAction,
-  GetBillingPortalUrlOptions,
-} from "../actions/billing";
+import { AlertTriangleIcon } from "lucide-react";
+import Link from "next/link";
+import {
+  buildBillingPortalUrl,
+  buildCheckoutUrl,
+} from "../../app/(app)/(stripe)/utils/build-url";
+import type { Team } from "../api/team";
+import type { ProductSKU } from "../lib/billing";
 import { cn } from "../lib/utils";
-import { Spinner } from "./ui/Spinner/Spinner";
 import { Button, type ButtonProps } from "./ui/button";

-type CheckoutButtonProps = Omit<GetBillingCheckoutUrlOptions, "redirectUrl"> & {
-  getBillingCheckoutUrl: GetBillingCheckoutUrlAction;
+export function CheckoutButton(props: {
  buttonProps?: Omit<ButtonProps, "children">;
  children: React.ReactNode;
-};
-
-export function CheckoutButton({
-  teamSlug,
-  sku,
-  metadata,
-  getBillingCheckoutUrl,
-  children,
-  buttonProps,
-}: CheckoutButtonProps) {
-  const getUrlMutation = useMutation({
-    mutationFn: async () => {
-      return getBillingCheckoutUrl({
-        teamSlug,
-        sku,
-        metadata,
-        redirectUrl: getAbsoluteUrl("/stripe-redirect"),
-      });
-    },
-  });
-
-  const errorMessage = "Failed to open checkout page";
-
+  billingStatus: Team["billingStatus"];
+  teamSlug: string;
+  sku: Exclude<ProductSKU, null>;
+}) {
  return (
-    <Button
-      {...buttonProps}
-      className={cn(buttonProps?.className, "gap-2")}
-      disabled={getUrlMutation.isPending || buttonProps?.disabled}
-      onClick={async (e) => {
-        buttonProps?.onClick?.(e);
-        getUrlMutation.mutate(undefined, {
-          onSuccess: (res) => {
-            if (!res.url) {
-              toast.error(errorMessage);
-              return;
-            }
-
-            const tab = window.open(res.url, "_blank");
-
-            if (!tab) {
-              toast.error(errorMessage);
-              return;
-            }
-          },
-          onError: () => {
-            toast.error(errorMessage);
-          },
-        });
-      }}
-    >
-      {getUrlMutation.isPending && <Spinner className="size-4" />}
-      {children}
-    </Button>
+    <div className="flex w-full flex-col items-center gap-2">
+      {/* show warning if the team has an invalid payment method */}
+      {props.billingStatus === "invalidPayment" && (
+        <BillingWarning teamSlug={props.teamSlug} />
+      )}
+      <Button
+        {...props.buttonProps}
+        asChild
+        className={cn(props.buttonProps?.className, "w-full gap-2")}
+        disabled={
+          // disable button if the team has an invalid payment method
+          // api will return 402 error if the team has an invalid payment method
+          props.billingStatus === "invalidPayment" ||
+          props.buttonProps?.disabled
+        }
+        onClick={async (e) => {
+          props.buttonProps?.onClick?.(e);
+        }}
+      >
+        <Link
+          target="_blank"
+          href={buildCheckoutUrl({
+            teamSlug: props.teamSlug,
+            sku: props.sku,
+          })}
+        >
+          {props.children}
+        </Link>
+      </Button>
+    </div>
  );
 }

-type BillingPortalButtonProps = Omit<
-  GetBillingPortalUrlOptions,
-  "redirectUrl"
-> & {
-  getBillingPortalUrl: GetBillingPortalUrlAction;
-  buttonProps?: Omit<ButtonProps, "children">;
-  children: React.ReactNode;
-};
-
-export function BillingPortalButton({
-  teamSlug,
-  children,
-  getBillingPortalUrl,
-  buttonProps,
-}: BillingPortalButtonProps) {
-  const getUrlMutation = useMutation({
-    mutationFn: async () => {
-      return getBillingPortalUrl({
-        teamSlug,
-        redirectUrl: getAbsoluteUrl("/stripe-redirect"),
-      });
-    },
-  });
-
-  const errorMessage = "Failed to open billing portal";
-
+function BillingWarning({ teamSlug }: { teamSlug: string }) {
  return (
-    <Button
-      {...buttonProps}
-      className={cn(buttonProps?.className, "gap-2")}
-      disabled={getUrlMutation.isPending || buttonProps?.disabled}
-      onClick={async (e) => {
-        buttonProps?.onClick?.(e);
-        getUrlMutation.mutate(undefined, {
-          onSuccess(res) {
-            if (!res.url) {
-              toast.error(errorMessage);
-              return;
-            }
-
-            const tab = window.open(res.url, "_blank");
-            if (!tab) {
-              toast.error(errorMessage);
-              return;
-            }
-          },
-          onError: () => {
-            toast.error(errorMessage);
-          },
-        });
-      }}
-    >
-      {getUrlMutation.isPending && <Spinner className="size-4" />}
-      {children}
-    </Button>
+    <div className="flex items-center gap-2 rounded-md border border-amber-200 bg-amber-50 p-3 text-amber-800 dark:border-amber-700/50 dark:bg-amber-900/30 dark:text-amber-400">
+      <AlertTriangleIcon className="h-5 w-5 flex-shrink-0" />
+      <p className="text-sm">
+        You have outstanding invoices. Please{" "}
+        <Link
+          href={`/team/${teamSlug}/~/settings/invoices?status=open`}
+          className="font-medium text-amber-700 underline transition-colors hover:text-amber-900 dark:text-amber-400 dark:hover:text-amber-300"
+        >
+          pay them
+        </Link>{" "}
+        to continue.
+      </p>
+    </div>
  );
 }

-function getAbsoluteUrl(path: string) {
-  const url = new URL(window.location.origin);
-  url.pathname = path;
-  return url.toString();
+export function BillingPortalButton(props: {
+  teamSlug: string;
+  buttonProps?: Omit<ButtonProps, "children">;
+  children: React.ReactNode;
+}) {
+  return (
+    <Button
+      {...props.buttonProps}
+      className={cn(props.buttonProps?.className, "gap-2")}
+      disabled={props.buttonProps?.disabled}
+      asChild
+      onClick={async (e) => {
+        props.buttonProps?.onClick?.(e);
+      }}
+    >
+      <Link
+        href={buildBillingPortalUrl({ teamSlug: props.teamSlug })}
+        target="_blank"
+      >
+        {props.children}
+      </Link>
+    </Button>
+  );
 }
@@ -1,7 +1,9 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
-import { BadgeContainer } from "../../../../stories/utils";
-import { getThirdwebClient } from "../../../constants/thirdweb.server";
+import {
+  BadgeContainer,
+  storybookThirdwebClient,
+} from "../../../../stories/utils";
 import { Button } from "../../ui/button";
 import { GradientAvatar } from "./GradientAvatar";

@@ -17,8 +19,6 @@ export const Variants: Story = {
  args: {},
 };

-const client = getThirdwebClient();
-
 function Story() {
  return (
    <div className="container flex max-w-6xl flex-col gap-10 py-10">
@@ -29,7 +29,7 @@ function Story() {
          id={undefined}
          src={undefined}
          className="size-20"
-          client={client}
+          client={storybookThirdwebClient}
        />
      </BadgeContainer>

@@ -38,7 +38,7 @@ function Story() {
          id={"foo"}
          src={undefined}
          className="size-20"
-          client={client}
+          client={storybookThirdwebClient}
        />
      </BadgeContainer>

@@ -47,7 +47,7 @@ function Story() {
          id={"foo"}
          src={""}
          className="size-20"
-          client={client}
+          client={storybookThirdwebClient}
        />
      </BadgeContainer>

@@ -56,7 +56,7 @@ function Story() {
          id={"bar"}
          src={""}
          className="size-20"
-          client={client}
+          client={storybookThirdwebClient}
        />
      </BadgeContainer>

@@ -65,7 +65,7 @@ function Story() {
          src="invalid-src"
          id={undefined}
          className="size-20"
-          client={client}
+          client={storybookThirdwebClient}
        />
      </BadgeContainer>

@@ -74,7 +74,7 @@ function Story() {
          src="https://picsum.photos/200/300"
          id={undefined}
          className="size-20"
-          client={client}
+          client={storybookThirdwebClient}
        />
      </BadgeContainer>

@@ -83,7 +83,7 @@ function Story() {
          src="ipfs://QmZbeJYEs7kCJHyQxjxU2SJUtjSAr4m87wzJFJUyWomKdj/Smily.svg"
          id={undefined}
          className="size-20"
-          client={client}
+          client={storybookThirdwebClient}
        />
      </BadgeContainer>

@@ -123,7 +123,7 @@ function ToggleTest() {
          src={data?.src}
          id={data?.id}
          className="size-20"
-          client={client}
+          client={storybookThirdwebClient}
        />
      </BadgeContainer>

@@ -132,7 +132,7 @@ function ToggleTest() {
          className="size-20"
          src={data ? "invalid-src" : undefined}
          id={undefined}
-          client={client}
+          client={storybookThirdwebClient}
        />
      </BadgeContainer>
    </div>
@@ -1,7 +1,9 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
-import { BadgeContainer } from "../../../../stories/utils";
-import { getThirdwebClient } from "../../../constants/thirdweb.server";
+import {
+  BadgeContainer,
+  storybookThirdwebClient,
+} from "../../../../stories/utils";
 import { Button } from "../../ui/button";
 import { ProjectAvatar } from "./ProjectAvatar";

@@ -18,19 +20,25 @@ export const Variants: Story = {
  args: {},
 };

-const client = getThirdwebClient();
-
 function Story() {
  return (
    <div className="container flex max-w-6xl flex-col gap-10 py-10">
      <p> All images below are set with size-6 className </p>

      <BadgeContainer label="No Src - Skeleton">
-        <ProjectAvatar src={undefined} className="size-6" client={client} />
+        <ProjectAvatar
+          src={undefined}
+          className="size-6"
+          client={storybookThirdwebClient}
+        />
      </BadgeContainer>

      <BadgeContainer label="Invalid/Empty Src - BoxIcon Fallback">
-        <ProjectAvatar src={""} className="size-6" client={client} />
+        <ProjectAvatar
+          src={""}
+          className="size-6"
+          client={storybookThirdwebClient}
+        />
      </BadgeContainer>

      <ToggleTest />
@@ -65,14 +73,18 @@ function ToggleTest() {
      <p> Src+Name is: {data ? "set" : "not set"} </p>

      <BadgeContainer label="Valid Src">
-        <ProjectAvatar src={data?.src} className="size-6" client={client} />
+        <ProjectAvatar
+          src={data?.src}
+          className="size-6"
+          client={storybookThirdwebClient}
+        />
      </BadgeContainer>

      <BadgeContainer label="invalid Src">
        <ProjectAvatar
          src={data ? "invalid-src" : undefined}
          className="size-6"
-          client={client}
+          client={storybookThirdwebClient}
        />
      </BadgeContainer>
    </div>
@@ -1,6 +1,9 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
-import { BadgeContainer } from "../../../stories/utils";
+import {
+  BadgeContainer,
+  storybookThirdwebClient,
+} from "../../../stories/utils";
 import { MultiNetworkSelector } from "./NetworkSelectors";

 const meta = {
@@ -41,6 +44,7 @@ function Variant(props: {
    <BadgeContainer label={props.label}>
      <MultiNetworkSelector
        selectedChainIds={chainIds}
+        client={storybookThirdwebClient}
        onChange={setChainIds}
      />
    </BadgeContainer>
@@ -4,7 +4,8 @@ import { MultiSelect } from "@/components/blocks/multi-select";
 import { SelectWithSearch } from "@/components/blocks/select-with-search";
 import { Badge } from "@/components/ui/badge";
 import { useCallback, useMemo } from "react";
-import { ChainIcon } from "../../../components/icons/ChainIcon";
+import type { ThirdwebClient } from "thirdweb";
+import { ChainIconClient } from "../../../components/icons/ChainIcon";
 import { useAllChainsData } from "../../../hooks/chains/allChains";

 function cleanChainName(chainName: string) {
@@ -19,6 +20,13 @@ export function MultiNetworkSelector(props: {
  disableChainId?: boolean;
  className?: string;
  priorityChains?: number[];
+  hideTestnets?: boolean;
+  popoverContentClassName?: string;
+  customTrigger?: React.ReactNode;
+  align?: "center" | "start" | "end";
+  side?: "left" | "right" | "top" | "bottom";
+  showSelectedValuesInModal?: boolean;
+  client: ThirdwebClient;
 }) {
  const { allChains, idToChain } = useAllChainsData();

@@ -44,13 +52,17 @@ export function MultiNetworkSelector(props: {
      sortedChains = [...priorityChains, ...otherChains];
    }

+    if (props.hideTestnets) {
+      sortedChains = sortedChains.filter((chain) => !chain.testnet);
+    }
+
    return sortedChains.map((chain) => {
      return {
        label: cleanChainName(chain.name),
        value: String(chain.chainId),
      };
    });
-  }, [allChains, props.priorityChains, idToChain]);
+  }, [allChains, props.priorityChains, idToChain, props.hideTestnets]);

  const searchFn = useCallback(
    (option: Option, searchValue: string) => {
@@ -59,7 +71,7 @@ export function MultiNetworkSelector(props: {
        return false;
      }

-      if (Number.isInteger(Number.parseInt(searchValue))) {
+      if (Number.isInteger(Number(searchValue))) {
        return String(chain.chainId).startsWith(searchValue);
      }
      return chain.name.toLowerCase().includes(searchValue.toLowerCase());
@@ -77,10 +89,11 @@ export function MultiNetworkSelector(props: {
      return (
        <div className="flex justify-between gap-4">
          <span className="flex grow gap-2 truncate text-left">
-            <ChainIcon
+            <ChainIconClient
              className="size-5"
-              ipfsSrc={chain.icon?.url}
              loading="lazy"
+              src={chain.icon?.url}
+              client={props.client}
            />
            {cleanChainName(chain.name)}
          </span>
@@ -94,14 +107,19 @@ export function MultiNetworkSelector(props: {
        </div>
      );
    },
-    [idToChain, props.disableChainId],
+    [idToChain, props.disableChainId, props.client],
  );

  return (
    <MultiSelect
      searchPlaceholder="Search by Name or Chain Id"
      selectedValues={props.selectedChainIds.map(String)}
+      popoverContentClassName={props.popoverContentClassName}
+      customTrigger={props.customTrigger}
      options={options}
+      align={props.align}
+      side={props.side}
+      showSelectedValuesInModal={props.showSelectedValuesInModal}
      onSelectedValuesChange={(chainIds) => {
        props.onChange(chainIds.map(Number));
      }}
@@ -126,17 +144,26 @@ export function SingleNetworkSelector(props: {
  side?: "left" | "right" | "top" | "bottom";
  disableChainId?: boolean;
  align?: "center" | "start" | "end";
+  disableTestnets?: boolean;
  placeholder?: string;
+  client: ThirdwebClient;
 }) {
  const { allChains, idToChain } = useAllChainsData();

  const chainsToShow = useMemo(() => {
-    if (!props.chainIds) {
-      return allChains;
+    let chains = allChains;
+
+    if (props.disableTestnets) {
+      chains = chains.filter((chain) => !chain.testnet);
    }
-    const chainIdSet = new Set(props.chainIds);
-    return allChains.filter((chain) => chainIdSet.has(chain.chainId));
-  }, [allChains, props.chainIds]);
+
+    if (props.chainIds) {
+      const chainIdSet = new Set(props.chainIds);
+      chains = chains.filter((chain) => chainIdSet.has(chain.chainId));
+    }
+
+    return chains;
+  }, [allChains, props.chainIds, props.disableTestnets]);

  const options = useMemo(() => {
    return chainsToShow.map((chain) => {
@@ -154,7 +181,7 @@ export function SingleNetworkSelector(props: {
        return false;
      }

-      if (Number.isInteger(Number.parseInt(searchValue))) {
+      if (Number.isInteger(Number(searchValue))) {
        return String(chain.chainId).startsWith(searchValue);
      }
      return chain.name.toLowerCase().includes(searchValue.toLowerCase());
@@ -172,9 +199,10 @@ export function SingleNetworkSelector(props: {
      return (
        <div className="flex justify-between gap-4">
          <span className="flex grow gap-2 truncate text-left">
-            <ChainIcon
+            <ChainIconClient
              className="size-5"
-              ipfsSrc={chain.icon?.url}
+              src={chain.icon?.url}
+              client={props.client}
              loading="lazy"
            />
            {cleanChainName(chain.name)}
@@ -189,7 +217,7 @@ export function SingleNetworkSelector(props: {
        </div>
      );
    },
-    [idToChain, props.disableChainId],
+    [idToChain, props.disableChainId, props.client],
  );

  const isLoadingChains = allChains.length === 0;
@@ -198,6 +226,7 @@ export function SingleNetworkSelector(props: {
    <SelectWithSearch
      searchPlaceholder="Search by Name or Chain ID"
      value={String(props.chainId)}
+      showCheck={false}
      options={options}
      onValueChange={(chainId) => {
        props.onChange(Number(chainId));
@@ -0,0 +1,84 @@
+import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import type React from "react";
+
+export function RouteDiscoveryCard(
+  props: React.PropsWithChildren<{
+    bottomText: React.ReactNode;
+    header?: {
+      description: string | undefined;
+      title: string;
+    };
+    errorText: string | undefined;
+    noPermissionText: string | undefined;
+    saveButton?: {
+      onClick?: () => void;
+      disabled: boolean;
+      isPending: boolean;
+      type?: "submit";
+      variant?:
+        | "ghost"
+        | "default"
+        | "primary"
+        | "destructive"
+        | "outline"
+        | "secondary";
+      className?: string;
+      label?: string;
+    };
+  }>,
+) {
+  return (
+    <div className="relative rounded-lg border border-border bg-card">
+      <div
+        className={cn(
+          "relative border-border border-b px-4 py-6 lg:px-6",
+          props.noPermissionText && "cursor-not-allowed",
+        )}
+      >
+        {props.header && (
+          <>
+            <h3 className="font-semibold text-xl tracking-tight">
+              {props.header.title}
+            </h3>
+            {props.header.description && (
+              <p className="mt-1.5 mb-4 text-foreground text-sm">
+                {props.header.description}
+              </p>
+            )}
+          </>
+        )}
+
+        {props.children}
+      </div>
+
+      <div className="flex min-h-[60px] items-center justify-between gap-2 px-4 py-3 lg:px-6">
+        {props.noPermissionText ? (
+          <p className="text-muted-foreground text-sm">
+            {props.noPermissionText}
+          </p>
+        ) : props.errorText ? (
+          <p className="text-destructive-text text-sm">{props.errorText}</p>
+        ) : (
+          <p className="text-muted-foreground text-sm">{props.bottomText}</p>
+        )}
+
+        {props.saveButton && !props.noPermissionText && (
+          <Button
+            size="sm"
+            className={cn("gap-2", props.saveButton.className)}
+            onClick={props.saveButton.onClick}
+            disabled={props.saveButton.disabled || props.saveButton.isPending}
+            variant={props.saveButton.variant || "outline"}
+            type={props.saveButton.type}
+          >
+            {props.saveButton.isPending && <Spinner className="size-3" />}
+            {props.saveButton.label ||
+              (props.saveButton.isPending ? "Submit" : "Submit Token")}
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}
@@ -95,7 +95,7 @@ export function FullWidthSidebarLayout(props: {
          links={[...contentSidebarLinks, ...(footerSidebarLinks || [])]}
        />

-        <main className="z-0 flex min-w-0 grow flex-col max-sm:w-full">
+        <main className="flex min-w-0 grow flex-col max-sm:w-full">
          {children}
        </main>
        <AppFooter containerClassName="max-w-7xl" />
@@ -137,7 +137,7 @@ function RenderSidebarGroup(props: {
        }

        if ("separator" in link) {
-          return <SidebarSeparator className="my-1" />;
+          return <SidebarSeparator key={Math.random()} className="my-1" />;
        }

        return (
@@ -1,6 +1,9 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
-import { BadgeContainer } from "../../../stories/utils";
+import {
+  BadgeContainer,
+  storybookThirdwebClient,
+} from "../../../stories/utils";
 import { SingleNetworkSelector } from "./NetworkSelectors";

 const meta = {
@@ -43,6 +46,7 @@ function Variant(props: {
  return (
    <BadgeContainer label={props.label}>
      <SingleNetworkSelector
+        client={storybookThirdwebClient}
        chainId={chainId}
        onChange={setChainId}
        chainIds={props.chainIds}
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				`export const UB_BASE_URL = process.env.NEXT_PUBLIC_THIRDWEB_BRIDGE_HOST;`