Version Packages (#6787 )

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Update team plan pricing (#6818 )
2025-04-23 00:09:29 +02:00 · 2025-04-22 22:01:34 +00:00 · 2025-04-22 14:19:45 -07:00 · 2025-04-22 23:11:01 +02:00 · 2025-04-23 00:06:34 +05:30 · 2025-04-22 15:51:19 +00:00
901 changed files with 31860 additions and 21841 deletions
@@ -16,6 +16,7 @@ env:
  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
  TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
  TW_SECRET_KEY: ${{ secrets.TW_SECRET_KEY }}
+  TW_CLIENT_ID: ${{ secrets.TW_CLIENT_ID }}
  CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}

 jobs:
@@ -60,7 +61,7 @@ jobs:
        uses: ./.github/composite-actions/install

      - name: Setup Biome
-        uses: biomejs/setup-biome@c016c38f26f2c4a6eb3662679143614a254263fd # v2.3.0
+        uses: biomejs/setup-biome@f382a98e582959e6aaac8e5f8b17b31749018780 # v2.5.0
        with:
          version: latest  

@@ -88,7 +89,7 @@ jobs:
      - run: pnpm test

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

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

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

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

      - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@6bb031afdd8eb862ea3fc1848194185e076637e5 # v3.28.11
+        uses: github/codeql-action/analyze@45775bd8235c68ba998cffa5171334d58593da47 # v3.28.15
@@ -0,0 +1,3 @@
+public-hoist-pattern[]=*import-in-the-middle*
+public-hoist-pattern[]=*require-in-the-middle*
+public-hoist-pattern[]=*pino-pretty*
@@ -81,23 +81,18 @@ function StoryLayout(props: {
  return (
    <QueryClientProvider client={queryClient}>
      <div className="flex min-h-dvh min-w-0 flex-col bg-background text-foreground">
-        <div className="flex justify-end gap-2 border-b p-4">
+        <div className="fixed right-0 bottom-0 z-50 flex justify-end gap-2 p-4">
          <Button
-            onClick={() => setTheme("dark")}
+            onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
            size="sm"
-            variant={theme === "dark" ? "default" : "outline"}
+            variant="outline"
            className="h-auto w-auto shrink-0 rounded-full p-2"
          >
-            <MoonIcon className="size-4" />
-          </Button>
-
-          <Button
-            onClick={() => setTheme("light")}
-            size="sm"
-            variant={theme === "light" ? "default" : "outline"}
-            className="h-auto w-auto shrink-0 rounded-full p-2"
-          >
-            <SunIcon className="size-4" />
+            {theme === "dark" ? (
+              <MoonIcon className="size-4" />
+            ) : (
+              <SunIcon className="size-4" />
+            )}
          </Button>
        </div>

@@ -56,4 +56,9 @@ module.exports = [
  "/learn/glossary/:glossary_slug",
  // -- faucets --
  "/faucets",
+  // -- brand kit --
+  "/brand-kit",
+  // -- universal bridge landing pages --
+  "/universal-bridge-regions/:region_slug",
+  "/enterprise",
 ];
@@ -12,6 +12,7 @@
  "ignoreDependencies": [
    "@storybook/blocks",
    "@thirdweb-dev/service-utils",
-    "@types/color"
+    "@types/color",
+    "fast-xml-parser"
  ]
 }
@@ -1,7 +1,9 @@
 // @ts-check
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const { XMLParser } = require("fast-xml-parser");

 /**
- *
+ * @returns {Promise<Array<{chainId: number, name: string, slug: string}>>}
 */
 async function fetchChainsFromApi() {
  const res = await fetch("https://api.thirdweb.com/v1/chains", {
@@ -82,16 +84,20 @@ module.exports = {
    };
  },
  additionalPaths: async (config) => {
-    // eslint-disable-next-line @typescript-eslint/no-var-requires
-    const FRAMER_PATHS = require("./framer-rewrites");
-    const allChains = await fetchChainsFromApi();
+    const [framerUrls, allChains] = await Promise.all([
+      getFramerXML(),
+      fetchChainsFromApi(),
+    ]);
+
    return [
-      ...FRAMER_PATHS.map((path) => ({
-        loc: path,
-        changefreq: config.changefreq,
-        priority: config.priority,
-        lastmod: config.autoLastmod ? new Date().toISOString() : undefined,
-      })),
+      ...framerUrls.map((url) => {
+        return {
+          loc: url.loc,
+          changefreq: config.changefreq,
+          priority: config.priority,
+          lastmod: config.autoLastmod ? new Date().toISOString() : undefined,
+        };
+      }),
      ...allChains.map((chain) => {
        return {
          loc: `/${chain.slug}`,
@@ -136,3 +142,19 @@ async function createSearchRecordSitemaps(config) {
  // filter out any failed requests
  return chainsForLines.filter(Boolean);
 }
+
+async function getFramerXML() {
+  const framerSiteMapText = await fetch(
+    "https://landing.thirdweb.com/sitemap.xml",
+  ).then((res) => res.text());
+
+  const parser = new XMLParser();
+  const xmlObject = parser.parse(framerSiteMapText);
+
+  /**
+   * @type {Array<{loc: string}>}
+   */
+  const urls = xmlObject.urlset.url;
+
+  return urls;
+}
@@ -12,7 +12,7 @@ const ContentSecurityPolicy = `
  style-src 'self' 'unsafe-inline' vercel.live;
  font-src 'self' vercel.live assets.vercel.com framerusercontent.com fonts.gstatic.com;
  frame-src * data:;
-  script-src 'self' 'unsafe-eval' 'unsafe-inline' 'wasm-unsafe-eval' 'inline-speculation-rules' *.thirdweb.com *.thirdweb-dev.com vercel.live js.stripe.com framerusercontent.com events.framer.com challenges.cloudflare.com static.reo.dev;
+  script-src 'self' 'unsafe-eval' 'unsafe-inline' 'wasm-unsafe-eval' 'inline-speculation-rules' *.thirdweb.com *.thirdweb-dev.com vercel.live js.stripe.com framerusercontent.com events.framer.com challenges.cloudflare.com;
  connect-src * data: blob:;
  worker-src 'self' blob:;
  block-all-mixed-content;
@@ -203,7 +203,6 @@ function getConfig(): NextConfig {
                  type: "memory",
                });
              }
-              config.externals.push("pino-pretty");
              config.module = {
                ...config.module,
                exprContextCritical: false,
@@ -29,29 +29,29 @@
    "@emotion/styled": "11.14.0",
    "@hookform/resolvers": "^3.9.1",
    "@marsidev/react-turnstile": "^1.1.0",
-    "@radix-ui/react-accordion": "^1.2.3",
-    "@radix-ui/react-alert-dialog": "^1.1.6",
-    "@radix-ui/react-avatar": "^1.1.3",
-    "@radix-ui/react-checkbox": "^1.1.4",
-    "@radix-ui/react-dialog": "1.1.6",
-    "@radix-ui/react-dropdown-menu": "^2.1.6",
-    "@radix-ui/react-hover-card": "^1.1.6",
-    "@radix-ui/react-label": "^2.1.2",
-    "@radix-ui/react-popover": "^1.1.6",
-    "@radix-ui/react-progress": "^1.1.2",
-    "@radix-ui/react-radio-group": "^1.2.3",
-    "@radix-ui/react-select": "^2.1.6",
-    "@radix-ui/react-separator": "^1.1.2",
-    "@radix-ui/react-slot": "^1.1.2",
-    "@radix-ui/react-switch": "^1.1.3",
-    "@radix-ui/react-tooltip": "1.1.8",
-    "@sentry/nextjs": "9.5.0",
-    "@shazow/whatsabi": "0.20.0",
-    "@tanstack/react-query": "5.67.3",
-    "@tanstack/react-table": "^8.21.2",
+    "@radix-ui/react-accordion": "^1.2.7",
+    "@radix-ui/react-alert-dialog": "^1.1.10",
+    "@radix-ui/react-avatar": "^1.1.6",
+    "@radix-ui/react-checkbox": "^1.2.2",
+    "@radix-ui/react-dialog": "1.1.10",
+    "@radix-ui/react-dropdown-menu": "^2.1.11",
+    "@radix-ui/react-hover-card": "^1.1.10",
+    "@radix-ui/react-label": "^2.1.4",
+    "@radix-ui/react-popover": "^1.1.10",
+    "@radix-ui/react-progress": "^1.1.4",
+    "@radix-ui/react-radio-group": "^1.3.3",
+    "@radix-ui/react-select": "^2.2.2",
+    "@radix-ui/react-separator": "^1.1.4",
+    "@radix-ui/react-slot": "^1.2.0",
+    "@radix-ui/react-switch": "^1.2.2",
+    "@radix-ui/react-tooltip": "1.2.3",
+    "@sentry/nextjs": "9.13.0",
+    "@shazow/whatsabi": "0.21.0",
+    "@tanstack/react-query": "5.74.4",
+    "@tanstack/react-table": "^8.21.3",
    "@thirdweb-dev/service-utils": "workspace:*",
    "@vercel/functions": "2.0.0",
-    "@vercel/og": "^0.6.5",
+    "@vercel/og": "^0.6.8",
    "abitype": "1.0.8",
    "chakra-react-select": "^4.7.6",
    "class-variance-authority": "^0.7.1",
@@ -59,88 +59,90 @@
    "color": "5.0.0",
    "compare-versions": "^6.1.0",
    "date-fns": "4.1.0",
+    "fast-xml-parser": "^5.2.0",
    "fetch-event-stream": "0.1.5",
    "flat": "^6.0.1",
    "framer-motion": "12.5.0",
    "fuse.js": "7.1.0",
    "idb-keyval": "^6.2.1",
    "input-otp": "^1.4.1",
-    "ioredis": "^5.6.0",
+    "ioredis": "^5.6.1",
    "ipaddr.js": "^2.2.0",
-    "lucide-react": "0.483.0",
-    "next": "15.2.3",
+    "lucide-react": "0.503.0",
+    "next": "15.3.1",
    "next-plausible": "^3.12.4",
    "next-themes": "^0.4.6",
    "nextjs-toploader": "^1.6.12",
-    "nuqs": "^2.4.1",
+    "nuqs": "^2.4.3",
    "p-limit": "^6.2.0",
    "papaparse": "^5.5.2",
    "pluralize": "^8.0.0",
    "posthog-js": "1.67.1",
+    "prettier": "3.5.3",
    "qrcode": "^1.5.3",
-    "react": "19.0.0",
+    "react": "19.1.0",
    "react-children-utilities": "^2.10.0",
    "react-day-picker": "^8.10.1",
-    "react-dom": "19.0.0",
+    "react-dom": "19.1.0",
    "react-dropzone": "^14.3.8",
    "react-error-boundary": "^5.0.0",
-    "react-hook-form": "7.54.2",
+    "react-hook-form": "7.55.0",
    "react-markdown": "^9.0.1",
    "react-table": "^7.8.0",
-    "recharts": "2.15.1",
+    "recharts": "2.15.3",
    "remark-gfm": "4.0.1",
    "responsive-rsc": "0.0.7",
    "server-only": "^0.0.1",
    "shiki": "1.27.0",
-    "sonner": "2.0.1",
+    "sonner": "2.0.3",
    "spdx-correct": "^3.2.0",
    "stripe": "17.7.0",
-    "swagger-ui-react": "^5.20.1",
+    "swagger-ui-react": "^5.21.0",
    "tailwind-merge": "^2.6.0",
    "tailwindcss-animate": "^1.0.7",
    "thirdweb": "workspace:*",
    "tiny-invariant": "^1.3.3",
    "use-debounce": "^10.0.4",
-    "zod": "3.24.2"
+    "zod": "3.24.3"
  },
  "devDependencies": {
    "@chakra-ui/cli": "^2.4.1",
    "@chromatic-com/storybook": "3.2.6",
-    "@next/bundle-analyzer": "15.2.3",
-    "@next/eslint-plugin-next": "15.2.3",
-    "@playwright/test": "1.51.1",
-    "@storybook/addon-essentials": "8.6.4",
-    "@storybook/addon-interactions": "8.6.4",
-    "@storybook/addon-links": "8.6.4",
-    "@storybook/addon-onboarding": "8.6.4",
-    "@storybook/addon-viewport": "8.6.4",
-    "@storybook/blocks": "8.6.4",
-    "@storybook/nextjs": "8.6.4",
-    "@storybook/react": "8.6.4",
-    "@storybook/test": "8.6.4",
+    "@next/bundle-analyzer": "15.3.1",
+    "@next/eslint-plugin-next": "15.3.1",
+    "@playwright/test": "1.52.0",
+    "@storybook/addon-essentials": "8.6.12",
+    "@storybook/addon-interactions": "8.6.12",
+    "@storybook/addon-links": "8.6.12",
+    "@storybook/addon-onboarding": "8.6.12",
+    "@storybook/addon-viewport": "8.6.12",
+    "@storybook/blocks": "8.6.12",
+    "@storybook/nextjs": "8.6.12",
+    "@storybook/react": "8.6.12",
+    "@storybook/test": "8.6.12",
    "@types/color": "4.2.0",
-    "@types/node": "22.13.10",
+    "@types/node": "22.14.1",
    "@types/papaparse": "^5.3.15",
    "@types/pluralize": "^0.0.33",
    "@types/qrcode": "^1.5.5",
-    "@types/react": "19.0.10",
-    "@types/react-dom": "19.0.4",
+    "@types/react": "19.1.2",
+    "@types/react-dom": "19.1.2",
    "@types/react-table": "^7.7.20",
    "@types/spdx-correct": "^3.1.3",
    "@types/swagger-ui-react": "^4.19.0",
    "@typescript-eslint/eslint-plugin": "7.14.1",
    "@typescript-eslint/parser": "7.14.1",
    "autoprefixer": "^10.4.21",
-    "checkly": "5.0.1",
+    "checkly": "5.2.0",
    "eslint": "8.57.0",
    "eslint-config-biome": "1.9.4",
-    "eslint-plugin-react-compiler": "19.0.0-beta-40c6c23-20250301",
-    "eslint-plugin-storybook": "0.11.6",
-    "knip": "5.46.0",
+    "eslint-plugin-react-compiler": "19.0.0-beta-e993439-20250405",
+    "eslint-plugin-storybook": "0.12.0",
+    "knip": "5.50.5",
    "next-sitemap": "^4.2.3",
    "postcss": "8.5.3",
-    "storybook": "8.6.4",
+    "storybook": "8.6.12",
    "tailwindcss": "3.4.17",
-    "typescript": "5.8.2"
+    "typescript": "5.8.3"
  }
 }
@@ -1,9 +1,8 @@
 "use server";
-
-import { getThirdwebClient } from "@/constants/thirdweb.server";
 import { defineDashboardChain } from "lib/defineDashboardChain";
 import { ZERO_ADDRESS, isAddress, toTokens } from "thirdweb";
 import { getWalletBalance } from "thirdweb/wallets";
+import { getUserThirdwebClient } from "../../app/api/lib/getAuthToken";

 type BalanceQueryResponse = Array<{
  balance: string;
@@ -24,6 +23,7 @@ export async function getTokenBalancesFromMoralis(params: {
      error: string;
    }
 > {
+  const client = await getUserThirdwebClient();
  const { contractAddress, chainId } = params;

  if (!isAddress(contractAddress)) {
@@ -39,7 +39,7 @@ export async function getTokenBalancesFromMoralis(params: {
    const balance = await getWalletBalance({
      address: contractAddress,
      chain,
-      client: getThirdwebClient(),
+      client,
    });
    return [
      {
@@ -2,16 +2,16 @@

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

 type WalletNFTApiReturn =
@@ -81,6 +81,7 @@ export async function getWalletNFTs(params: {
      const result = await transformMoralisResponseToNFT(
        await parsedResponse,
        owner,
+        chainId,
      );

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

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

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

    return invoices;
@@ -1,48 +0,0 @@
-"use server";
-
-import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
-import { cookies } from "next/headers";
-import { getAddress } from "thirdweb";
-import { COOKIE_PREFIX_TOKEN } from "../constants/cookie";
-import { API_SERVER_URL } from "../constants/env";
-
-/**
- * Check that the connected wallet is valid for the current active account
- */
-export async function isWalletValidForActiveAccount(params: {
-  address: string;
-  account: Account;
-  authToken: string;
-}) {
-  const cookieStore = await cookies();
-  const authCookieNameForAddress =
-    COOKIE_PREFIX_TOKEN + getAddress(params.address);
-
-  // authToken for this wallet address should be present
-  const authTokenForAddress = cookieStore.get(authCookieNameForAddress)?.value;
-  if (!authTokenForAddress) {
-    return false;
-  }
-
-  // this authToken should be same as current active authToken
-  if (authTokenForAddress !== params.authToken) {
-    return false;
-  }
-
-  // authToken should be valid
-  const accountRes = await fetch(`${API_SERVER_URL}/v1/account/me`, {
-    method: "GET",
-    headers: {
-      Authorization: `Bearer ${authTokenForAddress}`,
-    },
-  });
-
-  if (accountRes.status !== 200) {
-    return false;
-  }
-
-  const account = (await accountRes.json()).data as Account;
-
-  // the current account should match the account fetched for the authToken
-  return account.id === params.account.id;
-}
@@ -270,9 +270,10 @@ type ActiveStatus = {
  ecosystemWallet: boolean;
 };

-export async function isProjectActive(
-  params: AnalyticsQueryParams,
-): Promise<ActiveStatus> {
+export async function isProjectActive(params: {
+  teamId: string;
+  projectId: string;
+}): Promise<ActiveStatus> {
  const searchParams = buildSearchParams(params);
  const res = await fetchAnalytics(
    `v2/active-usage?${searchParams.toString()}`,
@@ -345,7 +346,7 @@ export async function getEcosystemWalletUsage(args: {
    searchParams.append("period", period);
  }
  const res = await fetchAnalytics(
-    `v2/wallets/connects/${ecosystemSlug}?${searchParams.toString()}`,
+    `v2/wallet/connects?${searchParams.toString()}`,
    {
      method: "GET",
      headers: {
@@ -355,7 +356,10 @@ export async function getEcosystemWalletUsage(args: {
  );

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

@@ -74,31 +74,3 @@ export async function getDefaultTeam() {
  }
  return null;
 }
-
-type TeamNebulaWaitList = {
-  onWaitlist: boolean;
-  createdAt: null | string;
-};
-
-export async function getTeamNebulaWaitList(teamSlug: string) {
-  const token = await getAuthToken();
-
-  if (!token) {
-    return null;
-  }
-
-  const res = await fetch(
-    `${API_SERVER_URL}/v1/teams/${teamSlug}/waitlist?scope=nebula`,
-    {
-      headers: {
-        Authorization: `Bearer ${token}`,
-      },
-    },
-  );
-
-  if (res.ok) {
-    return (await res.json()).result as TeamNebulaWaitList;
-  }
-
-  return null;
-}
@@ -0,0 +1,148 @@
+"use server";
+import { getAuthToken } from "app/api/lib/getAuthToken";
+
+const UB_BASE_URL = process.env.NEXT_PUBLIC_THIRDWEB_BRIDGE_HOST;
+
+type Webhook = {
+  url: string;
+  label: string;
+  active: boolean;
+  createdAt: string;
+  id: string;
+  secret: string;
+  version?: number; // TODO (UB) make this mandatory after migration
+};
+
+export async function getWebhooks(props: {
+  clientId: string;
+}) {
+  const authToken = await getAuthToken();
+  const res = await fetch(`${UB_BASE_URL}/v1/developer/webhooks`, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+      "x-client-id-override": props.clientId,
+      Authorization: `Bearer ${authToken}`,
+    },
+  });
+
+  if (!res.ok) {
+    const text = await res.text();
+    throw new Error(text);
+  }
+
+  const json = await res.json();
+  return json.data as Array<Webhook>;
+}
+
+export async function createWebhook(props: {
+  clientId: string;
+  version?: number;
+  url: string;
+  label: string;
+  secret?: string;
+}) {
+  const authToken = await getAuthToken();
+  const res = await fetch(`${UB_BASE_URL}/v1/developer/webhooks`, {
+    method: "POST",
+    body: JSON.stringify({
+      url: props.url,
+      label: props.label,
+      version: props.version,
+      secret: props.secret,
+    }),
+    headers: {
+      "Content-Type": "application/json",
+      "x-client-id-override": props.clientId,
+      Authorization: `Bearer ${authToken}`,
+    },
+  });
+
+  if (!res.ok) {
+    const text = await res.text();
+    throw new Error(text);
+  }
+
+  return;
+}
+
+export async function deleteWebhook(props: {
+  clientId: string;
+  webhookId: string;
+}) {
+  const authToken = await getAuthToken();
+  const res = await fetch(
+    `${UB_BASE_URL}/v1/developer/webhooks/${props.webhookId}`,
+    {
+      method: "DELETE",
+      headers: {
+        "Content-Type": "application/json",
+        "x-client-id-override": props.clientId,
+        Authorization: `Bearer ${authToken}`,
+      },
+    },
+  );
+
+  if (!res.ok) {
+    const text = await res.text();
+    throw new Error(text);
+  }
+
+  return;
+}
+
+export type Fee = {
+  feeRecipient: string;
+  feeBps: number;
+  createdAt: string;
+  updatedAt: string;
+};
+
+export async function getFees(props: {
+  clientId: string;
+}) {
+  const authToken = await getAuthToken();
+  const res = await fetch(`${UB_BASE_URL}/v1/developer/fees`, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+      "x-client-id-override": props.clientId,
+      Authorization: `Bearer ${authToken}`,
+    },
+  });
+
+  if (!res.ok) {
+    const text = await res.text();
+    throw new Error(text);
+  }
+
+  const json = await res.json();
+  return json.data as Fee;
+}
+
+export async function updateFee(props: {
+  clientId: string;
+  feeRecipient: string;
+  feeBps: number;
+}) {
+  const authToken = await getAuthToken();
+  const res = await fetch(`${UB_BASE_URL}/v1/developer/fees`, {
+    method: "PUT",
+    headers: {
+      "Content-Type": "application/json",
+      "x-client-id-override": props.clientId,
+      Authorization: `Bearer ${authToken}`,
+    },
+    body: JSON.stringify({
+      feeRecipient: props.feeRecipient,
+      feeBps: props.feeBps,
+    }),
+  });
+
+  if (!res.ok) {
+    const text = await res.text();
+    throw new Error(text);
+  }
+
+  return;
+}
@@ -0,0 +1,114 @@
+import "server-only";
+import { unstable_cache } from "next/cache";
+
+export type RPCUsageDataItem = {
+  date: string;
+  usageType: "included" | "overage" | "rate-limit";
+  count: string;
+};
+
+export const fetchRPCUsage = unstable_cache(
+  async (params: {
+    teamId: string;
+    projectId?: string;
+    authToken: string;
+    from: string;
+    to: string;
+    period: "day" | "week" | "month" | "year" | "all";
+  }) => {
+    const analyticsEndpoint = process.env.ANALYTICS_SERVICE_URL as string;
+    const url = new URL(`${analyticsEndpoint}/v2/rpc/usage-types`);
+    url.searchParams.set("teamId", params.teamId);
+    if (params.projectId) {
+      url.searchParams.set("projectId", params.projectId);
+    }
+    url.searchParams.set("from", params.from);
+    url.searchParams.set("to", params.to);
+    url.searchParams.set("period", params.period);
+
+    const res = await fetch(url, {
+      headers: {
+        Authorization: `Bearer ${params.authToken}`,
+      },
+    });
+
+    if (!res.ok) {
+      const error = await res.text();
+      return {
+        ok: false as const,
+        error: error,
+      };
+    }
+
+    const resData = await res.json();
+
+    return {
+      ok: true as const,
+      data: resData.data as RPCUsageDataItem[],
+    };
+  },
+  ["rpc-usage"],
+  {
+    revalidate: 60 * 60, // 1 hour
+  },
+);
+
+type Last24HoursRPCUsageApiResponse = {
+  peakRate: {
+    date: string;
+    peakRPS: string;
+  };
+  averageRate: {
+    date: string;
+    averageRate: string;
+    peakRPS: string;
+    includedCount: string;
+    rateLimitedCount: string;
+    overageCount: string;
+  }[];
+  totalCounts: {
+    includedCount: string;
+    rateLimitedCount: string;
+    overageCount: string;
+  };
+};
+
+export const getLast24HoursRPCUsage = unstable_cache(
+  async (params: {
+    teamId: string;
+    projectId?: string;
+    authToken: string;
+  }) => {
+    const analyticsEndpoint = process.env.ANALYTICS_SERVICE_URL as string;
+    const url = new URL(`${analyticsEndpoint}/v2/rpc/24-hours`);
+    url.searchParams.set("teamId", params.teamId);
+    if (params.projectId) {
+      url.searchParams.set("projectId", params.projectId);
+    }
+
+    const res = await fetch(url, {
+      headers: {
+        Authorization: `Bearer ${params.authToken}`,
+      },
+    });
+
+    if (!res.ok) {
+      const error = await res.text();
+      return {
+        ok: false as const,
+        error: error,
+      };
+    }
+
+    const resData = await res.json();
+
+    return {
+      ok: true as const,
+      data: resData.data as Last24HoursRPCUsageApiResponse,
+    };
+  },
+  ["rpc-usage-last-24-hours:v2"],
+  {
+    revalidate: 60, // 1 minute
+  },
+);
@@ -1,6 +1,8 @@
 "use client";

 import { useMutation } from "@tanstack/react-query";
+import { AlertTriangleIcon } from "lucide-react";
+import Link from "next/link";
 import { toast } from "sonner";
 import type {
  GetBillingCheckoutUrlAction,
@@ -8,6 +10,7 @@ import type {
  GetBillingPortalUrlAction,
  GetBillingPortalUrlOptions,
 } from "../actions/billing";
+import type { Team } from "../api/team";
 import { cn } from "../lib/utils";
 import { Spinner } from "./ui/Spinner/Spinner";
 import { Button, type ButtonProps } from "./ui/button";
@@ -16,6 +19,7 @@ type CheckoutButtonProps = Omit<GetBillingCheckoutUrlOptions, "redirectUrl"> & {
  getBillingCheckoutUrl: GetBillingCheckoutUrlAction;
  buttonProps?: Omit<ButtonProps, "children">;
  children: React.ReactNode;
+  billingStatus: Team["billingStatus"];
 };

 export function CheckoutButton({
@@ -25,6 +29,7 @@ export function CheckoutButton({
  getBillingCheckoutUrl,
  children,
  buttonProps,
+  billingStatus,
 }: CheckoutButtonProps) {
  const getUrlMutation = useMutation({
    mutationFn: async () => {
@@ -40,35 +45,65 @@ export function CheckoutButton({
  const errorMessage = "Failed to open checkout page";

  return (
-    <Button
-      {...buttonProps}
-      className={cn(buttonProps?.className, "gap-2")}
-      disabled={getUrlMutation.isPending || buttonProps?.disabled}
-      onClick={async (e) => {
-        buttonProps?.onClick?.(e);
-        getUrlMutation.mutate(undefined, {
-          onSuccess: (res) => {
-            if (!res.url) {
-              toast.error(errorMessage);
-              return;
-            }
+    <div className="flex w-full flex-col items-center gap-2">
+      {/* show warning if the team has an invalid payment method */}
+      {billingStatus === "invalidPayment" && (
+        <BillingWarning teamSlug={teamSlug} />
+      )}
+      <Button
+        {...buttonProps}
+        className={cn(buttonProps?.className, "w-full gap-2")}
+        disabled={
+          // disable button if the team has an invalid payment method
+          // api will return 402 error if the team has an invalid payment method
+          billingStatus === "invalidPayment" ||
+          getUrlMutation.isPending ||
+          buttonProps?.disabled
+        }
+        onClick={async (e) => {
+          buttonProps?.onClick?.(e);
+          getUrlMutation.mutate(undefined, {
+            onSuccess: (res) => {
+              if (!res.url) {
+                toast.error(errorMessage);
+                return;
+              }

-            const tab = window.open(res.url, "_blank");
+              const tab = window.open(res.url, "_blank");

-            if (!tab) {
+              if (!tab) {
+                toast.error(errorMessage);
+                return;
+              }
+            },
+            onError: () => {
              toast.error(errorMessage);
-              return;
-            }
-          },
-          onError: () => {
-            toast.error(errorMessage);
-          },
-        });
-      }}
-    >
-      {getUrlMutation.isPending && <Spinner className="size-4" />}
-      {children}
-    </Button>
+            },
+          });
+        }}
+      >
+        {getUrlMutation.isPending && <Spinner className="size-4" />}
+        {children}
+      </Button>
+    </div>
+  );
+}
+
+function BillingWarning({ teamSlug }: { teamSlug: string }) {
+  return (
+    <div className="flex items-center gap-2 rounded-md border border-amber-200 bg-amber-50 p-3 text-amber-800 dark:border-amber-700/50 dark:bg-amber-900/30 dark:text-amber-400">
+      <AlertTriangleIcon className="h-5 w-5 flex-shrink-0" />
+      <p className="text-sm">
+        You have outstanding invoices. Please{" "}
+        <Link
+          href={`/team/${teamSlug}/~/settings/invoices?status=open`}
+          className="font-medium text-amber-700 underline transition-colors hover:text-amber-900 dark:text-amber-400 dark:hover:text-amber-300"
+        >
+          pay them
+        </Link>{" "}
+        to continue.
+      </p>
+    </div>
  );
 }

@@ -1,36 +1,35 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
-import { BadgeContainer } from "../../../../stories/utils";
-import { getThirdwebClient } from "../../../constants/thirdweb.server";
+import {
+  BadgeContainer,
+  storybookThirdwebClient,
+} from "../../../../stories/utils";
 import { Button } from "../../ui/button";
 import { GradientAvatar } from "./GradientAvatar";

 const meta = {
  title: "blocks/Avatars/GradientAvatar",
  component: Story,
-  parameters: {},
 } satisfies Meta<typeof Story>;

 export default meta;
 type Story = StoryObj<typeof meta>;

-export const Desktop: Story = {
+export const Variants: Story = {
  args: {},
 };

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

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

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

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

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

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

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

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

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

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

@@ -14,23 +16,29 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;

-export const Desktop: Story = {
+export const Variants: Story = {
  args: {},
 };

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

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

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

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

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

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

 const meta = {
@@ -15,17 +15,10 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;

-export const Desktop: Story = {
+export const Variants: 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">
@@ -9,13 +9,12 @@ import { Img } from "./Img";
 const meta = {
  title: "blocks/Img",
  component: Story,
-  parameters: {},
 } satisfies Meta<typeof Story>;

 export default meta;
 type Story = StoryObj<typeof meta>;

-export const Desktop: Story = {
+export const Variants: Story = {
  args: {},
 };

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

 const meta = {
@@ -16,20 +19,13 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;

-export const Desktop: Story = {
+export const Variants: 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 lg:p-10">
+    <div className="container flex max-w-6xl flex-col gap-8 py-10">
      <Variant label="No Chains selected by default" selectedChainIds={[]} />
      <Variant
        label="Polygon, Ethereum selected by default"
@@ -48,6 +44,7 @@ function Variant(props: {
    <BadgeContainer label={props.label}>
      <MultiNetworkSelector
        selectedChainIds={chainIds}
+        client={storybookThirdwebClient}
        onChange={setChainIds}
      />
    </BadgeContainer>
@@ -4,7 +4,8 @@ import { MultiSelect } from "@/components/blocks/multi-select";
 import { SelectWithSearch } from "@/components/blocks/select-with-search";
 import { Badge } from "@/components/ui/badge";
 import { useCallback, useMemo } from "react";
-import { ChainIcon } from "../../../components/icons/ChainIcon";
+import type { ThirdwebClient } from "thirdweb";
+import { ChainIconClient } from "../../../components/icons/ChainIcon";
 import { useAllChainsData } from "../../../hooks/chains/allChains";

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

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

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

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

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

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

  const isLoadingChains = allChains.length === 0;
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { BadgeContainer, mobileViewport } from "../../../stories/utils";
+import { BadgeContainer } from "../../../stories/utils";
 import { SettingsCard } from "./SettingsCard";

 const meta = {
@@ -15,139 +15,130 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;

-export const Desktop: Story = {
+export const Variants: Story = {
  args: {},
 };

-export const Mobile: Story = {
-  args: {},
-  parameters: {
-    viewport: mobileViewport("iphone14"),
-  },
-};
-
 function Story() {
  return (
-    <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
-            bottomText="This is bottom text"
-            header={undefined}
-            errorText={undefined}
-            noPermissionText={undefined}
-            saveButton={undefined}
-          >
-            <ChildrenPlaceholder />
-          </SettingsCard>
-        </BadgeContainer>
+    <div className="container flex max-w-6xl flex-col gap-10 py-10">
+      <BadgeContainer label="No Header">
+        <SettingsCard
+          bottomText="This is bottom text"
+          header={undefined}
+          errorText={undefined}
+          noPermissionText={undefined}
+          saveButton={undefined}
+        >
+          <ChildrenPlaceholder />
+        </SettingsCard>
+      </BadgeContainer>

-        <BadgeContainer label="Header">
-          <SettingsCard
-            bottomText="This is bottom text"
-            header={{
-              title: "Some Title",
-              description: "This is some description for this card",
-            }}
-            errorText={undefined}
-            noPermissionText={undefined}
-            saveButton={undefined}
-          >
-            <ChildrenPlaceholder />
-          </SettingsCard>
-        </BadgeContainer>
+      <BadgeContainer label="Header">
+        <SettingsCard
+          bottomText="This is bottom text"
+          header={{
+            title: "Some Title",
+            description: "This is some description for this card",
+          }}
+          errorText={undefined}
+          noPermissionText={undefined}
+          saveButton={undefined}
+        >
+          <ChildrenPlaceholder />
+        </SettingsCard>
+      </BadgeContainer>

-        <BadgeContainer label="Error">
-          <SettingsCard
-            bottomText="This is bottom text"
-            header={{
-              title: "Some Title",
-              description: "This is some description for this card",
-            }}
-            errorText="This is error text"
-            noPermissionText={undefined}
-            saveButton={undefined}
-          >
-            <ChildrenPlaceholder />
-          </SettingsCard>
-        </BadgeContainer>
+      <BadgeContainer label="Error">
+        <SettingsCard
+          bottomText="This is bottom text"
+          header={{
+            title: "Some Title",
+            description: "This is some description for this card",
+          }}
+          errorText="This is error text"
+          noPermissionText={undefined}
+          saveButton={undefined}
+        >
+          <ChildrenPlaceholder />
+        </SettingsCard>
+      </BadgeContainer>

-        <BadgeContainer label="No Permission">
-          <SettingsCard
-            bottomText="This is bottom text"
-            header={{
-              title: "Some Title",
-              description: "This is some description for this card",
-            }}
-            saveButton={{
-              disabled: false,
-              isPending: false,
-              onClick: () => {},
-            }}
-            noPermissionText="You do not have permission to edit this"
-            errorText={undefined}
-          >
-            <ChildrenPlaceholder />
-          </SettingsCard>
-        </BadgeContainer>
+      <BadgeContainer label="No Permission">
+        <SettingsCard
+          bottomText="This is bottom text"
+          header={{
+            title: "Some Title",
+            description: "This is some description for this card",
+          }}
+          saveButton={{
+            disabled: false,
+            isPending: false,
+            onClick: () => {},
+          }}
+          noPermissionText="You do not have permission to edit this"
+          errorText={undefined}
+        >
+          <ChildrenPlaceholder />
+        </SettingsCard>
+      </BadgeContainer>

-        <BadgeContainer label="Save">
-          <SettingsCard
-            bottomText="This is bottom text"
-            header={{
-              title: "Some Title",
-              description: "This is some description for this card",
-            }}
-            saveButton={{
-              disabled: false,
-              isPending: false,
-              onClick: () => {},
-            }}
-            noPermissionText={undefined}
-            errorText={undefined}
-          >
-            <ChildrenPlaceholder />
-          </SettingsCard>
-        </BadgeContainer>
+      <BadgeContainer label="Save">
+        <SettingsCard
+          bottomText="This is bottom text"
+          header={{
+            title: "Some Title",
+            description: "This is some description for this card",
+          }}
+          saveButton={{
+            disabled: false,
+            isPending: false,
+            onClick: () => {},
+          }}
+          noPermissionText={undefined}
+          errorText={undefined}
+        >
+          <ChildrenPlaceholder />
+        </SettingsCard>
+      </BadgeContainer>

-        <BadgeContainer label="Save Disabled">
-          <SettingsCard
-            bottomText="This is bottom text"
-            header={{
-              title: "Some Title",
-              description: "This is some description for this card",
-            }}
-            saveButton={{
-              disabled: true,
-              isPending: false,
-              onClick: () => {},
-            }}
-            noPermissionText={undefined}
-            errorText={undefined}
-          >
-            <ChildrenPlaceholder />
-          </SettingsCard>
-        </BadgeContainer>
+      <BadgeContainer label="Save Disabled">
+        <SettingsCard
+          bottomText="This is bottom text"
+          header={{
+            title: "Some Title",
+            description: "This is some description for this card",
+          }}
+          saveButton={{
+            disabled: true,
+            isPending: false,
+            onClick: () => {},
+          }}
+          noPermissionText={undefined}
+          errorText={undefined}
+        >
+          <ChildrenPlaceholder />
+        </SettingsCard>
+      </BadgeContainer>

-        <BadgeContainer label="Save Loading">
-          <SettingsCard
-            bottomText="This is bottom text"
-            header={{
-              title: "Some Title",
-              description: "This is some description for this card",
-            }}
-            saveButton={{
-              disabled: false,
-              isPending: true,
-              onClick: () => {},
-            }}
-            noPermissionText={undefined}
-            errorText={undefined}
-          >
-            <ChildrenPlaceholder />
-          </SettingsCard>
-        </BadgeContainer>
-      </div>
+      <BadgeContainer label="Save Loading">
+        <SettingsCard
+          bottomText="This is bottom text"
+          header={{
+            title: "Some Title",
+            description: "This is some description for this card",
+          }}
+          saveButton={{
+            disabled: false,
+            isPending: true,
+            onClick: () => {},
+          }}
+          noPermissionText={undefined}
+          errorText={undefined}
+        >
+          <ChildrenPlaceholder />
+        </SettingsCard>
+      </BadgeContainer>
    </div>
  );
 }
@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { mobileViewport } from "../../../stories/utils";
 import { SidebarLayout } from "./SidebarLayout";

 const meta = {
@@ -15,17 +14,10 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;

-export const Desktop: Story = {
+export const Variants: Story = {
  args: {},
 };

-export const Mobile: Story = {
-  args: {},
-  parameters: {
-    viewport: mobileViewport("iphone14"),
-  },
-};
-
 function Story() {
  return (
    <SidebarLayout
@@ -17,6 +17,7 @@ import { NavLink } from "../ui/NavLink";
 import { Separator } from "../ui/separator";
 import { MobileSidebar, useActiveSidebarLink } from "./MobileSidebar";
 import { CustomSidebar, type SidebarLink } from "./Sidebar";
+import { AppFooter } from "./app-footer";

 export function SidebarLayout(props: {
  sidebarLinks: SidebarLink[];
@@ -54,7 +55,6 @@ export function FullWidthSidebarLayout(props: {
  footerSidebarLinks?: SidebarLink[];
  children: React.ReactNode;
  className?: string;
-  footer?: React.ReactNode;
 }) {
  const { contentSidebarLinks, children, footerSidebarLinks } = props;
  return (
@@ -65,7 +65,7 @@ export function FullWidthSidebarLayout(props: {
      )}
    >
      {/* left - sidebar */}
-      <Sidebar collapsible="icon" side="left">
+      <Sidebar collapsible="icon" side="left" className="pt-2">
        <SidebarContent>
          <SidebarGroup>
            <SidebarGroupContent>
@@ -95,10 +95,10 @@ export function FullWidthSidebarLayout(props: {
          links={[...contentSidebarLinks, ...(footerSidebarLinks || [])]}
        />

-        <main className="container z-0 flex min-w-0 max-w-[1280px] grow flex-col pb-20 max-sm:w-full lg:pt-6">
+        <main className="z-0 flex min-w-0 grow flex-col max-sm:w-full">
          {children}
        </main>
-        {props.footer}
+        <AppFooter containerClassName="max-w-7xl" />
      </div>
    </div>
  );
@@ -156,7 +156,7 @@ function MobileSidebarTrigger(props: { links: SidebarLink[] }) {
  const activeLink = useActiveSidebarLink(props.links);

  return (
-    <div className="mb-4 flex items-center gap-3 border-b px-4 py-4 lg:hidden">
+    <div className="flex items-center gap-3 border-b px-4 py-4 lg:hidden">
      <SidebarTrigger className="size-4" />
      <Separator orientation="vertical" className="h-4" />
      {activeLink && <span className="text-sm">{activeLink.label}</span>}
@@ -1,6 +1,9 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
-import { BadgeContainer, mobileViewport } from "../../../stories/utils";
+import {
+  BadgeContainer,
+  storybookThirdwebClient,
+} from "../../../stories/utils";
 import { SingleNetworkSelector } from "./NetworkSelectors";

 const meta = {
@@ -16,20 +19,13 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;

-export const Desktop: Story = {
+export const Variants: 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 lg:p-10">
+    <div className="container flex max-w-6xl flex-col gap-8 py-10">
      <Variant label="No Chain ID selected by default" chainId={undefined} />
      <Variant label="Polygon selected by default" chainId={137} />
      <Variant
@@ -50,6 +46,7 @@ function Variant(props: {
  return (
    <BadgeContainer label={props.label}>
      <SingleNetworkSelector
+        client={storybookThirdwebClient}
        chainId={chainId}
        onChange={setChainId}
        chainIds={props.chainIds}
@@ -12,17 +12,54 @@ import Link from "next/link";

 type AppFooterProps = {
  className?: string;
+  containerClassName?: string;
 };

+const footerLinks = [
+  {
+    href: "/home",
+    label: "Home",
+  },
+  {
+    href: "https://blog.thirdweb.com",
+    label: "Blog",
+  },
+  {
+    href: "https://portal.thirdweb.com/changelog",
+    label: "Changelog",
+  },
+  {
+    href: "https://feedback.thirdweb.com/",
+    label: "Feedback",
+  },
+  {
+    href: "https://thirdweb.com/privacy-policy",
+    label: "Privacy Policy",
+  },
+  {
+    href: "https://thirdweb.com/terms",
+    label: "Terms of Service",
+  },
+  {
+    href: "https://thirdweb.com/chainlist",
+    label: "Chainlist",
+  },
+];
+
 export function AppFooter(props: AppFooterProps) {
  return (
    <footer
      className={cn(
-        "w-full border-border border-t bg-card py-6 md:py-8",
+        "w-full border-border border-t py-6 md:py-8",
        props.className,
      )}
    >
-      <div className="container flex flex-col gap-4 md:gap-6">
+      <div
+        className={cn(
+          "container flex flex-col gap-4 md:gap-6",
+          props.containerClassName,
+        )}
+      >
        {/* top row */}
        <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">
@@ -74,57 +111,28 @@ export function AppFooter(props: AppFooterProps) {
        </div>
        {/* bottom row */}
        <div className="grid grid-flow-col grid-cols-2 grid-rows-5 gap-2 md:flex md:flex-row md:justify-between">
-          <Link
-            className="px-[10px] py-[6px] text-muted-foreground text-sm hover:underline"
-            href="/home"
-          >
-            Home
-          </Link>
-          <Link
-            className="px-[10px] py-[6px] text-muted-foreground text-sm hover:underline"
-            href="https://blog.thirdweb.com"
-            target="_blank"
-          >
-            Blog
-          </Link>
-          <Link
-            className="px-[10px] py-[6px] text-muted-foreground text-sm hover:underline"
-            href="https://portal.thirdweb.com/changelog"
-            target="_blank"
-          >
-            Changelog
-          </Link>
-          <Link
-            className="px-[10px] py-[6px] text-muted-foreground text-sm hover:underline"
-            href="https://feedback.thirdweb.com/"
-            target="_blank"
-          >
-            Feedback
-          </Link>
-          <Link
-            className="px-[10px] py-[6px] text-muted-foreground text-sm hover:underline"
-            href="https://thirdweb.com/privacy-policy"
-            target="_blank"
-          >
-            Privacy Policy
-          </Link>
-          <Link
-            className="px-[10px] py-[6px] text-muted-foreground text-sm hover:underline"
-            href="https://thirdweb.com/terms"
-            target="_blank"
-          >
-            Terms of Service
-          </Link>
-
-          <Link
-            className="px-[10px] py-[6px] text-muted-foreground text-sm hover:underline"
-            href="https://thirdweb.com/chainlist"
-            target="_blank"
-          >
-            Chain List
-          </Link>
+          {footerLinks.map((link) => (
+            <FooterLink key={link.href} {...link} />
+          ))}
        </div>
      </div>
    </footer>
  );
 }
+
+function FooterLink(props: {
+  href: string;
+  label: string;
+  prefetch?: boolean;
+}) {
+  return (
+    <Link
+      href={props.href}
+      prefetch={false}
+      className="px-0 py-[6px] text-muted-foreground text-sm hover:underline"
+      target="_blank"
+    >
+      {props.label}
+    </Link>
+  );
+}
@@ -17,7 +17,7 @@ import {
 } from "@/components/ui/chart";
 import { formatDate } from "date-fns";
 import { useMemo } from "react";
-import { Area, AreaChart, CartesianGrid, XAxis } from "recharts";
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts";
 import {
  EmptyChartState,
  LoadingChartState,
@@ -30,11 +30,19 @@ type ThirdwebAreaChartProps<TConfig extends ChartConfig> = {
    description?: string;
    titleClassName?: string;
  };
+  customHeader?: React.ReactNode;
  // chart config
  config: TConfig;
  data: Array<Record<keyof TConfig, number> & { time: number | string | Date }>;
  showLegend?: boolean;

+  yAxis?: boolean;
+  xAxis?: {
+    sameDay?: boolean;
+  };
+
+  variant?: "stacked" | "individual";
+
  // chart className
  chartClassName?: string;
  isPending: boolean;
@@ -60,6 +68,8 @@ export function ThirdwebAreaChart<TConfig extends ChartConfig>(
        </CardHeader>
      )}

+      {props.customHeader && props.customHeader}
+
      <CardContent className={cn(!props.header && "pt-6")}>
        <ChartContainer config={props.config} className={props.chartClassName}>
          {props.isPending ? (
@@ -69,15 +79,21 @@ export function ThirdwebAreaChart<TConfig extends ChartConfig>(
          ) : (
            <AreaChart accessibilityLayer data={props.data}>
              <CartesianGrid vertical={false} />
+              {props.yAxis && <YAxis tickLine={false} axisLine={false} />}
              <XAxis
                dataKey="time"
                tickLine={false}
                axisLine={false}
                tickMargin={20}
-                tickFormatter={(value) => formatDate(new Date(value), "MMM dd")}
+                tickFormatter={(value) =>
+                  formatDate(
+                    new Date(value),
+                    props.xAxis?.sameDay ? "MMM dd, HH:mm" : "MMM dd",
+                  )
+                }
              />
              <ChartTooltip
-                cursor={false}
+                cursor={true}
                content={
                  <ChartTooltipContent
                    hideLabel={
@@ -110,17 +126,29 @@ export function ThirdwebAreaChart<TConfig extends ChartConfig>(
                  </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"
-                />
-              ))}
+              {configKeys.map((key) =>
+                key === "maxLine" ? (
+                  <Area
+                    key={key}
+                    type="monotone"
+                    dataKey="maxLine"
+                    stroke="#ef4444"
+                    strokeWidth={2}
+                    strokeDasharray="5 5"
+                    fill="none"
+                  />
+                ) : (
+                  <Area
+                    key={key}
+                    dataKey={key}
+                    type="natural"
+                    fill={`url(#fill_${key})`}
+                    fillOpacity={0.4}
+                    stroke={`var(--color-${key})`}
+                    stackId={props.variant !== "stacked" ? undefined : "a"}
+                  />
+                ),
+              )}

              {props.showLegend && (
                <ChartLegend
@@ -32,6 +32,7 @@ type ThirdwebBarChartProps<TConfig extends ChartConfig> = {
    description?: string;
    titleClassName?: string;
  };
+  customHeader?: React.ReactNode;
  // chart config
  config: TConfig;
  data: Array<Record<keyof TConfig, number> & { time: number | string | Date }>;
@@ -41,7 +42,9 @@ type ThirdwebBarChartProps<TConfig extends ChartConfig> = {
  chartClassName?: string;
  isPending: boolean;
  toolTipLabelFormatter?: (label: string, payload: unknown) => React.ReactNode;
+  toolTipValueFormatter?: (value: unknown) => React.ReactNode;
  hideLabel?: boolean;
+  emptyChartState?: React.ReactElement;
 };

 export function ThirdwebBarChart<TConfig extends ChartConfig>(
@@ -65,12 +68,14 @@ export function ThirdwebBarChart<TConfig extends ChartConfig>(
        </CardHeader>
      )}

+      {props.customHeader && props.customHeader}
+
      <CardContent className={cn(!props.header && "pt-6")}>
        <ChartContainer config={props.config} className={props.chartClassName}>
          {props.isPending ? (
            <LoadingChartState />
          ) : props.data.length === 0 ? (
-            <EmptyChartState />
+            <EmptyChartState>{props.emptyChartState}</EmptyChartState>
          ) : (
            <BarChart accessibilityLayer data={props.data}>
              <CartesianGrid vertical={false} />
@@ -88,6 +93,7 @@ export function ThirdwebBarChart<TConfig extends ChartConfig>(
                      props.hideLabel !== undefined ? props.hideLabel : true
                    }
                    labelFormatter={props.toolTipLabelFormatter}
+                    valueFormatter={props.toolTipValueFormatter}
                  />
                }
              />
@@ -96,25 +102,15 @@ export function ThirdwebBarChart<TConfig extends ChartConfig>(
                  content={<ChartLegendContent className="pt-5" />}
                />
              )}
-              {configKeys.map((key, idx) => (
+              {configKeys.map((key) => (
                <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]
-                  }
+                  fill={props.config[key]?.color}
+                  radius={[4, 4, 4, 4]}
                  strokeWidth={1}
                  className="stroke-background"
                />
@@ -8,7 +8,7 @@ import {
 } from "@/components/ui/select";
 import type { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
-import { BadgeContainer, mobileViewport } from "../../../stories/utils";
+import { BadgeContainer } from "../../../stories/utils";
 import { type CodeEnvironment, CodeSegment } from "./code-segment.client";

 const meta = {
@@ -24,17 +24,10 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;

-export const Desktop: Story = {
+export const Variants: Story = {
  args: {},
 };

-export const Mobile: Story = {
-  args: {},
-  parameters: {
-    viewport: mobileViewport("iphone14"),
-  },
-};
-
 type Mode = "default" | "no-tabs" | "only-tabs";

 function Story() {
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { useMemo, useState } from "react";
-import { BadgeContainer, mobileViewport } from "../../../stories/utils";
+import { BadgeContainer } from "../../../stories/utils";
 import { MultiSelect } from "./multi-select";

 const meta = {
@@ -16,17 +16,10 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;

-export const Desktop: Story = {
+export const Variants: Story = {
  args: {},
 };

-export const Mobile: Story = {
-  args: {},
-  parameters: {
-    viewport: mobileViewport("iphone14"),
-  },
-};
-
 function createList(len: number) {
  return Array.from({ length: len }, (_, i) => ({
    value: `${i}`,
@@ -36,7 +29,7 @@ function createList(len: number) {

 function Story() {
  return (
-    <div className="mx-auto flex w-full max-w-[600px] flex-col gap-6 px-4 py-6">
+    <div className="container flex max-w-6xl flex-col gap-6 py-10">
      <VariantTest defaultValues={[]} storyLabel="5 items" listLen={5} />
      <VariantTest defaultValues={[]} storyLabel="5000 items" listLen={5000} />
      <VariantTest
@@ -47,7 +47,12 @@ interface MultiSelectProps
    searchTerm: string,
  ) => boolean;

+  popoverContentClassName?: string;
+  customTrigger?: React.ReactNode;
  renderOption?: (option: { value: string; label: string }) => React.ReactNode;
+  align?: "center" | "start" | "end";
+  side?: "left" | "right" | "top" | "bottom";
+  showSelectedValuesInModal?: boolean;
 }

 export const MultiSelect = forwardRef<HTMLButtonElement, MultiSelectProps>(
@@ -62,6 +67,8 @@ export const MultiSelect = forwardRef<HTMLButtonElement, MultiSelectProps>(
      overrideSearchFn,
      renderOption,
      searchPlaceholder,
+      popoverContentClassName,
+      showSelectedValuesInModal = false,
      ...props
    },
    ref,
@@ -155,111 +162,100 @@ export const MultiSelect = forwardRef<HTMLButtonElement, MultiSelectProps>(
    return (
      <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen} modal>
        <PopoverTrigger asChild>
-          <Button
-            ref={ref}
-            {...props}
-            onClick={handleTogglePopover}
-            className={cn(
-              "flex h-auto min-h-10 w-full items-center justify-between rounded-md border border-border bg-inherit p-3 hover:bg-inherit",
-              className,
-            )}
-          >
-            {selectedValues.length > 0 ? (
-              <div className="flex w-full justify-between">
-                {/* badges */}
-                <div className="flex flex-wrap items-center gap-1.5">
-                  {selectedValues.slice(0, maxCount).map((value) => {
-                    const option = options.find((o) => o.value === value);
-                    if (!option) {
-                      return null;
-                    }
-
-                    return (
-                      <ClosableBadge
-                        key={value}
-                        label={option.label}
-                        onClose={() => toggleOption(value)}
-                      />
-                    );
-                  })}
-
-                  {/* +X more */}
-                  {selectedValues.length > maxCount && (
-                    <ClosableBadge
-                      label={`+ ${selectedValues.length - maxCount} more`}
-                      onClose={clearExtraOptions}
-                    />
-                  )}
-                </div>
-
-                <div className="flex items-center justify-between gap-2">
-                  {/* Clear All */}
-                  {/* biome-ignore lint/a11y/useKeyWithClickEvents: <explanation> */}
-                  {/* biome-ignore lint/a11y/useFocusableInteractive: <explanation> */}
-                  <div
-                    role="button"
-                    onClick={(event) => {
-                      event.stopPropagation();
-                      handleClear();
-                    }}
-                    className="rounded p-1 hover:bg-accent"
-                  >
-                    <XIcon className="h-4 cursor-pointer text-muted-foreground" />
-                  </div>
-
-                  <Separator
-                    orientation="vertical"
-                    className="flex h-full min-h-6"
+          {props.customTrigger || (
+            <Button
+              ref={ref}
+              {...props}
+              onClick={handleTogglePopover}
+              className={cn(
+                "flex h-auto min-h-10 w-full items-center justify-between rounded-md border border-border bg-inherit p-3 hover:bg-inherit",
+                className,
+              )}
+            >
+              {selectedValues.length > 0 ? (
+                <div className="flex w-full items-center justify-between">
+                  <SelectedChainsBadges
+                    selectedValues={selectedValues}
+                    options={options}
+                    maxCount={maxCount}
+                    onClose={handleClear}
+                    toggleOption={toggleOption}
+                    clearExtraOptions={clearExtraOptions}
                  />
+                  <div className="flex items-center justify-between gap-2">
+                    {/* Clear All */}
+                    {/* biome-ignore lint/a11y/useKeyWithClickEvents: <explanation> */}
+                    {/* biome-ignore lint/a11y/useFocusableInteractive: <explanation> */}
+                    <div
+                      role="button"
+                      onClick={(event) => {
+                        event.stopPropagation();
+                        handleClear();
+                      }}
+                      className="rounded p-1 hover:bg-accent"
+                    >
+                      <XIcon className="h-4 cursor-pointer text-muted-foreground" />
+                    </div>
+
+                    <Separator
+                      orientation="vertical"
+                      className="flex h-full min-h-6"
+                    />
+                    <ChevronDown className="h-4 cursor-pointer text-muted-foreground" />
+                  </div>
+                </div>
+              ) : (
+                <div className="flex w-full items-center justify-between">
+                  <span className="text-muted-foreground text-sm">
+                    {placeholder}
+                  </span>
                  <ChevronDown className="h-4 cursor-pointer text-muted-foreground" />
                </div>
-              </div>
-            ) : (
-              <div className="flex w-full items-center justify-between">
-                <span className="text-muted-foreground text-sm">
-                  {placeholder}
-                </span>
-                <ChevronDown className="h-4 cursor-pointer text-muted-foreground" />
-              </div>
-            )}
-          </Button>
+              )}
+            </Button>
+          )}
        </PopoverTrigger>
        <PopoverContent
-          className="p-0"
-          align="center"
+          className={cn(
+            "flex max-h-[60vh] flex-col p-0",
+            popoverContentClassName,
+          )}
+          align={props.align}
+          side={props.side}
          sideOffset={10}
          onEscapeKeyDown={() => setIsPopoverOpen(false)}
          style={{
            width: "var(--radix-popover-trigger-width)",
-            maxHeight: "var(--radix-popover-content-available-height)",
+            height:
+              "calc(var(--radix-popover-content-available-height) - 40px)",
          }}
          ref={popoverElRef}
        >
-          <div>
-            {/* Search */}
-            <div className="relative">
-              <Input
-                placeholder={searchPlaceholder || "Search"}
-                value={searchValue}
-                onChange={(e) => setSearchValue(e.target.value)}
-                className="!h-auto rounded-b-none border-0 border-border border-b py-4 pl-10 focus-visible:ring-0 focus-visible:ring-offset-0"
-                onKeyDown={handleInputKeyDown}
-              />
-              <SearchIcon className="-translate-y-1/2 absolute top-1/2 left-4 size-4 text-muted-foreground" />
-            </div>
+          {/* Search */}
+          <div className="relative">
+            <Input
+              placeholder={searchPlaceholder || "Search"}
+              value={searchValue}
+              onChange={(e) => setSearchValue(e.target.value)}
+              className="!h-auto rounded-b-none border-0 border-border border-b py-4 pl-10 focus-visible:ring-0 focus-visible:ring-offset-0"
+              onKeyDown={handleInputKeyDown}
+            />
+            <SearchIcon className="-translate-y-1/2 absolute top-1/2 left-4 size-4 text-muted-foreground" />
+          </div>

+          {optionsToShow.length === 0 && (
+            <div className="flex flex-1 flex-col items-center justify-center py-10 text-sm">
+              No results found
+            </div>
+          )}
+
+          {optionsToShow.length > 0 && (
            <ScrollShadow
-              scrollableClassName="max-h-[min(calc(var(--radix-popover-content-available-height)-60px),350px)] p-1"
-              className="rounded"
+              scrollableClassName="p-1 h-full"
+              className="flex-1 rounded"
            >
              {/* List */}
              <div>
-                {optionsToShow.length === 0 && (
-                  <div className="flex justify-center py-10">
-                    No results found
-                  </div>
-                )}
-
                {optionsToShow.map((option, i) => {
                  const isSelected = selectedValues.includes(option.value);
                  return (
@@ -293,7 +289,20 @@ export const MultiSelect = forwardRef<HTMLButtonElement, MultiSelectProps>(
                })}
              </div>
            </ScrollShadow>
-          </div>
+          )}
+
+          {showSelectedValuesInModal && selectedValues.length > 0 && (
+            <div className="border-t px-3 py-3">
+              <SelectedChainsBadges
+                selectedValues={selectedValues}
+                options={options}
+                maxCount={maxCount}
+                onClose={handleClear}
+                toggleOption={toggleOption}
+                clearExtraOptions={clearExtraOptions}
+              />
+            </div>
+          )}
        </PopoverContent>
      </Popover>
    );
@@ -319,3 +328,44 @@ function ClosableBadge(props: {
 }

 MultiSelect.displayName = "MultiSelect";
+
+function SelectedChainsBadges(props: {
+  selectedValues: string[];
+  options: {
+    label: string;
+    value: string;
+  }[];
+  maxCount: number;
+  onClose: () => void;
+  toggleOption: (value: string) => void;
+  clearExtraOptions: () => void;
+}) {
+  const { selectedValues, options, maxCount, toggleOption, clearExtraOptions } =
+    props;
+  return (
+    <div className="flex flex-wrap items-center gap-1.5">
+      {selectedValues.slice(0, maxCount).map((value) => {
+        const option = options.find((o) => o.value === value);
+        if (!option) {
+          return null;
+        }
+
+        return (
+          <ClosableBadge
+            key={value}
+            label={option.label}
+            onClose={() => toggleOption(value)}
+          />
+        );
+      })}
+
+      {/* +X more */}
+      {selectedValues.length > maxCount && (
+        <ClosableBadge
+          label={`+ ${selectedValues.length - maxCount} more`}
+          onClose={clearExtraOptions}
+        />
+      )}
+    </div>
+  );
+}
@@ -3,33 +3,36 @@ import type { Team } from "@/api/team";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { ToolTipLabel } from "@/components/ui/tooltip";
-import { TrackedLinkTW } from "@/components/ui/tracked-link";
 import { cn } from "@/lib/utils";
-import { CheckIcon, CircleAlertIcon, CircleDollarSignIcon } from "lucide-react";
+import { CheckIcon, CircleDollarSignIcon } from "lucide-react";
+import Link from "next/link";
 import type React from "react";
 import { TEAM_PLANS } from "utils/pricing";
+import { useTrack } from "../../../hooks/analytics/useTrack";
 import { remainingDays } from "../../../utils/date-utils";
 import type { GetBillingCheckoutUrlAction } from "../../actions/billing";
+import type { ProductSKU } from "../../lib/billing";
 import { CheckoutButton } from "../billing";

-type ButtonProps = React.ComponentProps<typeof Button>;
-
-const PRO_CONTACT_US_URL =
-  "https://meetings.hubspot.com/sales-thirdweb/thirdweb-pro";
+type PricingCardCta = {
+  hint?: string;
+  title: string;
+  onClick?: () => void;
+} & (
+  | {
+      type: "link";
+      href: string;
+    }
+  | {
+      type: "checkout";
+    }
+);

 type PricingCardProps = {
  teamSlug: string;
-  billingPlan: Exclude<Team["billingPlan"], "free">;
-  cta?: {
-    hint?: string;
-    title: string;
-    tracking: {
-      category: string;
-      label?: string;
-    };
-    variant?: ButtonProps["variant"];
-    onClick?: () => void;
-  };
+  billingStatus: Team["billingStatus"];
+  billingPlan: keyof typeof TEAM_PLANS;
+  cta?: PricingCardCta;
  ctaHint?: string;
  highlighted?: boolean;
  current?: boolean;
@@ -39,6 +42,7 @@ type PricingCardProps = {

 export const PricingCard: React.FC<PricingCardProps> = ({
  teamSlug,
+  billingStatus,
  billingPlan,
  cta,
  highlighted = false,
@@ -49,13 +53,23 @@ export const PricingCard: React.FC<PricingCardProps> = ({
  const plan = TEAM_PLANS[billingPlan];
  const isCustomPrice = typeof plan.price === "string";

+  const trackEvent = useTrack();
  const remainingTrialDays =
    (activeTrialEndsAt ? remainingDays(activeTrialEndsAt) : 0) || 0;

+  const handleCTAClick = () => {
+    cta?.onClick?.();
+    trackEvent({
+      category: "account",
+      label: `${billingPlan}Plan`,
+      action: "click",
+    });
+  };
+
  return (
    <div
      className={cn(
-        "z-10 flex w-full flex-col gap-6 rounded-xl border border-border bg-card p-4 md:p-6",
+        "z-10 flex w-full flex-col gap-4 rounded-xl border border-border bg-card p-4",
        current && "border-blue-500",
        highlighted && "border-active-border",
      )}
@@ -71,13 +85,13 @@ export const PricingCard: React.FC<PricingCardProps> = ({
      <div className="flex flex-col gap-5">
        {/* Title + Desc */}
        <div>
-          <div className="mb-2 flex flex-row items-center gap-2">
+          <div className="mb-1 flex flex-row items-center gap-3">
            <h3 className="font-semibold text-2xl capitalize tracking-tight">
              {plan.title}
            </h3>
            {current && <Badge className="capitalize">Current plan</Badge>}
          </div>
-          <p className="max-w-[320px] text-muted-foreground">
+          <p className="max-w-[320px] text-muted-foreground text-sm">
            {plan.description}
          </p>
        </div>
@@ -85,30 +99,13 @@ export const PricingCard: React.FC<PricingCardProps> = ({
        {/* Price */}
        <div className="flex flex-col gap-0.5">
          <div className="flex items-center gap-2">
-            <span className="font-semibold text-3xl text-foreground tracking-tight">
+            <span className="font-semibold text-2xl text-foreground tracking-tight">
              ${plan.price}
            </span>

            {!isCustomPrice && (
              <span className="text-muted-foreground">/ month</span>
            )}
-
-            {billingPlan === "starter" && (
-              <ToolTipLabel
-                contentClassName="max-w-[320px]"
-                label="We will place a temporary hold of $25 to verify your card, this will be immediately released back to you after verification."
-              >
-                <Button
-                  asChild
-                  variant="ghost"
-                  className="h-auto w-auto p-1 text-muted-foreground hover:text-foreground"
-                >
-                  <div>
-                    <CircleAlertIcon className="size-5 shrink-0" />
-                  </div>
-                </Button>
-              </ToolTipLabel>
-            )}
          </div>

          {remainingTrialDays > 0 && (
@@ -124,7 +121,7 @@ export const PricingCard: React.FC<PricingCardProps> = ({

      <div className="flex grow flex-col items-start gap-2 text-foreground">
        {plan.subTitle && (
-          <p className="font-medium text-foreground">{plan.subTitle}</p>
+          <p className="font-medium text-foreground text-sm">{plan.subTitle}</p>
        )}

        {plan.features.map((f) => (
@@ -134,29 +131,31 @@ export const PricingCard: React.FC<PricingCardProps> = ({

      {cta && (
        <div className="flex flex-col gap-3">
-          {billingPlan !== "pro" ? (
+          {billingPlanToSkuMap[billingPlan] && cta.type === "checkout" && (
            <CheckoutButton
+              billingStatus={billingStatus}
              buttonProps={{
-                variant: cta.variant || "outline",
-                className: "gap-2",
-                onClick: cta.onClick,
+                variant: highlighted ? "default" : "outline",
+                className: highlighted ? undefined : "bg-background",
+                onClick: handleCTAClick,
              }}
              teamSlug={teamSlug}
-              sku={billingPlan === "starter" ? "plan:starter" : "plan:growth"}
+              sku={billingPlanToSkuMap[billingPlan]}
              getBillingCheckoutUrl={getBillingCheckoutUrl}
            >
              {cta.title}
            </CheckoutButton>
-          ) : (
-            <Button variant={cta.variant || "outline"} asChild>
-              <TrackedLinkTW
-                href={PRO_CONTACT_US_URL}
-                label={cta.tracking?.label}
-                category={cta.tracking?.category}
-                target="_blank"
-              >
+          )}
+
+          {cta.type === "link" && (
+            <Button
+              variant={highlighted ? "default" : "outline"}
+              className={highlighted ? undefined : "bg-background"}
+              asChild
+            >
+              <Link href={cta.href} target="_blank" onClick={handleCTAClick}>
                {cta.title}
-              </TrackedLinkTW>
+              </Link>
            </Button>
          )}

@@ -171,6 +170,19 @@ export const PricingCard: React.FC<PricingCardProps> = ({
  );
 };

+const billingPlanToSkuMap: Record<Team["billingPlan"], ProductSKU | undefined> =
+  {
+    starter: "plan:starter",
+    growth: "plan:growth",
+    accelerate: "plan:accelerate",
+    scale: "plan:scale",
+    // we can't render checkout buttons for these plans:
+    pro: undefined,
+    free: undefined,
+    growth_legacy: undefined,
+    starter_legacy: undefined,
+  };
+
 type FeatureItemProps = {
  text: string | string[];
 };
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { useMemo, useState } from "react";
-import { BadgeContainer, mobileViewport } from "../../../stories/utils";
+import { BadgeContainer } from "../../../stories/utils";
 import { SelectWithSearch } from "./select-with-search";

 const meta = {
@@ -16,17 +16,10 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;

-export const Desktop: Story = {
+export const Variants: Story = {
  args: {},
 };

-export const Mobile: Story = {
-  args: {},
-  parameters: {
-    viewport: mobileViewport("iphone14"),
-  },
-};
-
 function createList(len: number) {
  return Array.from({ length: len }, (_, i) => ({
    value: `${i}`,
@@ -36,7 +29,7 @@ function createList(len: number) {

 function Story() {
  return (
-    <div className="mx-auto flex w-full max-w-[600px] flex-col gap-6 px-4 py-6">
+    <div className="container flex max-w-6xl flex-col gap-6 py-10">
      <VariantTest storyLabel="5 items" listLen={5} />
      <VariantTest storyLabel="5000 items" listLen={5000} />
      <VariantTest
@@ -23,6 +23,7 @@ export function WalletAddress(props: {
  address: string | undefined;
  shortenAddress?: boolean;
  className?: string;
+  iconClassName?: string;
 }) {
  const thirdwebClient = useThirdwebClient();
  // default back to zero address if no address provided
@@ -78,6 +79,7 @@ export function WalletAddress(props: {
              address={address}
              profiles={profiles.data || []}
              thirdwebClient={thirdwebClient}
+              iconClassName={props.iconClassName}
            />
          )}
          <span className="cursor-pointer font-mono">
@@ -168,6 +170,7 @@ function WalletAvatar(props: {
  address: string;
  profiles: SocialProfile[];
  thirdwebClient: ThirdwebClient;
+  iconClassName?: string;
 }) {
  const avatar = useMemo(() => {
    return props.profiles.find(
@@ -186,11 +189,20 @@ function WalletAvatar(props: {
    : undefined;

  return (
-    <div className="size-6 overflow-hidden rounded-full">
+    <div
+      className={cn("size-6 overflow-hidden rounded-full", props.iconClassName)}
+    >
      {resolvedAvatarSrc ? (
-        <Img src={resolvedAvatarSrc} className="size-6 object-cover" />
+        <Img
+          src={resolvedAvatarSrc}
+          className={cn("size-6 object-cover", props.iconClassName)}
+        />
      ) : (
-        <Blobbie address={props.address} size={24} />
+        <Blobbie
+          address={props.address}
+          size={24}
+          className={props.iconClassName}
+        />
      )}
    </div>
  );
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
-import { BadgeContainer, mobileViewport } from "../../stories/utils";
+import { BadgeContainer } from "../../stories/utils";
 import { PaginationButtons } from "./pagination-buttons";

 const meta = {
@@ -16,17 +16,10 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;

-export const Desktop: Story = {
+export const Variants: 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">
@@ -6,9 +6,6 @@ import { BadgeContainer } from "../../../stories/utils";
 const meta = {
  title: "Shadcn/Buttons",
  component: Component,
-  parameters: {
-    layout: "centered",
-  },
 } satisfies Meta<typeof Component>;

 export default meta;
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { BadgeContainer, mobileViewport } from "stories/utils";
+import { BadgeContainer } from "stories/utils";
 import { CodeClient } from "./code.client";

 const meta = {
@@ -11,17 +11,10 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;

-export const Desktop: Story = {
+export const Variants: Story = {
  args: {},
 };

-export const Mobile: Story = {
-  args: {},
-  parameters: {
-    viewport: mobileViewport("iphone14"),
-  },
-};
-
 const tsCode = `\
 type User = {
  name: string;
@@ -86,7 +79,7 @@ const bashCode = "pnpm i thirdweb";

 function Component() {
  return (
-    <div className="container flex max-w-[600px] flex-col gap-10 py-10">
+    <div className="container flex max-w-6xl flex-col gap-10 py-10">
      <BadgeContainer label="ts">
        <CodeClient code={tsCode} lang="ts" />
      </BadgeContainer>
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { BadgeContainer, mobileViewport } from "stories/utils";
+import { BadgeContainer } from "stories/utils";
 import { PlainTextCodeBlock } from "./plaintext-code";

 const meta = {
@@ -11,17 +11,10 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;

-export const Desktop: Story = {
+export const Variants: Story = {
  args: {},
 };

-export const Mobile: Story = {
-  args: {},
-  parameters: {
-    viewport: mobileViewport("iphone14"),
-  },
-};
-
 const jsCode = `\
 import { getContract } from "thirdweb";
 import { sepolia } from "thirdweb/chains";
@@ -39,7 +32,7 @@ const overflowText =

 function Component() {
  return (
-    <div className="container flex max-w-[600px] flex-col gap-10 py-10">
+    <div className="container flex max-w-6xl flex-col gap-10 py-10">
      <BadgeContainer label="large chunk of code">
        <PlainTextCodeBlock code={jsCode} />
      </BadgeContainer>
@@ -13,9 +13,6 @@ import { BadgeContainer } from "../../../stories/utils";
 const meta = {
  title: "Shadcn/Select",
  component: Component,
-  parameters: {
-    layout: "centered",
-  },
 } satisfies Meta<typeof Component>;

 export default meta;
@@ -10,35 +10,25 @@ import {
 } from "@/components/ui/table";
 import type { Meta, StoryObj } from "@storybook/react";
 import Link from "next/link";
-import { BadgeContainer, mobileViewport } from "../../../stories/utils";
+import { BadgeContainer } from "../../../stories/utils";
 import { cn } from "../../lib/utils";
 import { Badge } from "./badge";

 const meta = {
  title: "Shadcn/Table",
  component: Component,
-  parameters: {
-    layout: "centered",
-  },
 } satisfies Meta<typeof Component>;

 export default meta;
 type Story = StoryObj<typeof meta>;

-export const Desktop: Story = {
+export const Variants: Story = {
  args: {},
 };

-export const Mobile: Story = {
-  args: {},
-  parameters: {
-    viewport: mobileViewport("iphone14"),
-  },
-};
-
 function Component() {
  return (
-    <div className="flex min-w-0 flex-col gap-6 px-4 py-6 lg:mx-auto lg:max-w-[1000px]">
+    <div className="container flex max-w-6xl flex-col gap-10 py-10">
      <BadgeContainer label="Normal">
        <TableDemo />
      </BadgeContainer>
@@ -24,11 +24,7 @@ const TableHeader = React.forwardRef<
 >(({ className, ...props }, ref) => (
  <thead
    ref={ref}
-    className={cn(
-      "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,
-    )}
+    className={cn("relative border-b bg-background", className)}
    {...props}
  />
 ));
@@ -7,6 +7,7 @@ import { usePathname } from "next/navigation";
 import { useCallback, useRef, useState } from "react";
 import { ScrollShadow } from "./ScrollShadow/ScrollShadow";
 import { Button } from "./button";
+import { ToolTipLabel } from "./tooltip";

 export type TabLink = {
  name: string;
@@ -20,6 +21,7 @@ export function TabLinks(props: {
  className?: string;
  tabContainerClassName?: string;
  shadowColor?: string;
+  scrollableClassName?: string;
 }) {
  const { containerRef, lineRef, activeTabRef } =
    useUnderline<HTMLAnchorElement>();
@@ -30,7 +32,7 @@ export function TabLinks(props: {
      <div className="absolute right-0 bottom-0 left-0 h-[1px] bg-border" />

      <ScrollShadow
-        scrollableClassName="pb-[8px] relative"
+        scrollableClassName={cn("pb-[8px] relative", props.scrollableClassName)}
        shadowColor={props.shadowColor}
      >
        <div
@@ -81,6 +83,7 @@ export function TabButtons(props: {
    isActive: boolean;
    isDisabled?: boolean;
    icon?: React.FC<{ className?: string }>;
+    toolTip?: string;
  }[];
  tabClassName?: string;
  activeTabClassName?: string;
@@ -110,26 +113,31 @@ export function TabButtons(props: {
        >
          {props.tabs.map((tab, index) => {
            return (
-              <Button
-                // biome-ignore lint/suspicious/noArrayIndexKey: tabs don't change order, so index is stable
-                key={index}
-                variant="ghost"
-                ref={tab.isActive ? activeTabRef : undefined}
-                className={cn(
-                  "relative inline-flex h-auto items-center gap-1.5 rounded-lg px-2 font-medium text-sm hover:bg-accent lg:px-3 lg:text-base",
-                  !tab.isActive &&
-                    "text-muted-foreground hover:text-foreground",
-                  tab.isDisabled && "cursor-not-allowed opacity-50",
-                  props.tabClassName,
-                  tab.isActive && props.activeTabClassName,
-                )}
-                onClick={!tab.isDisabled ? tab.onClick : undefined}
+              <ToolTipLabel
+                key={typeof tab.name === "string" ? tab.name : index}
+                label={tab.toolTip}
              >
-                {tab.icon && (
-                  <tab.icon className={cn("size-6", props.tabIconClassName)} />
-                )}
-                {tab.name}
-              </Button>
+                <Button
+                  variant="ghost"
+                  ref={tab.isActive ? activeTabRef : undefined}
+                  className={cn(
+                    "relative inline-flex h-auto items-center gap-1.5 rounded-lg px-2 font-medium text-sm hover:bg-accent lg:px-3 lg:text-base",
+                    !tab.isActive &&
+                      "text-muted-foreground hover:text-foreground",
+                    tab.isDisabled && "cursor-not-allowed opacity-50",
+                    props.tabClassName,
+                    tab.isActive && props.activeTabClassName,
+                  )}
+                  onClick={!tab.isDisabled ? tab.onClick : undefined}
+                >
+                  {tab.icon && (
+                    <tab.icon
+                      className={cn("size-6", props.tabIconClassName)}
+                    />
+                  )}
+                  {tab.name}
+                </Button>
+              </ToolTipLabel>
            );
          })}
        </div>
@@ -159,9 +167,11 @@ function useUnderline<El extends HTMLElement>() {
        const containerRect = containerRef.current.getBoundingClientRect();
        const lineEl = lineRef.current;
        const rect = activeTabEl.getBoundingClientRect();
+        const containerPaddingLeft =
+          containerRect.left - containerRef.current.offsetLeft;
        lineEl.style.width = `${rect.width}px`;
        lineEl.style.transform = `translateX(${
-          rect.left - containerRect.left
+          rect.left - containerPaddingLeft
        }px)`;
        setTimeout(() => {
          lineEl.style.transition = "transform 0.3s, width 0.3s";
@@ -205,6 +215,7 @@ export function TabPathLinks(props: {
  className?: string;
  tabContainerClassName?: string;
  shadowColor?: string;
+  scrollableClassName?: string;
 }) {
  const pathname = usePathname() || "";
  const { links, ...restProps } = props;
@@ -2,12 +2,16 @@ import { useQuery } from "@tanstack/react-query";
 import { useMemo } from "react";
 import { useActiveAccount } from "thirdweb/react";
 import type { GetAuthTokenResponse } from "../../app/api/auth/get-auth-token/route";
+import { LAST_USED_TEAM_ID } from "../../constants/cookies";
+import { getCookie } from "../../lib/cookie";
 import { getThirdwebClient } from "./thirdweb.server";

 // returns a thirdweb client with optional JWT passed i

 export function useThirdwebClient(jwt?: string) {
  const account = useActiveAccount();
+  const lastUsedTeamId = getCookie(LAST_USED_TEAM_ID);
+
  const query = useQuery({
    queryKey: ["jwt", account?.address],
    // only enable the query if there is an account and no JWT is passed in directly
@@ -33,8 +37,12 @@ export function useThirdwebClient(jwt?: string) {

  return useMemo(
    // prefer jwt from props over the one from the token query if it exists
-    () => getThirdwebClient(jwt || query.data),
-    [jwt, query.data],
+    () =>
+      getThirdwebClient({
+        jwt: jwt || query.data,
+        teamId: lastUsedTeamId,
+      }),
+    [jwt, query.data, lastUsedTeamId],
  );
 }

@@ -6,6 +6,7 @@ import {
 import {
  THIRDWEB_BUNDLER_DOMAIN,
  THIRDWEB_INAPP_WALLET_DOMAIN,
+  THIRDWEB_INSIGHT_API_DOMAIN,
  THIRDWEB_PAY_DOMAIN,
  THIRDWEB_RPC_DOMAIN,
  THIRDWEB_SOCIAL_API_DOMAIN,
@@ -22,7 +23,14 @@ import { getZkPaymasterData } from "thirdweb/wallets/smart";
 import { getVercelEnv } from "../../lib/vercel-utils";

 // returns a thirdweb client with optional JWT passed in
-export function getThirdwebClient(jwt?: string) {
+export function getThirdwebClient(
+  options:
+    | {
+        jwt: string | null | undefined;
+        teamId: string | undefined;
+      }
+    | undefined,
+) {
  if (getVercelEnv() !== "production") {
    // if not on production: run this when creating a client to set the domains
    setThirdwebDomains({
@@ -32,6 +40,7 @@ export function getThirdwebClient(jwt?: string) {
      storage: THIRDWEB_STORAGE_DOMAIN,
      social: THIRDWEB_SOCIAL_API_DOMAIN,
      bundler: THIRDWEB_BUNDLER_DOMAIN,
+      insight: THIRDWEB_INSIGHT_API_DOMAIN,
    });
  }

@@ -69,7 +78,8 @@ export function getThirdwebClient(jwt?: string) {
  }

  return createThirdwebClient({
-    secretKey: jwt ? jwt : DASHBOARD_THIRDWEB_SECRET_KEY,
+    teamId: options?.teamId,
+    secretKey: options?.jwt ? options.jwt : DASHBOARD_THIRDWEB_SECRET_KEY,
    clientId: DASHBOARD_THIRDWEB_CLIENT_ID,
    config: {
      storage: {
@@ -1,75 +1,64 @@
 "use client";

 // eslint-disable-next-line no-restricted-imports
-import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useRouter } from "next/navigation";
 import {
-  Suspense,
+  type TransitionStartFunction,
  useEffect,
  useMemo,
  useRef,
  useState,
  useSyncExternalStore,
+  useTransition,
 } from "react";
 import { createStore } from "./reactive";

 // Using useDashboardRouter instead of useRouter gives us a nice progress bar on top of the page when navigating using router.push or router.replace

-// using a store instead of context to avoid triggering re-renders on root component
-const LoadingRouteHref = createStore<string | undefined>(undefined);
+const RouteStartTransitionFn = createStore<TransitionStartFunction>((fn) =>
+  fn(),
+);

 export function useDashboardRouter() {
+  const startTransition = useSyncExternalStore(
+    RouteStartTransitionFn.subscribe,
+    RouteStartTransitionFn.getValue,
+    RouteStartTransitionFn.getValue,
+  );
+
  const router = useRouter();
  return useMemo(() => {
    return {
      ...router,
      replace(href: string, options?: { scroll?: boolean }) {
-        LoadingRouteHref.setValue(href);
-        router.replace(href, options);
+        startTransition(() => {
+          router.replace(href, options);
+        });
      },
      push(href: string, options?: { scroll?: boolean }) {
-        LoadingRouteHref.setValue(href);
-        router.push(href, options);
+        startTransition(() => {
+          router.push(href, options);
+        });
      },
    };
-  }, [router]);
-}
-
-function useRouterLoadingStatus() {
-  const loadingHref = useSyncExternalStore(
-    LoadingRouteHref.subscribe,
-    LoadingRouteHref.getValue,
-    LoadingRouteHref.getValue,
-  );
-  const pathname = usePathname();
-  const searchParams = useSearchParams();
-  const searchParamsStr = searchParams?.toString();
-
-  const routerHref = pathname + (searchParamsStr ? `?${searchParamsStr}` : "");
-  const isLoading = loadingHref && loadingHref !== routerHref;
-
-  // reset loading on route load
-  // eslint-disable-next-line no-restricted-syntax
-  useEffect(() => {
-    if (!isLoading) {
-      LoadingRouteHref.setValue(undefined);
-    }
-  }, [isLoading]);
-
-  return isLoading;
+  }, [router, startTransition]);
 }

 const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));

-// Render this on root
-function DashboardRouterTopProgressBarInner() {
-  const isLoading = useRouterLoadingStatus();
-  const [progress, setProgress] = useState(0);
+export function DashboardRouterTopProgressBar() {
+  const [isRouteLoading, startTransition] = useTransition();
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    RouteStartTransitionFn.setValue(startTransition);
+  }, []);

+  const [progress, setProgress] = useState(0);
  const progressStartedRef = useRef(false);

  // eslint-disable-next-line no-restricted-syntax
  useEffect(() => {
-    if (!isLoading) {
+    if (!isRouteLoading) {
      setProgress(0);
      progressStartedRef.current = false;
      return;
@@ -85,7 +74,7 @@ function DashboardRouterTopProgressBarInner() {

    async function updateProgressBar(progress: number, delay: number) {
      if (!isMounted) {
-        if (!isLoading) {
+        if (!isRouteLoading) {
          setProgress(100);
        }
        return;
@@ -112,14 +101,14 @@ function DashboardRouterTopProgressBarInner() {
    return () => {
      isMounted = false;
    };
-  }, [isLoading]);
+  }, [isRouteLoading]);

-  const width = isLoading ? progress : 100;
+  const width = isRouteLoading ? progress : 100;
  return (
    <span
      className="fixed top-0 block h-[3px] bg-foreground"
      style={{
-        opacity: isLoading ? "100" : "0",
+        opacity: isRouteLoading ? "100" : "0",
        width: `${width}%`,
        transition: width === 0 ? "none" : "width 0.2s ease, opacity 0.3s ease",
        zIndex: "100000000",
@@ -128,12 +117,3 @@ function DashboardRouterTopProgressBarInner() {
    />
  );
 }
-
-// need to wrap with suspense because of useSearchParams usage
-export function DashboardRouterTopProgressBar() {
-  return (
-    <Suspense fallback={null}>
-      <DashboardRouterTopProgressBarInner />
-    </Suspense>
-  );
-}
@@ -3,6 +3,8 @@ export type ProductSKU =
  | "plan:starter"
  | "plan:growth"
  | "plan:custom"
+  | "plan:accelerate"
+  | "plan:scale"
  | "product:ecosystem_wallets"
  | "product:engine_standard"
  | "product:engine_premium"
@@ -175,6 +175,7 @@ export const CustomConnectWallet = (props: {
            renderChain(props) {
              return (
                <CustomChainRenderer
+                  client={thirdwebClient}
                  {...props}
                  openEditChainModal={(c) => {
                    setIsNetworkConfigModalOpen(true);
@@ -15,8 +15,6 @@ 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";
-
 // Engine instances
 export type EngineInstance = {
  id: string;
@@ -24,6 +22,8 @@ export type EngineInstance = {
  name: string;
  url: string;
  lastAccessedAt: string;
+  isCloudHosted: boolean;
+  isPlanEngine: boolean;
  status:
    | "active"
    | "pending"
@@ -0,0 +1,29 @@
+"use client";
+
+import { getSDKTheme } from "app/components/sdk-component-theme";
+import { useV5DashboardChain } from "lib/v5-adapter";
+import { useTheme } from "next-themes";
+import type { ThirdwebClient } from "thirdweb";
+import { PayEmbed } from "thirdweb/react";
+
+export function UniversalBridgeEmbed({
+  chainId,
+  client,
+}: { chainId?: number; client: ThirdwebClient }) {
+  const { theme } = useTheme();
+  const chain = useV5DashboardChain(chainId || 1);
+
+  return (
+    <PayEmbed
+      client={client}
+      payOptions={{
+        mode: "fund_wallet",
+        prefillBuy: {
+          chain,
+          amount: "0.01",
+        },
+      }}
+      theme={getSDKTheme(theme === "light" ? "light" : "dark")}
+    />
+  );
+}
@@ -0,0 +1,40 @@
+import { getThirdwebClient } from "@/constants/thirdweb.server";
+import type { Metadata } from "next";
+import { UniversalBridgeEmbed } from "./components/client/UniversalBridgeEmbed";
+
+const title = "Universal Bridge: Swap, Bridge, and On-Ramp";
+const description =
+  "Swap, bridge, and on-ramp to any EVM chain with thirdweb's Universal Bridge.";
+
+export const metadata: Metadata = {
+  title,
+  description,
+  openGraph: {
+    title,
+    description,
+  },
+};
+
+export default async function RoutesPage({
+  searchParams,
+}: { searchParams: Record<string, string | string[]> }) {
+  const { chainId } = searchParams;
+  const client = getThirdwebClient(undefined);
+  return (
+    <div className="relative mx-auto flex h-screen w-full flex-col items-center justify-center overflow-hidden border py-10">
+      <main className="container z-10 flex justify-center">
+        <UniversalBridgeEmbed
+          chainId={chainId ? Number(chainId) : undefined}
+          client={client}
+        />
+      </main>
+
+      {/* eslint-disable-next-line @next/next/no-img-element */}
+      <img
+        alt=""
+        src="/assets/login/background.svg"
+        className="-bottom-12 -right-12 pointer-events-none absolute lg:right-0 lg:bottom-0"
+      />
+    </div>
+  );
+}
@@ -1,6 +1,6 @@
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
-import { getThirdwebClient } from "@/constants/thirdweb.server";
 import { resolveSchemeWithErrorHandler } from "@/lib/resolveSchemeWithErrorHandler";
+import type { ThirdwebClient } from "thirdweb";
 import { defineChain } from "thirdweb";
 import { getChainMetadata } from "thirdweb/chains";

@@ -15,6 +15,7 @@ type RouteListCardProps = {
  destinationTokenIconUri?: string | null;
  destinationTokenSymbol: string;
  destinationTokenName: string;
+  client: ThirdwebClient;
 };

 export async function RouteListCard({
@@ -26,6 +27,7 @@ export async function RouteListCard({
  destinationTokenAddress,
  destinationTokenIconUri,
  destinationTokenName,
+  client,
 }: RouteListCardProps) {
  const [
    originChain,
@@ -40,13 +42,13 @@ export async function RouteListCard({
    originTokenIconUri
      ? resolveSchemeWithErrorHandler({
          uri: originTokenIconUri,
-          client: getThirdwebClient(),
+          client,
        })
      : undefined,
    destinationTokenIconUri
      ? resolveSchemeWithErrorHandler({
          uri: destinationTokenIconUri,
-          client: getThirdwebClient(),
+          client,
        })
      : undefined,
  ]);
@@ -1,7 +1,7 @@
 import { CopyTextButton } from "@/components/ui/CopyTextButton";
 import { TableCell, TableRow } from "@/components/ui/table";
-import { getThirdwebClient } from "@/constants/thirdweb.server";
 import { resolveSchemeWithErrorHandler } from "@/lib/resolveSchemeWithErrorHandler";
+import type { ThirdwebClient } from "thirdweb";
 import { defineChain, getChainMetadata } from "thirdweb/chains";

 type RouteListRowProps = {
@@ -15,6 +15,7 @@ type RouteListRowProps = {
  destinationTokenIconUri?: string | null;
  destinationTokenSymbol?: string;
  destinationTokenName?: string;
+  client: ThirdwebClient;
 };

 export async function RouteListRow({
@@ -26,6 +27,7 @@ export async function RouteListRow({
  destinationTokenAddress,
  destinationTokenIconUri,
  destinationTokenSymbol,
+  client,
 }: RouteListRowProps) {
  const [
    originChain,
@@ -40,13 +42,13 @@ export async function RouteListRow({
    originTokenIconUri
      ? resolveSchemeWithErrorHandler({
          uri: originTokenIconUri,
-          client: getThirdwebClient(),
+          client,
        })
      : undefined,
    destinationTokenIconUri
      ? resolveSchemeWithErrorHandler({
          uri: destinationTokenIconUri,
-          client: getThirdwebClient(),
+          client,
        })
      : undefined,
  ]);
@@ -6,6 +6,7 @@ import {
  TableHeader,
  TableRow,
 } from "@/components/ui/table";
+import { getThirdwebClient } from "@/constants/thirdweb.server";
 import type { Address } from "thirdweb";
 import { checksumAddress } from "thirdweb/utils";
 import { getRoutes } from "../../../utils";
@@ -136,6 +137,7 @@ export async function RoutesData(props: {
  const startIndex = (activePage - 1) * pageSize;
  const endIndex = startIndex + pageSize;
  const paginatedRoutes = routesToRender.slice(startIndex, endIndex);
+  const client = getThirdwebClient(undefined);

  return (
    <>
@@ -170,6 +172,7 @@ export async function RoutesData(props: {
                    destinationTokenIconUri={route.destinationToken.iconUri}
                    destinationTokenSymbol={route.destinationToken.symbol}
                    destinationTokenName={route.destinationToken.name}
+                    client={client}
                  />
                ))}
              </TableBody>
@@ -193,6 +196,7 @@ export async function RoutesData(props: {
                  destinationTokenIconUri={route.destinationToken.iconUri}
                  destinationTokenSymbol={route.destinationToken.symbol}
                  destinationTokenName={route.destinationToken.name}
+                  client={client}
                />
              </li>
            ))}
@@ -25,7 +25,6 @@ import {
 } 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";
@@ -52,7 +51,6 @@ import {
  useWalletBalance,
 } from "thirdweb/react";
 import { z } from "zod";
-import { isAccountOnboardingComplete } from "../../../../../../login/onboarding/isOnboardingRequired";

 function formatTime(seconds: number) {
  const rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
@@ -78,11 +76,11 @@ const claimFaucetSchema = z.object({
 export function FaucetButton({
  chain,
  amount,
-  twAccount,
+  isLoggedIn,
 }: {
  chain: ChainMetadata;
  amount: number;
-  twAccount: Account | undefined;
+  isLoggedIn: boolean;
 }) {
  const pathname = usePathname();
  const client = useThirdwebClient();
@@ -186,7 +184,7 @@ export function FaucetButton({
        </div>
        <SendFundsToFaucetModalButton
          chain={definedChain}
-          isLoggedIn={!!twAccount}
+          isLoggedIn={isLoggedIn}
          client={client}
          chainMeta={chain}
          onFaucetRefill={() => {
@@ -198,7 +196,7 @@ export function FaucetButton({
  }

  // Force users to log in to claim the faucet
-  if (!address || !twAccount) {
+  if (!address || !isLoggedIn) {
    return (
      <Button variant="primary" className="w-full" asChild>
        <Link
@@ -210,20 +208,6 @@ export function FaucetButton({
    );
  }

-  if (!isAccountOnboardingComplete(twAccount)) {
-    return (
-      <Button asChild className="w-full">
-        <Link
-          href={
-            pathname ? `/login?next=${encodeURIComponent(pathname)}` : "/login"
-          }
-        >
-          Verify your Email
-        </Link>
-      </Button>
-    );
-  }
-
  // Can not claim
  if (canClaimFaucetQuery.data && canClaimFaucetQuery.data.canClaim === false) {
    return (
@@ -0,0 +1,46 @@
+"use client";
+import { useTrack } from "hooks/analytics/useTrack";
+import { FileText } from "lucide-react";
+import Link from "next/link";
+import type { ChainMetadata } from "thirdweb/chains";
+import { SectionTitle } from "../server/SectionTitle";
+
+export default function NextSteps(props: { chain: ChainMetadata }) {
+  const { chain } = props;
+  const trackEvent = useTrack();
+
+  return (
+    <section>
+      <SectionTitle title="Next Steps" />
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3">
+        <div className="relative flex gap-3 rounded-lg border bg-card p-4 pr-8 transition-colors hover:border-active-border">
+          <FileText className="mt-0.5 size-5 shrink-0" />
+          <div>
+            <h3 className="mb-1.5 font-medium">
+              <Link
+                href={
+                  "https://blog.thirdweb.com/supercharge-user-adoption-integrate-embedded-wallets-in-minutes/"
+                }
+                className="before:absolute before:inset-0"
+                target="_blank"
+                onClick={() =>
+                  trackEvent({
+                    category: "nextSteps",
+                    action: "click-inapp",
+                    label: "success",
+                    chain_id: chain.chainId,
+                  })
+                }
+              >
+                Create a login for {chain.name}
+              </Link>
+            </h3>
+            <p className="text-muted-foreground text-sm">
+              Supercharge User Adoption—Integrate In-App Wallets in Minutes
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
@@ -1,23 +1,28 @@
 import { ExternalLinkIcon } from "lucide-react";
 import Link from "next/link";
+import type { ThirdwebClient } from "thirdweb";
 import type { ChainMetadata } from "thirdweb/chains";
 import { ChainIcon } from "../../../../components/server/chain-icon";
 import { PayModalButton } from "../client/PayModal";
 import { CreditCardIcon } from "../icons/CreditCardIcon";
 import { SectionTitle } from "./SectionTitle";

-export function BuyFundsSection(props: { chain: ChainMetadata }) {
+export function BuyFundsSection(props: {
+  chain: ChainMetadata;
+  client: ThirdwebClient;
+}) {
  const sanitizedChainName = props.chain.name.replace("Mainnet", "").trim();

  return (
    <section>
-      <SectionTitle title="Buy Funds" />
+      <SectionTitle title="Bridge" />
      <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
              className="-mr-2 size-12 rounded-full border p-1"
              iconUrl={props.chain.icon?.url}
+              client={props.client}
            />
            <CreditCardIcon
              bg="hsl(var(--background))"
@@ -28,21 +33,21 @@ export function BuyFundsSection(props: { chain: ChainMetadata }) {
          <div className="h-6" />

          <h2 className="px-4 text-center font-semibold text-lg tracking-tight">
-            Buy Funds on {sanitizedChainName} using Universal Bridge
+            Bridge Funds to {sanitizedChainName}
          </h2>

          <div className="h-2" />

          <p className="max-w-[520px] px-4 text-center text-muted-foreground text-sm">
-            Instantly onramp, bridge & swap into {sanitizedChainName} with any
-            token.
+            Get {props.chain.nativeCurrency.symbol} on {sanitizedChainName} with
+            fiat or any token on another chain.
          </p>

          <div className="h-8" />

          <PayModalButton
            chainId={props.chain.chainId}
-            label={`Buy Funds on ${sanitizedChainName}`}
+            label={`Bridge to ${sanitizedChainName}`}
          />

          <div className="h-4" />
@@ -1,4 +1,4 @@
-import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
+import type { ThirdwebClient } from "thirdweb";
 import type { ChainMetadata } from "thirdweb/chains";
 import { getFaucetClaimAmount } from "../../../../../../api/testnet-faucet/claim/claim-amount";
 import { ChainIcon } from "../../../../components/server/chain-icon";
@@ -8,9 +8,10 @@ import { SectionTitle } from "./SectionTitle";

 export async function FaucetSection(props: {
  chain: ChainMetadata;
-  twAccount: Account | undefined;
+  isLoggedIn: boolean;
+  client: ThirdwebClient;
 }) {
-  const { chain, twAccount } = props;
+  const { chain, isLoggedIn, client } = props;

  // Check eligibility.
  const sanitizedChainName = chain.name.replace("Mainnet", "").trim();
@@ -25,6 +26,7 @@ export async function FaucetSection(props: {
            <ChainIcon
              className="-mr-2 size-12 rounded-full border p-1"
              iconUrl={props.chain.icon?.url}
+              client={client}
            />
            <GiftIcon bg="hsl(var(--background))" className="-ml-2 size-12" />
          </div>
@@ -47,7 +49,7 @@ export async function FaucetSection(props: {
          <FaucetButton
            chain={chain}
            amount={amountToGive}
-            twAccount={twAccount}
+            isLoggedIn={isLoggedIn}
          />
        </div>
      </div>
@@ -1,6 +1,7 @@
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 import Link from "next/link";
+import type { ThirdwebClient } from "thirdweb";
 import type { ChainMetadata } from "thirdweb/chains";
 import { mapV4ChainToV5Chain } from "../../../../../../../contexts/map-chains";
 import { ChainIcon } from "../../../../components/server/chain-icon";
@@ -10,6 +11,7 @@ type ChainHeaderProps = {
  headerImageUrl?: string;
  logoUrl?: string;
  chain: ChainMetadata;
+  client: ThirdwebClient;
 };

 // TODO: improve the behavior when clicking "Get started with thirdweb", currently just redirects to the dashboard
@@ -39,6 +41,7 @@ export function ChainHeader(props: ChainHeaderProps) {
        {/* chain logo */}

        <ChainIcon
+          client={props.client}
          iconUrl={props.logoUrl}
          className={cn(
            "-translate-y-[50%] absolute top-0 left-0 size-20 overflow-hidden rounded-full border border-border bg-muted p-2 lg:size-36 lg:p-4",
@@ -17,8 +17,13 @@ import { ChevronDownIcon, TicketCheckIcon } from "lucide-react";
 import type { Metadata } from "next";
 import Link from "next/link";
 import { redirect } from "next/navigation";
+import { getThirdwebClient } from "../../../../../@/constants/thirdweb.server";
 import { mapV4ChainToV5Chain } from "../../../../../contexts/map-chains";
-import { getAuthToken } from "../../../../api/lib/getAuthToken";
+import {
+  getAuthToken,
+  getAuthTokenWalletAddress,
+} from "../../../../api/lib/getAuthToken";
+import { NebulaFloatingChatButton } from "../../../../nebula-app/(app)/components/FloatingChat/FloatingChat";
 import { StarButton } from "../../components/client/star-button";
 import { getChain, getChainMetadata } from "../../utils";
 import { AddChainToWallet } from "./components/client/add-chain-to-wallet";
@@ -55,17 +60,60 @@ 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();
+  const [chain, authToken, accountAddress] = await Promise.all([
+    getChain(params.chain_id),
+    getAuthToken(),
+    getAuthTokenWalletAddress(),
+  ]);

  if (params.chain_id !== chain.slug) {
    redirect(chain.slug);
  }

  const chainMetadata = await getChainMetadata(chain.chainId);
+  const client = getThirdwebClient({
+    jwt: authToken,
+    teamId: undefined,
+  });
+
+  const chainPromptPrefix = `\
+You are assisting users exploring the chain ${chain.name} (Chain ID: ${chain.chainId}). Provide concise insights into the types of applications and activities prevalent on this chain, such as DeFi protocols, NFT marketplaces, or gaming platforms. Highlight notable projects or trends without delving into technical details like consensus mechanisms or gas fees.
+Users may seek comparisons between ${chain.name} and other chains. Provide objective, succinct comparisons focusing on performance, fees, and ecosystem support. Refrain from transaction-specific advice unless requested.
+Provide users with an understanding of the unique use cases and functionalities that ${chain.name} supports. Discuss how developers leverage this chain for specific applications, such as scalable dApps, low-cost transactions, or specialized token standards, focusing on practical implementations.
+Users may be interested in utilizing thirdweb tools on ${chain.name}. Offer clear guidance on how thirdweb's SDKs, smart contract templates, and deployment tools integrate with this chain. Emphasize the functionalities enabled by thirdweb without discussing transaction execution unless prompted.
+Avoid transaction-related actions to be executed by the user unless inquired about.
+
+The following is the user's message:
+  `;
+
+  const examplePrompts: string[] = [
+    "What are users doing on this chain?",
+    "What are the most active contracts?",
+    "Why would I use this chain over others?",
+    "Can I deploy thirdweb contracts to this chain?",
+  ];
+
+  if (chain.chainId !== 1) {
+    examplePrompts.push("Can I bridge assets from Ethereum to this chain?");
+  }

  return (
    <>
+      <NebulaFloatingChatButton
+        pageType="chain"
+        authToken={authToken ?? undefined}
+        label="Ask AI about this chain"
+        client={client}
+        nebulaParams={{
+          messagePrefix: chainPromptPrefix,
+          chainIds: [chain.chainId],
+          wallet: accountAddress ?? undefined,
+        }}
+        examplePrompts={examplePrompts.map((prompt) => ({
+          title: prompt,
+          message: prompt,
+        }))}
+      />
      <div className="flex h-14 border-border border-b pl-7">
        <Breadcrumb className="my-auto">
          <BreadcrumbList>
@@ -113,6 +161,7 @@ export default async function ChainPageLayout(props: {
            headerImageUrl={chainMetadata?.headerImgUrl}
            logoUrl={chain.icon?.url}
            chain={chain}
+            client={client}
          />

          <div className="h-4 md:h-8" />
@@ -77,9 +77,10 @@ export default async function Image({
    ),
    // download the chain icon if there is one
    chain.icon?.url && hasWorkingChainIcon
-      ? download({ uri: chain.icon.url, client: getThirdwebClient() }).then(
-          (res) => res.arrayBuffer(),
-        )
+      ? download({
+          uri: chain.icon.url,
+          client: getThirdwebClient(undefined),
+        }).then((res) => res.arrayBuffer())
      : undefined,
    // download the background image (based on chain)
    fetch(
@@ -1,6 +1,8 @@
 import { CircleAlertIcon } from "lucide-react";
 import { getRawAccount } from "../../../../account/settings/getAccount";
+import { getUserThirdwebClient } from "../../../../api/lib/getAuthToken";
 import { getChain, getChainMetadata } from "../../utils";
+import NextSteps from "./components/client/NextSteps";
 import { BuyFundsSection } from "./components/server/BuyFundsSection";
 import { ChainOverviewSection } from "./components/server/ChainOverviewSection";
 import { ClaimChainSection } from "./components/server/ClaimChainSection";
@@ -17,6 +19,7 @@ export default async function Page(props: {
  const chainMetadata = await getChainMetadata(chain.chainId);
  const isDeprecated = chain.status === "deprecated";

+  const client = await getUserThirdwebClient();
  const account = await getRawAccount();

  return (
@@ -41,9 +44,9 @@ export default async function Page(props: {

      {/* Faucet / Buy Funds */}
      {chain.testnet ? (
-        <FaucetSection chain={chain} twAccount={account} />
+        <FaucetSection chain={chain} isLoggedIn={!!account} client={client} />
      ) : chain.services.find((c) => c.service === "pay" && c.enabled) ? (
-        <BuyFundsSection chain={chain} />
+        <BuyFundsSection chain={chain} client={client} />
      ) : null}

      {/* Chain Overview */}
@@ -57,6 +60,8 @@ export default async function Page(props: {
      {chain.services.filter((s) => s.enabled).length > 0 && (
        <SupportedProductsSection services={chain.services} />
      )}
+      {/*Next Steps */}
+      <NextSteps chain={chain} />

      {/* Claim Chain */}
      {!chainMetadata && <ClaimChainSection />}
@@ -1,6 +1,4 @@
 "use client";
-
-import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
 import { TransactionButton } from "components/buttons/TransactionButton";
 import { useTrack } from "hooks/analytics/useTrack";
 import { useAllChainsData } from "hooks/chains/allChains";
@@ -13,14 +11,14 @@ interface CancelTabProps {
  id: string;
  contract: ThirdwebContract;
  isAuction?: boolean;
-  twAccount: Account | undefined;
+  isLoggedIn: boolean;
 }

 export const CancelTab: React.FC<CancelTabProps> = ({
  id,
  contract,
  isAuction,
-  twAccount,
+  isLoggedIn,
 }) => {
  const trackEvent = useTrack();
  const { idToChain } = useAllChainsData();
@@ -32,7 +30,7 @@ export const CancelTab: React.FC<CancelTabProps> = ({
  return (
    <div className="flex flex-col gap-3 pt-3">
      <TransactionButton
-        twAccount={twAccount}
+        isLoggedIn={isLoggedIn}
        txChainID={contract.chain.id}
        transactionCount={1}
        isPending={cancelQuery.isPending}
@@ -10,20 +10,19 @@ import {
 } from "@/components/ui/sheet";
 import { TabButtons } from "@/components/ui/tabs";
 import { ListerOnly } from "@3rdweb-sdk/react/components/roles/lister-only";
-import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
-import { isAlchemySupported } from "lib/wallet/nfts/alchemy";
-import { isMoralisSupported } from "lib/wallet/nfts/moralis";
 import { PlusIcon } from "lucide-react";
 import { useState } from "react";
 import type { ThirdwebContract } from "thirdweb";
 import { useActiveAccount } from "thirdweb/react";
+import { isAlchemySupported } from "../../../../../../../lib/wallet/nfts/isAlchemySupported";
+import { isMoralisSupported } from "../../../../../../../lib/wallet/nfts/isMoralisSupported";
 import { CreateListingsForm } from "./list-form";

 interface CreateListingButtonProps {
  contract: ThirdwebContract;
  createText?: string;
  type?: "direct-listings" | "english-auctions";
-  twAccount: Account | undefined;
+  isLoggedIn: boolean;
  isInsightSupported: boolean;
 }

@@ -33,7 +32,7 @@ export const CreateListingButton: React.FC<CreateListingButtonProps> = ({
  createText = "Create",
  type,
  contract,
-  twAccount,
+  isLoggedIn,
  isInsightSupported,
  ...restButtonProps
 }) => {
@@ -77,7 +76,7 @@ export const CreateListingButton: React.FC<CreateListingButtonProps> = ({
              />
              <div className="mt-5">
                <CreateListingsForm
-                  twAccount={twAccount}
+                  isLoggedIn={isLoggedIn}
                  contract={contract}
                  type={type}
                  actionText={createText}
@@ -90,7 +89,7 @@ export const CreateListingButton: React.FC<CreateListingButtonProps> = ({
          ) : (
            <div className="mt-5">
              <CreateListingsForm
-                twAccount={twAccount}
+                isLoggedIn={isLoggedIn}
                contract={contract}
                type={type}
                actionText={createText}
@@ -1,7 +1,6 @@
 import { Alert, AlertTitle } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
-import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
 import { useDashboardOwnedNFTs } from "@3rdweb-sdk/react/hooks/useDashboardOwnedNFTs";
 import { useWalletNFTs } from "@3rdweb-sdk/react/hooks/useWalletNFTs";
 import {
@@ -19,8 +18,6 @@ import { SolidityInput } from "contract-ui/components/solidity-inputs";
 import { useTrack } from "hooks/analytics/useTrack";
 import { useAllChainsData } from "hooks/chains/allChains";
 import { useTxNotifications } from "hooks/useTxNotifications";
-import { isAlchemySupported } from "lib/wallet/nfts/alchemy";
-import { isMoralisSupported } from "lib/wallet/nfts/moralis";
 import type { WalletNFT } from "lib/wallet/nfts/types";
 import { CircleAlertIcon, InfoIcon } from "lucide-react";
 import Link from "next/link";
@@ -57,6 +54,8 @@ import { shortenAddress } from "thirdweb/utils";
 import { FormErrorMessage, FormHelperText, FormLabel } from "tw-components";
 import { NFTMediaWithEmptyState } from "tw-components/nft-media";
 import { shortenIfAddress } from "utils/usedapp-external";
+import { isAlchemySupported } from "../../../../../../../lib/wallet/nfts/isAlchemySupported";
+import { isMoralisSupported } from "../../../../../../../lib/wallet/nfts/isMoralisSupported";

 const LIST_FORM_ID = "marketplace-list-form";

@@ -85,7 +84,7 @@ type CreateListingsFormProps = {
  setOpen: Dispatch<SetStateAction<boolean>>;
  mode: "automatic" | "manual";
  type?: "direct-listings" | "english-auctions";
-  twAccount: Account | undefined;
+  isLoggedIn: boolean;
  isInsightSupported: boolean;
 };

@@ -104,7 +103,7 @@ export const CreateListingsForm: React.FC<CreateListingsFormProps> = ({
  type,
  actionText,
  setOpen,
-  twAccount,
+  isLoggedIn,
  mode,
  isInsightSupported,
 }) => {
@@ -205,6 +204,8 @@ export const CreateListingsForm: React.FC<CreateListingsFormProps> = ({
          owner: nft.owner,
          type: "ERC721",
          tokenURI: nft.tokenURI,
+          chainId: nft.chainId,
+          tokenAddress: nft.tokenAddress,
        };
      }
      return {
@@ -216,6 +217,8 @@ export const CreateListingsForm: React.FC<CreateListingsFormProps> = ({
        owner: nft.owner,
        type: "ERC1155",
        tokenURI: nft.tokenURI,
+        chainId: nft.chainId,
+        tokenAddress: nft.tokenAddress,
      };
    }) as WalletNFT[];
  }, [ownedNFTs, form]);
@@ -655,7 +658,7 @@ export const CreateListingsForm: React.FC<CreateListingsFormProps> = ({
          Cancel
        </Button>
        <TransactionButton
-          twAccount={twAccount}
+          isLoggedIn={isLoggedIn}
          txChainID={contract.chain.id}
          isPending={isFormLoading}
          transactionCount={2}
@@ -3,17 +3,16 @@ import { CopyAddressButton } from "@/components/ui/CopyAddressButton";
 import { CopyTextButton } from "@/components/ui/CopyTextButton";
 import { Badge } from "@/components/ui/badge";
 import { Card } from "@/components/ui/card";
+import { CodeClient } from "@/components/ui/code/code.client";
 import { Sheet, SheetContent } from "@/components/ui/sheet";
 import { Flex, GridItem, SimpleGrid, usePrevious } from "@chakra-ui/react";
+import { toast } from "sonner";
 import type { ThirdwebContract } from "thirdweb";
 import type {
  DirectListing,
  EnglishAuction,
 } from "thirdweb/extensions/marketplace";
-import { useActiveAccount } from "thirdweb/react";
-
-import { CodeClient } from "@/components/ui/code/code.client";
-import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
+import { BuyDirectListingButton, useActiveAccount } from "thirdweb/react";
 import { NFTMediaWithEmptyState } from "tw-components/nft-media";
 import { CancelTab } from "./cancel-tab";
 import { LISTING_STATUS } from "./types";
@@ -23,7 +22,7 @@ interface NFTDrawerProps {
  isOpen: boolean;
  onClose: () => void;
  data: DirectListing | EnglishAuction | null;
-  twAccount: Account | undefined;
+  isLoggedIn: boolean;
 }

 export const ListingDrawer: React.FC<NFTDrawerProps> = ({
@@ -31,7 +30,7 @@ export const ListingDrawer: React.FC<NFTDrawerProps> = ({
  isOpen,
  onClose,
  data,
-  twAccount,
+  isLoggedIn,
 }) => {
  const address = useActiveAccount()?.address;
  const prevData = usePrevious(data);
@@ -141,11 +140,6 @@ export const ListingDrawer: React.FC<NFTDrawerProps> = ({
                  </GridItem>
                </>
              )}
-
-              {/*
-                  Todo: Add a Buy button somewhere in this section once the Dashboard is fully migrated to v5 (?)
-                  Kien already shipped a prebuilt component for the Marketplace Buy Button in SDK v5
-                */}
            </SimpleGrid>
          </Card>
          {data?.asset.metadata.properties ? (
@@ -165,9 +159,30 @@ export const ListingDrawer: React.FC<NFTDrawerProps> = ({
            contract={contract}
            id={renderData.id.toString()}
            isAuction={renderData.type === "english-auction"}
-            twAccount={twAccount}
+            isLoggedIn={isLoggedIn}
          />
        )}
+
+        {!isOwner && renderData.status === "ACTIVE" && (
+          <BuyDirectListingButton
+            listingId={renderData.id}
+            contractAddress={renderData.assetContractAddress}
+            chain={contract.chain}
+            client={contract.client}
+            className="w-full"
+            quantity={1n}
+            onError={(error) => {
+              toast.error("Failed to buy listing", {
+                description: error.message,
+              });
+            }}
+            onTransactionConfirmed={() => {
+              toast.success("Listing bought successfully");
+            }}
+          >
+            Buy Listing
+          </BuyDirectListingButton>
+        )}
      </SheetContent>
    </Sheet>
  );
@@ -1,6 +1,5 @@
 import { WalletAddress } from "@/components/blocks/wallet-address";
 import { Button } from "@/components/ui/button";
-import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
 import {
  IconButton,
  Select,
@@ -99,7 +98,7 @@ interface MarketplaceTableProps {
      start: number;
    }>
  >;
-  twAccount: Account | undefined;
+  isLoggedIn: boolean;
 }

 const DEFAULT_QUERY_STATE = { count: 50, start: 0 };
@@ -111,7 +110,7 @@ export const MarketplaceTable: React.FC<MarketplaceTableProps> = ({
  totalCountQuery,
  queryParams,
  setQueryParams,
-  twAccount,
+  isLoggedIn,
 }) => {
  const [listingsToShow, setListingsToShow_] = useState<"all" | "valid">("all");

@@ -216,7 +215,7 @@ export const MarketplaceTable: React.FC<MarketplaceTableProps> = ({
          data={tokenRow}
          isOpen={!!tokenRow}
          onClose={() => setTokenRow(null)}
-          twAccount={twAccount}
+          isLoggedIn={isLoggedIn}
        />
        <Table {...getTableProps()}>
          <Thead>
@@ -1,6 +1,5 @@
 "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";
@@ -9,7 +8,7 @@ import { ContractDirectListingsPage } from "./ContractDirectListingsPage";

 export function ContractDirectListingsPageClient(props: {
  contract: ThirdwebContract;
-  twAccount: Account | undefined;
+  isLoggedIn: boolean;
 }) {
  const metadataQuery = useContractPageMetadata(props.contract);

@@ -28,7 +27,7 @@ export function ContractDirectListingsPageClient(props: {
  return (
    <ContractDirectListingsPage
      contract={props.contract}
-      twAccount={props.twAccount}
+      isLoggedIn={props.isLoggedIn}
      isInsightSupported={metadataQuery.data.isInsightSupported}
    />
  );
@@ -1,35 +1,36 @@
 "use client";

-import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
 import type { ThirdwebContract } from "thirdweb";
 import { CreateListingButton } from "../components/list-button";
 import { DirectListingsTable } from "./components/table";

 interface ContractDirectListingsPageProps {
  contract: ThirdwebContract;
-  twAccount: Account | undefined;
+  isLoggedIn: boolean;
  isInsightSupported: boolean;
 }

 export const ContractDirectListingsPage: React.FC<
  ContractDirectListingsPageProps
-> = ({ contract, twAccount, isInsightSupported }) => {
+> = ({ contract, isLoggedIn, isInsightSupported }) => {
  return (
    <div className="flex flex-col gap-6">
      <div className="flex flex-row items-center justify-between">
-        <p className="text-lg">Contract Listings</p>
+        <h2 className="font-semibold text-2xl tracking-tight">
+          Direct Listings
+        </h2>
        <div className="flex flex-row gap-4">
          <CreateListingButton
            isInsightSupported={isInsightSupported}
            contract={contract}
            type="direct-listings"
            createText="Create Direct Listing"
-            twAccount={twAccount}
+            isLoggedIn={isLoggedIn}
          />
        </div>
      </div>

-      <DirectListingsTable contract={contract} twAccount={twAccount} />
+      <DirectListingsTable contract={contract} isLoggedIn={isLoggedIn} />
    </div>
  );
 };
@@ -1,6 +1,5 @@
 "use client";

-import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
 import { useState } from "react";
 import type { ThirdwebContract } from "thirdweb";
 import {
@@ -13,14 +12,14 @@ import { MarketplaceTable } from "../../components/marketplace-table";

 interface DirectListingsTableProps {
  contract: ThirdwebContract;
-  twAccount: Account | undefined;
+  isLoggedIn: boolean;
 }

 const DEFAULT_QUERY_STATE = { count: 50, start: 0 };

 export const DirectListingsTable: React.FC<DirectListingsTableProps> = ({
  contract,
-  twAccount,
+  isLoggedIn,
 }) => {
  const [queryParams, setQueryParams] = useState(DEFAULT_QUERY_STATE);
  const getAllQueryResult = useReadContract(getAllListings, {
@@ -43,7 +42,7 @@ export const DirectListingsTable: React.FC<DirectListingsTableProps> = ({
      totalCountQuery={totalCountQuery}
      queryParams={queryParams}
      setQueryParams={setQueryParams}
-      twAccount={twAccount}
+      isLoggedIn={isLoggedIn}
    />
  );
 };
@@ -24,7 +24,7 @@ export default async function Page(props: {
    return (
      <ContractDirectListingsPageClient
        contract={info.contract}
-        twAccount={account}
+        isLoggedIn={!!account}
      />
    );
  }
@@ -39,7 +39,7 @@ export default async function Page(props: {
  return (
    <ContractDirectListingsPage
      contract={info.contract}
-      twAccount={account}
+      isLoggedIn={!!account}
      isInsightSupported={isInsightSupported}
    />
  );
@@ -1,6 +1,5 @@
 "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";
@@ -9,7 +8,7 @@ import { ContractEnglishAuctionsPage } from "./ContractEnglishAuctionsPage";

 export function ContractEnglishAuctionsPageClient(props: {
  contract: ThirdwebContract;
-  twAccount: Account | undefined;
+  isLoggedIn: boolean;
 }) {
  const metadataQuery = useContractPageMetadata(props.contract);

@@ -28,7 +27,7 @@ export function ContractEnglishAuctionsPageClient(props: {
  return (
    <ContractEnglishAuctionsPage
      contract={props.contract}
-      twAccount={props.twAccount}
+      isLoggedIn={props.isLoggedIn}
      isInsightSupported={metadataQuery.data.isInsightSupported}
    />
  );
@@ -1,35 +1,36 @@
 "use client";

-import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
 import type { ThirdwebContract } from "thirdweb";
 import { CreateListingButton } from "../components/list-button";
 import { EnglishAuctionsTable } from "./components/table";

 interface ContractEnglishAuctionsProps {
  contract: ThirdwebContract;
-  twAccount: Account | undefined;
+  isLoggedIn: boolean;
  isInsightSupported: boolean;
 }

 export const ContractEnglishAuctionsPage: React.FC<
  ContractEnglishAuctionsProps
-> = ({ contract, twAccount, isInsightSupported }) => {
+> = ({ contract, isLoggedIn, isInsightSupported }) => {
  return (
    <div className="flex flex-col gap-6">
      <div className="flex flex-row items-center justify-between">
-        <p className="text-lg">Contract Auctions</p>
+        <h2 className="font-semibold text-2xl tracking-tight">
+          English Auctions
+        </h2>
        <div className="flex flex-row gap-4">
          <CreateListingButton
            contract={contract}
            type="english-auctions"
            createText="Create English Auction"
-            twAccount={twAccount}
+            isLoggedIn={isLoggedIn}
            isInsightSupported={isInsightSupported}
          />
        </div>
      </div>

-      <EnglishAuctionsTable contract={contract} twAccount={twAccount} />
+      <EnglishAuctionsTable contract={contract} isLoggedIn={isLoggedIn} />
    </div>
  );
 };
@@ -1,6 +1,5 @@
 "use client";

-import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
 import { useState } from "react";
 import type { ThirdwebContract } from "thirdweb";
 import {
@@ -13,14 +12,14 @@ import { MarketplaceTable } from "../../components/marketplace-table";

 interface EnglishAuctionsTableProps {
  contract: ThirdwebContract;
-  twAccount: Account | undefined;
+  isLoggedIn: boolean;
 }

 const DEFAULT_QUERY_STATE = { count: 50, start: 0 };

 export const EnglishAuctionsTable: React.FC<EnglishAuctionsTableProps> = ({
  contract,
-  twAccount,
+  isLoggedIn,
 }) => {
  const [queryParams, setQueryParams] = useState(DEFAULT_QUERY_STATE);
  const getAllQueryResult = useReadContract(getAllAuctions, {
@@ -37,7 +36,7 @@ export const EnglishAuctionsTable: React.FC<EnglishAuctionsTableProps> = ({

  return (
    <MarketplaceTable
-      twAccount={twAccount}
+      isLoggedIn={isLoggedIn}
      contract={contract}
      getAllQueryResult={getAllQueryResult}
      getValidQueryResult={getValidQueryResult}
@@ -25,7 +25,7 @@ export default async function Page(props: {
    return (
      <ContractEnglishAuctionsPageClient
        contract={info.contract}
-        twAccount={twAccount}
+        isLoggedIn={!!twAccount}
      />
    );
  }
@@ -40,7 +40,7 @@ export default async function Page(props: {
  return (
    <ContractEnglishAuctionsPage
      contract={info.contract}
-      twAccount={twAccount}
+      isLoggedIn={!!twAccount}
      isInsightSupported={isInsightSupported}
    />
  );
@@ -1,14 +1,7 @@
-import {
-  Flex,
-  GridItem,
-  SimpleGrid,
-  Skeleton,
-  SkeletonText,
-  useBreakpointValue,
-} from "@chakra-ui/react";
+import { SkeletonContainer } from "@/components/ui/skeleton";
+import { TrackedLinkTW } from "@/components/ui/tracked-link";
 import { useMemo } from "react";
 import { type NFT, ZERO_ADDRESS } from "thirdweb";
-import { Card, TrackedLink, type TrackedLinkProps } from "tw-components";
 import { NFTMediaWithEmptyState } from "tw-components/nft-media";

 type NFTWithContract = NFT & { contractAddress: string; chainId: number };
@@ -20,18 +13,20 @@ const dummyMetadata: (idx: number) => NFTWithContract = (idx) => ({
  tokenURI: `1-0x123-${idx}`,
  metadata: {
    name: "Loading...",
-    description: "lorem ipsum loading sit amet",
+    description:
+      "lorem ipsum loading sit amet consectetur adipisicing elit. Quisquam, quos.",
    id: BigInt(idx || 0),
    uri: `1-0x123-${idx}`,
  },
  owner: `0x_fake_${idx}`,
  type: "ERC721",
  supply: 1n,
+  tokenAddress: ZERO_ADDRESS,
 });

 interface NFTCardsProps {
  nfts: Array<NFTWithContract>;
-  trackingCategory: TrackedLinkProps["category"];
+  trackingCategory: string;
  isPending: boolean;
  allNfts?: boolean;
 }
@@ -42,61 +37,82 @@ export const NFTCards: React.FC<NFTCardsProps> = ({
  isPending,
  allNfts,
 }) => {
-  const isMobile = useBreakpointValue({ base: true, md: false });
-
  const dummyData = useMemo(() => {
    return Array.from({
-      length: allNfts ? nfts.length : isMobile ? 2 : 3,
+      length: allNfts ? nfts.length : 3,
    }).map((_, idx) => dummyMetadata(idx));
-  }, [nfts.length, isMobile, allNfts]);
+  }, [nfts.length, allNfts]);

  return (
-    <SimpleGrid
-      gap={{ base: 3, md: 6 }}
-      columns={allNfts ? { base: 2, md: 4 } : { base: 2, md: 3 }}
-    >
+    <div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
      {(isPending ? dummyData : nfts).map((token) => {
        const tokenId = token.id.toString();

        return (
-          <GridItem
+          <div
            key={`${token.chainId}_${token.contractAddress}_${tokenId}`}
-            as={TrackedLink}
-            category={trackingCategory}
-            href={`/${token.chainId}/${token.contractAddress}/nfts/${tokenId}`}
-            _hover={{ opacity: 0.75, textDecoration: "none" }}
+            className="hover:-translate-y-0.5 relative flex h-full cursor-pointer flex-col overflow-hidden rounded-lg bg-background duration-200 hover:scale-[1.01]"
          >
-            <Card p={0} h="full">
-              <div className="relative aspect-square w-full overflow-hidden rounded-xl">
-                <Skeleton isLoaded={!isPending}>
-                  <NFTMediaWithEmptyState
-                    metadata={token.metadata}
-                    requireInteraction
-                    width="100%"
-                    height="100%"
-                  />
-                </Skeleton>
-              </div>
-              <Flex p={4} pb={3} gap={1} direction="column">
-                <Skeleton w={!isPending ? "100%" : "50%"} isLoaded={!isPending}>
-                  <h2 className="font-semibold tracking-tight">
-                    {token.metadata.name}
-                  </h2>
-                </Skeleton>
-                <SkeletonText isLoaded={!isPending}>
-                  <p className="line-clamp-3 text-muted-foreground text-sm">
-                    {token.metadata.description ? (
-                      token.metadata.description
-                    ) : (
-                      <i>No description</i>
-                    )}
-                  </p>
-                </SkeletonText>
-              </Flex>
-            </Card>
-          </GridItem>
+            {/* border */}
+            <div className="absolute inset-0 rounded-lg border border-border" />
+
+            {/* image */}
+            <div className="relative aspect-square w-full overflow-hidden">
+              <SkeletonContainer
+                skeletonData={token.metadata}
+                loadedData={isPending ? undefined : token.metadata}
+                className="h-full w-full rounded-lg"
+                render={(v) => {
+                  return (
+                    <NFTMediaWithEmptyState
+                      metadata={v}
+                      requireInteraction
+                      width="100%"
+                      height="100%"
+                    />
+                  );
+                }}
+              />
+            </div>
+
+            <div className="p-4">
+              {/* title */}
+              <SkeletonContainer
+                skeletonData={token.metadata}
+                loadedData={isPending ? undefined : token.metadata}
+                className="mb-2"
+                render={(v) => {
+                  return (
+                    <h2 className="font-semibold tracking-tight">
+                      <TrackedLinkTW
+                        category={trackingCategory}
+                        label="view_nft"
+                        href={`/${token.chainId}/${token.contractAddress}/nfts/${tokenId}`}
+                        className="before:absolute before:inset-0"
+                      >
+                        {v.name}
+                      </TrackedLinkTW>
+                    </h2>
+                  );
+                }}
+              />
+
+              {/* Description */}
+              <SkeletonContainer
+                skeletonData={token.metadata}
+                loadedData={isPending ? undefined : token.metadata}
+                render={(v) => {
+                  return (
+                    <p className="line-clamp-3 text-muted-foreground text-sm">
+                      {v.description ? v.description : <i>No description</i>}
+                    </p>
+                  );
+                }}
+              />
+            </div>
+          </div>
        );
      })}
-    </SimpleGrid>
+    </div>
  );
 };
@@ -55,7 +55,7 @@ type Options =
    };

 export async function getClaimPhasesInLegacyFormat(
-  options: BaseTransactionOptions<Options>,
+  options: BaseTransactionOptions<Options> & { isMultiPhase: boolean },
 ): Promise<CombinedClaimCondition[]> {
  const conditions = await (async () => {
    switch (options.type) {
@@ -64,7 +64,10 @@ export async function getClaimPhasesInLegacyFormat(
      case "erc721":
        return ERC721Ext.getClaimConditions(options);
      case "erc1155":
-        return ERC1155Ext.getClaimConditions(options);
+        return ERC1155Ext.getClaimConditions({
+          ...options,
+          singlePhaseDrop: !options.isMultiPhase,
+        });
    }
  })();

@@ -126,7 +129,7 @@ export async function getClaimPhasesInLegacyFormat(
 type PhaseInput = z.input<typeof LegacyClaimConditionInputSchema>;

 export function setClaimPhasesTx(
-  baseOptions: BaseTransactionOptions<Options>,
+  baseOptions: BaseTransactionOptions<Options> & { isSinglePhase?: boolean },
  rawPhases: PhaseInput[],
 ) {
  const phases = rawPhases.map((phase) => {
@@ -172,6 +175,7 @@ export function setClaimPhasesTx(
        contract: baseOptions.contract,
        phases,
        tokenId: baseOptions.tokenId,
+        singlePhaseDrop: baseOptions.isSinglePhase,
      });
  }
 }
@@ -3,7 +3,6 @@
 import { Spinner } from "@/components/ui/Spinner/Spinner";
 import { ToolTipLabel } from "@/components/ui/tooltip";
 import { AdminOnly } from "@3rdweb-sdk/react/components/roles/admin-only";
-import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
 import { useIsAdmin } from "@3rdweb-sdk/react/hooks/useContractRoles";
 import {
  Alert,
@@ -187,7 +186,7 @@ interface ClaimConditionsFormProps {
  isColumn?: true;
  isErc20: boolean;
  isMultiPhase: boolean;
-  twAccount: Account | undefined;
+  isLoggedIn: boolean;
 }

 export const ClaimConditionsForm: React.FC<ClaimConditionsFormProps> = ({
@@ -196,7 +195,7 @@ export const ClaimConditionsForm: React.FC<ClaimConditionsFormProps> = ({
  isColumn,
  isErc20,
  isMultiPhase,
-  twAccount,
+  isLoggedIn,
 }) => {
  // assume 1155 if we have a tokenId
  const isErc1155 = tokenId !== undefined;
@@ -222,11 +221,15 @@ export const ClaimConditionsForm: React.FC<ClaimConditionsFormProps> = ({

  const claimConditionsQuery = useReadContract(getClaimPhasesInLegacyFormat, {
    contract,
+    isMultiPhase,
    ...(isErc20
      ? { type: "erc20", decimals: tokenDecimals.data }
      : isErc721
        ? { type: "erc721" }
-        : { type: "erc1155", tokenId: BigInt(tokenId || 0) }),
+        : {
+            type: "erc1155",
+            tokenId: BigInt(tokenId || 0),
+          }),
  });

  const transformedQueryData = useMemo(() => {
@@ -370,6 +373,7 @@ export const ClaimConditionsForm: React.FC<ClaimConditionsFormProps> = ({
      const tx = setClaimPhasesTx(
        {
          contract,
+          isSinglePhase: !isMultiPhase,
          ...(isErc20
            ? { type: "erc20", decimals: tokenDecimals.data }
            : isErc721
@@ -631,10 +635,11 @@ export const ClaimConditionsForm: React.FC<ClaimConditionsFormProps> = ({

              {controlledFields.some((field) => field.fromSdk) && (
                <ResetClaimEligibility
-                  twAccount={twAccount}
+                  isLoggedIn={isLoggedIn}
                  isErc20={isErc20}
                  contract={contract}
                  tokenId={tokenId}
+                  isMultiphase={isMultiPhase}
                />
              )}
            </div>
@@ -651,7 +656,7 @@ export const ClaimConditionsForm: React.FC<ClaimConditionsFormProps> = ({
                  hasRemovedPhases ||
                  !isMultiPhase ? (
                    <TransactionButton
-                      twAccount={twAccount}
+                      isLoggedIn={isLoggedIn}
                      txChainID={contract.chain.id}
                      transactionCount={1}
                      disabled={claimConditionsQuery.isPending}
@@ -1,6 +1,5 @@
 "use client";

-import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
 import type { ThirdwebContract } from "thirdweb";
 import { ClaimConditionsForm } from "./claim-conditions-form/index";

@@ -9,14 +8,16 @@ interface ClaimConditionsProps {
  tokenId?: string;
  isColumn?: true;
  isERC20: boolean;
-  twAccount: Account | undefined;
+  isLoggedIn: boolean;
+  isMultiphase: boolean;
 }
 export const ClaimConditions: React.FC<ClaimConditionsProps> = ({
  contract,
  tokenId,
  isColumn,
  isERC20,
-  twAccount,
+  isLoggedIn,
+  isMultiphase,
 }) => {
  return (
    <div className="flex w-full flex-col gap-6">
@@ -32,13 +33,12 @@ export const ClaimConditions: React.FC<ClaimConditionsProps> = ({

      {/* Set Claim Conditions */}
      <ClaimConditionsForm
-        twAccount={twAccount}
+        isLoggedIn={isLoggedIn}
        isErc20={isERC20}
        contract={contract}
        tokenId={tokenId}
        isColumn={isColumn}
-        // always multi phase!
-        isMultiPhase={true}
+        isMultiPhase={isMultiphase}
      />
    </div>
  );
@@ -2,7 +2,6 @@

 import { ToolTipLabel } from "@/components/ui/tooltip";
 import { AdminOnly } from "@3rdweb-sdk/react/components/roles/admin-only";
-import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
 import { TransactionButton } from "components/buttons/TransactionButton";
 import { useTrack } from "hooks/analytics/useTrack";
 import { useTxNotifications } from "hooks/useTxNotifications";
@@ -17,14 +16,16 @@ interface ResetClaimEligibilityProps {
  isErc20: boolean;
  contract: ThirdwebContract;
  tokenId?: string;
-  twAccount: Account | undefined;
+  isLoggedIn: boolean;
+  isMultiphase: boolean;
 }

 export const ResetClaimEligibility: React.FC<ResetClaimEligibilityProps> = ({
  contract,
  tokenId,
  isErc20,
-  twAccount,
+  isLoggedIn,
+  isMultiphase,
 }) => {
  const trackEvent = useTrack();

@@ -55,6 +56,7 @@ export const ResetClaimEligibility: React.FC<ResetClaimEligibilityProps> = ({
          return ERC1155Ext.resetClaimEligibility({
            contract,
            tokenId: BigInt(tokenId),
+            singlePhaseDrop: !isMultiphase,
          });
        }
        // assume erc 721
@@ -92,7 +94,7 @@ export const ResetClaimEligibility: React.FC<ResetClaimEligibilityProps> = ({
  return (
    <AdminOnly contract={contract} fallback={<div className="pb-5" />}>
      <TransactionButton
-        twAccount={twAccount}
+        isLoggedIn={isLoggedIn}
        transactionCount={1}
        type="button"
        isPending={sendTxMutation.isPending}
@@ -1,4 +1,3 @@
-import { getThirdwebClient } from "@/constants/thirdweb.server";
 import {
  type DashboardContractMetadata,
  fetchDashboardContractMetadata,
@@ -32,6 +31,7 @@ export function ContractMetadata({
      chain={chain}
      address={contract.address}
      externalLinks={externalLinks}
+      client={contract.client}
    />
  );
 }
@@ -43,7 +43,7 @@ export async function getContractMetadataHeaderData(
    fetchDashboardContractMetadata(contract),
    fetchPublishedContractsFromDeploy({
      contract,
-      client: getThirdwebClient(),
+      client: contract.client,
    }),
  ]);

@@ -36,33 +36,34 @@ export function ContractPageLayout(props: {

  return (
    <ChakraProviderSetup>
-      <SidebarLayout sidebarLinks={sidebarLinks}>
-        <div className="border-border border-b pb-8">
-          <div className="flex flex-col gap-4 ">
-            <div className="flex flex-col justify-between gap-4 md:flex-row">
-              <ContractMetadata
-                contract={contract}
-                chain={chainMetadata}
-                contractMetadata={dashboardContractMetadata}
-                externalLinks={externalLinks}
-              />
-              <PrimaryDashboardButton
-                contractAddress={contract.address}
-                chain={contract.chain}
-                contractInfo={{
-                  chain: chainMetadata,
-                  chainSlug: chainMetadata.slug,
-                  contractAddress: contract.address,
-                }}
-                teamsAndProjects={teamsAndProjects}
-                client={client}
-              />
-            </div>
-            <DeprecatedAlert chain={chainMetadata} />
+      <div className="border-border border-b py-8">
+        <div className="container flex flex-col gap-4">
+          <div className="flex flex-col justify-between gap-4 md:flex-row">
+            <ContractMetadata
+              contract={contract}
+              chain={chainMetadata}
+              contractMetadata={dashboardContractMetadata}
+              externalLinks={externalLinks}
+            />
+            <PrimaryDashboardButton
+              contractAddress={contract.address}
+              chain={contract.chain}
+              contractInfo={{
+                chain: chainMetadata,
+                chainSlug: chainMetadata.slug,
+                contractAddress: contract.address,
+              }}
+              teamsAndProjects={teamsAndProjects}
+              client={client}
+            />
          </div>
+          <DeprecatedAlert chain={chainMetadata} />
        </div>
-        <div className="h-8" />
-        <div className="pb-10">{props.children}</div>
+      </div>
+
+      <SidebarLayout sidebarLinks={sidebarLinks}>
+        {props.children}
+        <div className="h-20" />
      </SidebarLayout>
    </ChakraProviderSetup>
  );
@@ -2,10 +2,10 @@

 import { CopyAddressButton } from "@/components/ui/CopyAddressButton";
 import { Button } from "@/components/ui/button";
-import { getThirdwebClient } from "@/constants/thirdweb.server";
-import { ChainIcon } from "components/icons/ChainIcon";
+import { ChainIconClient } from "components/icons/ChainIcon";
 import { ExternalLinkIcon } from "lucide-react";
 import Link from "next/link";
+import type { ThirdwebClient } from "thirdweb";
 import type { ChainMetadata } from "thirdweb/chains";
 import { MediaRenderer } from "thirdweb/react";

@@ -22,6 +22,7 @@ interface MetadataHeaderProps {
  };
  chain: ChainMetadata;
  externalLinks?: ExternalLink[];
+  client: ThirdwebClient;
 }

 export const MetadataHeader: React.FC<MetadataHeaderProps> = ({
@@ -29,6 +30,7 @@ export const MetadataHeader: React.FC<MetadataHeaderProps> = ({
  data,
  chain,
  externalLinks,
+  client,
 }) => {
  const cleanedChainName = chain?.name?.replace("Mainnet", "").trim();
  const validBlockExplorers = chain?.explorers
@@ -56,7 +58,7 @@ export const MetadataHeader: React.FC<MetadataHeaderProps> = ({
        <div className="size-16 shrink-0 overflow-hidden rounded-lg border border-border bg-muted md:size-20">
          <MediaRenderer
            src={data?.image}
-            client={getThirdwebClient()}
+            client={client}
            alt={""}
            className="h-full w-full"
            style={{
@@ -66,7 +68,7 @@ export const MetadataHeader: React.FC<MetadataHeaderProps> = ({
        </div>
      )}

-      <div className="flex grow flex-col gap-4">
+      <div className="flex grow flex-col gap-3">
        {/* Title */}
        {!data ? (
          <h1 className="font-semibold text-2xl tracking-tight lg:text-3xl">
@@ -75,7 +77,7 @@ export const MetadataHeader: React.FC<MetadataHeaderProps> = ({
        ) : (
          <div className="flex flex-col gap-3 lg:flex-row lg:items-center">
            {data?.name && (
-              <h1 className="line-clamp-2 font-semibold text-2xl tracking-tight lg:text-3xl">
+              <h1 className="line-clamp-2 font-bold text-2xl tracking-tight lg:text-3xl">
                {data.name}
              </h1>
            )}
@@ -85,7 +87,11 @@ export const MetadataHeader: React.FC<MetadataHeaderProps> = ({
                href={`/${chain.slug}`}
                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" />
+                <ChainIconClient
+                  src={chain.icon?.url}
+                  client={client}
+                  className="size-4"
+                />
                {cleanedChainName && (
                  <span className="text-xs">{cleanedChainName}</span>
                )}
@@ -89,7 +89,7 @@ function AddToProjectButton(props: {
  return (
    <Dialog>
      <DialogTrigger asChild>
-        <Button className="gap-2" variant="outline">
+        <Button className="gap-2 bg-card" variant="outline">
          <PlusIcon className="size-4" />
          Add To Project
        </Button>
@@ -5,6 +5,7 @@ import { TW_LOCAL_CHAIN_STORE } from "stores/storageKeys";
 import { getAddress, getContract, isAddress } from "thirdweb";
 import type { ChainMetadata } from "thirdweb/chains";
 import { fetchChain } from "utils/fetchChain";
+import { LAST_USED_TEAM_ID } from "../../../../../../constants/cookies";
 import { getAuthToken } from "../../../../../api/lib/getAuthToken";

 export async function getContractPageParamsInfo(params: {
@@ -43,13 +44,18 @@ export async function getContractPageParamsInfo(params: {

  // attempt to get the auth token
  const token = await getAuthToken();
+  const cookiesObj = await cookies();
+  const teamId = cookiesObj.get(LAST_USED_TEAM_ID)?.value;

  const contract = getContract({
    address: contractAddress,
    // eslint-disable-next-line no-restricted-syntax
    chain: mapV4ChainToV5Chain(chainMetadata),
    // if we have the auth token pass it into the client
-    client: getThirdwebClient(token || undefined),
+    client: getThirdwebClient({
+      jwt: token || undefined,
+      teamId,
+    }),
  });

  return {
@@ -1,6 +1,5 @@
 "use client";

-import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
 import type { ThirdwebContract } from "thirdweb";
 import type { ChainMetadata } from "thirdweb/chains";
 import { ErrorPage, LoadingPage } from "../_components/page-skeletons";
@@ -11,7 +10,7 @@ import { AccountPage } from "./AccountPage";
 export function AccountPageClient(props: {
  contract: ThirdwebContract;
  chainMetadata: ChainMetadata;
-  twAccount: Account | undefined;
+  isLoggedIn: boolean;
 }) {
  const metadataQuery = useContractPageMetadata(props.contract);

@@ -31,7 +30,7 @@ export function AccountPageClient(props: {
    <AccountPage
      contract={props.contract}
      chainMetadata={props.chainMetadata}
-      twAccount={props.twAccount}
+      isLoggedIn={props.isLoggedIn}
      isInsightSupported={metadataQuery.data.isInsightSupported}
    />
  );
@@ -1,6 +1,5 @@
 "use client";

-import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
 import type { ThirdwebContract } from "thirdweb";
 import type { ChainMetadata } from "thirdweb/chains";
 import { Heading } from "tw-components";
@@ -11,14 +10,14 @@ import { NftsOwned } from "./components/nfts-owned";
 interface AccountPageProps {
  contract: ThirdwebContract;
  chainMetadata: ChainMetadata;
-  twAccount: Account | undefined;
+  isLoggedIn: boolean;
  isInsightSupported: boolean;
 }

 export const AccountPage: React.FC<AccountPageProps> = ({
  contract,
  chainMetadata,
-  twAccount,
+  isLoggedIn,
  isInsightSupported,
 }) => {
  const symbol = chainMetadata.nativeCurrency.symbol || "Native Token";
@@ -35,7 +34,7 @@ export const AccountPage: React.FC<AccountPageProps> = ({

      {chainMetadata && (
        <DepositNative
-          twAccount={twAccount}
+          isLoggedIn={isLoggedIn}
          address={contract.address}
          symbol={symbol}
          chain={chainMetadata}
@@ -1,7 +1,6 @@
 "use client";

 import { useThirdwebClient } from "@/constants/thirdweb.client";
-import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
 import { Input } from "@chakra-ui/react";
 import { TransactionButton } from "components/buttons/TransactionButton";
 import { useV5DashboardChain } from "lib/v5-adapter";
@@ -15,14 +14,14 @@ interface DepositNativeProps {
  address: string;
  symbol: string;
  chain: StoredChain;
-  twAccount: Account | undefined;
+  isLoggedIn: boolean;
 }

 export const DepositNative: React.FC<DepositNativeProps> = ({
  address,
  symbol,
  chain,
-  twAccount,
+  isLoggedIn,
 }) => {
  const client = useThirdwebClient();
  const { mutate: transfer, isPending } = useSendAndConfirmTransaction();
@@ -49,7 +48,7 @@ export const DepositNative: React.FC<DepositNativeProps> = ({
        value={amount}
      />
      <TransactionButton
-        twAccount={twAccount}
+        isLoggedIn={isLoggedIn}
        txChainID={v5Chain.id}
        transactionCount={1}
        isPending={isPending}
@@ -33,6 +33,7 @@ export const NftsOwned: React.FC<NftsOwnedProps> = ({
        type: nft.type,
        contractAddress: nft.contractAddress,
        chainId: contract.chain.id,
+        tokenAddress: nft.tokenAddress,
      }))}
      allNfts
      isPending={isWalletNFTsLoading}
@@ -28,7 +28,7 @@ export default async function Page(props: {
      <AccountPageClient
        contract={contract}
        chainMetadata={chainMetadata}
-        twAccount={account}
+        isLoggedIn={!!account}
      />
    );
  }
@@ -44,7 +44,7 @@ export default async function Page(props: {
    <AccountPage
      contract={contract}
      chainMetadata={chainMetadata}
-      twAccount={account}
+      isLoggedIn={!!account}
      isInsightSupported={isInsightSupported}
    />
  );
@@ -1,6 +1,5 @@
 "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";
@@ -9,7 +8,7 @@ import { AccountsPage } from "./AccountsPage";

 export function AccountsPageClient(props: {
  contract: ThirdwebContract;
-  twAccount: Account | undefined;
+  isLoggedIn: boolean;
 }) {
  const metadataQuery = useContractPageMetadata(props.contract);

@@ -25,5 +24,7 @@ export function AccountsPageClient(props: {
    return <RedirectToContractOverview contract={props.contract} />;
  }

-  return <AccountsPage contract={props.contract} twAccount={props.twAccount} />;
+  return (
+    <AccountsPage contract={props.contract} isLoggedIn={props.isLoggedIn} />
+  );
 }
@@ -1,6 +1,5 @@
 "use client";

-import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
 import { ButtonGroup, Flex } from "@chakra-ui/react";
 import type { ThirdwebContract } from "thirdweb";
 import { Heading, TrackedLinkButton } from "tw-components";
@@ -10,12 +9,12 @@ import { CreateAccountButton } from "./components/create-account-button";

 interface AccountsPageProps {
  contract: ThirdwebContract;
-  twAccount: Account | undefined;
+  isLoggedIn: boolean;
 }

 export const AccountsPage: React.FC<AccountsPageProps> = ({
  contract,
-  twAccount,
+  isLoggedIn,
 }) => {
  return (
    <Flex direction="column" gap={6}>
@@ -40,7 +39,7 @@ export const AccountsPage: React.FC<AccountsPageProps> = ({
          >
            View Documentation
          </TrackedLinkButton>
-          <CreateAccountButton contract={contract} twAccount={twAccount} />
+          <CreateAccountButton contract={contract} isLoggedIn={isLoggedIn} />
        </ButtonGroup>
      </Flex>
      <AccountsCount contract={contract} />
@@ -2,7 +2,6 @@

 import { Button } from "@/components/ui/button";
 import { ToolTipLabel } from "@/components/ui/tooltip";
-import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
 import { TransactionButton } from "components/buttons/TransactionButton";
 import type { ThirdwebContract } from "thirdweb";
 import * as ERC4337Ext from "thirdweb/extensions/erc4337";
@@ -14,12 +13,12 @@ import {

 interface CreateAccountButtonProps {
  contract: ThirdwebContract;
-  twAccount: Account | undefined;
+  isLoggedIn: boolean;
 }

 export const CreateAccountButton: React.FC<CreateAccountButtonProps> = ({
  contract,
-  twAccount,
+  isLoggedIn,
  ...restButtonProps
 }) => {
  const sendTxMutation = useSendAndConfirmTransaction();
@@ -62,7 +61,7 @@ export const CreateAccountButton: React.FC<CreateAccountButtonProps> = ({

  return (
    <TransactionButton
-      twAccount={twAccount}
+      isLoggedIn={isLoggedIn}
      txChainID={contract.chain.id}
      onClick={() => {
        const tx = ERC4337Ext.createAccount({
@@ -24,7 +24,7 @@ export default async function Page(props: {
  const account = await getRawAccount();

  if (chainMetadata.chainId === localhost.id) {
-    return <AccountsPageClient contract={contract} twAccount={account} />;
+    return <AccountsPageClient contract={contract} isLoggedIn={!!account} />;
  }

  const { isAccountFactory } = await getContractPageMetadata(contract);
@@ -33,5 +33,5 @@ export default async function Page(props: {
    redirect(`/${params.chain_id}/${params.contractAddress}`);
  }

-  return <AccountsPage contract={contract} twAccount={account} />;
+  return <AccountsPage contract={contract} isLoggedIn={!!account} />;
 }
@@ -1,6 +1,6 @@
 "use client";
 import { ThirdwebBarChart } from "@/components/blocks/charts/bar-chart";
-import { Skeleton, Stat, StatLabel, StatNumber } from "@chakra-ui/react";
+import { SkeletonContainer } from "@/components/ui/skeleton";
 import type { UseQueryResult } from "@tanstack/react-query";
 import {
  type AnalyticsQueryParams,
@@ -14,9 +14,9 @@ import {
  useTotalContractTransactionAnalytics,
  useTotalContractUniqueWallets,
 } from "data/analytics/hooks";
-import { Suspense, useMemo, useState } from "react";
+import { formatDate } from "date-fns";
+import { useMemo, useState } from "react";
 import type { ThirdwebContract } from "thirdweb";
-import { Card } from "tw-components";
 import {
  DateRangeSelector,
  type Range,
@@ -121,6 +121,15 @@ type ChartProps = {
  startDate: Date;
  endDate: Date;
 };
+
+function toolTipLabelFormatter(_v: string, item: unknown) {
+  if (Array.isArray(item)) {
+    const time = item[0].payload.time as number;
+    return formatDate(new Date(time), "MMM d, yyyy");
+  }
+  return undefined;
+}
+
 function UniqueWalletsChart(props: ChartProps) {
  const analyticsQuery = useContractUniqueWalletAnalytics(props);

@@ -128,6 +137,7 @@ function UniqueWalletsChart(props: ChartProps) {
    <ThirdwebBarChart
      header={{
        title: "Unique Wallets",
+        titleClassName: "mb-0.5 text-xl",
        description:
          "The number of unique wallet addresses that have sent a transaction to this contract.",
      }}
@@ -140,6 +150,8 @@ function UniqueWalletsChart(props: ChartProps) {
        },
      }}
      chartClassName="aspect-[1.5] lg:aspect-[4.5]"
+      hideLabel={false}
+      toolTipLabelFormatter={toolTipLabelFormatter}
    />
  );
 }
@@ -156,6 +168,7 @@ function TotalTransactionsChart(props: ChartProps) {
    <ThirdwebBarChart
      header={{
        title: "Total Transactions",
+        titleClassName: "mb-0.5 text-xl",
        description:
          "The number of transactions that have been sent to this contract.",
      }}
@@ -168,6 +181,8 @@ function TotalTransactionsChart(props: ChartProps) {
        },
      }}
      chartClassName="aspect-[1.5] lg:aspect-[4.5]"
+      hideLabel={false}
+      toolTipLabelFormatter={toolTipLabelFormatter}
    />
  );
 }
@@ -179,6 +194,7 @@ function TotalEventsChart(props: ChartProps) {
    <ThirdwebBarChart
      header={{
        title: "Total Events",
+        titleClassName: "mb-0.5 text-xl",
        description:
          "The number of on-chain events that have been emitted from this contract.",
      }}
@@ -191,6 +207,8 @@ function TotalEventsChart(props: ChartProps) {
        },
      }}
      chartClassName="aspect-[1.5] lg:aspect-[4.5]"
+      hideLabel={false}
+      toolTipLabelFormatter={toolTipLabelFormatter}
    />
  );
 }
@@ -227,6 +245,7 @@ function FunctionBreakdownChart(
    <ThirdwebBarChart
      header={{
        title: "Function Breakdown",
+        titleClassName: "mb-0.5 text-xl",
        description:
          "The breakdown of calls to each write function from transactions.",
      }}
@@ -247,6 +266,8 @@ function FunctionBreakdownChart(
      )}
      chartClassName="aspect-[1.5] lg:aspect-[4.5]"
      showLegend
+      hideLabel={false}
+      toolTipLabelFormatter={toolTipLabelFormatter}
    />
  );
 }
@@ -283,6 +304,7 @@ function EventBreakdownChart(
    <ThirdwebBarChart
      header={{
        title: "Event Breakdown",
+        titleClassName: "mb-0.5 text-xl",
        description: "The breakdown of events emitted by this contract.",
      }}
      data={mappedQueryData || []}
@@ -302,6 +324,8 @@ function EventBreakdownChart(
      )}
      chartClassName="aspect-[1.5] lg:aspect-[4.5]"
      showLegend
+      hideLabel={false}
+      toolTipLabelFormatter={toolTipLabelFormatter}
    />
  );
 }
@@ -320,25 +344,12 @@ const AnalyticsStat: React.FC<AnalyticsStatProps> = ({
  useTotal,
 }) => {
  return (
-    <Suspense fallback={<AnalyticsSkeleton label={label} />}>
-      <AnalyticsData
-        chainId={chainId}
-        contractAddress={contractAddress}
-        useTotal={useTotal}
-        label={label}
-      />
-    </Suspense>
-  );
-};
-
-const AnalyticsSkeleton: React.FC<{ label: string }> = ({ label }) => {
-  return (
-    <Card as={Stat} className="bg-card">
-      <StatLabel mb={{ base: 1, md: 0 }}>{label}</StatLabel>
-      <Skeleton isLoaded={false}>
-        <StatNumber>{0}</StatNumber>
-      </Skeleton>
-    </Card>
+    <AnalyticsData
+      chainId={chainId}
+      contractAddress={contractAddress}
+      useTotal={useTotal}
+      label={label}
+    />
  );
 };

@@ -355,20 +366,23 @@ const AnalyticsData: React.FC<AnalyticsStatProps> = ({
    chainId,
  });

-  const data = useMemo(() => {
-    if (!totalQuery.data) {
-      return 0;
-    }
-
-    return totalQuery.data.count;
-  }, [totalQuery.data]);
-
-  return (
-    <Card as={Stat} className="bg-card">
-      <StatLabel mb={{ base: 1, md: 0 }}>{label}</StatLabel>
-      <Skeleton isLoaded={totalQuery.isFetched}>
-        <StatNumber>{data.toLocaleString()}</StatNumber>
-      </Skeleton>
-    </Card>
-  );
+  return <AnalyticsStatUI label={label} data={totalQuery.data?.count} />;
 };
+
+function AnalyticsStatUI(props: {
+  label: string;
+  data: number | undefined;
+}) {
+  return (
+    <dl className="rounded-lg border bg-card p-4">
+      <dt className="font-semibold">{props.label}</dt>
+      <SkeletonContainer
+        skeletonData={10000}
+        loadedData={props.data}
+        render={(v) => {
+          return <dd className="font-normal text-xl">{v.toLocaleString()}</dd>;
+        }}
+      />
+    </dl>
+  );
+}
@@ -1,6 +1,5 @@
 "use client";

-import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
 import type { ThirdwebContract } from "thirdweb";
 import { ClaimConditions } from "../_components/claim-conditions/claim-conditions";
 import { ErrorPage, LoadingPage } from "../_components/page-skeletons";
@@ -9,7 +8,7 @@ import { useContractPageMetadata } from "../_hooks/useContractPageMetadata";

 export function ClaimConditionsClient(props: {
  contract: ThirdwebContract;
-  twAccount: Account | undefined;
+  isLoggedIn: boolean;
 }) {
  const metadataQuery = useContractPageMetadata(props.contract);

@@ -35,7 +34,8 @@ export function ClaimConditionsClient(props: {
    <ClaimConditions
      contract={props.contract}
      isERC20={supportedERCs.isERC20}
-      twAccount={props.twAccount}
+      isLoggedIn={props.isLoggedIn}
+      isMultiphase={true}
    />
  );
 }
@@ -23,7 +23,7 @@ export default async function Page(props: {
  const account = await getRawAccount();

  if (chainMetadata.chainId === localhost.id) {
-    return <ClaimConditionsClient contract={contract} twAccount={account} />;
+    return <ClaimConditionsClient contract={contract} isLoggedIn={!!account} />;
  }

  const {
@@ -40,7 +40,8 @@ export default async function Page(props: {
    <ClaimConditions
      contract={contract}
      isERC20={supportedERCs.isERC20}
-      twAccount={account}
+      isLoggedIn={!!account}
+      isMultiphase={true}
    />
  );
 }
--- a/Show More
+++ b/Show More