Version Packages (#7579)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

.github/workflows/CI.yml

@@ -63,7 +63,7 @@ jobs:
       - name: Setup Biome
         uses: biomejs/setup-biome@a9763ed3d2388f5746f9dc3e1a55df7f4609bc89 # v2.5.1
         with:
-          version: 2.0.0  
+          version: 2.0.6
 
       - run: pnpm lint
 

CLAUDE.md

@@ -0,0 +1,290 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Development Commands
+
+### Package Management
+
+- Use `pnpm install` (or `pnpm install --ignore-scripts` on Windows)
+- Monorepo managed with Turborepo and pnpm workspaces
+
+### Building
+
+```bash
+# Build all packages
+pnpm build
+
+# Build specific packages with dependencies
+turbo run build --filter=./packages/*
+
+# Development with watch mode
+pnpm dev                    # Core thirdweb package
+pnpm dashboard              # Run dashboard + dependencies
+pnpm playground             # Run playground + dependencies
+pnpm portal                 # Run portal docs + dependencies
+```
+
+### Testing
+
+```bash
+# Run all tests
+pnpm test
+
+# Interactive testing (thirdweb package)
+cd packages/thirdweb && pnpm test:devr
+
+# Test specific file
+pnpm test:dev <path-to-test-file>
+
+# E2E testing (dashboard)
+cd apps/dashboard && pnpm playwright
+```
+
+### Code Quality
+
+```bash
+# Lint all packages
+pnpm lint
+
+# Auto-fix linting issues
+pnpm fix
+
+# Format code
+turbo run format
+
+# Biome is the primary linter/formatter
+```
+
+### Development Workflow
+
+```bash
+# Start development server for dashboard
+pnpm dashboard
+
+# Start playground for SDK testing
+pnpm playground
+
+# Generate changeset for releases
+pnpm changeset
+
+# Version packages
+pnpm version-packages
+```
+
+## Repository Architecture
+
+### Monorepo Structure
+
+This is a Turborepo monorepo with the main thirdweb v5 SDK consolidated into `/packages/thirdweb/`. Legacy packages are in `/legacy_packages/`.
+
+### Core Package (`/packages/thirdweb/`)
+
+**Main Modules:**
+
+- `client/` - ThirdwebClient foundation
+- `chains/` - 50+ supported blockchain definitions
+- `contract/` - Contract interaction with automatic ABI resolution
+- `transaction/` - Transaction management and execution
+- `wallets/` - Comprehensive wallet integration system
+- `extensions/` - Modular contract extensions (ERC20, ERC721, etc.)
+- `auth/` - SIWE authentication and signature verification
+- `pay/` - Fiat and crypto payment infrastructure
+- `storage/` - IPFS integration for decentralized storage
+- `rpc/` - Low-level blockchain communication
+
+**Exports Structure:**
+The SDK uses modular exports from `src/exports/` including:
+
+- `thirdweb.ts` - Core client and utilities
+- `chains.ts` - Chain definitions
+- `wallets.ts` - Wallet connectors
+- `react.ts` - React hooks and components
+- `extensions/` - Contract standards and protocols
+
+### Applications (`/apps/`)
+
+- **dashboard** - Web-based developer console (Next.js, Chakra UI)
+- **playground-web** - Interactive SDK testing environment
+- **portal** - Documentation site with MDX
+- **nebula** - Account abstraction and smart wallet management
+- **wallet-ui** - Wallet interface and testing
+
+### Key Packages (`/packages/`)
+
+- **thirdweb** - Main SDK (TypeScript, React, React Native)
+- **engine** - thirdweb Engine API client
+- **insight** - Analytics and data APIs
+- **nebula** - Account abstraction client
+- **service-utils** - Shared utilities across services
+
+## Development Practices
+
+### GitHub Workflow & Pull Requests
+
+- **PR titles**: Must start with affected workspace in brackets (e.g. `[SDK]`, `[Dashboard]`, `[Portal]`, `[Playground]`)
+- **PR descriptions**: Begin with one-sentence summary, add checklist of changes, reference issues with `Fixes #123`
+- **Commits**: Keep small and topical – one logical change per commit
+- **Branch naming**: Use `area/brief-topic` format (e.g. `sdk/fix-gas-estimate`). Avoid personal names
+- **Reviews**: Request at least one core maintainer review. Do not self-merge unless sole package owner
+- **CI requirements**: All checks (type-check, Biome, tests) must pass before merging
+
+### Code Quality & Formatting
+
+- **Biome**: Primary linter/formatter (rules in `biome.json`)
+- **Pre-commit**: Run `pnpm biome check --apply` before committing
+- **Build verification**: Run `pnpm build` after each file change to ensure everything builds
+- Avoid editor-specific configs; rely on shared settings
+
+### TypeScript Guidelines
+
+- **Style**: Write idiomatic TypeScript with explicit function declarations and return types
+- **File structure**: Limit each file to one stateless, single-responsibility function for clarity
+- **Types**: Re-use shared types from `@/types` or local `types.ts` barrels
+- **Interfaces vs Types**: Prefer type aliases over interface except for nominal shapes
+- **Type safety**: Avoid `any` and `unknown` unless unavoidable; narrow generics when possible
+- **Architecture**: Choose composition over inheritance; leverage utility types (`Partial`, `Pick`, etc.)
+
+### Testing Strategy
+
+- **Co-location**: Place tests alongside code: `foo.ts` ↔ `foo.test.ts`
+- **Test approach**: Use real function invocations with stub data; avoid brittle mocks
+- **Network mocking**: Use Mock Service Worker (MSW) for fetch/HTTP call interception
+- **Test quality**: Keep tests deterministic and side-effect free
+- **Running tests**: `cd packages/thirdweb && pnpm test:dev <filename>`
+- **Test accounts**: Predefined accounts in `test/src/test-wallets.ts`
+- **Chain forking**: Use `FORKED_ETHEREUM_CHAIN` for mainnet interactions, `ANVIL_CHAIN` for isolated tests
+
+### SDK Development (`packages/thirdweb`)
+
+#### Public API Guidelines
+- **Exports**: Export everything via `exports/` directory, grouped by feature
+- **Documentation**: Every public symbol must have comprehensive TSDoc with:
+  - At least one `@example` block that compiles
+  - Custom annotation tags (`@beta`, `@internal`, `@experimental`)
+- **Comments**: Comment only ambiguous logic; avoid restating TypeScript in prose
+
+#### Performance Optimization
+- **Lazy loading**: Load heavy dependencies inside async paths to keep initial bundle lean:
+  ```typescript
+  const { jsPDF } = await import("jspdf");
+  ```
+- **Bundle budgets**: Track via `package.json#size-limit`
+- **Dependencies**: De-duplicate across packages through pnpm workspace hoisting
+
+### Dashboard & Playground Development
+
+#### UI Component Standards
+- **Core components**: Import primitives from `@/components/ui/*` (Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator)
+- **Navigation**: Use `NavLink` for internal navigation with automatic active states
+- **Organization**: Group feature-specific components under `feature/components/*` with barrel `index.ts`
+
+#### Styling Conventions
+- **CSS framework**: Tailwind CSS only – no inline styles or CSS modules
+- **Class merging**: Use `cn()` from `@/lib/utils` for conditional logic
+- **Design tokens**: Use design system tokens (backgrounds: `bg-card`, borders: `border-border`, muted text: `text-muted-foreground`)
+- **Component API**: Expose `className` prop on root element for overrides
+
+#### Component Architecture
+- **Server Components** (Node edge):
+  - Start files with `import "server-only";`
+  - Read cookies/headers with `next/headers`
+  - Access server-only environment variables
+  - Perform heavy data fetching
+  - Implement redirect logic with `redirect()` from `next/navigation`
+- **Client Components** (browser):
+  - Begin files with `'use client';`
+  - Handle interactive UI with React hooks (`useState`, `useEffect`, React Query, wallet hooks)
+  - Access browser APIs (`localStorage`, `window`, `IntersectionObserver`)
+  - Support fast transitions with prefetched data
+
+#### Data Fetching Patterns
+- **Server Side**:
+  - Always call `getAuthToken()` to retrieve JWT from cookies
+  - Use `Authorization: Bearer` header – never embed tokens in URLs
+  - 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 (default ≥ 60s)
+  - Keep tokens secret via internal API routes or server actions
+
+#### Analytics Event Guidelines
+- **When to add**: Only create events that answer clear product/business questions
+- **Check duplicates**: Review `src/@/analytics/report.ts` first
+- **Naming**: 
+  - Event name: human-readable `<subject> <verb>` (e.g. "contract deployed")
+  - Function: `report<Subject><Verb>` (PascalCase)
+- **Template**:
+  ```typescript
+  /**
+   * ### Why do we need to report this event?
+   * - Tracks number of contracts deployed
+   *
+   * ### Who is responsible for this event?
+   * @username
+   */
+  export function reportContractDeployed(properties: {
+    address: string;
+    chainId: number;
+  }) {
+    posthog.capture("contract deployed", properties);
+  }
+  ```
+- **Client-side only**: Never import `posthog-js` in server components
+- **Changes**: Inform **#eng-core-services** before renaming/removing events
+
+### Extension Development
+
+- Extensions follow modular pattern in `src/extensions/`
+- Auto-generated contracts from ABI definitions
+- Composable functions with TypeScript safety
+- Support for read/write operations
+
+### Wallet Architecture
+
+- Unified `Wallet` and `Account` interfaces
+- Support for in-app wallets (social/email login)
+- Smart wallets with account abstraction
+- EIP-1193, EIP-5792, EIP-7702 standard support
+
+## Contribution Workflow
+
+1. **Fork and Clone**: Create fork, clone, create feature branch
+2. **Install**: `pnpm install` (use `--ignore-scripts` on Windows)
+3. **Develop**: Use appropriate dev commands above
+4. **Test**: Write unit tests, run linting, test on demo apps
+5. **Changeset**: Run `pnpm changeset` for semantic versioning
+6. **PR**: Submit pull request to main branch
+
+### Release Testing
+
+Comment `/release-pr` on PR to trigger dev release to npm for testing.
+
+### Changeset Guidelines
+
+Each change in `packages/*` should contain a changeset for the appropriate package with the appropriate version bump:
+- **patch**: Changes that don't impact the public API
+- **minor**: Any new/modified public API
+- **major**: Breaking changes (surface prominently in PR descriptions)
+
+### Documentation Standards
+
+- For new UI components, add Storybook stories (`*.stories.tsx`) alongside the code
+- Surface breaking changes prominently in PR descriptions
+- Keep documentation focused on developer experience and practical usage
+
+## Multi-Platform Support
+
+The SDK supports:
+
+- **Web**: React hooks and components
+- **React Native**: Mobile-specific exports and components
+- **Node.js**: Server-side functionality
+- **Framework Adapters**: Wagmi, Ethers compatibility layers
+
+Key files:
+
+- `src/exports/react.native.ts` - React Native specific exports
+- `packages/react-native-adapter/` - Mobile platform shims
+- `packages/wagmi-adapter/` - Wagmi ecosystem integration

apps/dashboard/.eslintrc.js

@@ -10,9 +10,9 @@ module.exports = {
     "plugin:storybook/recommended",
   ],
   overrides: [
-    // disable restricted imports in tw-components
+    // disable restricted imports in chakra
     {
-      files: "src/tw-components/**/*",
+      files: "src/chakra/**/*",
       rules: {
         "no-restricted-imports": ["off"],
       },
@@ -92,7 +92,7 @@ module.exports = {
       {
         paths: [
           {
-            // these are provided by tw-components, so we don't want to import them from chakra directly
+            // these are provided by chakra folder, so we don't want to import them from chakra directly
             importNames: [
               "Card",
               "Button",
@@ -127,7 +127,7 @@ module.exports = {
               "StackProps",
             ],
             message:
-              'Use the equivalent component from "tw-components" instead.',
+              'import component from "chakra" folder instead if you have to use chakra component, But use shadcn component otherwise',
             name: "@chakra-ui/react",
           },
           {
@@ -151,12 +151,6 @@ module.exports = {
               'Use `import { useDashboardRouter } from "@/lib/DashboardRouter";` instead',
             name: "next/navigation",
           },
-          {
-            importNames: ["Link", "Table", "Sidebar"],
-            message:
-              'This is likely a mistake. If you really want to import this - postfix the imported name with Icon. Example - "LinkIcon"',
-            name: "lucide-react",
-          },
           {
             message:
               'Import "posthog-js" directly only within the analytics helpers ("src/@/analytics/*"). Use the exported helpers from "@/analytics/track" elsewhere.',

apps/dashboard/biome.json

@@ -1,4 +1,4 @@
 {
-  "$schema": "https://biomejs.dev/schemas/2.0.0/schema.json",
+  "$schema": "https://biomejs.dev/schemas/2.0.6/schema.json",
   "extends": "//"
 }

apps/dashboard/framer-rewrites.js

@@ -14,12 +14,15 @@ module.exports = [
   "/in-app-wallets",
   "/transactions",
   // -- end build category
-  // -- storage
+
+  // -- scale category
+  "/rpc",
+  "/insight",
   "/storage",
+  // -- end scale category
+
   // -- nebula
   "/nebula",
-  // --insight
-  "/insight",
   // -- contracts
   "/contracts",
   "/contracts/modular-contracts",

apps/dashboard/knip.json

@@ -2,9 +2,9 @@
   "$schema": "https://unpkg.com/knip@5/schema.json",
   "ignore": [
     "src/@/components/ui/**",
-    "src/components/notices/AnnouncementBanner.tsx",
-    "src/components/cmd-k-search/index.tsx",
-    "src/lib/search.ts"
+    "src/@/components/misc/AnnouncementBanner.tsx",
+    "src/@/components/cmd-k-search/index.tsx",
+    "src/@/lib/search.ts"
   ],
   "ignoreBinaries": ["only-allow"],
   "ignoreDependencies": [

apps/dashboard/next.config.ts

@@ -208,35 +208,29 @@ function getConfig(): NextConfig {
     const withBundleAnalyzer = require("@next/bundle-analyzer")({
       enabled: process.env.ANALYZE === "true",
     });
-    // eslint-disable-next-line @typescript-eslint/no-var-requires
-    const { withPlausibleProxy } = require("next-plausible");
+
     // eslint-disable-next-line @typescript-eslint/no-var-requires
     const { withSentryConfig } = require("@sentry/nextjs");
     return withBundleAnalyzer(
-      withPlausibleProxy({
-        customDomain: "https://pl.thirdweb.com",
-        scriptName: "pl",
-      })(
-        withSentryConfig(
-          {
-            ...baseNextConfig,
-            // @ts-expect-error - this is a valid option
-            webpack: (config) => {
-              if (config.cache) {
-                config.cache = Object.freeze({
-                  type: "memory",
-                });
-              }
-              config.module = {
-                ...config.module,
-                exprContextCritical: false,
-              };
-              // Important: return the modified config
-              return config;
-            },
+      withSentryConfig(
+        {
+          ...baseNextConfig,
+          // @ts-expect-error - this is a valid option
+          webpack: (config) => {
+            if (config.cache) {
+              config.cache = Object.freeze({
+                type: "memory",
+              });
+            }
+            config.module = {
+              ...config.module,
+              exprContextCritical: false,
+            };
+            // Important: return the modified config
+            return config;
           },
-          SENTRY_OPTIONS,
-        ),
+        },
+        SENTRY_OPTIONS,
       ),
     );
   }

apps/dashboard/package.json

@@ -4,13 +4,14 @@
     "@chakra-ui/styled-system": "^2.9.2",
     "@chakra-ui/theme-tools": "^2.1.2",
     "@emotion/react": "11.14.0",
-    "@emotion/styled": "11.14.0",
+    "@emotion/styled": "11.14.1",
     "@hookform/resolvers": "^3.9.1",
     "@marsidev/react-turnstile": "^1.1.0",
     "@radix-ui/react-accordion": "^1.2.11",
     "@radix-ui/react-alert-dialog": "^1.1.14",
     "@radix-ui/react-avatar": "^1.1.10",
     "@radix-ui/react-checkbox": "^1.3.2",
+    "@radix-ui/react-collapsible": "^1.1.11",
     "@radix-ui/react-dialog": "1.1.14",
     "@radix-ui/react-dropdown-menu": "^2.1.15",
     "@radix-ui/react-hover-card": "^1.1.14",
@@ -23,14 +24,14 @@
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-switch": "^1.2.5",
     "@radix-ui/react-tooltip": "1.2.7",
-    "@scalar/api-reference-react": "^0.6.19",
-    "@sentry/nextjs": "9.29.0",
+    "@scalar/api-reference-react": "0.7.25",
+    "@sentry/nextjs": "9.34.0",
     "@shazow/whatsabi": "0.22.2",
-    "@tanstack/react-query": "5.80.7",
+    "@tanstack/react-query": "5.81.5",
     "@tanstack/react-table": "^8.21.3",
     "@thirdweb-dev/service-utils": "workspace:*",
     "@thirdweb-dev/vault-sdk": "workspace:*",
-    "@vercel/functions": "2.1.0",
+    "@vercel/functions": "2.2.2",
     "@vercel/og": "^0.6.8",
     "abitype": "1.0.8",
     "chakra-react-select": "^4.7.6",
@@ -40,29 +41,28 @@
     "compare-versions": "^6.1.0",
     "date-fns": "4.1.0",
     "fast-xml-parser": "^5.2.5",
-    "framer-motion": "12.17.0",
+    "framer-motion": "12.23.0",
     "fuse.js": "7.1.0",
     "input-otp": "^1.4.1",
     "ioredis": "^5.6.1",
     "ipaddr.js": "^2.2.0",
-    "lucide-react": "0.514.0",
-    "next": "15.3.3",
-    "next-plausible": "^3.12.4",
+    "lucide-react": "0.525.0",
+    "next": "15.3.5",
     "next-themes": "^0.4.6",
     "nextjs-toploader": "^1.6.12",
     "nuqs": "^2.4.3",
     "p-limit": "^6.2.0",
     "papaparse": "^5.5.3",
     "pluralize": "^8.0.0",
-    "posthog-js": "1.252.0",
-    "prettier": "3.5.3",
+    "posthog-js": "1.256.1",
+    "prettier": "3.6.2",
     "qrcode": "^1.5.3",
     "react": "19.1.0",
     "react-children-utilities": "^2.10.0",
     "react-day-picker": "^8.10.1",
     "react-dom": "19.1.0",
     "react-dropzone": "^14.3.8",
-    "react-error-boundary": "^5.0.0",
+    "react-error-boundary": "6.0.0",
     "react-hook-form": "7.55.0",
     "react-markdown": "10.1.0",
     "react-table": "^7.8.0",
@@ -71,7 +71,7 @@
     "responsive-rsc": "0.0.7",
     "server-only": "^0.0.1",
     "shiki": "1.27.0",
-    "sonner": "2.0.5",
+    "sonner": "2.0.6",
     "spdx-correct": "^3.2.0",
     "stripe": "17.7.0",
     "swagger-ui-react": "^5.24.1",
@@ -81,19 +81,19 @@
     "tiny-invariant": "^1.3.3",
     "use-debounce": "^10.0.5",
     "vaul": "^1.1.2",
-    "zod": "3.25.62"
+    "zod": "3.25.75"
   },
   "devDependencies": {
-    "@biomejs/biome": "2.0.0",
+    "@biomejs/biome": "2.0.6",
     "@chakra-ui/cli": "^2.4.1",
-    "@chromatic-com/storybook": "4.0.0",
-    "@next/bundle-analyzer": "15.3.3",
-    "@next/eslint-plugin-next": "15.3.3",
-    "@playwright/test": "1.53.0",
-    "@storybook/addon-docs": "9.0.8",
-    "@storybook/addon-links": "9.0.8",
-    "@storybook/addon-onboarding": "9.0.8",
-    "@storybook/nextjs": "9.0.8",
+    "@chromatic-com/storybook": "4.0.1",
+    "@next/bundle-analyzer": "15.3.5",
+    "@next/eslint-plugin-next": "15.3.5",
+    "@playwright/test": "1.53.2",
+    "@storybook/addon-docs": "9.0.15",
+    "@storybook/addon-links": "9.0.15",
+    "@storybook/addon-onboarding": "9.0.15",
+    "@storybook/nextjs": "9.0.15",
     "@types/color": "4.2.0",
     "@types/node": "22.14.1",
     "@types/papaparse": "^5.3.16",
@@ -107,15 +107,15 @@
     "@typescript-eslint/eslint-plugin": "7.14.1",
     "@typescript-eslint/parser": "7.14.1",
     "autoprefixer": "^10.4.21",
-    "checkly": "5.6.0",
+    "checkly": "6.0.1",
     "eslint": "8.57.0",
     "eslint-config-biome": "1.9.4",
     "eslint-plugin-react-compiler": "19.1.0-rc.2",
-    "eslint-plugin-storybook": "9.0.8",
+    "eslint-plugin-storybook": "9.0.15",
     "knip": "5.60.2",
     "next-sitemap": "^4.2.3",
-    "postcss": "8.5.5",
-    "storybook": "9.0.8",
+    "postcss": "8.5.6",
+    "storybook": "9.0.15",
     "tailwindcss": "3.4.17",
     "typescript": "5.8.3"
   },
@@ -128,7 +128,7 @@
     "dev": "next dev --turbopack",
     "fix": "biome check ./src --fix && eslint ./src --fix",
     "format": "biome format ./src --write",
-    "gen:theme-typings": "chakra-cli tokens src/theme/index.ts",
+    "gen:theme-typings": "chakra-cli tokens src/chakra/theme/index.ts",
     "knip": "knip",
     "lint": "biome check ./src && knip && eslint ./src",
     "playwright": "playwright test",

apps/dashboard/public/assets/support/account.svg

@@ -1,3 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M9.33106 4.3C8.33109 4.3 7.52045 5.11064 7.52045 6.11061C7.52045 7.11058 8.33109 7.92121 9.33106 7.92121C10.331 7.92121 11.1417 7.11058 11.1417 6.11061C11.1417 5.11064 10.331 4.3 9.33106 4.3ZM5.22045 6.11061C5.22045 3.84038 7.06084 2 9.33106 2C11.6013 2 13.4417 3.84038 13.4417 6.11061C13.4417 8.38083 11.6013 10.2212 9.33106 10.2212C7.06084 10.2212 5.22045 8.38083 5.22045 6.11061ZM4.20397 12.0858C4.97486 11.3149 6.0204 10.8818 7.11061 10.8818H11.5515C12.6417 10.8818 13.6873 11.3149 14.4581 12.0858C14.9073 12.5349 14.9073 13.263 14.4581 13.7121C14.009 14.1612 13.2809 14.1612 12.8318 13.7121C12.4922 13.3726 12.0317 13.1818 11.5515 13.1818H7.11061C6.6304 13.1818 6.16987 13.3726 5.83031 13.7121C5.49076 14.0517 5.3 14.5122 5.3 14.9924V16.4727C5.3 17.1079 4.78513 17.6227 4.15 17.6227C3.51487 17.6227 3 17.1079 3 16.4727V14.9924C3 13.9022 3.43308 12.8567 4.20397 12.0858ZM17.5457 14.9598C17.9948 14.5107 17.9948 13.7825 17.5457 13.3334C17.0966 12.8843 16.3685 12.8843 15.9194 13.3334L13.7719 15.4808L13.1048 14.8137C12.6557 14.3646 11.9276 14.3646 11.4785 14.8137C11.0294 15.2628 11.0294 15.991 11.4785 16.4401L12.9588 17.9204C13.4079 18.3695 14.136 18.3695 14.5851 17.9204L17.5457 14.9598Z" fill="#646D7A"/>
-</svg>

apps/dashboard/public/assets/support/misc.svg

@@ -1,4 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M15.4444 3H4.55556C3.69645 3 3 3.69645 3 4.55556V15.4444C3 16.3036 3.69645 17 4.55556 17H15.4444C16.3036 17 17 16.3036 17 15.4444V4.55556C17 3.69645 16.3036 3 15.4444 3Z" stroke="#646D7A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M12.3333 7.66666L7.66663 12.3333" stroke="#646D7A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>

apps/dashboard/redirects.js

@@ -106,9 +106,27 @@ const projectPageRedirects = [
     source: `${projectRoute}/nebula/:path*`,
   },
   {
-    source: `${projectRoute}/connect/analytics`,
     destination: `${projectRoute}`,
     permanent: false,
+    source: `${projectRoute}/connect/analytics`,
+  },
+];
+
+const teamPageRedirects = [
+  {
+    destination: "/team/:team_slug/~/billing/:path*",
+    permanent: false,
+    source: "/team/:team_slug/~/settings/billing/:path*",
+  },
+  {
+    destination: "/team/:team_slug/~/billing/invoices/:path*",
+    permanent: false,
+    source: "/team/:team_slug/~/settings/invoices/:path*",
+  },
+  {
+    destination: "/team/:team_slug/~/billing",
+    permanent: false,
+    source: "/team/:team_slug/~/settings/credits",
   },
 ];
 
@@ -309,13 +327,6 @@ async function redirects() {
       permanent: false,
       source: "/solutions/chains",
     },
-    // redirect /rpc to portal
-    {
-      destination:
-        "https://portal.thirdweb.com/infrastructure/rpc-edge/overview",
-      permanent: false,
-      source: "/rpc-edge",
-    },
     // redirect /sdk to portal
     {
       destination: "https://portal.thirdweb.com/connect/blockchain-api",
@@ -424,8 +435,14 @@ async function redirects() {
       permanent: false,
       source: "/engine",
     },
+    {
+      destination: "/rpc",
+      permanent: false,
+      source: "/rpc-edge",
+    },
     ...legacyDashboardToTeamRedirects,
     ...projectPageRedirects,
+    ...teamPageRedirects,
   ];
 }
 

apps/dashboard/sentry.client.config.ts

@@ -1,97 +0,0 @@
-// This file configures the initialization of Sentry on the client.
-// The config you add here will be used whenever a users loads a page in their browser.
-// https://docs.sentry.io/platforms/javascript/guides/nextjs/
-
-import * as Sentry from "@sentry/nextjs";
-
-Sentry.init({
-  allowUrls: [/thirdweb-dev\.com/i, /thirdweb\.com/, /thirdweb-preview\.com/],
-
-  // Setting this option to true will print useful information to the console while you're setting up Sentry.
-  debug: false,
-  denyUrls: [
-    // Google Adsense
-    /pagead\/js/i,
-    // Facebook flakiness
-    /graph\.facebook\.com/i,
-    // Facebook blocked
-    /connect\.facebook\.net\/en_US\/all\.js/i,
-    // Woopra flakiness
-    /eatdifferent\.com\.woopra-ns\.com/i,
-    /static\.woopra\.com\/js\/woopra\.js/i,
-    // Chrome extensions
-    /extensions\//i,
-    /^chrome:\/\//i,
-    // Other plugins
-    // Cacaoweb
-    /127\.0\.0\.1:4001\/isrunning/i,
-    /webappstoolbarba\.texthelp\.com\//i,
-    /metrics\.itunes\.apple\.com\.edgesuite\.net\//i,
-    // injected (extensions)
-    /inject/i,
-  ],
-  dsn: "https://[email protected]/6690186",
-  ignoreErrors: [
-    // Random plugins/extensions
-    "top.GLOBALS",
-    // See: http://blog.errorception.com/2012/03/tale-of-unfindable-js-error.html
-    "originalCreateNotification",
-    "canvas.contentDocument",
-    "MyApp_RemoveAllHighlights",
-    "http://tt.epicplay.com",
-    "Can't find variable: ZiteReader",
-    "jigsaw is not defined",
-    "ComboSearch is not defined",
-    "http://loading.retry.widdit.com/",
-    "atomicFindClose",
-    // Facebook borked
-    "fb_xd_fragment",
-    // ISP "optimizing" proxy - `Cache-Control: no-transform` seems to reduce this. (thanks @acdha)
-    // See http://stackoverflow.com/questions/4113268/how-to-stop-javascript-injection-from-vodafone-proxy
-    "bmi_SafeAddOnload",
-    "EBCallBackMessageReceived",
-    // See http://toolbar.conduit.com/Developer/HtmlAndGadget/Methods/JSInjection.aspx
-    "conduitPage",
-    // Avast extension error
-    "_avast_submit",
-    // Common non-actionable errors
-    "rejected transaction",
-    "User closed modal",
-    "Loading chunk",
-    "Failed to execute '",
-    "NetworkError when attempting to fetch resource.",
-    "googlefc is not defined",
-    "__cmp is not defined",
-    "Cannot read properties of undefined (reading 'cmp')",
-    "Cannot read properties of undefined (reading 'outputCurrentConfiguration')",
-    "apstagLOADED is not defined",
-    "moat_px is not defined",
-    "window.ReactNativeWebView.postMessage is not a function",
-    "_reportEvent is not defined",
-    "requestAnimationFrame is not defined",
-    "window.requestAnimationFrame is not a function",
-    "tronLink.setAddress is not a function",
-    // benign errors
-    "ResizeObserver loop limit exceeded",
-    // cannot do anything with these errors
-    "Non-Error promise rejection captured",
-  ],
-
-  // You can remove this option if you're not planning to use the Sentry Session Replay feature:
-  integrations: [
-    Sentry.replayIntegration({
-      blockAllMedia: true,
-      // Additional Replay configuration goes in here, for example:
-      maskAllText: true,
-    }),
-  ],
-
-  replaysOnErrorSampleRate: 1.0,
-
-  // This sets the sample rate to be 10%. You may want this to be 100% while
-  // in development and sample at a lower rate in production
-  replaysSessionSampleRate: 0.1,
-
-  // Adjust this value in production, or use tracesSampler for greater control
-  tracesSampleRate: 0.1,
-});

apps/dashboard/src/@/actions/acceptInvite.ts

@@ -1,7 +1,7 @@
 "use server";
 
-import { getAuthToken } from "../../app/(app)/api/lib/getAuthToken";
-import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "../constants/public-envs";
+import { getAuthToken } from "@/api/auth-token";
+import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "@/constants/public-envs";
 
 export async function acceptInvite(options: {
   teamId: string;

apps/dashboard/src/@/actions/billing.ts

@@ -1,7 +1,10 @@
 "use server";
+import "server-only";
 
-import { getAuthToken } from "../../app/(app)/api/lib/getAuthToken";
-import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "../constants/public-envs";
+import { getAuthToken } from "@/api/auth-token";
+import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "@/constants/public-envs";
+import type { ChainInfraSKU } from "@/types/billing";
+import { getAbsoluteUrl } from "@/utils/vercel";
 
 export async function reSubscribePlan(options: {
   teamId: string;
@@ -14,7 +17,10 @@ export async function reSubscribePlan(options: {
   }
 
   const res = await fetch(
-    `${NEXT_PUBLIC_THIRDWEB_API_HOST}/v1/teams/${options.teamId}/checkout/resubscribe-plan`,
+    new URL(
+      `/v1/teams/${options.teamId}/checkout/resubscribe-plan`,
+      NEXT_PUBLIC_THIRDWEB_API_HOST,
+    ),
     {
       body: JSON.stringify({}),
       headers: {
@@ -35,3 +41,83 @@ export async function reSubscribePlan(options: {
     status: 200,
   };
 }
+
+export async function getChainInfraCheckoutURL(options: {
+  teamSlug: string;
+  skus: ChainInfraSKU[];
+  chainId: number;
+  annual: boolean;
+}) {
+  const token = await getAuthToken();
+
+  if (!token) {
+    return {
+      error: "You are not logged in",
+      status: "error",
+    } as const;
+  }
+
+  const res = await fetch(
+    new URL(
+      `/v1/teams/${options.teamSlug}/checkout/create-link`,
+      NEXT_PUBLIC_THIRDWEB_API_HOST,
+    ),
+    {
+      body: JSON.stringify({
+        annual: options.annual,
+        baseUrl: getAbsoluteUrl(),
+        chainId: options.chainId,
+        skus: options.skus,
+      }),
+      headers: {
+        Authorization: `Bearer ${token}`,
+        "Content-Type": "application/json",
+      },
+      method: "POST",
+    },
+  );
+  if (!res.ok) {
+    const text = await res.text();
+    console.error("Failed to create checkout link", text, res.status);
+    switch (res.status) {
+      case 402: {
+        return {
+          error:
+            "You have outstanding invoices, please pay these first before re-subscribing.",
+          status: "error",
+        } as const;
+      }
+      case 429: {
+        return {
+          error: "Too many requests, please try again later.",
+          status: "error",
+        } as const;
+      }
+      case 403: {
+        return {
+          error: "You are not authorized to deploy infrastructure.",
+          status: "error",
+        } as const;
+      }
+      default: {
+        return {
+          error: "An unknown error occurred, please try again later.",
+          status: "error",
+        } as const;
+      }
+    }
+  }
+
+  const json = await res.json();
+  if (!json.result) {
+    return {
+      error: "An unknown error occurred, please try again later.",
+      status: "error",
+    } as const;
+  }
+
+  return {
+    data: json.result as string,
+    status: "success",
+  } as const;
+}

apps/dashboard/src/@/actions/confirmEmail.ts

@@ -1,7 +1,7 @@
 "use server";
 
-import { getAuthToken } from "../../app/(app)/api/lib/getAuthToken";
-import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "../constants/public-envs";
+import { getAuthToken } from "@/api/auth-token";
+import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "@/constants/public-envs";
 
 export async function confirmEmailWithOTP(otp: string) {
   const token = await getAuthToken();

apps/dashboard/src/@/actions/createTeam.ts

@@ -4,9 +4,9 @@ import "server-only";
 // biome-ignore lint/style/useNodejsImportProtocol: breaks storybook if it's `node:` prefixed
 import { randomBytes } from "crypto";
 import { format } from "date-fns";
+import { getAuthToken } from "@/api/auth-token";
 import type { Team } from "@/api/team";
-import { getAuthToken } from "../../app/(app)/api/lib/getAuthToken";
-import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "../constants/public-envs";
+import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "@/constants/public-envs";
 
 export async function createTeam(options?: { name?: string; slug?: string }) {
   const token = await getAuthToken();

apps/dashboard/src/@/actions/deleteTeam.ts

@@ -1,7 +1,7 @@
 "use server";
 import "server-only";
-import { getAuthToken } from "../../app/(app)/api/lib/getAuthToken";
-import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "../constants/public-envs";
+import { getAuthToken } from "@/api/auth-token";
+import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "@/constants/public-envs";
 
 export async function deleteTeam(options: { teamId: string }) {
   const token = await getAuthToken();

apps/dashboard/src/@/actions/getBalancesFromMoralis.ts

@@ -1,9 +1,9 @@
 "use server";
-import { defineDashboardChain } from "lib/defineDashboardChain";
 import { isAddress, toTokens, ZERO_ADDRESS } from "thirdweb";
 import { getWalletBalance } from "thirdweb/wallets";
-import { MORALIS_API_KEY } from "../constants/server-envs";
-import { serverThirdwebClient } from "../constants/thirdweb-client.server";
+import { MORALIS_API_KEY } from "@/constants/server-envs";
+import { serverThirdwebClient } from "@/constants/thirdweb-client.server";
+import { defineDashboardChain } from "@/lib/defineDashboardChain";
 
 type BalanceQueryResponse = Array<{
   balance: string;

apps/dashboard/src/@/actions/getWalletNFTs.ts

@@ -1,19 +1,19 @@
 "use server";
 
+import { NEXT_PUBLIC_DASHBOARD_CLIENT_ID } from "@/constants/public-envs";
+import { MORALIS_API_KEY } from "@/constants/server-envs";
 import {
   generateAlchemyUrl,
   transformAlchemyResponseToNFT,
-} from "lib/wallet/nfts/alchemy";
+} from "@/lib/wallet/nfts/alchemy";
 import {
   generateMoralisUrl,
   transformMoralisResponseToNFT,
-} from "lib/wallet/nfts/moralis";
-import type { WalletNFT } from "lib/wallet/nfts/types";
-import { getVercelEnv } from "../../lib/vercel-utils";
-import { isAlchemySupported } from "../../lib/wallet/nfts/isAlchemySupported";
-import { isMoralisSupported } from "../../lib/wallet/nfts/isMoralisSupported";
-import { NEXT_PUBLIC_DASHBOARD_CLIENT_ID } from "../constants/public-envs";
-import { MORALIS_API_KEY } from "../constants/server-envs";
+} from "@/lib/wallet/nfts/moralis";
+import type { WalletNFT } from "@/lib/wallet/nfts/types";
+import { getVercelEnv } from "@/utils/vercel";
+import { isAlchemySupported } from "../lib/wallet/nfts/isAlchemySupported";
+import { isMoralisSupported } from "../lib/wallet/nfts/isMoralisSupported";
 
 type WalletNFTApiReturn =
   | { result: WalletNFT[]; error?: undefined }

apps/dashboard/src/@/actions/proxies.ts

@@ -1,11 +1,11 @@
 "use server";
 
-import { getAuthToken } from "../../app/(app)/api/lib/getAuthToken";
+import { getAuthToken } from "@/api/auth-token";
 import {
   NEXT_PUBLIC_ENGINE_CLOUD_URL,
   NEXT_PUBLIC_THIRDWEB_API_HOST,
-} from "../constants/public-envs";
-import { ANALYTICS_SERVICE_URL } from "../constants/server-envs";
+} from "@/constants/public-envs";
+import { ANALYTICS_SERVICE_URL } from "@/constants/server-envs";
 
 type ProxyActionParams = {
   pathname: string;

apps/dashboard/src/@/actions/sendTeamInvite.ts

@@ -1,7 +1,7 @@
 "use server";
 
-import { getAuthToken } from "../../app/(app)/api/lib/getAuthToken";
-import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "../constants/public-envs";
+import { getAuthToken } from "@/api/auth-token";
+import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "@/constants/public-envs";
 
 export async function sendTeamInvites(options: {
   teamId: string;

apps/dashboard/src/@/actions/stripe-actions.ts

@@ -1,8 +1,8 @@
 import "server-only";
 
 import Stripe from "stripe";
-import type { Team } from "../api/team";
-import { STRIPE_SECRET_KEY } from "../constants/server-envs";
+import type { Team } from "@/api/team";
+import { STRIPE_SECRET_KEY } from "@/constants/server-envs";
 
 let existingStripe: Stripe | undefined;
 

apps/dashboard/src/@/actions/updateAccount.ts

@@ -1,6 +1,6 @@
 "use server";
-import { getAuthToken } from "../../app/(app)/api/lib/getAuthToken";
-import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "../constants/public-envs";
+import { getAuthToken } from "@/api/auth-token";
+import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "@/constants/public-envs";
 
 export async function updateAccount(values: {
   name?: string;

apps/dashboard/src/@/analytics/report.ts

@@ -1,6 +1,7 @@
 import posthog from "posthog-js";
 
-import type { Team } from "../api/team";
+import type { Team } from "@/api/team";
+import type { ProductSKU } from "../types/billing";
 
 // ----------------------------
 // CONTRACTS
@@ -361,7 +362,11 @@ export function reportAssetCreationFailed(
   properties: { contractType: AssetContractType; error: string } & (
     | {
         assetType: "nft";
-        step: "deploy-contract" | "mint-nfts" | "set-claim-conditions";
+        step:
+          | "deploy-contract"
+          | "mint-nfts"
+          | "set-claim-conditions"
+          | "set-admins";
       }
     | {
         assetType: "coin";
@@ -380,3 +385,31 @@ export function reportAssetCreationFailed(
     step: properties.step,
   });
 }
+
+type UpsellParams = {
+  content: "storage-limit";
+  campaign: "create-coin" | "create-nft";
+  sku: Exclude<ProductSKU, null>;
+};
+
+/**
+ * ### Why do we need to report this event?
+ * - To track how effective the upsells are in driving users to upgrade
+ *
+ * ### Who is responsible for this event?
+ * @MananTank
+ */
+export function reportUpsellShown(properties: UpsellParams) {
+  posthog.capture("upsell shown", properties);
+}
+
+/**
+ * ### Why do we need to report this event?
+ * - To track how effective the upsells are in driving users to upgrade
+ *
+ * ### Who is responsible for this event?
+ * @MananTank
+ */
+export function reportUpsellClicked(properties: UpsellParams) {
+  posthog.capture("upsell clicked", properties);
+}

apps/dashboard/src/@/api/analytics.ts

@@ -1,22 +1,56 @@
 import "server-only";
 
+import { ANALYTICS_SERVICE_URL } from "@/constants/server-envs";
 import type {
   AnalyticsQueryParams,
   EcosystemWalletStats,
   EngineCloudStats,
   InAppWalletStats,
-  RpcMethodStats,
   TransactionStats,
   UniversalBridgeStats,
   UniversalBridgeWalletStats,
   UserOpStats,
   WalletStats,
   WalletUserStats,
-} from "types/analytics";
-import { getAuthToken } from "../../app/(app)/api/lib/getAuthToken";
-import { ANALYTICS_SERVICE_URL } from "../constants/server-envs";
+} from "@/types/analytics";
+import { getAuthToken } from "./auth-token";
 import { getChains } from "./chain";
 
+export interface InsightChainStats {
+  date: string;
+  chainId: string;
+  totalRequests: number;
+}
+
+export interface InsightStatusCodeStats {
+  date: string;
+  httpStatusCode: number;
+  totalRequests: number;
+}
+
+export interface InsightEndpointStats {
+  date: string;
+  endpoint: string;
+  totalRequests: number;
+}
+
+interface InsightUsageStats {
+  date: string;
+  totalRequests: number;
+}
+
+export interface RpcMethodStats {
+  date: string;
+  evmMethod: string;
+  count: number;
+}
+
+export interface RpcUsageTypeStats {
+  date: string;
+  usageType: string;
+  count: number;
+}
+
 async function fetchAnalytics(
   input: string | URL,
   init?: RequestInit,
@@ -76,6 +110,9 @@ function buildSearchParams(params: AnalyticsQueryParams): URLSearchParams {
   if (params.period) {
     searchParams.append("period", params.period);
   }
+  if (params.limit) {
+    searchParams.append("limit", params.limit.toString());
+  }
   return searchParams;
 }
 
@@ -225,6 +262,26 @@ export async function getRpcMethodUsage(
   return json.data as RpcMethodStats[];
 }
 
+export async function getRpcUsageByType(
+  params: AnalyticsQueryParams,
+): Promise<RpcUsageTypeStats[]> {
+  const searchParams = buildSearchParams(params);
+  const res = await fetchAnalytics(
+    `v2/rpc/usage-types?${searchParams.toString()}`,
+    {
+      method: "GET",
+    },
+  );
+
+  if (res?.status !== 200) {
+    console.error("Failed to fetch RPC usage");
+    return [];
+  }
+
+  const json = await res.json();
+  return json.data as RpcUsageTypeStats[];
+}
+
 export async function getWalletUsers(
   params: AnalyticsQueryParams,
 ): Promise<WalletUserStats[]> {
@@ -424,3 +481,91 @@ export async function getEngineCloudMethodUsage(
   const json = await res.json();
   return json.data as EngineCloudStats[];
 }
+
+export async function getInsightChainUsage(
+  params: AnalyticsQueryParams,
+): Promise<{ data: InsightChainStats[] } | { errorMessage: string }> {
+  const searchParams = buildSearchParams(params);
+  const res = await fetchAnalytics(
+    `v2/insight/usage/by-chain?${searchParams.toString()}`,
+    {
+      method: "GET",
+    },
+  );
+
+  if (res?.status !== 200) {
+    const reason = await res?.text();
+    const errMsg = `Failed to fetch Insight chain usage: ${res?.status} - ${res.statusText} - ${reason}`;
+    console.error(errMsg);
+    return { errorMessage: errMsg };
+  }
+
+  const json = await res.json();
+  return { data: json.data as InsightChainStats[] };
+}
+
+export async function getInsightStatusCodeUsage(
+  params: AnalyticsQueryParams,
+): Promise<{ data: InsightStatusCodeStats[] } | { errorMessage: string }> {
+  const searchParams = buildSearchParams(params);
+  const res = await fetchAnalytics(
+    `v2/insight/usage/by-status-code?${searchParams.toString()}`,
+    {
+      method: "GET",
+    },
+  );
+
+  if (res?.status !== 200) {
+    const reason = await res?.text();
+    const errMsg = `Failed to fetch Insight status code usage: ${res?.status} - ${res.statusText} - ${reason}`;
+    console.error(errMsg);
+    return { errorMessage: errMsg };
+  }
+
+  const json = await res.json();
+  return { data: json.data as InsightStatusCodeStats[] };
+}
+
+export async function getInsightEndpointUsage(
+  params: AnalyticsQueryParams,
+): Promise<{ data: InsightEndpointStats[] } | { errorMessage: string }> {
+  const searchParams = buildSearchParams(params);
+  const res = await fetchAnalytics(
+    `v2/insight/usage/by-endpoint?${searchParams.toString()}`,
+    {
+      method: "GET",
+    },
+  );
+
+  if (res?.status !== 200) {
+    const reason = await res?.text();
+    const errMsg = `Failed to fetch Insight endpoint usage: ${res?.status} - ${res.statusText} - ${reason}`;
+    console.error(errMsg);
+    return { errorMessage: errMsg };
+  }
+
+  const json = await res.json();
+  return { data: json.data as InsightEndpointStats[] };
+}
+
+export async function getInsightUsage(
+  params: AnalyticsQueryParams,
+): Promise<{ data: InsightUsageStats[] } | { errorMessage: string }> {
+  const searchParams = buildSearchParams(params);
+  const res = await fetchAnalytics(
+    `v2/insight/usage?${searchParams.toString()}`,
+    {
+      method: "GET",
+    },
+  );
+
+  if (res?.status !== 200) {
+    const reason = await res?.text();
+    const errMsg = `Failed to fetch Insight usage: ${res?.status} - ${res.statusText} - ${reason}`;
+    console.error(errMsg);
+    return { errorMessage: errMsg };
+  }
+
+  const json = await res.json();
+  return { data: json.data as InsightUsageStats[] };
+}

apps/dashboard/src/@/api/audit-log.ts

@@ -1,8 +1,8 @@
 "use server";
 
 import "server-only";
-import { getAuthToken } from "../../app/(app)/api/lib/getAuthToken";
-import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "../constants/public-envs";
+import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "@/constants/public-envs";
+import { getAuthToken } from "./auth-token";
 
 export type AuditLogEntry = {
   who: {

apps/dashboard/src/@/api/auth-token.ts

@@ -1,6 +1,6 @@
-import { LAST_USED_TEAM_ID } from "constants/cookies";
 import { cookies } from "next/headers";
 import { COOKIE_ACTIVE_ACCOUNT, COOKIE_PREFIX_TOKEN } from "@/constants/cookie";
+import { LAST_USED_TEAM_ID } from "@/constants/cookies";
 import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
 
 export async function getAuthToken() {

apps/dashboard/src/@/api/chain.ts

@@ -1,43 +1,7 @@
 import "server-only";
 import type { ChainMetadata } from "thirdweb/chains";
-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 (!API_SERVER_SECRET) {
-    throw new Error("API_SERVER_SECRET is not set");
-  }
-  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
-      },
-    },
-  );
-
-  if (!res.ok) {
-    console.error(
-      "Failed to fetch gas sponsored chains",
-      res.status,
-      res.statusText,
-    );
-    res.body?.cancel();
-    return [];
-  }
-
-  try {
-    return (await res.json()).data as number[];
-  } catch (e) {
-    console.error("Failed to parse gas sponsored chains", e);
-    return [];
-  }
-}
+import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "@/constants/public-envs";
+import type { ChainService } from "@/types/chain";
 
 export function getChains() {
   return fetch(

apps/dashboard/src/@/api/dedicated-support.ts

@@ -1,8 +1,8 @@
 "use server";
 import "server-only";
 
-import { getAuthToken } from "../../app/(app)/api/lib/getAuthToken";
-import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "../constants/public-envs";
+import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "@/constants/public-envs";
+import { getAuthToken } from "./auth-token";
 
 export async function createDedicatedSupportChannel(
   teamIdOrSlug: string,

apps/dashboard/src/@/api/ecosystems.ts

@@ -1,22 +1,26 @@
-export const authOptions = [
-  "email",
-  "phone",
-  "passkey",
-  "siwe",
-  "guest",
-  "google",
-  "facebook",
-  "x",
-  "discord",
-  "farcaster",
-  "telegram",
-  "github",
-  "twitch",
-  "steam",
-  "apple",
-  "coinbase",
-  "line",
-] as const;
+import "server-only";
+
+import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "@/constants/public-envs";
+import { getAuthToken } from "./auth-token";
+
+export type AuthOption =
+  | "email"
+  | "phone"
+  | "passkey"
+  | "siwe"
+  | "guest"
+  | "google"
+  | "facebook"
+  | "x"
+  | "discord"
+  | "farcaster"
+  | "telegram"
+  | "github"
+  | "twitch"
+  | "steam"
+  | "apple"
+  | "coinbase"
+  | "line";
 
 export type Ecosystem = {
   name: string;
@@ -24,7 +28,7 @@ export type Ecosystem = {
   id: string;
   slug: string;
   permission: "PARTNER_WHITELIST" | "ANYONE";
-  authOptions: (typeof authOptions)[number][];
+  authOptions: AuthOption[];
   customAuthOptions?: {
     authEndpoint?: {
       url: string;
@@ -47,6 +51,54 @@ export type Ecosystem = {
   updatedAt: string;
 };
 
+export async function fetchEcosystemList(teamIdOrSlug: string) {
+  const token = await getAuthToken();
+
+  if (!token) {
+    return [];
+  }
+
+  const res = await fetch(
+    `${NEXT_PUBLIC_THIRDWEB_API_HOST}/v1/teams/${teamIdOrSlug}/ecosystem-wallet`,
+    {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    },
+  );
+
+  if (!res.ok) {
+    return [];
+  }
+
+  return (await res.json()).result as Ecosystem[];
+}
+
+export async function fetchEcosystem(slug: string, teamIdOrSlug: string) {
+  const token = await getAuthToken();
+
+  if (!token) {
+    return null;
+  }
+
+  const res = await fetch(
+    `${NEXT_PUBLIC_THIRDWEB_API_HOST}/v1/teams/${teamIdOrSlug}/ecosystem-wallet/${slug}`,
+    {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    },
+  );
+  if (!res.ok) {
+    const data = await res.json();
+    console.error(data);
+    return null;
+  }
+
+  const data = (await res.json()) as { result: Ecosystem };
+  return data.result;
+}
+
 type PartnerPermission = "PROMPT_USER_V1" | "FULL_CONTROL_V1";
 export type Partner = {
   id: string;

apps/dashboard/src/@/api/getProjectContracts.ts

@@ -1,4 +1,5 @@
 import "server-only";
+import { getAddress } from "thirdweb";
 import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "@/constants/public-envs";
 
 export type ProjectContract = {
@@ -43,3 +44,43 @@ export async function getProjectContracts(options: {
 
   return data.result;
 }
+
+export type PartialProject = {
+  id: string;
+  name: string;
+  slug: string;
+  image: string | null;
+};
+
+/**
+ * get a list of projects within a team that have a given contract imported
+ */
+export async function getContractImportedProjects(options: {
+  teamId: string;
+  authToken: string;
+  chainId: number;
+  contractAddress: string;
+}) {
+  const url = new URL(
+    `${NEXT_PUBLIC_THIRDWEB_API_HOST}/v1/teams/${options.teamId}/projects/contracts/lookup?chainId=${options.chainId}&contractAddress=${getAddress(options.contractAddress)}`,
+  );
+
+  const res = await fetch(url, {
+    headers: {
+      Authorization: `Bearer ${options.authToken}`,
+    },
+  });
+
+  if (!res.ok) {
+    const errorMessage = await res.text();
+    console.error("Error fetching: /projects/contracts/lookup");
+    console.error(errorMessage);
+    return [];
+  }
+
+  const data = (await res.json()) as {
+    result: PartialProject[];
+  };
+
+  return data.result;
+}

apps/dashboard/src/@/api/insight/webhooks.ts

@@ -1,8 +1,8 @@
 /* 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";
+import { getAuthToken } from "@/api/auth-token";
+import { THIRDWEB_INSIGHT_API_DOMAIN } from "@/constants/urls";
 
 export interface WebhookResponse {
   id: string;

apps/dashboard/src/@/api/linked-wallets.ts

@@ -1,5 +1,5 @@
-import { getAuthToken } from "../../app/(app)/api/lib/getAuthToken";
-import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "../constants/public-envs";
+import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "@/constants/public-envs";
+import { getAuthToken } from "./auth-token";
 
 export type LinkedWallet = {
   createdAt: string;

apps/dashboard/src/@/api/notifications.ts

@@ -1,8 +1,8 @@
 "use server";
 
 import "server-only";
-import { getAuthToken } from "../../app/(app)/api/lib/getAuthToken";
-import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "../constants/public-envs";
+import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "@/constants/public-envs";
+import { getAuthToken } from "./auth-token";
 
 export type Notification = {
   id: string;

apps/dashboard/src/@/api/projects.ts

@@ -1,7 +1,7 @@
 import "server-only";
 import type { ProjectResponse } from "@thirdweb-dev/service-utils";
 import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "@/constants/public-envs";
-import { getAuthToken } from "../../app/(app)/api/lib/getAuthToken";
+import { getAuthToken } from "./auth-token";
 
 export type Project = ProjectResponse;
 

apps/dashboard/src/@/api/sms.ts

@@ -1,6 +1,6 @@
 import "server-only";
-import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "../constants/public-envs";
-import { API_SERVER_SECRET } from "../constants/server-envs";
+import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "@/constants/public-envs";
+import { API_SERVER_SECRET } from "@/constants/server-envs";
 
 export type SMSCountryTiers = {
   tier1: string[];

apps/dashboard/src/@/api/team-invites.ts

@@ -1,5 +1,5 @@
-import { getAuthToken } from "../../app/(app)/api/lib/getAuthToken";
-import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "../constants/public-envs";
+import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "@/constants/public-envs";
+import { getAuthToken } from "./auth-token";
 
 export type TeamInvite = {
   id: string;

apps/dashboard/src/@/api/team-members.ts

@@ -1,6 +1,6 @@
 import "server-only";
 import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "@/constants/public-envs";
-import { getAuthToken } from "../../app/(app)/api/lib/getAuthToken";
+import { getAuthToken } from "./auth-token";
 
 const TeamAccountRole = {
   MEMBER: "MEMBER",

apps/dashboard/src/@/api/team-subscription.ts

@@ -1,6 +1,6 @@
-import { getAuthToken } from "../../app/(app)/api/lib/getAuthToken";
-import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "../constants/public-envs";
-import type { ProductSKU } from "../lib/billing";
+import { getAuthToken } from "@/api/auth-token";
+import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "@/constants/public-envs";
+import type { ChainInfraSKU, ProductSKU } from "@/types/billing";
 
 type InvoiceLine = {
   // amount for this line item
@@ -22,7 +22,7 @@ type Invoice = {
 
 export type TeamSubscription = {
   id: string;
-  type: "PLAN" | "USAGE" | "PLAN_ADD_ON" | "PRODUCT";
+  type: "PLAN" | "USAGE" | "PLAN_ADD_ON" | "PRODUCT" | "CHAIN";
   status:
     | "incomplete"
     | "incomplete_expired"
@@ -37,6 +37,13 @@ export type TeamSubscription = {
   trialStart: string | null;
   trialEnd: string | null;
   upcomingInvoice: Invoice;
+  skus: (ProductSKU | ChainInfraSKU)[];
+};
+
+type ChainTeamSubscription = Omit<TeamSubscription, "skus"> & {
+  chainId: string;
+  skus: ChainInfraSKU[];
+  isLegacy: boolean;
 };
 
 export async function getTeamSubscriptions(slug: string) {
@@ -60,3 +67,61 @@ export async function getTeamSubscriptions(slug: string) {
   }
   return null;
 }
+
+const CHAIN_PLAN_TO_INFRA = {
+  "chain:plan:gold": ["chain:infra:rpc", "chain:infra:account_abstraction"],
+  "chain:plan:platinum": [
+    "chain:infra:rpc",
+    "chain:infra:insight",
+    "chain:infra:account_abstraction",
+  ],
+  "chain:plan:ultimate": [
+    "chain:infra:rpc",
+    "chain:infra:insight",
+    "chain:infra:account_abstraction",
+  ],
+};
+
+export async function getChainSubscriptions(slug: string) {
+  const allSubscriptions = await getTeamSubscriptions(slug);
+  if (!allSubscriptions) {
+    return null;
+  }
+
+  // first replace any sku that MIGHT match a chain plan
+  const updatedSubscriptions = allSubscriptions
+    .filter((s) => s.type === "CHAIN")
+    .map((s) => {
+      const skus = s.skus;
+      const updatedSkus = skus.flatMap((sku) => {
+        const plan =
+          CHAIN_PLAN_TO_INFRA[sku as keyof typeof CHAIN_PLAN_TO_INFRA];
+        return plan ? plan : sku;
+      });
+      return {
+        ...s,
+        isLegacy: updatedSkus.length !== skus.length,
+        skus: updatedSkus,
+      };
+    });
+
+  return updatedSubscriptions.filter(
+    (s): s is ChainTeamSubscription =>
+      "chainId" in s && typeof s.chainId === "string",
+  );
+}
+
+export async function getChainSubscriptionForChain(
+  slug: string,
+  chainId: number,
+) {
+  const chainSubscriptions = await getChainSubscriptions(slug);
+
+  if (!chainSubscriptions) {
+    return null;
+  }
+
+  return (
+    chainSubscriptions.find((s) => s.chainId === chainId.toString()) ?? null
+  );
+}

apps/dashboard/src/@/api/team.ts

@@ -1,11 +1,11 @@
 import "server-only";
 import type { TeamResponse } from "@thirdweb-dev/service-utils";
 import { cookies } from "next/headers";
+import { LAST_USED_TEAM_ID } from "@/constants/cookies";
 import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "@/constants/public-envs";
 import { API_SERVER_SECRET } from "@/constants/server-envs";
 import { getValidAccount } from "../../app/(app)/account/settings/getAccount";
-import { getAuthToken } from "../../app/(app)/api/lib/getAuthToken";
-import { LAST_USED_TEAM_ID } from "../../constants/cookies";
+import { getAuthToken } from "./auth-token";
 import { getMemberByAccountId } from "./team-members";
 
 export type Team = TeamResponse & { stripeCustomerId: string | null };

apps/dashboard/src/@/api/universal-bridge/developer.ts

@@ -1,6 +1,6 @@
 "use server";
-import { getAuthToken } from "app/(app)/api/lib/getAuthToken";
-import { NEXT_PUBLIC_THIRDWEB_BRIDGE_HOST } from "../../constants/public-envs";
+import { getAuthToken } from "@/api/auth-token";
+import { NEXT_PUBLIC_THIRDWEB_BRIDGE_HOST } from "@/constants/public-envs";
 
 const UB_BASE_URL = NEXT_PUBLIC_THIRDWEB_BRIDGE_HOST;
 

apps/dashboard/src/@/api/universal-bridge/tokens.ts

@@ -1,6 +1,6 @@
 "use server";
 import type { ProjectResponse } from "@thirdweb-dev/service-utils";
-import { getAuthToken } from "app/(app)/api/lib/getAuthToken";
+import { getAuthToken } from "@/api/auth-token";
 import { DASHBOARD_THIRDWEB_SECRET_KEY } from "@/constants/server-envs";
 import { UB_BASE_URL } from "./constants";
 

apps/dashboard/src/@/api/usage/billing-preview.ts

@@ -1,7 +1,7 @@
 import "server-only";
 
+import { getAuthToken } from "@/api/auth-token";
 import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "@/constants/public-envs";
-import { getAuthToken } from "../../../app/(app)/api/lib/getAuthToken";
 
 type LineItem = {
   quantity: number;

apps/dashboard/src/@/api/usage/rpc.ts

@@ -1,6 +1,6 @@
 import "server-only";
 import { unstable_cache } from "next/cache";
-import { ANALYTICS_SERVICE_URL } from "../../constants/server-envs";
+import { ANALYTICS_SERVICE_URL } from "@/constants/server-envs";
 
 type Last24HoursRPCUsageApiResponse = {
   peakRate: {

apps/dashboard/src/@/api/verified-domain.ts

@@ -1,8 +1,8 @@
 "use server";
 import "server-only";
 
-import { getAuthToken } from "../../app/(app)/api/lib/getAuthToken";
-import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "../constants/public-envs";
+import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "@/constants/public-envs";
+import { getAuthToken } from "./auth-token";
 
 export type VerifiedDomainResponse =
   | {

apps/dashboard/src/@/components/analytics/date-range-selector.tsx

@@ -8,11 +8,13 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { normalizeTime } from "@/lib/time";
+import { cn } from "@/lib/utils";
 
 export function DateRangeSelector(props: {
   range: Range;
   setRange: (range: Range) => void;
   popoverAlign?: "start" | "end" | "center";
+  className?: string;
 }) {
   const { range, setRange } = props;
   const daysDiff = differenceInCalendarDays(range.to, range.from);
@@ -26,7 +28,7 @@ export function DateRangeSelector(props: {
 
   return (
     <DatePickerWithRange
-      className="w-auto bg-card"
+      className={cn("w-auto bg-card", props.className)}
       from={range.from}
       header={
         <div className="mb-2 border-border border-b p-4">

apps/dashboard/src/@/components/analytics/range-selector.tsx

@@ -1,16 +1,16 @@
 "use client";
 import { useQuery } from "@tanstack/react-query";
+import { usePathname, useSearchParams } from "next/navigation";
+import { useState } from "react";
 import type {
   DurationId,
   Range,
-} from "components/analytics/date-range-selector";
+} from "@/components/analytics/date-range-selector";
 import {
   DateRangeSelector,
   getLastNDaysRange,
-} from "components/analytics/date-range-selector";
-import { IntervalSelector } from "components/analytics/interval-selector";
-import { usePathname, useSearchParams } from "next/navigation";
-import { useState } from "react";
+} from "@/components/analytics/date-range-selector";
+import { IntervalSelector } from "@/components/analytics/interval-selector";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
 
 export function RangeSelector({
@@ -76,8 +76,9 @@ export function RangeSelector({
   });
 
   return (
-    <div className="flex justify-end gap-4">
+    <div className="flex justify-end gap-3 flex-col lg:flex-row">
       <DateRangeSelector
+        className="rounded-full"
         range={localRange}
         setRange={(newRange) => {
           setRange(newRange);
@@ -89,7 +90,7 @@ export function RangeSelector({
         }}
       />
       <IntervalSelector
-        className="bg-card"
+        className="bg-card rounded-full"
         intervalType={localInterval}
         setIntervalType={(newInterval) => {
           setInterval(newInterval);

apps/dashboard/src/@/components/batch-upload/batch-lazy-mint.tsx

@@ -11,8 +11,10 @@ import {
   Textarea,
 } from "@chakra-ui/react";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { TransactionButton } from "components/buttons/TransactionButton";
-import { FileInput } from "components/shared/FileInput";
+import { Button } from "chakra/button";
+import { FormErrorMessage, FormHelperText, FormLabel } from "chakra/form";
+import { Heading } from "chakra/heading";
+import { Text } from "chakra/text";
 import { ChevronLeftIcon, EyeIcon, EyeOffIcon } from "lucide-react";
 import { useRef, useState } from "react";
 import { useDropzone } from "react-dropzone";
@@ -20,19 +22,13 @@ import { useForm } from "react-hook-form";
 import type { ThirdwebClient } from "thirdweb";
 import type { CreateDelayedRevealBatchParams } from "thirdweb/extensions/erc721";
 import type { NFTInput } from "thirdweb/utils";
-import {
-  Button,
-  FormErrorMessage,
-  FormHelperText,
-  FormLabel,
-  Heading,
-  Text,
-} from "tw-components";
-import type { ComponentWithChildren } from "types/component-with-children";
-import { processInputData, shuffleData } from "utils/batch";
 import { z } from "zod";
+import { FileInput } from "@/components/blocks/FileInput";
+import { TransactionButton } from "@/components/tx-button";
 import { Checkbox, CheckboxWithLabel } from "@/components/ui/checkbox";
 import { UnderlineLink } from "@/components/ui/UnderlineLink";
+import type { ComponentWithChildren } from "@/types/component-with-children";
+import { processInputData, shuffleData } from "@/utils/batch";
 import { BatchTable } from "./batch-table";
 import { SelectOption } from "./lazy-mint-form/select-option";
 import { UploadStep } from "./upload-step";

apps/dashboard/src/@/components/billing/CancelPlanModal/CancelPlanModal.tsx

@@ -13,12 +13,12 @@ import {
   SheetTitle,
   SheetTrigger,
 } from "@/components/ui/sheet";
+import { PRO_CONTACT_US_URL } from "@/constants/pro";
+import { useStripeRedirectEvent } from "@/hooks/stripe/redirect-event";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
-import { useStripeRedirectEvent } from "../../../../../app/(app)/(stripe)/stripe-redirect/stripeRedirectChannel";
-import { buildCancelPlanUrl } from "../../../../../app/(app)/(stripe)/utils/build-url";
-import { PRO_CONTACT_US_URL } from "../../../../../constants/pro";
-import { pollWithTimeout } from "../../../../../utils/pollWithTimeout";
-import { tryCatch } from "../../../../../utils/try-catch";
+import { pollWithTimeout } from "@/utils/pollWithTimeout";
+import { buildCancelPlanUrl } from "@/utils/stripe/build-url";
+import { tryCatch } from "@/utils/try-catch";
 
 export function CancelPlanButton(props: {
   teamId: string;
@@ -82,7 +82,7 @@ function UnpaidInvoicesWarning({ teamSlug }: { teamSlug: string }) {
 
       <Button asChild className="w-full gap-2 bg-card" variant="outline">
         <Link
-          href={`/team/${teamSlug}/~/settings/invoices?status=open`}
+          href={`/team/${teamSlug}/~/billing/invoices?status=open`}
           rel="noopener noreferrer"
           target="_blank"
         >

apps/dashboard/src/@/components/billing/CreditsItem.tsx

@@ -0,0 +1,85 @@
+import { formatDistance } from "date-fns";
+import Image from "next/image";
+import type { BillingCredit } from "@/hooks/useApi";
+import { formatToDollars } from "./formatToDollars";
+
+interface CreditsItemProps {
+  credit?: BillingCredit;
+}
+
+export const CreditsItem: React.FC<CreditsItemProps> = ({ credit }) => {
+  const isTwCredit = credit?.name.startsWith("TW -");
+  const isStartupCredit = credit?.name.startsWith("SU -");
+
+  let creditTitle = credit?.name ?? "thirdweb credits";
+  if (isTwCredit) {
+    creditTitle = "thirdweb credits";
+  } else if (isStartupCredit) {
+    creditTitle = "Startup grant credits";
+  }
+
+  return (
+    <div className="rounded-lg border border-border bg-card">
+      <div className="flex flex-col gap-3 p-4 lg:p-6">
+        <div className="relative">
+          <div className="absolute top-0 right-0">
+            {isTwCredit ? (
+              <Image
+                alt="tw-credit"
+                className="size-6"
+                objectFit="contain"
+                src={require("../../../../public/brand/thirdweb-icon.svg")}
+              />
+            ) : isStartupCredit ? (
+              <Image
+                alt="tw-credit"
+                className="size-6"
+                objectFit="contain"
+                src={require("../../../../public/brand/thirdweb-icon.svg")}
+              />
+            ) : null}
+          </div>
+
+          <h3 className="font-semibold text-foreground text-xl tracking-tight">
+            {creditTitle}
+          </h3>
+        </div>
+
+        <div className="flex gap-6">
+          <div>
+            <h4 className="mb-0.5 text-muted-foreground text-sm">
+              Remaining Credits
+            </h4>
+            <p className="text-foreground">
+              {formatToDollars(credit?.remainingValueUsdCents || 0)}
+            </p>
+          </div>
+
+          {!isTwCredit && (
+            <div>
+              <h4 className="mb-0.5 text-muted-foreground text-sm">
+                Claimed Credits (All-Time)
+              </h4>
+              <p className="text-foreground">
+                {formatToDollars(credit?.originalGrantUsdCents || 0)}
+              </p>
+            </div>
+          )}
+
+          {credit?.expiresAt && (
+            <div>
+              <h4 className="mb-0.5 text-muted-foreground text-sm">Expires</h4>
+              <p className="text-foreground">
+                {credit?.expiresAt
+                  ? formatDistance(new Date(credit.expiresAt), Date.now(), {
+                      addSuffix: true,
+                    })
+                  : "N/A"}
+              </p>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};

apps/dashboard/src/@/components/billing/PlanCard.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+// TODO - convert to RSC
+
+import { useAccountCredits } from "@/hooks/useApi";
+import { CreditsItem } from "./CreditsItem";
+
+export const CreditsInfoCard = () => {
+  const { data: credits } = useAccountCredits();
+
+  if (!credits) {
+    return null;
+  }
+
+  const restCredits = credits.filter((crd) => !crd.name.startsWith("OP -"));
+
+  if (restCredits.length === 0) {
+    return null;
+  }
+
+  return (
+    <section className="flex flex-col gap-4">
+      {restCredits.map((credit) => (
+        <CreditsItem credit={credit} key={credit.couponId} />
+      ))}
+    </section>
+  );
+};

apps/dashboard/src/@/components/billing/Pricing.tsx

@@ -4,11 +4,10 @@ import { useTransition } from "react";
 import type { Team } from "@/api/team";
 import { PricingCard } from "@/components/blocks/pricing-card";
 import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { PRO_CONTACT_US_URL } from "@/constants/pro";
+import { useStripeRedirectEvent } from "@/hooks/stripe/redirect-event";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
-
-import { useStripeRedirectEvent } from "../../../../app/(app)/(stripe)/stripe-redirect/stripeRedirectChannel";
-import { getValidTeamPlan } from "../../../../app/(app)/team/components/TeamHeader/getValidTeamPlan";
-import { PRO_CONTACT_US_URL } from "../../../../constants/pro";
+import { getValidTeamPlan } from "@/utils/getValidTeamPlan";
 
 // this is used to determine whether to show "Upgrade" or "Downgrade" label based on tier level
 const planToTierRecord: Record<Team["billingPlan"], number> = {

apps/dashboard/src/@/components/billing/SubscriptionCoupons/Coupons.tsx

@@ -1,6 +1,6 @@
 import { Suspense } from "react";
+import { getAuthToken } from "@/api/auth-token";
 import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "@/constants/public-envs";
-import { getAuthToken } from "../../../../../app/(app)/api/lib/getAuthToken";
 import { CouponsClient } from "./CouponsClient";
 import type { CouponData } from "./CouponsUI";
 

apps/dashboard/src/@/components/billing/billing.tsx

@@ -1,14 +1,14 @@
 "use client";
 import { AlertTriangleIcon } from "lucide-react";
 import Link from "next/link";
+import type { Team } from "@/api/team";
+import { Button, type ButtonProps } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import type { ProductSKU } from "@/types/billing";
 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 { Button, type ButtonProps } from "./ui/button";
+} from "@/utils/stripe/build-url";
 
 export function CheckoutButton(props: {
   buttonProps?: Omit<ButtonProps, "children">;
@@ -60,7 +60,7 @@ function BillingWarning({ teamSlug }: { teamSlug: string }) {
         You have outstanding invoices. Please{" "}
         <Link
           className="font-medium text-amber-700 underline transition-colors hover:text-amber-900 dark:text-amber-400 dark:hover:text-amber-300"
-          href={`/team/${teamSlug}/~/settings/invoices?status=open`}
+          href={`/team/${teamSlug}/~/billing/invoices?status=open`}
         >
           pay them
         </Link>{" "}

apps/dashboard/src/@/components/billing/renew-subscription/renew-subscription-button.tsx

@@ -9,8 +9,8 @@ import type { Team } from "@/api/team";
 import { Button } from "@/components/ui/button";
 import { Spinner } from "@/components/ui/Spinner/Spinner";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
-import { pollWithTimeout } from "../../../../../utils/pollWithTimeout";
-import { tryCatch } from "../../../../../utils/try-catch";
+import { pollWithTimeout } from "../../../utils/pollWithTimeout";
+import { tryCatch } from "../../../utils/try-catch";
 
 export function RenewSubscriptionButton(props: {
   teamId: string;

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

@@ -1,5 +1,3 @@
-import { CURRENCIES, type CurrencyMetadata } from "constants/currencies";
-import { useAllChainsData } from "hooks/chains/allChains";
 import { useMemo, useState } from "react";
 import { isAddress, NATIVE_TOKEN_ADDRESS, ZERO_ADDRESS } from "thirdweb";
 import { Button } from "@/components/ui/button";
@@ -11,6 +9,8 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import { CURRENCIES, type CurrencyMetadata } from "@/constants/currencies";
+import { useAllChainsData } from "@/hooks/chains/allChains";
 import { cn } from "@/lib/utils";
 
 interface CurrencySelectorProps {

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

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/nextjs";
-import { BadgeContainer } from "../../../stories/utils";
+import { BadgeContainer } from "@/storybook/utils";
 import { DangerSettingCard } from "./DangerSettingCard";
 
 const meta = {

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

@@ -9,7 +9,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { BadgeContainer } from "../../../../stories/utils";
+import { BadgeContainer } from "@/storybook/utils";
 import { GatedSwitch } from "./GatedSwitch";
 
 const meta = {

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

@@ -4,12 +4,9 @@ import type { Team } from "@/api/team";
 import { Button } from "@/components/ui/button";
 import { Switch } from "@/components/ui/switch";
 import { ToolTipLabel } from "@/components/ui/tooltip";
+import { planToTierRecordForGating } from "@/constants/planToTierRecord";
 import { cn } from "@/lib/utils";
-import {
-  getTeamPlanBadgeLabel,
-  TeamPlanBadge,
-} from "../../../../app/(app)/components/TeamPlanBadge";
-import { planToTierRecordForGating } from "./planToTierRecord";
+import { getTeamPlanBadgeLabel, TeamPlanBadge } from "./TeamPlanBadge";
 
 type SwitchProps = React.ComponentProps<typeof Switch>;
 
@@ -47,7 +44,7 @@ export const GatedSwitch: React.FC<GatedSwitchProps> = (
             <div className="flex w-full flex-col gap-2">
               <Button asChild className="justify-start gap-2" size="sm">
                 <Link
-                  href={`/team/${props.teamSlug}/~/settings/billing?showPlans=true&highlight=${props.requiredPlan}`}
+                  href={`/team/${props.teamSlug}/~/billing?showPlans=true&highlight=${props.requiredPlan}`}
                   rel="noopener noreferrer"
                   target="_blank"
                 >

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

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/nextjs";
 import { ImageIcon } from "lucide-react";
 import { useState } from "react";
-import { BadgeContainer } from "../../../stories/utils";
+import { BadgeContainer } from "@/storybook/utils";
 import { Button } from "../ui/button";
 import { Spinner } from "../ui/Spinner/Spinner";
 import { Img } from "./Img";

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

@@ -1,8 +1,8 @@
 /* eslint-disable @next/next/no-img-element */
 "use client";
 import { useRef, useState } from "react";
+import { cn } from "@/lib/utils";
 import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
-import { cn } from "../../lib/utils";
 
 type imgElementProps = React.DetailedHTMLProps<
   React.ImgHTMLAttributes<HTMLImageElement>,

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

@@ -5,7 +5,7 @@ import { usePathname } from "next/navigation";
 import { useMemo, useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
-import { cn } from "../../lib/utils";
+import { cn } from "@/lib/utils";
 import {
   RenderSidebarLinks,
   type SidebarBaseLink,
@@ -53,7 +53,7 @@ export function MobileSidebar(props: {
   );
 }
 
-export function useActiveSidebarLink(links: SidebarLink[]) {
+function useActiveSidebarLink(links: SidebarLink[]) {
   const pathname = usePathname();
 
   const activeLink = useMemo(() => {

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

@@ -1,9 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/nextjs";
 import { useState } from "react";
-import {
-  BadgeContainer,
-  storybookThirdwebClient,
-} from "../../../stories/utils";
+import { BadgeContainer, storybookThirdwebClient } from "@/storybook/utils";
 import { MultiNetworkSelector } from "./NetworkSelectors";
 
 const meta = {

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

@@ -1,12 +1,12 @@
 "use client";
 
-import { ChainIconClient } from "components/icons/ChainIcon";
-import { useAllChainsData } from "hooks/chains/allChains";
 import { useCallback, useMemo } from "react";
 import type { ThirdwebClient } from "thirdweb";
 import { MultiSelect } from "@/components/blocks/multi-select";
 import { SelectWithSearch } from "@/components/blocks/select-with-search";
 import { Badge } from "@/components/ui/badge";
+import { useAllChainsData } from "@/hooks/chains/allChains";
+import { ChainIconClient } from "@/icons/ChainIcon";
 
 function cleanChainName(chainName: string) {
   return chainName.replace("Mainnet", "");
@@ -152,6 +152,7 @@ export function SingleNetworkSelector(props: {
   disableChainId?: boolean;
   align?: "center" | "start" | "end";
   disableTestnets?: boolean;
+  disableDeprecated?: boolean;
   placeholder?: string;
   client: ThirdwebClient;
 }) {
@@ -169,8 +170,17 @@ export function SingleNetworkSelector(props: {
       chains = chains.filter((chain) => chainIdSet.has(chain.chainId));
     }
 
+    if (props.disableDeprecated) {
+      chains = chains.filter((chain) => chain.status !== "deprecated");
+    }
+
     return chains;
-  }, [allChains, props.chainIds, props.disableTestnets]);
+  }, [
+    allChains,
+    props.chainIds,
+    props.disableTestnets,
+    props.disableDeprecated,
+  ]);
 
   const options = useMemo(() => {
     return chainsToShow.map((chain) => {

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

@@ -1,7 +1,7 @@
 "use client";
 import { Suspense } from "react";
 import { ClientOnly } from "@/components/blocks/client-only";
-import { useIsMobile } from "../hooks/use-mobile";
+import { useIsMobile } from "@/hooks/use-mobile";
 
 export function ResponsiveLayout(props: {
   desktop: React.ReactNode;

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

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/nextjs";
-import { BadgeContainer } from "../../../stories/utils";
+import { BadgeContainer } from "@/storybook/utils";
 import { SettingsCard } from "./SettingsCard";
 
 const meta = {

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

@@ -1,22 +1,7 @@
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarFooter,
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarRail,
-  SidebarSeparator,
-  SidebarTrigger,
-  useSidebar,
-} from "@/components/ui/sidebar";
+"use client";
+
 import { cn } from "../../lib/utils";
-import { NavLink } from "../ui/NavLink";
-import { Separator } from "../ui/separator";
-import { AppFooter } from "./app-footer";
-import { MobileSidebar, useActiveSidebarLink } from "./MobileSidebar";
+import { MobileSidebar } from "./MobileSidebar";
 import { CustomSidebar, type SidebarLink } from "./Sidebar";
 
 export function SidebarLayout(props: {
@@ -49,117 +34,3 @@ export function SidebarLayout(props: {
     </div>
   );
 }
-
-export function FullWidthSidebarLayout(props: {
-  contentSidebarLinks: SidebarLink[];
-  footerSidebarLinks?: SidebarLink[];
-  children: React.ReactNode;
-  className?: string;
-}) {
-  const { contentSidebarLinks, children, footerSidebarLinks } = props;
-  return (
-    <div
-      className={cn(
-        "relative flex w-full flex-1 overflow-y-hidden",
-        props.className,
-      )}
-    >
-      {/* left - sidebar */}
-      <Sidebar className="pt-2" collapsible="icon" side="left">
-        <SidebarContent>
-          <SidebarGroup>
-            <SidebarGroupContent>
-              <RenderSidebarGroup
-                groupName={undefined}
-                sidebarLinks={contentSidebarLinks}
-              />
-            </SidebarGroupContent>
-          </SidebarGroup>
-        </SidebarContent>
-
-        {footerSidebarLinks && (
-          <SidebarFooter className="pb-3">
-            <RenderSidebarGroup
-              groupName={undefined}
-              sidebarLinks={footerSidebarLinks}
-            />
-          </SidebarFooter>
-        )}
-
-        <SidebarRail />
-      </Sidebar>
-
-      {/* right - content */}
-      <div className="flex h-full flex-grow flex-col overflow-y-auto">
-        <MobileSidebarTrigger
-          links={[...contentSidebarLinks, ...(footerSidebarLinks || [])]}
-        />
-
-        <main className="flex min-w-0 grow flex-col max-sm:w-full">
-          {children}
-        </main>
-        <AppFooter containerClassName="max-w-7xl" />
-      </div>
-    </div>
-  );
-}
-
-function RenderSidebarGroup(props: {
-  sidebarLinks: SidebarLink[];
-  groupName: string | undefined;
-}) {
-  const { sidebarLinks } = props;
-  const sidebar = useSidebar();
-
-  return (
-    <SidebarMenu className="gap-1.5">
-      {sidebarLinks.map((link) => {
-        if ("href" in link) {
-          return (
-            <SidebarMenuItem key={link.href}>
-              <SidebarMenuButton asChild>
-                <NavLink
-                  activeClassName="text-foreground bg-accent"
-                  className="flex items-center gap-2 text-muted-foreground text-sm hover:bg-accent"
-                  exactMatch={link.exactMatch}
-                  href={link.href}
-                  isActive={link.isActive}
-                  onClick={() => {
-                    sidebar.setOpenMobile(false);
-                  }}
-                >
-                  {link.icon && <link.icon className="size-4" />}
-                  <span>{link.label}</span>
-                </NavLink>
-              </SidebarMenuButton>
-            </SidebarMenuItem>
-          );
-        }
-
-        if ("separator" in link) {
-          return <SidebarSeparator className="my-1" key={Math.random()} />;
-        }
-
-        return (
-          <RenderSidebarGroup
-            groupName={link.group}
-            key={link.group}
-            sidebarLinks={link.links}
-          />
-        );
-      })}
-    </SidebarMenu>
-  );
-}
-
-function MobileSidebarTrigger(props: { links: SidebarLink[] }) {
-  const activeLink = useActiveSidebarLink(props.links);
-
-  return (
-    <div className="flex items-center gap-3 border-b px-4 py-4 lg:hidden">
-      <SidebarTrigger className="size-4" />
-      <Separator className="h-4" orientation="vertical" />
-      {activeLink && <span className="text-sm">{activeLink.label}</span>}
-    </div>
-  );
-}

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

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

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

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/nextjs";
-import { BadgeContainer } from "../../stories/utils";
-import { StepsCard } from "./StepsCard";
+import { StepsCard } from "@/components/blocks/StepsCard";
+import { BadgeContainer } from "@/storybook/utils";
 
 const meta = {
   component: Component,

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

@@ -1,3 +1,4 @@
+/** biome-ignore-all lint/a11y/useSemanticElements: FIXME */
 "use client";
 
 import {
@@ -164,7 +165,6 @@ export function TWTable<TRowData>(tableProps: TWTableProps<TRowData>) {
             return (
               <TableRow
                 key={row.id}
-                // biome-ignore lint/a11y/useSemanticElements: FIXME
                 role="group"
                 {...(tableProps.onRowClick
                   ? {

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

@@ -2,8 +2,8 @@
 
 import type { Team } from "@/api/team";
 import { Badge, type BadgeProps } from "@/components/ui/badge";
+import { useDashboardRouter } from "@/lib/DashboardRouter";
 import { cn } from "@/lib/utils";
-import { useDashboardRouter } from "../../../@/lib/DashboardRouter";
 
 const teamPlanToBadgeVariant: Record<
   Team["billingPlan"],
@@ -45,7 +45,7 @@ export function TeamPlanBadge(props: {
     }
     e.stopPropagation();
     e.preventDefault();
-    router.push(`/team/${props.teamSlug}/~/settings/billing?showPlans=true`);
+    router.push(`/team/${props.teamSlug}/~/billing?showPlans=true`);
   }
 
   return (

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

@@ -1,9 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/nextjs";
 import { useState } from "react";
-import {
-  BadgeContainer,
-  storybookThirdwebClient,
-} from "../../../stories/utils";
+import { BadgeContainer, storybookThirdwebClient } from "@/storybook/utils";
 import { TokenSelector } from "./TokenSelector";
 
 const meta = {

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

@@ -1,5 +1,3 @@
-import { useAllChainsData } from "hooks/chains/allChains";
-import { useTokensData } from "hooks/tokens/tokens";
 import { useCallback, useMemo } from "react";
 import {
   getAddress,
@@ -7,13 +5,15 @@ import {
   type ThirdwebClient,
 } from "thirdweb";
 import { shortenAddress } from "thirdweb/utils";
-import { replaceIpfsUrl } from "../../../lib/sdk";
-import { fallbackChainIcon } from "../../../utils/chain-icons";
-import type { TokenMetadata } from "../../api/universal-bridge/tokens";
-import { cn } from "../../lib/utils";
-import { Badge } from "../ui/badge";
-import { Img } from "./Img";
-import { SelectWithSearch } from "./select-with-search";
+import type { TokenMetadata } from "@/api/universal-bridge/tokens";
+import { Img } from "@/components/blocks/Img";
+import { SelectWithSearch } from "@/components/blocks/select-with-search";
+import { Badge } from "@/components/ui/badge";
+import { useAllChainsData } from "@/hooks/chains/allChains";
+import { useTokensData } from "@/hooks/tokens";
+import { replaceIpfsUrl } from "@/lib/sdk";
+import { cn } from "@/lib/utils";
+import { fallbackChainIcon } from "@/utils/chain-icons";
 
 type Option = { label: string; value: string };
 

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

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/nextjs";
 import { ArrowRightIcon, RocketIcon, StarIcon } from "lucide-react";
-import { BadgeContainer } from "../../../stories/utils";
+import { BadgeContainer } from "@/storybook/utils";
 import { UpsellBannerCard } from "./UpsellBannerCard";
 
 function Story() {

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

@@ -38,12 +38,18 @@ const ACCENT = {
 type UpsellBannerCardProps = {
   title: React.ReactNode;
   description: React.ReactNode;
-  cta: {
-    text: React.ReactNode;
-    icon?: React.ReactNode;
-    target?: "_blank";
-    link: string;
-  };
+  cta?:
+    | {
+        text: React.ReactNode;
+        icon?: React.ReactNode;
+        target?: "_blank";
+        link: string;
+      }
+    | {
+        text: React.ReactNode;
+        icon?: React.ReactNode;
+        onClick: () => void;
+      };
   accentColor?: keyof typeof ACCENT;
   icon?: React.ReactNode;
 };
@@ -93,25 +99,41 @@ export function UpsellBannerCard(props: UpsellBannerCardProps) {
           </div>
         </div>
 
-        <Button
-          asChild
-          className={cn(
-            "mt-2 gap-2 hover:translate-y-0 hover:shadow-inner sm:mt-0",
-            color.btn,
-          )}
-          size="sm"
-        >
-          <Link
-            href={props.cta.link}
-            rel={
-              props.cta.target === "_blank" ? "noopener noreferrer" : undefined
-            }
-            target={props.cta.target}
+        {props.cta && "target" in props.cta ? (
+          <Button
+            asChild
+            className={cn(
+              "mt-2 gap-2 hover:translate-y-0 hover:shadow-inner sm:mt-0",
+              color.btn,
+            )}
+            size="sm"
+          >
+            <Link
+              href={props.cta.link}
+              rel={
+                props.cta.target === "_blank"
+                  ? "noopener noreferrer"
+                  : undefined
+              }
+              target={props.cta.target}
+            >
+              {props.cta.text}
+              {props.cta.icon && <span className="ml-2">{props.cta.icon}</span>}
+            </Link>
+          </Button>
+        ) : props.cta && "onClick" in props.cta ? (
+          <Button
+            className={cn(
+              "mt-2 gap-2 hover:translate-y-0 hover:shadow-inner sm:mt-0",
+              color.btn,
+            )}
+            onClick={props.cta.onClick}
+            size="sm"
           >
             {props.cta.text}
             {props.cta.icon && <span className="ml-2">{props.cta.icon}</span>}
-          </Link>
-        </Button>
+          </Button>
+        ) : null}
       </div>
     </div>
   );