Version Packages (#6294)

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

.changeset/config.json

@@ -10,7 +10,13 @@
   "access": "public",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
-  "ignore": ["playground-web", "thirdweb-dashboard", "wallet-ui", "portal"],
+  "ignore": [
+    "playground-web",
+    "thirdweb-dashboard",
+    "wallet-ui",
+    "portal",
+    "thirdweb-login"
+  ],
   "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": {
     "updateInternalDependents": "always",
     "onlyUpdatePeerDependentsWhenOutOfRange": true

.github/CODEOWNERS

@@ -12,7 +12,7 @@ packages/eslint-config-thirdweb/ @thirdweb-dev/core-platform @edwardysun
 packages/tw-tsconfig/ @thirdweb-dev/core-platform @edwardysun
 
 # apps
-apps/ @thirdweb-dev/developer-tools @thirdweb-dev/core-platform @jakubkrehel
+apps/ @thirdweb-dev/developer-tools @thirdweb-dev/core-platform
 
 # .github folder + .changeset + turbo config is owned by jonas for now
 scripts/ @jnsdls @joaquim-verges

.github/contributing.md

@@ -6,8 +6,6 @@ To get started, read the [How this repo works](#how-this-repo-works) section bel
 
 From there, you can take a look at our [Good First Issues](https://github.com/thirdweb-dev/js/labels/good%20first%20issue) board and find an issue that interests you!
 
-If you have any questions about the issue, feel free to ask on our [Discord server](https://discord.gg/thirdweb) in the `#contributors` channel; where you'll be able to get help from our team and other contributors.
-
 <br />
 
 ## How this repo works
@@ -85,7 +83,10 @@ If your test depends on a downstream network call, you must mock the call using
 import { setupServer } from "msw/node";
 import { downloadMock, uploadMock } from "../../../test/src/mocks/storage.js";
 
-const server = setupServer(uploadMock("HASH"), downloadMock({ name: "Test NFT" }));
+const server = setupServer(
+  uploadMock("HASH"),
+  downloadMock({ name: "Test NFT" })
+);
 
 beforeAll(() => server.listen());
 afterEach(() => server.resetHandlers());

.github/pull_request_template.md

@@ -1,12 +1,15 @@
----
-title: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"
----
+<!--
+
+## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"
 
 If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):
 
 ## Notes for the reviewer
+
 Anything important to call out? Be sure to also clarify these in your comments.
 
 ## How to test
+
 Unit tests, playground, etc.
 
+-->

.github/workflows/auto-assign.yml

@@ -2,7 +2,7 @@ name: Auto Author Assign
 
 on:
   pull_request:
-    types: [opened, reopened]
+    types: [opened, reopened, ready_for_review, draft]
 
 permissions:
   pull-requests: write

.vscode/settings.json

@@ -27,5 +27,9 @@
   },
   "[css]": {
     "editor.defaultFormatter": "biomejs.biome"
-  }
+  },
+  "eslint.workingDirectories": [
+    { "pattern": "./packages/*/" },
+    { "pattern": "./apps/*/" }
+  ]
 }

README.md

@@ -1,7 +1,7 @@
 <p align="center">
     <br />
     <a href="https://thirdweb.com">
-        <img src="https://github.com/thirdweb-dev/js/blob/main/legacy_packages/sdk/logo.svg?raw=true" width="200" alt=""/></a>
+        <img src="https://thirdweb.com/brand/thirdweb-icon.svg" width="200" alt=""/></a>
     <br />
 </p>
 
@@ -11,9 +11,6 @@
     <a href="https://github.com/thirdweb-dev/js/actions/workflows/CI.yml">
         <img alt="Build Status" src="https://github.com/thirdweb-dev/js/actions/workflows/CI.yml/badge.svg"/>
     </a>
-    <a href="https://discord.gg/thirdweb">
-        <img alt="Join our Discord!" src="https://img.shields.io/discord/834227967404146718.svg?color=7289da&label=discord&logo=discord&style=flat"/>
-    </a>
 </p>
 
 <p align="center"><strong>All-in-one web3 SDK for Browser, Node and Mobile apps</strong></p>
@@ -31,12 +28,12 @@
 
 ## Library Comparison
 
-|                                           | thirdweb | Wagmi + Viem              | Ethers@6 |
+|                                           | thirdweb | Wagmi + Viem       | Ethers@6 |
 | ----------------------------------------- | -------- | ------------------ | -------- |
 | Type safe contract API                    | ✅       | ✅                 | ✅       |
 | Type safe wallet API                      | ✅       | ✅                 | ✅       |
 | EVM utils                                 | ✅       | ✅                 | ✅       |
-| RPC for any EVM                           | ✅       | ⚠️ public RPC only  | ❌       |
+| RPC for any EVM                           | ✅       | ⚠️ public RPC only | ❌       |
 | Automatic ABI Resolution                  | ✅       | ❌                 | ❌       |
 | IPFS Upload/Download                      | ✅       | ❌                 | ❌       |
 | Embedded wallet (email/ social login)     | ✅       | ⚠️ via 3rd party   | ❌       |

apps/dashboard/.env.example

@@ -6,10 +6,14 @@
 # not required to build, defaults to prod
 NEXT_PUBLIC_THIRDWEB_DOMAIN="localhost:3000"
 
-# API host. For local development, please use "https://api.thirdweb-preview.com"
+# API host. For local development, please use "https://api.thirdweb-dev.com"
 # otherwise: "https://api.thirdweb.com"
 NEXT_PUBLIC_THIRDWEB_API_HOST="https://api.thirdweb-dev.com"
 
+# Bridge API. For local development, please use "https://bridge.thirdweb-dev.com"
+# otherwise: "https://bridge.thirdweb.com"
+NEXT_PUBLIC_THIRDWEB_BRIDGE_HOST="https://bridge.thirdweb-dev.com"
+
 # Paper API host
 NEXT_PUBLIC_THIRDWEB_EWS_API_HOST="https://ews.thirdweb-dev.com"
 
@@ -97,4 +101,4 @@ REDIS_URL=""
 ANALYTICS_SERVICE_URL=""
 
 # Required for Nebula Chat
-NEXT_PUBLIC_NEBULA_URL=""
+NEXT_PUBLIC_NEBULA_URL=""

apps/dashboard/framer-rewrites.js

@@ -9,6 +9,8 @@ module.exports = [
   // -- connect
   "/connect",
   "/connect/sign-in",
+  "/connect/account-abstraction",
+  "/connect/universal-bridge",
   // -- nebula
   "/nebula",
   // --insight

apps/dashboard/knip.json

@@ -3,7 +3,9 @@
   "next": true,
   "ignore": [
     "src/@/components/ui/**",
-    "src/components/notices/AnnouncementBanner.tsx"
+    "src/components/notices/AnnouncementBanner.tsx",
+    "src/components/cmd-k-search/index.tsx",
+    "src/lib/search.ts"
   ],
   "project": ["src/**"],
   "ignoreBinaries": ["only-allow", "biome"],

apps/dashboard/next-env.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

apps/dashboard/next.config.ts

@@ -19,204 +19,209 @@ const ContentSecurityPolicy = `
 `;
 
 const securityHeaders = [
-	{
-		key: "X-DNS-Prefetch-Control",
-		value: "on",
-	},
-	{
-		key: "X-XSS-Protection",
-		value: "1; mode=block",
-	},
-	{
-		key: "X-Frame-Options",
-		value: "SAMEORIGIN",
-	},
-	{
-		key: "Referrer-Policy",
-		value: "origin-when-cross-origin",
-	},
-	{
-		key: "Content-Security-Policy",
-		value: ContentSecurityPolicy.replace(/\s{2,}/g, " ").trim(),
-	},
+  {
+    key: "X-DNS-Prefetch-Control",
+    value: "on",
+  },
+  {
+    key: "X-XSS-Protection",
+    value: "1; mode=block",
+  },
+  {
+    key: "X-Frame-Options",
+    value: "SAMEORIGIN",
+  },
+  {
+    key: "Referrer-Policy",
+    value: "origin-when-cross-origin",
+  },
+  {
+    key: "Content-Security-Policy",
+    value: ContentSecurityPolicy.replace(/\s{2,}/g, " ").trim(),
+  },
 ];
 
 function determineIpfsGateways() {
-	// add the clientId ipfs gateways
-	const remotePatterns: RemotePattern[] = [];
-	if (process.env.API_ROUTES_CLIENT_ID) {
-		remotePatterns.push({
-			protocol: "https",
-			hostname: `${process.env.API_ROUTES_CLIENT_ID}.ipfscdn.io`,
-		});
-		remotePatterns.push({
-			protocol: "https",
-			hostname: `${process.env.API_ROUTES_CLIENT_ID}.thirdwebstorage-staging.com`,
-		});
-		remotePatterns.push({
-			protocol: "https",
-			hostname: `${process.env.API_ROUTES_CLIENT_ID}.thirdwebstorage-dev.com`,
-		});
-	} else {
-		// this should only happen in development
-		remotePatterns.push({
-			protocol: "https",
-			hostname: "ipfs.io",
-		});
-	}
-	// also add the dashboard clientId ipfs gateway if it is set
-	if (process.env.NEXT_PUBLIC_DASHBOARD_CLIENT_ID) {
-		remotePatterns.push({
-			protocol: "https",
-			hostname: `${process.env.NEXT_PUBLIC_DASHBOARD_CLIENT_ID}.ipfscdn.io`,
-		});
-		remotePatterns.push({
-			protocol: "https",
-			hostname: `${process.env.NEXT_PUBLIC_DASHBOARD_CLIENT_ID}.thirdwebstorage-staging.com`,
-		});
-		remotePatterns.push({
-			protocol: "https",
-			hostname: `${process.env.NEXT_PUBLIC_DASHBOARD_CLIENT_ID}.thirdwebstorage-dev.com`,
-		});
-	}
-	return remotePatterns;
+  // add the clientId ipfs gateways
+  const remotePatterns: RemotePattern[] = [];
+  if (process.env.API_ROUTES_CLIENT_ID) {
+    remotePatterns.push({
+      protocol: "https",
+      hostname: `${process.env.API_ROUTES_CLIENT_ID}.ipfscdn.io`,
+    });
+    remotePatterns.push({
+      protocol: "https",
+      hostname: `${process.env.API_ROUTES_CLIENT_ID}.thirdwebstorage-staging.com`,
+    });
+    remotePatterns.push({
+      protocol: "https",
+      hostname: `${process.env.API_ROUTES_CLIENT_ID}.thirdwebstorage-dev.com`,
+    });
+  } else {
+    // this should only happen in development
+    remotePatterns.push({
+      protocol: "https",
+      hostname: "ipfs.io",
+    });
+  }
+  // also add the dashboard clientId ipfs gateway if it is set
+  if (process.env.NEXT_PUBLIC_DASHBOARD_CLIENT_ID) {
+    remotePatterns.push({
+      protocol: "https",
+      hostname: `${process.env.NEXT_PUBLIC_DASHBOARD_CLIENT_ID}.ipfscdn.io`,
+    });
+    remotePatterns.push({
+      protocol: "https",
+      hostname: `${process.env.NEXT_PUBLIC_DASHBOARD_CLIENT_ID}.thirdwebstorage-staging.com`,
+    });
+    remotePatterns.push({
+      protocol: "https",
+      hostname: `${process.env.NEXT_PUBLIC_DASHBOARD_CLIENT_ID}.thirdwebstorage-dev.com`,
+    });
+  }
+  return remotePatterns;
 }
 
 const SENTRY_OPTIONS: SentryBuildOptions = {
-	// For all available options, see:
-	// https://github.com/getsentry/sentry-webpack-plugin#options
+  // For all available options, see:
+  // https://github.com/getsentry/sentry-webpack-plugin#options
 
-	org: "thirdweb-dev",
-	project: "dashboard",
-	// An auth token is required for uploading source maps.
-	authToken: process.env.SENTRY_AUTH_TOKEN,
-	// Suppresses source map uploading logs during build
-	silent: true,
-	// For all available options, see:
-	// https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
+  org: "thirdweb-dev",
+  project: "dashboard",
+  // An auth token is required for uploading source maps.
+  authToken: process.env.SENTRY_AUTH_TOKEN,
+  // Suppresses source map uploading logs during build
+  silent: true,
+  // For all available options, see:
+  // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
 
-	// Upload a larger set of source maps for prettier stack traces (increases build time)
-	widenClientFileUpload: true,
+  // Upload a larger set of source maps for prettier stack traces (increases build time)
+  widenClientFileUpload: true,
 
-	// Routes browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers (increases server load)
-	tunnelRoute: "/err",
+  // Routes browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers (increases server load)
+  tunnelRoute: "/err",
 
-	// Hides source maps from generated client bundles
-	hideSourceMaps: true,
+  // Hides source maps from generated client bundles
+  hideSourceMaps: true,
 
-	// Automatically tree-shake Sentry logger statements to reduce bundle size
-	disableLogger: true,
+  // Automatically tree-shake Sentry logger statements to reduce bundle size
+  disableLogger: true,
 
-	// Enables automatic instrumentation of Vercel Cron Monitors.
-	// See the following for more information:
-	// https://docs.sentry.io/product/crons/
-	// https://vercel.com/docs/cron-jobs
-	automaticVercelMonitors: false,
+  // Enables automatic instrumentation of Vercel Cron Monitors.
+  // See the following for more information:
+  // https://docs.sentry.io/product/crons/
+  // https://vercel.com/docs/cron-jobs
+  automaticVercelMonitors: false,
 };
 
 const baseNextConfig: NextConfig = {
-	serverExternalPackages: ["pino-pretty"],
-	async headers() {
-		return [
-			{
-				// Apply these headers to all routes in your application.
-				source: "/(.*)",
-				headers: [
-					...securityHeaders,
-					{
-						key: "accept-ch",
-						value: "sec-ch-viewport-width",
-					},
-				],
-			},
-		];
-	},
-	async redirects() {
-		return getRedirects();
-	},
-	async rewrites() {
-		return [
-			{
-				source: "/thirdweb.eth",
-				destination: "/deployer.thirdweb.eth",
-			},
-			{
-				source: "/thirdweb.eth/:path*",
-				destination: "/deployer.thirdweb.eth/:path*",
-			},
-			// re-write /home to / (this is so that logged in users will be able to go to /home and NOT be redirected to the logged in app)
-			{
-				source: "/home",
-				destination: "/",
-			},
-			...FRAMER_PATHS.map((path) => ({
-				source: path,
-				destination: `https://landing.thirdweb.com${path}`,
-			})),
-		];
-	},
-	images: {
-		dangerouslyAllowSVG: true,
-		contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
-		remotePatterns: [
-			{
-				protocol: "https",
-				hostname: "**.thirdweb.com",
-			},
-			...determineIpfsGateways(),
-		],
-	},
-	compiler: {
-		emotion: true,
-	},
-	reactStrictMode: true,
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+  productionBrowserSourceMaps: false,
+  experimental: {
+    webpackBuildWorker: true,
+    webpackMemoryOptimizations: true,
+    serverSourceMaps: false,
+  },
+  serverExternalPackages: ["pino-pretty"],
+  async headers() {
+    return [
+      {
+        // Apply these headers to all routes in your application.
+        source: "/(.*)",
+        headers: [
+          ...securityHeaders,
+          {
+            key: "accept-ch",
+            value: "sec-ch-viewport-width",
+          },
+        ],
+      },
+    ];
+  },
+  async redirects() {
+    return getRedirects();
+  },
+  async rewrites() {
+    return [
+      {
+        source: "/thirdweb.eth",
+        destination: "/deployer.thirdweb.eth",
+      },
+      {
+        source: "/thirdweb.eth/:path*",
+        destination: "/deployer.thirdweb.eth/:path*",
+      },
+      // re-write /home to / (this is so that logged in users will be able to go to /home and NOT be redirected to the logged in app)
+      {
+        source: "/home",
+        destination: "/",
+      },
+      ...FRAMER_PATHS.map((path) => ({
+        source: path,
+        destination: `https://landing.thirdweb.com${path}`,
+      })),
+    ];
+  },
+  images: {
+    dangerouslyAllowSVG: true,
+    contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "**.thirdweb.com",
+      },
+      ...determineIpfsGateways(),
+    ],
+  },
+  compiler: {
+    emotion: true,
+  },
+  reactStrictMode: true,
 };
 
 function getConfig(): NextConfig {
-	if (process.env.NODE_ENV === "production") {
-		// eslint-disable-next-line @typescript-eslint/no-var-requires
-		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,
-						experimental: {
-							webpackBuildWorker: true,
-							webpackMemoryOptimizations: true,
-						},
-						// @ts-expect-error - this is a valid option
-						webpack: (config) => {
-							if (config.cache) {
-								config.cache = Object.freeze({
-									type: "memory",
-								});
-							}
-							config.externals.push("pino-pretty");
-							config.module = {
-								...config.module,
-								exprContextCritical: false,
-							};
-							// Important: return the modified config
-							return config;
-						},
-					},
-					SENTRY_OPTIONS,
-				),
-			),
-		);
-	}
-	// otherwise return the base
-	return baseNextConfig;
+  if (process.env.NODE_ENV === "production") {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    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.externals.push("pino-pretty");
+              config.module = {
+                ...config.module,
+                exprContextCritical: false,
+              };
+              // Important: return the modified config
+              return config;
+            },
+          },
+          SENTRY_OPTIONS,
+        ),
+      ),
+    );
+  }
+  // otherwise return the base
+  return baseNextConfig;
 }
 
 export default getConfig();

apps/dashboard/package.json

@@ -31,29 +31,29 @@
     "@marsidev/react-turnstile": "^1.1.0",
     "@n8tb1t/use-scroll-position": "^2.0.3",
     "@radix-ui/react-accordion": "^1.2.2",
-    "@radix-ui/react-alert-dialog": "^1.1.4",
+    "@radix-ui/react-alert-dialog": "^1.1.5",
     "@radix-ui/react-avatar": "^1.1.2",
     "@radix-ui/react-checkbox": "^1.1.3",
-    "@radix-ui/react-dialog": "1.1.4",
-    "@radix-ui/react-dropdown-menu": "^2.1.3",
-    "@radix-ui/react-hover-card": "^1.1.3",
+    "@radix-ui/react-dialog": "1.1.5",
+    "@radix-ui/react-dropdown-menu": "^2.1.5",
+    "@radix-ui/react-hover-card": "^1.1.5",
     "@radix-ui/react-label": "^2.1.1",
-    "@radix-ui/react-popover": "^1.1.3",
+    "@radix-ui/react-popover": "^1.1.5",
     "@radix-ui/react-progress": "^1.1.1",
     "@radix-ui/react-radio-group": "^1.2.2",
-    "@radix-ui/react-select": "^2.1.3",
+    "@radix-ui/react-select": "^2.1.5",
     "@radix-ui/react-separator": "^1.1.1",
     "@radix-ui/react-slot": "^1.1.1",
     "@radix-ui/react-switch": "^1.1.2",
-    "@radix-ui/react-tooltip": "1.1.5",
-    "@sentry/nextjs": "8.45.1",
-    "@shazow/whatsabi": "^0.18.0",
-    "@tanstack/react-query": "5.62.16",
+    "@radix-ui/react-tooltip": "1.1.7",
+    "@sentry/nextjs": "8.53.0",
+    "@shazow/whatsabi": "^0.19.0",
+    "@tanstack/react-query": "5.66.0",
     "@tanstack/react-table": "^8.20.6",
     "@thirdweb-dev/service-utils": "workspace:*",
-    "@vercel/functions": "^1.5.2",
-    "@vercel/og": "^0.6.4",
-    "abitype": "1.0.7",
+    "@vercel/functions": "^1.6.0",
+    "@vercel/og": "^0.6.5",
+    "abitype": "1.0.8",
     "chakra-react-select": "^4.7.6",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -62,20 +62,19 @@
     "date-fns": "4.1.0",
     "fetch-event-stream": "0.1.5",
     "flat": "^6.0.1",
-    "framer-motion": "11.15.0",
+    "framer-motion": "12.0.6",
     "fuse.js": "7.0.0",
     "input-otp": "^1.4.1",
     "ioredis": "^5.4.1",
     "ipaddr.js": "^2.2.0",
-    "lucide-react": "0.468.0",
-    "next": "15.1.3",
+    "lucide-react": "0.474.0",
+    "next": "15.1.6",
     "next-plausible": "^3.12.4",
-    "next-seo": "^6.5.0",
     "next-themes": "^0.4.4",
     "nextjs-toploader": "^1.6.12",
-    "openapi-types": "^12.1.3",
+    "nuqs": "^2.4.0",
     "p-limit": "^6.2.0",
-    "papaparse": "^5.4.1",
+    "papaparse": "^5.5.2",
     "pluralize": "^8.0.0",
     "posthog-js": "1.67.1",
     "qrcode": "^1.5.3",
@@ -84,17 +83,18 @@
     "react-day-picker": "^8.10.1",
     "react-dom": "19.0.0",
     "react-dropzone": "^14.3.5",
-    "react-error-boundary": "^4.1.2",
+    "react-error-boundary": "^5.0.0",
     "react-hook-form": "7.54.2",
     "react-markdown": "^9.0.1",
     "react-table": "^7.8.0",
-    "recharts": "2.14.1",
+    "recharts": "2.15.1",
     "remark-gfm": "^4.0.0",
+    "responsive-rsc": "0.0.7",
     "server-only": "^0.0.1",
-    "shiki": "1.24.2",
-    "sonner": "^1.7.1",
+    "shiki": "1.27.0",
+    "sonner": "^1.7.4",
     "spdx-correct": "^3.2.0",
-    "swagger-ui-react": "^5.18.2",
+    "swagger-ui-react": "^5.18.3",
     "tailwind-merge": "^2.6.0",
     "tailwindcss-animate": "^1.0.7",
     "thirdweb": "workspace:*",
@@ -104,42 +104,42 @@
   },
   "devDependencies": {
     "@chakra-ui/cli": "^2.4.1",
-    "@chromatic-com/storybook": "3.2.2",
-    "@next/bundle-analyzer": "15.1.0",
-    "@next/eslint-plugin-next": "15.1.3",
-    "@playwright/test": "1.49.1",
-    "@storybook/addon-essentials": "8.4.7",
-    "@storybook/addon-interactions": "8.4.7",
-    "@storybook/addon-links": "8.4.7",
-    "@storybook/addon-onboarding": "8.4.7",
-    "@storybook/addon-viewport": "8.4.7",
-    "@storybook/blocks": "8.4.7",
-    "@storybook/nextjs": "8.4.7",
-    "@storybook/react": "8.4.7",
-    "@storybook/test": "8.4.7",
+    "@chromatic-com/storybook": "3.2.4",
+    "@next/bundle-analyzer": "15.1.6",
+    "@next/eslint-plugin-next": "15.1.6",
+    "@playwright/test": "1.50.1",
+    "@storybook/addon-essentials": "8.5.2",
+    "@storybook/addon-interactions": "8.5.2",
+    "@storybook/addon-links": "8.5.2",
+    "@storybook/addon-onboarding": "8.5.2",
+    "@storybook/addon-viewport": "8.5.2",
+    "@storybook/blocks": "8.5.2",
+    "@storybook/nextjs": "8.5.2",
+    "@storybook/react": "8.5.2",
+    "@storybook/test": "8.5.2",
     "@types/color": "4.2.0",
-    "@types/node": "22.10.2",
+    "@types/node": "22.13.0",
     "@types/papaparse": "^5.3.15",
     "@types/pluralize": "^0.0.33",
     "@types/qrcode": "^1.5.5",
-    "@types/react": "19.0.2",
-    "@types/react-dom": "19.0.2",
+    "@types/react": "19.0.8",
+    "@types/react-dom": "19.0.3",
     "@types/react-table": "^7.7.20",
     "@types/spdx-correct": "^3.1.3",
-    "@types/swagger-ui-react": "^4.18.3",
+    "@types/swagger-ui-react": "^4.19.0",
     "@typescript-eslint/eslint-plugin": "7.14.1",
     "@typescript-eslint/parser": "7.14.1",
     "autoprefixer": "^10.4.19",
-    "checkly": "^4.15.0",
+    "checkly": "^4.19.1",
     "eslint": "8.57.0",
     "eslint-config-biome": "1.9.4",
     "eslint-plugin-react-compiler": "19.0.0-beta-df7b47d-20241124",
     "eslint-plugin-storybook": "^0.11.1",
-    "knip": "5.41.0",
+    "knip": "5.43.6",
     "next-sitemap": "^4.2.3",
-    "postcss": "8.4.49",
-    "storybook": "8.4.7",
-    "tailwindcss": "3.4.16",
-    "typescript": "5.7.2"
+    "postcss": "8.5.1",
+    "storybook": "8.5.2",
+    "tailwindcss": "3.4.17",
+    "typescript": "5.7.3"
   }
 }

apps/dashboard/public/assets/examples/example.csv

@@ -1,2 +1,2 @@
-name,description,external_url,background_color,youtube_url,additional,properties,can be,added
+name,description,external_url,background_color,youtube_url,additional,properties,can be,added
 Token 0 Name,Token 0 Description,https://thirdweb.com,#0098EE,,every,row,is a ,property

apps/dashboard/redirects.js

@@ -21,7 +21,7 @@ const legacyDashboardToTeamRedirects = [
   },
   {
     source: "/dashboard/settings/api-keys",
-    destination: "/team/~/~/projects",
+    destination: "/team",
     permanent: false,
   },
   {
@@ -160,12 +160,12 @@ async function redirects() {
     },
     {
       source: "/create-api-key",
-      destination: "/team/~/~/projects",
+      destination: "/team",
       permanent: false,
     },
     {
       source: "/dashboard/settings",
-      destination: "/team/~/~/projects",
+      destination: "/team",
       permanent: false,
     },
     {
@@ -331,6 +331,18 @@ async function redirects() {
       destination: "/templates/:slug",
       permanent: false,
     },
+    // redirect /account-abstraction to /connect/account-abstraction
+    {
+      source: "/account-abstraction",
+      destination: "/connect/account-abstraction",
+      permanent: false,
+    },
+    // redirect /connect/pay to /connect/universal-bridge
+    {
+      source: "/connect/pay",
+      destination: "/connect/universal-bridge",
+      permanent: false,
+    },
     // PREVIOUS CAMPAIGNS
     {
       source: "/unlimited-wallets",

apps/dashboard/scripts/deleteUnusedAssets.ts

@@ -0,0 +1,28 @@
+import { promises as fs } from "node:fs";
+import path from "node:path";
+
+// after running logUnusedAssets.ts,
+// 1. validate the output
+// 2. If you think that a file should not be deleted, remove it from the output
+// 3. paste the output files in `filesToDelete` and run this script to delete them
+const filesToDelete: string[] = [];
+
+async function deleteFiles() {
+  for (const filePath of filesToDelete) {
+    try {
+      const fullPath = path.join(process.cwd(), filePath);
+      await fs.unlink(fullPath);
+      console.log(`Deleted: ${filePath}`);
+    } catch (error) {
+      if ((error as NodeJS.ErrnoException).code === "ENOENT") {
+        console.warn(`File not found: ${filePath}`);
+      } else {
+        console.error(`Error deleting ${filePath}:`, error);
+      }
+    }
+  }
+
+  console.log("--- DONE ---");
+}
+
+deleteFiles();

apps/dashboard/scripts/logUnusedAssets.ts

@@ -26,9 +26,6 @@ const filesToIgnore = new Set([
   // macOS stuff
   "public/assets/product-pages/.DS_Store",
   "public/assets/.DS_Store",
-  // pdfs
-  "public/Thirdweb_Terms_of_Service.pdf",
-  "public/thirdweb_Privacy_Policy_May_2022.pdf",
 ]);
 
 function getAllFilesInFolder(folderPath: string) {

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

@@ -0,0 +1,53 @@
+"use server";
+
+import { getAuthToken } from "../../app/api/lib/getAuthToken";
+import { API_SERVER_URL } from "../constants/env";
+
+export async function acceptInvite(options: {
+  teamId: string;
+  inviteId: string;
+}) {
+  const token = await getAuthToken();
+
+  if (!token) {
+    return {
+      ok: false,
+      errorMessage: "You are not authorized to perform this action",
+    };
+  }
+
+  const res = await fetch(
+    `${API_SERVER_URL}/v1/teams/${options.teamId}/invites/${options.inviteId}/accept`,
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${token}`,
+      },
+      body: JSON.stringify({}),
+    },
+  );
+
+  if (!res.ok) {
+    let errorMessage = "Failed to accept invite";
+    try {
+      const result = (await res.json()) as {
+        error: {
+          code: string;
+          message: string;
+          statusCode: number;
+        };
+      };
+      errorMessage = result.error.message;
+    } catch {}
+
+    return {
+      ok: false,
+      errorMessage,
+    };
+  }
+
+  return {
+    ok: true,
+  };
+}

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

@@ -0,0 +1,28 @@
+"use server";
+
+type EmailSignupParams = {
+  email: string;
+  send_welcome_email?: boolean;
+};
+
+export async function emailSignup(payLoad: EmailSignupParams) {
+  const response = await fetch(
+    "https://api.beehiiv.com/v2/publications/pub_9f54090a-6d14-406b-adfd-dbb30574f664/subscriptions",
+    {
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${process.env.BEEHIIV_API_KEY}`,
+      },
+      method: "POST",
+      body: JSON.stringify({
+        email: payLoad.email,
+        send_welcome_email: payLoad.send_welcome_email || false,
+        utm_source: "thirdweb.com",
+      }),
+    },
+  );
+
+  return {
+    status: response.status,
+  };
+}

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

@@ -1,15 +1,11 @@
+"use server";
+
 import { getThirdwebClient } from "@/constants/thirdweb.server";
 import { defineDashboardChain } from "lib/defineDashboardChain";
-import type { NextApiRequest, NextApiResponse } from "next";
 import { ZERO_ADDRESS, isAddress, toTokens } from "thirdweb";
 import { getWalletBalance } from "thirdweb/wallets";
 
-export type BalanceQueryRequest = {
-  chainId: number;
-  address: string;
-};
-
-export type BalanceQueryResponse = Array<{
+type BalanceQueryResponse = Array<{
   balance: string;
   decimals: number;
   name?: string;
@@ -18,21 +14,30 @@ export type BalanceQueryResponse = Array<{
   display_balance: string;
 }>;
 
-const handler = async (req: NextApiRequest, res: NextApiResponse) => {
-  if (req.method !== "POST") {
-    return res.status(400).json({ error: "invalid method" });
-  }
+export async function getTokenBalancesFromMoralis(params: {
+  contractAddress: string;
+  chainId: number;
+}): Promise<
+  | { data: BalanceQueryResponse; error: undefined }
+  | {
+      data: undefined;
+      error: string;
+    }
+> {
+  const { contractAddress, chainId } = params;
 
-  const { chainId, address } = req.body;
-  if (!isAddress(address)) {
-    return res.status(400).json({ error: "invalid address" });
+  if (!isAddress(contractAddress)) {
+    return {
+      data: undefined,
+      error: "invalid address",
+    };
   }
 
   const getNativeBalance = async (): Promise<BalanceQueryResponse> => {
     // eslint-disable-next-line no-restricted-syntax
     const chain = defineDashboardChain(chainId, undefined);
     const balance = await getWalletBalance({
-      address,
+      address: contractAddress,
       chain,
       client: getThirdwebClient(),
     });
@@ -50,7 +55,7 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
 
   const getTokenBalances = async (): Promise<BalanceQueryResponse> => {
     const _chain = encodeURIComponent(`0x${chainId?.toString(16)}`);
-    const _address = encodeURIComponent(address);
+    const _address = encodeURIComponent(contractAddress);
     const tokenBalanceEndpoint = `https://deep-index.moralis.io/api/v2/${_address}/erc20?chain=${_chain}`;
 
     const resp = await fetch(tokenBalanceEndpoint, {
@@ -59,6 +64,7 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
         "x-api-key": process.env.MORALIS_API_KEY || "",
       },
     });
+
     if (!resp.ok) {
       resp.body?.cancel();
       return [];
@@ -76,7 +82,8 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
     getTokenBalances(),
   ]);
 
-  return res.status(200).json([...nativeBalance, ...tokenBalances]);
-};
-
-export default handler;
+  return {
+    error: undefined,
+    data: [...nativeBalance, ...tokenBalances],
+  };
+}

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

@@ -0,0 +1,117 @@
+"use server";
+
+import {
+  generateAlchemyUrl,
+  isAlchemySupported,
+  transformAlchemyResponseToNFT,
+} from "lib/wallet/nfts/alchemy";
+import {
+  generateMoralisUrl,
+  isMoralisSupported,
+  transformMoralisResponseToNFT,
+} from "lib/wallet/nfts/moralis";
+import {
+  generateSimpleHashUrl,
+  isSimpleHashSupported,
+  transformSimpleHashResponseToNFT,
+} from "lib/wallet/nfts/simpleHash";
+import type { WalletNFT } from "lib/wallet/nfts/types";
+
+type WalletNFTApiReturn =
+  | { result: WalletNFT[]; error?: undefined }
+  | { result?: undefined; error: string };
+
+export async function getWalletNFTs(params: {
+  chainId: number;
+  owner: string;
+}): Promise<WalletNFTApiReturn> {
+  const { chainId, owner } = params;
+  const supportedChainSlug = await isSimpleHashSupported(chainId);
+
+  if (supportedChainSlug && process.env.SIMPLEHASH_API_KEY) {
+    const url = generateSimpleHashUrl({ chainSlug: supportedChainSlug, owner });
+
+    const response = await fetch(url, {
+      method: "GET",
+      headers: {
+        "X-API-KEY": process.env.SIMPLEHASH_API_KEY,
+      },
+      next: {
+        revalidate: 10, // cache for 10 seconds
+      },
+    });
+
+    if (response.status >= 400) {
+      return {
+        error: response.statusText,
+      };
+    }
+
+    try {
+      const parsedResponse = await response.json();
+      const result = await transformSimpleHashResponseToNFT(
+        parsedResponse,
+        owner,
+      );
+
+      return { result };
+    } catch {
+      return { error: "error parsing response" };
+    }
+  }
+
+  if (isAlchemySupported(chainId)) {
+    const url = generateAlchemyUrl({ chainId, owner });
+
+    const response = await fetch(url, {
+      next: {
+        revalidate: 10, // cache for 10 seconds
+      },
+    });
+    if (response.status >= 400) {
+      return { error: response.statusText };
+    }
+    try {
+      const parsedResponse = await response.json();
+      const result = await transformAlchemyResponseToNFT(parsedResponse, owner);
+
+      return { result, error: undefined };
+    } catch (err) {
+      console.error("Error fetching NFTs", err);
+      return { error: "error parsing response" };
+    }
+  }
+
+  if (isMoralisSupported(chainId) && process.env.MORALIS_API_KEY) {
+    const url = generateMoralisUrl({ chainId, owner });
+
+    const response = await fetch(url, {
+      method: "GET",
+      headers: {
+        "X-API-Key": process.env.MORALIS_API_KEY,
+      },
+      next: {
+        revalidate: 10, // cache for 10 seconds
+      },
+    });
+
+    if (response.status >= 400) {
+      return { error: response.statusText };
+    }
+
+    try {
+      const parsedResponse = await response.json();
+      const result = await transformMoralisResponseToNFT(
+        await parsedResponse,
+        owner,
+      );
+
+      return { result };
+    } catch (err) {
+      console.error("Error fetching NFTs", err);
+      return { error: "error parsing response" };
+    }
+  }
+
+  return { error: "unsupported chain" };
+}

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

@@ -0,0 +1,89 @@
+"use server";
+
+import { getAuthToken } from "../../app/api/lib/getAuthToken";
+import { API_SERVER_URL } from "../constants/env";
+
+type ProxyActionParams = {
+  pathname: string;
+  searchParams?: Record<string, string>;
+  method: "GET" | "POST" | "PUT" | "DELETE";
+  body?: string;
+  headers?: Record<string, string>;
+};
+
+type ProxyActionResult<T extends object> =
+  | {
+      status: number;
+      ok: true;
+      data: T;
+    }
+  | {
+      status: number;
+      ok: false;
+      error: string;
+    };
+
+async function proxy<T extends object>(
+  baseUrl: string,
+  params: ProxyActionParams,
+): Promise<ProxyActionResult<T>> {
+  const authToken = await getAuthToken();
+
+  // build URL
+  const url = new URL(baseUrl);
+  url.pathname = params.pathname;
+  if (params.searchParams) {
+    for (const key in params.searchParams) {
+      url.searchParams.append(key, params.searchParams[key] as string);
+    }
+  }
+
+  const res = await fetch(url, {
+    method: params.method,
+    headers: {
+      ...params.headers,
+      ...(authToken ? { Authorization: `Bearer ${authToken}` } : {}),
+    },
+    body: params.body,
+  });
+
+  if (!res.ok) {
+    try {
+      const errorMessage = await res.text();
+      return {
+        status: res.status,
+        ok: false,
+        error: errorMessage || res.statusText,
+      };
+    } catch {
+      return {
+        status: res.status,
+        ok: false,
+        error: res.statusText,
+      };
+    }
+  }
+
+  return {
+    status: res.status,
+    ok: true,
+    data: await res.json(),
+  };
+}
+
+export async function apiServerProxy<T extends object = object>(
+  params: ProxyActionParams,
+) {
+  return proxy<T>(API_SERVER_URL, params);
+}
+
+export async function payServerProxy<T extends object = object>(
+  params: ProxyActionParams,
+) {
+  return proxy<T>(
+    process.env.NEXT_PUBLIC_PAY_URL
+      ? `https://${process.env.NEXT_PUBLIC_PAY_URL}`
+      : "https://pay.thirdweb-dev.com",
+    params,
+  );
+}

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

@@ -0,0 +1,68 @@
+"use server";
+
+import { getAuthToken } from "../../app/api/lib/getAuthToken";
+import { API_SERVER_URL } from "../constants/env";
+
+export async function sendTeamInvites(options: {
+  teamId: string;
+  invites: Array<{ email: string; role: "OWNER" | "MEMBER" }>;
+}): Promise<
+  | {
+      ok: true;
+      results: Array<"fulfilled" | "rejected">;
+    }
+  | {
+      ok: false;
+      errorMessage: string;
+    }
+> {
+  const token = await getAuthToken();
+
+  if (!token) {
+    return {
+      ok: false,
+      errorMessage: "You are not authorized to perform this action",
+    };
+  }
+
+  const results = await Promise.allSettled(
+    options.invites.map((invite) => sendInvite(options.teamId, invite, token)),
+  );
+
+  return {
+    ok: true,
+    results: results.map((x) => x.status),
+  };
+}
+
+async function sendInvite(
+  teamId: string,
+  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",
+    },
+    body: JSON.stringify({
+      inviteEmail: invite.email,
+      inviteRole: invite.role,
+    }),
+  });
+
+  if (!res.ok) {
+    const errorMessage = await res.text();
+    return {
+      email: invite.email,
+      ok: false,
+      errorMessage,
+    };
+  }
+
+  return {
+    email: invite.email,
+    ok: true,
+  };
+}

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

@@ -5,6 +5,7 @@ import { API_SERVER_URL } from "../constants/env";
 export async function updateAccount(values: {
   name?: string;
   email?: string;
+  image?: string | null;
 }) {
   const token = await getAuthToken();
 

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

@@ -1,21 +1,76 @@
-import { fetchAnalytics } from "data/analytics/fetch-analytics";
+import "server-only";
+
 import type {
   AnalyticsQueryParams,
+  EcosystemWalletStats,
   InAppWalletStats,
   RpcMethodStats,
+  TransactionStats,
   UserOpStats,
   WalletStats,
   WalletUserStats,
 } from "types/analytics";
+import { getAuthToken } from "../../app/api/lib/getAuthToken";
+import { getChains } from "./chain";
+
+async function fetchAnalytics(
+  input: string | URL,
+  init?: RequestInit,
+): Promise<Response> {
+  const token = await getAuthToken();
+
+  if (!token) {
+    throw new Error("You are not authorized to perform this action");
+  }
+
+  const [pathname, searchParams] = input.toString().split("?");
+  if (!pathname) {
+    throw new Error("Invalid input, no pathname provided");
+  }
+
+  // create a new URL object for the analytics server
+  const ANALYTICS_SERVICE_URL = new URL(
+    process.env.ANALYTICS_SERVICE_URL || "https://analytics.thirdweb.com",
+  );
+  ANALYTICS_SERVICE_URL.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(
+      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",
+  //   "...",
+  // );
+
+  return fetch(ANALYTICS_SERVICE_URL, {
+    ...init,
+    headers: {
+      "content-type": "application/json",
+      ...init?.headers,
+      authorization: `Bearer ${token}`,
+    },
+  });
+}
 
 function buildSearchParams(params: AnalyticsQueryParams): URLSearchParams {
   const searchParams = new URLSearchParams();
-  if (params.clientId) {
-    searchParams.append("clientId", params.clientId);
-  }
-  if (params.accountId) {
-    searchParams.append("accountId", params.accountId);
+
+  searchParams.append("teamId", params.teamId);
+
+  if (params.projectId) {
+    searchParams.append("projectId", params.projectId);
   }
+
+  // shared params
   if (params.from) {
     searchParams.append("from", params.from.toISOString());
   }
@@ -32,13 +87,19 @@ export async function getWalletConnections(
   params: AnalyticsQueryParams,
 ): Promise<WalletStats[]> {
   const searchParams = buildSearchParams(params);
-  const res = await fetchAnalytics(`v1/wallets?${searchParams.toString()}`, {
-    method: "GET",
-    headers: { "Content-Type": "application/json" },
-  });
+  const res = await fetchAnalytics(
+    `v2/sdk/wallet-connects?${searchParams.toString()}`,
+    {
+      method: "GET",
+      headers: { "Content-Type": "application/json" },
+    },
+  );
 
   if (res?.status !== 200) {
-    console.error("Failed to fetch wallet connections");
+    const reason = await res?.text();
+    console.error(
+      `Failed to fetch wallet connections, ${res?.status} - ${res.statusText} - ${reason}`,
+    );
     return [];
   }
 
@@ -51,7 +112,7 @@ export async function getInAppWalletUsage(
 ): Promise<InAppWalletStats[]> {
   const searchParams = buildSearchParams(params);
   const res = await fetchAnalytics(
-    `v1/wallets/in-app?${searchParams.toString()}`,
+    `v2/wallet/connects?${searchParams.toString()}`,
     {
       method: "GET",
       headers: { "Content-Type": "application/json" },
@@ -59,7 +120,10 @@ export async function getInAppWalletUsage(
   );
 
   if (res?.status !== 200) {
-    console.error("Failed to fetch in-app wallet usage");
+    const reason = await res?.text();
+    console.error(
+      `Failed to fetch in-app wallet usage, ${res?.status} - ${res.statusText} - ${reason}`,
+    );
     return [];
   }
 
@@ -71,13 +135,19 @@ export async function getUserOpUsage(
   params: AnalyticsQueryParams,
 ): Promise<UserOpStats[]> {
   const searchParams = buildSearchParams(params);
-  const res = await fetchAnalytics(`v1/user-ops?${searchParams.toString()}`, {
-    method: "GET",
-    headers: { "Content-Type": "application/json" },
-  });
+  const res = await fetchAnalytics(
+    `v2/bundler/usage?${searchParams.toString()}`,
+    {
+      method: "GET",
+      headers: { "Content-Type": "application/json" },
+    },
+  );
 
   if (res?.status !== 200) {
-    console.error("Failed to fetch user ops usage");
+    const reason = await res?.text();
+    console.error(
+      `Failed to fetch user ops usage: ${res?.status} - ${res.statusText} - ${reason}`,
+    );
     return [];
   }
 
@@ -85,12 +155,70 @@ export async function getUserOpUsage(
   return json.data as UserOpStats[];
 }
 
+export async function getAggregateUserOpUsage(
+  params: Omit<AnalyticsQueryParams, "period">,
+): Promise<UserOpStats> {
+  const [userOpStats, chains] = await Promise.all([
+    getUserOpUsage({ ...params, period: "all" }),
+    getChains(),
+  ]);
+  // Aggregate stats across wallet types
+  return userOpStats.reduce(
+    (acc, curr) => {
+      // Skip testnets from the aggregated stats
+      if (curr.chainId) {
+        const chain = chains.data.find(
+          (c) => c.chainId.toString() === curr.chainId,
+        );
+        if (chain?.testnet) {
+          return acc;
+        }
+      }
+
+      acc.successful += curr.successful;
+      acc.failed += curr.failed;
+      acc.sponsoredUsd += curr.sponsoredUsd;
+      return acc;
+    },
+    {
+      date: (params.from || new Date()).toISOString(),
+      successful: 0,
+      failed: 0,
+      sponsoredUsd: 0,
+    },
+  );
+}
+
+export async function getClientTransactions(
+  params: AnalyticsQueryParams,
+): Promise<TransactionStats[]> {
+  const searchParams = buildSearchParams(params);
+  const res = await fetchAnalytics(
+    `v2/sdk/contract-transactions?${searchParams.toString()}`,
+    {
+      method: "GET",
+      headers: { "Content-Type": "application/json" },
+    },
+  );
+
+  if (res?.status !== 200) {
+    const reason = await res?.text();
+    console.error(
+      `Failed to fetch client transactions stats: ${res?.status} - ${res.statusText} - ${reason}`,
+    );
+    return [];
+  }
+
+  const json = await res.json();
+  return json.data as TransactionStats[];
+}
+
 export async function getRpcMethodUsage(
   params: AnalyticsQueryParams,
 ): Promise<RpcMethodStats[]> {
   const searchParams = buildSearchParams(params);
   const res = await fetchAnalytics(
-    `v1/rpc/evm-methods?${searchParams.toString()}`,
+    `v2/rpc/evm-methods?${searchParams.toString()}`,
     {
       method: "GET",
       headers: { "Content-Type": "application/json" },
@@ -111,7 +239,7 @@ export async function getWalletUsers(
 ): Promise<WalletUserStats[]> {
   const searchParams = buildSearchParams(params);
   const res = await fetchAnalytics(
-    `v1/wallets/users?${searchParams.toString()}`,
+    `v2/wallet-connects/users?${searchParams.toString()}`,
     {
       method: "GET",
       headers: { "Content-Type": "application/json" },
@@ -119,7 +247,10 @@ export async function getWalletUsers(
   );
 
   if (res?.status !== 200) {
-    console.error("Failed to fetch wallet user stats");
+    const reason = await res?.text();
+    console.error(
+      `Failed to fetch wallet user stats: ${res?.status} - ${res.statusText} - ${reason}`,
+    );
     return [];
   }
 
@@ -127,20 +258,108 @@ export async function getWalletUsers(
   return json.data as WalletUserStats[];
 }
 
+type ActiveStatus = {
+  bundler: boolean;
+  storage: boolean;
+  rpc: boolean;
+  nebula: boolean;
+  sdk: boolean;
+  insight: boolean;
+  pay: boolean;
+  inAppWallet: boolean;
+  ecosystemWallet: boolean;
+};
+
 export async function isProjectActive(
   params: AnalyticsQueryParams,
-): Promise<boolean> {
+): Promise<ActiveStatus> {
   const searchParams = buildSearchParams(params);
-  const res = await fetchAnalytics(`v1/active?${searchParams.toString()}`, {
-    method: "GET",
-    headers: { "Content-Type": "application/json" },
-  });
+  const res = await fetchAnalytics(
+    `v2/active-usage?${searchParams.toString()}`,
+    {
+      method: "GET",
+      headers: { "Content-Type": "application/json" },
+    },
+  );
 
   if (res?.status !== 200) {
-    console.error("Failed to fetch project active status");
-    return false;
+    const reason = await res?.text();
+    console.error(
+      `Failed to fetch project active status: ${res?.status} - ${res.statusText} - ${reason}`,
+    );
+    return {
+      bundler: false,
+      storage: false,
+      rpc: false,
+      nebula: false,
+      sdk: false,
+      insight: false,
+      pay: false,
+      inAppWallet: false,
+      ecosystemWallet: false,
+    } as ActiveStatus;
   }
 
   const json = await res.json();
-  return json.data.isActive as boolean;
+  return json.data as ActiveStatus;
+}
+
+export async function getEcosystemWalletUsage(args: {
+  teamId: string;
+  ecosystemSlug: string;
+  ecosystemPartnerId?: string;
+  projectId?: string;
+  from?: Date;
+  to?: Date;
+  period?: "day" | "week" | "month" | "year" | "all";
+}) {
+  const {
+    ecosystemSlug,
+    ecosystemPartnerId,
+    teamId,
+    projectId,
+    from,
+    to,
+    period,
+  } = args;
+
+  const searchParams = new URLSearchParams();
+  // required params
+  searchParams.append("ecosystemSlug", ecosystemSlug);
+  searchParams.append("teamId", teamId);
+
+  // optional params
+  if (ecosystemPartnerId) {
+    searchParams.append("ecosystemPartnerId", ecosystemPartnerId);
+  }
+  if (projectId) {
+    searchParams.append("projectId", projectId);
+  }
+  if (from) {
+    searchParams.append("from", from.toISOString());
+  }
+  if (to) {
+    searchParams.append("to", to.toISOString());
+  }
+  if (period) {
+    searchParams.append("period", period);
+  }
+  const res = await fetchAnalytics(
+    `v2/wallets/connects/${ecosystemSlug}?${searchParams.toString()}`,
+    {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+      },
+    },
+  );
+
+  if (res?.status !== 200) {
+    console.error("Failed to fetch ecosystem wallet stats");
+    return null;
+  }
+
+  const json = await res.json();
+
+  return json.data as EcosystemWalletStats[];
 }

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

@@ -0,0 +1,54 @@
+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";
+
+export async function getGasSponsoredChains() {
+  if (!THIRDWEB_API_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,
+    },
+    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 [];
+  }
+}
+
+export function getChains() {
+  return fetch(
+    `${API_SERVER_URL}/v1/chains`,
+    // revalidate every 60 minutes
+    { next: { revalidate: 60 * 60 } },
+  ).then((res) => res.json()) as Promise<{ data: ChainMetadata[] }>;
+}
+
+export function getChainServices() {
+  return fetch(
+    `${API_SERVER_URL}/v1/chains/services`,
+    // revalidate every 60 minutes
+    { next: { revalidate: 60 * 60 } },
+  ).then((res) => res.json()) as Promise<{
+    data: Record<number, Array<ChainService>>;
+  }>;
+}

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

@@ -0,0 +1,32 @@
+import { getAuthToken } from "../../app/api/lib/getAuthToken";
+import { API_SERVER_URL } from "../constants/env";
+
+export type LinkedWallet = {
+  createdAt: string;
+  id: string;
+  walletAddress: string;
+};
+
+export async function getLinkedWallets() {
+  const token = await getAuthToken();
+
+  if (!token) {
+    return null;
+  }
+
+  const res = await fetch(`${API_SERVER_URL}/v1/account/wallets`, {
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
+  });
+
+  if (res.ok) {
+    const json = (await res.json()) as {
+      data: LinkedWallet[];
+    };
+
+    return json.data;
+  }
+
+  return null;
+}

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

@@ -1,31 +1,12 @@
 import "server-only";
-import { COOKIE_ACTIVE_ACCOUNT, COOKIE_PREFIX_TOKEN } from "@/constants/cookie";
 import { API_SERVER_URL } from "@/constants/env";
-import { cookies } from "next/headers";
+import type { ProjectResponse } from "@thirdweb-dev/service-utils";
+import { getAuthToken } from "../../app/api/lib/getAuthToken";
 
-export type Project = {
-  id: string;
-  name: string;
-  createdAt: Date;
-  updatedAt: Date;
-  deletedAt: Date | null;
-  bannedAt: Date | null;
-  domains: string[];
-  bundleIds: string[];
-  redirectUrls: string[];
-  lastAccessedAt: Date | null;
-  slug: string;
-  teamId: string;
-  publishableKey: string;
-  // image: string; // TODO
-};
+export type Project = ProjectResponse;
 
 export async function getProjects(teamSlug: string) {
-  const cookiesManager = await cookies();
-  const activeAccount = cookiesManager.get(COOKIE_ACTIVE_ACCOUNT)?.value;
-  const token = activeAccount
-    ? cookiesManager.get(COOKIE_PREFIX_TOKEN + activeAccount)?.value
-    : null;
+  const token = await getAuthToken();
 
   if (!token) {
     return [];
@@ -46,11 +27,7 @@ export async function getProjects(teamSlug: string) {
 }
 
 export async function getProject(teamSlug: string, projectSlug: string) {
-  const cookiesManager = await cookies();
-  const activeAccount = cookiesManager.get(COOKIE_ACTIVE_ACCOUNT)?.value;
-  const token = activeAccount
-    ? cookiesManager.get(COOKIE_PREFIX_TOKEN + activeAccount)?.value
-    : null;
+  const token = await getAuthToken();
 
   if (!token) {
     return null;

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

@@ -0,0 +1,46 @@
+import { getAuthToken } from "../../app/api/lib/getAuthToken";
+import { API_SERVER_URL } from "../constants/env";
+
+export type TeamInvite = {
+  id: string;
+  teamId: string;
+  email: string;
+  role: "OWNER" | "MEMBER";
+  createdAt: string;
+  status: "pending" | "accepted" | "expired";
+  expiresAt: string;
+};
+
+export async function getTeamInvites(
+  teamId: string,
+  options: {
+    count: number;
+    start: number;
+  },
+) {
+  const authToken = await getAuthToken();
+
+  if (!authToken) {
+    throw new Error("Unauthorized");
+  }
+
+  const res = await fetch(
+    `${API_SERVER_URL}/v1/teams/${teamId}/invites?skip=${options.start}&take=${options.count}`,
+    {
+      headers: {
+        Authorization: `Bearer ${authToken}`,
+      },
+    },
+  );
+
+  if (!res.ok) {
+    const errorMessage = await res.text();
+    throw new Error(errorMessage);
+  }
+
+  const json = (await res.json()) as {
+    result: TeamInvite[];
+  };
+
+  return json.result;
+}

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

@@ -12,15 +12,16 @@ export type TeamAccountRole =
 
 export type TeamMember = {
   account: {
+    creatorWalletAddress: string;
     name: string;
     email: string | null;
+    image: string | null;
   };
-} & {
-  deletedAt: Date | null;
+  deletedAt: string | null;
   accountId: string;
   teamId: string;
-  createdAt: Date;
-  updatedAt: Date;
+  createdAt: string;
+  updatedAt: string;
   role: TeamAccountRole;
 };
 
@@ -46,3 +47,26 @@ export async function getMembers(teamSlug: string) {
 
   return undefined;
 }
+
+export async function getMemberById(teamSlug: string, memberId: string) {
+  const token = await getAuthToken();
+
+  if (!token) {
+    return undefined;
+  }
+
+  const res = await fetch(
+    `${API_SERVER_URL}/v1/teams/${teamSlug}/members/${memberId}`,
+    {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    },
+  );
+
+  if (res.ok) {
+    return (await res.json())?.result as TeamMember;
+  }
+
+  return undefined;
+}

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

@@ -1,34 +1,9 @@
 import "server-only";
-import { API_SERVER_URL } from "@/constants/env";
+import { API_SERVER_URL, THIRDWEB_API_SECRET } from "@/constants/env";
+import type { TeamResponse } from "@thirdweb-dev/service-utils";
 import { getAuthToken } from "../../app/api/lib/getAuthToken";
 
-type EnabledTeamScope =
-  | "pay"
-  | "storage"
-  | "rpc"
-  | "bundler"
-  | "insight"
-  | "embeddedWallets"
-  | "relayer"
-  | "chainsaw"
-  | "nebula";
-
-export type Team = {
-  id: string;
-  name: string;
-  slug: string;
-  createdAt: string;
-  updatedAt: string;
-  deletedAt?: string;
-  bannedAt?: string;
-  image?: string;
-  billingPlan: "pro" | "growth" | "free" | "starter";
-  billingStatus: "validPayment" | (string & {}) | null;
-  billingEmail: string | null;
-  growthTrialEligible: boolean | null;
-  enabledScopes: EnabledTeamScope[];
-};
-
+export type Team = TeamResponse;
 export async function getTeamBySlug(slug: string) {
   const token = await getAuthToken();
 
@@ -47,6 +22,24 @@ export async function getTeamBySlug(slug: string) {
   return null;
 }
 
+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,
+    },
+  });
+
+  if (teamRes.ok) {
+    return (await teamRes.json())?.result as Team;
+  }
+
+  return null;
+}
+
+export function getTeamById(id: string) {
+  return getTeamBySlug(id);
+}
+
 export async function getTeams() {
   const token = await getAuthToken();
   if (!token) {

apps/dashboard/src/@/components/blocks/Avatars/ProjectAvatar.tsx

@@ -12,7 +12,7 @@ export function ProjectAvatar(props: {
       className={cn("rounded-lg border border-border", props.className)}
       alt={""}
       fallback={
-        <div className="flex items-center justify-center bg-muted/50">
+        <div className="flex items-center justify-center bg-card">
           <BoxIcon className="size-[50%] text-muted-foreground" />
         </div>
       }

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

@@ -28,7 +28,7 @@ export const Mobile: Story = {
 
 function Story() {
   return (
-    <div className="container flex max-w-[1000px] flex-col gap-8 lg:p-10">
+    <div className="container flex max-w-[1000px] flex-col gap-8 py-10">
       <BadgeContainer label="Base">
         <DangerSettingCard
           title="This is a title"

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

@@ -6,7 +6,6 @@ import {
   DialogClose,
   DialogContent,
   DialogDescription,
-  DialogFooter,
   DialogHeader,
   DialogTitle,
   DialogTrigger,
@@ -17,20 +16,21 @@ export function DangerSettingCard(props: {
   title: string;
   className?: string;
   footerClassName?: string;
-  description: string;
+  description: React.ReactNode;
   buttonLabel: string;
   buttonOnClick: () => void;
+  isDisabled?: boolean;
   isPending: boolean;
   confirmationDialog: {
     title: string;
-    description: string;
+    description: React.ReactNode;
   };
   children?: React.ReactNode;
 }) {
   return (
     <div
       className={cn(
-        "overflow-hidden rounded-lg border border-red-500/70",
+        "overflow-hidden rounded-lg border border-red-500/70 bg-card",
         props.className,
       )}
     >
@@ -55,7 +55,7 @@ export function DangerSettingCard(props: {
             <Button
               variant="destructive"
               className="gap-2 bg-red-600 font-semibold text-white hover:bg-red-600/80"
-              disabled={props.isPending}
+              disabled={props.isDisabled || props.isPending}
             >
               {props.isPending && <Spinner className="size-3" />}
               {props.buttonLabel}
@@ -63,20 +63,22 @@ export function DangerSettingCard(props: {
           </DialogTrigger>
 
           <DialogContent
-            className="z-[10001]"
+            className="z-[10001] overflow-hidden p-0"
             dialogOverlayClassName="z-[10000]"
           >
-            <DialogHeader className="pr-10">
-              <DialogTitle className="leading-snug">
-                {props.confirmationDialog.title}
-              </DialogTitle>
+            <div className="p-6">
+              <DialogHeader className="pr-10">
+                <DialogTitle className="leading-snug">
+                  {props.confirmationDialog.title}
+                </DialogTitle>
 
-              <DialogDescription>
-                {props.confirmationDialog.description}
-              </DialogDescription>
-            </DialogHeader>
+                <DialogDescription>
+                  {props.confirmationDialog.description}
+                </DialogDescription>
+              </DialogHeader>
+            </div>
 
-            <DialogFooter className="mt-4 gap-4 lg:gap-2">
+            <div className="flex justify-end gap-4 border-t bg-card p-6 lg:gap-2">
               <DialogClose asChild>
                 <Button variant="outline">Cancel</Button>
               </DialogClose>
@@ -90,7 +92,7 @@ export function DangerSettingCard(props: {
                 {props.isPending && <Spinner className="size-3" />}
                 {props.buttonLabel}
               </Button>
-            </DialogFooter>
+            </div>
           </DialogContent>
         </Dialog>
       </div>

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

@@ -1,10 +1,11 @@
 import { Label } from "@/components/ui/label";
 import { ToolTipLabel } from "@/components/ui/tooltip";
 import { AsteriskIcon, InfoIcon } from "lucide-react";
+import type React from "react";
 
 export function FormFieldSetup(props: {
   htmlFor?: string;
-  label: string;
+  label: React.ReactNode;
   errorMessage: React.ReactNode | undefined;
   children: React.ReactNode;
   tooltip?: React.ReactNode;

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

@@ -25,7 +25,7 @@ export function Img(props: imgElementProps) {
         : _status;
   const { className, fallback, skeleton, ...restProps } = props;
   const defaultSkeleton = <div className="animate-pulse bg-accent" />;
-  const defaultFallback = <div className="bg-muted" />;
+  const defaultFallback = <div className="bg-accent" />;
   const imgRef = useRef<HTMLImageElement>(null);
 
   useIsomorphicLayoutEffect(() => {

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

@@ -47,7 +47,7 @@ export function MobileSidebar(props: {
   const defaultTrigger = (
     <Button
       className={cn(
-        "w-full justify-between gap-2 bg-muted/50 text-left lg:hidden",
+        "w-full justify-between gap-2 bg-card text-left lg:hidden",
         props.triggerClassName,
       )}
       variant="outline"

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

@@ -16,6 +16,8 @@ type Option = { label: string; value: string };
 export function MultiNetworkSelector(props: {
   selectedChainIds: number[];
   onChange: (chainIds: number[]) => void;
+  disableChainId?: boolean;
+  className?: string;
 }) {
   const { allChains, idToChain } = useAllChainsData();
 
@@ -53,16 +55,24 @@ export function MultiNetworkSelector(props: {
       return (
         <div className="flex justify-between gap-4">
           <span className="flex grow gap-2 truncate text-left">
+            <ChainIcon
+              className="size-5"
+              ipfsSrc={chain.icon?.url}
+              loading="lazy"
+            />
             {cleanChainName(chain.name)}
           </span>
-          <Badge variant="outline" className="gap-2">
-            <span className="text-muted-foreground">Chain ID</span>
-            {chain.chainId}
-          </Badge>
+
+          {!props.disableChainId && (
+            <Badge variant="outline" className="gap-2">
+              <span className="text-muted-foreground">Chain ID</span>
+              {chain.chainId}
+            </Badge>
+          )}
         </div>
       );
     },
-    [idToChain],
+    [idToChain, props.disableChainId],
   );
 
   return (
@@ -79,6 +89,7 @@ export function MultiNetworkSelector(props: {
       disabled={allChains.length === 0}
       overrideSearchFn={searchFn}
       renderOption={renderOption}
+      className={props.className}
     />
   );
 }
@@ -90,6 +101,9 @@ export function SingleNetworkSelector(props: {
   popoverContentClassName?: string;
   // if specified - only these chains will be shown
   chainIds?: number[];
+  side?: "left" | "right" | "top" | "bottom";
+  disableChainId?: boolean;
+  align?: "center" | "start" | "end";
 }) {
   const { allChains, idToChain } = useAllChainsData();
 
@@ -140,16 +154,19 @@ export function SingleNetworkSelector(props: {
               ipfsSrc={chain.icon?.url}
               loading="lazy"
             />
-            {chain.name}
+            {cleanChainName(chain.name)}
           </span>
-          <Badge variant="outline" className="gap-2 max-sm:hidden">
-            <span className="text-muted-foreground">Chain ID</span>
-            {chain.chainId}
-          </Badge>
+
+          {!props.disableChainId && (
+            <Badge variant="outline" className="gap-2 max-sm:hidden">
+              <span className="text-muted-foreground">Chain ID</span>
+              {chain.chainId}
+            </Badge>
+          )}
         </div>
       );
     },
-    [idToChain],
+    [idToChain, props.disableChainId],
   );
 
   const isLoadingChains = allChains.length === 0;
@@ -162,12 +179,15 @@ export function SingleNetworkSelector(props: {
       onValueChange={(chainId) => {
         props.onChange(Number(chainId));
       }}
+      closeOnSelect={true}
       placeholder={isLoadingChains ? "Loading Chains..." : "Select Chain"}
       overrideSearchFn={searchFn}
       renderOption={renderOption}
       className={props.className}
       popoverContentClassName={props.popoverContentClassName}
       disabled={isLoadingChains}
+      side={props.side}
+      align={props.align}
     />
   );
 }

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

@@ -28,7 +28,7 @@ export const Mobile: Story = {
 
 function Story() {
   return (
-    <div className="min-h-screen bg-background py-6 text-foreground">
+    <div className="min-h-dvh bg-background py-6 text-foreground">
       <div className="container flex max-w-[1100px] flex-col gap-10 lg:p-10">
         <BadgeContainer label="No Header">
           <SettingsCard

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

@@ -30,7 +30,7 @@ export function SettingsCard(
   }>,
 ) {
   return (
-    <div className="relative rounded-lg border border-border bg-muted/50">
+    <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",

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

@@ -67,7 +67,7 @@ export function RenderSidebarLinks(props: { links: SidebarLink[] }) {
             // biome-ignore lint/suspicious/noArrayIndexKey: items won't be reordered
             key={i}
             href={link.href}
-            className="flex items-center gap-2 rounded-md px-3 py-2 text-muted-foreground text-sm hover:bg-muted"
+            className="flex items-center gap-2 rounded-md px-3 py-2 text-muted-foreground text-sm hover:bg-accent"
             activeClassName="text-foreground"
             exactMatch={link.exactMatch}
           >

apps/dashboard/src/@/components/blocks/app-footer.tsx

@@ -1,7 +1,6 @@
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 import { ThirdwebMiniLogo } from "app/components/ThirdwebMiniLogo";
-import { DiscordIcon } from "components/icons/brand-icons/DiscordIcon";
 import { GithubIcon } from "components/icons/brand-icons/GithubIcon";
 import { InstagramIcon } from "components/icons/brand-icons/InstagramIcon";
 import { LinkedInIcon } from "components/icons/brand-icons/LinkedinIcon";
@@ -19,7 +18,7 @@ export function AppFooter(props: AppFooterProps) {
   return (
     <footer
       className={cn(
-        "w-full border-border border-t bg-muted/50 py-6 md:py-8",
+        "w-full border-border border-t bg-card py-6 md:py-8",
         props.className,
       )}
     >
@@ -28,7 +27,9 @@ export function AppFooter(props: AppFooterProps) {
         <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
           <div className="flex flex-row items-center gap-3">
             <ThirdwebMiniLogo className="h-7" />
-            <p className="text-muted-foreground text-sm">© 2024 thirdweb</p>
+            <p className="text-muted-foreground text-sm">
+              © {new Date().getFullYear()} thirdweb
+            </p>
           </div>
           <div className="flex flex-row gap-3">
             <Button size="icon" variant="ghost" asChild className="size-9">
@@ -59,11 +60,6 @@ export function AppFooter(props: AppFooterProps) {
                 <YoutubeIcon className="size-5 text-muted-foreground" />
               </Link>
             </Button>
-            <Button size="icon" variant="ghost" asChild className="size-9">
-              <Link href="https://discord.gg/thirdweb" target="_blank">
-                <DiscordIcon className="size-5 text-muted-foreground" />
-              </Link>
-            </Button>
             <Button size="icon" variant="ghost" asChild className="size-9">
               <Link href="https://www.reddit.com/r/thirdweb/" target="_blank">
                 <RedditIcon className="size-5 text-muted-foreground" />

apps/dashboard/src/@/components/blocks/charts/area-chart.tsx

@@ -1,5 +1,12 @@
 "use client";
 
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
 import {
   type ChartConfig,
   ChartContainer,
@@ -8,10 +15,21 @@ import {
   ChartTooltip,
   ChartTooltipContent,
 } from "@/components/ui/chart";
+import { formatDate } from "date-fns";
 import { useMemo } from "react";
 import { Area, AreaChart, CartesianGrid, XAxis } from "recharts";
+import {
+  EmptyChartState,
+  LoadingChartState,
+} from "../../../../components/analytics/empty-chart-state";
+import { cn } from "../../../lib/utils";
 
 type ThirdwebAreaChartProps<TConfig extends ChartConfig> = {
+  header?: {
+    title: string;
+    description?: string;
+    titleClassName?: string;
+  };
   // chart config
   config: TConfig;
   data: Array<Record<keyof TConfig, number> & { time: number | string | Date }>;
@@ -19,72 +37,100 @@ type ThirdwebAreaChartProps<TConfig extends ChartConfig> = {
 
   // chart className
   chartClassName?: string;
+  isPending: boolean;
+  hideLabel?: boolean;
+  toolTipLabelFormatter?: (label: string, payload: unknown) => React.ReactNode;
 };
 
 export function ThirdwebAreaChart<TConfig extends ChartConfig>(
   props: ThirdwebAreaChartProps<TConfig>,
 ) {
   const configKeys = useMemo(() => Object.keys(props.config), [props.config]);
-  return (
-    <div className="rounded-lg border border-border bg-muted/50 px-4 pt-10 pb-4">
-      <ChartContainer config={props.config} className={props.chartClassName}>
-        <AreaChart
-          accessibilityLayer
-          data={props.data}
-          margin={{
-            left: 12,
-            right: 12,
-          }}
-        >
-          <CartesianGrid vertical={false} />
-          <XAxis
-            dataKey="time"
-            tickLine={false}
-            axisLine={false}
-            tickMargin={20}
-            tickFormatter={(value) => new Date(value).toLocaleDateString()}
-          />
-          <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
-          <defs>
-            {configKeys.map((key) => (
-              <linearGradient
-                key={key}
-                id={`fill_${key}`}
-                x1="0"
-                y1="0"
-                x2="0"
-                y2="1"
-              >
-                <stop
-                  offset="5%"
-                  stopColor={`var(--color-${key})`}
-                  stopOpacity={0.8}
-                />
-                <stop
-                  offset="95%"
-                  stopColor={`var(--color-${key})`}
-                  stopOpacity={0.1}
-                />
-              </linearGradient>
-            ))}
-          </defs>
-          {configKeys.map((key) => (
-            <Area
-              key={key}
-              dataKey={key}
-              type="natural"
-              fill={`url(#fill_${key})`}
-              fillOpacity={0.4}
-              stroke={`var(--color-${key})`}
-              stackId="a"
-            />
-          ))}
 
-          {props.showLegend && (
-            <ChartLegend content={<ChartLegendContent />} className="pt-8" />
+  return (
+    <Card>
+      {props.header && (
+        <CardHeader>
+          <CardTitle className={cn("mb-2", props.header.titleClassName)}>
+            {props.header.title}
+          </CardTitle>
+          {props.header.description && (
+            <CardDescription>{props.header.description}</CardDescription>
           )}
-        </AreaChart>
-      </ChartContainer>
-    </div>
+        </CardHeader>
+      )}
+
+      <CardContent className={cn(!props.header && "pt-6")}>
+        <ChartContainer config={props.config} className={props.chartClassName}>
+          {props.isPending ? (
+            <LoadingChartState />
+          ) : props.data.length === 0 ? (
+            <EmptyChartState />
+          ) : (
+            <AreaChart accessibilityLayer data={props.data}>
+              <CartesianGrid vertical={false} />
+              <XAxis
+                dataKey="time"
+                tickLine={false}
+                axisLine={false}
+                tickMargin={20}
+                tickFormatter={(value) => formatDate(new Date(value), "MMM dd")}
+              />
+              <ChartTooltip
+                cursor={false}
+                content={
+                  <ChartTooltipContent
+                    hideLabel={
+                      props.hideLabel !== undefined ? props.hideLabel : true
+                    }
+                    labelFormatter={props.toolTipLabelFormatter}
+                  />
+                }
+              />
+              <defs>
+                {configKeys.map((key) => (
+                  <linearGradient
+                    key={key}
+                    id={`fill_${key}`}
+                    x1="0"
+                    y1="0"
+                    x2="0"
+                    y2="1"
+                  >
+                    <stop
+                      offset="5%"
+                      stopColor={`var(--color-${key})`}
+                      stopOpacity={0.8}
+                    />
+                    <stop
+                      offset="95%"
+                      stopColor={`var(--color-${key})`}
+                      stopOpacity={0.1}
+                    />
+                  </linearGradient>
+                ))}
+              </defs>
+              {configKeys.map((key) => (
+                <Area
+                  key={key}
+                  dataKey={key}
+                  type="natural"
+                  fill={`url(#fill_${key})`}
+                  fillOpacity={0.4}
+                  stroke={`var(--color-${key})`}
+                  stackId="a"
+                />
+              ))}
+
+              {props.showLegend && (
+                <ChartLegend
+                  content={<ChartLegendContent className="pt-8" />}
+                />
+              )}
+            </AreaChart>
+          )}
+        </ChartContainer>
+      </CardContent>
+    </Card>
   );
 }

apps/dashboard/src/@/components/blocks/charts/bar-chart.tsx

@@ -17,12 +17,21 @@ import {
   ChartTooltip,
   ChartTooltipContent,
 } from "@/components/ui/chart";
+import { formatDate } from "date-fns";
 import { useMemo } from "react";
+import {
+  EmptyChartState,
+  LoadingChartState,
+} from "../../../../components/analytics/empty-chart-state";
+import { cn } from "../../../lib/utils";
 
 type ThirdwebBarChartProps<TConfig extends ChartConfig> = {
   // metadata
-  title: string;
-  description?: string;
+  header?: {
+    title: string;
+    description?: string;
+    titleClassName?: string;
+  };
   // chart config
   config: TConfig;
   data: Array<Record<keyof TConfig, number> & { time: number | string | Date }>;
@@ -30,6 +39,9 @@ type ThirdwebBarChartProps<TConfig extends ChartConfig> = {
   variant?: "stacked" | "grouped";
   // chart className
   chartClassName?: string;
+  isPending: boolean;
+  toolTipLabelFormatter?: (label: string, payload: unknown) => React.ReactNode;
+  hideLabel?: boolean;
 };
 
 export function ThirdwebBarChart<TConfig extends ChartConfig>(
@@ -39,51 +51,76 @@ export function ThirdwebBarChart<TConfig extends ChartConfig>(
   // if there are more than 4 keys then we should stack them by default
   const variant =
     props.variant || configKeys.length > 4 ? "stacked" : "grouped";
+
   return (
     <Card>
-      <CardHeader>
-        <CardTitle>{props.title}</CardTitle>
-        {props.description && (
-          <CardDescription>{props.description}</CardDescription>
-        )}
-      </CardHeader>
-      <CardContent>
+      {props.header && (
+        <CardHeader>
+          <CardTitle className={cn("mb-2", props.header.titleClassName)}>
+            {props.header.title}
+          </CardTitle>
+          {props.header.description && (
+            <CardDescription>{props.header.description}</CardDescription>
+          )}
+        </CardHeader>
+      )}
+
+      <CardContent className={cn(!props.header && "pt-6")}>
         <ChartContainer config={props.config} className={props.chartClassName}>
-          <BarChart accessibilityLayer data={props.data}>
-            <CartesianGrid vertical={false} />
-            <XAxis
-              dataKey="time"
-              tickLine={false}
-              axisLine={false}
-              tickMargin={10}
-              tickFormatter={(value) => new Date(value).toLocaleDateString()}
-            />
-            <ChartTooltip content={<ChartTooltipContent hideLabel />} />
-            {props.showLegend && (
-              <ChartLegend content={<ChartLegendContent />} />
-            )}
-            {configKeys.map((key, idx) => (
-              <Bar
-                key={key}
-                dataKey={key}
-                // if stacked then they should all be the same stackId
-                // if grouped then they should all be unique stackId (so the key works great)
-                stackId={variant === "stacked" ? "a" : key}
-                fill={`var(--color-${key})`}
-                // if stacked then we need to figure out the radius based on the index in the array
-                // if grouped then we can just use the same radius for all
-                radius={
-                  variant === "stacked"
-                    ? idx === 0
-                      ? [0, 0, 4, 4]
-                      : idx === configKeys.length - 1
-                        ? [4, 4, 0, 0]
-                        : [0, 0, 0, 0]
-                    : [4, 4, 4, 4]
+          {props.isPending ? (
+            <LoadingChartState />
+          ) : props.data.length === 0 ? (
+            <EmptyChartState />
+          ) : (
+            <BarChart accessibilityLayer data={props.data}>
+              <CartesianGrid vertical={false} />
+              <XAxis
+                dataKey="time"
+                tickLine={false}
+                axisLine={false}
+                tickMargin={10}
+                tickFormatter={(value) => formatDate(new Date(value), "MMM d")}
+              />
+              <ChartTooltip
+                content={
+                  <ChartTooltipContent
+                    hideLabel={
+                      props.hideLabel !== undefined ? props.hideLabel : true
+                    }
+                    labelFormatter={props.toolTipLabelFormatter}
+                  />
                 }
               />
-            ))}
-          </BarChart>
+              {props.showLegend && (
+                <ChartLegend
+                  content={<ChartLegendContent className="pt-5" />}
+                />
+              )}
+              {configKeys.map((key, idx) => (
+                <Bar
+                  key={key}
+                  dataKey={key}
+                  // if stacked then they should all be the same stackId
+                  // if grouped then they should all be unique stackId (so the key works great)
+                  stackId={variant === "stacked" ? "a" : key}
+                  fill={`var(--color-${key})`}
+                  // if stacked then we need to figure out the radius based on the index in the array
+                  // if grouped then we can just use the same radius for all
+                  radius={
+                    variant === "stacked"
+                      ? idx === 0
+                        ? [0, 0, 4, 4]
+                        : idx === configKeys.length - 1
+                          ? [4, 4, 0, 0]
+                          : [0, 0, 0, 0]
+                      : [4, 4, 4, 4]
+                  }
+                  strokeWidth={1}
+                  className="stroke-background"
+                />
+              ))}
+            </BarChart>
+          )}
         </ChartContainer>
       </CardContent>
     </Card>

apps/dashboard/src/@/components/blocks/error-fallbacks/unexpect-value-error-message.tsx

@@ -23,7 +23,7 @@ export function UnexpectedValueErrorMessage(props: {
       {stringifiedValue && (
         <div className="mt-3">
           <p className="mb-0.5 text-muted-foreground text-sm">Value Received</p>
-          <ScrollShadow className="rounded-lg bg-muted/50">
+          <ScrollShadow className="rounded-lg bg-card">
             <code className="block whitespace-pre p-4 font-mono text-xs">
               {stringifiedValue}
             </code>

apps/dashboard/src/@/components/blocks/multi-select.tsx

@@ -202,7 +202,7 @@ export const MultiSelect = forwardRef<HTMLButtonElement, MultiSelectProps>(
                       event.stopPropagation();
                       handleClear();
                     }}
-                    className="rounded p-1 hover:bg-muted"
+                    className="rounded p-1 hover:bg-accent"
                   >
                     <XIcon className="h-4 cursor-pointer text-muted-foreground" />
                   </div>