Version Packages (#6208)

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

.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/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/*/" }
+  ]
 }

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",
     "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/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,98 @@
+"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 analyticsServerProxy<T extends object = object>(
+  params: ProxyActionParams,
+) {
+  return proxy<T>(
+    process.env.ANALYTICS_SERVICE_URL || "https://analytics.thirdweb.com",
+    params,
+  );
+}
+
+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/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

@@ -3,6 +3,7 @@ import type {
   AnalyticsQueryParams,
   InAppWalletStats,
   RpcMethodStats,
+  TransactionStats,
   UserOpStats,
   WalletStats,
   WalletUserStats,
@@ -77,7 +78,10 @@ export async function getUserOpUsage(
   });
 
   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,6 +89,30 @@ export async function getUserOpUsage(
   return json.data as UserOpStats[];
 }
 
+export async function getClientTransactions(
+  params: AnalyticsQueryParams,
+): Promise<TransactionStats[]> {
+  const searchParams = buildSearchParams(params);
+  const res = await fetchAnalytics(
+    `v1/transactions/client?${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[]> {

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

@@ -1,7 +1,6 @@
 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 { getAuthToken } from "../../app/api/lib/getAuthToken";
 
 export type Project = {
   id: string;
@@ -21,11 +20,7 @@ export type Project = {
 };
 
 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 +41,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.ts

@@ -24,8 +24,9 @@ export type Team = {
   image?: string;
   billingPlan: "pro" | "growth" | "free" | "starter";
   billingStatus: "validPayment" | (string & {}) | null;
+  supportPlan: "pro" | "growth" | "free" | "starter";
   billingEmail: string | null;
-  growthTrialEligible: boolean | null;
+  growthTrialEligible: false;
   enabledScopes: EnabledTeamScope[];
 };
 
@@ -47,6 +48,10 @@ export async function getTeamBySlug(slug: string) {
   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.tsx

@@ -30,7 +30,7 @@ export function DangerSettingCard(props: {
   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,
       )}
     >

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

@@ -19,7 +19,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 +28,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">

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

@@ -8,8 +8,13 @@ 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";
 
 type ThirdwebAreaChartProps<TConfig extends ChartConfig> = {
   // chart config
@@ -19,6 +24,7 @@ type ThirdwebAreaChartProps<TConfig extends ChartConfig> = {
 
   // chart className
   chartClassName?: string;
+  isPending: boolean;
 };
 
 export function ThirdwebAreaChart<TConfig extends ChartConfig>(
@@ -26,64 +32,70 @@ export function ThirdwebAreaChart<TConfig extends ChartConfig>(
 ) {
   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">
+    <div className="rounded-lg border border-border 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.isPending ? (
+          <LoadingChartState />
+        ) : props.data.length === 0 ? (
+          <EmptyChartState />
+        ) : (
+          <AreaChart
+            accessibilityLayer
+            data={props.data}
+            margin={{
+              left: 12,
+              right: 12,
+            }}
+          >
+            <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 />} />
+            <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>
+            {props.showLegend && (
+              <ChartLegend content={<ChartLegendContent />} className="pt-8" />
+            )}
+          </AreaChart>
+        )}
       </ChartContainer>
     </div>
   );

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

@@ -17,7 +17,13 @@ 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
@@ -30,6 +36,10 @@ type ThirdwebBarChartProps<TConfig extends ChartConfig> = {
   variant?: "stacked" | "grouped";
   // chart className
   chartClassName?: string;
+  isPending: boolean;
+  toolTipLabelFormatter?: (label: string, payload: unknown) => React.ReactNode;
+  hideLabel?: boolean;
+  titleClassName?: string;
 };
 
 export function ThirdwebBarChart<TConfig extends ChartConfig>(
@@ -39,51 +49,71 @@ 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>
+        <CardTitle className={cn("mb-2", props.titleClassName)}>
+          {props.title}
+        </CardTitle>
         {props.description && (
           <CardDescription>{props.description}</CardDescription>
         )}
       </CardHeader>
       <CardContent>
         <ChartContainer config={props.config} className={props.chartClassName}>
-          <BarChart accessibilityLayer data={props.data}>
-            <CartesianGrid vertical={false} />
-            <XAxis
-              dataKey="time"
-              tickLine={false}
-              axisLine={false}
-              tickMargin={10}
-              tickFormatter={(value) => new Date(value).toLocaleDateString()}
-            />
-            <ChartTooltip content={<ChartTooltipContent hideLabel />} />
-            {props.showLegend && (
-              <ChartLegend content={<ChartLegendContent />} />
-            )}
-            {configKeys.map((key, idx) => (
-              <Bar
-                key={key}
-                dataKey={key}
-                // if stacked then they should all be the same stackId
-                // if grouped then they should all be unique stackId (so the key works great)
-                stackId={variant === "stacked" ? "a" : key}
-                fill={`var(--color-${key})`}
-                // if stacked then we need to figure out the radius based on the index in the array
-                // if grouped then we can just use the same radius for all
-                radius={
-                  variant === "stacked"
-                    ? idx === 0
-                      ? [0, 0, 4, 4]
-                      : idx === configKeys.length - 1
-                        ? [4, 4, 0, 0]
-                        : [0, 0, 0, 0]
-                    : [4, 4, 4, 4]
+          {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 />} />
+              )}
+              {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>

apps/dashboard/src/@/components/blocks/pricing-card.tsx

@@ -57,8 +57,9 @@ export const PricingCard: React.FC<PricingCardProps> = ({
   return (
     <div
       className={cn(
-        "z-[999] flex w-full flex-col gap-6 rounded-xl border border-border bg-muted/50 p-4 md:p-6",
+        "z-10 flex w-full flex-col gap-6 rounded-xl border border-border bg-card p-4 md:p-6",
         current && "border-blue-500",
+        highlighted && "border-active-border",
       )}
       style={
         highlighted

apps/dashboard/src/@/components/blocks/select-with-search.tsx

@@ -31,6 +31,9 @@ interface SelectWithSearchProps
   ) => boolean;
   renderOption?: (option: { value: string; label: string }) => React.ReactNode;
   popoverContentClassName?: string;
+  side?: "left" | "right" | "top" | "bottom";
+  align?: "center" | "start" | "end";
+  closeOnSelect?: boolean;
 }
 
 export const SelectWithSearch = React.forwardRef<
@@ -48,6 +51,7 @@ export const SelectWithSearch = React.forwardRef<
       overrideSearchFn,
       popoverContentClassName,
       searchPlaceholder,
+      closeOnSelect,
       ...props
     },
     ref,
@@ -107,7 +111,7 @@ export const SelectWithSearch = React.forwardRef<
     }, [searchValue]);
 
     return (
-      <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
+      <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen} modal>
         <PopoverTrigger asChild>
           <Button
             ref={ref}
@@ -118,23 +122,24 @@ export const SelectWithSearch = React.forwardRef<
               className,
             )}
           >
-            <div className="flex w-full items-center justify-between">
+            <div className="flex w-full items-center justify-between gap-2">
               <span
                 className={cn(
-                  "text-muted-foreground text-sm",
+                  "truncate text-muted-foreground text-sm",
                   selectedOption && "text-foreground",
                 )}
               >
                 {selectedOption?.label || placeholder}
               </span>
-              <ChevronDown className="h-4 cursor-pointer text-muted-foreground" />
+              <ChevronDown className="size-4 cursor-pointer text-muted-foreground" />
             </div>
           </Button>
         </PopoverTrigger>
 
         <PopoverContent
           className={cn("z-[10001] p-0", popoverContentClassName)}
-          align="center"
+          align={props.align || "center"}
+          side={props.side}
           sideOffset={10}
           onEscapeKeyDown={() => setIsPopoverOpen(false)}
           style={{
@@ -174,7 +179,12 @@ export const SelectWithSearch = React.forwardRef<
                       key={option.value}
                       role="option"
                       aria-selected={isSelected}
-                      onClick={() => onValueChange(option.value)}
+                      onClick={() => {
+                        onValueChange(option.value);
+                        if (closeOnSelect) {
+                          setIsPopoverOpen(false);
+                        }
+                      }}
                       variant="ghost"
                       className="flex w-full cursor-pointer justify-start gap-3 rounded-sm px-3 py-2 text-left"
                       ref={

apps/dashboard/src/@/components/blocks/wallet-address.tsx

@@ -8,7 +8,7 @@ import {
 import { useThirdwebClient } from "@/constants/thirdweb.client";
 import { resolveSchemeWithErrorHandler } from "@/lib/resolveSchemeWithErrorHandler";
 import { useClipboard } from "hooks/useClipboard";
-import { Check, Copy, ExternalLinkIcon } from "lucide-react";
+import { Check, Copy } from "lucide-react";
 import { useMemo } from "react";
 import { type ThirdwebClient, isAddress } from "thirdweb";
 import { ZERO_ADDRESS } from "thirdweb";
@@ -121,7 +121,11 @@ export function WalletAddress(props: {
                 >
                   {walletAvatarLink && (
                     <Avatar>
-                      <AvatarImage src={walletAvatarLink} alt={profile.name} />
+                      <AvatarImage
+                        src={walletAvatarLink}
+                        alt={profile.name}
+                        className="object-cover"
+                      />
                       {profile.name && (
                         <AvatarFallback>
                           {profile.name.slice(0, 2)}
@@ -144,21 +148,6 @@ export function WalletAddress(props: {
               );
             })
           )}
-          <Button
-            asChild
-            variant="upsell"
-            className="flex flex-row items-center gap-2 text-sm"
-            size="sm"
-          >
-            <a
-              target="_blank"
-              href="https://blog.thirdweb.com/changelog/introducing-the-social-sdk?ref=dashboard-social-wallet"
-              rel="noreferrer"
-            >
-              Learn more
-              <ExternalLinkIcon className="size-4" />
-            </a>
-          </Button>
         </div>
       </HoverCardContent>
     </HoverCard>

apps/dashboard/src/@/components/pagination-buttons.stories.tsx

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { BadgeContainer, mobileViewport } from "../../stories/utils";
+import { PaginationButtons } from "./pagination-buttons";
+
+const meta = {
+  title: "blocks/PaginationButtons",
+  component: Story,
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+} satisfies Meta<typeof Story>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Desktop: Story = {
+  args: {},
+};
+
+export const Mobile: Story = {
+  args: {},
+  parameters: {
+    viewport: mobileViewport("iphone14"),
+  },
+};
+
+function Story() {
+  return (
+    <div className="container flex max-w-[1000px] flex-col gap-8 py-10">
+      <Variant label="10 Pages" totalPages={10} />
+      <Variant label="100 Pages" totalPages={100} />
+      <Variant label="3 Pages" totalPages={2} />
+      <Variant label="6 Pages" totalPages={6} />
+      <Variant label="1 Page - nothing rendered" totalPages={1} />
+    </div>
+  );
+}
+
+function Variant(props: {
+  label: string;
+  totalPages: number;
+}) {
+  const [activePage, setActivePage] = useState(1);
+  return (
+    <BadgeContainer label={props.label}>
+      <div className="border bg-card py-5">
+        <PaginationButtons
+          activePage={activePage}
+          onPageClick={setActivePage}
+          totalPages={props.totalPages}
+        />
+      </div>
+    </BadgeContainer>
+  );
+}

apps/dashboard/src/@/components/pagination-buttons.tsx

@@ -9,6 +9,11 @@ import {
   PaginationNext,
   PaginationPrevious,
 } from "@/components/ui/pagination";
+import { ArrowUpRightIcon } from "lucide-react";
+import { useState } from "react";
+import { cn } from "../lib/utils";
+import { Button } from "./ui/button";
+import { Input } from "./ui/input";
 
 export const PaginationButtons = (props: {
   activePage: number;
@@ -16,6 +21,47 @@ export const PaginationButtons = (props: {
   onPageClick: (page: number) => void;
 }) => {
   const { activePage, totalPages, onPageClick: setPage } = props;
+  const [inputHasError, setInputHasError] = useState(false);
+  const [pageNumberInput, setPageNumberInput] = useState("");
+
+  if (totalPages === 1) {
+    return null;
+  }
+
+  function handlePageInputSubmit() {
+    const page = Number(pageNumberInput);
+
+    setInputHasError(false);
+    if (Number.isInteger(page) && page > 0 && page <= totalPages) {
+      setPage(page);
+      setPageNumberInput("");
+    } else {
+      setInputHasError(true);
+    }
+  }
+
+  // just render all the page buttons directly
+  if (totalPages <= 6) {
+    const pages = [...Array(totalPages)].map((_, i) => i + 1);
+    return (
+      <Pagination>
+        <PaginationContent>
+          {pages.map((page) => (
+            <PaginationItem key={page}>
+              <PaginationLink
+                isActive={activePage === page}
+                onClick={() => {
+                  setPage(page);
+                }}
+              >
+                {page}
+              </PaginationLink>
+            </PaginationItem>
+          ))}
+        </PaginationContent>
+      </Pagination>
+    );
+  }
 
   return (
     <Pagination>
@@ -28,24 +74,28 @@ export const PaginationButtons = (props: {
             }}
           />
         </PaginationItem>
+
+        {/* First page + ... */}
         {activePage - 3 > 0 && (
-          <PaginationItem className="max-sm:hidden">
-            <PaginationEllipsis />
-          </PaginationItem>
-        )}
-        {activePage - 2 > 0 && (
-          <PaginationItem className="max-sm:hidden">
-            <PaginationLink
-              onClick={() => {
-                setPage(activePage - 2);
-              }}
-            >
-              {activePage - 2}
-            </PaginationLink>
-          </PaginationItem>
+          <>
+            <PaginationItem>
+              <PaginationLink
+                onClick={() => {
+                  setPage(1);
+                }}
+              >
+                1
+              </PaginationLink>
+            </PaginationItem>
+
+            <PaginationItem>
+              <PaginationEllipsis className="max-sm:w-3" />
+            </PaginationItem>
+          </>
         )}
+
         {activePage - 1 > 0 && (
-          <PaginationItem>
+          <PaginationItem className="max-sm:hidden">
             <PaginationLink
               onClick={() => {
                 setPage(activePage - 1);
@@ -55,11 +105,13 @@ export const PaginationButtons = (props: {
             </PaginationLink>
           </PaginationItem>
         )}
+
         <PaginationItem>
           <PaginationLink isActive>{activePage}</PaginationLink>
         </PaginationItem>
+
         {activePage + 1 <= totalPages && (
-          <PaginationItem>
+          <PaginationItem className="max-sm:hidden">
             <PaginationLink
               onClick={() => {
                 setPage(activePage + 1);
@@ -69,22 +121,26 @@ export const PaginationButtons = (props: {
             </PaginationLink>
           </PaginationItem>
         )}
-        {activePage + 2 <= totalPages && (
-          <PaginationItem className="max-sm:hidden">
-            <PaginationLink
-              onClick={() => {
-                setPage(activePage + 2);
-              }}
-            >
-              {activePage + 2}
-            </PaginationLink>
-          </PaginationItem>
-        )}
+
+        {/* ... + Last page */}
         {activePage + 3 <= totalPages && (
-          <PaginationItem className="max-sm:hidden">
-            <PaginationEllipsis />
-          </PaginationItem>
+          <>
+            <PaginationItem>
+              <PaginationEllipsis className="max-sm:w-3" />
+            </PaginationItem>
+
+            <PaginationItem>
+              <PaginationLink
+                onClick={() => {
+                  setPage(totalPages);
+                }}
+              >
+                {totalPages}
+              </PaginationLink>
+            </PaginationItem>
+          </>
         )}
+
         <PaginationItem>
           <PaginationNext
             disabled={activePage === totalPages}
@@ -93,6 +149,34 @@ export const PaginationButtons = (props: {
             }}
           />
         </PaginationItem>
+
+        <div className="relative flex items-center">
+          <Input
+            value={pageNumberInput}
+            onChange={(e) => {
+              setInputHasError(false);
+              setPageNumberInput(e.target.value);
+            }}
+            type="number"
+            placeholder="Page"
+            className={cn(
+              "w-[60px] bg-transparent [appearance:textfield] max-sm:placeholder:text-sm lg:w-[100px] lg:pr-8 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none",
+              inputHasError && "text-red-500",
+            )}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") {
+                handlePageInputSubmit();
+              }
+            }}
+          />
+          <Button
+            variant="ghost"
+            className="absolute right-1 h-auto w-auto p-2 max-sm:hidden"
+            onClick={handlePageInputSubmit}
+          >
+            <ArrowUpRightIcon className="size-4" />
+          </Button>
+        </div>
       </PaginationContent>
     </Pagination>
   );

apps/dashboard/src/@/components/ui/CopyTextButton.tsx

@@ -9,7 +9,7 @@ import { ToolTipLabel } from "./tooltip";
 export function CopyTextButton(props: {
   textToShow: string;
   textToCopy: string;
-  tooltip: string;
+  tooltip: string | undefined;
   className?: string;
   iconClassName?: string;
   variant?:

apps/dashboard/src/@/components/ui/DatePickerWithRange.tsx

@@ -27,6 +27,7 @@ export function DatePickerWithRange(props: {
   header?: React.ReactNode;
   footer?: React.ReactNode;
   labelOverride?: string;
+  popoverAlign?: "start" | "end" | "center";
 }) {
   const [screen, setScreen] = React.useState<"from" | "to">("from");
   const { from, to, setFrom, setTo } = props;
@@ -65,7 +66,11 @@ export function DatePickerWithRange(props: {
       </PopoverTrigger>
 
       {/* Popover */}
-      <PopoverContent className="w-auto p-0" align="start">
+      <PopoverContent
+        className="w-auto p-0"
+        align={props.popoverAlign || "start"}
+        sideOffset={10}
+      >
         <DynamicHeight>
           <div>
             {!isValid && (

apps/dashboard/src/@/components/ui/alert.tsx

@@ -4,7 +4,7 @@ import * as React from "react";
 import { cn } from "@/lib/utils";
 
 const alertVariants = cva(
-  "dark:bg-muted/50 relative w-full rounded-lg border border-border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  "bg-card relative w-full rounded-lg border border-border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
   {
     variants: {
       variant: {

apps/dashboard/src/@/components/ui/button.stories.tsx

@@ -20,7 +20,7 @@ export const AllVariants: Story = {
 
 function Component() {
   return (
-    <div className="flex min-h-screen flex-col gap-6 bg-background p-6 text-foreground">
+    <div className="flex min-h-dvh flex-col gap-6 bg-background p-6 text-foreground">
       <Variants size="default" />
       <Variants size="sm" />
       <Variants size="icon" />

apps/dashboard/src/@/components/ui/chart.tsx

@@ -113,7 +113,10 @@ const ChartTooltipContent = React.forwardRef<
       indicator?: "line" | "dot" | "dashed";
       nameKey?: string;
       labelKey?: string;
-      valueFormatter?: (v: unknown) => string | undefined;
+      valueFormatter?: (
+        v: unknown,
+        payLoad: unknown,
+      ) => React.ReactNode | undefined;
     }
 >(
   (
@@ -183,7 +186,7 @@ const ChartTooltipContent = React.forwardRef<
       <div
         ref={ref}
         className={cn(
-          "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
+          "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-popover px-2.5 py-1.5 text-xs shadow-xl",
           className,
         )}
       >
@@ -233,7 +236,7 @@ const ChartTooltipContent = React.forwardRef<
                     )}
                     <div
                       className={cn(
-                        "flex flex-1 justify-between gap-2 leading-none",
+                        "flex flex-1 justify-between gap-5 leading-none",
                         nestLabel ? "items-end" : "items-center",
                       )}
                     >
@@ -243,10 +246,10 @@ const ChartTooltipContent = React.forwardRef<
                           {itemConfig?.label || item.name}
                         </span>
                       </div>
-                      {item.value && (
+                      {item.value !== undefined && (
                         <span className="font-medium font-mono text-foreground tabular-nums">
                           {valueFormatter
-                            ? valueFormatter(item.value) || item.value
+                            ? valueFormatter(item.value, item) || item.value
                             : item.value}
                         </span>
                       )}

apps/dashboard/src/@/components/ui/code/CodeBlockContainer.tsx

@@ -21,7 +21,7 @@ export function CodeBlockContainer(props: {
   return (
     <div
       className={cn(
-        "group relative max-w-full overflow-hidden rounded-lg border border-border bg-background",
+        "group relative max-w-full overflow-hidden rounded-lg border border-border bg-card",
         props.className,
       )}
     >

apps/dashboard/src/@/components/ui/image-upload.tsx

@@ -33,7 +33,7 @@ const ImageUpload = React.forwardRef<HTMLInputElement, ImageUploadProps>(
         <div
           {...getRootProps()}
           className={cn(
-            "group relative flex cursor-pointer flex-col items-center justify-center gap-1.5 overflow-hidden rounded-md border bg-card p-4 py-6 text-muted-foreground transition-all hover:border-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+            "group relative flex cursor-pointer flex-col items-center justify-center gap-1.5 overflow-hidden rounded-md border bg-background p-4 py-6 text-muted-foreground transition-all hover:border-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
             isDragActive ? "border-primary" : "border-input",
             !activeFile ? "w-full" : "min-h-32 min-w-32",
             className,

apps/dashboard/src/@/components/ui/input.tsx

@@ -11,7 +11,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-card px-3 py-2 text-sm ring-offset-background selection:bg-foreground selection:text-background file:border-0 file:bg-transparent file:font-medium file:text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background selection:bg-foreground selection:text-background file:border-0 file:bg-transparent file:font-medium file:text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
           className,
         )}
         ref={ref}

apps/dashboard/src/@/components/ui/pagination.tsx

@@ -63,11 +63,11 @@ const PaginationPrevious = ({
   <PaginationLink
     aria-label="Go to previous page"
     size="default"
-    className={cn("gap-1 pl-2.5", className)}
+    className={cn("h-10 gap-1 pl-2.5", className)}
     {...props}
   >
     <ChevronLeft className="h-4 w-4" />
-    <span>Previous</span>
+    <span className="max-sm:hidden">Previous</span>
   </PaginationLink>
 );
 PaginationPrevious.displayName = "PaginationPrevious";
@@ -79,10 +79,10 @@ const PaginationNext = ({
   <PaginationLink
     aria-label="Go to next page"
     size="default"
-    className={cn("gap-1 pr-2.5", className)}
+    className={cn("h-10 gap-1 pr-2.5", className)}
     {...props}
   >
-    <span>Next</span>
+    <span className="max-sm:hidden">Next</span>
     <ChevronRight className="h-4 w-4" />
   </PaginationLink>
 );

apps/dashboard/src/@/components/ui/radio-group.tsx

@@ -51,7 +51,7 @@ const RadioGroupItemButton = React.forwardRef<
     <RadioGroupPrimitive.Item
       ref={ref}
       className={cn(
-        "group flex min-w-32 cursor-pointer items-center space-x-3 space-y-0 rounded-lg border px-4 py-3 font-medium transition-all hover:border-foreground/25 hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 peer-hover:border-nonce data-[state=checked]:border-muted-foreground",
+        "group flex min-w-32 cursor-pointer items-center space-x-3 space-y-0 rounded-lg border px-4 py-3 font-medium transition-all hover:border-foreground/25 hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 peer-hover:border-nonce data-[state=checked]:border-muted-foreground",
         className,
       )}
       {...props}

apps/dashboard/src/@/components/ui/select.stories.tsx

@@ -31,7 +31,7 @@ function randomName() {
 
 function Component() {
   return (
-    <div className="flex min-h-screen flex-col gap-10 bg-background p-6 text-foreground">
+    <div className="flex min-h-dvh flex-col gap-10 bg-background p-6 text-foreground">
       <BadgeContainer label="5 items, no placeholder, no label, value filled">
         <SelectDemo listItems={5} selectFirst />
       </BadgeContainer>

apps/dashboard/src/@/components/ui/select.tsx

@@ -21,7 +21,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-10 w-full items-center justify-between gap-2 rounded-md border border-input bg-card px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "flex h-10 w-full items-center justify-between gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
       className,
     )}
     {...props}

apps/dashboard/src/@/components/ui/table.stories.tsx

@@ -114,7 +114,9 @@ function TableDemo(props: {
             <TableRow
               key={invoice.invoice}
               linkBox={props.linkBox}
-              className={cn(props.linkBox && "cursor-pointer hover:bg-muted")}
+              className={cn(
+                props.linkBox && "cursor-pointer hover:bg-accent/50",
+              )}
             >
               <TableCell className="font-medium">
                 <Link

apps/dashboard/src/@/components/ui/table.tsx

@@ -25,7 +25,8 @@ const TableHeader = React.forwardRef<
   <thead
     ref={ref}
     className={cn(
-      "border-border border-b bg-muted/50 [&_tr]:border-b",
+      "border-border border-b bg-background",
+      "sticky top-0 z-20 border-none before:absolute before:inset-0 before:border-border before:border-b",
       className,
     )}
     {...props}
@@ -53,7 +54,7 @@ const TableFooter = React.forwardRef<
   <tfoot
     ref={ref}
     className={cn(
-      "border-border border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      "border-border border-t bg-card font-medium [&>tr]:last:border-b-0",
       className,
     )}
     {...props}
@@ -125,10 +126,20 @@ const TableCaption = React.forwardRef<
 ));
 TableCaption.displayName = "TableCaption";
 
-function TableContainer(props: { children: React.ReactNode }) {
+function TableContainer(props: {
+  children: React.ReactNode;
+  className?: string;
+  scrollableContainerClassName?: string;
+}) {
   return (
     <ScrollShadow
-      className="relative whitespace-nowrap rounded-lg border border-border"
+      shadowClassName="z-30"
+      disableTopShadow
+      className={cn(
+        "relative whitespace-nowrap rounded-lg border border-border bg-card",
+        props.className,
+      )}
+      scrollableClassName={props.scrollableContainerClassName}
       shadowColor="hsl(var(--muted))"
     >
       {props.children}

apps/dashboard/src/@/components/ui/tabs.tsx

@@ -51,7 +51,7 @@ export function TabLinks(props: {
                   href={tab.href}
                   aria-disabled={tab.isDisabled}
                   className={cn(
-                    "relative h-auto rounded-lg px-3 font-normal text-muted-foreground text-sm hover:bg-muted lg:text-sm",
+                    "relative h-auto rounded-lg px-3 font-normal text-muted-foreground text-sm hover:bg-accent lg:text-sm",
                     !tab.isActive && !tab.isDisabled && "hover:text-foreground",
                     tab.isDisabled && "pointer-events-none",
                     tab.isActive && "!text-foreground",

apps/dashboard/src/@/components/ui/textarea.tsx

@@ -10,7 +10,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     return (
       <textarea
         className={cn(
-          "flex min-h-[80px] w-full rounded-md border border-input bg-card px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
           className,
         )}
         ref={ref}

apps/dashboard/src/@/components/ui/tooltip.tsx

@@ -36,6 +36,8 @@ export function ToolTipLabel(props: {
   leftIcon?: React.ReactNode;
   hoverable?: boolean;
   contentClassName?: string;
+  side?: "top" | "right" | "bottom" | "left";
+  align?: "center" | "start" | "end";
 }) {
   if (!props.label) {
     return props.children;
@@ -48,6 +50,8 @@ export function ToolTipLabel(props: {
           {props.children}
         </TooltipTrigger>
         <TooltipContent
+          side={props.side}
+          align={props.align}
           sideOffset={10}
           className={cn(
             "max-w-[400px] whitespace-normal leading-relaxed",

apps/dashboard/src/@/constants/env.ts

@@ -41,3 +41,6 @@ export const BASE_URL = isProd
       : "http://localhost:3000") || "https://thirdweb-dev.com";
 
 export const NEXT_PUBLIC_NEBULA_URL = process.env.NEXT_PUBLIC_NEBULA_URL;
+
+export const INSIGHT_SERVICE_API_KEY =
+  process.env.INSIGHT_SERVICE_API_KEY || "";

apps/dashboard/src/@/styles/globals.css

@@ -6,12 +6,12 @@
   :root,
   [data-theme="light"] {
     /* bg - neutral  */
-    --background: 0 0% 100%;
+    --background: 0 0% 98%;
     --popover: 0 0% 100%;
     --card: 0 0% 100%;
-    --secondary: 0 0% 92%;
-    --muted: 0 0% 95%;
-    --accent: 0 0% 95%;
+    --secondary: 0 0% 90%;
+    --muted: 0 0% 93%;
+    --accent: 0 0% 93%;
     --inverted: 0 0% 4%;
 
     /* bg - colorful */
@@ -34,9 +34,10 @@
     --destructive-text: 357.15deg 100% 68.72%;
 
     /* Borders */
-    --border: 0 0% 80%;
-    --input: 0 0% 80%;
-    --ring: 0 0% 85%;
+    --border: 0 0% 85%;
+    --active-border: 0 0% 70%;
+    --input: 0 0% 85%;
+    --ring: 0 0% 80%;
 
     /* Others */
     --radius: 0.5rem;
@@ -46,12 +47,12 @@
   [data-theme="dark"] {
     /* bg - neutral  */
     --background: 0 0% 0%;
-    --card: 0 0% 0%;
+    --card: 0 0% 3.92%;
     --popover: 0 0% 0%;
-    --secondary: 0 0% 10%;
-    --muted: 0 0% 9%;
-    --accent: 0 0% 9%;
-    --inverted: 0 0% 98%;
+    --secondary: 0 0% 11%;
+    --muted: 0 0% 11%;
+    --accent: 0 0% 11%;
+    --inverted: 0 0% 100%;
 
     /* bg - colorful */
     --primary: 221 83% 54%;
@@ -74,6 +75,7 @@
 
     /* Borders */
     --border: 0 0% 15%;
+    --active-border: 0 0% 22%;
     --ring: 0 0% 30%;
     --input: 0 0% 15%;
   }
@@ -157,10 +159,14 @@ input:-webkit-autofill:active {
   transition: background-color 5000s ease-in-out 0s;
 }
 
+.shiki,
+.shiki span {
+  background-color: transparent !important;
+}
+
 .dark .shiki,
 .dark .shiki span {
   color: var(--shiki-dark) !important;
-  background-color: var(--background) !important;
   /* Optional, if you also want font styles */
   font-style: var(--shiki-dark-font-style) !important;
   font-weight: var(--shiki-dark-font-weight) !important;

apps/dashboard/src/@3rdweb-sdk/react/cache-keys.ts

@@ -76,8 +76,8 @@ export const engineKeys = {
     [...engineKeys.all, address, "instances"] as const,
   backendWallets: (instance: string) =>
     [...engineKeys.all, instance, "backendWallets"] as const,
-  transactions: (instance: string) =>
-    [...engineKeys.all, instance, "transactions"] as const,
+  transactions: (instance: string, params: object) =>
+    [...engineKeys.all, instance, "transactions", params] as const,
   permissions: (instance: string) =>
     [...engineKeys.all, instance, "permissions"] as const,
   accessTokens: (instance: string) =>
@@ -95,7 +95,8 @@ export const engineKeys = {
   backendWallet: (address: string, chainId: number) =>
     ["backendWallet", address, chainId] as const,
   backendWalletBalance: (address: string, chainId: number) =>
-    [...engineKeys.backendWallet(address, chainId), "balance"] as const,
+    ["backendWallet", "balance", address, chainId] as const,
+  backendWalletBalanceAll: () => ["backendWallet", "balance"] as const,
   corsUrls: (instance: string) =>
     [...engineKeys.all, instance, "corsUrls"] as const,
   ipAllowlist: (instance: string) =>
@@ -124,4 +125,6 @@ export const engineKeys = {
     [...engineKeys.all, engineId, "alerts"] as const,
   notificationChannels: (engineId: string) =>
     [...engineKeys.all, engineId, "notificationChannels"] as const,
+  walletCredentials: (instance: string) =>
+    [...engineKeys.all, instance, "walletCredentials"] as const,
 };

apps/dashboard/src/@3rdweb-sdk/react/hooks/useApi.ts

@@ -1,6 +1,6 @@
+import { analyticsServerProxy, apiServerProxy } from "@/actions/proxies";
 import type { Team } from "@/api/team";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { THIRDWEB_ANALYTICS_API_HOST, THIRDWEB_API_HOST } from "constants/urls";
 import { useAllChainsData } from "hooks/chains/allChains";
 import { useActiveAccount } from "thirdweb/react";
 import type { UserOpStats } from "types/analytics";
@@ -39,6 +39,7 @@ export type Account = {
   id: string;
   isStaff: boolean;
   creatorWalletAddress: string;
+  image?: string | null;
   name?: string;
   email?: string;
   advancedEnabled: boolean;
@@ -216,19 +217,30 @@ export function useAccountCredits() {
   return useQuery({
     queryKey: accountKeys.credits(address || ""),
     queryFn: async () => {
-      const res = await fetch(`${THIRDWEB_API_HOST}/v1/account/credits`, {
+      type Result = {
+        data: BillingCredit[];
+        error?: { message: string };
+      };
+
+      const res = await apiServerProxy<Result>({
+        pathname: "/v1/account/credits",
         method: "GET",
         headers: {
           "Content-Type": "application/json",
         },
       });
-      const json = await res.json();
+
+      if (!res.ok) {
+        throw new Error(res.error);
+      }
+
+      const json = res.data;
 
       if (json.error) {
         throw new Error(json.error.message);
       }
 
-      const credits = (json.data as BillingCredit[]).filter(
+      const credits = json.data.filter(
         (credit) =>
           credit.remainingValueUsdCents > 0 &&
           (!credit.expiresAt || credit.expiresAt > new Date().toISOString()) &&
@@ -241,6 +253,8 @@ export function useAccountCredits() {
   });
 }
 
+type UserOpUsageQueryResult = (UserOpStats & { chainId?: string })[];
+
 async function getUserOpUsage(args: {
   clientId: string;
   from?: Date;
@@ -249,32 +263,35 @@ async function getUserOpUsage(args: {
 }) {
   const { clientId, from, to, period } = args;
 
-  const searchParams = new URLSearchParams();
-  searchParams.append("clientId", clientId);
+  const searchParams: Record<string, string> = {
+    clientId,
+  };
+
   if (from) {
-    searchParams.append("from", from.toISOString());
+    searchParams.from = from.toISOString();
   }
   if (to) {
-    searchParams.append("to", to.toISOString());
+    searchParams.to = to.toISOString();
   }
   if (period) {
-    searchParams.append("period", period);
+    searchParams.period = period;
   }
-  const res = await fetch(
-    `${THIRDWEB_ANALYTICS_API_HOST}/v1/user-ops?${searchParams.toString()}`,
-    {
-      method: "GET",
-      headers: {
-        "Content-Type": "application/json",
-      },
-    },
-  );
-  const json = await res.json();
 
-  if (res.status !== 200) {
-    throw new Error(json.message);
+  const res = await analyticsServerProxy<{ data: UserOpUsageQueryResult }>({
+    pathname: "/v1/user-ops",
+    method: "GET",
+    searchParams: searchParams,
+    headers: {
+      "Content-Type": "application/json",
+    },
+  });
+
+  if (!res.ok) {
+    throw new Error(res.error);
   }
 
+  const json = res.data;
+
   return json.data;
 }
 
@@ -297,13 +314,12 @@ export function useUserOpUsageAggregate(args: {
       "all",
     ),
     queryFn: async () => {
-      const userOpStats: (UserOpStats & { chainId?: string })[] =
-        await getUserOpUsage({
-          clientId,
-          from,
-          to,
-          period: "all",
-        });
+      const userOpStats = await getUserOpUsage({
+        clientId,
+        from,
+        to,
+        period: "all",
+      });
 
       // Aggregate stats across wallet types
       return userOpStats.reduce(
@@ -369,7 +385,13 @@ export function useUpdateAccount() {
 
   return useMutation({
     mutationFn: async (input: UpdateAccountInput) => {
-      const res = await fetch(`${THIRDWEB_API_HOST}/v1/account`, {
+      type Result = {
+        data: object;
+        error?: { message: string };
+      };
+
+      const res = await apiServerProxy<Result>({
+        pathname: "/v1/account",
         method: "PUT",
         headers: {
           "Content-Type": "application/json",
@@ -377,7 +399,11 @@ export function useUpdateAccount() {
         body: JSON.stringify(input),
       });
 
-      const json = await res.json();
+      if (!res.ok) {
+        throw new Error(res.error);
+      }
+
+      const json = res.data;
 
       if (json.error) {
         throw new Error(json.error.message);
@@ -400,15 +426,25 @@ export function useUpdateNotifications() {
 
   return useMutation({
     mutationFn: async (input: UpdateAccountNotificationsInput) => {
-      const res = await fetch(`${THIRDWEB_API_HOST}/v1/account/notifications`, {
-        method: "PUT",
+      type Result = {
+        data: object;
+        error?: { message: string };
+      };
 
+      const res = await apiServerProxy<Result>({
+        pathname: "/v1/account/notifications",
+        method: "PUT",
         headers: {
           "Content-Type": "application/json",
         },
         body: JSON.stringify({ preferences: input }),
       });
-      const json = await res.json();
+
+      if (!res.ok) {
+        throw new Error(res.error);
+      }
+
+      const json = res.data;
 
       if (json.error) {
         throw new Error(json.error.message);
@@ -430,21 +466,31 @@ export function useConfirmEmail() {
 
   return useMutation({
     mutationFn: async (input: ConfirmEmailInput) => {
-      const res = await fetch(`${THIRDWEB_API_HOST}/v1/account/confirmEmail`, {
-        method: "PUT",
+      type Result = {
+        error?: { message: string };
+        data: { team: Team; account: Account };
+      };
 
+      const res = await apiServerProxy<Result>({
+        pathname: "/v1/account/confirmEmail",
+        method: "PUT",
         headers: {
           "Content-Type": "application/json",
         },
         body: JSON.stringify(input),
       });
-      const json = await res.json();
+
+      if (!res.ok) {
+        throw new Error(res.error);
+      }
+
+      const json = res.data;
 
       if (json.error) {
         throw new Error(json.error.message);
       }
 
-      return json.data as { team: Team; account: Account };
+      return json.data;
     },
     onSuccess: async () => {
       // invalidate related cache, since could be relinking account
@@ -469,18 +515,25 @@ export function useResendEmailConfirmation() {
 
   return useMutation({
     mutationFn: async () => {
-      const res = await fetch(
-        `${THIRDWEB_API_HOST}/v1/account/resendEmailConfirmation`,
-        {
-          method: "POST",
+      type Result = {
+        error?: { message: string };
+        data: object;
+      };
 
-          headers: {
-            "Content-Type": "application/json",
-          },
-          body: JSON.stringify({}),
+      const res = await apiServerProxy<Result>({
+        pathname: "/v1/account/resendEmailConfirmation",
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
         },
-      );
-      const json = await res.json();
+        body: JSON.stringify({}),
+      });
+
+      if (!res.ok) {
+        throw new Error(res.error);
+      }
+
+      const json = res.data;
 
       if (json.error) {
         throw new Error(json.error.message);
@@ -496,52 +549,38 @@ export function useResendEmailConfirmation() {
   });
 }
 
-export function useApiKeys(props: {
-  isLoggedIn: boolean;
-}) {
-  const address = useActiveAccount()?.address;
-  return useQuery({
-    queryKey: apiKeys.keys(address || ""),
-    queryFn: async () => {
-      const res = await fetch(`${THIRDWEB_API_HOST}/v1/keys`, {
-        method: "GET",
-        headers: {
-          "Content-Type": "application/json",
-        },
-      });
-      const json = await res.json();
-
-      if (json.error) {
-        throw new Error(json.error.message);
-      }
-      return json.data as ApiKey[];
-    },
-    enabled: !!address && props.isLoggedIn,
-  });
-}
-
 export function useCreateApiKey() {
   const address = useActiveAccount()?.address;
   const queryClient = useQueryClient();
 
   return useMutation({
     mutationFn: async (input: CreateKeyInput) => {
-      const res = await fetch(`${THIRDWEB_API_HOST}/v1/keys`, {
+      type Result = {
+        data: ApiKey;
+        error?: { message: string };
+      };
+
+      const res = await apiServerProxy<Result>({
+        pathname: "/v1/keys",
         method: "POST",
         headers: {
           "Content-Type": "application/json",
         },
         body: JSON.stringify(input),
       });
-      const json = await res.json();
+
+      if (!res.ok) {
+        throw new Error(res.error);
+      }
+
+      const json = res.data;
 
       if (json.error) {
         throw new Error(json.error.message);
       }
 
-      return json.data as ApiKey;
+      return json.data;
     },
-
     onSuccess: () => {
       return queryClient.invalidateQueries({
         queryKey: apiKeys.keys(address || ""),
@@ -556,16 +595,25 @@ export function useUpdateApiKey() {
 
   return useMutation({
     mutationFn: async (input: UpdateKeyInput) => {
-      const res = await fetch(`${THIRDWEB_API_HOST}/v1/keys/${input.id}`, {
-        method: "PUT",
+      type Result = {
+        data: ApiKey;
+        error?: { message: string };
+      };
 
+      const res = await apiServerProxy<Result>({
+        pathname: `/v1/keys/${input.id}`,
+        method: "PUT",
         headers: {
           "Content-Type": "application/json",
         },
         body: JSON.stringify(input),
       });
 
-      const json = await res.json();
+      if (!res.ok) {
+        throw new Error(res.error);
+      }
+
+      const json = res.data;
 
       if (json.error) {
         throw new Error(json.error.message);
@@ -587,14 +635,25 @@ export function useRevokeApiKey() {
 
   return useMutation({
     mutationFn: async (id: string) => {
-      const res = await fetch(`${THIRDWEB_API_HOST}/v1/keys/${id}/revoke`, {
+      type Result = {
+        data: ApiKey;
+        error?: { message: string };
+      };
+
+      const res = await apiServerProxy<Result>({
+        pathname: `/v1/keys/${id}/revoke`,
         method: "POST",
         headers: {
           "Content-Type": "application/json",
         },
         body: JSON.stringify({}),
       });
-      const json = await res.json();
+
+      if (!res.ok) {
+        throw new Error(res.error);
+      }
+
+      const json = res.data;
 
       if (json.error) {
         throw new Error(json.error.message);
@@ -614,21 +673,35 @@ export const usePolicies = (serviceId?: string) => {
   return useQuery({
     queryKey: ["policies", serviceId],
     queryFn: async () => {
-      const res = await fetch(
-        `${THIRDWEB_API_HOST}/v1/policies?serviceId=${serviceId}`,
-        {
-          method: "GET",
+      if (!serviceId) {
+        throw new Error();
+      }
 
-          headers: {
-            "Content-Type": "application/json",
-          },
+      type Result = {
+        data: ApiKeyServicePolicy;
+        error?: { message: string };
+      };
+
+      const res = await apiServerProxy<Result>({
+        pathname: "/v1/policies",
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
         },
-      );
-      const json = await res.json();
+        searchParams: {
+          serviceId,
+        },
+      });
+
+      if (!res.ok) {
+        throw new Error(res.error);
+      }
+
+      const json = res.data;
       if (json.error) {
         throw new Error(json.error.message);
       }
-      return json.data as ApiKeyServicePolicy;
+      return json.data;
     },
     enabled: !!serviceId,
   });
@@ -641,9 +714,14 @@ export const useUpdatePolicies = () => {
       serviceId: string;
       data: ApiKeyServicePolicy;
     }) => {
-      const res = await fetch(`${THIRDWEB_API_HOST}/v1/policies`, {
-        method: "POST",
+      type Result = {
+        data: ApiKeyServicePolicy;
+        error?: { message: string };
+      };
 
+      const res = await apiServerProxy<Result>({
+        pathname: "/v1/policies",
+        method: "POST",
         headers: {
           "Content-Type": "application/json",
         },
@@ -652,11 +730,16 @@ export const useUpdatePolicies = () => {
           data: input.data,
         }),
       });
-      const json = await res.json();
+
+      if (!res.ok) {
+        throw new Error(res.error);
+      }
+
+      const json = res.data;
       if (json.error) {
         throw new Error(json.error.message);
       }
-      return json.data as ApiKeyServicePolicy;
+      return json.data;
     },
     onSuccess: (_, variables) => {
       return queryClient.invalidateQueries({
@@ -673,19 +756,25 @@ export function useRevokeAuthorizedWallet() {
   return useMutation({
     mutationFn: async (variables: { authorizedWalletId: string }) => {
       const { authorizedWalletId } = variables;
+      type Result = {
+        data: object;
+        error?: { message: string };
+      };
 
-      const res = await fetch(
-        `${THIRDWEB_API_HOST}/v1/authorized-wallets/${authorizedWalletId}/revoke`,
-        {
-          method: "POST",
-
-          headers: {
-            "Content-Type": "application/json",
-          },
-          body: JSON.stringify({}),
+      const res = await apiServerProxy<Result>({
+        pathname: `/v1/authorized-wallets/${authorizedWalletId}/revoke`,
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
         },
-      );
-      const json = await res.json();
+        body: JSON.stringify({}),
+      });
+
+      if (!res.ok) {
+        throw new Error(res.error);
+      }
+
+      const json = res.data;
 
       if (json.error) {
         throw new Error(json.error.message);
@@ -706,20 +795,30 @@ export function useAuthorizedWallets() {
   return useQuery({
     queryKey: authorizedWallets.authorizedWallets(address || ""),
     queryFn: async () => {
-      const res = await fetch(`${THIRDWEB_API_HOST}/v1/authorized-wallets`, {
-        method: "GET",
+      type Result = {
+        data: AuthorizedWallet[];
+        error?: { message: string };
+      };
 
+      const res = await apiServerProxy<Result>({
+        pathname: "/v1/authorized-wallets",
+        method: "GET",
         headers: {
           "Content-Type": "application/json",
         },
       });
-      const json = await res.json();
+
+      if (!res.ok) {
+        throw new Error(res.error);
+      }
+
+      const json = res.data;
 
       if (json.error) {
         throw new Error(json.error.message);
       }
 
-      return json.data as AuthorizedWallet[];
+      return json.data;
     },
     enabled: !!address,
     gcTime: 0,

apps/dashboard/src/@3rdweb-sdk/react/hooks/useContractRoles.ts

@@ -1,7 +1,6 @@
 import { type ThirdwebContract, ZERO_ADDRESS } from "thirdweb";
 import { hasRole } from "thirdweb/extensions/permissions";
 import { useActiveAccount, useReadContract } from "thirdweb/react";
-import type { RequiredParam } from "utils/types";
 
 export function useIsAdmin(contract: ThirdwebContract, failOpen = true) {
   const address = useActiveAccount()?.address;
@@ -19,7 +18,7 @@ export function useIsAdmin(contract: ThirdwebContract, failOpen = true) {
 
 export function useIsAdminOrSelf(
   contract: ThirdwebContract,
-  self: RequiredParam<string>,
+  self: string | null | undefined,
 ) {
   const address = useActiveAccount()?.address;
   const isAdmin = useIsAdmin(contract);

apps/dashboard/src/@3rdweb-sdk/react/hooks/useEngine.ts

@@ -1,12 +1,18 @@
 "use client";
 
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { apiServerProxy } from "@/actions/proxies";
+import {
+  keepPreviousData,
+  useMutation,
+  useQuery,
+  useQueryClient,
+} from "@tanstack/react-query";
 import type { ResultItem } from "app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/metrics/components/StatusCodes";
-import { THIRDWEB_API_HOST } from "constants/urls";
 import type { EngineBackendWalletType } from "lib/engine";
 import { useState } from "react";
-import { useActiveAccount, useActiveWalletChain } from "thirdweb/react";
+import { useActiveAccount } from "thirdweb/react";
 import invariant from "tiny-invariant";
+import type { EngineStatus } from "../../../app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/transactions-table";
 import { engineKeys } from "../cache-keys";
 
 export type EngineTier = "STARTER" | "PREMIUM" | "ENTERPRISE";
@@ -47,37 +53,6 @@ const getEngineRequestHeaders = (token: string | null): HeadersInit => {
   };
 };
 
-// TODO - add authToken in queryKey instead
-export function useEngineInstances() {
-  const address = useActiveAccount()?.address;
-  return useQuery({
-    queryKey: engineKeys.instances(address || ""),
-    queryFn: async (): Promise<EngineInstance[]> => {
-      const res = await fetch(`${THIRDWEB_API_HOST}/v1/engine`, {
-        method: "GET",
-      });
-      if (!res.ok) {
-        throw new Error(`Unexpected status ${res.status}: ${await res.text()}`);
-      }
-
-      const json = await res.json();
-      const instances = (json.data?.instances as EngineInstance[]) || [];
-
-      return instances.map((instance) => {
-        // Sanitize: Add trailing slash if not present.
-        const url = instance.url.endsWith("/")
-          ? instance.url
-          : `${instance.url}/`;
-        return {
-          ...instance,
-          url,
-        };
-      });
-    },
-    enabled: !!address,
-  });
-}
-
 // GET Requests
 export type BackendWallet = {
   address: string;
@@ -98,7 +73,7 @@ export function useEngineBackendWallets(params: {
 }) {
   const { instanceUrl, authToken } = params;
   return useQuery({
-    queryKey: [engineKeys.backendWallets(instanceUrl), authToken],
+    queryKey: [...engineKeys.backendWallets(instanceUrl), authToken],
     queryFn: async () => {
       const res = await fetch(`${instanceUrl}backend-wallet/get-all?limit=50`, {
         method: "GET",
@@ -118,7 +93,8 @@ type EngineFeature =
   | "CONTRACT_SUBSCRIPTIONS"
   | "IP_ALLOWLIST"
   | "HETEROGENEOUS_WALLET_TYPES"
-  | "SMART_BACKEND_WALLETS";
+  | "SMART_BACKEND_WALLETS"
+  | "WALLET_CREDENTIALS";
 
 interface EngineSystemHealth {
   status: string;
@@ -210,16 +186,19 @@ export function useEngineGetDeploymentPublicConfiguration(
   return useQuery<DeploymentPublicConfigurationResponse>({
     queryKey: engineKeys.deploymentPublicConfiguration(),
     queryFn: async () => {
-      const res = await fetch(
-        `${THIRDWEB_API_HOST}/v1/teams/${input.teamSlug}/engine/deployments/public-configuration`,
-        { method: "GET" },
-      );
+      const res = await apiServerProxy<{
+        data: DeploymentPublicConfigurationResponse;
+      }>({
+        pathname: `/v1/teams/${input.teamSlug}/engine/deployments/public-configuration`,
+        method: "GET",
+      });
+
       if (!res.ok) {
-        throw new Error(`Unexpected status ${res.status}: ${await res.text()}`);
+        throw new Error(res.error);
       }
 
-      const json = await res.json();
-      return json.data as DeploymentPublicConfigurationResponse;
+      const json = res.data;
+      return json.data;
     },
   });
 }
@@ -233,22 +212,19 @@ interface UpdateDeploymentInput {
 export function useEngineUpdateDeployment() {
   return useMutation({
     mutationFn: async (input: UpdateDeploymentInput) => {
-      const res = await fetch(
-        `${THIRDWEB_API_HOST}/v1/teams/${input.teamSlug}/engine/deployments/${input.deploymentId}`,
-        {
-          method: "PUT",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          body: JSON.stringify({
-            serverVersion: input.serverVersion,
-          }),
+      const res = await apiServerProxy({
+        pathname: `/v1/teams/${input.teamSlug}/engine/deployments/${input.deploymentId}`,
+        method: "PUT",
+        headers: {
+          "Content-Type": "application/json",
         },
-      );
-      // we never use the response body
-      res.body?.cancel();
+        body: JSON.stringify({
+          serverVersion: input.serverVersion,
+        }),
+      });
+
       if (!res.ok) {
-        throw new Error(`Unexpected status ${res.status}: ${await res.text()}`);
+        throw new Error(res.error);
       }
     },
   });
@@ -262,13 +238,13 @@ export function useEngineRemoveFromDashboard() {
     mutationFn: async (instanceId: string) => {
       invariant(instanceId, "instance is required");
 
-      const res = await fetch(`${THIRDWEB_API_HOST}/v1/engine/${instanceId}`, {
+      const res = await apiServerProxy({
+        pathname: `/v1/engine/${instanceId}`,
         method: "DELETE",
       });
-      // we never use the response body
-      res.body?.cancel();
+
       if (!res.ok) {
-        throw new Error(`Unexpected status ${res.status}: ${await res.text()}`);
+        throw new Error(res.error);
       }
     },
 
@@ -296,20 +272,17 @@ export function useEngineDeleteCloudHosted() {
       reason,
       feedback,
     }: DeleteCloudHostedInput) => {
-      const res = await fetch(
-        `${THIRDWEB_API_HOST}/v2/engine/deployments/${deploymentId}/infrastructure/delete`,
-        {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          body: JSON.stringify({ reason, feedback }),
+      const res = await apiServerProxy({
+        pathname: `/v2/engine/deployments/${deploymentId}/infrastructure/delete`,
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
         },
-      );
-      // we never use the response body
-      res.body?.cancel();
+        body: JSON.stringify({ reason, feedback }),
+      });
+
       if (!res.ok) {
-        throw new Error(`Unexpected status ${res.status}: ${await res.text()}`);
+        throw new Error(res.error);
       }
     },
 
@@ -333,21 +306,19 @@ export function useEngineEditInstance() {
 
   return useMutation({
     mutationFn: async ({ instanceId, name, url }: EditEngineInstanceInput) => {
-      const res = await fetch(`${THIRDWEB_API_HOST}/v1/engine/${instanceId}`, {
+      const res = await apiServerProxy({
+        pathname: `/v1/engine/${instanceId}`,
         method: "PUT",
-
         headers: {
           "Content-Type": "application/json",
         },
         body: JSON.stringify({ name, url }),
       });
-      // we never use the response body
-      res.body?.cancel();
+
       if (!res.ok) {
-        throw new Error(`Unexpected status ${res.status}: ${await res.text()}`);
+        throw new Error(res.error);
       }
     },
-
     onSuccess: () => {
       return queryClient.invalidateQueries({
         queryKey: engineKeys.instances(address || ""),
@@ -419,13 +390,29 @@ export function useEngineTransactions(params: {
   instanceUrl: string;
   autoUpdate: boolean;
   authToken: string;
+  queryParams?: {
+    limit?: number;
+    page?: number;
+    status?: EngineStatus;
+  };
 }) {
   const { instanceUrl, autoUpdate, authToken } = params;
 
   return useQuery({
-    queryKey: engineKeys.transactions(instanceUrl),
+    queryKey: engineKeys.transactions(instanceUrl, params),
     queryFn: async () => {
-      const res = await fetch(`${instanceUrl}transaction/get-all`, {
+      const url = new URL(`${instanceUrl}transaction/get-all`);
+      if (params.queryParams) {
+        for (const key in params.queryParams) {
+          const value =
+            params.queryParams[key as keyof typeof params.queryParams];
+          if (value !== undefined) {
+            url.searchParams.append(key, value.toString());
+          }
+        }
+      }
+
+      const res = await fetch(url, {
         method: "GET",
         headers: getEngineRequestHeaders(authToken),
       });
@@ -434,8 +421,8 @@ export function useEngineTransactions(params: {
 
       return (json.result as TransactionResponse) || {};
     },
-    enabled: !!instanceUrl,
     refetchInterval: autoUpdate ? 4_000 : false,
+    placeholderData: keepPreviousData,
   });
 }
 
@@ -483,12 +470,12 @@ export function useEngineBackendWalletBalance(params: {
   instanceUrl: string;
   address: string;
   authToken: string;
+  chainId: number;
 }) {
-  const { instanceUrl, address, authToken } = params;
-  const chainId = useActiveWalletChain()?.id;
+  const { instanceUrl, address, authToken, chainId } = params;
 
   return useQuery({
-    queryKey: engineKeys.backendWalletBalance(address, chainId || 1),
+    queryKey: engineKeys.backendWalletBalance(address, chainId),
     queryFn: async () => {
       invariant(chainId, "chainId is required");
 
@@ -874,6 +861,10 @@ export type SetWalletConfigInput =
       gcpKmsKeyRingId: string;
       gcpApplicationCredentialEmail: string;
       gcpApplicationCredentialPrivateKey: string;
+    }
+  | {
+      type: "circle";
+      circleApiKey: string;
     };
 
 export function useEngineSetWalletConfig(params: {
@@ -883,8 +874,8 @@ export function useEngineSetWalletConfig(params: {
   const { instanceUrl, authToken } = params;
   const queryClient = useQueryClient();
 
-  return useMutation<WalletConfigResponse, void, SetWalletConfigInput>({
-    mutationFn: async (input) => {
+  return useMutation({
+    mutationFn: async (input: SetWalletConfigInput) => {
       invariant(instanceUrl, "instance is required");
 
       const res = await fetch(`${instanceUrl}configuration/wallets`, {
@@ -898,7 +889,7 @@ export function useEngineSetWalletConfig(params: {
         throw new Error(json.error.message);
       }
 
-      return json.result;
+      return json.result as WalletConfigResponse;
     },
     onSuccess: () => {
       return queryClient.invalidateQueries({
@@ -908,10 +899,17 @@ export function useEngineSetWalletConfig(params: {
   });
 }
 
-export type CreateBackendWalletInput = {
-  type: EngineBackendWalletType;
-  label?: string;
-};
+export type CreateBackendWalletInput =
+  | {
+      type: Exclude<EngineBackendWalletType, "circle" | "smart:circle">;
+      label?: string;
+    }
+  | {
+      type: "circle" | "smart:circle";
+      label?: string;
+      credentialId: string;
+      isTestnet: boolean;
+    };
 
 export function useEngineCreateBackendWallet(params: {
   instanceUrl: string;
@@ -1675,14 +1673,16 @@ export function useEngineSystemMetrics(engineId: string) {
   return useQuery({
     queryKey: engineKeys.systemMetrics(engineId),
     queryFn: async () => {
-      const res = await fetch(
-        `${THIRDWEB_API_HOST}/v1/engine/${engineId}/metrics`,
-      );
+      const res = await apiServerProxy({
+        method: "GET",
+        pathname: `/v1/engine/${engineId}/metrics`,
+      });
+
       if (!res.ok) {
         setEnabled(false);
-        throw new Error(`Unexpected status ${res.status}: ${await res.text()}`);
+        throw new Error(res.error);
       }
-      const json = (await res.json()) as EngineResourceMetrics;
+      const json = res.data as EngineResourceMetrics;
       return json;
     },
 
@@ -1708,16 +1708,19 @@ export function useEngineAlertRules(engineId: string) {
   return useQuery({
     queryKey: engineKeys.alertRules(engineId),
     queryFn: async () => {
-      const res = await fetch(
-        `${THIRDWEB_API_HOST}/v1/engine/${engineId}/alert-rules`,
-        { method: "GET" },
-      );
+      const res = await apiServerProxy<{
+        data: EngineAlertRule[];
+      }>({
+        pathname: `/v1/engine/${engineId}/alert-rules`,
+        method: "GET",
+      });
+
       if (!res.ok) {
-        throw new Error(`Unexpected status ${res.status}: ${await res.text()}`);
+        throw new Error(res.error);
       }
 
-      const json = await res.json();
-      return json.data as EngineAlertRule[];
+      const json = res.data;
+      return json.data;
     },
   });
 }
@@ -1734,16 +1737,23 @@ export function useEngineAlerts(engineId: string, limit: number, offset = 0) {
   return useQuery({
     queryKey: engineKeys.alerts(engineId),
     queryFn: async () => {
-      const res = await fetch(
-        `${THIRDWEB_API_HOST}/v1/engine/${engineId}/alerts?limit=${limit}&offset=${offset}`,
-        { method: "GET" },
-      );
+      const res = await apiServerProxy<{
+        data: EngineAlert[];
+      }>({
+        pathname: `/v1/engine/${engineId}/alerts`,
+        searchParams: {
+          limit: `${limit}`,
+          offset: `${offset}`,
+        },
+        method: "GET",
+      });
+
       if (!res.ok) {
-        throw new Error(`Unexpected status ${res.status}: ${await res.text()}`);
+        throw new Error(res.error);
       }
 
-      const json = await res.json();
-      return json.data as EngineAlert[];
+      const json = res.data;
+      return json.data;
     },
   });
 }
@@ -1778,16 +1788,19 @@ export function useEngineNotificationChannels(engineId: string) {
   return useQuery({
     queryKey: engineKeys.notificationChannels(engineId),
     queryFn: async () => {
-      const res = await fetch(
-        `${THIRDWEB_API_HOST}/v1/engine/${engineId}/notification-channels`,
-        { method: "GET" },
-      );
+      const res = await apiServerProxy<{
+        data: EngineNotificationChannel[];
+      }>({
+        pathname: `/v1/engine/${engineId}/notification-channels`,
+        method: "GET",
+      });
+
       if (!res.ok) {
-        throw new Error(`Unexpected status ${res.status}: ${await res.text()}`);
+        throw new Error(res.error);
       }
 
-      const json = await res.json();
-      return json.data as EngineNotificationChannel[];
+      const json = res.data;
+      return json.data;
     },
   });
 }
@@ -1803,22 +1816,23 @@ export function useEngineCreateNotificationChannel(engineId: string) {
 
   return useMutation({
     mutationFn: async (input: CreateNotificationChannelInput) => {
-      const res = await fetch(
-        `${THIRDWEB_API_HOST}/v1/engine/${engineId}/notification-channels`,
-        {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          body: JSON.stringify(input),
+      const res = await apiServerProxy<{
+        data: EngineNotificationChannel;
+      }>({
+        pathname: `/v1/engine/${engineId}/notification-channels`,
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
         },
-      );
+        body: JSON.stringify(input),
+      });
+
       if (!res.ok) {
-        throw new Error(`Unexpected status ${res.status}: ${await res.text()}`);
+        throw new Error(res.error);
       }
 
-      const json = await res.json();
-      return json.data as EngineNotificationChannel;
+      const json = res.data;
+      return json.data;
     },
     onSuccess: () => {
       return queryClient.invalidateQueries({
@@ -1833,16 +1847,14 @@ export function useEngineDeleteNotificationChannel(engineId: string) {
 
   return useMutation({
     mutationFn: async (notificationChannelId: string) => {
-      const res = await fetch(
-        `${THIRDWEB_API_HOST}/v1/engine/${engineId}/notification-channels/${notificationChannelId}`,
-        {
-          method: "DELETE",
-        },
-      );
+      const res = await apiServerProxy({
+        pathname: `/v1/engine/${engineId}/notification-channels/${notificationChannelId}`,
+        method: "DELETE",
+      });
+
       if (!res.ok) {
-        throw new Error(`Unexpected status ${res.status}: ${await res.text()}`);
+        throw new Error(res.error);
       }
-      res.body?.cancel();
     },
     onSuccess: () => {
       return queryClient.invalidateQueries({
@@ -1851,3 +1863,118 @@ export function useEngineDeleteNotificationChannel(engineId: string) {
     },
   });
 }
+
+export interface WalletCredential {
+  id: string;
+  type: string;
+  label: string;
+  isDefault: boolean | null;
+  createdAt: string;
+  updatedAt: string;
+}
+
+interface CreateWalletCredentialInput {
+  type: "circle";
+  label: string;
+  entitySecret?: string;
+  isDefault?: boolean;
+}
+
+export function useEngineWalletCredentials(params: {
+  instanceUrl: string;
+  authToken: string;
+  page?: number;
+  limit?: number;
+}) {
+  const { instanceUrl, authToken, page = 1, limit = 100 } = params;
+
+  return useQuery({
+    queryKey: [...engineKeys.walletCredentials(instanceUrl), page, limit],
+    queryFn: async () => {
+      const res = await fetch(
+        `${instanceUrl}wallet-credentials?page=${page}&limit=${limit}`,
+        {
+          method: "GET",
+          headers: getEngineRequestHeaders(authToken),
+        },
+      );
+
+      const json = await res.json();
+      return (json.result as WalletCredential[]) || [];
+    },
+    enabled: !!instanceUrl,
+  });
+}
+
+export function useEngineCreateWalletCredential(params: {
+  instanceUrl: string;
+  authToken: string;
+}) {
+  const { instanceUrl, authToken } = params;
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (input: CreateWalletCredentialInput) => {
+      invariant(instanceUrl, "instance is required");
+
+      const res = await fetch(`${instanceUrl}wallet-credentials`, {
+        method: "POST",
+        headers: getEngineRequestHeaders(authToken),
+        body: JSON.stringify(input),
+      });
+      const json = await res.json();
+
+      if (json.error) {
+        throw new Error(json.error.message);
+      }
+
+      return json.result as WalletCredential;
+    },
+    onSuccess: () => {
+      return queryClient.invalidateQueries({
+        queryKey: engineKeys.walletCredentials(instanceUrl),
+      });
+    },
+  });
+}
+
+interface UpdateWalletCredentialInput {
+  label?: string;
+  isDefault?: boolean;
+  entitySecret?: string;
+}
+
+export function useEngineUpdateWalletCredential(params: {
+  instanceUrl: string;
+  authToken: string;
+}) {
+  const { instanceUrl, authToken } = params;
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({
+      id,
+      ...input
+    }: UpdateWalletCredentialInput & { id: string }) => {
+      invariant(instanceUrl, "instance is required");
+
+      const res = await fetch(`${instanceUrl}wallet-credentials/${id}`, {
+        method: "PUT",
+        headers: getEngineRequestHeaders(authToken),
+        body: JSON.stringify(input),
+      });
+      const json = await res.json();
+
+      if (json.error) {
+        throw new Error(json.error.message);
+      }
+
+      return json.result as WalletCredential;
+    },
+    onSuccess: () => {
+      return queryClient.invalidateQueries({
+        queryKey: engineKeys.walletCredentials(instanceUrl),
+      });
+    },
+  });
+}

apps/dashboard/src/@3rdweb-sdk/react/hooks/useSplit.ts

@@ -1,47 +1,36 @@
+import { getTokenBalancesFromMoralis } from "@/actions/getBalancesFromMoralis";
 import {
   queryOptions,
   useMutation,
   useQuery,
   useQueryClient,
 } from "@tanstack/react-query";
-import type {
-  BalanceQueryRequest,
-  BalanceQueryResponse,
-} from "pages/api/moralis/balances";
 import { toast } from "sonner";
 import { type ThirdwebContract, sendAndConfirmTransaction } from "thirdweb";
 import { distribute, distributeByToken } from "thirdweb/extensions/split";
 import { useActiveAccount } from "thirdweb/react";
 import invariant from "tiny-invariant";
 
-async function getSplitBalances(contract: ThirdwebContract) {
-  const query = await fetch("/api/moralis/balances", {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-    },
-    body: JSON.stringify({
-      chainId: contract.chain.id,
-      address: contract.address,
-    } as BalanceQueryRequest),
-  });
-
-  if (query.status >= 400) {
-    throw new Error(await query.json().then((r) => r.error));
-  }
-  return query.json() as Promise<BalanceQueryResponse>;
-}
-
-function getQuery(contract: ThirdwebContract) {
+function getTokenBalancesQuery(contract: ThirdwebContract) {
   return queryOptions({
     queryKey: ["split-balances", contract.chain.id, contract.address],
-    queryFn: () => getSplitBalances(contract),
+    queryFn: async () => {
+      const res = await getTokenBalancesFromMoralis({
+        chainId: contract.chain.id,
+        contractAddress: contract.address,
+      });
+
+      if (!res.data) {
+        throw new Error(res.error);
+      }
+      return res.data;
+    },
     retry: false,
   });
 }
 
 export function useSplitBalances(contract: ThirdwebContract) {
-  return useQuery(getQuery(contract));
+  return useQuery(getTokenBalancesQuery(contract));
 }
 
 export function useSplitDistributeFunds(contract: ThirdwebContract) {
@@ -53,8 +42,8 @@ export function useSplitDistributeFunds(contract: ThirdwebContract) {
       invariant(account, "No active account");
       const balances =
         // get the cached data if it exists, otherwise fetch it
-        queryClient.getQueryData(getQuery(contract).queryKey) ||
-        (await queryClient.fetchQuery(getQuery(contract)));
+        queryClient.getQueryData(getTokenBalancesQuery(contract).queryKey) ||
+        (await queryClient.fetchQuery(getTokenBalancesQuery(contract)));
 
       const distributions = balances
         .filter((token) => token.display_balance !== "0.0")
@@ -80,7 +69,7 @@ export function useSplitDistributeFunds(contract: ThirdwebContract) {
       return await Promise.all(distributions);
     },
     onSettled: () => {
-      queryClient.invalidateQueries(getQuery(contract));
+      queryClient.invalidateQueries(getTokenBalancesQuery(contract));
     },
   });
 }

apps/dashboard/src/@3rdweb-sdk/react/hooks/useWalletNFTs.ts

@@ -1,5 +1,6 @@
+import { getWalletNFTs } from "@/actions/getWalletNFTs";
 import { useQuery } from "@tanstack/react-query";
-import type { WalletNFTApiReturn } from "pages/api/wallet/nfts/[chainId]";
+import invariant from "tiny-invariant";
 
 export function useWalletNFTs(params: {
   chainId: number;
@@ -8,10 +9,11 @@ export function useWalletNFTs(params: {
   return useQuery({
     queryKey: ["walletNfts", params.chainId, params.walletAddress],
     queryFn: async () => {
-      const response = await fetch(
-        `/api/wallet/nfts/${params.chainId}?owner=${params.walletAddress}`,
-      );
-      return (await response.json()) as WalletNFTApiReturn;
+      invariant(params.walletAddress, "walletAddress is required");
+      return getWalletNFTs({
+        chainId: params.chainId,
+        owner: params.walletAddress,
+      });
     },
     enabled: !!params.walletAddress,
   });

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/FaucetButton.tsx

@@ -1,13 +1,32 @@
 "use client";
+import { CopyTextButton } from "@/components/ui/CopyTextButton";
 import { Spinner } from "@/components/ui/Spinner/Spinner";
 import { Button } from "@/components/ui/button";
-import { Form, FormControl, FormField, FormItem } from "@/components/ui/form";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
 import {
   THIRDWEB_ENGINE_FAUCET_WALLET,
   TURNSTILE_SITE_KEY,
 } from "@/constants/env";
 import { useThirdwebClient } from "@/constants/thirdweb.client";
+import { CustomConnectWallet } from "@3rdweb-sdk/react/components/connect-wallet";
 import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
+import { zodResolver } from "@hookform/resolvers/zod";
 import { Turnstile } from "@marsidev/react-turnstile";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import type { CanClaimResponseType } from "app/api/testnet-faucet/can-claim/CanClaimResponseType";
@@ -17,9 +36,21 @@ import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
-import { toUnits } from "thirdweb";
+import {
+  type ThirdwebClient,
+  prepareTransaction,
+  toUnits,
+  toWei,
+} from "thirdweb";
 import type { ChainMetadata } from "thirdweb/chains";
-import { useActiveAccount, useWalletBalance } from "thirdweb/react";
+import type { Chain } from "thirdweb/chains";
+import {
+  useActiveAccount,
+  useActiveWalletChain,
+  useSendTransaction,
+  useSwitchActiveWalletChain,
+  useWalletBalance,
+} from "thirdweb/react";
 import { z } from "zod";
 import { isOnboardingComplete } from "../../../../../../login/onboarding/isOnboardingRequired";
 
@@ -137,6 +168,35 @@ export function FaucetButton({
 
   const form = useForm<z.infer<typeof claimFaucetSchema>>();
 
+  // loading state
+  if (faucetWalletBalanceQuery.isPending || canClaimFaucetQuery.isPending) {
+    return (
+      <Button variant="outline" className="w-full gap-2">
+        Checking Faucet <Spinner className="size-3" />
+      </Button>
+    );
+  }
+
+  // faucet is empty
+  if (isFaucetEmpty) {
+    return (
+      <div className="w-full">
+        <div className="mb-3 text-center text-muted-foreground text-sm">
+          Faucet is empty right now
+        </div>
+        <SendFundsToFaucetModalButton
+          chain={definedChain}
+          isLoggedIn={!!twAccount}
+          client={client}
+          chainMeta={chain}
+          onFaucetRefill={() => {
+            faucetWalletBalanceQuery.refetch();
+          }}
+        />
+      </div>
+    );
+  }
+
   // Force users to log in to claim the faucet
   if (!address || !twAccount) {
     return (
@@ -164,24 +224,6 @@ export function FaucetButton({
     );
   }
 
-  // loading state
-  if (faucetWalletBalanceQuery.isPending || canClaimFaucetQuery.isPending) {
-    return (
-      <Button variant="outline" className="w-full gap-2">
-        Checking Faucet <Spinner className="size-3" />
-      </Button>
-    );
-  }
-
-  // faucet is empty
-  if (isFaucetEmpty) {
-    return (
-      <Button variant="outline" disabled className="!opacity-100 w-full">
-        Faucet is empty right now
-      </Button>
-    );
-  }
-
   // Can not claim
   if (canClaimFaucetQuery.data && canClaimFaucetQuery.data.canClaim === false) {
     return (
@@ -250,3 +292,165 @@ export function FaucetButton({
     </div>
   );
 }
+
+const faucetFormSchema = z.object({
+  amount: z.coerce.number().refine((value) => value > 0, {
+    message: "Amount must be greater than 0",
+  }),
+});
+
+function SendFundsToFaucetModalButton(props: {
+  chain: Chain;
+  isLoggedIn: boolean;
+  client: ThirdwebClient;
+  chainMeta: ChainMetadata;
+  onFaucetRefill: () => void;
+}) {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="default" className="w-full">
+          Refill Faucet
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader className="mb-2">
+          <DialogTitle>Refill Faucet</DialogTitle>
+          <DialogDescription>Send funds to faucet wallet</DialogDescription>
+        </DialogHeader>
+
+        <SendFundsToFaucetModalContent {...props} />
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function SendFundsToFaucetModalContent(props: {
+  chain: Chain;
+  isLoggedIn: boolean;
+  client: ThirdwebClient;
+  chainMeta: ChainMetadata;
+  onFaucetRefill: () => void;
+}) {
+  const account = useActiveAccount();
+  const activeChain = useActiveWalletChain();
+  const switchActiveWalletChain = useSwitchActiveWalletChain();
+  const sendTxMutation = useSendTransaction({
+    payModal: false,
+  });
+  const switchChainMutation = useMutation({
+    mutationFn: async () => {
+      await switchActiveWalletChain(props.chain);
+    },
+  });
+
+  const form = useForm<z.infer<typeof faucetFormSchema>>({
+    resolver: zodResolver(faucetFormSchema),
+    defaultValues: {
+      amount: 0.1,
+    },
+  });
+
+  function onSubmit(values: z.infer<typeof faucetFormSchema>) {
+    const sendNativeTokenTx = prepareTransaction({
+      chain: props.chain,
+      client: props.client,
+      to: THIRDWEB_ENGINE_FAUCET_WALLET,
+      value: toWei(values.amount.toString()),
+    });
+
+    const promise = sendTxMutation.mutateAsync(sendNativeTokenTx);
+
+    toast.promise(promise, {
+      success: `Sent ${values.amount} ${props.chainMeta.nativeCurrency.symbol} to faucet`,
+      error: `Failed to send ${values.amount} ${props.chainMeta.nativeCurrency.symbol} to faucet`,
+    });
+
+    promise.then(() => {
+      props.onFaucetRefill();
+    });
+  }
+
+  return (
+    <Form {...form}>
+      <form
+        onSubmit={form.handleSubmit(onSubmit)}
+        className="flex min-w-0 flex-col gap-5"
+      >
+        <div className="min-w-0">
+          <p className="mb-2 text-foreground text-sm"> Faucet Wallet </p>
+          <CopyTextButton
+            copyIconPosition="right"
+            variant="outline"
+            className="w-full justify-between bg-card py-2 font-mono"
+            textToCopy={THIRDWEB_ENGINE_FAUCET_WALLET}
+            textToShow={THIRDWEB_ENGINE_FAUCET_WALLET}
+            tooltip={undefined}
+          />
+        </div>
+
+        <FormField
+          control={form.control}
+          name="amount"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Amount</FormLabel>
+              <FormControl>
+                <div className="relative">
+                  <Input
+                    {...field}
+                    type="number"
+                    className="h-auto bg-card text-2xl md:text-2xl [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+                  />
+                  <div className="-translate-y-1/2 absolute top-1/2 right-4 text-muted-foreground text-sm">
+                    {props.chainMeta.nativeCurrency.symbol}
+                  </div>
+                </div>
+              </FormControl>
+
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        {!account && (
+          <CustomConnectWallet
+            chain={props.chain}
+            loginRequired={false}
+            isLoggedIn={props.isLoggedIn}
+            connectButtonClassName="!w-full"
+            detailsButtonClassName="!w-full"
+          />
+        )}
+
+        {account && activeChain && (
+          <div>
+            {activeChain.id === props.chain.id ? (
+              <Button
+                key="submit"
+                type="submit"
+                className="mt-4 w-full gap-2"
+                disabled={sendTxMutation.isPending}
+              >
+                {sendTxMutation.isPending && <Spinner className="size-4" />}
+                Send funds to faucet
+              </Button>
+            ) : (
+              <Button
+                key="switch"
+                className="mt-4 w-full gap-2"
+                disabled={switchChainMutation.isPending}
+                onClick={() => switchChainMutation.mutate()}
+              >
+                Switch to {props.chainMeta.name}{" "}
+                {switchChainMutation.isPending && (
+                  <Spinner className="size-4" />
+                )}
+              </Button>
+            )}
+          </div>
+        )}
+      </form>
+    </Form>
+  );
+}

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/components/server/BuyFundsSection.tsx

@@ -12,7 +12,7 @@ export function BuyFundsSection(props: { chain: ChainMetadata }) {
   return (
     <section>
       <SectionTitle title="Buy Funds" />
-      <div className="flex justify-center rounded-lg border border-border bg-muted/30 px-4 py-10">
+      <div className="flex justify-center rounded-lg border border-border bg-card px-4 py-10">
         <div className="flex max-w-[520px] flex-col items-center ">
           <div className="flex items-center">
             <ChainIcon

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/components/server/ChainOverviewSection.tsx

@@ -11,7 +11,7 @@ export function ChainOverviewSection(props: { chain: ChainMetadata }) {
   return (
     <section>
       <SectionTitle title="Chain Overview" />
-      <div className="grid grid-cols-1 gap-6 rounded-lg border bg-muted/50 p-4 md:grid-cols-2 md:p-6 lg:grid-cols-3 lg:gap-8">
+      <div className="grid grid-cols-1 gap-6 rounded-lg border bg-card p-4 md:grid-cols-2 md:p-6 lg:grid-cols-3 lg:gap-8">
         {/* Info */}
         {chain.infoURL && (
           <PrimaryInfoItem title="Info">

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/components/server/ClaimChainSection.tsx

@@ -7,7 +7,7 @@ export function ClaimChainSection() {
   return (
     <section>
       <SectionTitle title="Claim Chain" />
-      <div className="rounded-lg border bg-muted/50 p-4">
+      <div className="rounded-lg border bg-card p-4">
         <p className="mb-1"> This chain page is unclaimed </p>
         <p className="mb-5 text-muted-foreground text-sm">
           Are you the owner of this ecosystem? Claim this page to add additional

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/components/server/FaucetSection.tsx

@@ -19,7 +19,7 @@ export async function FaucetSection(props: {
   return (
     <section>
       <SectionTitle title="Faucet" />
-      <div className="flex justify-center rounded-lg border border-border bg-muted/50 px-4 py-10">
+      <div className="flex justify-center rounded-lg border border-border bg-card px-4 py-10">
         <div className="flex w-full max-w-[520px] flex-col items-center ">
           <div className="flex items-center">
             <ChainIcon

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/components/server/SupportedProductsSection.tsx

@@ -25,7 +25,7 @@ export function SupportedProductsSection(props: {
           return (
             <div
               key={product.id}
-              className="relative flex gap-3 rounded-lg border bg-muted/50 p-4 pr-8 transition-colors duration-300 hover:bg-muted"
+              className="relative flex gap-3 rounded-lg border bg-card p-4 pr-8 transition-colors hover:border-active-border"
             >
               <CircleCheckIcon className="absolute top-4 right-4 size-5 text-success-text" />
               <product.icon className="mt-0.5 size-5 shrink-0" />

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/components/server/explorer-section.tsx

@@ -14,7 +14,7 @@ export function ExplorersSection(props: {
           return (
             <div
               key={explorer.url}
-              className="relative rounded-xl border bg-muted/50 p-4 hover:bg-muted"
+              className="relative rounded-xl border bg-card p-4 transition-colors hover:border-active-border"
             >
               <ExternalLinkIcon className="absolute top-4 right-4 size-4 text-muted-foreground" />
               <h3 className="mb-1 font-semibold text-base capitalize">

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/layout.tsx

@@ -1,5 +1,3 @@
-import { MobileSidebar } from "@/components/blocks/MobileSidebar";
-import { Sidebar } from "@/components/blocks/Sidebar";
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -15,16 +13,12 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import {
-  ArrowLeftIcon,
-  ChevronDownIcon,
-  MenuIcon,
-  TicketCheckIcon,
-} from "lucide-react";
+import { ChevronDownIcon, TicketCheckIcon } from "lucide-react";
 import type { Metadata } from "next";
 import Link from "next/link";
 import { redirect } from "next/navigation";
 import { mapV4ChainToV5Chain } from "../../../../../contexts/map-chains";
+import { getAuthToken } from "../../../../api/lib/getAuthToken";
 import { StarButton } from "../../components/client/star-button";
 import { getChain, getChainMetadata } from "../../utils";
 import { AddChainToWallet } from "./components/client/add-chain-to-wallet";
@@ -62,6 +56,7 @@ export default async function ChainPageLayout(props: {
   const params = await props.params;
   const { children } = props;
   const chain = await getChain(params.chain_id);
+  const authToken = await getAuthToken();
 
   if (params.chain_id !== chain.slug) {
     redirect(chain.slug);
@@ -69,18 +64,6 @@ export default async function ChainPageLayout(props: {
 
   const chainMetadata = await getChainMetadata(chain.chainId);
 
-  const sidebarLinks = [
-    {
-      href: `/${chain.slug}`,
-      label: "Overview",
-      exactMatch: true,
-    },
-    {
-      href: `/${chain.slug}/popular`,
-      label: "Popular Contracts",
-    },
-  ];
-
   return (
     <>
       <div className="flex h-14 border-border border-b pl-7">
@@ -123,9 +106,7 @@ export default async function ChainPageLayout(props: {
           </BreadcrumbList>
         </Breadcrumb>
       </div>
-      <div className="container flex h-full flex-row">
-        <Sidebar links={sidebarLinks} />
-
+      <div className="container flex h-full max-w-[1180px] flex-row">
         <div className="flex w-full flex-col pb-10">
           {/* Icon + Background */}
           <ChainHeader
@@ -134,28 +115,6 @@ export default async function ChainPageLayout(props: {
             chain={chain}
           />
 
-          <div className="flex justify-end lg:hidden">
-            <MobileSidebar
-              links={sidebarLinks}
-              trigger={
-                <Button size="icon" variant="outline">
-                  <MenuIcon strokeWidth={1} />
-                </Button>
-              }
-              footer={
-                <div className="mt-5 border-t pt-6 pb-2">
-                  <Link
-                    href="/chainlist"
-                    className="flex items-center justify-start gap-2 px-2 text-muted-foreground text-sm hover:text-foreground"
-                  >
-                    <ArrowLeftIcon className="size-4" />
-                    View all chains
-                  </Link>
-                </div>
-              }
-            />
-          </div>
-
           <div className="h-4 md:h-8" />
 
           <div className="flex flex-col gap-3 md:gap-2">
@@ -173,11 +132,13 @@ export default async function ChainPageLayout(props: {
               </h1>
 
               {/* Favorite */}
-              <StarButton
-                chainId={chain.chainId}
-                iconClassName="size-5"
-                className="p-1"
-              />
+              {authToken && (
+                <StarButton
+                  chainId={chain.chainId}
+                  iconClassName="size-5"
+                  className="p-1"
+                />
+              )}
 
               {/* Gas Sponsored badge - Desktop */}
               {chainMetadata?.gasSponsored && (

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/page.tsx

@@ -1,9 +1,5 @@
-import { Button } from "@/components/ui/button";
-import { fetchTopContracts } from "lib/search";
-import { ArrowRightIcon, CircleAlertIcon } from "lucide-react";
-import Link from "next/link";
+import { CircleAlertIcon } from "lucide-react";
 import { getRawAccount } from "../../../../account/settings/getAccount";
-import { TrendingContractSection } from "../../../trending/components/trending-table";
 import { getChain, getChainMetadata } from "../../utils";
 import { BuyFundsSection } from "./components/server/BuyFundsSection";
 import { ChainOverviewSection } from "./components/server/ChainOverviewSection";
@@ -21,14 +17,7 @@ export default async function Page(props: {
   const chainMetadata = await getChainMetadata(chain.chainId);
   const isDeprecated = chain.status === "deprecated";
 
-  const [account, topContracts] = await Promise.all([
-    getRawAccount(),
-    fetchTopContracts({
-      chainId: chain.chainId,
-      perPage: 3,
-      timeRange: "month",
-    }),
-  ]);
+  const account = await getRawAccount();
 
   return (
     <div className="flex flex-col gap-10">
@@ -65,31 +54,6 @@ export default async function Page(props: {
         <ExplorersSection explorers={chain.explorers} />
       )}
 
-      {topContracts.length > 0 && (
-        <section>
-          <div className="mb-3 flex items-center justify-between">
-            <h2 className="font-semibold text-xl tracking-tight">
-              Popular Contracts
-            </h2>
-            <Button asChild variant="outline">
-              <Link
-                href={`/${chain.slug}/popular`}
-                className="flex items-center gap-2"
-              >
-                See All
-                <ArrowRightIcon className="size-4" />
-              </Link>
-            </Button>
-          </div>
-          <TrendingContractSection
-            topContracts={topContracts}
-            chainId={chain.chainId}
-            showPagination={false}
-            searchParams={undefined}
-          />
-        </section>
-      )}
-
       {chain.services.filter((s) => s.enabled).length > 0 && (
         <SupportedProductsSection services={chain.services} />
       )}

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/popular/page.tsx

@@ -1,48 +0,0 @@
-import { type SortBy, fetchTopContracts } from "lib/search";
-import { CircleAlertIcon } from "lucide-react";
-import { TrendingContractSection } from "../../../../trending/components/trending-table";
-import { getChain } from "../../../utils";
-
-export default async function Page(props: {
-  params: Promise<{ chain_id: string }>;
-  searchParams: Promise<{ page?: number; sortBy?: SortBy }>;
-}) {
-  const searchParams = await props.searchParams;
-  const params = await props.params;
-  const chain = await getChain(params.chain_id);
-  const topContracts = await fetchTopContracts({
-    chainId: chain.chainId,
-    page: searchParams.page,
-    sortBy: searchParams.sortBy,
-    perPage: 15,
-    timeRange: "month",
-  });
-
-  return (
-    <section className="mt-2">
-      <h2 className="mb-2 font-semibold text-2xl tracking-tighter">
-        Popular Contracts
-      </h2>
-      <p className="text-muted-foreground text-sm">
-        Explore contracts on Ethereum and sort them by your preferred metrics
-      </p>
-      <div className="h-8" />
-      {topContracts.length > 0 && (
-        <TrendingContractSection
-          topContracts={topContracts}
-          chainId={chain.chainId}
-          searchParams={searchParams}
-          showPagination={true}
-        />
-      )}
-      {topContracts.length === 0 && (
-        <div className="flex h-[200px] items-center justify-center rounded-lg border border-border text-lg text-muted-foreground">
-          <div className="flex items-center gap-2">
-            <CircleAlertIcon className="size-5 text-destructive-text" />
-            No contracts found
-          </div>
-        </div>
-      )}
-    </section>
-  );
-}

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/marketplace-table.tsx

@@ -247,7 +247,7 @@ export const MarketplaceTable: React.FC<MarketplaceTableProps> = ({
                 <Tr
                   {...row.getRowProps()}
                   role="group"
-                  className="hover:bg-muted/50"
+                  className="hover:bg-card"
                   style={{ cursor: "pointer" }}
                   onClick={() => setTokenRow(row.original)}
                   borderBottomWidth={1}

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/hooks.ts

@@ -4,6 +4,7 @@ import {
   toTokens,
   toUnits,
 } from "thirdweb";
+import { getContract } from "thirdweb/contract";
 import type { OverrideEntry } from "thirdweb/dist/types/utils/extensions/drops/types";
 import type { Prettify } from "thirdweb/dist/types/utils/type-utils";
 import { getContractMetadata } from "thirdweb/extensions/common";
@@ -71,7 +72,10 @@ export async function getClaimPhasesInLegacyFormat(
     conditions.map(async (condition) => {
       const [currencyMetadata, metadata, contractMetadata] = await Promise.all([
         await ERC20Ext.getCurrencyMetadata({
-          contract: { ...options.contract, address: condition.currency },
+          contract: getContract({
+            ...options.contract,
+            address: condition.currency,
+          }),
         }).then((m) => ({
           ...m,
           displayValue: toTokens(condition.pricePerToken, m.decimals),

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/snapshot-upload.tsx

@@ -160,7 +160,7 @@ const SnapshotViewerSheetContent: React.FC<SnapshotUploadProps> = ({
             <div
               className={cn(
                 "flex h-full cursor-pointer rounded-md border border-border hover:border-primary",
-                noCsv ? "bg-red-200" : "bg-card",
+                noCsv ? "bg-red-200" : "bg-background",
               )}
               {...getRootProps()}
             >
@@ -197,7 +197,7 @@ const SnapshotViewerSheetContent: React.FC<SnapshotUploadProps> = ({
                     <a
                       className="text-link-foreground hover:text-foreground"
                       download
-                      href="/snapshot-with-maxclaimable.csv"
+                      href="/assets/examples/snapshot-with-maxclaimable.csv"
                     >
                       <DownloadIcon className="inline size-3" /> Example
                       snapshot
@@ -212,7 +212,7 @@ const SnapshotViewerSheetContent: React.FC<SnapshotUploadProps> = ({
                     <a
                       download
                       className="text-link-foreground hover:text-foreground"
-                      href="/snapshot-with-overrides.csv"
+                      href="/assets/examples/snapshot-with-overrides.csv"
                     >
                       <DownloadIcon className="inline size-3" /> Example
                       snapshot
@@ -228,7 +228,7 @@ const SnapshotViewerSheetContent: React.FC<SnapshotUploadProps> = ({
                     <a
                       download
                       className="text-link-foreground hover:text-foreground"
-                      href="/snapshot.csv"
+                      href="/assets/examples/snapshot.csv"
                     >
                       <DownloadIcon className="inline size-3" /> Example
                       snapshot
@@ -243,7 +243,7 @@ const SnapshotViewerSheetContent: React.FC<SnapshotUploadProps> = ({
                     <a
                       download
                       className="text-link-foreground hover:text-foreground"
-                      href="/snapshot-with-maxclaimable.csv"
+                      href="/assets/examples/snapshot-with-maxclaimable.csv"
                     >
                       <DownloadIcon className="inline size-3" /> Example
                       snapshot
@@ -262,7 +262,7 @@ const SnapshotViewerSheetContent: React.FC<SnapshotUploadProps> = ({
                     <a
                       download
                       className="text-link-foreground hover:text-foreground"
-                      href="/snapshot-with-overrides.csv"
+                      href="/assets/examples/snapshot-with-overrides.csv"
                     >
                       <DownloadIcon className="inline size-3" /> Example
                       snapshot

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/metadata-header.tsx

@@ -83,7 +83,7 @@ export const MetadataHeader: React.FC<MetadataHeaderProps> = ({
             {chain && (
               <Link
                 href={`/${chain.slug}`}
-                className="flex w-fit shrink-0 items-center gap-2 rounded-3xl border border-border bg-muted/50 px-2.5 py-1.5 hover:bg-muted"
+                className="flex w-fit shrink-0 items-center gap-2 rounded-3xl border border-border bg-card px-2.5 py-1.5 hover:bg-accent"
               >
                 <ChainIcon ipfsSrc={chain.icon?.url} className="size-4" />
                 {cleanedChainName && (
@@ -109,7 +109,7 @@ export const MetadataHeader: React.FC<MetadataHeaderProps> = ({
           <CopyAddressButton
             address={address}
             copyIconPosition="left"
-            className="bg-muted/50 text-xs"
+            className="bg-card text-xs"
             variant="outline"
           />
 
@@ -138,7 +138,7 @@ function BadgeLink(props: {
     <Button
       variant="outline"
       asChild
-      className="!h-auto gap-2 rounded-lg bg-muted/50 px-3 py-1.5 text-xs capitalize"
+      className="!h-auto gap-2 rounded-lg bg-card px-3 py-1.5 text-xs capitalize"
     >
       <Link href={props.href} target="_blank">
         {props.name}

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_utils/getContractPageSidebarLinks.ts

@@ -39,12 +39,6 @@ export function getContractPageSidebarLinks(data: {
       href: `${layoutPrefix}/events`,
       exactMatch: true,
     },
-    {
-      label: "Embed",
-      href: `${layoutPrefix}/embed`,
-      hide: data.metadata.embedType === null,
-      exactMatch: true,
-    },
     {
       label: "Analytics",
       href: `${layoutPrefix}/analytics`,

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_utils/isAnalyticsSupportedForChain.ts

@@ -1,35 +1,33 @@
-import { isProd } from "@/constants/env";
+import { INSIGHT_SERVICE_API_KEY } from "@/constants/env";
+import { getVercelEnv } from "lib/vercel-utils";
+
+const thirdwebDomain =
+  getVercelEnv() !== "production" ? "thirdweb-dev" : "thirdweb";
 
 export async function isAnalyticsSupportedForChain(
   chainId: number,
 ): Promise<boolean> {
   try {
-    if (!process.env.CHAINSAW_API_KEY) {
-      throw new Error("Missing CHAINSAW_API_KEY env var");
-    }
-
     const res = await fetch(
-      `https://chainsaw.${isProd ? "thirdweb" : "thirdweb-dev"}.com/service/chains/${chainId}`,
+      `https://insight.${thirdwebDomain}.com/service/chains/${chainId}`,
       {
-        method: "GET",
         headers: {
-          "content-type": "application/json",
-          // pass the shared secret
-          "x-service-api-key": process.env.CHAINSAW_API_KEY || "",
+          // service api key required - because this is endpoint is internal
+          "x-service-api-key": INSIGHT_SERVICE_API_KEY,
         },
       },
     );
 
     if (!res.ok) {
-      // assume not supported if we get a non-200 response
       return false;
     }
 
-    const { data } = await res.json();
-    return data;
-  } catch (e) {
-    console.error("Error checking if analytics is supported for chain", e);
-  }
+    const json = (await res.json()) as { data: boolean };
 
+    return json.data;
+  } catch (e) {
+    console.error(`Error checking analytics support for chain ${chainId}`);
+    console.error(e);
+  }
   return false;
 }

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/analytics/ContractAnalyticsPage.client.tsx

@@ -8,6 +8,8 @@ import { ContractAnalyticsPage } from "./ContractAnalyticsPage";
 
 export function ContractAnalyticsPageClient(props: {
   contract: ThirdwebContract;
+  writeFnSelectorToNameRecord: Record<string, string>;
+  eventSelectorToNameRecord: Record<string, string>;
 }) {
   const metadataQuery = useContractPageMetadata(props.contract);
 
@@ -23,5 +25,11 @@ export function ContractAnalyticsPageClient(props: {
     return <RedirectToContractOverview contract={props.contract} />;
   }
 
-  return <ContractAnalyticsPage contract={props.contract} />;
+  return (
+    <ContractAnalyticsPage
+      contract={props.contract}
+      writeFnSelectorToNameRecord={props.writeFnSelectorToNameRecord}
+      eventSelectorToNameRecord={props.eventSelectorToNameRecord}
+    />
+  );
 }

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/analytics/ContractAnalyticsPage.tsx

@@ -1,138 +1,117 @@
 "use client";
 import { ThirdwebBarChart } from "@/components/blocks/charts/bar-chart";
-import { useIsomorphicLayoutEffect } from "@/lib/useIsomorphicLayoutEffect";
-import {
-  Alert,
-  AlertDescription,
-  AlertIcon,
-  AlertTitle,
-  Flex,
-  SimpleGrid,
-  Skeleton,
-  Stat,
-  StatLabel,
-  StatNumber,
-} from "@chakra-ui/react";
+import { Skeleton, Stat, StatLabel, StatNumber } from "@chakra-ui/react";
 import type { UseQueryResult } from "@tanstack/react-query";
 import {
   type AnalyticsQueryParams,
   type TotalQueryResult,
-  useEventsAnalytics,
-  useFunctionsAnalytics,
-  useLogsAnalytics,
-  useTotalLogsAnalytics,
-  useTotalTransactionAnalytics,
-  useTotalWalletsAnalytics,
-  useTransactionAnalytics,
-  useUniqueWalletsAnalytics,
+  useContractEventAnalytics,
+  useContractEventBreakdown,
+  useContractFunctionBreakdown,
+  useContractTransactionAnalytics,
+  useContractUniqueWalletAnalytics,
+  useTotalContractEvents,
+  useTotalContractTransactionAnalytics,
+  useTotalContractUniqueWallets,
 } from "data/analytics/hooks";
 import { Suspense, useMemo, useState } from "react";
 import type { ThirdwebContract } from "thirdweb";
-import { Card, Heading } from "tw-components";
+import { Card } from "tw-components";
+import {
+  DateRangeSelector,
+  type Range,
+  getLastNDaysRange,
+} from "../../../../../../components/analytics/date-range-selector";
 
 interface ContractAnalyticsPageProps {
   contract: ThirdwebContract;
+  writeFnSelectorToNameRecord: Record<string, string>;
+  eventSelectorToNameRecord: Record<string, string>;
 }
 
 export const ContractAnalyticsPage: React.FC<ContractAnalyticsPageProps> = ({
   contract,
+  writeFnSelectorToNameRecord,
+  eventSelectorToNameRecord,
 }) => {
-  const [startDate] = useState(
-    (() => {
-      const date = new Date();
-      date.setDate(date.getDate() - 30);
-      return date;
-    })(),
-  );
-  const [endDate] = useState(new Date());
-
-  useIsomorphicLayoutEffect(() => {
-    window?.scrollTo({ top: 0, behavior: "smooth" });
-  }, []);
+  const [range, setRange] = useState<Range>(() => getLastNDaysRange("last-30"));
 
   return (
-    <Flex direction="column" gap={6}>
-      {contract && (
-        <>
-          <Flex gap={10} direction="column">
-            <Flex direction="column" gap={2}>
-              <Alert status="info" borderRadius="md" mb={4}>
-                <AlertIcon />
-                <AlertTitle>Analytics is in beta.</AlertTitle>
-                <AlertDescription>
-                  Some data may be partially inaccurate or incomplete.
-                </AlertDescription>
-              </Alert>
-              <Heading as="h2" size="title.md">
-                Analytics
-              </Heading>
-              <Flex gap={4}>
-                <AnalyticsStat
-                  chainId={contract.chain.id}
-                  contractAddress={contract.address}
-                  // FIXME
-                  // eslint-disable-next-line react-compiler/react-compiler
-                  useTotal={useTotalWalletsAnalytics}
-                  label="Unique Wallets"
-                />
-                <AnalyticsStat
-                  chainId={contract.chain.id}
-                  contractAddress={contract.address}
-                  // FIXME
-                  // eslint-disable-next-line react-compiler/react-compiler
-                  useTotal={useTotalTransactionAnalytics}
-                  label="Total Transactions"
-                />
-                <AnalyticsStat
-                  chainId={contract.chain.id}
-                  contractAddress={contract.address}
-                  // FIXME
-                  // eslint-disable-next-line react-compiler/react-compiler
-                  useTotal={useTotalLogsAnalytics}
-                  label="Total Events"
-                />
-              </Flex>
-            </Flex>
-          </Flex>
-          <SimpleGrid columns={{ base: 1, md: 1 }} gap={4}>
-            <UniqueWalletsChart
-              chainId={contract.chain.id}
-              contractAddress={contract.address}
-              startDate={startDate}
-              endDate={endDate}
-            />
+    <div>
+      <h2 className="mb-3 font-semibold text-xl tracking-tight lg:text-2xl">
+        Analytics
+      </h2>
 
-            <TotalTransactionsChart
-              chainId={contract.chain.id}
-              contractAddress={contract.address}
-              startDate={startDate}
-              endDate={endDate}
-            />
+      <div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
+        <AnalyticsStat
+          chainId={contract.chain.id}
+          contractAddress={contract.address}
+          // FIXME
+          // eslint-disable-next-line react-compiler/react-compiler
+          useTotal={useTotalContractUniqueWallets}
+          label="Unique Wallets"
+        />
+        <AnalyticsStat
+          chainId={contract.chain.id}
+          contractAddress={contract.address}
+          // FIXME
+          // eslint-disable-next-line react-compiler/react-compiler
+          useTotal={useTotalContractTransactionAnalytics}
+          label="Total Transactions"
+        />
+        <AnalyticsStat
+          chainId={contract.chain.id}
+          contractAddress={contract.address}
+          // FIXME
+          // eslint-disable-next-line react-compiler/react-compiler
+          useTotal={useTotalContractEvents}
+          label="Total Events"
+        />
+      </div>
 
-            <TotalEventsChart
-              chainId={contract.chain.id}
-              contractAddress={contract.address}
-              startDate={startDate}
-              endDate={endDate}
-            />
+      <div className="mt-8 mb-4">
+        <DateRangeSelector range={range} setRange={setRange} />
+      </div>
 
-            <FunctionBreakdownChart
-              chainId={contract.chain.id}
-              contractAddress={contract.address}
-              startDate={startDate}
-              endDate={endDate}
-            />
+      <div className="flex flex-col gap-6">
+        <UniqueWalletsChart
+          chainId={contract.chain.id}
+          contractAddress={contract.address}
+          startDate={range.from}
+          endDate={range.to}
+        />
 
-            <EventBreakdownChart
-              chainId={contract.chain.id}
-              contractAddress={contract.address}
-              startDate={startDate}
-              endDate={endDate}
-            />
-          </SimpleGrid>
-        </>
-      )}
-    </Flex>
+        <TotalTransactionsChart
+          chainId={contract.chain.id}
+          contractAddress={contract.address}
+          startDate={range.from}
+          endDate={range.to}
+        />
+
+        <TotalEventsChart
+          chainId={contract.chain.id}
+          contractAddress={contract.address}
+          startDate={range.from}
+          endDate={range.to}
+        />
+
+        <FunctionBreakdownChart
+          chainId={contract.chain.id}
+          contractAddress={contract.address}
+          startDate={range.from}
+          endDate={range.to}
+          writeFnSelectorToNameRecord={writeFnSelectorToNameRecord}
+        />
+
+        <EventBreakdownChart
+          chainId={contract.chain.id}
+          contractAddress={contract.address}
+          startDate={range.from}
+          endDate={range.to}
+          eventSelectorToNameRecord={eventSelectorToNameRecord}
+        />
+      </div>
+    </div>
   );
 };
 
@@ -143,26 +122,27 @@ type ChartProps = {
   endDate: Date;
 };
 function UniqueWalletsChart(props: ChartProps) {
-  const { data } = useUniqueWalletsAnalytics(props);
+  const analyticsQuery = useContractUniqueWalletAnalytics(props);
 
   return (
     <ThirdwebBarChart
       title="Unique Wallets"
       description="The number of unique wallet addresses that have sent a transaction to this contract."
-      data={data || []}
+      data={analyticsQuery.data || []}
+      isPending={analyticsQuery.isPending}
       config={{
-        wallets: {
+        count: {
           label: "Unique Wallets",
           color: "hsl(var(--chart-1))",
         },
       }}
-      chartClassName="aspect[2] lg:aspect-[4.5]"
+      chartClassName="aspect-[1.5] lg:aspect-[4.5]"
     />
   );
 }
 
 function TotalTransactionsChart(props: ChartProps) {
-  const { data } = useTransactionAnalytics({
+  const analyticsQuery = useContractTransactionAnalytics({
     chainId: props.chainId,
     contractAddress: props.contractAddress,
     endDate: props.endDate,
@@ -173,46 +153,74 @@ function TotalTransactionsChart(props: ChartProps) {
     <ThirdwebBarChart
       title="Total Transactions"
       description="The number of transactions that have been sent to this contract."
-      data={data || []}
+      data={analyticsQuery.data || []}
+      isPending={analyticsQuery.isPending}
       config={{
         count: {
           label: "Transactions",
           color: "hsl(var(--chart-1))",
         },
       }}
-      chartClassName="aspect[2] lg:aspect-[4.5]"
+      chartClassName="aspect-[1.5] lg:aspect-[4.5]"
     />
   );
 }
 
 function TotalEventsChart(props: ChartProps) {
-  const { data } = useLogsAnalytics(props);
+  const analyticsQuery = useContractEventAnalytics(props);
 
   return (
     <ThirdwebBarChart
       title="Total Events"
       description="The number of on-chain events that have been emitted from this contract."
-      data={data || []}
+      data={analyticsQuery.data || []}
+      isPending={analyticsQuery.isPending}
       config={{
         count: {
           label: "Events",
           color: "hsl(var(--chart-1))",
         },
       }}
-      chartClassName="aspect[2] lg:aspect-[4.5]"
+      chartClassName="aspect-[1.5] lg:aspect-[4.5]"
     />
   );
 }
 
-function FunctionBreakdownChart(props: ChartProps) {
-  const { data } = useFunctionsAnalytics(props);
+function FunctionBreakdownChart(
+  props: ChartProps & {
+    writeFnSelectorToNameRecord: Record<string, string>;
+  },
+) {
+  const analyticsQuery = useContractFunctionBreakdown(props);
+
+  // replace function selector with function name
+  const mappedQueryData = useMemo(() => {
+    return analyticsQuery.data?.map((item) => {
+      const modifiedItem = { time: item.time } as typeof item;
+
+      for (const key in item) {
+        if (key === "time") {
+          continue;
+        }
+
+        const name = props.writeFnSelectorToNameRecord[key];
+        const value = item[key];
+        if (name && value !== undefined) {
+          modifiedItem[name] = value;
+        }
+      }
+
+      return modifiedItem;
+    });
+  }, [analyticsQuery.data, props.writeFnSelectorToNameRecord]);
 
   return (
     <ThirdwebBarChart
       title="Function Breakdown"
       description="The breakdown of calls to each write function from transactions."
-      data={data || []}
-      config={Object.keys(data?.[0] || {}).reduce(
+      data={mappedQueryData || []}
+      isPending={analyticsQuery.isPending}
+      config={Object.keys(mappedQueryData?.[0] || {}).reduce(
         (acc, key) => {
           if (key === "time") {
             return acc;
@@ -225,21 +233,47 @@ function FunctionBreakdownChart(props: ChartProps) {
         },
         {} as Record<string, { label: string; color: string }>,
       )}
-      chartClassName="aspect[2] lg:aspect-[4.5]"
+      chartClassName="aspect-[1.5] lg:aspect-[4.5]"
       showLegend
     />
   );
 }
 
-function EventBreakdownChart(props: ChartProps) {
-  const { data } = useEventsAnalytics(props);
+function EventBreakdownChart(
+  props: ChartProps & {
+    eventSelectorToNameRecord: Record<string, string>;
+  },
+) {
+  const analyticsQuery = useContractEventBreakdown(props);
+
+  // replace event selector with event name
+  const mappedQueryData = useMemo(() => {
+    return analyticsQuery.data?.map((item) => {
+      const modifiedItem = { time: item.time } as typeof item;
+
+      for (const key in item) {
+        if (key === "time") {
+          continue;
+        }
+
+        const name = props.eventSelectorToNameRecord[key];
+        const value = item[key];
+        if (name && value !== undefined) {
+          modifiedItem[name] = value;
+        }
+      }
+
+      return modifiedItem;
+    });
+  }, [analyticsQuery.data, props.eventSelectorToNameRecord]);
 
   return (
     <ThirdwebBarChart
       title="Event Breakdown"
       description="The breakdown of events emitted by this contract."
-      data={data || []}
-      config={Object.keys(data?.[0] || {}).reduce(
+      data={mappedQueryData || []}
+      isPending={analyticsQuery.isPending}
+      config={Object.keys(mappedQueryData?.[0] || {}).reduce(
         (acc, key) => {
           if (key === "time") {
             return acc;
@@ -252,7 +286,7 @@ function EventBreakdownChart(props: ChartProps) {
         },
         {} as Record<string, { label: string; color: string }>,
       )}
-      chartClassName="aspect[2] lg:aspect-[4.5]"
+      chartClassName="aspect-[1.5] lg:aspect-[4.5]"
       showLegend
     />
   );

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/analytics/page.tsx

@@ -1,5 +1,7 @@
 import { notFound, redirect } from "next/navigation";
 import { localhost } from "thirdweb/chains";
+import { type ThirdwebContract, resolveContractAbi } from "thirdweb/contract";
+import { type Abi, toEventSelector, toFunctionSelector } from "thirdweb/utils";
 import { getContractPageParamsInfo } from "../_utils/getContractFromParams";
 import { getContractPageMetadata } from "../_utils/getContractPageMetadata";
 import { ContractAnalyticsPage } from "./ContractAnalyticsPage";
@@ -18,8 +20,18 @@ export default async function Page(props: {
     notFound();
   }
 
+  const { eventSelectorToName, writeFnSelectorToName } = await getSelectors(
+    info.contract,
+  );
+
   if (info.chainMetadata.chainId === localhost.id) {
-    return <ContractAnalyticsPageClient contract={info.contract} />;
+    return (
+      <ContractAnalyticsPageClient
+        contract={info.contract}
+        writeFnSelectorToNameRecord={writeFnSelectorToName}
+        eventSelectorToNameRecord={eventSelectorToName}
+      />
+    );
   }
 
   const { isAnalyticsSupported } = await getContractPageMetadata(info.contract);
@@ -28,5 +40,42 @@ export default async function Page(props: {
     redirect(`/${params.chain_id}/${params.contractAddress}`);
   }
 
-  return <ContractAnalyticsPage contract={info.contract} />;
+  return (
+    <ContractAnalyticsPage
+      contract={info.contract}
+      writeFnSelectorToNameRecord={writeFnSelectorToName}
+      eventSelectorToNameRecord={eventSelectorToName}
+    />
+  );
+}
+
+async function getSelectors(contract: ThirdwebContract) {
+  try {
+    const abi = await resolveContractAbi<Abi>(contract);
+    const writeFnSelectorToName: Record<string, string> = {};
+    const eventSelectorToName: Record<string, string> = {};
+
+    for (const item of abi) {
+      if (item.type === "event") {
+        eventSelectorToName[toEventSelector(item)] = item.name;
+      } else if (
+        // if write function
+        item.type === "function" &&
+        item.stateMutability !== "view" &&
+        item.stateMutability !== "pure"
+      ) {
+        writeFnSelectorToName[toFunctionSelector(item)] = item.name;
+      }
+    }
+
+    return {
+      writeFnSelectorToName,
+      eventSelectorToName,
+    };
+  } catch {
+    return {
+      writeFnSelectorToName: {},
+      eventSelectorToName: {},
+    };
+  }
 }

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/embed/EmbedSetup.client.tsx

@@ -1,35 +0,0 @@
-"use client";
-
-import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
-import type { ThirdwebContract } from "thirdweb";
-import { ErrorPage, LoadingPage } from "../_components/page-skeletons";
-import { RedirectToContractOverview } from "../_components/redirect-contract-overview.client";
-import { useContractPageMetadata } from "../_hooks/useContractPageMetadata";
-import { EmbedSetup } from "./embed-setup";
-
-export function EmbedSetupClient(props: {
-  contract: ThirdwebContract;
-  twAccount: Account | undefined;
-}) {
-  const metadataQuery = useContractPageMetadata(props.contract);
-
-  if (metadataQuery.isPending) {
-    return <LoadingPage />;
-  }
-
-  if (metadataQuery.isError) {
-    return <ErrorPage />;
-  }
-
-  if (metadataQuery.data.embedType === null) {
-    return <RedirectToContractOverview contract={props.contract} />;
-  }
-
-  return (
-    <EmbedSetup
-      contract={props.contract}
-      ercOrMarketplace={metadataQuery.data.embedType}
-      twAccount={props.twAccount}
-    />
-  );
-}

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/embed/embed-setup.tsx

@@ -1,582 +0,0 @@
-"use client";
-
-import { Button } from "@/components/ui/button";
-import { CodeClient } from "@/components/ui/code/code.client";
-import {
-  type Account,
-  useApiKeys,
-  useCreateApiKey,
-} from "@3rdweb-sdk/react/hooks/useApi";
-import { Flex, FormControl, Input, Select } from "@chakra-ui/react";
-import { LazyCreateAPIKeyDialog } from "components/settings/ApiKeys/Create/LazyCreateAPIKeyDialog";
-import { useTrack } from "hooks/analytics/useTrack";
-import { useAllChainsData } from "hooks/chains/allChains";
-import { useClipboard } from "hooks/useClipboard";
-import { CheckIcon, CopyIcon } from "lucide-react";
-import Link from "next/link";
-import { usePathname } from "next/navigation";
-import { useMemo, useState } from "react";
-import { useForm } from "react-hook-form";
-import type { StoredChain } from "stores/chainStores";
-import type { ThirdwebContract } from "thirdweb";
-import type { ChainMetadata } from "thirdweb/chains";
-import { useActiveAccount } from "thirdweb/react";
-import { Card, FormHelperText, FormLabel, Heading, Text } from "tw-components";
-
-interface EmbedSetupProps {
-  contract: ThirdwebContract;
-  ercOrMarketplace: string;
-  twAccount: Account | undefined;
-}
-
-// MAKE SURE THIS IS v1 embed hashes!!
-const IPFS_URI = "bafybeigdie2yyiazou7grjowoevmuip6akk33nqb55vrpezqdwfssrxyfy";
-const ERC721_IPFS_URI =
-  "bafybeicd3qfzelz4su7ng6n523virdsgobrc5pcbarhwqv3dj3drh645pi";
-
-interface IframeSrcOptions {
-  clientId: string;
-  chain: string;
-  tokenId?: string;
-  listingId?: string;
-  listingType?: string;
-  directListingId?: string;
-  englishAuctionId?: string;
-  relayUrl?: string;
-  theme?: string;
-  primaryColor?: string;
-  secondaryColor?: string;
-  biconomyApiKey?: string;
-  biconomyApiId?: string;
-}
-
-const colorOptions = [
-  "purple",
-  "blue",
-  "orange",
-  "pink",
-  "green",
-  "red",
-  "teal",
-  "cyan",
-  "yellow",
-];
-
-const isValidUrl = (url: string | undefined) => {
-  if (!url) {
-    return false;
-  }
-  try {
-    new URL(url);
-    return true;
-  } catch {
-    return false;
-  }
-};
-
-const buildIframeSrc = (
-  contract: ThirdwebContract,
-  ercOrMarketplace?: string,
-  options?: IframeSrcOptions,
-): string => {
-  const contractPath =
-    ercOrMarketplace === "erc721" ? "" : `${ercOrMarketplace}.html`;
-  const contractEmbedHash =
-    ercOrMarketplace === "erc721" ? ERC721_IPFS_URI : IPFS_URI;
-
-  if (!contract || !options || !contractEmbedHash) {
-    return "";
-  }
-
-  const {
-    clientId,
-    chain,
-    tokenId,
-    listingId,
-    listingType,
-    directListingId,
-    englishAuctionId,
-    relayUrl,
-    theme,
-    primaryColor,
-    secondaryColor,
-    biconomyApiKey,
-    biconomyApiId,
-  } = options;
-
-  const url = new URL(
-    `https://embed.ipfscdn.io/ipfs/${contractEmbedHash}/${contractPath}`,
-  );
-
-  url.searchParams.append("contract", contract.address);
-  url.searchParams.append("chain", chain);
-  url.searchParams.append("clientId", clientId);
-
-  if (tokenId !== undefined && ercOrMarketplace === "erc1155") {
-    url.searchParams.append("tokenId", tokenId.toString());
-  }
-  if (listingId !== undefined && ercOrMarketplace === "marketplace") {
-    url.searchParams.append("listingId", listingId.toString());
-  }
-  if (
-    directListingId !== undefined &&
-    ercOrMarketplace === "marketplace-v3" &&
-    listingType === "direct-listing"
-  ) {
-    url.searchParams.append("directListingId", directListingId.toString());
-  }
-  if (
-    englishAuctionId !== undefined &&
-    ercOrMarketplace === "marketplace-v3" &&
-    listingType === "english-auction"
-  ) {
-    url.searchParams.append("englishAuctionId", englishAuctionId.toString());
-  }
-  if (isValidUrl(relayUrl)) {
-    url.searchParams.append("relayUrl", relayUrl || "");
-  }
-  if (biconomyApiKey) {
-    url.searchParams.append("biconomyApiKey", biconomyApiKey);
-  }
-  if (biconomyApiId) {
-    url.searchParams.append("biconomyApiId", biconomyApiId);
-  }
-  if (theme) {
-    url.searchParams.append("theme", theme);
-  }
-  if (primaryColor && primaryColor !== "default") {
-    url.searchParams.append("primaryColor", primaryColor);
-  }
-  if (secondaryColor && secondaryColor !== "orange") {
-    url.searchParams.append("secondaryColor", secondaryColor);
-  }
-  return url.toString();
-};
-
-// taken from @thirdweb-dev /chains
-// @internal
-function minimizeChain(
-  chain: ChainMetadata,
-): Pick<
-  ChainMetadata,
-  | "name"
-  | "chain"
-  | "rpc"
-  | "nativeCurrency"
-  | "shortName"
-  | "chainId"
-  | "testnet"
-  | "slug"
-  | "icon"
-> {
-  const [firstRpc] = chain.rpc;
-  return {
-    name: chain.name,
-    chain: chain.chain,
-    rpc: [firstRpc || ""],
-    nativeCurrency: chain.nativeCurrency,
-    shortName: chain.shortName,
-    chainId: chain.chainId,
-    testnet: chain.testnet,
-    slug: chain.slug,
-    icon: chain.icon,
-  };
-}
-
-// taken from @thirdweb-dev /chains
-// @internal
-type ChainConfiguration = {
-  rpc?: string | string[];
-};
-
-function configureChain(
-  chain: ChainMetadata,
-  chainConfig: ChainConfiguration,
-): ChainMetadata {
-  let additionalRPCs: string[] = [];
-  if (chainConfig?.rpc) {
-    if (typeof chainConfig.rpc === "string") {
-      additionalRPCs = [chainConfig.rpc];
-    } else {
-      additionalRPCs = chainConfig.rpc;
-    }
-  }
-  // prepend additional RPCs to the chain's RPCs
-  return { ...chain, rpc: [...additionalRPCs, ...chain.rpc] };
-}
-
-export const EmbedSetup: React.FC<EmbedSetupProps> = ({
-  contract,
-  ercOrMarketplace,
-  twAccount,
-}) => {
-  const trackEvent = useTrack();
-
-  const apiKeys = useApiKeys({
-    isLoggedIn: !!twAccount,
-  });
-  const createKeyMutation = useCreateApiKey();
-
-  const validApiKey = (apiKeys.data || []).find(
-    (apiKey) =>
-      (apiKey.domains.includes("*") ||
-        apiKey.domains.includes("embed.ipfscdn.io") ||
-        apiKey.domains.includes("*.ipfscdn.io")) &&
-      (apiKey.services || [])
-        .find((service) => service.name === "storage")
-        ?.actions.includes("read") &&
-      !!(apiKey.services || []).find((service) => service.name === "rpc"),
-  );
-
-  const chainId = contract.chain.id;
-  const { idToChain } = useAllChainsData();
-
-  const chain: StoredChain = (chainId ? idToChain.get(chainId) : undefined) || {
-    name: "Unknown Chain",
-    chainId: chainId || -1,
-    rpc: [],
-    chain: "unknown",
-    nativeCurrency: {
-      name: "Ethereum",
-      symbol: "ETH",
-      decimals: 18,
-    },
-    shortName: "unknown",
-    slug: "unknown",
-    testnet: false,
-    stackType: "",
-  };
-
-  const { register, watch } = useForm<{
-    rpcUrl: string;
-    relayUrl: string;
-    tokenId: string;
-    listingId: string;
-    listingType: string;
-    directListingId: string;
-    englishAuctionId: string;
-    theme: string;
-    primaryColor: string;
-    secondaryColor: string;
-    biconomyApiKey: string;
-    biconomyApiId: string;
-    gasless: string;
-  }>({
-    defaultValues: {
-      rpcUrl: chain?.rpc[0],
-      tokenId: "0",
-      listingId: "0",
-      directListingId: "0",
-      englishAuctionId: "0",
-      theme: "dark",
-      primaryColor: "purple",
-      secondaryColor: "orange",
-    },
-    reValidateMode: "onChange",
-  });
-
-  const configuredChainWithNewRpc = configureChain(chain, {
-    rpc: watch("rpcUrl"),
-  });
-  const minimizedChain = minimizeChain(configuredChainWithNewRpc);
-
-  const iframeSrc = buildIframeSrc(contract, ercOrMarketplace, {
-    chain: JSON.stringify(minimizedChain),
-    clientId: validApiKey?.key || "",
-    ...watch(),
-  });
-
-  const embedCode = useMemo(
-    () =>
-      `<iframe
-    src="${iframeSrc}"
-    width="100%"
-    height="750px"
-    style="max-width:100%;"
-    frameborder="0"
-></iframe>`,
-    [iframeSrc],
-  );
-
-  const { hasCopied, onCopy } = useClipboard(embedCode, 3000);
-  const [showCreateAPIKeyModal, setShowCreateAPIKeyModal] = useState(false);
-  const activeAccount = useActiveAccount();
-  const pathname = usePathname();
-
-  return (
-    <Flex gap={8} direction="column">
-      <LazyCreateAPIKeyDialog
-        prefill={{
-          name: "Embed API Key",
-          domains: "embed.ipfscdn.io",
-        }}
-        open={showCreateAPIKeyModal}
-        onOpenChange={setShowCreateAPIKeyModal}
-        onCreateAndComplete={() => {
-          trackEvent({
-            category: "api-keys",
-            action: "create",
-            label: "success",
-            fromEmbed: true,
-          });
-          apiKeys.refetch();
-        }}
-        enableNebulaServiceByDefault={false}
-      />
-
-      <Flex gap={8} direction={{ base: "column", md: "row" }}>
-        <Card className="flex w-full flex-col gap-5 md:w-1/2">
-          <Heading size="title.sm">Configuration</Heading>
-
-          {ercOrMarketplace === "marketplace" ? (
-            <FormControl>
-              <FormLabel>Listing ID</FormLabel>
-              <Input type="number" {...register("listingId")} />
-              <FormHelperText>
-                The listing ID the embed should display
-              </FormHelperText>
-            </FormControl>
-          ) : null}
-
-          {ercOrMarketplace === "marketplace-v3" ? (
-            <FormControl>
-              <FormLabel>Listing type</FormLabel>
-              <Select {...register("listingType")}>
-                <option value="direct-listing">Direct Listing</option>
-                <option value="english-auction">English Auction</option>
-              </Select>
-              <FormHelperText>
-                The type of listing the embed should display
-              </FormHelperText>
-            </FormControl>
-          ) : null}
-
-          {ercOrMarketplace === "marketplace-v3" &&
-          watch("listingType") === "direct-listing" ? (
-            <FormControl>
-              <FormLabel>Direct Listing ID</FormLabel>
-              <Input type="number" {...register("directListingId")} />
-              <FormHelperText>
-                The direct listing ID the embed should display
-              </FormHelperText>
-            </FormControl>
-          ) : null}
-
-          {ercOrMarketplace === "marketplace-v3" &&
-          watch("listingType") === "english-auction" ? (
-            <FormControl>
-              <FormLabel>English Auction ID</FormLabel>
-              <Input type="number" {...register("englishAuctionId")} />
-              <FormHelperText>
-                The english auction ID the embed should display
-              </FormHelperText>
-            </FormControl>
-          ) : null}
-
-          {ercOrMarketplace === "erc1155" ? (
-            <FormControl>
-              <FormLabel>Token ID</FormLabel>
-              <Input type="number" {...register("tokenId")} />
-              <FormHelperText>
-                The token ID the embed should display
-              </FormHelperText>
-            </FormControl>
-          ) : null}
-
-          <FormControl>
-            <FormLabel>Client ID</FormLabel>
-            {!activeAccount ? (
-              <Button asChild className="w-full">
-                <Link
-                  href={`/login${
-                    pathname ? `?next=${encodeURIComponent(pathname)}` : ""
-                  }`}
-                >
-                  Sign in to create a client ID
-                </Link>
-              </Button>
-            ) : validApiKey ? (
-              <Input
-                readOnly
-                disabled
-                value={`${validApiKey?.name} - ${validApiKey?.key}`}
-              />
-            ) : (
-              <Button
-                className="w-full"
-                onClick={() => {
-                  trackEvent({
-                    category: "api-keys",
-                    action: "create",
-                    label: "attempt",
-                    fromEmbed: true,
-                  });
-
-                  setShowCreateAPIKeyModal(true);
-                }}
-                disabled={createKeyMutation.isPending}
-              >
-                Create Client ID
-              </Button>
-            )}
-
-            <FormHelperText>
-              You need a client ID to use embeds.{" "}
-              <Link
-                href="https://portal.thirdweb.com/account/api-keys"
-                className="text-link-foreground hover:text-foreground"
-                target="_blank"
-              >
-                Learn more
-              </Link>
-              .
-            </FormHelperText>
-          </FormControl>
-
-          <FormControl>
-            <FormLabel>RPC Url</FormLabel>
-            <Input type="url" {...register("rpcUrl")} />
-            <FormHelperText>
-              RPC the embed should use to connect to the blockchain.
-            </FormHelperText>
-          </FormControl>
-
-          {ercOrMarketplace === "marketplace" ||
-          ercOrMarketplace === "marketplace-v3" ? null : (
-            <FormControl gap={4}>
-              <Heading size="title.sm" my={4}>
-                Gasless
-              </Heading>
-              <Select {...register("gasless")} mb={4}>
-                <option value="false">Disabled</option>
-                <option value="openZeppelin">OpenZeppelin Relayer</option>
-                <option value="biconomy">Biconomy Relayer</option>
-              </Select>
-              {watch("gasless") === "openZeppelin" && (
-                <FormControl>
-                  <FormLabel>OpenZeppelin Relayer URL</FormLabel>
-                  <Input type="url" {...register("relayUrl")} />
-                </FormControl>
-              )}
-              {watch("gasless") === "biconomy" && (
-                <Flex gap={4} flexDir="column">
-                  <FormControl>
-                    <FormLabel>Biconomy API key</FormLabel>
-                    <Input type="url" {...register("biconomyApiKey")} />
-                  </FormControl>
-                  <FormControl>
-                    <FormLabel>Biconomy API ID</FormLabel>
-                    <Input type="url" {...register("biconomyApiId")} />
-                  </FormControl>
-                </Flex>
-              )}
-              <FormHelperText>
-                A relayer can be used to make the transaction gasless for the
-                end user.{" "}
-                <Link
-                  target="_blank"
-                  className="text-link-foreground hover:text-foreground"
-                  href="https://blog.thirdweb.com/guides/setup-gasless-transactions"
-                >
-                  Learn more
-                </Link>
-              </FormHelperText>
-            </FormControl>
-          )}
-
-          <FormControl>
-            <Heading size="title.sm" my={4}>
-              Customization
-            </Heading>
-            <FormLabel>Theme</FormLabel>
-            <Select {...register("theme")}>
-              <option value="light">Light</option>
-              <option value="dark">Dark</option>
-              <option value="system">User system</option>
-            </Select>
-            <FormHelperText>
-              Selecting system will make it so the embed would change depending
-              on the user system&apos;s preferences.
-            </FormHelperText>
-          </FormControl>
-
-          <FormControl>
-            <FormLabel>Primary Color</FormLabel>
-            <Select {...register("primaryColor")}>
-              {ercOrMarketplace === "erc721" && (
-                <option value="default">Default</option>
-              )}
-              {colorOptions.map((color) => (
-                <option key={color} value={color}>
-                  {color[0]?.toUpperCase() + color.substring(1)}
-                </option>
-              ))}
-            </Select>
-            <FormHelperText>
-              Used for the main actions button backgrounds.
-            </FormHelperText>
-          </FormControl>
-
-          {ercOrMarketplace === "marketplace" ||
-          ercOrMarketplace === "marketplace-v3" ? (
-            <FormControl>
-              <FormLabel>Secondary Color</FormLabel>
-              <Select {...register("secondaryColor")}>
-                {colorOptions.map((color) => (
-                  <option key={color} value={color}>
-                    {color[0]?.toUpperCase() + color.substring(1)}
-                  </option>
-                ))}
-              </Select>
-              <FormHelperText>
-                Use for secondary actions (like when the user is connected to
-                the wrong network)
-              </FormHelperText>
-            </FormControl>
-          ) : null}
-        </Card>
-
-        <Card className="flex w-full flex-col gap-2 md:w-1/2">
-          <Heading size="title.sm">Embed Code</Heading>
-          <CodeClient code={embedCode} lang="html" />
-          <Button
-            className="w-auto gap-2"
-            variant="outline"
-            onClick={() => {
-              onCopy();
-              trackEvent({
-                category: "embed",
-                action: "click",
-                label: "copy-code",
-                address: contract.address,
-                chainId,
-              });
-            }}
-          >
-            {hasCopied ? (
-              <CheckIcon className="size-4" />
-            ) : (
-              <CopyIcon className="size-4" />
-            )}
-            {hasCopied ? "Copied!" : "Copy to clipboard"}
-          </Button>
-        </Card>
-      </Flex>
-
-      <div className="flex flex-col items-center gap-2">
-        <Heading size="title.sm">Preview</Heading>
-        {!validApiKey ? (
-          <Text>You need to create a client ID to use embeds</Text>
-        ) : iframeSrc ? (
-          <iframe
-            title="thirdweb embed"
-            src={iframeSrc}
-            width="100%"
-            height="750px"
-            frameBorder="0"
-          />
-        ) : null}
-      </div>
-    </Flex>
-  );
-};

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/embed/page.tsx

@@ -1,42 +0,0 @@
-import { notFound, redirect } from "next/navigation";
-import { localhost } from "thirdweb/chains";
-import { getRawAccount } from "../../../../../account/settings/getAccount";
-import { getContractPageParamsInfo } from "../_utils/getContractFromParams";
-import { getContractPageMetadata } from "../_utils/getContractPageMetadata";
-import { EmbedSetupClient } from "./EmbedSetup.client";
-import { EmbedSetup } from "./embed-setup";
-
-export default async function Page(props: {
-  params: Promise<{
-    contractAddress: string;
-    chain_id: string;
-  }>;
-}) {
-  const params = await props.params;
-  const info = await getContractPageParamsInfo(params);
-
-  if (!info) {
-    notFound();
-  }
-
-  const account = await getRawAccount();
-
-  const { contract } = info;
-  if (contract.chain.id === localhost.id) {
-    return <EmbedSetupClient contract={contract} twAccount={account} />;
-  }
-
-  const { embedType } = await getContractPageMetadata(contract);
-
-  if (embedType === null) {
-    redirect(`/${params.chain_id}/${params.contractAddress}`);
-  }
-
-  return (
-    <EmbedSetup
-      contract={contract}
-      ercOrMarketplace={embedType}
-      twAccount={account}
-    />
-  );
-}

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/explorer/ContractExplorerPage.tsx

@@ -35,7 +35,7 @@ export const ContractExplorerPage: React.FC<ContractExplorePageProps> = ({
 
   const functions = getContractFunctionsFromAbi(abi);
   return (
-    <div className="flex h-[70vh] flex-col">
+    <div className="flex h-[70vh] flex-col ">
       {functions && functions.length > 0 ? (
         <ContractFunctionsOverview
           onlyFunctions
@@ -44,7 +44,7 @@ export const ContractExplorerPage: React.FC<ContractExplorePageProps> = ({
           twAccount={twAccount}
         />
       ) : (
-        <div className="flex flex-col items-center justify-center gap-2 text-center">
+        <div className="flex flex-col items-center justify-center gap-2 bg-card text-center">
           <h2 className="font-semibold text-2xl tracking-tight">
             No callable functions discovered in ABI.
           </h2>

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/Claimable.tsx

@@ -26,6 +26,7 @@ import { ToolTipLabel } from "@/components/ui/tooltip";
 import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useMutation } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
 import { TransactionButton } from "components/buttons/TransactionButton";
 import { addDays, fromUnixTime } from "date-fns";
 import { useAllChainsData } from "hooks/chains/allChains";
@@ -119,22 +120,39 @@ function ClaimableModule(props: ModuleInstanceProps) {
     claimConditionQuery.data?.startTimestamp === 0 &&
     claimConditionQuery.data?.endTimestamp === 0;
 
-  const currencyContract = getContract({
-    address: claimConditionQuery.data?.currency || "",
-    chain: props.contract.chain,
-    client: props.contract.client,
-  });
+  const claimConditionCurrency = claimConditionQuery.data?.currency;
 
-  const shouldFetchTokenDecimals =
-    claimConditionQuery.data &&
-    claimConditionQuery.data?.currency !== ZERO_ADDRESS;
+  const shouldFetchCurrencyDecimals =
+    !!claimConditionCurrency && claimConditionCurrency !== ZERO_ADDRESS;
 
-  const currencyDecimalsQuery = useReadContract(decimals, {
-    contract: currencyContract,
-    queryOptions: {
-      enabled: shouldFetchTokenDecimals,
+  const currencyDecimalsQuery = useQuery({
+    queryKey: [
+      "currency-decimals",
+      {
+        contractAddress: props.contract.address,
+        chainId: props.contract.chain.id,
+        claimConditionCurrency,
+      },
+    ],
+    queryFn: async () => {
+      if (!claimConditionCurrency) {
+        throw new Error();
+      }
+      const currencyContract = getContract({
+        address: claimConditionCurrency,
+        chain: props.contract.chain,
+        client: props.contract.client,
+      });
+
+      const decimalsVal = await decimals({
+        contract: currencyContract,
+      });
+
+      return decimalsVal;
     },
+    enabled: shouldFetchCurrencyDecimals,
   });
+
   const tokenDecimalsQuery = useReadContract(decimals, {
     contract: contract,
     queryOptions: {
@@ -265,7 +283,7 @@ function ClaimableModule(props: ModuleInstanceProps) {
           // claim conditions data is present
           claimConditionQuery.data &&
           // token decimals is fetched if it should be fetched
-          (shouldFetchTokenDecimals ? currencyDecimalsQuery.isFetched : true)
+          (shouldFetchCurrencyDecimals ? currencyDecimalsQuery.isFetched : true)
             ? {
                 claimCondition: claimConditionQuery.data,
                 currencyDecimals: currencyDecimalsQuery.data,
@@ -276,7 +294,7 @@ function ClaimableModule(props: ModuleInstanceProps) {
         tokenId,
         isLoading:
           claimConditionQuery.isLoading ||
-          (!!shouldFetchTokenDecimals && currencyDecimalsQuery.isLoading),
+          (!!shouldFetchCurrencyDecimals && currencyDecimalsQuery.isLoading),
       }}
       isOwnerAccount={!!ownerAccount}
       name={props.contractInfo.name}
@@ -565,6 +583,7 @@ function ClaimConditionSection(props: {
             onClick={() => setAddClaimConditionButtonClicked(true)}
             variant="outline"
             className="w-full"
+            disabled={!props.isOwnerAccount}
           >
             Add Claim Condition
           </Button>

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/InstalledModulesTable.tsx

@@ -4,13 +4,13 @@ import { ScrollShadow } from "@/components/ui/ScrollShadow/ScrollShadow";
 import { Alert, AlertTitle } from "@/components/ui/alert";
 import type { Account as TWAccount } from "@3rdweb-sdk/react/hooks/useApi";
 import { CircleSlash } from "lucide-react";
-import type { ContractOptions } from "thirdweb";
+import type { ThirdwebContract } from "thirdweb/contract";
 import type { Account } from "thirdweb/wallets";
 import { ModuleCard } from "./module-card";
 import { useAllModuleContractInfo } from "./moduleContractInfo";
 
 export const InstalledModulesTable = (props: {
-  contract: ContractOptions;
+  contract: ThirdwebContract;
   installedModules: {
     data?: string[];
     isPending: boolean;

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/ModuleForm.tsx

@@ -15,8 +15,9 @@ import { FormProvider, type UseFormReturn, useForm } from "react-hook-form";
 import { toast } from "sonner";
 import {
   type Chain,
-  type ContractOptions,
   type ThirdwebClient,
+  type ThirdwebContract,
+  getContract,
   sendTransaction,
   waitForReceipt,
 } from "thirdweb";
@@ -47,7 +48,7 @@ type FormData = {
 };
 
 type InstallModuleFormProps = {
-  contract: ContractOptions;
+  contract: ThirdwebContract;
   refetchModules: () => void;
   account: Account;
   installedModules: {
@@ -180,11 +181,13 @@ export const InstallModuleForm = (props: InstallModuleFormProps) => {
 
       return Promise.all(
         moduleAddress.map(async (address) => {
-          const result = await resolveImplementation({
-            client,
-            address,
-            chain: contract.chain,
-          });
+          const result = await resolveImplementation(
+            getContract({
+              client,
+              address,
+              chain: contract.chain,
+            }),
+          );
 
           if (!result) {
             throw new Error("Failed to fetch bytecode for module");

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/getModuleInstalledParams.ts

@@ -1,6 +1,10 @@
 import { getThirdwebClient } from "@/constants/thirdweb.server";
-import { fetchPublishedContractVersions } from "components/contract-components/fetch-contracts-with-versions";
+import {
+  fetchLatestPublishedContractVersion,
+  fetchPublishedContractVersions,
+} from "components/contract-components/fetch-contracts-with-versions";
 import { isAddress } from "thirdweb";
+import type { FetchDeployMetadataResult } from "thirdweb/contract";
 import { resolveAddress } from "thirdweb/extensions/ens";
 import invariant from "tiny-invariant";
 import type { ModuleMeta } from "./install-module-params";
@@ -14,16 +18,24 @@ export async function getModuleInstalledParams(ext: ModuleMeta) {
         client: getThirdwebClient(),
         name: ext.publisherAddress,
       });
-  const allPublishedModules = await fetchPublishedContractVersions(
-    publisherAddress,
-    ext.moduleName,
-  );
 
-  // find the version we want
-  const publishedModule =
-    ext.moduleVersion === "latest"
-      ? allPublishedModules[0]
-      : allPublishedModules.find((v) => v.version === ext.moduleVersion);
+  let publishedModule: FetchDeployMetadataResult | undefined = undefined;
+
+  if (ext.moduleVersion === "latest") {
+    publishedModule = await fetchLatestPublishedContractVersion(
+      publisherAddress,
+      ext.moduleName,
+    );
+  } else {
+    const allPublishedModules = await fetchPublishedContractVersions(
+      publisherAddress,
+      ext.moduleName,
+    );
+
+    publishedModule = allPublishedModules.find(
+      (v) => v.version === ext.moduleVersion,
+    );
+  }
 
   invariant(
     publishedModule,